/**
 * THEME TRƯỜNG MẦM NON
 * Tùy biến từ NukeViet Default Theme 4.5x
 * PHP 7.0+  |  Layout: main-right
 * Font: Baloo 2 (tiêu đề) + Nunito (nội dung)
 * ─────────────────────────────────────────────
 */

/* =============================================
   1. BIẾN MÀU SẮC (CSS Custom Properties)
   ============================================= */
:root {
    --mn-pink:      #FF6B9D;
    --mn-pink-dark: #D81B60;
    --mn-pink-soft: #FFD6E7;
    --mn-teal:      #4ECDC4;
    --mn-teal-soft: #B2EBF2;
    --mn-yellow:    #FFD700;
    --mn-yellow-bg: #FFFDE7;
    --mn-green:     #66BB6A;
    --mn-green-dark:#388E3C;
    --mn-grass:     #7AB648;
    --mn-orange:    #FF9A5C;
    --mn-purple:    #AB47BC;
    --mn-sky:       #B3E5FC;
    --mn-dark:      #5C4A72;
    --mn-text:      #4A4A4A;
    --mn-bg:        #FFF5F8;
    --mn-white:     #ffffff;
    --mn-radius:    14px;
    --mn-radius-sm: 8px;
    --mn-shadow:    0 4px 18px rgba(255, 107, 157, 0.18);
    --mn-shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
}

/* =============================================
   2. TOÀN CỤC (Global)
   ============================================= */
body {
    font-family: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.65;
    color: var(--mn-text);
    background-color: var(--mn-bg);
    /* Nền chấm bi dễ thương */
    background-image:
        radial-gradient(circle, rgba(255,107,157,0.07) 1px, transparent 1px),
        radial-gradient(circle, rgba(78,205,196,0.05) 1px, transparent 1px);
    background-size: 28px 28px, 44px 44px;
    background-position: 0 0, 14px 14px;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Baloo 2', 'Helvetica Neue', Arial, cursive;
    color: var(--mn-dark);
}

a, a:link, a:visited, a:active {
    color: var(--mn-pink);
    transition: color 0.2s ease;
}
a:hover, a:focus {
    color: var(--mn-pink-dark);
    text-decoration: none;
}

/* =============================================
   3. DẢI CẦU VỒNG TRÊN CÙNG
   ============================================= */
.mn-rainbow-bar {
    background: linear-gradient(90deg,
        #FF6B9D 0%,
        #FF9A5C 18%,
        #FFD700 36%,
        #66BB6A 54%,
        #4ECDC4 72%,
        #42A5F5 88%,
        #AB47BC 100%
    );
    padding: 5px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.mn-rainbow-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: 'Baloo 2', cursive;
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
    letter-spacing: 0.5px;
}
.mn-star-icon {
    color: #FFD700;
    font-size: 14px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 0 10px rgba(255,150,0,0.9);
    animation: mn-spin-star 4s linear infinite;
    display: inline-block;
}
.mn-star-icon:nth-child(2) { animation-delay: 0.5s; }
.mn-star-icon:nth-child(3) { animation-delay: 1s; }
.mn-star-icon:nth-child(5) { animation-delay: 1.5s; }
.mn-star-icon:nth-child(6) { animation-delay: 2s; }

/* =============================================
   4. HEADER BAR (thanh trên logo)
   ============================================= */
.section-header-bar {
    background: linear-gradient(135deg,
        rgba(255,107,157,0.9) 0%,
        rgba(78,205,196,0.9) 100%
    );
    padding: 2px 0;
}
.header-nav,
.header-nav-inner {
    color: #fff;
}
.header-nav a {
    color: #fff;
    font-weight: 600;
}
.header-nav a:hover { color: #FFD700; }
.header-nav a.button {
    background-color: rgba(255,255,255,0.25);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.4);
}
.header-nav a.button:hover,
.header-nav a.button:focus,
.header-nav a.button.active {
    background-color: rgba(255,255,255,0.45);
    color: var(--mn-dark);
}

/* =============================================
   5. SECTION HEADER (banner area)
   ============================================= */
.mn-section-header {
    background: #bdefff; /* khớp --sky-top của banner — mở rộng bầu trời trên màn rộng */
}
.mn-section-header .preschool-hero {
    max-width: 1080px !important; /* căn trục với wraper content */
    margin: 0 auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;  /* không cần shadow khi nền cùng màu trời */
}

/* =============================================
   6. MENU NGANG (Navigation)
   ============================================= */
.mn-section-nav {
    position: relative;
    z-index: 10;
}
.second-nav .bg {
    background: linear-gradient(90deg,
        #FF6B9D 0%,
        #FF8E53 14%,
        #FFD700 28%,
        #66BB6A 42%,
        #4ECDC4 57%,
        #42A5F5 72%,
        #AB47BC 86%,
        #FF6B9D 100%
    ) !important;
    border-radius: 25px 25px 0 0;
    padding: 0 5px;
}

/* Navbar Bootstrap */
#menusite .navbar-default {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 25px 25px 0 0;
    margin: 0;
    box-shadow: none;
}
#menusite .navbar-default .navbar-nav > li {
    margin: 0 1px;
}
#menusite .navbar-default .navbar-nav > li > a {
    font-family: 'Baloo 2', cursive;
    font-size: 15px;
    font-weight: 700;
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.22);
    border-radius: 20px;
    margin: 5px 2px;
    padding: 7px 16px;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
    letter-spacing: 0.2px;
}
#menusite .navbar-default .navbar-nav > li > a:hover,
#menusite .navbar-default .navbar-nav > li > a:focus,
#menusite .navbar-default .navbar-nav > .active > a,
#menusite .navbar-default .navbar-nav > .active > a:hover,
#menusite .navbar-default .navbar-nav > .active > a:focus {
    background: rgba(255,255,255,0.32) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
#menusite .navbar-default .navbar-nav > .open > a,
#menusite .navbar-default .navbar-nav > .open > a:hover,
#menusite .navbar-default .navbar-nav > .open > a:focus {
    background: rgba(255,255,255,0.32) !important;
    color: #fff !important;
}

/* Dropdown menu */
#menusite .dropdown-menu {
    background: #fff !important;
    border: 2px solid var(--mn-pink) !important;
    border-radius: var(--mn-radius) !important;
    box-shadow: 0 8px 28px rgba(255,107,157,0.22) !important;
    padding: 8px !important;
    margin-top: 6px;
}
#menusite .dropdown-menu > li {
    border-bottom: 1px dashed var(--mn-pink-soft) !important;
}
#menusite .dropdown-menu > li:last-child {
    border-bottom: none !important;
}
#menusite .dropdown-menu > li > a {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13.5px;
    color: var(--mn-dark) !important;
    border-radius: var(--mn-radius-sm) !important;
    padding: 8px 14px !important;
    transition: background 0.2s, color 0.2s;
}
#menusite .dropdown-menu > li > a:hover,
#menusite .dropdown-menu > li > a:focus {
    background: var(--mn-pink-soft) !important;
    color: var(--mn-dark) !important;
}

/* Toggle button mobile */
#menusite .navbar-default .navbar-toggle {
    border-color: rgba(255,255,255,0.6);
    margin: 8px;
}
#menusite .navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

/* =============================================
   7. THIRD NAV (Breadcrumb + Search)
   ============================================= */
.third-nav .bg {
    background-color: #FFF0F5;
    border-radius: 0 0 var(--mn-radius-sm) var(--mn-radius-sm);
    padding: 5px 8px 4px;
}
.third-nav .row {
    border-bottom: 2px solid var(--mn-pink-soft);
}

/* Breadcrumb */
.breadcrumbs a,
.show-subs-breadcrumbs {
    background-color: var(--mn-pink-soft);
    color: var(--mn-dark);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
}
.breadcrumbs a:hover,
.show-subs-breadcrumbs:hover {
    background-color: var(--mn-pink);
    color: #fff;
}
.breadcrumbs a:before {
    border-color: var(--mn-pink-soft) var(--mn-pink-soft) var(--mn-pink-soft) transparent;
}
.breadcrumbs a:hover:before {
    border-color: var(--mn-pink) var(--mn-pink) var(--mn-pink) transparent;
}
.breadcrumbs a:after,
.show-subs-breadcrumbs:after {
    border-left-color: var(--mn-pink-soft);
}
.breadcrumbs a:hover:after,
.show-subs-breadcrumbs:hover:after {
    border-left-color: var(--mn-pink);
}

/* Thanh tìm kiếm */
.headerSearch .form-control {
    border-color: var(--mn-pink);
    border-radius: 20px 0 0 20px;
    font-family: 'Nunito', sans-serif;
}
.headerSearch .form-control:focus {
    box-shadow: 0 0 0 3px rgba(255,107,157,0.15);
}
.headerSearch .btn-info {
    background-color: var(--mn-pink);
    border-color: var(--mn-pink);
    border-radius: 0 20px 20px 0;
    color: #fff;
}
.headerSearch .btn-info:hover,
.headerSearch .btn-info:focus,
.headerSearch .btn-info:active {
    background-color: var(--mn-pink-dark);
    border-color: var(--mn-pink-dark);
    color: #fff;
}

/* =============================================
   8. BODY / CONTENT AREA
   ============================================= */
#body {
    border: 2px solid var(--mn-pink-soft);
    border-top: none;
    border-radius: 0 0 var(--mn-radius) var(--mn-radius);
    box-shadow: 0 6px 24px rgba(255,107,157,0.1);
    padding-bottom: 10px;
}

/* =============================================
   9. PANEL / BLOCK
   ============================================= */
.panel {
    border-radius: var(--mn-radius) !important;
    border: 2px dashed var(--mn-pink-soft) !important;
    box-shadow: var(--mn-shadow-sm) !important;
    margin-bottom: 16px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.panel:hover {
    box-shadow: var(--mn-shadow) !important;
    transform: translateY(-1px);
}

.panel-heading {
    border-radius: var(--mn-radius) var(--mn-radius) 0 0 !important;
    padding: 10px 14px !important;
    font-family: 'Baloo 2', cursive;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border-bottom: 2px solid transparent !important;
    background-image: none !important;
}

/* Panel mặc định (default) */
.panel-default {
    border-color: #FFD6E7 !important;
}
.panel-default > .panel-heading {
    background: linear-gradient(135deg, #FFE8F3 0%, #FFD6E7 100%);
    color: var(--mn-dark);
    border-bottom-color: #FFB3CF !important;
}
.panel-default .panel-heading a,
.panel-default .panel-heading a:visited {
    color: var(--mn-dark);
}
.panel-default .panel-heading a:hover {
    color: var(--mn-pink-dark);
    text-decoration: none;
}
/* Panel chính (primary) */
.panel-primary {
    border-color: var(--mn-pink) !important;
}
.panel-primary > .panel-heading {
    background: linear-gradient(135deg, var(--mn-pink) 0%, var(--mn-orange) 100%);
    color: #fff;
    border-bottom-color: var(--mn-pink-dark) !important;
}
.panel-primary .panel-heading a,
.panel-primary .panel-heading a:hover,
.panel-primary .panel-heading a:visited {
    color: #fff;
}

/* Panel body */
.panel-body {
    padding: 12px 14px !important;
    font-family: 'Nunito', sans-serif;
}

/* Well */
.well {
    background-color: var(--mn-yellow-bg);
    border: 1px dashed var(--mn-yellow);
    border-radius: var(--mn-radius);
}

/* =============================================
   10. BLOCK TIN TỨC (News Block)
   ============================================= */
.block_news.list-items {
    padding: 0;
    margin: 0;
}
.block_news.list-items > li {
    padding: 7px 4px 7px 22px;
    border-bottom: 1px dashed var(--mn-pink-soft);
    position: relative;
    margin-bottom: 0 !important;
    transition: background 0.15s ease;
}
.block_news.list-items > li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.block_news.list-items > li:hover {
    background: var(--mn-pink-soft);
    border-radius: var(--mn-radius-sm);
}
/* Biểu tượng dấu tròn trước mỗi tin */
.block_news.list-items > li::before {
    content: '🌟';
    position: absolute;
    left: 2px;
    top: 7px;
    font-size: 11px;
    line-height: 1;
}
.block_news.list-items > li a {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--mn-dark);
    line-height: 1.45;
}
.block_news.list-items > li a:hover {
    color: var(--mn-pink);
}

/* Ảnh thumbnail trong block_news và block_tophits */
.mn-news-thumb {
    border-radius: var(--mn-radius-sm) !important;
    border: 2px solid var(--mn-pink-soft) !important;
}

/* Ảnh thumbnail trong block_newscenter */
.mn-newscenter-thumb {
    width: 65px;
    border-radius: var(--mn-radius-sm) !important;
    border: 2px solid var(--mn-pink-soft) !important;
}

/* Nhãn "mới" */
.icon_new {
    background: var(--mn-orange);
    color: #fff;
    border-radius: 10px;
    display: inline-block;
    font-size: 9.5px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    padding: 1px 6px;
    margin-left: 5px;
    vertical-align: middle;
    line-height: 1.5;
    letter-spacing: 0.2px;
}
.icon_new::after {
    content: 'Mới';
}

/* =============================================
   11. SIDEBAR MODULE MENU
   ============================================= */
.module-menu {
    background-color: var(--mn-dark);
    border-radius: var(--mn-radius);
    overflow: hidden;
}
.module-menu a {
    background-color: #7E57C2;
    background-image: none !important;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    color: #fff;
    border-bottom-color: rgba(255,255,255,0.1);
    padding: 10px 12px 10px 16px;
    transition: background 0.2s, padding-left 0.2s;
}
.module-menu a:before {
    content: '🎈 ';
    margin-right: 4px;
}
.module-menu a.home:before {
    content: '🏠 ';
}
.module-menu a:hover,
.module-menu a.active,
.module-menu a:focus {
    background-color: var(--mn-pink) !important;
    background-image: none !important;
    color: #fff;
    padding-left: 22px;
}

/* =============================================
   12. PAGINATION
   ============================================= */
.pagination > li > a,
.pagination > li > span {
    color: var(--mn-pink);
    border-color: var(--mn-pink-soft);
    border-radius: 50% !important;
    margin: 0 2px;
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 22px;
    padding: 5px 0;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.pagination > li > a:hover,
.pagination > li > a:focus {
    background-color: var(--mn-pink-soft);
    border-color: var(--mn-pink);
    color: var(--mn-dark);
    transform: scale(1.1);
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > a:focus {
    background-color: var(--mn-pink);
    border-color: var(--mn-pink);
    color: #fff;
}

/* =============================================
   13. NÚT BẤM (Buttons)
   ============================================= */
.btn {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    border-radius: 20px;
    transition: all 0.2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background-color: var(--mn-pink);
    border-color: var(--mn-pink);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--mn-pink-dark);
    border-color: var(--mn-pink-dark);
    color: #fff;
}
.btn-info {
    background-color: var(--mn-teal);
    border-color: var(--mn-teal);
}
.btn-success {
    background-color: var(--mn-green);
    border-color: var(--mn-green-dark);
}
.btn-warning {
    background-color: var(--mn-orange);
    border-color: var(--mn-orange);
    color: #fff;
}
/* =============================================
   14. FORMS
   ============================================= */
.form-control {
    font-family: 'Nunito', sans-serif;
    border-color: var(--mn-pink-soft);
    border-radius: var(--mn-radius-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus {
    border-color: var(--mn-pink);
    box-shadow: 0 0 0 3px rgba(255,107,157,0.18);
}

/* =============================================
   15. SOCIAL ICONS
   ============================================= */
.socialList li a {
    background-color: var(--mn-pink);
    border-radius: 50% !important;
    transition: background 0.2s, transform 0.2s;
}
.socialList li a:hover {
    transform: scale(1.15) rotate(8deg);
}
.socialList li a[href*='facebook']:hover { background-color: #3b5998; }
.socialList li a[href*='youtube']:hover  { background-color: #FF0000; }
.socialList li a[href*='twitter']:hover  { background-color: #1DA1F2; }
.socialList li a[href*='google']:hover   { background-color: #DD4B39; }

/* =============================================
   16. TOOLTIP
   ============================================= */
.tooltip-inner {
    background-color: var(--mn-dark);
    border-radius: 10px;
    font-family: 'Nunito', sans-serif;
    font-size: 12.5px;
    padding: 10px 14px;
}
.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow    { border-top-color:    var(--mn-dark); }
.tooltip.right .tooltip-arrow        { border-right-color:  var(--mn-dark); }
.tooltip.left .tooltip-arrow         { border-left-color:   var(--mn-dark); }
.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow { border-bottom-color: var(--mn-dark); }

/* =============================================
   17. FOOTER CHÍNH
   ============================================= */
.section-footer-top {
    background: none;
    position: relative;
    overflow: hidden;
}

#footer {
    background: linear-gradient(180deg,
        #87CEEB 0%,
        #B3E5FC 28%,
        #E1F5FE 50%,
        #DCEDC8 65%,
        #AED581 78%,
        #8BC34A 100%
    );
    border-top: 3px solid var(--mn-sky);
    border-bottom: none;
    color: var(--mn-dark);
    padding: 30px 0 100px;
    min-height: 260px;
}
#footer, #footer a {
    color: var(--mn-dark);
}
#footer a:hover {
    color: var(--mn-pink);
}
#footer h3 {
    font-family: 'Baloo 2', cursive;
    font-size: 16px;
    font-weight: 700;
    color: var(--mn-dark);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px dashed rgba(92,74,114,0.25);
}

/* Menu trong footer */
#footer .menu {
    padding: 0;
    margin: 0;
    list-style: none;
}
#footer .menu li {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
}
#footer .menu li a {
    display: block;
    color: var(--mn-dark);
    padding: 7px 0;
    border-bottom: 1px dashed rgba(92,74,114,0.2);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 13px;
    white-space: normal;
    transition: color 0.2s, padding-left 0.2s;
}
#footer .menu li a::before {
    content: '🌼 ';
    font-size: 11px;
}
#footer .menu li a:hover {
    color: var(--mn-pink);
    border-bottom-color: var(--mn-pink);
    padding-left: 6px;
}
#footer .menu li:last-child a {
    border-bottom: none;
}

/* Copyright */
.copyright {
    color: var(--mn-dark);
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
}
.copyright span a {
    color: var(--mn-pink) !important;
    font-weight: 700;
}
.copyright span a:hover {
    color: var(--mn-pink-dark) !important;
}

/* Company info */
.company_info li { color: var(--mn-dark); }
.company_info .company_name { color: var(--mn-pink); }

/* Footer content area */
.mn-footer-content {
    position: relative;
    z-index: 2;
}

/* =============================================
   18. CẢNH ĐỘNG VẬT Ở FOOTER
   ============================================= */
.mn-animal-scene {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* Dải cỏ nền */
.mn-grass-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90px;
    background: linear-gradient(180deg, #95D46A 0%, #7AB648 100%);
    border-radius: 60% 60% 0 0 / 30px 30px 0 0;
}
.mn-grass-strip::before {
    content: '';
    position: absolute;
    top: -12px;
    left: -2%;
    right: -2%;
    height: 30px;
    background:
        radial-gradient(ellipse 12px 18px at 8% 100%, #95D46A 98%, transparent),
        radial-gradient(ellipse 12px 18px at 14% 100%, #7AB648 98%, transparent),
        radial-gradient(ellipse 12px 18px at 21% 100%, #95D46A 98%, transparent),
        radial-gradient(ellipse 12px 18px at 28% 100%, #7AB648 98%, transparent),
        radial-gradient(ellipse 12px 18px at 35% 100%, #95D46A 98%, transparent),
        radial-gradient(ellipse 12px 18px at 42% 100%, #7AB648 98%, transparent),
        radial-gradient(ellipse 12px 18px at 50% 100%, #95D46A 98%, transparent),
        radial-gradient(ellipse 12px 18px at 57% 100%, #7AB648 98%, transparent),
        radial-gradient(ellipse 12px 18px at 64% 100%, #95D46A 98%, transparent),
        radial-gradient(ellipse 12px 18px at 71% 100%, #7AB648 98%, transparent),
        radial-gradient(ellipse 12px 18px at 79% 100%, #95D46A 98%, transparent),
        radial-gradient(ellipse 12px 18px at 86% 100%, #7AB648 98%, transparent),
        radial-gradient(ellipse 12px 18px at 93% 100%, #95D46A 98%, transparent);
    background-repeat: no-repeat;
}

/* Cây và động vật */
.mn-tree,
.mn-animal,
.mn-flowers {
    position: absolute;
    bottom: 15px;
}
.mn-tree-left  { left: 1%;  bottom: 5px; }
.mn-tree-right { right: 1%; bottom: 5px; }

/* Mây nổi trong footer */
.mn-fc-cloud {
    position: absolute;
    pointer-events: none;
}
.mn-fc-cloud-1 {
    top: 5px;
    left: 15%;
    animation: mn-float-cloud 10s ease-in-out infinite;
}
.mn-fc-cloud-2 {
    top: 15px;
    right: 20%;
    animation: mn-float-cloud 7s ease-in-out infinite reverse;
    animation-delay: -3s;
}

/* =============================================
   19. FOOTER BOTTOM BAR
   ============================================= */
.footerNav2 {
    background: linear-gradient(135deg, var(--mn-dark) 0%, #7E57C2 100%);
    color: var(--mn-yellow);
    padding: 8px 0;
}
.mn-footer-bottom-text {
    display: inline-block;
    color: var(--mn-yellow);
    font-family: 'Baloo 2', cursive;
    font-size: 13px;
    font-weight: 700;
    vertical-align: middle;
    padding: 0 20px;
    opacity: 0.9;
}
.footerNav2 .theme-change a,
.footerNav2 .theme-change span {
    background-color: rgba(255,255,255,0.15);
    color: var(--mn-yellow);
    border-radius: 50%;
}
.footerNav2 .theme-change span {
    background-color: rgba(255,215,0,0.35);
}
.footerNav2 .theme-change a:hover,
.footerNav2 .theme-change span:hover {
    background-color: var(--mn-pink);
    color: #fff;
}
.footerNav2 .bttop a {
    background-color: rgba(255,255,255,0.15);
    color: var(--mn-yellow);
}
.footerNav2 .bttop a:hover {
    background-color: var(--mn-pink);
    color: #fff;
}

/* =============================================
   20. COOKIE NOTICE
   ============================================= */
.cookie-notice {
    background-color: #FFF5F8;
    border: 2px solid var(--mn-pink);
    border-radius: var(--mn-radius);
    box-shadow: var(--mn-shadow);
}
.cookie-notice a {
    color: var(--mn-pink);
    text-decoration: underline;
}

/* =============================================
   21. MODAL
   ============================================= */
#sitemodal .modal-content {
    border-radius: var(--mn-radius);
    border: 2px solid var(--mn-pink-soft);
}

/* =============================================
   22. LABEL / BADGE
   ============================================= */
.label-primary, .badge {
    background-color: var(--mn-pink);
    border-radius: 20px;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
}
.label-info    { background-color: var(--mn-teal); }
.label-success { background-color: var(--mn-green); }
.label-warning { background-color: var(--mn-orange); }

/* =============================================
   23. TABLE
   ============================================= */
.table > thead > tr > th {
    background-color: var(--mn-pink-soft);
    color: var(--mn-dark);
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    border-bottom: 2px solid var(--mn-pink);
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #FFF9FB;
}
.table-hover > tbody > tr:hover {
    background-color: #FFE8F3;
}

/* =============================================
   24. ALERT / THÔNG BÁO
   ============================================= */
.alert {
    border-radius: var(--mn-radius-sm);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
}
.alert-info {
    background-color: var(--mn-teal-soft);
    border-color: var(--mn-teal);
    color: #006064;
}
.alert-success {
    background-color: #E8F5E9;
    border-color: var(--mn-green);
}
.alert-warning {
    background-color: #FFF3E0;
    border-color: var(--mn-orange);
}
.alert-danger {
    background-color: #FCE4EC;
    border-color: var(--mn-pink);
    color: var(--mn-pink-dark);
}

/* =============================================
   25. HOẠT HÌNH (Animations)
   ============================================= */
@keyframes mn-float-cloud {
    0%, 100% { transform: translateX(0) translateY(0); }
    33%       { transform: translateX(8px) translateY(-5px); }
    66%       { transform: translateX(-5px) translateY(3px); }
}
@keyframes mn-anim-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
@keyframes mn-anim-bounce2 {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}
@keyframes mn-anim-wiggle {
    0%, 100% { transform: rotate(-4deg); }
    50%       { transform: rotate(4deg); }
}
@keyframes mn-spin-star {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Gán hoạt hình cho các con vật */
.mn-anim-bounce  { animation: mn-anim-bounce  2.4s ease-in-out infinite; }
.mn-anim-bounce2 { animation: mn-anim-bounce2 1.8s ease-in-out infinite; animation-delay: -0.6s; }
.mn-anim-wiggle  { animation: mn-anim-wiggle  2.0s ease-in-out infinite; }

/* =============================================
   26. PANEL ICON (SVG trong tiêu đề block)
   ============================================= */
.mn-panel-icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    margin-right: 5px;
}
.mn-panel-icon svg {
    display: block;
}

/* =============================================
   27. PANEL ĐỘNG VẬT (Animal Block Templates)
   ============================================= */

/* Gà — cam đậm (vàng sáng không đủ tương phản cho chữ trắng) */
.panel-mn-ga {
    border: 2px dashed #FF8F00 !important;
}
.panel-mn-ga > .panel-heading {
    background: linear-gradient(135deg, #E65100 0%, #FF8F00 100%) !important;
    color: #fff !important;
    border-bottom-color: #E65100 !important;
}
.panel-mn-ga .panel-heading a,
.panel-mn-ga .panel-heading a:hover,
.panel-mn-ga .panel-heading a:visited { color: #fff !important; }

/* Lợn — hồng đậm */
.panel-mn-lon {
    border: 2px dashed #FF6B9D !important;
}
.panel-mn-lon > .panel-heading {
    background: linear-gradient(135deg, #C2185B 0%, #E91E63 100%) !important;
    color: #fff !important;
    border-bottom-color: #AD1457 !important;
}
.panel-mn-lon .panel-heading a,
.panel-mn-lon .panel-heading a:hover,
.panel-mn-lon .panel-heading a:visited { color: #fff !important; }

/* Chim — xanh dương đậm */
.panel-mn-chim {
    border: 2px dashed #42A5F5 !important;
}
.panel-mn-chim > .panel-heading {
    background: linear-gradient(135deg, #0D47A1 0%, #1976D2 100%) !important;
    color: #fff !important;
    border-bottom-color: #0D47A1 !important;
}
.panel-mn-chim .panel-heading a,
.panel-mn-chim .panel-heading a:hover,
.panel-mn-chim .panel-heading a:visited { color: #fff !important; }

/* Cá — xanh ngọc đậm */
.panel-mn-ca {
    border: 2px dashed #26C6DA !important;
}
.panel-mn-ca > .panel-heading {
    background: linear-gradient(135deg, #00695C 0%, #00897B 100%) !important;
    color: #fff !important;
    border-bottom-color: #00695C !important;
}
.panel-mn-ca .panel-heading a,
.panel-mn-ca .panel-heading a:hover,
.panel-mn-ca .panel-heading a:visited { color: #fff !important; }

/* Thỏ — tím đậm */
.panel-mn-tho {
    border: 2px dashed #AB47BC !important;
}
.panel-mn-tho > .panel-heading {
    background: linear-gradient(135deg, #6A1B9A 0%, #8E24AA 100%) !important;
    color: #fff !important;
    border-bottom-color: #6A1B9A !important;
}
.panel-mn-tho .panel-heading a,
.panel-mn-tho .panel-heading a:hover,
.panel-mn-tho .panel-heading a:visited { color: #fff !important; }

/* =============================================
   28. BANNER HOẠT HÌNH — Thỏ & Rùa đi học
   (Nguồn: banner.html — đã tích hợp vào theme)
   ============================================= */
.preschool-hero {
    --sky-top: #bdefff;
    --sky-bottom: #e8faff;
    --grass: #8fd96a;
    --grass-dark: #6cc149;
    --road: #f5d59a;
    --road-dark: #e8c07a;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 65%);
    box-shadow: 0 12px 40px rgba(110, 180, 220, .35);
    user-select: none;
}
.preschool-hero .sun {
    position: absolute; top: 8%; left: 8%;
    width: 12%; aspect-ratio: 1;
    background: radial-gradient(circle, #ffe65c 60%, #ffd83b 100%);
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(255, 220, 60, .8);
    animation: sun-pulse 4s ease-in-out infinite;
}
.preschool-hero .sun::before {
    content: ""; position: absolute; inset: -35%; border-radius: 50%;
    background: repeating-conic-gradient(rgba(255,224,92,.55) 0deg 8deg, transparent 8deg 22deg);
    animation: spin 30s linear infinite; z-index: -1;
}
@keyframes sun-pulse { 50% { transform: scale(1.06); } }
@keyframes spin { to { transform: rotate(360deg); } }

.preschool-hero .cloud {
    position: absolute; background: #fff; border-radius: 50px;
    opacity: .92; filter: drop-shadow(0 4px 6px rgba(150,200,230,.3));
}
.preschool-hero .cloud::before,
.preschool-hero .cloud::after {
    content: ""; position: absolute; background: #fff; border-radius: 50%;
}
.preschool-hero .cloud.c1 { top: 14%; width: 11%; height: 26%; animation: drift 26s linear infinite; }
.preschool-hero .cloud.c1::before { width: 60%; height: 130%; top: -45%; left: 12%; }
.preschool-hero .cloud.c1::after  { width: 50%; height: 110%; top: -25%; right: 10%; }
.preschool-hero .cloud.c2 { top: 26%; width: 9%; height: 22%; animation: drift 34s linear infinite; animation-delay: -10s; }
.preschool-hero .cloud.c2::before { width: 55%; height: 120%; top: -40%; left: 18%; }
.preschool-hero .cloud.c2::after  { width: 48%; height: 100%; top: -20%; right: 8%; }
@keyframes drift { from { transform: translateX(-30vw); } to { transform: translateX(120vw); } }

.preschool-hero .school {
    position: absolute; bottom: 28%; right: 6%; width: 30%; aspect-ratio: 1.25;
    z-index: 1; filter: drop-shadow(0 10px 18px rgba(90,120,150,.22));
}
.preschool-hero .school-body {
    position: absolute; bottom: 0; left: 10%; width: 80%; height: 56%;
    background: linear-gradient(180deg, #fff3e0 0%, #ffe6c7 100%);
    border-radius: 10px 10px 6px 6px; border: 3px solid #f0c896;
    box-shadow: inset 0 -10% 0 rgba(240,180,120,.25);
}
.preschool-hero .school-body::after {
    content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 14%;
    background: #f3b06a; border-radius: 0 0 4px 4px;
}
.preschool-hero .roof {
    position: absolute; bottom: 54%; left: 4%; width: 92%; height: 26%;
    background: linear-gradient(180deg, #ff8aa8 0%, #ef5f86 100%);
    border-radius: 60% 60% 18% 18% / 100% 100% 22% 22%;
    border: 3px solid #e04f78; box-shadow: inset 0 6px 0 rgba(255,255,255,.35);
}
.preschool-hero .roof::before {
    content: ""; position: absolute; bottom: 8%; left: 6%; width: 88%; height: 30%;
    background: repeating-linear-gradient(90deg,#ffffff55 0 6%,transparent 6% 12%);
    border-radius: 40%;
}
.preschool-hero .bell-tower {
    position: absolute; bottom: 72%; left: 50%; transform: translateX(-50%);
    width: 16%; height: 26%;
    background: linear-gradient(180deg,#fff3e0,#ffe6c7);
    border: 3px solid #f0c896; border-radius: 6px 6px 0 0; z-index: -1;
}
.preschool-hero .bell-tower::before {
    content: ""; position: absolute; bottom: 88%; left: 50%; transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 60% solid transparent; border-right: 60% solid transparent;
    border-bottom: 70% solid #ef5f86;
}
.preschool-hero .clock {
    position: absolute; top: 30%; left: 50%; transform: translateX(-50%);
    width: 55%; aspect-ratio: 1; background: #fff; border: 3px solid #f3b06a; border-radius: 50%;
}
.preschool-hero .clock::before,
.preschool-hero .clock::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    background: #e04f78; border-radius: 2px; transform-origin: bottom center;
}
.preschool-hero .clock::before { width: 2px; height: 30%; transform: translate(-50%,-100%) rotate(40deg); }
.preschool-hero .clock::after  { width: 2px; height: 22%; transform: translate(-50%,-100%) rotate(-70deg); }
.preschool-hero .flag {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    width: 3px; height: 55%; background: #8a6f5c; border-radius: 2px;
}
.preschool-hero .flag::after {
    content: ""; position: absolute; top: 0; left: 3px;
    width: 18px; height: 12px; background: #ff5b5b; border-radius: 0 2px 2px 0;
    animation: wave 1.5s ease-in-out infinite; transform-origin: left center;
}
@keyframes wave { 50% { transform: skewX(-14deg) scaleX(.88); } }
.preschool-hero .signboard {
    position: absolute; bottom: 62%; left: 50%; transform: translateX(-50%);
    width: 80%; padding: 2.4% 3%;
    background: linear-gradient(180deg,#4db8ff,#2f93e8);
    border: 3px solid #1f78c8; border-radius: 8px;
    box-shadow: 0 4px 0 #1f78c8, inset 0 2px 0 rgba(255,255,255,.4);
    text-align: center; z-index: 3;
}
.preschool-hero .signboard span {
    display: block; color: #fff; font-weight: 800; line-height: 1.15;
    font-size: clamp(7px, 1.45vw, 16px);
    text-shadow: 1px 1px 0 rgba(0,0,0,.18); letter-spacing: .3px;
}
.preschool-hero .door {
    position: absolute; bottom: 14%; left: 50%; transform: translateX(-50%);
    width: 22%; height: 32%;
    background: linear-gradient(180deg,#ffd76b,#f6b73c);
    border: 3px solid #e09a28; border-radius: 50% 50% 0 0;
}
.preschool-hero .door::after {
    content: ""; position: absolute; top: 14%; left: 50%; transform: translateX(-50%);
    width: 3px; height: 80%; background: #e09a28;
}
.preschool-hero .step {
    position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
    width: 34%; height: 6%; background: #f3b06a; border-radius: 4px;
}
.preschool-hero .win {
    position: absolute; width: 15%; aspect-ratio: 1; bottom: 20%;
    background: radial-gradient(circle at 35% 30%,#cdeeff,#9fd6ff);
    border: 3px solid #f0c896; border-radius: 50%;
}
.preschool-hero .win::before,
.preschool-hero .win::after { content: ""; position: absolute; background: #f0c896; }
.preschool-hero .win::before { top: 50%; left: 0; width: 100%; height: 3px; transform: translateY(-50%); }
.preschool-hero .win::after  { left: 50%; top: 0; height: 100%; width: 3px; transform: translateX(-50%); }
.preschool-hero .win.l { left: 14%; }
.preschool-hero .win.r { right: 14%; }
.preschool-hero .fence {
    position: absolute; bottom: 0; left: -4%; width: 108%; height: 14%; z-index: 2;
    background: repeating-linear-gradient(90deg,#ffffff 0 3%,transparent 3% 9%);
}
.preschool-hero .fence::before {
    content: ""; position: absolute; top: 35%; left: 0; width: 100%; height: 18%;
    background: #fff; border-radius: 3px;
}
.preschool-hero .ground {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 32%;
    background: linear-gradient(180deg, var(--grass) 0%, var(--grass-dark) 100%); z-index: 2;
}
.preschool-hero .road {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 16%;
    background: var(--road); border-top: 4px solid var(--road-dark); z-index: 3;
}
.preschool-hero .road::after {
    content: ""; position: absolute; top: 45%; left: 0; width: 100%; height: 10%;
    background: repeating-linear-gradient(90deg, #fff 0 5%, transparent 5% 12%);
    opacity: .7;
}
.preschool-hero .flower {
    position: absolute; bottom: 14%; width: 3%; aspect-ratio: 1; z-index: 4;
    animation: sway 3s ease-in-out infinite; transform-origin: bottom center;
}
.preschool-hero .flower::before {
    content: ""; position: absolute; bottom: 0; left: 45%; width: 8%; height: 120%;
    background: #4ba84b; border-radius: 2px;
}
.preschool-hero .petals { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; aspect-ratio: 1; }
.preschool-hero .flower .core {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 60%; aspect-ratio: 1; border-radius: 50%;
    background: #ffd83b;
    box-shadow:
        0 -0.7vw 0 0.25vw #ff8fab, 0 0.7vw 0 0.25vw #ff8fab,
        -0.7vw 0 0 0.25vw #ff8fab, 0.7vw 0 0 0.25vw #ff8fab;
}
.preschool-hero .flower.f2 .core {
    box-shadow:
        0 -0.7vw 0 0.25vw #c08bff, 0 0.7vw 0 0.25vw #c08bff,
        -0.7vw 0 0 0.25vw #c08bff, 0.7vw 0 0 0.25vw #c08bff;
}
.preschool-hero .flower.f3 .core {
    box-shadow:
        0 -0.7vw 0 0.25vw #7ec8ff, 0 0.7vw 0 0.25vw #7ec8ff,
        -0.7vw 0 0 0.25vw #7ec8ff, 0.7vw 0 0 0.25vw #7ec8ff;
}
.preschool-hero .flower.f1 { left: 6%; }
.preschool-hero .flower.f2 { left: 20%; animation-delay: -1s; }
.preschool-hero .flower.f3 { right: 30%; animation-delay: -2s; }
@keyframes sway { 50% { transform: rotate(5deg); } }
.preschool-hero .bush {
    position: absolute; bottom: 16%; z-index: 4; width: 9%; aspect-ratio: 2;
    background: var(--grass-dark); border-radius: 50% 50% 0 0;
}
.preschool-hero .bush.b1 { left: 34%; }
.preschool-hero .bush.b2 { right: 5%; width: 7%; }
.preschool-hero .butterfly {
    position: absolute; top: 40%; left: 30%;
    font-size: clamp(16px, 2.4vw, 30px); z-index: 6;
    animation: fly 14s ease-in-out infinite;
}
@keyframes fly {
    0%   { transform: translate(0,0) rotate(0); }
    25%  { transform: translate(20vw,-6vh) rotate(15deg); }
    50%  { transform: translate(40vw,4vh) rotate(-10deg); }
    75%  { transform: translate(18vw,8vh) rotate(8deg); }
    100% { transform: translate(0,0) rotate(0); }
}
.preschool-hero .characters {
    position: absolute; bottom: 13%; left: 0;
    z-index: 5; display: flex; align-items: flex-end; gap: 0;
    animation: journey 34s linear infinite;
    transform-origin: center bottom;
}
.preschool-hero .walker { animation: bob 0.7s ease-in-out infinite; transform-origin: bottom center; }
.preschool-hero .walker.turtle { animation-delay: 0.35s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7%); } }

/* Đi từ mép trái → trường → quay đầu → về mép trái */
@keyframes journey {
    0%   { transform: translateX(0) scaleX(-1);
           animation-timing-function: ease-in-out; }
    44%  { transform: translateX(clamp(0px, 46vw, 540px)) scaleX(-1);
           animation-timing-function: steps(1, end); }
    49%  { transform: translateX(clamp(0px, 46vw, 540px)) scaleX(1);
           animation-timing-function: steps(1, end); }
    55%  { transform: translateX(clamp(0px, 46vw, 540px)) scaleX(1);
           animation-timing-function: ease-in-out; }
    94%  { transform: translateX(0) scaleX(1);
           animation-timing-function: steps(1, end); }
    97%  { transform: translateX(0) scaleX(-1);
           animation-timing-function: steps(1, end); }
    100% { transform: translateX(0) scaleX(-1); }
}

/* --- Thỏ --- */
.preschool-hero .rabbit { position: relative; width: clamp(90px, 14vw, 150px); aspect-ratio: 0.8; }
.preschool-hero .r-ear  { position: absolute; top: -34%; width: 18%; height: 46%; background: #fff; border: 3px solid #e7e0d8; border-radius: 50% 50% 40% 40%; }
.preschool-hero .r-ear::after { content: ""; position: absolute; inset: 22% 28%; background: #ffc2d4; border-radius: 50%; }
.preschool-hero .r-ear.left  { left: 28%; transform: rotate(-12deg); animation: ear 1.4s ease-in-out infinite; transform-origin: bottom center; }
.preschool-hero .r-ear.right { left: 54%; transform: rotate(12deg); animation: ear 1.4s ease-in-out infinite reverse; transform-origin: bottom center; }
@keyframes ear { 50% { transform: rotate(0deg); } }
.preschool-hero .r-head { position: absolute; top: 2%; left: 24%; width: 52%; aspect-ratio: 1; background: #fff; border: 3px solid #e7e0d8; border-radius: 50%; z-index: 2; }
.preschool-hero .r-body { position: absolute; bottom: 6%; left: 20%; width: 60%; height: 55%; background: #fff; border: 3px solid #e7e0d8; border-radius: 46% 46% 40% 40%; }
.preschool-hero .face   { position: absolute; top: 34%; left: 50%; transform: translateX(-50%); width: 60%; z-index: 3; }
.preschool-hero .eye    { position: absolute; top: 0; width: 14%; aspect-ratio: 1; background: #3a3a3a; border-radius: 50%; }
.preschool-hero .r-head .eye.l { left: 24%; }
.preschool-hero .r-head .eye.r { right: 24%; }
.preschool-hero .r-head .eye::after,
.preschool-hero .t-head .eye::after { content: ""; position: absolute; top: 14%; left: 18%; width: 38%; aspect-ratio: 1; background: #fff; border-radius: 50%; }
.preschool-hero .r-nose   { position: absolute; top: 42%; left: 50%; transform: translateX(-50%); width: 9%; aspect-ratio: 1; background: #ff8fab; border-radius: 50%; z-index: 3; }
.preschool-hero .r-cheek  { position: absolute; top: 46%; width: 13%; aspect-ratio: 1; background: #ffc2d4; border-radius: 50%; opacity: .8; z-index: 3; }
.preschool-hero .r-cheek.l { left: 18%; }
.preschool-hero .r-cheek.r { right: 18%; }

/* --- Rùa --- */
.preschool-hero .turtle { position: relative; width: clamp(95px, 15vw, 160px); aspect-ratio: 1; }
.preschool-hero .shell  { position: absolute; top: 14%; left: 14%; width: 72%; height: 60%; background: radial-gradient(circle at 40% 30%, #9be07a, #5fb83f); border: 3px solid #4a9c30; border-radius: 50% 50% 45% 45%; z-index: 2; }
.preschool-hero .shell::before {
    content: ""; position: absolute; inset: 18%;
    border: 3px solid #4a9c30; border-radius: 50%;
    background: linear-gradient(#4a9c30,#4a9c30) center/3px 100% no-repeat,
                linear-gradient(#4a9c30,#4a9c30) center/100% 3px no-repeat;
}
.preschool-hero .t-head { position: absolute; top: 24%; left: -4%; width: 34%; aspect-ratio: 1; background: #a4d97a; border: 3px solid #7bbd52; border-radius: 50%; z-index: 3; }
.preschool-hero .t-head .eye { top: 30%; }
.preschool-hero .t-head .eye.l { left: 30%; }
.preschool-hero .t-head .eye.r { left: 56%; }
.preschool-hero .t-cheek { position: absolute; top: 58%; left: 20%; width: 24%; aspect-ratio: 1; background: #ffc2d4; border-radius: 50%; opacity: .75; z-index: 4; }
.preschool-hero .t-leg  { position: absolute; bottom: 6%; width: 18%; height: 24%; background: #8fce67; border: 3px solid #7bbd52; border-radius: 40%; z-index: 1; }
.preschool-hero .t-leg.front { left: 24%; animation: step 0.7s ease-in-out infinite; transform-origin: top center; }
.preschool-hero .t-leg.back  { right: 20%; animation: step 0.7s ease-in-out infinite reverse; transform-origin: top center; }
@keyframes step { 50% { transform: rotate(18deg); } }
.preschool-hero .t-tail { position: absolute; bottom: 18%; right: 6%; width: 12%; height: 8%; background: #8fce67; border-radius: 50%; }

/* --- Cặp sách --- */
.preschool-hero .backpack { position: absolute; width: 38%; height: 42%; border-radius: 30% 30% 35% 35%; z-index: 1; }
.preschool-hero .backpack::after { content: ""; position: absolute; top: 30%; left: 25%; width: 50%; height: 30%; background: rgba(255,255,255,.5); border-radius: 8px; }
.preschool-hero .rabbit .backpack { top: 32%; right: -6%; background: #ff7eb6; border: 3px solid #e85d9c; }
.preschool-hero .turtle .backpack { top: 6%; left: 30%; width: 30%; height: 34%; background: #5aa9ff; border: 3px solid #3b86d6; }

/* --- Tay nắm tay --- */
.preschool-hero .holding-hands { position: absolute; bottom: 32%; left: 50%; transform: translateX(-50%); width: 14%; height: 6%; z-index: 4; }
.preschool-hero .hand { position: absolute; top: 0; width: 42%; aspect-ratio: 1; border-radius: 50%; }
.preschool-hero .hand.l { left: 0; background: #fff; border: 3px solid #e7e0d8; animation: bob 0.7s ease-in-out infinite; }
.preschool-hero .hand.r { right: 0; background: #a4d97a; border: 3px solid #7bbd52; animation: bob 0.7s ease-in-out infinite 0.35s; }

/* --- Lời chào --- */
.preschool-hero .greet {
    position: absolute; top: 6%; left: 50%; transform: translateX(-50%);
    color: #ff5b8a; font-weight: 800;
    font-size: clamp(18px, 3.4vw, 40px);
    text-shadow: 2px 2px 0 #fff, -1px -1px 0 #fff;
    z-index: 7; animation: pop 2.5s ease-in-out infinite;
    text-align: center; white-space: nowrap;
}
@keyframes pop { 50% { transform: translateX(-50%) scale(1.05); } }

/* =============================================
   29. BLOCK TIN TỨC — KIỂU FEATURED (ảnh trên)
   Dùng template: block_news_featured.tpl
   ============================================= */
.mn-news-featured-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
}

.mn-feat-card {
    background: #fff;
    border-radius: var(--mn-radius);
    border: 1.5px solid var(--mn-pink-soft);
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.mn-feat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(255, 107, 157, 0.24);
}

.mn-feat-img-link {
    display: block;
    position: relative;
    overflow: hidden;
    height: 190px;
    background: var(--mn-pink-soft);
}
.mn-feat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.mn-feat-card:hover .mn-feat-img {
    transform: scale(1.08);
}
.mn-feat-img-link::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(transparent, rgba(92, 74, 114, 0.28));
    pointer-events: none;
}

.mn-feat-badge {
    position: absolute;
    top: 10px; left: 10px;
    background: linear-gradient(135deg, var(--mn-pink) 0%, var(--mn-orange) 100%);
    color: #fff;
    font-family: 'Baloo 2', cursive;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
    box-shadow: 0 3px 10px rgba(255, 107, 157, 0.45);
    z-index: 2;
    letter-spacing: 0.3px;
    animation: mn-feat-badge-pop 2s ease-in-out infinite;
}
@keyframes mn-feat-badge-pop {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.06); }
}

.mn-feat-body {
    padding: 13px 15px 15px;
}

.mn-feat-title {
    margin: 0 0 7px;
    font-size: 0;
    line-height: 0;
}
.mn-feat-title a {
    font-family: 'Baloo 2', cursive;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--mn-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}
.mn-feat-title a:hover { color: var(--mn-pink); }

.mn-feat-excerpt {
    font-family: 'Nunito', sans-serif;
    font-size: 12.5px;
    color: #888;
    line-height: 1.55;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mn-feat-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--mn-pink);
    padding: 3px 10px 3px 8px;
    border-radius: 20px;
    border: 1.5px solid var(--mn-pink-soft);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.mn-feat-more:hover {
    background: var(--mn-pink);
    border-color: var(--mn-pink);
    color: #fff;
}
.mn-feat-more span {
    display: inline-block;
    transition: transform 0.2s;
}
.mn-feat-more:hover span { transform: translateX(3px); }

/* =============================================
   30. BLOCK TIN TỨC — DANH SÁCH THUMB PHẢI
   Dùng template: block_news_thumbright.tpl
   ============================================= */
.mn-news-thumbright-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mn-thr-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 6px 9px 4px;
    position: relative;
    border-radius: var(--mn-radius-sm);
    transition: background 0.18s ease;
    cursor: pointer;
}
.mn-thr-item:hover { background: var(--mn-pink-soft); }

/* Đường ngăn cách gradient */
.mn-thr-item::after {
    content: '';
    position: absolute;
    bottom: 0; left: 4px; right: 4px;
    height: 1.5px;
    background: linear-gradient(90deg,
        var(--mn-pink) 0%,
        var(--mn-teal) 40%,
        var(--mn-yellow) 70%,
        transparent 100%
    );
    opacity: 0.35;
    border-radius: 2px;
    transition: opacity 0.2s;
}
.mn-thr-item:last-child::after { display: none; }
.mn-thr-item:hover::after { opacity: 0.7; }

/* Dot icon */
.mn-thr-item::before {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mn-pink) 0%, var(--mn-teal) 100%);
    box-shadow: 0 0 0 2px var(--mn-pink-soft);
    transition: box-shadow 0.2s, transform 0.2s;
}
.mn-thr-item:hover::before {
    box-shadow: 0 0 0 3px var(--mn-pink);
    transform: scale(1.3);
}

.mn-thr-content {
    flex: 1;
    min-width: 0;
}

.mn-thr-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.45;
    color: var(--mn-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}
.mn-thr-title:hover { color: var(--mn-pink); }

.mn-badge-new {
    display: inline-block;
    background: var(--mn-orange);
    color: #fff;
    font-size: 9.5px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 5px;
    vertical-align: middle;
    line-height: 1.5;
    letter-spacing: 0.2px;
}

.mn-thr-thumb {
    flex-shrink: 0;
    display: block;
    width: 76px;
    height: 58px;
    border-radius: var(--mn-radius-sm);
    overflow: hidden;
    border: 2px solid var(--mn-pink-soft);
    transition: border-color 0.2s, transform 0.22s ease, box-shadow 0.22s ease;
}
.mn-thr-item:hover .mn-thr-thumb {
    border-color: var(--mn-pink);
    transform: scale(1.06) rotate(-1deg);
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);
}
.mn-thr-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.mn-thr-item:hover .mn-thr-img { transform: scale(1.08); }

/* =============================================
   31. VIEWCAT — Danh sách chuyên mục trang chủ
   Dùng template: viewcat_main_right.tpl / viewcat_main_left.tpl / viewcat_main_bottom.tpl / v.v.
   ============================================= */
.news_column {
    margin-bottom: 20px;
}

/* Ảnh tin chính dùng trong các viewcat template */
.imghome {
    border-radius: var(--mn-radius-sm) !important;
    border: 2px solid var(--mn-pink-soft) !important;
    margin-right: 10px !important;
    margin-bottom: 6px;
    transition: border-color 0.2s;
}
.imghome:hover { border-color: var(--mn-pink) !important; }

/* Danh sách related dùng trong viewcat_main_left, viewcat_main_bottom */
.related.list-items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.related.list-items > li {
    padding: 7px 4px 7px 22px;
    border-bottom: 1px dashed var(--mn-pink-soft);
    position: relative;
    transition: background 0.15s ease;
}
.related.list-items > li:last-child { border-bottom: none; padding-bottom: 0; }
.related.list-items > li:hover {
    background: var(--mn-pink-soft);
    border-radius: var(--mn-radius-sm);
}
.related.list-items > li::before {
    content: '🌟';
    position: absolute;
    left: 2px;
    top: 7px;
    font-size: 11px;
    line-height: 1;
}
.related.list-items > li a {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--mn-dark);
    line-height: 1.45;
    display: block;
}
.related.list-items > li a:hover { color: var(--mn-pink); text-decoration: none; }

/* ——— Thanh tiêu đề chuyên mục ——— */
.mn-vc-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--mn-pink) 0%, var(--mn-orange) 100%);
    border-radius: var(--mn-radius-sm);
    padding: 9px 14px;
    margin-bottom: 12px;
    box-shadow: 0 3px 10px rgba(255,107,157,0.25);
}
/* Màu gradient khớp theo loại panel thú */
.panel-mn-tho  .mn-vc-cat-header { background: linear-gradient(135deg, #6A1B9A 0%, #AB47BC 100%); box-shadow: 0 3px 10px rgba(106,27,154,0.25); }
.panel-mn-chim .mn-vc-cat-header { background: linear-gradient(135deg, #0D47A1 0%, #1976D2 100%); box-shadow: 0 3px 10px rgba(13,71,161,0.25); }
.panel-mn-ca   .mn-vc-cat-header { background: linear-gradient(135deg, #00695C 0%, #26C6DA 100%); box-shadow: 0 3px 10px rgba(0,105,92,0.25); }
.panel-mn-lon  .mn-vc-cat-header { background: linear-gradient(135deg, #C2185B 0%, #FF6B9D 100%); box-shadow: 0 3px 10px rgba(194,24,91,0.25); }
.panel-mn-ga   .mn-vc-cat-header { background: linear-gradient(135deg, #E65100 0%, #FF9A5C 100%); box-shadow: 0 3px 10px rgba(230,81,0,0.25); }
.panel-primary .mn-vc-cat-header { background: linear-gradient(135deg, var(--mn-pink) 0%, var(--mn-orange) 100%); }

.mn-vc-cat-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: 16px;
    margin: 0;
    line-height: 1.3;
}
.mn-vc-cat-title .mn-panel-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2));
}
.mn-vc-cat-title > a,
.mn-vc-cat-title > a:visited {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.mn-vc-cat-title > a:hover {
    color: #FFE66D;
    text-decoration: none;
}
.mn-vc-more-link {
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    flex-shrink: 0;
}
.mn-vc-more-link:hover { color: #FFE66D; text-decoration: none; }
.mn-vc-subcat-link {
    display: inline-block;
    font-family: 'Nunito', sans-serif;
    font-size: 11.5px;
    color: var(--mn-dark);
    background: var(--mn-pink-soft);
    border-radius: 10px;
    padding: 1px 8px;
    margin: 0 4px 6px 0;
}
.mn-vc-subcat-link:hover { background: var(--mn-pink); color: #fff; text-decoration: none; }

/* ——— Tin nổi bật chính (ảnh trên, nội dung dưới) ——— */
.mn-vc-img-link {
    display: block;
    border-radius: var(--mn-radius-sm);
    overflow: hidden;
    margin-bottom: 10px;
    border: 2px solid var(--mn-pink-soft);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mn-vc-img-link:hover {
    border-color: var(--mn-pink);
    box-shadow: var(--mn-shadow);
}
.mn-vc-main-img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.mn-vc-img-link:hover .mn-vc-main-img {
    transform: scale(1.04);
}
.mn-vc-title {
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: 17px;
    margin: 0 0 6px 0;
    line-height: 1.4;
}
.mn-vc-title > a {
    color: var(--mn-dark);
}
.mn-vc-title > a:hover {
    color: var(--mn-pink);
    text-decoration: none;
}
.mn-vc-meta {
    font-size: 12px;
    margin-bottom: 8px;
}

/* ——— Danh sách tin bên phải (tiêu đề+trích yếu trái, ảnh phải) ——— */
.mn-related-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mn-related-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 6px;
    border-bottom: 1px dashed var(--mn-pink-soft);
    border-radius: var(--mn-radius-sm);
    transition: background 0.18s ease;
}
.mn-related-item:last-child {
    border-bottom: none;
}
.mn-related-item:hover {
    background: var(--mn-pink-soft);
}
.mn-related-body {
    flex: 1;
    min-width: 0;
}
.mn-related-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--mn-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    margin-bottom: 4px;
}
.mn-related-title:hover {
    color: var(--mn-pink);
    text-decoration: none;
}
.mn-related-excerpt {
    font-family: 'Nunito', sans-serif;
    font-size: 11.5px;
    color: #888;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}
.mn-related-img-link {
    flex-shrink: 0;
    display: block;
    width: 78px;
    height: 60px;
    border-radius: var(--mn-radius-sm);
    overflow: hidden;
    border: 2px solid var(--mn-pink-soft);
    transition: border-color 0.2s, transform 0.22s ease;
}
.mn-related-item:hover .mn-related-img-link {
    border-color: var(--mn-pink);
    transform: scale(1.04) rotate(-1deg);
}
.mn-related-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.mn-related-item:hover .mn-related-img {
    transform: scale(1.08);
}

/* =============================================
   32. RESPONSIVE
   ============================================= */
@media (max-width: 1100px) {
    .wraper { width: 100%; padding: 0 10px; }
}

@media (max-width: 991px) {
    #footer { padding-bottom: 110px; }
}

@media (max-width: 767px) {
    .mn-rainbow-bar { padding: 4px 0; }
    .mn-rainbow-inner { font-size: 11px; gap: 6px; }
    .second-nav .bg {
        border-radius: 0;
        background-size: 200% !important;
    }
    #menusite .navbar-default { border-radius: 0; }

    #footer { padding-bottom: 120px; }
    .mn-tree-left  { left: -2%; }
    .mn-tree-right { right: -2%; }

    /* Ẩn bớt một số con vật trên mobile */
    .mn-animal:nth-child(4),
    .mn-animal:nth-child(6) { display: none; }
}

@media (max-width: 479px) {
    .mn-animal-scene { height: 100px; }
    .mn-grass-strip  { height: 75px; }
    .mn-tree { display: none; }
    .mn-flowers { display: none; }
}