/* ========================================================================== DJMP – KHỐI TÙY BIẾN BỔ SUNG v10 (dán vào CUỐI file styleSheet.css) Theme: Default – OJS 3.5.0.3 – tapchi.ydn.edu.vn Cập nhật: 19/10/2026 v3: - Banner PC mới banner-pc.jpg (1920 x 480, tỉ lệ 4:1), nền trùng màu header -> tải lên tại Cài đặt → Trang web → Diện mạo → Thiết lập → Logo - Banner điện thoại mới banner-mobile.jpg (1080 x 600), nền trùng màu header -> chép đè vào \public\journals\1\banner-mobile.jpg - Bỏ hiệu ứng làm mờ mép bằng CSS (ảnh mới đã tự hòa màu nền) v4: - Chân trang (footer) nền #0F174B trùng banner, chữ và liên kết màu sáng v5: - Sửa banner điện thoại theo đúng cấu trúc theme Default OJS 3.5 (gỡ position:absolute + lề trái 40px của .pkp_site_name) - Nút ☰ nằm chồng lên góc phải trên của banner, menu mở phủ lên banner v6: - Nút ☰ hạ xuống 10px, to hơn (42 x 40), có nền tối + viền sáng cho dễ thấy - banner-mobile.jpg làm lại (chừa trống góc phải trên cho nút) -> ?v=4 v7: - Nút ☰ căn ngang tâm logo trường trên banner, ở mọi khổ màn hình - Gỡ transform (translateY -50%) đang đẩy nút lên trên 20px v8: - Đổi tông nền header + banner + chân trang sang xanh dương nhẹ #06478D (màu trung bình 3 mép banner gốc ban đầu); bố cục giữ nguyên như v7 - Làm lại banner-pc.jpg và banner-mobile.jpg theo màu mới -> ?v=5 v9: - Thanh menu chính, thanh tài khoản (admin) trên máy tính và bảng menu trên điện thoại bỏ nền xanh tím than cũ -> cùng màu nền banner v10: - Thay banner theo thiết kế mới (logo + DJMP + tên tạp chí + ISSN) banner-pc.jpg 1920 x 400, banner-mobile.jpg 1080 x 600 -> ?v=6 - Tông màu đồng bộ theo banner mới: nền #0F295B, chữ xanh ngọc #D1FEFF - Nút ☰ căn lại theo vị trí logo mới (15,33% chiều cao banner) ========================================================================== */ /* Màu nền header cũng là màu đã "nướng" sẵn vào mép 2 ảnh banner. Nếu sau này đổi màu nền, phải đổi giá trị dưới đây VÀ làm lại 2 ảnh banner. */ :root { --djmp-nen-header: #0F295B; /* nền header, banner, chân trang = màu nền banner mới */ --djmp-nen-nut: #1E4282; /* nền nút ☰ (sáng hơn nền một bậc để nổi trên banner) */ --djmp-chu-sang: #C8D6EA; /* chữ thường trên nền xanh (tương phản 9,6 : 1) */ --djmp-xanh-nhat: #D1FEFF; /* liên kết, điểm nhấn = màu dòng "DA NANG JOURNAL…" */ } /* Nền toàn bộ header (thanh admin, banner, thanh menu) trên máy tính và điện thoại */ .pkp_structure_head { background-color: var(--djmp-nen-header) !important; } /* Thanh menu chính và thanh tài khoản (admin): bỏ nền riêng (xanh tím than #0F174B còn sót trong phần CSS gốc) để lộ đúng màu nền header ở trên. Dùng #headerNavigationContainer (id có sẵn của thẻ
) để thắng các quy tắc cũ. */ #headerNavigationContainer .pkp_navigation_primary_row, #headerNavigationContainer .pkp_navigation_primary_row::before, #headerNavigationContainer .pkp_navigation_primary_row::after, #headerNavigationContainer .pkp_navigation_primary_wrapper, #headerNavigationContainer .pkp_navigation_primary, #headerNavigationContainer .pkp_navigation_search_wrapper, #headerNavigationContainer .pkp_navigation_user_wrapper, #headerNavigationContainer .pkp_navigation_user_wrapper::before, #headerNavigationContainer .pkp_navigation_user_wrapper::after, #headerNavigationContainer .pkp_navigation_user { background-color: transparent !important; background-image: none !important; } /* -------------------------------------------------------------------------- 1. Ẩn logo "OJS/PKP" ở góc phải dưới chân trang (mọi màn hình) -------------------------------------------------------------------------- */ .pkp_brand_footer { display: none !important; } /* -------------------------------------------------------------------------- 2. MÁY TÍNH (≥ 992px): banner 4:1 trải hết bề ngang khung trang -------------------------------------------------------------------------- */ @media (min-width: 992px) { #headerNavigationContainer .pkp_site_nav_menu { background-color: transparent !important; background-image: none !important; } .pkp_site_name .is_img { display: block !important; } .pkp_site_name .is_img img { display: block; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; } } /* -------------------------------------------------------------------------- 3. ĐIỆN THOẠI / MÁY TÍNH BẢNG (< 992px, khi theme chuyển sang nút ☰) Theme Default 3.5 mặc định: khung tên cao cố định 40px, khối logo .pkp_site_name ở position:absolute cách trái 40px -> banner bị trôi, lệch phải và đè lên nội dung. Các quy tắc dưới đây gỡ bỏ điều đó. -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { /* 3a. Khung header cao theo banner, không còn dải riêng cho nút ☰ */ .pkp_site_name_wrapper { position: relative !important; height: auto !important; padding: 0 !important; background-color: var(--djmp-nen-header) !important; } /* 3b. Khối logo nằm trong luồng trang, rộng hết màn hình */ .pkp_site_name { position: relative !important; left: auto !important; right: auto !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; white-space: normal !important; } /* 3c. Banner riêng cho điện thoại (1080 x 600, tỉ lệ 1,8 : 1). Đổi số sau ?v= mỗi khi chép ảnh mới để trình duyệt không dùng ảnh cũ. */ .pkp_site_name .is_img { position: relative !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; aspect-ratio: 1080 / 600; background: var(--djmp-nen-header) url("/public/journals/1/banner-mobile.jpg?v=6") center / cover no-repeat; } /* Ảnh banner PC vẫn giữ trong trang (chữ thay thế, vùng bấm về trang chủ) nhưng trong suốt, phủ đúng khung banner điện thoại */ .pkp_site_name .is_img img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; opacity: 0 !important; } /* 3d. Nút ☰ ở góc phải, căn ngang tâm logo trường trên banner. Tâm logo nằm ở 92/600 = 15,33% chiều cao banner; nút cao 40px -> top = 15,33% - 20px. Dùng % nên tự đúng ở mọi khổ (360, 390, 411, 768px...). */ .pkp_site_nav_toggle { position: absolute !important; top: calc(15.33% - 20px) !important; left: auto !important; right: 6px !important; width: 42px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; transform: none !important; /* gỡ dịch chuyển cũ đang đẩy nút lên 20px */ z-index: 1000 !important; background: rgba(30, 66, 130, 0.9) !important; /* = --djmp-nen-nut, hơi trong */ border: 1px solid rgba(255, 255, 255, 0.55) !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important; } .pkp_site_nav_toggle:focus-visible { outline: 2px solid var(--djmp-xanh-nhat) !important; outline-offset: 2px; } /* 3e. Menu khi mở: phủ lên banner, bắt đầu ngay dưới nút ☰ (đáy nút + 8px) */ #headerNavigationContainer .pkp_site_nav_menu { top: calc(15.33% + 28px) !important; background: rgba(15, 41, 91, 0.97) !important; /* = --djmp-nen-header */ max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } /* Mọi lớp bên trong bảng menu trong suốt để lộ màu nền bảng menu. Giữ nguyên huy hiệu số (.task_count) và nền khi một mục đang được chọn bằng bàn phím (:focus) để không mất khả năng truy cập. */ #headerNavigationContainer .pkp_site_nav_menu *:not(.task_count):not(:focus) { background-color: transparent !important; background-image: none !important; } } /* -------------------------------------------------------------------------- 4. CHÂN TRANG: nền trùng màu banner, chữ sáng dễ đọc (mọi màn hình) -------------------------------------------------------------------------- */ .pkp_structure_footer_wrapper { background-color: var(--djmp-nen-header) !important; border-top: 0 !important; color: var(--djmp-chu-sang) !important; } .pkp_structure_footer, .pkp_footer_content { background: transparent !important; } /* 4a. Chữ thường */ .pkp_footer_content, .pkp_footer_content p, .pkp_footer_content div, .pkp_footer_content span, .pkp_footer_content li, .pkp_footer_content small { color: var(--djmp-chu-sang) !important; } /* 4b. Tiêu đề và nhãn in đậm ("Cơ quan chủ quản:", "Email:"...) */ .pkp_footer_content h1, .pkp_footer_content h2, .pkp_footer_content h3, .pkp_footer_content h4, .pkp_footer_content h5, .pkp_footer_content h6, .pkp_footer_content strong, .pkp_footer_content b { color: #FFFFFF !important; } /* 4c. Dòng chữ in hoa giãn cách (tên tiếng Anh "DA NANG JOURNAL…") */ .pkp_footer_content [style*="letter-spacing"], .pkp_footer_content [style*="uppercase"] { color: var(--djmp-xanh-nhat) !important; } /* 4d. Liên kết (email, Chính sách quyền riêng tư, Bản quyền…) */ .pkp_footer_content a, .pkp_footer_content a * { color: var(--djmp-xanh-nhat) !important; } .pkp_footer_content a:hover, .pkp_footer_content a:focus { color: #FFFFFF !important; text-decoration: underline !important; } /* 4e. Đường kẻ phân cách: mảnh, sáng mờ trên nền tối */ .pkp_footer_content hr { border: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.18) !important; background: transparent !important; } .pkp_footer_content [style*="border"] { border-color: rgba(255, 255, 255, 0.18) !important; } /* 4f. Vạch nhấn ngắn dưới tên tạp chí (thẻ div rỗng có màu nền) */ .pkp_footer_content div:empty[style*="background"] { background-color: var(--djmp-xanh-nhat) !important; } /* ============================== HẾT KHỐI DJMP ============================== */