/* mapsviet-core.css — thư viện CSS dùng chung cho toàn bộ site. Mọi plugin khác (directory/regions/classifieds/guide...) chỉ enqueue CSS RIÊNG cho phần đặc thù của mình, KHÔNG lặp lại các lớp topbar/sidebar/card /grid/footer/toast/ad-slot/breadcrumb/section-head đã có sẵn ở đây. */ /* LỖI ĐÃ SỬA: phát hiện qua audit — toàn trang có thanh cuộn ngang thật (html.scrollWidth 2240px > clientWidth 2048px). Không phải do 1 phần tử sai cụ thể mà do cách trình duyệt tính bounding box khi có nhiều khối overflow-x:auto lồng nhau (danh mục cuộn ngang, danh sách tỉnh cuộn ngang...) — các khối đó đã đúng CSS (width:100%, min-width:0, overflow-x:auto), chặn ở cấp cao nhất là cách chuẩn, an toàn nhất, không ảnh hưởng khả năng cuộn ngang cục bộ bên trong từng khối. */ /* LỖI ĐÃ SỬA: overflow-x:hidden trên html/body (dùng để chặn tràn ngang) vô tình phá vỡ TOÀN BỘ position:sticky trên trang (header, sidebar không còn dính khi cuộn) — quy tắc CSS: overflow khác 'visible' trên bất kỳ ancestor nào của phần tử sticky sẽ vô hiệu hóa sticky đó. Dùng overflow-x:clip thay thế — vẫn chặn tràn ngang y hệt nhưng KHÔNG tạo scrolling context mới nên không ảnh hưởng sticky. */ html, body{ overflow-x:clip; max-width:100%; } /* LỖI ĐÃ SỬA: sidebar phải trên trang chi tiết (địa điểm/phường/đường/tỉnh...) trước đây hoàn toàn không có position:sticky — chỉ dùng inline style (width, display) mà không có sticky, nên cuộn trang là mất luôn, không cố định lại như mong đợi. align-self:flex-start bắt buộc phải có — thiếu nó thì sticky bên trong flex container mặc định bị kéo dãn theo chiều cao 100% của hàng, không còn "dư" khoảng trống để cuộn dính. */ .mv-place-side{ position:sticky; top:calc(var(--mv-header-h) + 16px); align-self:flex-start; max-height:calc(100vh - var(--mv-header-h) - 32px); overflow-y:auto; } @media (max-width:820px){ .mv-place-side{ position:static; max-height:none; overflow-y:visible; } } /* Trên mobile sidebar phải luôn xuống dưới nội dung chính (không còn cạnh nhau) — sticky không có ý nghĩa và có thể gây kẹt cuộn trên màn hình nhỏ. */ .mv-hamburger{ display:none; width:38px; height:38px; border-radius:10px; align-items:center; justify-content:center; background:var(--mv-surface-alt); border:1px solid var(--mv-border); flex-shrink:0; font-size:16px; } @media (max-width:820px){ .mv-hamburger{ display:flex; } } /* Topbar — logo + ô tìm kiếm gộp chung 1 khối, canh giữa header */ header.mv-topbar{ background:var(--mv-surface); border-bottom:1px solid var(--mv-border); position:sticky; top:0; z-index:60; height:var(--mv-header-h); box-shadow:var(--mv-shadow-sm); } .mv-topbar-inner{ height:100%; display:flex; align-items:center; gap:14px; padding:0 24px; } .mv-header-center{ flex:1; display:flex; justify-content:center; min-width:0; } .mv-header-center-group{ display:flex; align-items:center; gap:16px; width:100%; max-width:900px; } .mv-logo{ display:flex; align-items:center; gap:8px; font-size:19px; font-weight:800; white-space:nowrap; letter-spacing:-0.02em; font-family:var(--mv-font-display); flex-shrink:0; color:var(--mv-text-primary); text-decoration:none; } .mv-logo img, .mv-footer-logo img{ max-height:40px; width:auto; display:block; } .mv-footer-logo{ display:inline-block; } .mv-logo i{ color:var(--mv-accent); font-size:19px; } .mv-search-box{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; height:42px; padding:0 16px; background:var(--mv-surface-alt); border:1px solid var(--mv-border); border-radius:999px; } .mv-search-box input{ border:none; background:none; outline:none; font-size:14px; width:100%; color:var(--mv-text-primary); font-family:inherit; } .mv-search-box i{ color:var(--mv-text-muted); font-size:14px; } .mv-topbar-right{ display:flex; align-items:center; gap:12px; flex-shrink:0; } .mv-icon-btn{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--mv-surface-alt); border:1px solid var(--mv-border); color:var(--mv-text-secondary); position:relative; flex-shrink:0; font-size:15px; } .mv-icon-btn .mv-dot{ position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--mv-danger); border:1.5px solid var(--mv-surface); } .mv-avatar{ width:38px; height:38px; border-radius:50%; background:var(--mv-accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; border:none; cursor:pointer; font-family:inherit; } .mv-avatar-wrap{ position:relative; } .mv-avatar-menu{ background:var(--mv-surface); border:1px solid var(--mv-border); border-radius:14px; box-shadow:var(--mv-shadow-md); padding:8px; min-width:240px; z-index:200; } .mv-avatar-menu[hidden]{ display:none; } .mv-avatar-menu-head{ display:flex; align-items:center; gap:11px; padding:8px 10px 12px; border-bottom:1px solid var(--mv-border); margin-bottom:6px; } .mv-avatar-menu-head img{ border-radius:50%; flex-shrink:0; } .mv-avatar-menu-head strong{ display:block; font-size:13.5px; } .mv-avatar-menu-head span{ display:block; font-size:12px; color:var(--mv-text-muted); } .mv-avatar-menu-item{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:9px; color:var(--mv-text-primary); font-size:13.5px; font-weight:500; text-decoration:none; } .mv-avatar-menu-item:hover{ background:var(--mv-accent-light); color:var(--mv-accent-dark); } .mv-avatar-menu-item i{ width:16px; text-align:center; color:var(--mv-text-muted); font-size:14px; } .mv-avatar-menu-item:hover i{ color:var(--mv-accent-dark); } .mv-avatar-menu-item.mv-danger{ color:var(--mv-danger); } .mv-avatar-menu-item.mv-danger:hover{ background:var(--mv-danger-light, #fdeaea); color:var(--mv-danger); } .mv-avatar-menu-item.mv-danger:hover i{ color:var(--mv-danger); } .mv-qr-code{ width:88px; height:88px; flex-shrink:0; border:1px solid var(--mv-border); border-radius:8px; padding:6px; background:#fff; } .mv-qr-code img{ width:100%; height:100%; } /* Gợi ý tìm kiếm tức thời (autocomplete) khi gõ vào ô search header. */ .mv-search-box{ position:relative; } .mv-search-suggest{ position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--mv-surface); border:1px solid var(--mv-border); border-radius:var(--mv-radius); box-shadow:var(--mv-shadow-md); padding:6px; z-index:150; max-height:360px; overflow-y:auto; } .mv-search-suggest[hidden]{ display:none; } .mv-search-suggest-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; color:var(--mv-text-primary); text-decoration:none; font-size:13.5px; } .mv-search-suggest-item:hover, .mv-search-suggest-item.mv-active{ background:var(--mv-accent-light); color:var(--mv-accent-dark); } .mv-search-suggest-item i{ width:16px; text-align:center; color:var(--mv-text-muted); font-size:14px; flex-shrink:0; } .mv-search-suggest-item:hover i, .mv-search-suggest-item.mv-active i{ color:var(--mv-accent-dark); } .mv-search-suggest-title{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mv-search-suggest-type{ font-size:11px; color:var(--mv-text-muted); flex-shrink:0; } /* Form liên hệ/đặt chỗ (dialog) trên trang địa điểm/doanh nghiệp */ .mv-contact-dialog{ border:none; border-radius:16px; padding:22px 24px; max-width:420px; width:92vw; box-shadow:var(--mv-shadow-md); } .mv-contact-dialog::backdrop{ background:rgba(15,16,20,.45); } .mv-contact-dialog h3{ margin:0 0 14px; font-size:17px; } .mv-contact-dialog-close{ position:absolute; top:14px; right:14px; margin:0; } .mv-contact-dialog-close button{ background:none; border:none; cursor:pointer; font-size:16px; color:var(--mv-text-muted); padding:4px; } .mv-contact-form{ display:flex; flex-direction:column; gap:12px; } .mv-contact-form label{ font-size:13px; font-weight:600; display:flex; flex-direction:column; gap:5px; } .mv-hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; } .mv-contact-reservation-fields{ display:flex; gap:10px; flex-wrap:wrap; background:var(--mv-surface-alt); border-radius:10px; padding:10px; } .mv-contact-reservation-fields label{ flex:1; min-width:90px; } /* Input riêng cho form này — không phụ thuộc plugin mapsviet-account (có thể chưa cài) định nghĩa .mv-input ở nơi khác; cùng style nếu cả 2 cùng tồn tại thì không xung đột vì cùng 1 thiết kế. */ .mv-input{ width:100%; height:40px; padding:0 12px; border:1px solid var(--mv-border); border-radius:9px; background:var(--mv-surface); font-size:13.5px; font-family:inherit; color:var(--mv-text-primary); box-sizing:border-box; } textarea.mv-input{ height:auto; padding:10px 12px; resize:vertical; } .mv-input:focus{ outline:none; border-color:var(--mv-accent); box-shadow:0 0 0 3px var(--mv-accent-light); } .mv-contact-form-msg{ font-size:13px; font-weight:600; min-height:0; } .mv-contact-form-msg.mv-success{ color:var(--mv-success, #1a7f37); } .mv-contact-form-msg.mv-error{ color:var(--mv-danger, #d33); } .mv-btn-primary{ background:var(--mv-accent); color:#fff; border:none; border-radius:999px; padding:11px 22px; font-size:14px; font-weight:600; white-space:nowrap; box-shadow:var(--mv-shadow-sm); font-family:var(--mv-font-display); display:inline-flex; align-items:center; gap:8px; text-decoration:none; } .mv-btn-primary:hover{ background:var(--mv-accent-dark); } .mv-btn-outline{ background:var(--mv-surface); color:var(--mv-text-primary); border:1px solid var(--mv-border-strong); border-radius:999px; padding:10px 18px; font-size:14px; font-weight:600; white-space:nowrap; font-family:var(--mv-font-display); display:inline-flex; align-items:center; gap:8px; text-decoration:none; } .mv-btn-outline:hover{ background:var(--mv-surface-alt); } /* Layout: sidebar (rail mảnh) + content */ .mv-layout{ display:flex; align-items:flex-start; } aside.mv-sidebar{ width:var(--mv-sidebar-w); flex-shrink:0; background:var(--mv-surface); border-right:1px solid var(--mv-border); position:sticky; top:var(--mv-header-h); height:calc(100vh - var(--mv-header-h)); overflow-y:auto; padding:18px 10px; display:flex; flex-direction:column; align-items:center; gap:3px; } .mv-rail-create-wrap{ position:relative; margin-bottom:12px; flex-shrink:0; align-self:center; } .mv-rail-create{ width:52px; height:52px; border-radius:16px; background:var(--mv-accent); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:19px; box-shadow:0 8px 18px -6px rgba(26,115,232,.5); text-decoration:none; border:none; cursor:pointer; font-family:inherit; } .mv-rail-create:hover{ background:var(--mv-accent-dark); } /* Toạ độ thật (top/left/bottom, transform) do JS tự tính và set trực tiếp khi mở (xem mapsviet-core.js) — vì menu bị JS chuyển ra document.body và dùng position:fixed để tránh bị .mv-sidebar (overflow-y:auto khiến overflow-x cũng tự thành auto, cắt mất nội dung tràn ngang) cắt chữ. CSS ở đây chỉ còn set style ngoại hình, không set vị trí. */ .mv-rail-create-menu{ background:var(--mv-surface); border:1px solid var(--mv-border); border-radius:var(--mv-radius); box-shadow:var(--mv-shadow-md); padding:6px; min-width:200px; z-index:200; display:flex; flex-direction:column; gap:2px; } .mv-rail-create-menu[hidden]{ display:none; } .mv-rail-create-menu-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:var(--mv-text-primary); font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; } .mv-rail-create-menu-item:hover{ background:var(--mv-accent-light); color:var(--mv-accent-dark); } .mv-rail-create-menu-item i{ width:18px; text-align:center; color:var(--mv-text-muted); font-size:15px; } .mv-rail-create-menu-item:hover i{ color:var(--mv-accent-dark); } /* Trong bottom nav mobile, popup phải mở LÊN TRÊN (nút nằm sát đáy màn hình), neo phía trên vòng tròn nổi. */ .mv-rail-create-wrap-bottom{ position:relative; flex:1; display:flex; align-items:center; justify-content:center; height:100%; margin-bottom:0; } .mv-nav-item{ width:100%; display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 4px 10px; border-radius:12px; color:var(--mv-text-secondary); font-size:10.5px; font-weight:600; text-align:center; line-height:1.2; cursor:pointer; text-decoration:none; font-family:var(--mv-font-display); } .mv-nav-item .mv-ic{ width:auto; font-size:19px; color:var(--mv-text-muted); } .mv-nav-item:hover{ background:var(--mv-accent-light); color:var(--mv-accent-dark); } .mv-nav-item:hover .mv-ic{ color:var(--mv-accent-dark); } .mv-nav-item.mv-active{ background:var(--mv-accent-light); color:var(--mv-accent-dark); } .mv-nav-item.mv-active .mv-ic{ color:var(--mv-accent); } @media (max-width:820px){ aside.mv-sidebar{ flex-direction:column; align-items:stretch; position:fixed; top:0; left:0; height:100vh; z-index:90; width:min(220px, 85vw); transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--mv-shadow-md); padding-top:calc(var(--mv-header-h) + 14px); } aside.mv-sidebar.mv-open{ transform:translateX(0); } .mv-sidebar-backdrop.mv-open{ display:block; position:fixed; inset:0; background:rgba(15,16,20,.4); z-index:80; } .mv-nav-item{ flex-direction:row; justify-content:flex-start; font-size:13.5px; gap:12px; padding:10px 14px; } .mv-nav-item .mv-ic{ width:20px; } .mv-rail-create{ align-self:center; } .mv-header-search{ display:none; } } .mv-sidebar-backdrop{ display:none; } /* Mục sidebar chỉ dành cho mobile (VD "Đăng nhập"/"Đăng ký" khi chưa có tài khoản) — desktop đã có nút riêng ở topbar nên ẩn đi tránh trùng lặp, chỉ hiện lại khi màn hình đủ nhỏ để nút topbar đó đã bị ẩn. */ .mv-nav-item-mobile-only{ display:none; } @media (max-width:820px){ .mv-nav-item-mobile-only{ display:flex; } } /* Lỗi đã sửa (nguyên nhân "tràn header" + "thiếu logo/search" trên mobile): trước đây .mv-header-center (chứa CẢ logo lẫn search) bị ẩn HẲN bằng display:none — Quang tưởng logo/search "chưa có" nhưng thực ra chúng vẫn tồn tại trong HTML, chỉ bị ẩn có chủ đích sai. Đồng thời .mv-topbar-right (3 nút Đăng nhập/Đăng địa điểm/Đăng tin) HOÀN TOÀN KHÔNG có media query nào — luôn hiện đủ text ở mọi kích thước màn hình, đây mới là nguyên nhân TRÀN thật. Giờ: hiện lại logo (ẩn khối search to, thay bằng 1 icon mở overlay tìm kiếm riêng — xem #mv-mobile-search-toggle), ẩn bớt các nút text dài (chuyển vào sidebar drawer), chỉ giữ icon gọn ở header. */ @media (max-width:820px){ .mv-header-center{ display:flex !important; flex:1; } .mv-header-center-group{ max-width:none; } .mv-search-box{ display:none; } .mv-topbar-right .mv-btn-outline, .mv-topbar-right .mv-btn-primary{ display:none; } .mv-topbar-inner{ padding:0 14px; gap:8px; } main.mv-content{ padding-bottom:78px; } /* Chừa chỗ cho bottom nav app-style cố định phía dưới. */ } @media (max-width:480px){ .mv-logo .mv-logo-text{ display:none; } } /* Icon tìm kiếm mobile (JS chèn vào .mv-topbar-right) — bấm mở overlay chứa lại chính form search đã có sẵn trong .mv-header-center-group, không tạo form mới trùng lặp. */ #mv-mobile-search-toggle{ display:none; } @media (max-width:820px){ #mv-mobile-search-toggle{ display:flex; } } body.mv-mobile-search-open .mv-search-box{ display:flex !important; position:fixed; top:var(--mv-header-h); left:0; right:0; z-index:70; border-radius:0; height:56px; padding:0 16px; border:none; border-bottom:1px solid var(--mv-border); background:var(--mv-surface); box-shadow:var(--mv-shadow-md); } /* Bottom nav app-style — chỉ hiện mobile, thay thế phần lớn nhu cầu bấm vào sidebar/header cho các hành động chính (theo yêu cầu "dạng app có nút bấm bên dưới"). */ .mv-bottom-nav{ display:none; } @media (max-width:820px){ .mv-bottom-nav{ display:flex; align-items:center; justify-content:space-around; position:fixed; bottom:0; left:0; right:0; z-index:75; background:var(--mv-surface); border-top:1px solid var(--mv-border); border-radius:18px 18px 0 0; height:66px; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -6px 20px -6px rgba(15,23,42,.14); } .mv-bottom-nav-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; flex:1; height:100%; color:var(--mv-text-muted); font-size:10.5px; font-weight:600; text-decoration:none; font-family:var(--mv-font-display); border-radius:12px; transition:background-color .15s ease, color .15s ease; } .mv-bottom-nav-item i{ font-size:19px; transition:transform .15s ease; } .mv-bottom-nav-item.mv-active{ color:var(--mv-accent); background:var(--mv-accent-light); } .mv-bottom-nav-item.mv-active i{ transform:translateY(-1px); } .mv-bottom-nav-item.mv-bottom-nav-cta{ position:relative; background:none !important; } .mv-bottom-nav-item.mv-bottom-nav-cta .mv-bottom-nav-cta-circle{ width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg, var(--mv-accent) 0%, var(--mv-accent-dark) 100%); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; margin-top:-28px; box-shadow:0 8px 18px -4px rgba(26,115,232,.5); border:3px solid var(--mv-surface); transition:transform .15s ease; } .mv-bottom-nav-item.mv-bottom-nav-cta:active .mv-bottom-nav-cta-circle{ transform:scale(.93); } } /* FAQ dạng accordion — dùng chung toàn site (tỉnh/phường/mã bưu chính/địa điểm/doanh nghiệp) */ .mv-faq-list{ display:flex; flex-direction:column; gap:10px; } .mv-faq-item{ background:var(--mv-surface); border:1px solid var(--mv-border); border-radius:var(--mv-radius); overflow:hidden; } .mv-faq-item summary{ list-style:none; cursor:pointer; padding:15px 18px; font-size:13.5px; font-weight:700; color:var(--mv-text-primary); display:flex; align-items:center; justify-content:space-between; gap:12px; } .mv-faq-item summary::-webkit-details-marker{ display:none; } .mv-faq-item summary::after{ content:"+"; font-size:18px; font-weight:400; color:var(--mv-text-muted); flex-shrink:0; transition:transform .15s ease; } .mv-faq-item[open] summary::after{ transform:rotate(45deg); } .mv-faq-item[open] summary{ border-bottom:1px solid var(--mv-border); } .mv-faq-item .mv-faq-answer{ padding:14px 18px 16px; font-size:13px; color:var(--mv-text-secondary); line-height:1.65; margin:0; } main.mv-content{ flex:1; min-width:0; padding:28px 32px 60px; max-width:calc(100% - var(--mv-sidebar-w)); } .mv-content-inner{ max-width:1180px; margin:0 auto; } @media (max-width:820px){ main.mv-content{ max-width:100%; padding:22px 20px calc(86px + env(safe-area-inset-bottom)); } } @media (max-width:600px){ main.mv-content{ padding:16px 14px calc(86px + env(safe-area-inset-bottom)); } } /* Section headers */ .mv-section{ margin-bottom:34px; } .mv-section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:12px; flex-wrap:wrap; } .mv-section-head h2{ font-size:19px; margin:0; } .mv-section-head .mv-sub{ font-size:13px; color:var(--mv-text-muted); margin-top:3px; font-weight:500; } .mv-section-head .mv-link{ font-size:14px; color:var(--mv-accent); font-weight:600; white-space:nowrap; } /* Breadcrumb */ .mv-breadcrumb{ font-size:13px; color:var(--mv-text-muted); margin:18px 0 6px; } .mv-breadcrumb a{ color:var(--mv-text-secondary); font-weight:600; } .mv-breadcrumb a:hover{ color:var(--mv-accent); } .mv-breadcrumb .mv-sep{ margin:0 7px; color:var(--mv-border-strong); } /* Cards + grid (dùng chung cho địa điểm/rao vặt/tỉnh thành...) */ .mv-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; } @media (max-width:820px){ .mv-grid{ grid-template-columns:1fr; } } .mv-card{ background:var(--mv-surface); border:1px solid var(--mv-border); border-radius:16px; padding:18px; transition:box-shadow .15s, border-color .15s; box-shadow:var(--mv-shadow-sm); cursor:pointer; min-width:0; } .mv-card:hover{ border-color:var(--mv-border-strong); box-shadow:var(--mv-shadow-md); } .mv-card-top{ display:flex; gap:14px; } .mv-thumb{ width:58px; height:58px; border-radius:13px; position:relative; overflow:hidden; flex-shrink:0; } .mv-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .mv-card-info{ flex:1; min-width:0; } .mv-card-info-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; } .mv-name-row{ display:flex; align-items:center; gap:6px; min-width:0; } .mv-name-row .mv-name{ font-size:16px; font-weight:700; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--mv-font-display); } .mv-name-row .mv-verified{ color:var(--mv-accent); font-size:13px; flex-shrink:0; } .mv-badge{ font-size:11px; padding:3px 9px; border-radius:7px; font-weight:600; white-space:nowrap; flex-shrink:0; } .mv-badge.mv-open{ background:var(--mv-success-light); color:var(--mv-success); } .mv-badge.mv-closed{ background:var(--mv-danger-light); color:var(--mv-danger); } .mv-badge.mv-featured{ background:var(--mv-accent-light); color:var(--mv-accent-dark); } .mv-badge.mv-new{ background:var(--mv-accent-light); color:var(--mv-accent-dark); } .mv-card-meta{ font-size:13px; color:var(--mv-text-secondary); margin:4px 0 0; } .mv-card-stats{ display:flex; align-items:center; gap:10px; margin-top:8px; font-size:12.5px; flex-wrap:wrap; color:var(--mv-text-secondary); } .mv-card-stats .mv-rating i{ color:var(--mv-warning); } /* Ad slots (dán mã đơn vị quảng cáo tự chọn qua Customizer, không hard-code) */ .mv-ad-slot{ text-align:center; margin:28px 0; } .mv-ad-slot .mv-ad-label{ font-size:11px; color:var(--mv-text-muted); margin:0 0 8px; letter-spacing:.06em; text-transform:uppercase; } .mv-ad-slot .mv-ad-box{ background:var(--mv-surface-alt); border:1px solid var(--mv-border); border-radius:12px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--mv-text-muted); font-size:13px; margin:0 auto; padding:0 20px; text-align:center; line-height:1.5; } .mv-ad-leaderboard .mv-ad-box{ max-width:728px; min-height:90px; } .mv-ad-rectangle .mv-ad-box{ max-width:300px; min-height:250px; } /* Toast */ .mv-toast{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(16px); background:#202124; color:#fff; padding:13px 22px; border-radius:999px; font-size:14px; font-weight:600; display:flex; align-items:center; gap:10px; box-shadow:var(--mv-shadow-md); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:200; } .mv-toast.mv-show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; } .mv-toast i{ color:#34a853; } /* Footer */ .mv-footer-popular{ background:var(--mv-surface-alt); padding:36px 0 30px; border-bottom:1px solid var(--mv-border); } /* .mv-footer-popular-inner: cố ý không đặt style riêng — head/scroll bên trong đã tự có max-width/padding, chỉ cần là block thường (không phải grid như .mv-footer-mega-inner) để 2 phần tử con xếp chồng dọc đúng thay vì bị grid coi thành 2 cột cạnh nhau. */ .mv-footer-popular-head{ max-width:1200px; margin:0 auto 16px; padding:0 20px; display:flex; align-items:baseline; justify-content:space-between; gap:16px; } .mv-footer-popular-head h2{ font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--mv-text-muted); margin:0; } .mv-footer-popular-scroll{ max-width:1200px; margin:0 auto; padding:0 20px 6px; display:flex; gap:14px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--mv-border-strong) transparent; } .mv-footer-popular-scroll::-webkit-scrollbar{ height:6px; } .mv-footer-popular-scroll::-webkit-scrollbar-thumb{ background:var(--mv-border-strong); border-radius:3px; } .mv-t-card{ flex:0 0 208px; background:var(--mv-surface); border:1px solid var(--mv-border); border-radius:8px; padding:16px 16px 14px; } .mv-t-card-label{ display:flex; align-items:center; gap:8px; margin-bottom:12px; } .mv-t-card-dot{ width:6px; height:6px; border-radius:50%; background:var(--mv-accent); flex:none; } .mv-t-card-label span:last-child{ font-size:12.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--mv-text-secondary); } .mv-t-card-list{ max-height:158px; overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(to bottom, black 72%, transparent 100%); mask-image:linear-gradient(to bottom, black 72%, transparent 100%); } .mv-t-card-list a{ display:block; font-size:13px; line-height:1.9; color:var(--mv-text-secondary); text-decoration:none; } .mv-t-card-list a:hover{ color:var(--mv-accent); } .mv-t-card-more{ display:inline-block; margin-top:10px; font-size:12px; font-weight:500; color:var(--mv-accent); text-decoration:none; } .mv-footer-mega{ background:var(--mv-surface); border-bottom:1px solid var(--mv-border); padding:32px 0 24px; } .mv-footer-mega-inner{ max-width:1200px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:24px 32px; } .mv-footer-mega-col h4{ font-size:13px; font-weight:700; color:var(--mv-text-muted); margin:0 0 14px; text-transform:uppercase; letter-spacing:.04em; } .mv-footer-mega-col{ display:flex; flex-direction:column; } .mv-footer-mega-col a{ font-size:13.5px; color:var(--mv-text-secondary); text-decoration:none; padding:0 0 9px; line-height:1.5; } .mv-footer-mega-col a:hover{ color:var(--mv-accent); } .mv-footer-mega-col a.mv-footer-mega-more{ color:var(--mv-accent); font-weight:500; } @media (max-width:600px){ .mv-footer-mega-inner{ grid-template-columns:repeat(2,1fr); gap:20px; } } footer.mv-footer{ background:var(--mv-surface-alt); } .mv-footer-brandgrid{ max-width:1200px; margin:0 auto; padding:36px 20px 28px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; border-bottom:1px solid var(--mv-border); } .mv-footer-brand{ min-width:0; } .mv-footer-logo{ display:flex; align-items:center; gap:9px; font-size:18px; font-weight:800; color:var(--mv-text-primary); text-decoration:none; margin-bottom:14px; } .mv-footer-logo i{ color:var(--mv-accent); font-size:17px; } .mv-footer-tagline{ font-size:13px; color:var(--mv-text-muted); margin:0; max-width:32ch; line-height:1.7; } .mv-footer-social{ display:flex; gap:10px; margin-top:16px; } .mv-footer-social a{ width:34px; height:34px; border-radius:50%; background:var(--mv-surface); border:1px solid var(--mv-border); display:flex; align-items:center; justify-content:center; color:var(--mv-text-secondary); font-size:14px; text-decoration:none; } .mv-footer-social a:hover{ background:var(--mv-accent); border-color:var(--mv-accent); color:#fff; } .mv-footer-contact{ display:flex; flex-direction:column; gap:6px; margin-top:12px; } .mv-footer-contact a{ font-size:13px; color:var(--mv-text-muted); text-decoration:none; } .mv-footer-contact a:hover{ color:var(--mv-accent); } .mv-footer-contact i{ width:14px; margin-right:2px; } .mv-footer-col h4{ font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin:0 0 14px; color:var(--mv-text-muted); } .mv-footer-col a{ display:block; font-size:13.5px; color:var(--mv-text-secondary); margin-bottom:9px; text-decoration:none; } .mv-footer-col a:hover{ color:var(--mv-accent); } .mv-footer-bottom{ max-width:1200px; margin:0 auto; padding:18px 20px 26px; display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; justify-content:space-between; } .mv-footer-bottom p{ margin:0; font-size:12px; color:var(--mv-text-muted); } .mv-footer-disclaimer{ max-width:56ch; } .mv-footer-disclaimer a{ color:var(--mv-accent); text-decoration:none; } @media (max-width:860px){ .mv-footer-brandgrid{ grid-template-columns:1fr 1fr; row-gap:28px; } .mv-footer-brand{ grid-column:1 / -1; } } @media (max-width:520px){ .mv-footer-brandgrid{ grid-template-columns:1fr; padding:28px 20px 20px; } .mv-footer-popular-head{ flex-direction:column; align-items:flex-start; gap:4px; } } /* Google-style hero (trang chủ) */ .mv-google-hero{ text-align:center; padding:40px 20px 36px; } .mv-google-logo{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:12px; } .mv-google-logo i{ font-size:36px; color:var(--mv-brand); } .mv-google-logo .mv-logo-word{ font-family:var(--mv-font-display); font-size:42px; font-weight:800; letter-spacing:-0.01em; } .mv-google-tagline{ font-size:14.5px; color:var(--mv-text-secondary); margin:0 0 28px; font-weight:500; } .mv-google-search-box{ display:flex; align-items:center; gap:12px; max-width:584px; margin:0 auto; background:var(--mv-surface); border:1px solid #dfe1e5; border-radius:999px; padding:0 20px; height:46px; transition:box-shadow .15s, border-color .15s; } .mv-google-search-box:hover, .mv-google-search-box:focus-within{ box-shadow:0 1px 6px rgba(32,33,36,.28); border-color:transparent; } .mv-google-search-box input{ flex:1; min-width:0; border:none; outline:none; background:none; font-size:15px; font-family:inherit; color:var(--mv-text-primary); } .mv-google-buttons{ display:flex; justify-content:center; gap:10px; margin:24px 0 26px; flex-wrap:wrap; } .mv-google-btn{ background:#f8f9fa; border:1px solid #f8f9fa; border-radius:4px; height:36px; padding:0 16px; font-size:13.5px; color:#3c4043; font-weight:500; } .mv-google-btn:hover{ border-color:#dadce0; box-shadow:0 1px 1px rgba(0,0,0,.1); } .mv-google-quick-links{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; } .mv-quick-cat{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:#3c4043; background:#f1f3f4; border:none; border-radius:999px; padding:8px 14px; } .mv-quick-cat:hover{ background:#e8eaed; } .mv-quick-cat.mv-active{ background:var(--mv-accent); color:#fff; } /* Empty state dùng chung */ .mv-empty-state{ grid-column:1 / -1; text-align:center; padding:56px 20px; color:var(--mv-text-secondary); } .mv-empty-state i{ font-size:32px; color:var(--mv-text-muted); margin-bottom:12px; display:block; } /* Nhãn nhỏ in hoa (eyebrow) dùng lại ở nhiều khối */ .mv-eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--mv-accent); display:inline-flex; align-items:center; gap:6px; } .mv-eyebrow i{ font-size:6px; color:var(--mv-warning); } /* Bộ điều khiển vị trí duy nhất của trang chủ */ .mv-locbar{ display:flex; align-items:center; gap:13px; margin-bottom:18px; padding:13px 16px; background:linear-gradient(100deg,#fff 0%,var(--mv-map-blue-light,#e9f6fd) 100%); border:1px solid #d9eaf4; border-radius:16px; box-shadow:var(--mv-shadow-sm); font-size:13.5px; } .mv-locbar-icon{ width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:#fff; background:linear-gradient(145deg,var(--mv-map-blue,#168bd2),#0b6ea8); box-shadow:0 6px 15px rgba(22,139,210,.22); } .mv-locbar-content{ display:grid; grid-template-columns:auto 1fr; column-gap:9px; align-items:center; min-width:0; flex:1; } .mv-locbar-kicker{ color:var(--mv-text-muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.045em; } .mv-locbar-content strong{ font-size:14.5px; color:var(--mv-text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mv-locbar-updated{ grid-column:1 / -1; color:var(--mv-text-muted); font-size:11.5px; margin-top:1px; } .mv-locbar-updated i{ color:var(--mv-map-green,#249c47); margin-right:3px; } .mv-locbar-change{ display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(215,25,32,.2); border-radius:999px; background:#fff; padding:8px 13px; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--mv-accent); cursor:pointer; white-space:nowrap; } .mv-locbar-change:hover{ background:var(--mv-accent-light); border-color:rgba(215,25,32,.35); } .mv-locbar-change:disabled{ opacity:.7; cursor:wait; } /* Hộp gợi ý định vị xuất hiện ngay lần đầu, trước khi trình duyệt xin quyền. */ .mv-location-prompt{ position:fixed; inset:0; z-index:10020; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(20,27,34,.58); backdrop-filter:blur(5px); } .mv-location-prompt[hidden]{ display:none !important; } body.mv-location-prompt-open{ overflow:hidden; } .mv-location-prompt-card{ width:min(100%,480px); position:relative; padding:30px; text-align:center; background:#fff; border:1px solid rgba(255,255,255,.7); border-radius:24px; box-shadow:0 26px 70px rgba(18,28,38,.28); overflow:hidden; } .mv-location-prompt-card::before{ content:''; position:absolute; inset:0 0 auto; height:6px; background:linear-gradient(90deg,var(--mv-accent) 0 34%,var(--mv-map-yellow,#f4c430) 34% 55%,var(--mv-map-green,#249c47) 55% 78%,var(--mv-map-blue,#168bd2) 78%); } .mv-location-prompt-icon{ width:70px; height:70px; margin:2px auto 18px; border-radius:22px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:31px; background:linear-gradient(145deg,#ef3038,var(--mv-accent-dark)); box-shadow:0 12px 26px rgba(215,25,32,.25); } .mv-location-prompt-copy h2{ font-size:21px; margin:0 0 9px; } .mv-location-prompt-copy p{ color:var(--mv-text-secondary); font-size:13.5px; line-height:1.65; margin:0 auto 20px; max-width:390px; } .mv-location-prompt-actions{ display:flex; flex-direction:column; align-items:stretch; gap:8px; } .mv-location-prompt-actions .mv-btn-primary{ justify-content:center; border-radius:12px; min-height:46px; cursor:pointer; } .mv-location-prompt-later{ border:0; background:transparent; color:var(--mv-text-secondary); padding:9px; font:600 13px var(--mv-font-body); cursor:pointer; } .mv-location-prompt-later:hover{ color:var(--mv-text-primary); } .mv-location-prompt-status{ min-height:20px; margin:8px 0 0; color:var(--mv-text-secondary); font-size:12px; } @media (max-width:560px){ .mv-locbar{ align-items:flex-start; padding:12px; gap:10px; } .mv-locbar-icon{ width:38px; height:38px; border-radius:12px; } .mv-locbar-content{ display:block; } .mv-locbar-kicker,.mv-locbar-content strong,.mv-locbar-updated{ display:block; } .mv-locbar-content strong{ font-size:13.5px; } .mv-locbar-updated{ margin-top:2px; line-height:1.35; } .mv-locbar-change{ padding:7px 9px; font-size:0; } .mv-locbar-change i{ font-size:13px; } .mv-location-prompt-card{ padding:26px 20px 22px; border-radius:20px; } } /* Banner chào mừng trang chủ */ .mv-welcome-hero{ position:relative; overflow:hidden; background:linear-gradient(125deg,#970f15 0%,var(--mv-accent) 58%,#ed3037 100%); border-radius:18px; padding:34px; color:#fff; margin-bottom:26px; box-shadow:0 16px 35px rgba(168,15,22,.18); } .mv-welcome-hero::after{ content:''; position:absolute; right:-50px; bottom:-85px; width:240px; height:240px; border-radius:50%; border:38px solid rgba(244,196,48,.12); } .mv-welcome-illustration{ position:absolute; right:24px; top:-10px; width:190px; height:190px; opacity:.95; pointer-events:none; } .mv-welcome-hero .mv-eyebrow{ color:#fff0a8; } .mv-welcome-hero .mv-eyebrow i{ color:var(--mv-map-yellow,#f4c430); font-size:10px; } .mv-welcome-hero h1{ font-size:clamp(24px,2.8vw,30px); font-weight:800; margin:10px 0 8px; max-width:560px; line-height:1.25; color:#fff; position:relative; z-index:1; } .mv-welcome-hero p{ font-size:14px; color:rgba(255,255,255,.85); max-width:480px; margin:0 0 20px; line-height:1.55; position:relative; z-index:1; } /* Lỗi đã sửa: illustration kích thước cố định (190px, position:absolute) không có media query — ở màn hình hẹp (mobile), ảnh trang trí đè lên tiêu đề vì container co lại nhưng ảnh giữ nguyên kích thước/vị trí tuyệt đối. */ @media (max-width:640px){ .mv-welcome-illustration{ width:110px; height:110px; opacity:.5; right:10px; top:6px; } .mv-welcome-hero h1{ max-width:75%; font-size:22px; } .mv-welcome-hero p{ max-width:100%; } } @media (max-width:400px){ .mv-welcome-illustration{ display:none; } .mv-welcome-hero h1{ max-width:100%; } } .mv-welcome-actions{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; } .mv-btn-cta{ background:#fff; color:var(--mv-accent-dark); padding:11px 22px; border-radius:999px; font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-family:var(--mv-font-display); } .mv-btn-cta:hover{ background:var(--mv-map-yellow-light,#fff8dc); } .mv-welcome-stats{ display:flex; gap:20px; } .mv-welcome-stats div{ display:flex; flex-direction:column; } .mv-welcome-stats b{ font-size:17px; font-weight:800; } .mv-welcome-stats span{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.7); } /* Bố cục trang chủ: cột chính + cột phải sticky */ .mv-front-grid{ display:grid; grid-template-columns:1fr 320px; gap:24px; align-items:start; } .mv-front-side{ position:sticky; top:calc(var(--mv-header-h) + 24px); display:flex; flex-direction:column; gap:18px; } @media (max-width:1180px){ .mv-front-grid{ grid-template-columns:1fr; } .mv-front-side{ position:static; flex-direction:row; overflow-x:auto; } .mv-front-side > *{ flex:1; min-width:260px; } } /* Thẻ dạng "side card" dùng chung (tab mới cập nhật/xu hướng, và các widget tương tự) */ .mv-side-card{ background:var(--mv-surface); border:1px solid var(--mv-border); border-radius:var(--mv-radius); overflow:hidden; } .mv-side-tabs{ display:flex; border-bottom:1px solid var(--mv-border); } .mv-side-tab{ flex:1; text-align:center; padding:13px 8px; font-size:13px; font-weight:600; color:var(--mv-text-muted); border:none; background:none; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; font-family:var(--mv-font-display); } .mv-side-tab.mv-active{ color:var(--mv-accent-dark); border-color:var(--mv-accent); } .mv-side-list{ padding:6px; } .mv-side-item{ display:flex; gap:10px; padding:11px 8px; border-radius:10px; text-decoration:none; color:inherit; } .mv-side-item:hover{ background:var(--mv-surface-alt); } .mv-side-item[hidden]{ display:none; } .mv-side-dot{ width:8px; height:8px; border-radius:50%; background:var(--mv-warning); flex-shrink:0; margin-top:6px; } .mv-side-item-body{ display:flex; flex-direction:column; } .mv-side-item-title{ font-size:12.5px; font-weight:600; line-height:1.4; color:var(--mv-text-primary); margin-bottom:2px; } .mv-side-item-time{ font-size:11px; color:var(--mv-text-muted); } /* Thẻ quảng bá dùng chung (VD "Dành cho doanh nghiệp") */ .mv-promo-card{ background:var(--mv-accent-light); border:1px solid transparent; border-radius:var(--mv-radius); padding:18px; } .mv-promo-card h4{ font-size:15.5px; font-weight:700; margin:8px 0 6px; } .mv-promo-card p{ font-size:12.5px; color:var(--mv-text-secondary); margin:0 0 14px; line-height:1.5; } .mv-promo-card .mv-btn-primary{ width:100%; justify-content:center; } /* Menu nhanh (quicknav) — thẻ neo cuộn nhanh tới từng section trong trang chi tiết dài. */ .mv-quicknav-card{ background:var(--mv-surface); border:1px solid var(--mv-border); border-radius:var(--mv-radius); padding:16px; margin-bottom:14px; } .mv-quicknav-card .mv-lbl{ font-size:12px; font-weight:700; color:var(--mv-text-primary); margin-bottom:8px; } .mv-quicknav-list{ display:flex; flex-direction:column; gap:2px; } .mv-quicknav-list a{ display:flex; align-items:center; gap:9px; padding:9px 8px; border-radius:9px; font-size:13px; font-weight:500; color:var(--mv-text-secondary); text-decoration:none; } .mv-quicknav-list a i{ width:15px; text-align:center; color:var(--mv-text-muted); flex-shrink:0; } .mv-quicknav-list a:hover{ background:var(--mv-accent-light); color:var(--mv-accent-dark); } .mv-quicknav-list a:hover i{ color:var(--mv-accent-dark); } /* Chia sẻ trang — dùng chung cho địa điểm/doanh nghiệp/tỉnh/phường. */ .mv-share-row{ display:flex; gap:8px; } .mv-share-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; height:36px; border-radius:9px; border:1px solid var(--mv-border); background:var(--mv-surface); color:var(--mv-text-secondary); font-size:11.5px; font-weight:600; text-decoration:none; } .mv-share-btn i{ font-size:13px; } .mv-share-btn.mv-fb:hover{ background:#1877F2; color:#fff; border-color:#1877F2; } .mv-share-btn.mv-zalo:hover{ background:var(--mv-accent); color:#fff; border-color:var(--mv-accent); } /* Giờ hoạt động rút gọn ở sidebar — chỉ hiện hôm nay, bấm để xổ đủ 7 ngày. */ .mv-hours-compact-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .mv-hours-today{ display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--mv-text-secondary); margin-bottom:10px; } .mv-hours-today b{ color:var(--mv-text-primary); font-weight:700; } .mv-hours-toggle{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--mv-accent); background:none; border:none; padding:0; cursor:pointer; } .mv-hours-full{ margin-top:12px; width:100%; border-collapse:collapse; font-size:12.5px; } .mv-hours-full td{ padding:6px 0; border-bottom:1px solid var(--mv-border); color:var(--mv-text-secondary); } .mv-hours-full td:last-child{ text-align:right; font-weight:600; color:var(--mv-text-primary); } .mv-hours-full tr.mv-today td{ color:var(--mv-accent-dark); font-weight:700; } .mv-hours-full tr:last-child td{ border-bottom:none; } /* Chip từ khoá SEO dưới phần Giới thiệu. */ .mv-tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; } .mv-tag{ font-size:11.5px; font-weight:600; color:var(--mv-accent-dark); background:var(--mv-accent-light); padding:5px 12px; border-radius:999px; } /* Nguồn dữ liệu / thời điểm cập nhật. */ .mv-data-source{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--mv-text-muted); margin-top:14px; padding-top:14px; border-top:1px solid var(--mv-border); } /* Chip lọc dùng chung cho các trang danh mục/danh sách. */ .mv-filter-bar{ display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; } .mv-filter-chips{ display:flex; gap:8px; flex-wrap:wrap; } .mv-filter-chip{ padding:8px 15px; border-radius:999px; font-size:12.5px; font-weight:600; border:1px solid var(--mv-border); background:var(--mv-surface); color:var(--mv-text-secondary); cursor:pointer; } .mv-filter-chip:hover{ border-color:var(--mv-accent); color:var(--mv-accent-dark); } .mv-filter-chip.mv-active{ background:var(--mv-accent); border-color:var(--mv-accent); color:#fff; } .mv-filter-select{ margin-left:auto; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--mv-text-secondary); flex-wrap:wrap; } .mv-filter-select select{ border:1px solid var(--mv-border); border-radius:999px; padding:8px 14px; font-family:inherit; font-size:12.5px; background:var(--mv-surface); color:var(--mv-text-primary); } .mv-filter-toggle{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--mv-text-secondary); border:1px solid var(--mv-border); border-radius:999px; padding:7px 14px 7px 10px; background:var(--mv-surface); } .mv-filter-toggle input{ accent-color:var(--mv-accent); width:15px; height:15px; } /* Phân trang (bọc quanh output the_posts_pagination() của WP core). */ .mv-pagination{ margin-top:28px; overflow-x:auto; } /* Cuộn ngang thay vì vỡ dòng nếu có quá nhiều số trang hiện cùng lúc. */ /* Phòng ngừa CÙNG lỗi grid/flex-item phình quá khổ (đã gặp ở .mv-front-grid) cho mọi layout 2 cột dùng chung trong dự án — .mv-place-layout (danh mục/ địa điểm/doanh nghiệp), .mv-split (blog) đều có cột chính dùng flex:1. */ .mv-place-main, .mv-split > div:first-child, .mv-front-main{ min-width:0; } /* Lỗi đã sửa: WordPress bọc các nút số trang trong