/* Reset nhẹ (site cũ dùng Bootstrap reboot): giữ giao diện cũ khi không còn Bootstrap */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
a { text-decoration: none; }
img { vertical-align: middle; border-style: none; }
button, input, select, textarea { font-family: inherit; }
ul, ol { margin-top: 0; }
table { border-collapse: collapse; }

/* =====================================================
   MONFIN SITE — phần bổ sung cho giao diện chạy trên lõi chung Laravel
   (menu di động, popup tư vấn, form tư vấn, trang liên hệ, trang lỗi, phân trang, bảng cuộn ngang).
   Nạp ở MỌI trang (layouts/app), sau monfin-ui.css, để form và menu luôn đủ giao diện.
   ===================================================== */

/* Chống tràn ngang trên điện thoại */
html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; }
.mf-main { min-height: 50vh; }
.mf-skip { position: absolute; left: -9999px; top: 0; background: #fff; padding: 8px 14px; z-index: 2000; }
.mf-skip:focus { left: 8px; top: 8px; }

/* HEADER: nút menu và menu di động */
.mf-nav-links a.active { color: var(--mf-blue) !important; background: var(--mf-blue-light); }
.mf-mobile-menu { display: none; position: fixed; top: 64px; left: 0; right: 0; z-index: 999; background: #fff; border-bottom: 1px solid var(--mf-border); padding: 8px 24px 18px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: calc(100vh - 64px); overflow-y: auto; }
.mf-mobile-menu.open { display: block; }
.mf-mobile-menu a.mf-mm-link { display: block; padding: 12px 0; font-weight: 600; color: var(--mf-text) !important; border-bottom: 1px solid var(--mf-border); text-decoration: none !important; }
.mf-mobile-menu .mf-mm-cta { display: flex; gap: 10px; margin-top: 14px; }
.mf-mobile-menu .mf-mm-cta .mf-btn { flex: 1; justify-content: center; }
.mf-hamburger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.mf-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mf-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mf-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1024px) {
  .mf-nav { padding: 0 16px; }
  .mf-logo { margin-right: 0; }
}

/* FOOTER */
.mf-footer-col li a, .mf-footer-contact a { color: rgba(255,255,255,.65) !important; }
.mf-footer-contact { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.6); margin-top: 14px; overflow-wrap: anywhere; }
.mf-footer-note { max-width: 1200px; margin: 0 auto; padding: 0 24px 18px; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.4); }
.mf-footer-logo { display: inline-flex; align-items: center; text-decoration: none; background: #fff; border-radius: 10px; padding: 6px 10px; }
.mf-footer-logo img { height: 30px; width: auto; display: block; }
.mf-footer-mobile .mf-footer-contact { margin: 0 0 14px; }

/* BÀI VIẾT: bảng rộng nằm trong khung cuộn ngang, ảnh không tràn */
.mf-article-body, .mf-page-content, .mf-cat-intro { overflow-wrap: anywhere; min-width: 0; }
.mf-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 16px; max-width: 100%; }
.mf-table-scroll > table { margin: 0 !important; min-width: 520px; }
.mf-article-body img, .mf-page-content img { height: auto !important; max-width: 100% !important; }
.mf-article-body iframe, .mf-page-content iframe { max-width: 100%; }
.mf-article-col, .mf-news-wrap > * { min-width: 0; }
.mf-article-pillar { max-width: 960px; margin: 0 auto; padding: 32px 24px 64px; }

/* THÀNH PHẦN TRANG: trang tĩnh */
.mf-page-wrap { overflow-wrap: anywhere; }
.mf-page-content { max-width: 100%; }
.mf-page-content h2 { font-size: 22px; font-weight: 800; margin: 28px 0 10px; color: var(--mf-text); }
.mf-page-content h3 { font-size: 18px; font-weight: 700; margin: 22px 0 8px; color: var(--mf-text); }
.mf-page-content p, .mf-page-content li { font-size: 16px; line-height: 1.8; color: var(--mf-text); }
.mf-page-content a { color: var(--mf-blue); }
.mf-page-content ul, .mf-page-content ol { padding-left: 22px; margin: 0 0 14px; }
.mf-page-content table { width: 100%; border-collapse: collapse; }
.mf-page-content table td, .mf-page-content table th { border: 1px solid var(--mf-border); padding: 8px 10px; font-size: 14px; }
.mf-updated { font-size: 13px; color: var(--mf-text-3); margin: 0 0 16px; }

/* TÓM TẮT, TAG, NGUỒN */
.mf-article-summary { font-weight: 500; font-size: 15px; color: #374151; background: #E8F0FF; padding: 14px 16px; border-radius: 8px; margin: 0 0 20px; border-left: 4px solid #0052CC; line-height: 1.7; }
.mf-disclaimer { font-size: 13px; color: var(--mf-text-3); background: var(--mf-bg-white); border: 1px solid var(--mf-border); border-radius: 10px; padding: 12px 14px; margin: 20px 0; line-height: 1.6; }

/* DANH SÁCH CHUYÊN MỤC */
.mf-cat-wrap { max-width: 1200px; margin: 0 auto; padding: 28px 24px 56px; }
.mf-cat-header { margin-bottom: 24px; }
.mf-cat-title { font-size: 30px; font-weight: 800; color: var(--mf-text); margin: 0 0 8px; }
.mf-cat-intro { font-size: 15px; line-height: 1.8; color: var(--mf-text-2); margin-bottom: 24px; background: #fff; border: 1px solid var(--mf-border); border-radius: 12px; padding: 18px 20px; }
.mf-cat-intro p { margin: 0 0 10px; }
.mf-news-list-card { min-width: 0; }
.mf-news-list-title { overflow-wrap: anywhere; }

/* BỘ CHỌN PHÂN TRANG */
.mf-pagination-wrap .pagination { flex-wrap: wrap; justify-content: center; }
.mf-pagination-wrap .pagination li { list-style: none; }
.mf-pagination-wrap .pagination li.active span { background: var(--mf-blue); color: #fff; border-color: var(--mf-blue); }

/* THANH BÊN: ô tư vấn */
.mf-sidebar-cta-btn { cursor: pointer; border: 0; font-family: inherit; }
.mf-sidebar-box ul { list-style: none; padding: 0; margin: 0; }

/* TRANG CHỦ: bổ sung */
.mf-hero-note { font-size: 13px; color: rgba(255,255,255,.6); max-width: 480px; margin: 0; line-height: 1.6; }
.mf-hero-cta { margin-bottom: 20px; }
.mf-ktabs { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
.mf-ktab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border-radius: var(--mf-radius); border: 0; background: transparent; color: var(--mf-text-2); font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; margin-bottom: 4px; font-family: inherit; }
.mf-ktab.active { background: var(--mf-blue-light); color: var(--mf-blue); }
.mf-ktab-panel { display: none; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.mf-ktab-panel.active { display: grid; }
.mf-ktab-card { display: flex; flex-direction: column; background: var(--mf-bg-white); border: 1.5px solid var(--mf-border); border-radius: var(--mf-radius-lg); overflow: hidden; text-decoration: none; color: inherit; min-width: 0; transition: all .2s; }
.mf-ktab-card:hover { box-shadow: var(--mf-shadow-lg); transform: translateY(-2px); }
.mf-ktab-thumb { height: 140px; background: linear-gradient(135deg, var(--mf-blue-light), #dce9ff); position: relative; overflow: hidden; flex-shrink: 0; }
.mf-ktab-thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.mf-ktab-body { padding: 14px; flex: 1; }
.mf-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
.mf-section-head a.mf-more { font-size: 14px; font-weight: 600; color: var(--mf-blue); text-decoration: none; white-space: nowrap; }
.mf-partners-note { text-align: center; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--mf-text-3); margin: 0 0 24px; }
.mf-partner-logo img { padding: 8px; }
.mf-compare-grid .mf-compare-item { text-decoration: none; color: var(--mf-text); }
@media (max-width: 1024px) {
  .mf-ktabs { grid-template-columns: 1fr; gap: 14px; }
  .mf-ktabs-nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
  .mf-ktab { width: auto; white-space: nowrap; border: 1.5px solid var(--mf-border); border-radius: 99px; margin: 0; flex: 0 0 auto; }
  .mf-ktab.active { border-color: var(--mf-blue); }
}
@media (max-width: 640px) {
  .mf-ktab-panel { grid-template-columns: 1fr; }
  .mf-ktab-panel .mf-ktab-card:nth-child(n+4) { display: none; }
  .mf-cat-wrap { padding: 20px 16px 40px; }
  .mf-cat-title { font-size: 24px; }
  .mf-hero-inner, .mf-container, .mf-news-wrap { padding-left: 16px; padding-right: 16px; }
  .mf-article-pillar { padding: 20px 16px 40px; }
}

/* LIÊN HỆ */
.mf-contact { max-width: 1100px; margin: 0 auto; padding: 32px 24px 56px; }
.mf-contact h1 { font-size: 32px; font-weight: 800; color: var(--mf-text); margin: 0 0 10px; }
.mf-contact-lead { font-size: 16px; color: var(--mf-text-2); line-height: 1.7; margin: 0 0 28px; max-width: 640px; }
.mf-contact-cols { display: grid; grid-template-columns: 340px 1fr; gap: 32px; align-items: start; }
.mf-contact-info, .mf-contact-form { min-width: 0; }
.mf-ci { background: #fff; border: 1.5px solid var(--mf-border); border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; display: flex; gap: 14px; align-items: flex-start; }
.mf-ci-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--mf-blue-light); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.mf-ci-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mf-text-3); margin-bottom: 4px; }
.mf-ci-val { font-size: 15px; font-weight: 600; color: var(--mf-text); overflow-wrap: anywhere; }
.mf-ci-val a { color: var(--mf-blue); text-decoration: none; }
.mf-ci-sub { font-size: 13px; color: var(--mf-text-3); margin-top: 2px; }
.mf-contact-socials { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 16px; }
.mf-social { flex: 1; min-width: 130px; display: flex; align-items: center; justify-content: center; padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; color: #fff !important; }
.mf-social.zalo { background: #0068FF; }
.mf-social.facebook { background: #1877F2; }
.mf-contact-map { border-radius: 14px; overflow: hidden; border: 1.5px solid var(--mf-border); }
.mf-contact-map iframe { display: block; width: 100%; height: 240px; border: 0; }
.mf-form-box { background: #fff; border: 1.5px solid var(--mf-border); border-radius: 16px; padding: 28px; }
.mf-form-box h2 { font-size: 22px; font-weight: 800; color: var(--mf-text); margin: 0 0 8px; }
.mf-form-sub { font-size: 14px; color: var(--mf-text-3); margin: 0 0 20px; line-height: 1.6; }
@media (max-width: 900px) {
  .mf-contact-cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mf-contact { padding: 20px 16px 40px; }
  .mf-contact h1 { font-size: 26px; }
  .mf-form-box { padding: 20px 16px; }
}

/* FORM TƯ VẤN (dùng ở trang liên hệ, cuối bài, thanh bên) */
.mf-form { min-width: 0; }
.mf-form .mf-field { margin-bottom: 14px; }
.mf-form label { display: block; font-size: 13px; font-weight: 700; color: var(--mf-text-2); margin-bottom: 6px; }
.mf-form input, .mf-form select, .mf-form textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid var(--mf-border); border-radius: 10px; font-size: 15px; font-family: inherit; color: var(--mf-text); background: #F7F9FC; outline: none; }
.mf-form input:focus, .mf-form select:focus, .mf-form textarea:focus { border-color: var(--mf-blue); background: #fff; }
.mf-form textarea { min-height: 96px; resize: vertical; }
.mf-form-submit { width: 100%; display: flex; justify-content: center; align-items: center; background: var(--mf-blue); color: #fff; border: 0; border-radius: 10px; padding: 13px 18px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; }
.mf-form-submit:hover { background: var(--mf-blue-dark); }
.mf-form-submit:disabled { opacity: .7; cursor: wait; }
.mf-form-note { font-size: 12px; color: var(--mf-text-3); margin: 10px 0 0; line-height: 1.5; }
.mf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mf-form-msg { margin-top: 12px; padding: 10px 13px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.mf-form-msg.ok { background: #E6F7EE; color: #006830; }
.mf-form-msg.err { background: #FEF0EF; color: #B71C1C; }

/* KHỐI TƯ VẤN CUỐI TRANG */
.mf-consult { background: #fff; padding: 56px 0; border-top: 1px solid var(--mf-border); }
.mf-consult-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.mf-consult-info { min-width: 0; }
.mf-consult-info h2 { font-size: 28px; font-weight: 800; color: var(--mf-text); margin: 8px 0 10px; line-height: 1.25; }
.mf-consult-info p { font-size: 15px; color: var(--mf-text-2); line-height: 1.7; margin: 0 0 16px; }
.mf-consult-info ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mf-consult-info li { font-size: 14.5px; font-weight: 600; color: var(--mf-text); overflow-wrap: anywhere; }
.mf-consult-info li a { color: var(--mf-blue); text-decoration: none; }
.mf-consult .mf-form { background: var(--mf-bg); border: 1px solid var(--mf-border); border-radius: 16px; padding: 26px; }
@media (max-width: 900px) {
  .mf-consult-inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .mf-consult { padding: 36px 0; }
  .mf-consult-inner { padding: 0 16px; }
  .mf-consult .mf-form { padding: 18px 16px; }
  .mf-consult-info h2 { font-size: 23px; }
}

/* POPUP TƯ VẤN */
.mf-lm[hidden] { display: none; }
.mf-lm { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.mf-lm-backdrop { position: absolute; inset: 0; background: rgba(13,27,62,.6); }
.mf-lm-dialog { position: relative; background: #fff; border-radius: 18px; max-width: 440px; width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; padding: 28px 26px 22px; box-shadow: 0 24px 60px rgba(13,27,62,.35); }
.mf-lm-close { position: absolute; right: 10px; top: 6px; background: none; border: 0; font-size: 30px; line-height: 1; color: var(--mf-text-3); cursor: pointer; padding: 6px 10px; }
.mf-lm-title { font-weight: 800; font-size: 21px; color: var(--mf-text); margin: 0 0 6px; padding-right: 28px; }
.mf-lm-sub { color: var(--mf-text-2); font-size: 14px; margin: 0 0 16px; line-height: 1.6; }
.mf-lm-field { margin-bottom: 13px; }
.mf-lm-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--mf-text); }
.mf-lm-field input, .mf-lm-field select { width: 100%; box-sizing: border-box; height: 46px; border: 1.5px solid var(--mf-border); border-radius: 10px; padding: 0 13px; font-family: inherit; font-size: 15px; background: #fff; color: var(--mf-text); }
.mf-lm-field input:focus, .mf-lm-field select:focus { outline: 2px solid var(--mf-blue); border-color: var(--mf-blue); }
.mf-lm-btn { width: 100%; height: 48px; border: 0; border-radius: 12px; background: var(--mf-blue); color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; font-family: inherit; }
.mf-lm-btn:hover { background: var(--mf-blue-dark); }
.mf-lm-btn:disabled { opacity: .7; cursor: wait; }
.mf-lm-result { display: none; margin-top: 12px; padding: 10px 13px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.mf-lm-result.show { display: block; }
.mf-lm-result.success { background: #E6F7EE; color: #006830; }
.mf-lm-result.error { background: #FEF0EF; color: #B71C1C; }
.mf-lm-alt { margin: 14px 0 0; text-align: center; color: var(--mf-text-3); font-size: 14px; }
.mf-lm-alt a { color: var(--mf-blue); font-weight: 700; text-decoration: none; }
body.mf-lm-open { overflow: hidden; }

/* TRANG LỖI */
.mf-error { padding: 70px 24px 90px; text-align: center; max-width: 720px; margin: 0 auto; }
.mf-error-code { font-weight: 800; font-size: 96px; line-height: 1; color: var(--mf-blue); margin-bottom: 10px; }
.mf-error h1 { font-size: 30px; font-weight: 800; color: var(--mf-text); margin: 0 0 12px; }
.mf-error p { color: var(--mf-text-2); margin: 0 auto 20px; line-height: 1.7; }
.mf-error-links { display: inline-block; text-align: left; list-style: none; padding: 0; margin: 0; }
.mf-error-links li { margin-bottom: 8px; }
.mf-error-links a { color: var(--mf-blue); font-weight: 600; text-decoration: none; }
.mf-error-links a::before { content: "→ "; color: var(--mf-gold); }

/* TÌM KIẾM */
.mf-search-form { display: flex; gap: 8px; margin: 0 0 20px; }
.mf-search-form input { flex: 1; min-width: 0; padding: 11px 14px; border: 1.5px solid var(--mf-border); border-radius: 10px; font-size: 15px; font-family: inherit; }
.mf-search-form button { padding: 0 20px; border: 0; border-radius: 10px; background: var(--mf-blue); color: #fff; font-weight: 700; cursor: pointer; font-family: inherit; }

/* TRANG CÔNG CỤ (nội dung cũ dùng style nội tuyến): không cho tràn ngang trên điện thoại */
.mf-tool-page { overflow-x: hidden; }
.mf-tool-page [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; }
.mf-tool-page [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; }
.mf-tool-page table { max-width: 100%; }
.mf-tool-page canvas { max-width: 100%; }
.mf-tool-page h1 { overflow-wrap: anywhere; }
.mf-tool-page input, .mf-tool-page select { max-width: 100%; box-sizing: border-box; }
@media (max-width: 640px) {
  .mf-tool-page [style*="padding:48px 24px"], .mf-tool-page [style*="padding:40px 24px"], .mf-tool-page [style*="padding:36px 24px"] { padding-left: 16px !important; padding-right: 16px !important; }
  .mf-tool-page h1 { font-size: 24px !important; }
}

/* FOOTER trên điện thoại: hàng bản quyền xuống dòng, không tràn */
@media (max-width: 768px) {
  .mf-footer-bottom { flex-direction: column; align-items: flex-start; padding: 14px 16px 22px; }
  .mf-footer-legal { flex-wrap: wrap; gap: 8px 16px; }
  .mf-footer-mobile { padding: 24px 16px 8px; }
  .mf-footer-note { padding: 0 16px 14px; }
}

/* Công cụ: màn hình hẹp -> mọi lưới thành 1 cột, bảng cuộn ngang trong khung */
.mf-tool-page [style*="display:grid"] > * { min-width: 0; }
.mf-tool-page table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 520px) {
  .mf-tool-page [style*="display:grid"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Breadcrumb: cho xuống dòng gọn trên điện thoại */
.mf-breadcrumb nav { flex-wrap: wrap; row-gap: 2px; }
.mf-breadcrumb nav a, .mf-breadcrumb nav > span:not(.mf-bc-current) { white-space: nowrap; }

/* Bài liên quan (dùng ở bài viết và thanh bên; trước nằm trong monfin-home.css) */
.mf-related-wrap { display:flex;flex-direction:column;gap:12px;margin-top:16px; }
.mf-related-item { display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;padding:10px;border-radius:10px;border:1.5px solid var(--mf-border);background:#fff;transition:border-color .15s; }
.mf-related-item:hover { border-color:var(--mf-blue); }
.mf-related-item-thumb { width:90px;height:64px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--mf-blue-light);display:flex;align-items:center;justify-content:center;position:relative; }
.mf-related-item-thumb img { width:100%;height:100%;object-fit:cover;display:block; }
.mf-related-item-no-img { font-size:22px; }
.mf-related-item-info { flex:1;min-width:0; }
.mf-related-item-title { font-size:14px;font-weight:600;line-height:1.4;color:var(--mf-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.mf-related-item-date { font-size:12px;color:var(--mf-text-3);margin-top:3px; }