/* ========================================================= * MUSK — BANNER TIÊU ĐỀ TRANG DÙNG CHUNG * ========================================================= * * NGUYÊN TẮC XẾP LỚP (từ dưới lên): * * -4 __background nền gradient navy → đen * -3 __background::before lưới SVG (screen blend + mask mềm 2 đầu) * -2 __background::after quầng sáng đường chân trời * -1 ::after scrim: làm rõ chữ + nối liền đáy * 1 ::before đường sáng mảnh ở cạnh đáy * 2 __container nội dung * * ========================================================= */ .musk-page-banner { position: relative; isolation: isolate; display: flex; align-items: stretch; width: 100%; /* Chiều cao nhìn thấy thực tế = min-height trừ margin-top âm. 260 - 90 = 170px. */ min-height: 260px; /* Bằng đúng tổng chiều cao header desktop: --musk-h (66px) + 2 x 12px đệm của wrapper = 90px. */ margin-top: -90px; overflow: hidden; color: #fff; } .musk-page-banner, .musk-page-banner *, .musk-page-banner *::before, .musk-page-banner *::after { box-sizing: border-box; } /* ========================================================= * KHỐI NỀN CHÍNH * * Đáy dừng ở #02051c thay vì #000 tuyệt đối. * Đen tuyệt đối tạo vệt cắt khi nối với section kế tiếp. * ========================================================= */ .musk-page-banner__background { position: absolute; z-index: -4; inset: 0; overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: cover; pointer-events: none; } /* ========================================================= * LỚP LƯỚI SVG * * mask-image bào mòn hai đầu để lưới tan dần thay vì bị cắt. * Đây là thứ khử vệt ngang, không phải lớp phủ tối. * ========================================================= */ .musk-page-banner__background::before { content: ""; position: absolute; inset: -1px; background-image: url("https://muskis.com.vn/wp-content/uploads/2026/08/bg_pattern_4.svg"); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; opacity: 0.62; /* brightness 2.15 làm line chói và bệt. 1.45 giữ được nét mảnh. */ filter: brightness(1.45) contrast(1.05) saturate(1.15); mix-blend-mode: screen; -webkit-mask-image: linear-gradient( 180deg, transparent 0%, rgba(0, 0, 0, 0.55) 9%, #000 26%, #000 82%, transparent 100% ); mask-image: linear-gradient( 180deg, transparent 0%, rgba(0, 0, 0, 0.55) 9%, #000 26%, #000 82%, transparent 100% ); pointer-events: none; } /* ========================================================= * QUẦNG SÁNG ĐƯỜNG CHÂN TRỜI * * Lưới phối cảnh có điểm tụ. Đặt ánh sáng đúng điểm tụ thì * hiệu ứng đọc ra là chủ ý, không đặt thì đọc ra là lỗi. * ========================================================= */ .musk-page-banner__background::after { content: ""; position: absolute; inset: 0; background: /* vệt sáng mảnh nằm ngang đúng đường chân trời */ radial-gradient( 68% 7% at 50% 70%, rgba(96, 142, 255, 0.3) 0%, rgba(96, 142, 255, 0.09) 45%, transparent 78% ), /* vầng sáng lớn khuếch tán phía trên chân trời */ radial-gradient( 62% 44% at 50% 46%, rgba(72, 108, 214, 0.16) 0%, rgba(30, 52, 140, 0.06) 46%, transparent 74% ); pointer-events: none; } /* ========================================================= * ĐƯỜNG SÁNG CẠNH ĐÁY * * Chi tiết duy nhất được phép "lên tiếng". * Biến chỗ giao với section sau thành nét chủ ý. * ========================================================= */ .musk-page-banner::before { content: ""; position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(96, 142, 255, 0.14) 22%, rgba(96, 142, 255, 0.5) 50%, rgba(96, 142, 255, 0.14) 78%, transparent 100% ); pointer-events: none; } /* ========================================================= * CONTAINER * ========================================================= */ .musk-page-banner__container { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; width: 100%; max-width: 1240px; min-height: 260px; margin: 0 auto; padding: 112px 24px 32px; } /* ========================================================= * TIÊU ĐỀ * * letter-spacing cũ -0.045em quá chặt: chữ hoa tiếng Việt có * dấu mũ và dấu thanh chồng lên nhau, "VỀ" và "CHÚNG" dính dấu. * Chữ hoa cỡ lớn cần tracking dương nhẹ. * ========================================================= */ .musk-page-banner__title { width: 100%; max-width: 1120px; margin: 0; color: #fff; font-weight: 700; line-height: 1.22; letter-spacing: 0.012em; text-align: center; text-transform: capitalize; text-shadow: 0 2px 20px rgba(1, 5, 34, 0.7), 0 0 52px rgba(96, 142, 255, 0.22); } /* Nền header nằm ở assets/css/header.css. Trước đây chỗ này có một khối .site-header, nhưng markup Flatsome dùng #header.header — class kia không tồn tại, code chết. */ /* ========================================================= * MOBILE * ========================================================= */ @media (max-width: 767px) { /* Chiều cao nhìn thấy: 160 - 82 = 78px. */ .musk-page-banner { min-height: 160px; margin-top: -82px; } .musk-page-banner__container { min-height: 160px; padding-top: 86px; padding-bottom: 16px; padding-right: 16px; padding-left: 16px; } .musk-page-banner__background::after { background: radial-gradient( 68% 7% at 50% 66%, rgba(96, 142, 255, 0.3) 0%, rgba(96, 142, 255, 0.09) 45%, transparent 78% ), radial-gradient( 62% 44% at 50% 46%, rgba(72, 108, 214, 0.16) 0%, rgba(30, 52, 140, 0.06) 46%, transparent 74% ); } .musk-page-banner__background::before { opacity: 0.5; right: -20%; left: -20%; background-size: auto 100%; } .musk-page-banner__title { line-height: 1.26; letter-spacing: 0.006em; } }