/* ============================================================ VANDONVILLAS.VN – BỘ CSS SỬA LỖI HOÀN CHỈNH Dán toàn bộ vào: WordPress → Appearance → Customize → Additional CSS ============================================================ */ /* ── 1. ẨN CÁC PHẦN TỬ BỊ LỖI CỦA ELEMENTOR HEADER CŨ ── */ .elementor-location-header .elementor-widget-image-carousel, .elementor-location-header .elementor-widget-image { display: none !important; } /* ── 2. RESET TOÀN BỘ HEADER/NAV ── */ #masthead, .site-header, header.site-header, .elementor-location-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; background: #0B2D48 !important; height: 62px !important; min-height: 62px !important; max-height: 62px !important; box-shadow: 0 2px 16px rgba(0,0,0,0.28) !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; } /* Đẩy nội dung body xuống để không bị che bởi nav cố định */ body { padding-top: 62px !important; } .elementor-location-header + * { margin-top: 0 !important; } /* ── 3. CONTAINER BÊN TRONG HEADER ── */ #masthead .site-branding, .elementor-location-header > .elementor-container, .elementor-location-header .e-con, .elementor-location-header .elementor-container { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; height: 62px !important; max-width: 100% !important; padding: 0 28px !important; margin: 0 !important; width: 100% !important; } /* ── 4. LOGO ── */ .site-logo a, .custom-logo-link, .elementor-location-header .elementor-widget-site-logo a, header .site-title a, .nav-logo-link { display: flex !important; align-items: center !important; gap: 10px !important; text-decoration: none !important; flex-shrink: 0 !important; } .site-logo img, .custom-logo, .elementor-location-header .elementor-widget-site-logo img { height: 40px !important; width: auto !important; max-width: 160px !important; object-fit: contain !important; } /* ── 5. MENU ĐIỀU HƯỚNG – SỬA LỖI CHÍNH ── */ /* Ẩn tất cả menu toggle / hamburger mặc định trên desktop */ .menu-toggle, .nav-toggle, button.menu-toggle { display: none !important; } /* Container nav */ #site-navigation, .main-navigation, .elementor-nav-menu, nav.elementor-nav-menu--main, .elementor-location-header nav, .elementor-widget-nav-menu { display: flex !important; align-items: center !important; height: 62px !important; flex: 1 !important; justify-content: center !important; } /* Menu list – BẮT BUỘC HIỂN THỊ NGANG */ #site-navigation ul.menu, #site-navigation ul.nav-menu, .main-navigation ul.menu, .main-navigation ul.nav-menu, .elementor-nav-menu--layout-horizontal > ul, nav.elementor-nav-menu--main ul.menu, .elementor-nav-menu ul.menu, ul.elementor-nav-menu, .e-n-menu-main > ul { display: flex !important; flex-direction: row !important; align-items: center !important; list-style: none !important; margin: 0 !important; padding: 0 !important; gap: 2px !important; flex-wrap: nowrap !important; height: 62px !important; } /* Các item menu */ #site-navigation ul li, .main-navigation ul li, .elementor-nav-menu ul li, ul.elementor-nav-menu li, nav.elementor-nav-menu--main ul li { display: flex !important; align-items: center !important; position: relative !important; margin: 0 !important; padding: 0 !important; height: 62px !important; float: none !important; } /* Link menu */ #site-navigation ul li a, .main-navigation ul li a, .elementor-nav-menu ul li a, ul.elementor-nav-menu li a, nav.elementor-nav-menu--main ul li a, .elementor-item { display: flex !important; align-items: center !important; gap: 5px !important; color: rgba(255,255,255,0.72) !important; text-decoration: none !important; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0.03em !important; padding: 6px 11px !important; border-radius: 6px !important; white-space: nowrap !important; transition: color 0.18s, background 0.18s !important; height: auto !important; line-height: 1 !important; background: transparent !important; } #site-navigation ul li a:hover, .main-navigation ul li a:hover, .elementor-nav-menu ul li a:hover, .elementor-item:hover, .elementor-item-active { color: #fff !important; background: rgba(255,255,255,0.09) !important; } /* Ẩn dropdown submenu không cần thiết */ #site-navigation ul ul, .main-navigation ul ul, .elementor-nav-menu ul ul { position: absolute !important; top: 100% !important; left: 0 !important; background: #0B2D48 !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important; min-width: 200px !important; flex-direction: column !important; display: none !important; padding: 8px 0 !important; z-index: 10000 !important; } #site-navigation ul li:hover > ul, .main-navigation ul li:hover > ul { display: flex !important; } #site-navigation ul ul li, .main-navigation ul ul li { height: auto !important; width: 100% !important; } #site-navigation ul ul li a, .main-navigation ul ul li a { padding: 10px 16px !important; width: 100% !important; border-radius: 0 !important; } /* ── 6. NÚT ĐẶT PHÒNG TRÊN HEADER ── */ .header-book-btn, .elementor-location-header .elementor-widget-button a, a.header-cta-btn { background: #C9A84C !important; color: #fff !important; border: none !important; padding: 9px 20px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; transition: background 0.18s !important; flex-shrink: 0 !important; } .elementor-location-header .elementor-widget-button a:hover, a.header-cta-btn:hover { background: #E8C97A !important; color: #0B2D48 !important; } /* ── 7. HOTLINE TRONG HEADER ── */ .elementor-location-header .elementor-widget-text-editor a[href^="tel"], .header-hotline a, a.nav-phone { display: flex !important; align-items: center !important; gap: 6px !important; color: #fff !important; text-decoration: none !important; font-size: 13px !important; font-weight: 600 !important; border: 1px solid rgba(255,255,255,0.22) !important; padding: 6px 13px !important; border-radius: 6px !important; white-space: nowrap !important; flex-shrink: 0 !important; } /* ── 8. MOBILE MENU (< 960px) ── */ @media (max-width: 960px) { #site-navigation ul.menu, .main-navigation ul.menu, .elementor-nav-menu ul.menu, ul.elementor-nav-menu { display: none !important; } .menu-toggle, nav.elementor-nav-menu--main .elementor-nav-menu--toggle, .e-n-menu-main__toggle { display: flex !important; align-items: center !important; justify-content: center !important; background: none !important; border: 1px solid rgba(255,255,255,0.25) !important; border-radius: 6px !important; color: #fff !important; font-size: 20px !important; width: 38px !important; height: 38px !important; cursor: pointer !important; padding: 0 !important; } /* Khi menu mở trên mobile */ #site-navigation.toggled ul.menu, .main-navigation.toggled ul.menu, #site-navigation ul.menu.active { display: flex !important; flex-direction: column !important; position: fixed !important; top: 62px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(10,30,40,0.97) !important; padding: 20px 24px !important; gap: 4px !important; overflow-y: auto !important; height: auto !important; z-index: 9998 !important; backdrop-filter: blur(14px) !important; } #site-navigation.toggled ul li, .main-navigation.toggled ul li { height: auto !important; width: 100% !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; } #site-navigation.toggled ul li a, .main-navigation.toggled ul li a { padding: 14px 4px !important; font-size: 15px !important; width: 100% !important; border-radius: 0 !important; } body { padding-top: 62px !important; } } /* ── 9. SỐ ĐIỆN THOẠI – CẬP NHẬT TOÀN TRANG ── */ /* Ẩn số điện thoại cũ lỗi thời */ a[href="tel:0879388989"], a[href="tel:0879.388.989"] { display: none !important; } /* Style đẹp cho tất cả link điện thoại */ a[href^="tel:"] { color: #C9A84C !important; font-weight: 600 !important; text-decoration: none !important; transition: color 0.18s !important; } a[href^="tel:"]:hover { color: #E8C97A !important; } /* Số điện thoại trong footer */ .site-footer a[href^="tel:"], footer a[href^="tel:"], .elementor-location-footer a[href^="tel:"] { color: #E8C97A !important; font-size: 14px !important; font-weight: 600 !important; } /* ── 10. FOOTER – SỬA BỐ CỤC ── */ .site-footer, .elementor-location-footer { background: #0A1E28 !important; color: rgba(255,255,255,0.55) !important; padding: 40px 5% 20px !important; } .elementor-location-footer .elementor-widget-nav-menu ul { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 8px 20px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } .elementor-location-footer .elementor-widget-nav-menu ul li a { color: rgba(255,255,255,0.55) !important; font-size: 13px !important; text-decoration: none !important; transition: color 0.18s !important; } .elementor-location-footer .elementor-widget-nav-menu ul li a:hover { color: #E8C97A !important; } /* ── 11. THANH MENU MOBILE BOTTOM (nếu có) ── */ .mobile-bottom-bar, .elementor-section.mobile-bar { display: flex !important; justify-content: space-around !important; align-items: center !important; background: #0B2D48 !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 9998 !important; padding: 8px 0 !important; box-shadow: 0 -2px 12px rgba(0,0,0,0.22) !important; } /* ── 12. GENERAL FIXES ── */ /* Xóa khoảng trắng thừa phía trên gây ra bởi Elementor */ .elementor-section:first-child, .e-con:first-child { margin-top: 0 !important; } /* Fix overflow ngang */ html, body { overflow-x: hidden !important; } /* Tăng tốc render */ .elementor-location-header { will-change: transform !important; transform: translateZ(0) !important; } /* ── 13. WIDGET DANH SÁCH VILLAS – SỬA LAYOUT GRID ── */ .villalist-container, [class*="villa-list"], .elementor-posts-container { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 20px !important; padding: 20px 0 !important; } .villa-item, .elementor-post { background: #fff !important; border-radius: 8px !important; overflow: hidden !important; box-shadow: 0 4px 20px rgba(10,30,40,0.08) !important; transition: transform 0.3s, box-shadow 0.3s !important; } .villa-item:hover, .elementor-post:hover { transform: translateY(-5px) !important; box-shadow: 0 12px 32px rgba(10,30,40,0.14) !important; } /* ── 14. SLIDESHOW HERO – SỬA HIỂN THỊ ── */ .swiper-slide figure, .swiper-container figure { margin: 0 !important; line-height: 0 !important; } .swiper-slide img, .hero-slider img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* ── 15. RESPONSIVE CHUNG ── */ @media (max-width: 768px) { .elementor-col-50, .elementor-col-33, .elementor-col-25 { width: 100% !important; } h1, h2 { font-size: clamp(24px, 6vw, 40px) !important; } .elementor-section > .elementor-container { padding-left: 16px !important; padding-right: 16px !important; } } @media (max-width: 480px) { body { font-size: 14px !important; } .elementor-location-header { height: 56px !important; min-height: 56px !important; max-height: 56px !important; } body { padding-top: 56px !important; } }