/* ============================================================================
   custom.css — Theme MOBILE (mobile_default) của site mnhoaban
   Đồng bộ màu sắc + họa tiết với theme PC (preschool2): tông hồng pastel,
   bo góc mềm, đổ bóng nhẹ, dải hoa trang trí. File này nạp SAU style.css
   (xem theme.php) nên có thể ghi đè thẳng, hạn chế !important trừ khi cần
   thắng jquery.metisMenu.css (nạp muộn hơn, qua JS) hoặc rule !important gốc.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&display=swap');

:root{
    --pink:#e8449b;
    --pink-dark:#c02579;
    --pink-light:#ffe7f2;
    --pink-light2:#ffd0e6;
    --orange:#f0942a;
    --blue:#3f8fdb;
    --green:#39b56a;
    --purple:#a94fd0;
    --teal:#1fb0c4;
    --red:#e63950;
}

/* ---------- 1. Nền trang + link ----------
   Chỉ dùng hồng làm MÀU NHẤN (nút, tiêu đề khối, mục đang chọn), còn link/chữ nội dung
   dùng màu xanh than trung tính -> đỡ "hồng lụt" toàn trang, đọc tin cũng dễ hơn. */
body{
    background:#fbf8fa !important;
    padding-top:52px;
}
a, a:link, a:active, a:visited{ color:#2f5673; }
a:hover{ color:var(--pink); }

/* Tiêu đề tin (trong khối .panel-default .panel-body): giữ hồng cho nổi bật */
.panel-body h2 a, .panel-body h2 a:link, .panel-body h2 a:visited,
.panel-body h3 a, .panel-body h3 a:link, .panel-body h3 a:visited{
    color:var(--pink-dark) !important;
}
.panel-body h2 a:hover, .panel-body h3 a:hover{ color:var(--pink) !important; }

/* "Các tin khác": đổi màu khác tiêu đề (xanh dương) cho phân biệt rõ 2 nhóm */
.related a, .related a:link, .related a:visited{ color:var(--blue) !important; }
.related a:hover{ color:#2f5673 !important; }

/* ---------- 2. Header: logo + nút menu/đăng nhập ----------
   Làm BÓNG thanh này (trước phẳng): chồng thêm lớp gradient sáng-tối dọc lên trên màu nền,
   cộng vệt sáng bầu dục ở nửa trên -> hiệu ứng thuỷ tinh/kẹo bóng, đỡ phẳng. */
#header{
    position:relative;
    overflow:hidden;
    min-height:52px;
    background:linear-gradient(135deg,#ff56d8,#b36bff 50%,#5ecbff) !important;
    background-image:
        linear-gradient(180deg,
            rgba(255,255,255,.6) 0%,
            rgba(255,255,255,.18) 38%,
            rgba(255,255,255,0) 55%,
            rgba(0,0,0,.08) 100%),
        linear-gradient(135deg,#ff56d8,#b36bff 50%,#5ecbff) !important;
    border-bottom:0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.75),
        inset 0 -2px 4px rgba(0,0,0,.10),
        0 2px 12px rgba(120,80,220,.30);
}
/* vệt sáng bầu dục vắt qua nửa trên header, kiểu bóng thuỷ tinh -> đậm hơn cho rõ độ bóng */
#header::before{
    content:"";
    position:absolute;
    left:-4%; right:-4%; top:-34%;
    height:70%;
    background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,0));
    border-radius:50%;
    pointer-events:none;
    z-index:0;
}
/* CHÚ Ý: .logo vốn position:absolute (style.css gốc) — không được đổi thành relative,
   nếu không nó rơi vào luồng chảy và cộng dồn chiều cao với .site-buttons (đã từng bị lỗi
   này khiến header cao gấp đôi, che mất tin bên dưới). Chỉ nâng z-index, giữ nguyên position. */
#header .logo{ z-index:1; }
#header .site-buttons{ position:relative; z-index:1; }
#header .logo{ height:52px; line-height:52px; }
#header .logo img{ max-height:38px; border-radius:8px; background:#fff; padding:2px; }
#header .site-buttons{ height:52px; }
#header .site-buttons > div{ height:52px; }
.mbt, .mbt-lg{
    background-image:none !important;
    background:rgba(255,255,255,.22) !important;
    border-radius:50% !important;
    color:#fff !important;
}
.mbt:hover, .active .mbt,
.mbt-lg:hover, .active .mbt-lg{
    background:rgba(255,255,255,.4) !important;
}
#header .site-buttons a.user{ box-shadow:0 0 0 2px rgba(255,255,255,.6); }


/* ---------- 3. Menu kéo ra (hamburger) + panel công cụ ---------- */
#tip{ border-radius:0 0 0 16px; overflow:hidden; box-shadow:-6px 0 24px rgba(30,110,176,.18); }
.metismenu .sidebar{ background:var(--pink-dark); }
.metismenu .sidebar-nav{
    background:var(--pink) !important;
    background-image:linear-gradient(to right, var(--pink-dark) 4px, var(--pink) 4px) !important;
}
.metismenu .sidebar-nav ul a{
    border-top-color:rgba(255,255,255,.18) !important;
}
.metismenu .sidebar-nav ul a:hover,
.metismenu .sidebar-nav ul a:focus,
.metismenu .sidebar-nav ul a:active{
    background-image:linear-gradient(to right, #ffd43b 4px, rgba(0,0,0,0) 4px) !important;
}
.metismenu .sidebar-nav ul ul a{ background-color:var(--pink-dark) !important; }
.metismenu .sidebar-nav ul ul a:hover,
.metismenu .sidebar-nav ul ul a:focus,
.metismenu .sidebar-nav ul ul a:active{ background-color:#a01c60 !important; }
/* 7 mục cấp 1 đầu tiên tô màu cầu vồng như menu PC, dễ phân biệt chuyên mục */
.metismenu .sidebar-nav > ul > li:nth-child(7n+1) > a{ background-color:var(--red) !important; }
.metismenu .sidebar-nav > ul > li:nth-child(7n+2) > a{ background-color:var(--blue) !important; }
.metismenu .sidebar-nav > ul > li:nth-child(7n+3) > a{ background-color:var(--green) !important; }
.metismenu .sidebar-nav > ul > li:nth-child(7n+4) > a{ background-color:var(--purple) !important; }
.metismenu .sidebar-nav > ul > li:nth-child(7n+5) > a{ background-color:var(--orange) !important; }
.metismenu .sidebar-nav > ul > li:nth-child(7n+6) > a{ background-color:var(--teal) !important; }
.metismenu .sidebar-nav > ul > li:nth-child(7n)   > a{ background-color:var(--pink) !important; }
.metismenu .sidebar-nav > ul > li > ul a{ background-color:var(--pink-dark) !important; } /* menu con giữ 1 màu cho dễ đọc */

/* ---------- 4. Khối nội dung: panel bo góc, tiêu đề dải hồng ---------- */
.panel{
    border:0;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 4px 14px rgba(196,30,110,.10);
}
.panel-primary,
.panel-default{
    border:0;
}
.panel-primary > .panel-heading,
.panel-default > .panel-heading{
    background:linear-gradient(180deg,var(--pink-light),var(--pink-light2)) !important;
    border:0 !important;
    border-bottom:2px solid #ff92be !important;
    color:var(--pink-dark) !important;
    font-family:"Baloo 2","Comic Sans MS",Cambria,Georgia,serif;
    font-weight:800;
    letter-spacing:.3px;
    padding:11px 14px;
}
.panel-body{ background:#fffafc; }

/* ---------- 5. Danh sách tin (list-group) ---------- */
.list-group{ border-radius:12px; overflow:hidden; }
.list-group-item,
.list-group a.show{
    background:#fff;
    border-color:#ffe3ef !important;
    padding:11px 14px;
}
.list-group a.show:hover{ background:var(--pink-light); }
.list-group-item-heading .label.label-default{
    background:var(--pink) !important;
    border-radius:12px;
    font-weight:700;
}
.icon_new{
    background:linear-gradient(135deg,#ffd43b,#ff922b) !important;
}

/* ---------- 6. Nút bấm / ô tìm kiếm ---------- */
.btn-primary{
    background:var(--pink) !important;
    border-color:var(--pink) !important;
}
.btn-primary:hover{ background:var(--pink-dark) !important; border-color:var(--pink-dark) !important; }
.btn-info{ background:var(--blue) !important; border-color:var(--blue) !important; }
.headerSearch .input-group{ border-radius:20px; overflow:hidden; }
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span{
    background-color:var(--pink) !important;
    border-color:var(--pink) !important;
}
.pagination > li > a{ color:var(--pink-dark); }

/* ---------- 7. Breadcrumbs ---------- */
.breadcrumbs{ background:var(--pink-light); border-bottom:1px solid #ffd0e6; }
.breadcrumbs .home-icon a{ color:var(--pink-dark); }

/* ---------- 8. Thanh chân trang cố định (footer app-bar) ---------- */
/* Thanh chân trang: đổi sang xanh than (giống dải bản quyền bên PC) thay vì hồng
   để đỡ dồn thêm màu hồng, tạo điểm nhấn tương phản với header hồng phía trên. */
#footer .footer{
    background:linear-gradient(135deg,#0c2e4d,#033b5c) !important;
}
#footer .footer .mbt,
#footer .footer .mbt-circle{
    background:rgba(255,255,255,.16) !important;
    background-image:none !important;
}
#footer .footer .mbt:hover,
#footer .footer .mbt-circle:hover{ background:var(--pink) !important; }

/* ---------- 9. Ngăn kéo "..." (winHelp): menu chân trang, liên hệ, đổi giao diện ---------- */
#winHelp .winHelp{
    background:#fff5f9;
    border-right:0;
    box-shadow:6px 0 24px rgba(196,30,110,.18);
}
/* JS (main.js) chép nguyên HTML logo header vào đây khi mở ngăn kéo -> phải tự giới hạn
   kích thước ảnh, không để ảnh gốc hiển thị to nguyên khổ */
#winHelp .logo-small{
    background:linear-gradient(135deg,#ff6fa8,#ff8fbf);
    padding:14px !important;
    text-align:center;
}
#winHelp .logo-small a{ display:inline-block; }
#winHelp .logo-small img{
    max-height:44px !important;
    width:auto !important;
    border-radius:8px;
    background:#fff;
    padding:3px;
}
#winHelp .panel-heading{
    background:linear-gradient(180deg,var(--pink-light),var(--pink-light2)) !important;
    color:var(--pink-dark) !important;
}
#winHelp .winHelp a:hover{ color:var(--pink); }
#winHelp .theme-change a{
    color:var(--pink-dark) !important;
    font-weight:700;
}
#winHelp .theme-change span a{
    color:#fff !important;
    background:var(--pink);
    border-radius:14px;
    padding:2px 10px;
    display:inline-block;
}
/* Danh sách chuyên mục trong ngăn kéo: dải màu cầu vồng bên trái mỗi mục, bo góc, nền thẻ */
#winHelp .menu{ list-style:none; margin:0; padding:8px; }
#winHelp .menu li{
    margin-bottom:6px;
    border-radius:10px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 2px 6px rgba(196,30,110,.08);
}
#winHelp .menu li a{
    display:block;
    padding:9px 12px 9px 14px;
    color:#4a3040 !important;
    font-weight:600;
    font-size:13px;
    border-left:5px solid var(--pink);
}
#winHelp .menu li:nth-child(7n+1) a{ border-left-color:var(--red); }
#winHelp .menu li:nth-child(7n+2) a{ border-left-color:var(--blue); }
#winHelp .menu li:nth-child(7n+3) a{ border-left-color:var(--green); }
#winHelp .menu li:nth-child(7n+4) a{ border-left-color:var(--purple); }
#winHelp .menu li:nth-child(7n+5) a{ border-left-color:var(--orange); }
#winHelp .menu li:nth-child(7n+6) a{ border-left-color:var(--teal); }
#winHelp .menu li:nth-child(7n)   a{ border-left-color:var(--pink); }
#winHelp .menu li a:hover{ background:var(--pink-light); color:var(--pink-dark) !important; }

/* ---------- 10. Icon mạng xã hội / QR ---------- */
#ftip .socialList a{ background:var(--pink) !important; }

/* ============================================================================
   Mobile refresh - preschool2 / Thanh Yen
   A calm, airy mobile palette with stronger readability and touch targets.
   ============================================================================ */
:root{
    --my-sky:#188fd0;
    --my-sky-dark:#0969a7;
    --my-mint:#26b596;
    --my-yellow:#ffc94d;
    --my-ink:#24445a;
    --my-surface:#ffffff;
    --my-soft:#f1fbff;
}

html, body{ background:#f2f9fc !important; }
body{
    padding-top:56px;
    padding-bottom:47px;
    color:var(--my-ink);
    font-family:"Segoe UI",Roboto,Arial,sans-serif;
    font-size:14px;
}

header.first-child{
    min-height:56px;
    background:linear-gradient(120deg,var(--my-sky-dark),var(--my-sky) 58%,#63c9dc) !important;
    box-shadow:0 3px 16px rgba(10,89,137,.22);
}

#header{
    min-height:56px;
    border-bottom:1px solid rgba(255,255,255,.22);
    background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.06));
}

#header .logo{
    height:56px;
    line-height:56px;
    left:12px;
}

#header .logo img,
#header .logo object{
    max-width:170px;
    max-height:45px;
    padding:3px 7px;
    border-radius:10px;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.14);
}

#header .site-buttons,
#header .site-buttons > div{ height:56px; }

#header .site-buttons a,
#header .site-buttons button,
#header .site-buttons .mbt{
    min-width:38px;
    min-height:38px;
    color:#fff !important;
    border-radius:12px !important;
    background:rgba(255,255,255,.16) !important;
}

#header .site-buttons a:hover,
#header .site-buttons button:hover,
#header .site-buttons .mbt:hover{ background:rgba(255,255,255,.3) !important; }

#mobilePage .wrap{
    max-width:100%;
    background:transparent;
}

#mobilePage #body{
    padding:12px 10px 20px;
}

.breadcrumbs{
    margin-bottom:12px;
    padding:9px 11px;
    color:var(--my-sky-dark);
    background:#e4f6fc !important;
    border:1px solid #c4eaf5 !important;
    border-radius:12px;
}

.breadcrumbs .home-icon a{ color:var(--my-sky-dark) !important; }

.panel{
    margin-bottom:14px;
    overflow:hidden;
    background:var(--my-surface);
    border:1px solid #dceef3;
    border-radius:15px;
    box-shadow:0 5px 18px rgba(25,90,118,.08);
}

.panel-primary,
.panel-default{ border-color:#dceef3; }

.panel-primary > .panel-heading,
.panel-default > .panel-heading{
    padding:12px 14px;
    color:var(--my-sky-dark) !important;
    background:linear-gradient(100deg,#e5f8ff,#f5fffc) !important;
    border-bottom:3px solid var(--my-mint) !important;
    font-family:"Segoe UI",Roboto,Arial,sans-serif;
    font-size:15px;
    font-weight:700;
}

.panel-body{ background:#fff !important; }

.list-group{ margin-bottom:0; border-radius:11px; }
.list-group-item,
.list-group a.show{
    padding:12px 13px;
    color:var(--my-ink);
    border-color:#e5f1f4 !important;
    background:#fff;
}

.list-group-item:active,
.list-group-item:hover,
.list-group a.show:hover{ background:#effbff; }

.list-group-item-heading{ margin-bottom:4px; font-size:14px; font-weight:700; }
.list-group-item-text{ color:#617989; line-height:1.55; }

.panel-body h1,
.panel-body h2,
.panel-body h3,
.pagetitle{
    color:var(--my-sky-dark);
    line-height:1.3;
}

.panel-body h2 a,
.panel-body h3 a,
.panel-body h2 a:visited,
.panel-body h3 a:visited{ color:var(--my-sky-dark) !important; }

.btn{ border-radius:10px; font-weight:600; }
.btn-primary{ background:var(--my-sky) !important; border-color:var(--my-sky) !important; }
.btn-primary:hover,.btn-primary:focus{ background:var(--my-sky-dark) !important; border-color:var(--my-sky-dark) !important; }
.btn-success{ background:var(--my-mint) !important; border-color:var(--my-mint) !important; }
.btn-info{ background:#42b9d0 !important; border-color:#42b9d0 !important; }

.headerSearch .input-group{ overflow:hidden; border:1px solid #bfe3ed; border-radius:12px; box-shadow:0 3px 12px rgba(35,112,139,.08); }
.headerSearch input{ height:38px; border:0; }

#footer .footer{
    height:44px;
    border-top:1px solid rgba(255,255,255,.18);
    background:linear-gradient(120deg,#075b8e,#087fa4) !important;
    color:#fff;
    box-shadow:0 -3px 15px rgba(6,87,125,.18);
}

#footer .footer a,
#footer .footer .mbt,
#footer .footer .mbt-circle{ color:#fff !important; }

#footer .footer .mbt,
#footer .footer .mbt-circle{
    min-width:36px;
    min-height:36px;
    background:rgba(255,255,255,.16) !important;
    border-radius:11px !important;
}

#winHelp .winHelp{
    background:#f5fcff;
    box-shadow:6px 0 26px rgba(4,73,105,.2);
}

#winHelp .logo-small{
    padding:14px !important;
    background:linear-gradient(120deg,var(--my-sky-dark),#5dc6d8);
}

#winHelp .panel-heading{
    color:var(--my-sky-dark) !important;
    background:#e4f8fc !important;
    border-bottom-color:#a9dfdf !important;
}

#winHelp .menu li{
    margin-bottom:7px;
    border:1px solid #dceef3;
    border-radius:11px;
    box-shadow:0 2px 7px rgba(25,90,118,.06);
}

#winHelp .menu li a{
    padding:11px 12px 11px 14px;
    color:var(--my-ink) !important;
    border-left:4px solid var(--my-sky);
}

#winHelp .menu li:nth-child(3n+2) a{ border-left-color:var(--my-mint); }
#winHelp .menu li:nth-child(3n+3) a{ border-left-color:var(--my-yellow); }
#winHelp .menu li a:hover{ color:var(--my-sky-dark) !important; background:#eafaff; }

@media (min-width:480px){
    #mobilePage #body{ padding-left:14px; padding-right:14px; }
    .panel-body{ padding:17px; }
}