/* ============================================================================
   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; }