/* =====================================================
   MONFIN PAGE — trang tĩnh, pillar content
   Load ở: page_layout.php
   ===================================================== */

/* PAGE INTRO — theo style Moncover */
.mf-page-intro { background:linear-gradient(135deg,#0D1B3E 0%,#0a2a5e 100%);padding:28px 0 24px;border-bottom:none; }
.mf-page-intro-inner { max-width:1100px;margin:0 auto;padding:0 24px; }
.mf-page-intro-title { font-size:26px;font-weight:800;color:#fff!important;margin:0 0 10px;line-height:1.25; }
.mf-page-intro-bc { display:flex;align-items:center;gap:6px;font-size:13px;color:rgba(255,255,255,.55); }
.mf-page-intro-bc a { color:var(--mf-gold)!important;text-decoration:none; }
.mf-page-intro-bc a:hover { color:#fff!important; }
.mf-page-intro-bc span { color:rgba(255,255,255,.55); }
.mf-page-intro-bc span:last-child { color:rgba(255,255,255,.75); }

/* PAGE WRAP */
.mf-page-wrap { max-width:900px;margin:0 auto;padding:36px 24px 64px; }

/* PAGE HERO */
.mf-page-hero { background:linear-gradient(160deg,#0D1B3E,#0052CC);padding:56px 0 48px;color:#fff;text-align:center; }
.mf-page-hero-inner { max-width:700px;margin:0 auto;padding:0 24px; }
.mf-tag-white { background:rgba(255,255,255,.15);color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.2); }
.mf-page-hero h1 { font-size:34px;font-weight:800;margin:14px 0 12px; }
.mf-page-hero p { font-size:16px;color:rgba(255,255,255,.75);line-height:1.7; }

/* BREADCRUMB */
.mf-bc { background:var(--mf-bg-white);border-bottom:1px solid var(--mf-border);padding:10px 0; }
.mf-bc nav { display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mf-text-3);max-width:1200px;margin:0 auto;padding:0 24px; }
.mf-bc a { color:var(--mf-text-3);text-decoration:none; }
.mf-bc a:hover { color:var(--mf-blue); }
.mf-bc-current { color:var(--mf-text-2);font-weight:500; }

/* Fix màu chữ trên nền tối — chỉ gradient đậm */
.mf-pillar [style*="background:linear-gradient(135deg,#0D1B3E"] strong,
.mf-pillar [style*="background:linear-gradient(135deg,#0D1B3E"] span { color:#fff!important }
.mf-pillar [style*="background:linear-gradient(135deg,#0D1B3E"] a[style*="background:#fff"] { color:#0052CC!important }
.mf-pillar [style*="background:linear-gradient(135deg,#0D1B3E"] a[style*="background:transparent"] { color:#fff!important }
.mf-pillar [style*="background:#0052CC"] strong,
.mf-pillar [style*="background:#0052CC"] span { color:#fff!important }

/* PILLAR CONTENT — reset Bootstrap, áp dụng cho toàn bộ nội dung pillar */
.mf-pillar { font-size:15px;line-height:1.8;color:var(--mf-text); }
.mf-pillar * { box-sizing:border-box; }

/* Typography reset */
.mf-pillar h1 { font-size:28px!important;font-weight:800!important;color:var(--mf-text)!important;line-height:1.25!important;margin:0 0 16px!important; }
.mf-pillar h2 { font-size:22px!important;font-weight:800!important;color:var(--mf-text)!important;line-height:1.3!important;margin:32px 0 12px!important;padding-bottom:10px!important;border-bottom:2px solid var(--mf-blue-light)!important; }
.mf-pillar h3 { font-size:17px!important;font-weight:700!important;color:var(--mf-blue)!important;margin:22px 0 10px!important; }
.mf-pillar p { font-size:15px!important;line-height:1.8!important;color:#374151!important;margin:0 0 14px!important; }
.mf-pillar a { color:var(--mf-blue)!important;text-decoration:underline!important; }
.mf-pillar strong,.mf-pillar b { font-weight:700!important;color:inherit!important; }
.mf-pillar em,.mf-pillar i { font-style:italic!important; }
.mf-pillar span { color:inherit!important; }
.mf-pillar ul { padding-left:22px!important;margin:0 0 14px!important;list-style:disc!important; }
.mf-pillar ol { padding-left:22px!important;margin:0 0 14px!important;list-style:decimal!important; }
.mf-pillar li { font-size:15px!important;line-height:1.7!important;color:#374151!important;margin-bottom:6px!important; }
.mf-pillar img { max-width:100%!important;height:auto!important;border-radius:10px!important;display:block!important;margin:16px auto!important; }
.mf-pillar hr { border:none!important;border-top:2px solid var(--mf-border)!important;margin:24px 0!important; }

/* Table reset trong pillar */
.mf-pillar table { width:100%!important;border-collapse:collapse!important;margin:16px 0 24px!important;font-size:14px!important; }
.mf-pillar table th { background:var(--mf-blue)!important;color:#fff!important;padding:10px 14px!important;text-align:left!important;font-weight:700!important;border:none!important; }
.mf-pillar table td { padding:10px 14px!important;border-bottom:1px solid #F0F4FF!important;color:#374151!important;border-left:none!important;border-right:none!important; }
.mf-pillar table tr:nth-child(even) td { background:#F7F9FC!important; }
.mf-pillar table tr:hover td { background:#EFF6FF!important; }

/* PILLAR COMPONENTS — dùng được trong page_detail.php */
/* Sapo */
.mf-pillar-sapo { background:linear-gradient(135deg,#EFF6FF,#E8F0FF);border-left:4px solid var(--mf-blue);border-radius:0 12px 12px 0;padding:16px 20px;margin:0 0 24px;font-size:15px;color:#374151;line-height:1.8;font-style:italic; }

/* Callout box */
.mf-pillar-callout { background:linear-gradient(135deg,#0D1B3E,#0052CC);border-radius:12px;padding:16px 20px;margin:20px 0; }
.mf-pillar-callout-title { font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.06em!important;color:var(--mf-gold)!important;margin-bottom:6px!important;display:block!important; }
.mf-pillar-callout p { color:#fff!important;font-size:14px!important;margin:0!important; }
.mf-pillar-callout strong { color:#fff!important; }
.mf-pillar-callout span { color:#fff!important; }

/* Note box */
.mf-pillar-note { background:#FFF4E0;border-left:4px solid var(--mf-gold);border-radius:0 10px 10px 0;padding:12px 16px;margin:14px 0;font-size:14px;color:#374151; }

/* Stat grid */
.mf-pillar-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0 24px; }
.mf-pillar-stat { background:#fff;border:1.5px solid var(--mf-border);border-radius:12px;padding:16px 12px;text-align:center; }
.mf-pillar-stat-num { font-size:26px;font-weight:800;color:var(--mf-blue);line-height:1;display:block; }
.mf-pillar-stat-lbl { font-size:12px;color:var(--mf-text-3);margin-top:5px;line-height:1.4;display:block; }

/* Group cards 2 cột */
.mf-pillar-groups { display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:16px 0 24px; }
.mf-pillar-group { background:#fff;border:1.5px solid var(--mf-border);border-radius:14px;padding:18px; }
.mf-pillar-group-icon { font-size:24px;margin-bottom:8px;display:block; }
.mf-pillar-group-title { font-size:15px!important;font-weight:800!important;color:var(--mf-text)!important;margin-bottom:4px!important;display:block!important; }
.mf-pillar-group-count { font-size:13px!important;color:var(--mf-blue)!important;font-weight:700!important;margin-bottom:8px!important;display:block!important; }
.mf-pillar-group ul { list-style:none!important;padding:0!important;margin:0!important; }
.mf-pillar-group li { font-size:13px!important;color:var(--mf-text-2)!important;padding:4px 0!important;border-bottom:1px solid #F0F4FF!important;display:flex!important;align-items:center!important;gap:6px!important;margin:0!important; }
.mf-pillar-group li:last-child { border-bottom:none!important; }
.mf-pillar-group li::before { content:'›';color:var(--mf-blue);font-weight:700;flex-shrink:0; }

/* Bar chart rows */
.mf-pillar-bars { display:flex;flex-direction:column;gap:8px;margin:14px 0 22px; }
.mf-pillar-bar-item { background:#fff;border:1.5px solid var(--mf-border);border-radius:10px;padding:11px 14px;display:flex;align-items:center;gap:12px; }
.mf-pillar-bar-name { font-size:14px;font-weight:700;color:var(--mf-text);min-width:130px;flex-shrink:0; }
.mf-pillar-bar-track { flex:1;height:8px;background:var(--mf-blue-light);border-radius:99px;overflow:hidden; }
.mf-pillar-bar-fill { height:100%;background:linear-gradient(90deg,var(--mf-blue),#00B8A9);border-radius:99px; }
.mf-pillar-bar-val { font-size:13px;font-weight:700;color:var(--mf-blue);min-width:90px;text-align:right;flex-shrink:0; }

/* CTA box */
.mf-pillar-cta { background:linear-gradient(135deg,#0D1B3E,#0052CC);border-radius:16px;padding:24px 28px;text-align:center;margin:28px 0; }
.mf-pillar-cta h3 { font-size:20px!important;font-weight:800!important;color:#fff!important;margin:0 0 8px!important;border:none!important;padding:0!important; }
.mf-pillar-cta p { font-size:14px!important;color:rgba(255,255,255,.75)!important;margin:0 0 18px!important; }
.mf-pillar-cta-btns { display:flex;gap:10px;justify-content:center;flex-wrap:wrap; }
.mf-pillar-cta-w { display:inline-block;background:#fff;color:var(--mf-blue)!important;padding:11px 22px;border-radius:8px;font-size:14px;font-weight:800;text-decoration:none!important; }
.mf-pillar-cta-g { display:inline-block;background:transparent;color:#fff!important;border:2px solid rgba(255,255,255,.4);padding:11px 22px;border-radius:8px;font-size:14px;font-weight:700;text-decoration:none!important; }

/* RESPONSIVE */
@media(max-width:768px) {
  .mf-pillar-stats { grid-template-columns:repeat(2,1fr); }
  .mf-pillar-groups { grid-template-columns:1fr; }
  .mf-pillar-bar-name { min-width:80px;font-size:12px; }
  .mf-pillar-bar-val { min-width:70px;font-size:12px; }
  .mf-page-wrap { padding:20px 16px 48px; }
  .mf-page-hero h1 { font-size:26px; }
}