/* ========================================================= HÀ GIA MINH MAIN NAVIGATION FINAL Flatsome + icon-angle-down fix ========================================================= */ /* ========================================================= 1. THANH MENU ========================================================= */ #wide-nav, .header-bottom { background: #1f4b78 !important; } #wide-nav { min-height: 48px !important; border: 0 !important; box-shadow: 0 3px 10px rgba(20, 55, 90, .12); } #wide-nav > .flex-row, #wide-nav .flex-row { min-height: 48px !important; align-items: center !important; } /* ========================================================= 2. VÙNG CHỨA MENU ========================================================= */ #wide-nav .flex-left { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; } /* ========================================================= 3. UL MENU ========================================================= */ #wide-nav .nav { width: 100% !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; /* phân bố menu trên toàn thanh */ justify-content: space-between !important; margin: 0 !important; padding: 0 8px !important; gap: 0 !important; } /* ========================================================= 4. LI MENU ========================================================= */ #wide-nav .nav > li { position: relative !important; flex: 0 0 auto !important; display: block !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } /* ========================================================= 5. LINK MENU ========================================================= */ #wide-nav .nav > li > a.nav-top-link { position: relative !important; min-height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; margin: 0 !important; padding: 0 9px !important; color: rgba(255,255,255,.94) !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; white-space: nowrap !important; background: transparent !important; border: 0 !important; transition: background-color .2s ease, color .2s ease !important; } /* ========================================================= 6. FIX RIÊNG icon-angle-down ========================================================= */ /* * Không để Flatsome tự đặt kích thước/margin */ #wide-nav .nav > li > a.nav-top-link .icon-angle-down { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 10px !important; height: 10px !important; margin: 0 0 0 5px !important; padding: 0 !important; top: 0 !important; font-size: 8px !important; line-height: 1 !important; opacity: .65 !important; transform: none !important; vertical-align: middle !important; color: inherit !important; } /* Glyph ::before của Flatsome */ #wide-nav .nav > li > a.nav-top-link .icon-angle-down::before { display: block !important; position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; font-size: 8px !important; line-height: 1 !important; transform: none !important; color: inherit !important; } /* ========================================================= 7. HOVER MŨI TÊN ========================================================= */ #wide-nav .nav > li:hover > a.nav-top-link .icon-angle-down { opacity: 1 !important; } /* ========================================================= 8. GẠCH CAM HOVER ========================================================= */ #wide-nav .nav > li > a.nav-top-link::before { content: ""; position: absolute; left: 9px; right: 9px; bottom: 0; height: 3px; background: #ee8022; transform: scaleX(0); transform-origin: center; transition: transform .2s ease; } #wide-nav .nav > li:hover > a.nav-top-link::before { transform: scaleX(1); } /* ========================================================= 9. HOVER MENU ========================================================= */ #wide-nav .nav > li:hover > a.nav-top-link { color: #fff !important; background: rgba(255,255,255,.07) !important; } /* ========================================================= 10. ACTIVE ========================================================= */ #wide-nav .nav > li.active > a.nav-top-link, #wide-nav .nav > li.current-menu-item > a.nav-top-link, #wide-nav .nav > li.current-menu-parent > a.nav-top-link, #wide-nav .nav > li.current-menu-ancestor > a.nav-top-link { color: #fff !important; background: rgba(255,255,255,.06) !important; } #wide-nav .nav > li.active > a.nav-top-link::before, #wide-nav .nav > li.current-menu-item > a.nav-top-link::before, #wide-nav .nav > li.current-menu-parent > a.nav-top-link::before, #wide-nav .nav > li.current-menu-ancestor > a.nav-top-link::before { transform: scaleX(1); } /* ========================================================= 11. ĐƯỜNG PHÂN CÁCH ========================================================= */ #wide-nav .nav > li + li::after { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 15px; background: rgba(255,255,255,.14); transform: translateY(-50%); pointer-events: none; } /* ========================================================= 12. DROPDOWN ========================================================= */ #wide-nav .nav-dropdown { min-width: 220px !important; padding: 6px !important; background: #fff !important; border: 0 !important; border-top: 3px solid #ee8022 !important; border-radius: 0 0 7px 7px !important; box-shadow: 0 12px 28px rgba(20,55,90,.18) !important; } /* ========================================================= 13. BỎ TAM GIÁC TRẮNG MẶC ĐỊNH FLATSOME ========================================================= */ #wide-nav .nav-dropdown-has-arrow li.has-dropdown::before, #wide-nav .nav-dropdown-has-arrow li.has-dropdown::after, #wide-nav li.has-dropdown::before, #wide-nav li.has-dropdown::after { border: 0 !important; } /* * Nhưng LI vẫn phải giữ position */ #wide-nav .nav > li.has-dropdown { position: relative !important; } /* ========================================================= 14. MENU CON ========================================================= */ #wide-nav .nav-dropdown > li { display: block !important; width: 100% !important; margin: 0 !important; } #wide-nav .nav-dropdown > li > a { display: block !important; width: 100% !important; padding: 10px 12px !important; color: #333 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.4 !important; text-align: left !important; text-transform: none !important; white-space: normal !important; background: transparent !important; border-radius: 4px !important; transition: background-color .18s ease, color .18s ease, padding-left .18s ease !important; } #wide-nav .nav-dropdown > li > a:hover { color: #1f4b78 !important; background: #f3f7fa !important; padding-left: 16px !important; } /* ========================================================= 15. DESKTOP HẸP ========================================================= */ @media (min-width: 850px) and (max-width: 1100px) { #wide-nav .nav { padding-left: 4px !important; padding-right: 4px !important; } #wide-nav .nav > li > a.nav-top-link { padding-left: 6px !important; padding-right: 6px !important; font-size: 11px !important; } #wide-nav .nav > li > a.nav-top-link .icon-angle-down { width: 8px !important; height: 8px !important; margin-left: 3px !important; font-size: 7px !important; } } /* ========================================================= 16. MOBILE Không can thiệp menu mobile Flatsome ========================================================= */ @media (max-width: 849px) { #wide-nav { box-shadow: none !important; } }