/* Theme Name: Greenbay Description: This is a child theme for Flatsome Theme Author: UX Themes Template: flatsome Version: 3.0 */ /* === Thiết lập chung cho menu === */ #t3tcode-menu.t3tcode-menu { list-style: none; /* Xóa dấu đầu dòng mặc định */ margin: 0; /* Xóa lề mặc định */ padding: 0; /* Xóa đệm mặc định */ display: flex; /* Sử dụng flexbox để xếp menu cấp 1 theo hàng ngang */ font-family: 'Arial', sans-serif; /* Font chữ hiện đại */ background-color: #ffffff; /* Màu nền trắng */ border-bottom: 1px solid #e5e5e5; /* Đường viền dưới nhẹ */ } /* === Thiết lập cho các mục menu cấp 1 === */ #t3tcode-menu.t3tcode-menu > li.menu-item { position: relative; /* Đặt vị trí tương đối để chứa menu con */ padding: 0 15px; /* Khoảng cách trái phải */ } /* === Thiết lập cho liên kết trong mục menu cấp 1 === */ #t3tcode-menu.t3tcode-menu > li.menu-item > a { display: block; /* Hiển thị dạng khối */ padding: 15px 10px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ tối */ text-decoration: none; /* Xóa gạch chân */ font-size: 16px; /* Kích thước chữ */ font-weight: 500; /* Độ đậm chữ */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu cấp 1 === */ #t3tcode-menu.t3tcode-menu > li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập chung cho menu con (tất cả các cấp) === */ #t3tcode-menu.t3tcode-menu .sub-menu { display: none; /* Ẩn menu con mặc định */ position: absolute; /* Đặt vị trí tuyệt đối */ top: 100%; /* Hiển thị ngay dưới mục cha */ left: 0; /* Căn trái với mục cha */ min-width: 220px; /* Chiều rộng tối thiểu */ background-color: #ffffff; /* Màu nền trắng */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */ border: 1px solid #e5e5e5; /* Viền nhẹ */ z-index: 1000; /* Đảm bảo menu con nằm trên các phần tử khác */ } /* === Hiển thị menu con khi hover vào mục cha === */ #t3tcode-menu.t3tcode-menu li.menu-item-has-children:hover > .sub-menu { display: block; /* Hiển thị menu con khi hover */ } /* === Thiết lập cho các mục trong menu con (tất cả các cấp) === */ #t3tcode-menu.t3tcode-menu .sub-menu li.menu-item { position: relative; /* Đặt vị trí tương đối để hỗ trợ menu con cấp sâu hơn */ list-style-type: none; } /* === Thiết lập cho liên kết trong menu con === */ #t3tcode-menu.t3tcode-menu .sub-menu li.menu-item a { display: block; /* Hiển thị dạng khối */ padding: 10px 15px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ */ font-size: 14px; /* Chữ nhỏ hơn cấp 1 */ text-decoration: none; /* Xóa gạch chân */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu con === */ #t3tcode-menu.t3tcode-menu .sub-menu li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập cho menu con cấp 3, 4, 5 === */ #t3tcode-menu.t3tcode-menu .sub-menu .sub-menu { top: 0; /* Hiển thị menu con cấp sâu hơn ở bên phải */ left: 100%; /* Căn trái với cạnh phải của menu cha */ } /* === Thêm padding trái tăng dần cho các cấp sâu hơn để dễ phân biệt === */ #t3tcode-menu.t3tcode-menu .sub-menu .sub-menu li.menu-item a { padding-left: 20px; /* Cấp 3 */ } #t3tcode-menu.t3tcode-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 4 */ } #t3tcode-menu.t3tcode-menu .sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 30px; /* Cấp 5 */ } /* === Thêm icon mũi tên cho mục có menu con (giống Flatsome) === */ #t3tcode-menu.t3tcode-menu li.menu-item-has-children > a:after { content: '\25B8'; /* Icon mũi tên phải (Unicode) */ font-size: 12px; /* Kích thước icon */ margin-left: 5px; /* Khoảng cách icon với chữ */ display: inline-block; /* Hiển thị inline với chữ */ transition: transform 0.3s ease; /* Hiệu ứng xoay icon */ } /* === Xoay icon khi hover để chỉ menu con === */ #t3tcode-menu.t3tcode-menu li.menu-item-has-children:hover > a:after { transform: rotate(90deg); /* Xoay icon 90 độ khi hover */ } /* === Responsive: Điều chỉnh menu cho màn hình nhỏ (dưới 768px) === */ @media (max-width: 768px) { #t3tcode-menu.t3tcode-menu { flex-direction: column; /* Chuyển menu thành cột dọc */ background-color: #f9f9f9; /* Nền nhạt hơn cho mobile */ } #t3tcode-menu.t3tcode-menu > li.menu-item { padding: 0; /* Xóa padding trái phải */ } #t3tcode-menu.t3tcode-menu > li.menu-item > a { padding: 12px 15px; /* Giảm padding cho mobile */ border-bottom: 1px solid #e5e5e5; /* Viền dưới cho từng mục */ } /* === Menu con trên mobile === */ #t3tcode-menu.t3tcode-menu .sub-menu { position: static; /* Chuyển về vị trí tĩnh */ box-shadow: none; /* Xóa đổ bóng */ border: none; /* Xóa viền */ background-color: #f1f1f1; /* Nền nhạt hơn */ min-width: 100%; /* Chiếm toàn bộ chiều rộng */ } #t3tcode-menu.t3tcode-menu li.menu-item-has-children:hover > .sub-menu { display: none; /* Ẩn menu con khi hover trên mobile */ } /* === Hiển thị menu con khi có class active (cần JS để toggle) === */ #t3tcode-menu.t3tcode-menu li.menu-item-has-children.active > .sub-menu { display: block; /* Hiển thị menu con khi active */ } /* === Điều chỉnh padding cho các cấp menu con trên mobile === */ #t3tcode-menu.t3tcode-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 2 */ } #t3tcode-menu.t3tcode-menu .sub-menu .sub-menu li.menu-item a { padding-left: 35px; /* Cấp 3 */ } #t3tcode-menu.t3tcode-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 45px; /* Cấp 4 */ } #t3tcode-menu.t3tcode-menu .sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 55px; /* Cấp 5 */ } /* === Xóa icon mũi tên trên mobile để giao diện gọn hơn === */ #t3tcode-menu.t3tcode-menu li.menu-item-has-children > a:after { content: none; /* Xóa icon trên mobile */ } } /* === Thiết lập chung cho menu WonderCity === */ #WonderCity-menu { list-style: none; /* Xóa dấu đầu dòng mặc định */ margin: 0; /* Xóa lề mặc định */ padding: 0; /* Xóa đệm mặc định */ display: flex; /* Sử dụng flexbox để xếp menu cấp 1 theo hàng ngang */ font-family: 'Arial', sans-serif; /* Font chữ hiện đại */ background-color: #ffffff; /* Màu nền trắng */ border-bottom: 1px solid #e5e5e5; /* Đường viền dưới nhẹ */ } /* === Thiết lập cho các mục menu cấp 1 === */ #WonderCity-menu > li.menu-item { position: relative; /* Đặt vị trí tương đối để chứa menu con */ padding: 0 15px; /* Khoảng cách trái phải */ } /* === Thiết lập cho liên kết trong mục menu cấp 1 === */ #WonderCity-menu > li.menu-item > a { display: block; /* Hiển thị dạng khối */ padding: 15px 10px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ tối */ text-decoration: none; /* Xóa gạch chân */ font-size: 16px; /* Kích thước chữ */ font-weight: 500; /* Độ đậm chữ */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu cấp 1 === */ #WonderCity-menu > li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập chung cho menu con (tất cả các cấp) === */ #WonderCity-menu .sub-menu { display: none; /* Ẩn menu con mặc định */ position: absolute; /* Đặt vị trí tuyệt đối */ top: 100%; /* Hiển thị ngay dưới mục cha */ left: 0; /* Căn trái với mục cha */ min-width: 220px; /* Chiều rộng tối thiểu */ background-color: #ffffff; /* Màu nền trắng */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */ border: 1px solid #e5e5e5; /* Viền nhẹ */ z-index: 1000; /* Đảm bảo menu con nằm trên các phần tử khác */ } /* === Hiển thị menu con khi hover vào mục cha === */ #WonderCity-menu li.menu-item-has-children:hover > .sub-menu { display: block; /* Hiển thị menu con khi hover */ } /* === Thiết lập cho các mục trong menu con (tất cả các cấp) === */ #WonderCity-menu .sub-menu li.menu-item { position: relative; /* Đặt vị trí tương đối để hỗ trợ menu con cấp sâu hơn */ list-style-type: none; } /* === Thiết lập cho liên kết trong menu con === */ #WonderCity-menu .sub-menu li.menu-item a { display: block; /* Hiển thị dạng khối */ padding: 10px 15px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ */ font-size: 14px; /* Chữ nhỏ hơn cấp 1 */ text-decoration: none; /* Xóa gạch chân */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu con === */ #WonderCity-menu .sub-menu li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập cho menu con cấp 3, 4, 5 === */ #WonderCity-menu .sub-menu .sub-menu { top: 0; /* Hiển thị menu con cấp sâu hơn ở bên phải */ left: 100%; /* Căn trái với cạnh phải của menu cha */ } /* === Thêm padding trái tăng dần cho các cấp sâu hơn để dễ phân biệt === */ #WonderCity-menu .sub-menu .sub-menu li.menu-item a { padding-left: 20px; /* Cấp 3 */ } #WonderCity-menu.sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 4 */ } #WonderCity-menu.sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 30px; /* Cấp 5 */ } /* === Thêm icon mũi tên cho mục có menu con (giống Flatsome) === */ #WonderCity-menu li.menu-item-has-children > a:after { content: '\25B8'; /* Icon mũi tên phải (Unicode) */ font-size: 12px; /* Kích thước icon */ margin-left: 5px; /* Khoảng cách icon với chữ */ display: inline-block; /* Hiển thị inline với chữ */ transition: transform 0.3s ease; /* Hiệu ứng xoay icon */ } /* === Xoay icon khi hover để chỉ menu con === */ #WonderCity-menu li.menu-item-has-children:hover > a:after { transform: rotate(90deg); /* Xoay icon 90 độ khi hover */ } /* === Responsive: Điều chỉnh menu cho màn hình nhỏ (dưới 768px) === */ @media (max-width: 768px) { #WonderCity-menu{ flex-direction: column; /* Chuyển menu thành cột dọc */ background-color: #f9f9f9; /* Nền nhạt hơn cho mobile */ } #WonderCity-menu > li.menu-item { padding: 0; /* Xóa padding trái phải */ } #WonderCity-menu.t3tcode-menu > li.menu-item > a { padding: 12px 15px; /* Giảm padding cho mobile */ border-bottom: 1px solid #e5e5e5; /* Viền dưới cho từng mục */ } /* === Menu con trên mobile === */ #WonderCity-menu .sub-menu { position: static; /* Chuyển về vị trí tĩnh */ box-shadow: none; /* Xóa đổ bóng */ border: none; /* Xóa viền */ background-color: #f1f1f1; /* Nền nhạt hơn */ min-width: 100%; /* Chiếm toàn bộ chiều rộng */ } #WonderCity-menu li.menu-item-has-children:hover > .sub-menu { display: none; /* Ẩn menu con khi hover trên mobile */ } /* === Hiển thị menu con khi có class active (cần JS để toggle) === */ #WonderCity-menu li.menu-item-has-children.active > .sub-menu { display: block; /* Hiển thị menu con khi active */ } /* === Điều chỉnh padding cho các cấp menu con trên mobile === */ #WonderCity-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 2 */ } #WonderCity-menu .sub-menu .sub-menu li.menu-item a { padding-left: 35px; /* Cấp 3 */ } #WonderCity-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 45px; /* Cấp 4 */ } #WonderCity-menu .sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 55px; /* Cấp 5 */ } /* === Xóa icon mũi tên trên mobile để giao diện gọn hơn === */ #WonderCity-menu li.menu-item-has-children > a:after { content: none; /* Xóa icon trên mobile */ } } /* === Thiết lập chung cho menu GLOBALGATE === */ #GLOBALGATE-menu { list-style: none; /* Xóa dấu đầu dòng mặc định */ margin: 0; /* Xóa lề mặc định */ padding: 0; /* Xóa đệm mặc định */ display: flex; /* Sử dụng flexbox để xếp menu cấp 1 theo hàng ngang */ font-family: 'Arial', sans-serif; /* Font chữ hiện đại */ background-color: #ffffff; /* Màu nền trắng */ border-bottom: 1px solid #e5e5e5; /* Đường viền dưới nhẹ */ } /* === Thiết lập cho các mục menu cấp 1 === */ #GLOBALGATE-menu > li.menu-item { position: relative; /* Đặt vị trí tương đối để chứa menu con */ padding: 0 15px; /* Khoảng cách trái phải */ } /* === Thiết lập cho liên kết trong mục menu cấp 1 === */ #GLOBALGATE-menu > li.menu-item > a { display: block; /* Hiển thị dạng khối */ padding: 15px 10px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ tối */ text-decoration: none; /* Xóa gạch chân */ font-size: 16px; /* Kích thước chữ */ font-weight: 500; /* Độ đậm chữ */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu cấp 1 === */ #GLOBALGATE-menu > li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập chung cho menu con (tất cả các cấp) === */ #GLOBALGATE-menu .sub-menu { display: none; /* Ẩn menu con mặc định */ position: absolute; /* Đặt vị trí tuyệt đối */ top: 100%; /* Hiển thị ngay dưới mục cha */ left: 0; /* Căn trái với mục cha */ min-width: 220px; /* Chiều rộng tối thiểu */ background-color: #ffffff; /* Màu nền trắng */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */ border: 1px solid #e5e5e5; /* Viền nhẹ */ z-index: 1000; /* Đảm bảo menu con nằm trên các phần tử khác */ } /* === Hiển thị menu con khi hover vào mục cha === */ #GLOBALGATE-menu li.menu-item-has-children:hover > .sub-menu { display: block; /* Hiển thị menu con khi hover */ } /* === Thiết lập cho các mục trong menu con (tất cả các cấp) === */ #GLOBALGATE-menu .sub-menu li.menu-item { position: relative; /* Đặt vị trí tương đối để hỗ trợ menu con cấp sâu hơn */ list-style-type: none; } /* === Thiết lập cho liên kết trong menu con === */ #GLOBALGATE-menu .sub-menu li.menu-item a { display: block; /* Hiển thị dạng khối */ padding: 10px 15px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ */ font-size: 14px; /* Chữ nhỏ hơn cấp 1 */ text-decoration: none; /* Xóa gạch chân */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu con === */ #GLOBALGATE-menu .sub-menu li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập cho menu con cấp 3, 4, 5 === */ #GLOBALGATE-menu .sub-menu .sub-menu { top: 0; /* Hiển thị menu con cấp sâu hơn ở bên phải */ left: 100%; /* Căn trái với cạnh phải của menu cha */ } /* === Thêm padding trái tăng dần cho các cấp sâu hơn để dễ phân biệt === */ #GLOBALGATE-menu .sub-menu .sub-menu li.menu-item a { padding-left: 20px; /* Cấp 3 */ } #GLOBALGATE-menu.sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 4 */ } #GLOBALGATE-menu.sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 30px; /* Cấp 5 */ } /* === Thêm icon mũi tên cho mục có menu con (giống Flatsome) === */ #GLOBALGATE-menu li.menu-item-has-children > a:after { content: '\25B8'; /* Icon mũi tên phải (Unicode) */ font-size: 12px; /* Kích thước icon */ margin-left: 5px; /* Khoảng cách icon với chữ */ display: inline-block; /* Hiển thị inline với chữ */ transition: transform 0.3s ease; /* Hiệu ứng xoay icon */ } /* === Xoay icon khi hover để chỉ menu con === */ #GLOBALGATE-menu li.menu-item-has-children:hover > a:after { transform: rotate(90deg); /* Xoay icon 90 độ khi hover */ } /* === Responsive: Điều chỉnh menu cho màn hình nhỏ (dưới 768px) === */ @media (max-width: 768px) { #GLOBALGATE-menu{ flex-direction: column; /* Chuyển menu thành cột dọc */ background-color: #f9f9f9; /* Nền nhạt hơn cho mobile */ } #GLOBALGATE-menu > li.menu-item { padding: 0; /* Xóa padding trái phải */ } #GLOBALGATE-menu.t3tcode-menu > li.menu-item > a { padding: 12px 15px; /* Giảm padding cho mobile */ border-bottom: 1px solid #e5e5e5; /* Viền dưới cho từng mục */ } /* === Menu con trên mobile === */ #GLOBALGATE-menu .sub-menu { position: static; /* Chuyển về vị trí tĩnh */ box-shadow: none; /* Xóa đổ bóng */ border: none; /* Xóa viền */ background-color: #f1f1f1; /* Nền nhạt hơn */ min-width: 100%; /* Chiếm toàn bộ chiều rộng */ } #GLOBALGATE-menu li.menu-item-has-children:hover > .sub-menu { display: none; /* Ẩn menu con khi hover trên mobile */ } /* === Hiển thị menu con khi có class active (cần JS để toggle) === */ #GLOBALGATE-menu li.menu-item-has-children.active > .sub-menu { display: block; /* Hiển thị menu con khi active */ } /* === Điều chỉnh padding cho các cấp menu con trên mobile === */ #GLOBALGATE-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 2 */ } #GLOBALGATE-menu .sub-menu .sub-menu li.menu-item a { padding-left: 35px; /* Cấp 3 */ } #GLOBALGATE-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 45px; /* Cấp 4 */ } #GLOBALGATE-menu .sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 55px; /* Cấp 5 */ } /* === Xóa icon mũi tên trên mobile để giao diện gọn hơn === */ #GLOBALGATE-menu li.menu-item-has-children > a:after { content: none; /* Xóa icon trên mobile */ } } /* === Thiết lập chung cho menu royalisland === */ #royalisland-menu { list-style: none; /* Xóa dấu đầu dòng mặc định */ margin: 0; /* Xóa lề mặc định */ padding: 0; /* Xóa đệm mặc định */ display: flex; /* Sử dụng flexbox để xếp menu cấp 1 theo hàng ngang */ font-family: 'Arial', sans-serif; /* Font chữ hiện đại */ background-color: #ffffff; /* Màu nền trắng */ border-bottom: 1px solid #e5e5e5; /* Đường viền dưới nhẹ */ } /* === Thiết lập cho các mục menu cấp 1 === */ #royalisland-menu > li.menu-item { position: relative; /* Đặt vị trí tương đối để chứa menu con */ padding: 0 15px; /* Khoảng cách trái phải */ } /* === Thiết lập cho liên kết trong mục menu cấp 1 === */ #royalisland-menu > li.menu-item > a { display: block; /* Hiển thị dạng khối */ padding: 15px 10px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ tối */ text-decoration: none; /* Xóa gạch chân */ font-size: 16px; /* Kích thước chữ */ font-weight: 500; /* Độ đậm chữ */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu cấp 1 === */ #royalisland-menu > li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập chung cho menu con (tất cả các cấp) === */ #royalisland-menu .sub-menu { display: none; /* Ẩn menu con mặc định */ position: absolute; /* Đặt vị trí tuyệt đối */ top: 100%; /* Hiển thị ngay dưới mục cha */ left: 0; /* Căn trái với mục cha */ min-width: 220px; /* Chiều rộng tối thiểu */ background-color: #ffffff; /* Màu nền trắng */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */ border: 1px solid #e5e5e5; /* Viền nhẹ */ z-index: 1000; /* Đảm bảo menu con nằm trên các phần tử khác */ } /* === Hiển thị menu con khi hover vào mục cha === */ #royalisland-menu li.menu-item-has-children:hover > .sub-menu { display: block; /* Hiển thị menu con khi hover */ } /* === Thiết lập cho các mục trong menu con (tất cả các cấp) === */ #royalisland-menu .sub-menu li.menu-item { position: relative; /* Đặt vị trí tương đối để hỗ trợ menu con cấp sâu hơn */ list-style-type: none; } /* === Thiết lập cho liên kết trong menu con === */ #royalisland-menu .sub-menu li.menu-item a { display: block; /* Hiển thị dạng khối */ padding: 10px 15px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ */ font-size: 14px; /* Chữ nhỏ hơn cấp 1 */ text-decoration: none; /* Xóa gạch chân */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu con === */ #royalisland-menu .sub-menu li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập cho menu con cấp 3, 4, 5 === */ #royalisland-menu .sub-menu .sub-menu { top: 0; /* Hiển thị menu con cấp sâu hơn ở bên phải */ left: 100%; /* Căn trái với cạnh phải của menu cha */ } /* === Thêm padding trái tăng dần cho các cấp sâu hơn để dễ phân biệt === */ #royalisland-menu .sub-menu .sub-menu li.menu-item a { padding-left: 20px; /* Cấp 3 */ } #royalisland-menu.sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 4 */ } #royalisland-menu.sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 30px; /* Cấp 5 */ } /* === Thêm icon mũi tên cho mục có menu con (giống Flatsome) === */ #royalisland-menu li.menu-item-has-children > a:after { content: '\25B8'; /* Icon mũi tên phải (Unicode) */ font-size: 12px; /* Kích thước icon */ margin-left: 5px; /* Khoảng cách icon với chữ */ display: inline-block; /* Hiển thị inline với chữ */ transition: transform 0.3s ease; /* Hiệu ứng xoay icon */ } /* === Xoay icon khi hover để chỉ menu con === */ #royalisland-menu li.menu-item-has-children:hover > a:after { transform: rotate(90deg); /* Xoay icon 90 độ khi hover */ } /* === Responsive: Điều chỉnh menu cho màn hình nhỏ (dưới 768px) === */ @media (max-width: 768px) { #royalisland-menu{ flex-direction: column; /* Chuyển menu thành cột dọc */ background-color: #f9f9f9; /* Nền nhạt hơn cho mobile */ } #royalisland-menu > li.menu-item { padding: 0; /* Xóa padding trái phải */ } #royalisland-menu.t3tcode-menu > li.menu-item > a { padding: 12px 15px; /* Giảm padding cho mobile */ border-bottom: 1px solid #e5e5e5; /* Viền dưới cho từng mục */ } /* === Menu con trên mobile === */ #royalisland-menu .sub-menu { position: static; /* Chuyển về vị trí tĩnh */ box-shadow: none; /* Xóa đổ bóng */ border: none; /* Xóa viền */ background-color: #f1f1f1; /* Nền nhạt hơn */ min-width: 100%; /* Chiếm toàn bộ chiều rộng */ } #royalisland-menu li.menu-item-has-children:hover > .sub-menu { display: none; /* Ẩn menu con khi hover trên mobile */ } /* === Hiển thị menu con khi có class active (cần JS để toggle) === */ #royalisland-menu li.menu-item-has-children.active > .sub-menu { display: block; /* Hiển thị menu con khi active */ } /* === Điều chỉnh padding cho các cấp menu con trên mobile === */ #royalisland-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 2 */ } #royalisland-menu .sub-menu .sub-menu li.menu-item a { padding-left: 35px; /* Cấp 3 */ } #royalisland-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 45px; /* Cấp 4 */ } #royalisland-menu .sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 55px; /* Cấp 5 */ } /* === Xóa icon mũi tên trên mobile để giao diện gọn hơn === */ #royalisland-menu li.menu-item-has-children > a:after { content: none; /* Xóa icon trên mobile */ } } /* === Thiết lập chung cho menu TimesCity === */ #TimesCity-menu { list-style: none; /* Xóa dấu đầu dòng mặc định */ margin: 0; /* Xóa lề mặc định */ padding: 0; /* Xóa đệm mặc định */ display: flex; /* Sử dụng flexbox để xếp menu cấp 1 theo hàng ngang */ font-family: 'Arial', sans-serif; /* Font chữ hiện đại */ background-color: #ffffff; /* Màu nền trắng */ border-bottom: 1px solid #e5e5e5; /* Đường viền dưới nhẹ */ } /* === Thiết lập cho các mục menu cấp 1 === */ #TimesCity-menu > li.menu-item { position: relative; /* Đặt vị trí tương đối để chứa menu con */ padding: 0 15px; /* Khoảng cách trái phải */ } /* === Thiết lập cho liên kết trong mục menu cấp 1 === */ #TimesCity-menu > li.menu-item > a { display: block; /* Hiển thị dạng khối */ padding: 15px 10px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ tối */ text-decoration: none; /* Xóa gạch chân */ font-size: 16px; /* Kích thước chữ */ font-weight: 500; /* Độ đậm chữ */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu cấp 1 === */ #TimesCity-menu > li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập chung cho menu con (tất cả các cấp) === */ #TimesCity-menu .sub-menu { display: none; /* Ẩn menu con mặc định */ position: absolute; /* Đặt vị trí tuyệt đối */ top: 100%; /* Hiển thị ngay dưới mục cha */ left: 0; /* Căn trái với mục cha */ min-width: 220px; /* Chiều rộng tối thiểu */ background-color: #ffffff; /* Màu nền trắng */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */ border: 1px solid #e5e5e5; /* Viền nhẹ */ z-index: 1000; /* Đảm bảo menu con nằm trên các phần tử khác */ } /* === Hiển thị menu con khi hover vào mục cha === */ #TimesCity-menu li.menu-item-has-children:hover > .sub-menu { display: block; /* Hiển thị menu con khi hover */ } /* === Thiết lập cho các mục trong menu con (tất cả các cấp) === */ #TimesCity-menu .sub-menu li.menu-item { position: relative; /* Đặt vị trí tương đối để hỗ trợ menu con cấp sâu hơn */ list-style-type: none; } /* === Thiết lập cho liên kết trong menu con === */ #TimesCity-menu .sub-menu li.menu-item a { display: block; /* Hiển thị dạng khối */ padding: 10px 15px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ */ font-size: 14px; /* Chữ nhỏ hơn cấp 1 */ text-decoration: none; /* Xóa gạch chân */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu con === */ #TimesCity-menu .sub-menu li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập cho menu con cấp 3, 4, 5 === */ #TimesCity-menu .sub-menu .sub-menu { top: 0; /* Hiển thị menu con cấp sâu hơn ở bên phải */ left: 100%; /* Căn trái với cạnh phải của menu cha */ } /* === Thêm padding trái tăng dần cho các cấp sâu hơn để dễ phân biệt === */ #TimesCity-menu .sub-menu .sub-menu li.menu-item a { padding-left: 20px; /* Cấp 3 */ } #TimesCity-menu.sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 4 */ } #TimesCity-menu.sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 30px; /* Cấp 5 */ } /* === Thêm icon mũi tên cho mục có menu con (giống Flatsome) === */ #TimesCity-menu li.menu-item-has-children > a:after { content: '\25B8'; /* Icon mũi tên phải (Unicode) */ font-size: 12px; /* Kích thước icon */ margin-left: 5px; /* Khoảng cách icon với chữ */ display: inline-block; /* Hiển thị inline với chữ */ transition: transform 0.3s ease; /* Hiệu ứng xoay icon */ } /* === Xoay icon khi hover để chỉ menu con === */ #TimesCity-menu li.menu-item-has-children:hover > a:after { transform: rotate(90deg); /* Xoay icon 90 độ khi hover */ } /* === Responsive: Điều chỉnh menu cho màn hình nhỏ (dưới 768px) === */ @media (max-width: 768px) { #TimesCity-menu{ flex-direction: column; /* Chuyển menu thành cột dọc */ background-color: #f9f9f9; /* Nền nhạt hơn cho mobile */ } #TimesCity-menu > li.menu-item { padding: 0; /* Xóa padding trái phải */ } #TimesCity-menu.t3tcode-menu > li.menu-item > a { padding: 12px 15px; /* Giảm padding cho mobile */ border-bottom: 1px solid #e5e5e5; /* Viền dưới cho từng mục */ } /* === Menu con trên mobile === */ #TimesCity-menu .sub-menu { position: static; /* Chuyển về vị trí tĩnh */ box-shadow: none; /* Xóa đổ bóng */ border: none; /* Xóa viền */ background-color: #f1f1f1; /* Nền nhạt hơn */ min-width: 100%; /* Chiếm toàn bộ chiều rộng */ } #TimesCity-menu li.menu-item-has-children:hover > .sub-menu { display: none; /* Ẩn menu con khi hover trên mobile */ } /* === Hiển thị menu con khi có class active (cần JS để toggle) === */ #TimesCity-menu li.menu-item-has-children.active > .sub-menu { display: block; /* Hiển thị menu con khi active */ } /* === Điều chỉnh padding cho các cấp menu con trên mobile === */ #TimesCity-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 2 */ } #TimesCity-menu .sub-menu .sub-menu li.menu-item a { padding-left: 35px; /* Cấp 3 */ } #TimesCity-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 45px; /* Cấp 4 */ } #TimesCity-menu .sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 55px; /* Cấp 5 */ } /* === Xóa icon mũi tên trên mobile để giao diện gọn hơn === */ #TimesCity-menu li.menu-item-has-children > a:after { content: none; /* Xóa icon trên mobile */ } } /* === Thiết lập chung cho menu thanglong === */ #thanglong-menu { list-style: none; /* Xóa dấu đầu dòng mặc định */ margin: 0; /* Xóa lề mặc định */ padding: 0; /* Xóa đệm mặc định */ display: flex; /* Sử dụng flexbox để xếp menu cấp 1 theo hàng ngang */ font-family: 'Arial', sans-serif; /* Font chữ hiện đại */ background-color: #ffffff; /* Màu nền trắng */ border-bottom: 1px solid #e5e5e5; /* Đường viền dưới nhẹ */ } /* === Thiết lập cho các mục menu cấp 1 === */ #thanglong-menu > li.menu-item { position: relative; /* Đặt vị trí tương đối để chứa menu con */ padding: 0 15px; /* Khoảng cách trái phải */ } /* === Thiết lập cho liên kết trong mục menu cấp 1 === */ #thanglong-menu > li.menu-item > a { display: block; /* Hiển thị dạng khối */ padding: 15px 10px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ tối */ text-decoration: none; /* Xóa gạch chân */ font-size: 16px; /* Kích thước chữ */ font-weight: 500; /* Độ đậm chữ */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu cấp 1 === */ #thanglong-menu > li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập chung cho menu con (tất cả các cấp) === */ #thanglong-menu .sub-menu { display: none; /* Ẩn menu con mặc định */ position: absolute; /* Đặt vị trí tuyệt đối */ top: 100%; /* Hiển thị ngay dưới mục cha */ left: 0; /* Căn trái với mục cha */ min-width: 220px; /* Chiều rộng tối thiểu */ background-color: #ffffff; /* Màu nền trắng */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */ border: 1px solid #e5e5e5; /* Viền nhẹ */ z-index: 1000; /* Đảm bảo menu con nằm trên các phần tử khác */ } /* === Hiển thị menu con khi hover vào mục cha === */ #thanglong-menu li.menu-item-has-children:hover > .sub-menu { display: block; /* Hiển thị menu con khi hover */ } /* === Thiết lập cho các mục trong menu con (tất cả các cấp) === */ #thanglong-menu .sub-menu li.menu-item { position: relative; /* Đặt vị trí tương đối để hỗ trợ menu con cấp sâu hơn */ list-style-type: none; } /* === Thiết lập cho liên kết trong menu con === */ #thanglong-menu .sub-menu li.menu-item a { display: block; /* Hiển thị dạng khối */ padding: 10px 15px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ */ font-size: 14px; /* Chữ nhỏ hơn cấp 1 */ text-decoration: none; /* Xóa gạch chân */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu con === */ #thanglong-menu .sub-menu li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập cho menu con cấp 3, 4, 5 === */ #thanglong-menu .sub-menu .sub-menu { top: 0; /* Hiển thị menu con cấp sâu hơn ở bên phải */ left: 100%; /* Căn trái với cạnh phải của menu cha */ } /* === Thêm padding trái tăng dần cho các cấp sâu hơn để dễ phân biệt === */ #thanglong-menu .sub-menu .sub-menu li.menu-item a { padding-left: 20px; /* Cấp 3 */ } #thanglong-menu.sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 4 */ } #thanglong-menu.sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 30px; /* Cấp 5 */ } /* === Thêm icon mũi tên cho mục có menu con (giống Flatsome) === */ #thanglong-menu li.menu-item-has-children > a:after { content: '\25B8'; /* Icon mũi tên phải (Unicode) */ font-size: 12px; /* Kích thước icon */ margin-left: 5px; /* Khoảng cách icon với chữ */ display: inline-block; /* Hiển thị inline với chữ */ transition: transform 0.3s ease; /* Hiệu ứng xoay icon */ } /* === Xoay icon khi hover để chỉ menu con === */ #thanglong-menu li.menu-item-has-children:hover > a:after { transform: rotate(90deg); /* Xoay icon 90 độ khi hover */ } /* === Responsive: Điều chỉnh menu cho màn hình nhỏ (dưới 768px) === */ @media (max-width: 768px) { #thanglong-menu{ flex-direction: column; /* Chuyển menu thành cột dọc */ background-color: #f9f9f9; /* Nền nhạt hơn cho mobile */ } #thanglong-menu > li.menu-item { padding: 0; /* Xóa padding trái phải */ } #thanglong-menu.t3tcode-menu > li.menu-item > a { padding: 12px 15px; /* Giảm padding cho mobile */ border-bottom: 1px solid #e5e5e5; /* Viền dưới cho từng mục */ } /* === Menu con trên mobile === */ #thanglong-menu .sub-menu { position: static; /* Chuyển về vị trí tĩnh */ box-shadow: none; /* Xóa đổ bóng */ border: none; /* Xóa viền */ background-color: #f1f1f1; /* Nền nhạt hơn */ min-width: 100%; /* Chiếm toàn bộ chiều rộng */ } #thanglong-menu li.menu-item-has-children:hover > .sub-menu { display: none; /* Ẩn menu con khi hover trên mobile */ } /* === Hiển thị menu con khi có class active (cần JS để toggle) === */ #thanglong-menu li.menu-item-has-children.active > .sub-menu { display: block; /* Hiển thị menu con khi active */ } /* === Điều chỉnh padding cho các cấp menu con trên mobile === */ #thanglong-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 2 */ } #thanglong-menu .sub-menu .sub-menu li.menu-item a { padding-left: 35px; /* Cấp 3 */ } #thanglong-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 45px; /* Cấp 4 */ } #thanglong-menu .sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 55px; /* Cấp 5 */ } /* === Xóa icon mũi tên trên mobile để giao diện gọn hơn === */ #thanglong-menu li.menu-item-has-children > a:after { content: none; /* Xóa icon trên mobile */ } } /* === Thiết lập chung cho menu Metropolis === */ #Metropolis-menu { list-style: none; /* Xóa dấu đầu dòng mặc định */ margin: 0; /* Xóa lề mặc định */ padding: 0; /* Xóa đệm mặc định */ display: flex; /* Sử dụng flexbox để xếp menu cấp 1 theo hàng ngang */ font-family: 'Arial', sans-serif; /* Font chữ hiện đại */ background-color: #ffffff; /* Màu nền trắng */ border-bottom: 1px solid #e5e5e5; /* Đường viền dưới nhẹ */ } /* === Thiết lập cho các mục menu cấp 1 === */ #Metropolis-menu > li.menu-item { position: relative; /* Đặt vị trí tương đối để chứa menu con */ padding: 0 15px; /* Khoảng cách trái phải */ } /* === Thiết lập cho liên kết trong mục menu cấp 1 === */ #Metropolis-menu > li.menu-item > a { display: block; /* Hiển thị dạng khối */ padding: 15px 10px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ tối */ text-decoration: none; /* Xóa gạch chân */ font-size: 16px; /* Kích thước chữ */ font-weight: 500; /* Độ đậm chữ */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu cấp 1 === */ #Metropolis-menu > li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập chung cho menu con (tất cả các cấp) === */ #Metropolis-menu .sub-menu { display: none; /* Ẩn menu con mặc định */ position: absolute; /* Đặt vị trí tuyệt đối */ top: 100%; /* Hiển thị ngay dưới mục cha */ left: 0; /* Căn trái với mục cha */ min-width: 220px; /* Chiều rộng tối thiểu */ background-color: #ffffff; /* Màu nền trắng */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */ border: 1px solid #e5e5e5; /* Viền nhẹ */ z-index: 1000; /* Đảm bảo menu con nằm trên các phần tử khác */ } /* === Hiển thị menu con khi hover vào mục cha === */ #Metropolis-menu li.menu-item-has-children:hover > .sub-menu { display: block; /* Hiển thị menu con khi hover */ } /* === Thiết lập cho các mục trong menu con (tất cả các cấp) === */ #Metropolis-menu .sub-menu li.menu-item { position: relative; /* Đặt vị trí tương đối để hỗ trợ menu con cấp sâu hơn */ list-style-type: none; } /* === Thiết lập cho liên kết trong menu con === */ #Metropolis-menu .sub-menu li.menu-item a { display: block; /* Hiển thị dạng khối */ padding: 10px 15px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ */ font-size: 14px; /* Chữ nhỏ hơn cấp 1 */ text-decoration: none; /* Xóa gạch chân */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu con === */ #Metropolis-menu .sub-menu li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập cho menu con cấp 3, 4, 5 === */ #Metropolis-menu .sub-menu .sub-menu { top: 0; /* Hiển thị menu con cấp sâu hơn ở bên phải */ left: 100%; /* Căn trái với cạnh phải của menu cha */ } /* === Thêm padding trái tăng dần cho các cấp sâu hơn để dễ phân biệt === */ #Metropolis-menu .sub-menu .sub-menu li.menu-item a { padding-left: 20px; /* Cấp 3 */ } #Metropolis-menu.sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 4 */ } #Metropolis-menu.sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 30px; /* Cấp 5 */ } /* === Thêm icon mũi tên cho mục có menu con (giống Flatsome) === */ #Metropolis-menu li.menu-item-has-children > a:after { content: '\25B8'; /* Icon mũi tên phải (Unicode) */ font-size: 12px; /* Kích thước icon */ margin-left: 5px; /* Khoảng cách icon với chữ */ display: inline-block; /* Hiển thị inline với chữ */ transition: transform 0.3s ease; /* Hiệu ứng xoay icon */ } /* === Xoay icon khi hover để chỉ menu con === */ #Metropolis-menu li.menu-item-has-children:hover > a:after { transform: rotate(90deg); /* Xoay icon 90 độ khi hover */ } /* === Responsive: Điều chỉnh menu cho màn hình nhỏ (dưới 768px) === */ @media (max-width: 768px) { #Metropolis-menu{ flex-direction: column; /* Chuyển menu thành cột dọc */ background-color: #f9f9f9; /* Nền nhạt hơn cho mobile */ } #Metropolis-menu > li.menu-item { padding: 0; /* Xóa padding trái phải */ } #Metropolis-menu.t3tcode-menu > li.menu-item > a { padding: 12px 15px; /* Giảm padding cho mobile */ border-bottom: 1px solid #e5e5e5; /* Viền dưới cho từng mục */ } /* === Menu con trên mobile === */ #Metropolis-menu .sub-menu { position: static; /* Chuyển về vị trí tĩnh */ box-shadow: none; /* Xóa đổ bóng */ border: none; /* Xóa viền */ background-color: #f1f1f1; /* Nền nhạt hơn */ min-width: 100%; /* Chiếm toàn bộ chiều rộng */ } #Metropolis-menu li.menu-item-has-children:hover > .sub-menu { display: none; /* Ẩn menu con khi hover trên mobile */ } /* === Hiển thị menu con khi có class active (cần JS để toggle) === */ #Metropolis-menu li.menu-item-has-children.active > .sub-menu { display: block; /* Hiển thị menu con khi active */ } /* === Điều chỉnh padding cho các cấp menu con trên mobile === */ #Metropolis-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 2 */ } #Metropolis-menu .sub-menu .sub-menu li.menu-item a { padding-left: 35px; /* Cấp 3 */ } #Metropolis-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 45px; /* Cấp 4 */ } #Metropolis-menu .sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 55px; /* Cấp 5 */ } /* === Xóa icon mũi tên trên mobile để giao diện gọn hơn === */ #Metropolis-menu li.menu-item-has-children > a:after { content: none; /* Xóa icon trên mobile */ } } /* === Thiết lập chung cho menu gardenia === */ #gardenia-menu { list-style: none; /* Xóa dấu đầu dòng mặc định */ margin: 0; /* Xóa lề mặc định */ padding: 0; /* Xóa đệm mặc định */ display: flex; /* Sử dụng flexbox để xếp menu cấp 1 theo hàng ngang */ font-family: 'Arial', sans-serif; /* Font chữ hiện đại */ background-color: #ffffff; /* Màu nền trắng */ border-bottom: 1px solid #e5e5e5; /* Đường viền dưới nhẹ */ } /* === Thiết lập cho các mục menu cấp 1 === */ #gardenia-menu > li.menu-item { position: relative; /* Đặt vị trí tương đối để chứa menu con */ padding: 0 15px; /* Khoảng cách trái phải */ } /* === Thiết lập cho liên kết trong mục menu cấp 1 === */ #gardenia-menu > li.menu-item > a { display: block; /* Hiển thị dạng khối */ padding: 15px 10px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ tối */ text-decoration: none; /* Xóa gạch chân */ font-size: 16px; /* Kích thước chữ */ font-weight: 500; /* Độ đậm chữ */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu cấp 1 === */ #gardenia-menu > li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập chung cho menu con (tất cả các cấp) === */ #gardenia-menu .sub-menu { display: none; /* Ẩn menu con mặc định */ position: absolute; /* Đặt vị trí tuyệt đối */ top: 100%; /* Hiển thị ngay dưới mục cha */ left: 0; /* Căn trái với mục cha */ min-width: 220px; /* Chiều rộng tối thiểu */ background-color: #ffffff; /* Màu nền trắng */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */ border: 1px solid #e5e5e5; /* Viền nhẹ */ z-index: 1000; /* Đảm bảo menu con nằm trên các phần tử khác */ } /* === Hiển thị menu con khi hover vào mục cha === */ #gardenia-menu li.menu-item-has-children:hover > .sub-menu { display: block; /* Hiển thị menu con khi hover */ } /* === Thiết lập cho các mục trong menu con (tất cả các cấp) === */ #gardenia-menu .sub-menu li.menu-item { position: relative; /* Đặt vị trí tương đối để hỗ trợ menu con cấp sâu hơn */ list-style-type: none; } /* === Thiết lập cho liên kết trong menu con === */ #gardenia-menu .sub-menu li.menu-item a { display: block; /* Hiển thị dạng khối */ padding: 10px 15px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ */ font-size: 14px; /* Chữ nhỏ hơn cấp 1 */ text-decoration: none; /* Xóa gạch chân */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu con === */ #gardenia-menu .sub-menu li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập cho menu con cấp 3, 4, 5 === */ #gardenia-menu .sub-menu .sub-menu { top: 0; /* Hiển thị menu con cấp sâu hơn ở bên phải */ left: 100%; /* Căn trái với cạnh phải của menu cha */ } /* === Thêm padding trái tăng dần cho các cấp sâu hơn để dễ phân biệt === */ #gardenia-menu .sub-menu .sub-menu li.menu-item a { padding-left: 20px; /* Cấp 3 */ } #gardenia-menu.sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 4 */ } #gardenia-menu.sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 30px; /* Cấp 5 */ } /* === Thêm icon mũi tên cho mục có menu con (giống Flatsome) === */ #gardenia-menu li.menu-item-has-children > a:after { content: '\25B8'; /* Icon mũi tên phải (Unicode) */ font-size: 12px; /* Kích thước icon */ margin-left: 5px; /* Khoảng cách icon với chữ */ display: inline-block; /* Hiển thị inline với chữ */ transition: transform 0.3s ease; /* Hiệu ứng xoay icon */ } /* === Xoay icon khi hover để chỉ menu con === */ #gardenia-menu li.menu-item-has-children:hover > a:after { transform: rotate(90deg); /* Xoay icon 90 độ khi hover */ } /* === Responsive: Điều chỉnh menu cho màn hình nhỏ (dưới 768px) === */ @media (max-width: 768px) { #gardenia-menu{ flex-direction: column; /* Chuyển menu thành cột dọc */ background-color: #f9f9f9; /* Nền nhạt hơn cho mobile */ } #gardenia-menu > li.menu-item { padding: 0; /* Xóa padding trái phải */ } #gardenia-menu.t3tcode-menu > li.menu-item > a { padding: 12px 15px; /* Giảm padding cho mobile */ border-bottom: 1px solid #e5e5e5; /* Viền dưới cho từng mục */ } /* === Menu con trên mobile === */ #gardenia-menu .sub-menu { position: static; /* Chuyển về vị trí tĩnh */ box-shadow: none; /* Xóa đổ bóng */ border: none; /* Xóa viền */ background-color: #f1f1f1; /* Nền nhạt hơn */ min-width: 100%; /* Chiếm toàn bộ chiều rộng */ } #gardenia-menu li.menu-item-has-children:hover > .sub-menu { display: none; /* Ẩn menu con khi hover trên mobile */ } /* === Hiển thị menu con khi có class active (cần JS để toggle) === */ #gardenia-menu li.menu-item-has-children.active > .sub-menu { display: block; /* Hiển thị menu con khi active */ } /* === Điều chỉnh padding cho các cấp menu con trên mobile === */ #gardenia-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 2 */ } #gardenia-menu .sub-menu .sub-menu li.menu-item a { padding-left: 35px; /* Cấp 3 */ } #gardenia-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 45px; /* Cấp 4 */ } #gardenia-menu .sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 55px; /* Cấp 5 */ } /* === Xóa icon mũi tên trên mobile để giao diện gọn hơn === */ #gardenia-menu li.menu-item-has-children > a:after { content: none; /* Xóa icon trên mobile */ } } /* === Thiết lập chung cho menu Symphony === */ #Symphony-menu { list-style: none; /* Xóa dấu đầu dòng mặc định */ margin: 0; /* Xóa lề mặc định */ padding: 0; /* Xóa đệm mặc định */ display: flex; /* Sử dụng flexbox để xếp menu cấp 1 theo hàng ngang */ font-family: 'Arial', sans-serif; /* Font chữ hiện đại */ background-color: #ffffff; /* Màu nền trắng */ border-bottom: 1px solid #e5e5e5; /* Đường viền dưới nhẹ */ } /* === Thiết lập cho các mục menu cấp 1 === */ #Symphony-menu > li.menu-item { position: relative; /* Đặt vị trí tương đối để chứa menu con */ padding: 0 15px; /* Khoảng cách trái phải */ } /* === Thiết lập cho liên kết trong mục menu cấp 1 === */ #Symphony-menu > li.menu-item > a { display: block; /* Hiển thị dạng khối */ padding: 15px 10px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ tối */ text-decoration: none; /* Xóa gạch chân */ font-size: 16px; /* Kích thước chữ */ font-weight: 500; /* Độ đậm chữ */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu cấp 1 === */ #Symphony-menu > li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập chung cho menu con (tất cả các cấp) === */ #Symphony-menu .sub-menu { display: none; /* Ẩn menu con mặc định */ position: absolute; /* Đặt vị trí tuyệt đối */ top: 100%; /* Hiển thị ngay dưới mục cha */ left: 0; /* Căn trái với mục cha */ min-width: 220px; /* Chiều rộng tối thiểu */ background-color: #ffffff; /* Màu nền trắng */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */ border: 1px solid #e5e5e5; /* Viền nhẹ */ z-index: 1000; /* Đảm bảo menu con nằm trên các phần tử khác */ } /* === Hiển thị menu con khi hover vào mục cha === */ #Symphony-menu li.menu-item-has-children:hover > .sub-menu { display: block; /* Hiển thị menu con khi hover */ } /* === Thiết lập cho các mục trong menu con (tất cả các cấp) === */ #Symphony-menu .sub-menu li.menu-item { position: relative; /* Đặt vị trí tương đối để hỗ trợ menu con cấp sâu hơn */ list-style-type: none; } /* === Thiết lập cho liên kết trong menu con === */ #Symphony-menu .sub-menu li.menu-item a { display: block; /* Hiển thị dạng khối */ padding: 10px 15px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ */ font-size: 14px; /* Chữ nhỏ hơn cấp 1 */ text-decoration: none; /* Xóa gạch chân */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu con === */ #Symphony-menu .sub-menu li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập cho menu con cấp 3, 4, 5 === */ #Symphony-menu .sub-menu .sub-menu { top: 0; /* Hiển thị menu con cấp sâu hơn ở bên phải */ left: 100%; /* Căn trái với cạnh phải của menu cha */ } /* === Thêm padding trái tăng dần cho các cấp sâu hơn để dễ phân biệt === */ #Symphony-menu .sub-menu .sub-menu li.menu-item a { padding-left: 20px; /* Cấp 3 */ } #Symphony-menu.sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 4 */ } #Symphony-menu.sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 30px; /* Cấp 5 */ } /* === Thêm icon mũi tên cho mục có menu con (giống Flatsome) === */ #Symphony-menu li.menu-item-has-children > a:after { content: '\25B8'; /* Icon mũi tên phải (Unicode) */ font-size: 12px; /* Kích thước icon */ margin-left: 5px; /* Khoảng cách icon với chữ */ display: inline-block; /* Hiển thị inline với chữ */ transition: transform 0.3s ease; /* Hiệu ứng xoay icon */ } /* === Xoay icon khi hover để chỉ menu con === */ #Symphony-menu li.menu-item-has-children:hover > a:after { transform: rotate(90deg); /* Xoay icon 90 độ khi hover */ } /* === Responsive: Điều chỉnh menu cho màn hình nhỏ (dưới 768px) === */ @media (max-width: 768px) { #Symphony-menu{ flex-direction: column; /* Chuyển menu thành cột dọc */ background-color: #f9f9f9; /* Nền nhạt hơn cho mobile */ } #Symphony-menu > li.menu-item { padding: 0; /* Xóa padding trái phải */ } #Symphony-menu.t3tcode-menu > li.menu-item > a { padding: 12px 15px; /* Giảm padding cho mobile */ border-bottom: 1px solid #e5e5e5; /* Viền dưới cho từng mục */ } /* === Menu con trên mobile === */ #Symphony-menu .sub-menu { position: static; /* Chuyển về vị trí tĩnh */ box-shadow: none; /* Xóa đổ bóng */ border: none; /* Xóa viền */ background-color: #f1f1f1; /* Nền nhạt hơn */ min-width: 100%; /* Chiếm toàn bộ chiều rộng */ } #Symphony-menu li.menu-item-has-children:hover > .sub-menu { display: none; /* Ẩn menu con khi hover trên mobile */ } /* === Hiển thị menu con khi có class active (cần JS để toggle) === */ #Symphony-menu li.menu-item-has-children.active > .sub-menu { display: block; /* Hiển thị menu con khi active */ } /* === Điều chỉnh padding cho các cấp menu con trên mobile === */ #Symphony-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 2 */ } #Symphony-menu .sub-menu .sub-menu li.menu-item a { padding-left: 35px; /* Cấp 3 */ } #Symphony-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 45px; /* Cấp 4 */ } #Symphony-menu .sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 55px; /* Cấp 5 */ } /* === Xóa icon mũi tên trên mobile để giao diện gọn hơn === */ #Symphony-menu li.menu-item-has-children > a:after { content: none; /* Xóa icon trên mobile */ } } /* === Thiết lập chung cho menu WestPoint === */ #WestPoint-menu { list-style: none; /* Xóa dấu đầu dòng mặc định */ margin: 0; /* Xóa lề mặc định */ padding: 0; /* Xóa đệm mặc định */ display: flex; /* Sử dụng flexbox để xếp menu cấp 1 theo hàng ngang */ font-family: 'Arial', sans-serif; /* Font chữ hiện đại */ background-color: #ffffff; /* Màu nền trắng */ border-bottom: 1px solid #e5e5e5; /* Đường viền dưới nhẹ */ } /* === Thiết lập cho các mục menu cấp 1 === */ #WestPoint-menu > li.menu-item { position: relative; /* Đặt vị trí tương đối để chứa menu con */ padding: 0 15px; /* Khoảng cách trái phải */ } /* === Thiết lập cho liên kết trong mục menu cấp 1 === */ #WestPoint-menu > li.menu-item > a { display: block; /* Hiển thị dạng khối */ padding: 15px 10px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ tối */ text-decoration: none; /* Xóa gạch chân */ font-size: 16px; /* Kích thước chữ */ font-weight: 500; /* Độ đậm chữ */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu cấp 1 === */ #WestPoint-menu > li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập chung cho menu con (tất cả các cấp) === */ #WestPoint-menu .sub-menu { display: none; /* Ẩn menu con mặc định */ position: absolute; /* Đặt vị trí tuyệt đối */ top: 100%; /* Hiển thị ngay dưới mục cha */ left: 0; /* Căn trái với mục cha */ min-width: 220px; /* Chiều rộng tối thiểu */ background-color: #ffffff; /* Màu nền trắng */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */ border: 1px solid #e5e5e5; /* Viền nhẹ */ z-index: 1000; /* Đảm bảo menu con nằm trên các phần tử khác */ } /* === Hiển thị menu con khi hover vào mục cha === */ #WestPoint-menu li.menu-item-has-children:hover > .sub-menu { display: block; /* Hiển thị menu con khi hover */ } /* === Thiết lập cho các mục trong menu con (tất cả các cấp) === */ #WestPoint-menu .sub-menu li.menu-item { position: relative; /* Đặt vị trí tương đối để hỗ trợ menu con cấp sâu hơn */ list-style-type: none; } /* === Thiết lập cho liên kết trong menu con === */ #WestPoint-menu .sub-menu li.menu-item a { display: block; /* Hiển thị dạng khối */ padding: 10px 15px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ */ font-size: 14px; /* Chữ nhỏ hơn cấp 1 */ text-decoration: none; /* Xóa gạch chân */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu con === */ #WestPoint-menu .sub-menu li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập cho menu con cấp 3, 4, 5 === */ #WestPoint-menu .sub-menu .sub-menu { top: 0; /* Hiển thị menu con cấp sâu hơn ở bên phải */ left: 100%; /* Căn trái với cạnh phải của menu cha */ } /* === Thêm padding trái tăng dần cho các cấp sâu hơn để dễ phân biệt === */ #WestPoint-menu .sub-menu .sub-menu li.menu-item a { padding-left: 20px; /* Cấp 3 */ } #WestPoint-menu.sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 4 */ } #WestPoint-menu.sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 30px; /* Cấp 5 */ } /* === Thêm icon mũi tên cho mục có menu con (giống Flatsome) === */ #WestPoint-menu li.menu-item-has-children > a:after { content: '\25B8'; /* Icon mũi tên phải (Unicode) */ font-size: 12px; /* Kích thước icon */ margin-left: 5px; /* Khoảng cách icon với chữ */ display: inline-block; /* Hiển thị inline với chữ */ transition: transform 0.3s ease; /* Hiệu ứng xoay icon */ } /* === Xoay icon khi hover để chỉ menu con === */ #WestPoint-menu li.menu-item-has-children:hover > a:after { transform: rotate(90deg); /* Xoay icon 90 độ khi hover */ } /* === Responsive: Điều chỉnh menu cho màn hình nhỏ (dưới 768px) === */ @media (max-width: 768px) { #WestPoint-menu{ flex-direction: column; /* Chuyển menu thành cột dọc */ background-color: #f9f9f9; /* Nền nhạt hơn cho mobile */ } #WestPoint-menu > li.menu-item { padding: 0; /* Xóa padding trái phải */ } #WestPoint-menu.t3tcode-menu > li.menu-item > a { padding: 12px 15px; /* Giảm padding cho mobile */ border-bottom: 1px solid #e5e5e5; /* Viền dưới cho từng mục */ } /* === Menu con trên mobile === */ #WestPoint-menu .sub-menu { position: static; /* Chuyển về vị trí tĩnh */ box-shadow: none; /* Xóa đổ bóng */ border: none; /* Xóa viền */ background-color: #f1f1f1; /* Nền nhạt hơn */ min-width: 100%; /* Chiếm toàn bộ chiều rộng */ } #WestPoint-menu li.menu-item-has-children:hover > .sub-menu { display: none; /* Ẩn menu con khi hover trên mobile */ } /* === Hiển thị menu con khi có class active (cần JS để toggle) === */ #WestPoint-menu li.menu-item-has-children.active > .sub-menu { display: block; /* Hiển thị menu con khi active */ } /* === Điều chỉnh padding cho các cấp menu con trên mobile === */ #WestPoint-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 2 */ } #WestPoint-menu .sub-menu .sub-menu li.menu-item a { padding-left: 35px; /* Cấp 3 */ } #WestPoint-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 45px; /* Cấp 4 */ } #WestPoint-menu .sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 55px; /* Cấp 5 */ } /* === Xóa icon mũi tên trên mobile để giao diện gọn hơn === */ #WestPoint-menu li.menu-item-has-children > a:after { content: none; /* Xóa icon trên mobile */ } } /* === Thiết lập chung cho menu GreenBay === */ #GreenBay-menu { list-style: none; /* Xóa dấu đầu dòng mặc định */ margin: 0; /* Xóa lề mặc định */ padding: 0; /* Xóa đệm mặc định */ display: flex; /* Sử dụng flexbox để xếp menu cấp 1 theo hàng ngang */ font-family: 'Arial', sans-serif; /* Font chữ hiện đại */ background-color: #ffffff; /* Màu nền trắng */ border-bottom: 1px solid #e5e5e5; /* Đường viền dưới nhẹ */ } /* === Thiết lập cho các mục menu cấp 1 === */ #GreenBay-menu > li.menu-item { position: relative; /* Đặt vị trí tương đối để chứa menu con */ padding: 0 15px; /* Khoảng cách trái phải */ } /* === Thiết lập cho liên kết trong mục menu cấp 1 === */ #GreenBay-menu > li.menu-item > a { display: block; /* Hiển thị dạng khối */ padding: 15px 10px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ tối */ text-decoration: none; /* Xóa gạch chân */ font-size: 16px; /* Kích thước chữ */ font-weight: 500; /* Độ đậm chữ */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu cấp 1 === */ #GreenBay-menu > li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập chung cho menu con (tất cả các cấp) === */ #GreenBay-menu .sub-menu { display: none; /* Ẩn menu con mặc định */ position: absolute; /* Đặt vị trí tuyệt đối */ top: 100%; /* Hiển thị ngay dưới mục cha */ left: 0; /* Căn trái với mục cha */ min-width: 220px; /* Chiều rộng tối thiểu */ background-color: #ffffff; /* Màu nền trắng */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */ border: 1px solid #e5e5e5; /* Viền nhẹ */ z-index: 1000; /* Đảm bảo menu con nằm trên các phần tử khác */ } /* === Hiển thị menu con khi hover vào mục cha === */ #GreenBay-menu li.menu-item-has-children:hover > .sub-menu { display: block; /* Hiển thị menu con khi hover */ } /* === Thiết lập cho các mục trong menu con (tất cả các cấp) === */ #GreenBay-menu .sub-menu li.menu-item { position: relative; /* Đặt vị trí tương đối để hỗ trợ menu con cấp sâu hơn */ list-style-type: none; } /* === Thiết lập cho liên kết trong menu con === */ #GreenBay-menu .sub-menu li.menu-item a { display: block; /* Hiển thị dạng khối */ padding: 10px 15px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ */ font-size: 14px; /* Chữ nhỏ hơn cấp 1 */ text-decoration: none; /* Xóa gạch chân */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu con === */ #GreenBay-menu .sub-menu li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập cho menu con cấp 3, 4, 5 === */ #GreenBay-menu .sub-menu .sub-menu { top: 0; /* Hiển thị menu con cấp sâu hơn ở bên phải */ left: 100%; /* Căn trái với cạnh phải của menu cha */ } /* === Thêm padding trái tăng dần cho các cấp sâu hơn để dễ phân biệt === */ #GreenBay-menu .sub-menu .sub-menu li.menu-item a { padding-left: 20px; /* Cấp 3 */ } #GreenBay-menu.sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 4 */ } #GreenBay-menu.sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 30px; /* Cấp 5 */ } /* === Thêm icon mũi tên cho mục có menu con (giống Flatsome) === */ #GreenBay-menu li.menu-item-has-children > a:after { content: '\25B8'; /* Icon mũi tên phải (Unicode) */ font-size: 12px; /* Kích thước icon */ margin-left: 5px; /* Khoảng cách icon với chữ */ display: inline-block; /* Hiển thị inline với chữ */ transition: transform 0.3s ease; /* Hiệu ứng xoay icon */ } /* === Xoay icon khi hover để chỉ menu con === */ #GreenBay-menu li.menu-item-has-children:hover > a:after { transform: rotate(90deg); /* Xoay icon 90 độ khi hover */ } /* === Responsive: Điều chỉnh menu cho màn hình nhỏ (dưới 768px) === */ @media (max-width: 768px) { #GreenBay-menu{ flex-direction: column; /* Chuyển menu thành cột dọc */ background-color: #f9f9f9; /* Nền nhạt hơn cho mobile */ } #GreenBay-menu > li.menu-item { padding: 0; /* Xóa padding trái phải */ } #GreenBay-menu.t3tcode-menu > li.menu-item > a { padding: 12px 15px; /* Giảm padding cho mobile */ border-bottom: 1px solid #e5e5e5; /* Viền dưới cho từng mục */ } /* === Menu con trên mobile === */ #GreenBay-menu .sub-menu { position: static; /* Chuyển về vị trí tĩnh */ box-shadow: none; /* Xóa đổ bóng */ border: none; /* Xóa viền */ background-color: #f1f1f1; /* Nền nhạt hơn */ min-width: 100%; /* Chiếm toàn bộ chiều rộng */ } #GreenBay-menu li.menu-item-has-children:hover > .sub-menu { display: none; /* Ẩn menu con khi hover trên mobile */ } /* === Hiển thị menu con khi có class active (cần JS để toggle) === */ #GreenBay-menu li.menu-item-has-children.active > .sub-menu { display: block; /* Hiển thị menu con khi active */ } /* === Điều chỉnh padding cho các cấp menu con trên mobile === */ #GreenBay-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 2 */ } #GreenBay-menu .sub-menu .sub-menu li.menu-item a { padding-left: 35px; /* Cấp 3 */ } #GreenBay-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 45px; /* Cấp 4 */ } #GreenBay-menu .sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 55px; /* Cấp 5 */ } /* === Xóa icon mũi tên trên mobile để giao diện gọn hơn === */ #GreenBay-menu li.menu-item-has-children > a:after { content: none; /* Xóa icon trên mobile */ } } /* === Thiết lập chung cho menu Skylake === */ #Skylake-menu { list-style: none; /* Xóa dấu đầu dòng mặc định */ margin: 0; /* Xóa lề mặc định */ padding: 0; /* Xóa đệm mặc định */ display: flex; /* Sử dụng flexbox để xếp menu cấp 1 theo hàng ngang */ font-family: 'Arial', sans-serif; /* Font chữ hiện đại */ background-color: #ffffff; /* Màu nền trắng */ border-bottom: 1px solid #e5e5e5; /* Đường viền dưới nhẹ */ } /* === Thiết lập cho các mục menu cấp 1 === */ #Skylake-menu > li.menu-item { position: relative; /* Đặt vị trí tương đối để chứa menu con */ padding: 0 15px; /* Khoảng cách trái phải */ } /* === Thiết lập cho liên kết trong mục menu cấp 1 === */ #Skylake-menu > li.menu-item > a { display: block; /* Hiển thị dạng khối */ padding: 15px 10px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ tối */ text-decoration: none; /* Xóa gạch chân */ font-size: 16px; /* Kích thước chữ */ font-weight: 500; /* Độ đậm chữ */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu cấp 1 === */ #Skylake-menu > li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập chung cho menu con (tất cả các cấp) === */ #Skylake-menu .sub-menu { display: none; /* Ẩn menu con mặc định */ position: absolute; /* Đặt vị trí tuyệt đối */ top: 100%; /* Hiển thị ngay dưới mục cha */ left: 0; /* Căn trái với mục cha */ min-width: 220px; /* Chiều rộng tối thiểu */ background-color: #ffffff; /* Màu nền trắng */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */ border: 1px solid #e5e5e5; /* Viền nhẹ */ z-index: 1000; /* Đảm bảo menu con nằm trên các phần tử khác */ } /* === Hiển thị menu con khi hover vào mục cha === */ #Skylake-menu li.menu-item-has-children:hover > .sub-menu { display: block; /* Hiển thị menu con khi hover */ } /* === Thiết lập cho các mục trong menu con (tất cả các cấp) === */ #Skylake-menu .sub-menu li.menu-item { position: relative; /* Đặt vị trí tương đối để hỗ trợ menu con cấp sâu hơn */ list-style-type: none; } /* === Thiết lập cho liên kết trong menu con === */ #Skylake-menu .sub-menu li.menu-item a { display: block; /* Hiển thị dạng khối */ padding: 10px 15px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ */ font-size: 14px; /* Chữ nhỏ hơn cấp 1 */ text-decoration: none; /* Xóa gạch chân */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu con === */ #Skylake-menu .sub-menu li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập cho menu con cấp 3, 4, 5 === */ #Skylake-menu .sub-menu .sub-menu { top: 0; /* Hiển thị menu con cấp sâu hơn ở bên phải */ left: 100%; /* Căn trái với cạnh phải của menu cha */ } /* === Thêm padding trái tăng dần cho các cấp sâu hơn để dễ phân biệt === */ #Skylake-menu .sub-menu .sub-menu li.menu-item a { padding-left: 20px; /* Cấp 3 */ } #Skylake-menu.sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 4 */ } #Skylake-menu.sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 30px; /* Cấp 5 */ } /* === Thêm icon mũi tên cho mục có menu con (giống Flatsome) === */ #Skylake-menu li.menu-item-has-children > a:after { content: '\25B8'; /* Icon mũi tên phải (Unicode) */ font-size: 12px; /* Kích thước icon */ margin-left: 5px; /* Khoảng cách icon với chữ */ display: inline-block; /* Hiển thị inline với chữ */ transition: transform 0.3s ease; /* Hiệu ứng xoay icon */ } /* === Xoay icon khi hover để chỉ menu con === */ #Skylake-menu li.menu-item-has-children:hover > a:after { transform: rotate(90deg); /* Xoay icon 90 độ khi hover */ } /* === Responsive: Điều chỉnh menu cho màn hình nhỏ (dưới 768px) === */ @media (max-width: 768px) { #Skylake-menu{ flex-direction: column; /* Chuyển menu thành cột dọc */ background-color: #f9f9f9; /* Nền nhạt hơn cho mobile */ } #Skylake-menu > li.menu-item { padding: 0; /* Xóa padding trái phải */ } #Skylake-menu.t3tcode-menu > li.menu-item > a { padding: 12px 15px; /* Giảm padding cho mobile */ border-bottom: 1px solid #e5e5e5; /* Viền dưới cho từng mục */ } /* === Menu con trên mobile === */ #Skylake-menu .sub-menu { position: static; /* Chuyển về vị trí tĩnh */ box-shadow: none; /* Xóa đổ bóng */ border: none; /* Xóa viền */ background-color: #f1f1f1; /* Nền nhạt hơn */ min-width: 100%; /* Chiếm toàn bộ chiều rộng */ } #Skylake-menu li.menu-item-has-children:hover > .sub-menu { display: none; /* Ẩn menu con khi hover trên mobile */ } /* === Hiển thị menu con khi có class active (cần JS để toggle) === */ #Skylake-menu li.menu-item-has-children.active > .sub-menu { display: block; /* Hiển thị menu con khi active */ } /* === Điều chỉnh padding cho các cấp menu con trên mobile === */ #Skylake-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 2 */ } #Skylake-menu .sub-menu .sub-menu li.menu-item a { padding-left: 35px; /* Cấp 3 */ } #Skylake-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 45px; /* Cấp 4 */ } #Skylake-menu .sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 55px; /* Cấp 5 */ } /* === Xóa icon mũi tên trên mobile để giao diện gọn hơn === */ #Skylake-menu li.menu-item-has-children > a:after { content: none; /* Xóa icon trên mobile */ } } /* === Thiết lập chung cho menu GoldenAvenue === */ #GoldenAvenue-menu { list-style: none; /* Xóa dấu đầu dòng mặc định */ margin: 0; /* Xóa lề mặc định */ padding: 0; /* Xóa đệm mặc định */ display: flex; /* Sử dụng flexbox để xếp menu cấp 1 theo hàng ngang */ font-family: 'Arial', sans-serif; /* Font chữ hiện đại */ background-color: #ffffff; /* Màu nền trắng */ border-bottom: 1px solid #e5e5e5; /* Đường viền dưới nhẹ */ } /* === Thiết lập cho các mục menu cấp 1 === */ #GoldenAvenue-menu > li.menu-item { position: relative; /* Đặt vị trí tương đối để chứa menu con */ padding: 0 15px; /* Khoảng cách trái phải */ } /* === Thiết lập cho liên kết trong mục menu cấp 1 === */ #GoldenAvenue-menu > li.menu-item > a { display: block; /* Hiển thị dạng khối */ padding: 15px 10px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ tối */ text-decoration: none; /* Xóa gạch chân */ font-size: 16px; /* Kích thước chữ */ font-weight: 500; /* Độ đậm chữ */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu cấp 1 === */ #GoldenAvenue-menu > li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập chung cho menu con (tất cả các cấp) === */ #GoldenAvenue-menu .sub-menu { display: none; /* Ẩn menu con mặc định */ position: absolute; /* Đặt vị trí tuyệt đối */ top: 100%; /* Hiển thị ngay dưới mục cha */ left: 0; /* Căn trái với mục cha */ min-width: 220px; /* Chiều rộng tối thiểu */ background-color: #ffffff; /* Màu nền trắng */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */ border: 1px solid #e5e5e5; /* Viền nhẹ */ z-index: 1000; /* Đảm bảo menu con nằm trên các phần tử khác */ } /* === Hiển thị menu con khi hover vào mục cha === */ #GoldenAvenue-menu li.menu-item-has-children:hover > .sub-menu { display: block; /* Hiển thị menu con khi hover */ } /* === Thiết lập cho các mục trong menu con (tất cả các cấp) === */ #GoldenAvenue-menu .sub-menu li.menu-item { position: relative; /* Đặt vị trí tương đối để hỗ trợ menu con cấp sâu hơn */ list-style-type: none; } /* === Thiết lập cho liên kết trong menu con === */ #GoldenAvenue-menu .sub-menu li.menu-item a { display: block; /* Hiển thị dạng khối */ padding: 10px 15px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ */ font-size: 14px; /* Chữ nhỏ hơn cấp 1 */ text-decoration: none; /* Xóa gạch chân */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu con === */ #GoldenAvenue-menu .sub-menu li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập cho menu con cấp 3, 4, 5 === */ #GoldenAvenue-menu .sub-menu .sub-menu { top: 0; /* Hiển thị menu con cấp sâu hơn ở bên phải */ left: 100%; /* Căn trái với cạnh phải của menu cha */ } /* === Thêm padding trái tăng dần cho các cấp sâu hơn để dễ phân biệt === */ #GoldenAvenue-menu .sub-menu .sub-menu li.menu-item a { padding-left: 20px; /* Cấp 3 */ } #GoldenAvenue-menu.sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 4 */ } #GoldenAvenue-menu.sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 30px; /* Cấp 5 */ } /* === Thêm icon mũi tên cho mục có menu con (giống Flatsome) === */ #GoldenAvenue-menu li.menu-item-has-children > a:after { content: '\25B8'; /* Icon mũi tên phải (Unicode) */ font-size: 12px; /* Kích thước icon */ margin-left: 5px; /* Khoảng cách icon với chữ */ display: inline-block; /* Hiển thị inline với chữ */ transition: transform 0.3s ease; /* Hiệu ứng xoay icon */ } /* === Xoay icon khi hover để chỉ menu con === */ #GoldenAvenue-menu li.menu-item-has-children:hover > a:after { transform: rotate(90deg); /* Xoay icon 90 độ khi hover */ } /* === Responsive: Điều chỉnh menu cho màn hình nhỏ (dưới 768px) === */ @media (max-width: 768px) { #GoldenAvenue-menu{ flex-direction: column; /* Chuyển menu thành cột dọc */ background-color: #f9f9f9; /* Nền nhạt hơn cho mobile */ } #GoldenAvenue-menu > li.menu-item { padding: 0; /* Xóa padding trái phải */ } #GoldenAvenue-menu.t3tcode-menu > li.menu-item > a { padding: 12px 15px; /* Giảm padding cho mobile */ border-bottom: 1px solid #e5e5e5; /* Viền dưới cho từng mục */ } /* === Menu con trên mobile === */ #GoldenAvenue-menu .sub-menu { position: static; /* Chuyển về vị trí tĩnh */ box-shadow: none; /* Xóa đổ bóng */ border: none; /* Xóa viền */ background-color: #f1f1f1; /* Nền nhạt hơn */ min-width: 100%; /* Chiếm toàn bộ chiều rộng */ } #GoldenAvenue-menu li.menu-item-has-children:hover > .sub-menu { display: none; /* Ẩn menu con khi hover trên mobile */ } /* === Hiển thị menu con khi có class active (cần JS để toggle) === */ #GoldenAvenue-menu li.menu-item-has-children.active > .sub-menu { display: block; /* Hiển thị menu con khi active */ } /* === Điều chỉnh padding cho các cấp menu con trên mobile === */ #GoldenAvenue-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 2 */ } #GoldenAvenue-menu .sub-menu .sub-menu li.menu-item a { padding-left: 35px; /* Cấp 3 */ } #GoldenAvenue-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 45px; /* Cấp 4 */ } #GoldenAvenue-menu .sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 55px; /* Cấp 5 */ } /* === Xóa icon mũi tên trên mobile để giao diện gọn hơn === */ #GoldenAvenue-menu li.menu-item-has-children > a:after { content: none; /* Xóa icon trên mobile */ } } /* === Thiết lập chung cho menu OceanPark3 === */ #OceanPark3-menu { list-style: none; /* Xóa dấu đầu dòng mặc định */ margin: 0; /* Xóa lề mặc định */ padding: 0; /* Xóa đệm mặc định */ display: flex; /* Sử dụng flexbox để xếp menu cấp 1 theo hàng ngang */ font-family: 'Arial', sans-serif; /* Font chữ hiện đại */ background-color: #ffffff; /* Màu nền trắng */ border-bottom: 1px solid #e5e5e5; /* Đường viền dưới nhẹ */ } /* === Thiết lập cho các mục menu cấp 1 === */ #OceanPark3-menu > li.menu-item { position: relative; /* Đặt vị trí tương đối để chứa menu con */ padding: 0 15px; /* Khoảng cách trái phải */ } /* === Thiết lập cho liên kết trong mục menu cấp 1 === */ #OceanPark3-menu > li.menu-item > a { display: block; /* Hiển thị dạng khối */ padding: 15px 10px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ tối */ text-decoration: none; /* Xóa gạch chân */ font-size: 16px; /* Kích thước chữ */ font-weight: 500; /* Độ đậm chữ */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu cấp 1 === */ #OceanPark3-menu > li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập chung cho menu con (tất cả các cấp) === */ #OceanPark3-menu .sub-menu { display: none; /* Ẩn menu con mặc định */ position: absolute; /* Đặt vị trí tuyệt đối */ top: 100%; /* Hiển thị ngay dưới mục cha */ left: 0; /* Căn trái với mục cha */ min-width: 220px; /* Chiều rộng tối thiểu */ background-color: #ffffff; /* Màu nền trắng */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */ border: 1px solid #e5e5e5; /* Viền nhẹ */ z-index: 1000; /* Đảm bảo menu con nằm trên các phần tử khác */ } /* === Hiển thị menu con khi hover vào mục cha === */ #OceanPark3-menu li.menu-item-has-children:hover > .sub-menu { display: block; /* Hiển thị menu con khi hover */ } /* === Thiết lập cho các mục trong menu con (tất cả các cấp) === */ #OceanPark3-menu .sub-menu li.menu-item { position: relative; /* Đặt vị trí tương đối để hỗ trợ menu con cấp sâu hơn */ list-style-type: none; } /* === Thiết lập cho liên kết trong menu con === */ #OceanPark3-menu .sub-menu li.menu-item a { display: block; /* Hiển thị dạng khối */ padding: 10px 15px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ */ font-size: 14px; /* Chữ nhỏ hơn cấp 1 */ text-decoration: none; /* Xóa gạch chân */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu con === */ #OceanPark3-menu .sub-menu li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập cho menu con cấp 3, 4, 5 === */ #OceanPark3-menu .sub-menu .sub-menu { top: 0; /* Hiển thị menu con cấp sâu hơn ở bên phải */ left: 100%; /* Căn trái với cạnh phải của menu cha */ } /* === Thêm padding trái tăng dần cho các cấp sâu hơn để dễ phân biệt === */ #OceanPark3-menu .sub-menu .sub-menu li.menu-item a { padding-left: 20px; /* Cấp 3 */ } #OceanPark3-menu.sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 4 */ } #OceanPark3-menu.sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 30px; /* Cấp 5 */ } /* === Thêm icon mũi tên cho mục có menu con (giống Flatsome) === */ #OceanPark3-menu li.menu-item-has-children > a:after { content: '\25B8'; /* Icon mũi tên phải (Unicode) */ font-size: 12px; /* Kích thước icon */ margin-left: 5px; /* Khoảng cách icon với chữ */ display: inline-block; /* Hiển thị inline với chữ */ transition: transform 0.3s ease; /* Hiệu ứng xoay icon */ } /* === Xoay icon khi hover để chỉ menu con === */ #OceanPark3-menu li.menu-item-has-children:hover > a:after { transform: rotate(90deg); /* Xoay icon 90 độ khi hover */ } /* === Responsive: Điều chỉnh menu cho màn hình nhỏ (dưới 768px) === */ @media (max-width: 768px) { #OceanPark3-menu{ flex-direction: column; /* Chuyển menu thành cột dọc */ background-color: #f9f9f9; /* Nền nhạt hơn cho mobile */ } #OceanPark3-menu > li.menu-item { padding: 0; /* Xóa padding trái phải */ } #OceanPark3-menu.t3tcode-menu > li.menu-item > a { padding: 12px 15px; /* Giảm padding cho mobile */ border-bottom: 1px solid #e5e5e5; /* Viền dưới cho từng mục */ } /* === Menu con trên mobile === */ #OceanPark3-menu .sub-menu { position: static; /* Chuyển về vị trí tĩnh */ box-shadow: none; /* Xóa đổ bóng */ border: none; /* Xóa viền */ background-color: #f1f1f1; /* Nền nhạt hơn */ min-width: 100%; /* Chiếm toàn bộ chiều rộng */ } #OceanPark3-menu li.menu-item-has-children:hover > .sub-menu { display: none; /* Ẩn menu con khi hover trên mobile */ } /* === Hiển thị menu con khi có class active (cần JS để toggle) === */ #OceanPark3-menu li.menu-item-has-children.active > .sub-menu { display: block; /* Hiển thị menu con khi active */ } /* === Điều chỉnh padding cho các cấp menu con trên mobile === */ #OceanPark3-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 2 */ } #OceanPark3-menu .sub-menu .sub-menu li.menu-item a { padding-left: 35px; /* Cấp 3 */ } #OceanPark3-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 45px; /* Cấp 4 */ } #OceanPark3-menu .sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 55px; /* Cấp 5 */ } /* === Xóa icon mũi tên trên mobile để giao diện gọn hơn === */ #OceanPark3-menu li.menu-item-has-children > a:after { content: none; /* Xóa icon trên mobile */ } } /* === Thiết lập chung cho menu riversidetheharmony === */ #riversidetheharmony-menu { list-style: none; /* Xóa dấu đầu dòng mặc định */ margin: 0; /* Xóa lề mặc định */ padding: 0; /* Xóa đệm mặc định */ display: flex; /* Sử dụng flexbox để xếp menu cấp 1 theo hàng ngang */ font-family: 'Arial', sans-serif; /* Font chữ hiện đại */ background-color: #ffffff; /* Màu nền trắng */ border-bottom: 1px solid #e5e5e5; /* Đường viền dưới nhẹ */ } /* === Thiết lập cho các mục menu cấp 1 === */ #riversidetheharmony-menu > li.menu-item { position: relative; /* Đặt vị trí tương đối để chứa menu con */ padding: 0 15px; /* Khoảng cách trái phải */ } /* === Thiết lập cho liên kết trong mục menu cấp 1 === */ #riversidetheharmony-menu > li.menu-item > a { display: block; /* Hiển thị dạng khối */ padding: 15px 10px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ tối */ text-decoration: none; /* Xóa gạch chân */ font-size: 16px; /* Kích thước chữ */ font-weight: 500; /* Độ đậm chữ */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu cấp 1 === */ #riversidetheharmony-menu > li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập chung cho menu con (tất cả các cấp) === */ #riversidetheharmony-menu .sub-menu { display: none; /* Ẩn menu con mặc định */ position: absolute; /* Đặt vị trí tuyệt đối */ top: 100%; /* Hiển thị ngay dưới mục cha */ left: 0; /* Căn trái với mục cha */ min-width: 220px; /* Chiều rộng tối thiểu */ background-color: #ffffff; /* Màu nền trắng */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */ border: 1px solid #e5e5e5; /* Viền nhẹ */ z-index: 1000; /* Đảm bảo menu con nằm trên các phần tử khác */ } /* === Hiển thị menu con khi hover vào mục cha === */ #riversidetheharmony-menu li.menu-item-has-children:hover > .sub-menu { display: block; /* Hiển thị menu con khi hover */ } /* === Thiết lập cho các mục trong menu con (tất cả các cấp) === */ #riversidetheharmony-menu .sub-menu li.menu-item { position: relative; /* Đặt vị trí tương đối để hỗ trợ menu con cấp sâu hơn */ list-style-type: none; } /* === Thiết lập cho liên kết trong menu con === */ #riversidetheharmony-menu .sub-menu li.menu-item a { display: block; /* Hiển thị dạng khối */ padding: 10px 15px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ */ font-size: 14px; /* Chữ nhỏ hơn cấp 1 */ text-decoration: none; /* Xóa gạch chân */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu con === */ #riversidetheharmony-menu .sub-menu li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập cho menu con cấp 3, 4, 5 === */ #riversidetheharmony-menu .sub-menu .sub-menu { top: 0; /* Hiển thị menu con cấp sâu hơn ở bên phải */ left: 100%; /* Căn trái với cạnh phải của menu cha */ } /* === Thêm padding trái tăng dần cho các cấp sâu hơn để dễ phân biệt === */ #riversidetheharmony-menu .sub-menu .sub-menu li.menu-item a { padding-left: 20px; /* Cấp 3 */ } #riversidetheharmony-menu.sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 4 */ } #riversidetheharmony-menu.sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 30px; /* Cấp 5 */ } /* === Thêm icon mũi tên cho mục có menu con (giống Flatsome) === */ #riversidetheharmony-menu li.menu-item-has-children > a:after { content: '\25B8'; /* Icon mũi tên phải (Unicode) */ font-size: 12px; /* Kích thước icon */ margin-left: 5px; /* Khoảng cách icon với chữ */ display: inline-block; /* Hiển thị inline với chữ */ transition: transform 0.3s ease; /* Hiệu ứng xoay icon */ } /* === Xoay icon khi hover để chỉ menu con === */ #riversidetheharmony-menu li.menu-item-has-children:hover > a:after { transform: rotate(90deg); /* Xoay icon 90 độ khi hover */ } /* === Responsive: Điều chỉnh menu cho màn hình nhỏ (dưới 768px) === */ @media (max-width: 768px) { #riversidetheharmony-menu{ flex-direction: column; /* Chuyển menu thành cột dọc */ background-color: #f9f9f9; /* Nền nhạt hơn cho mobile */ } #riversidetheharmony-menu > li.menu-item { padding: 0; /* Xóa padding trái phải */ } #riversidetheharmony-menu.t3tcode-menu > li.menu-item > a { padding: 12px 15px; /* Giảm padding cho mobile */ border-bottom: 1px solid #e5e5e5; /* Viền dưới cho từng mục */ } /* === Menu con trên mobile === */ #riversidetheharmony-menu .sub-menu { position: static; /* Chuyển về vị trí tĩnh */ box-shadow: none; /* Xóa đổ bóng */ border: none; /* Xóa viền */ background-color: #f1f1f1; /* Nền nhạt hơn */ min-width: 100%; /* Chiếm toàn bộ chiều rộng */ } #riversidetheharmony-menu li.menu-item-has-children:hover > .sub-menu { display: none; /* Ẩn menu con khi hover trên mobile */ } /* === Hiển thị menu con khi có class active (cần JS để toggle) === */ #riversidetheharmony-menu li.menu-item-has-children.active > .sub-menu { display: block; /* Hiển thị menu con khi active */ } /* === Điều chỉnh padding cho các cấp menu con trên mobile === */ #riversidetheharmony-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 2 */ } #riversidetheharmony-menu .sub-menu .sub-menu li.menu-item a { padding-left: 35px; /* Cấp 3 */ } #riversidetheharmony-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 45px; /* Cấp 4 */ } #riversidetheharmony-menu .sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 55px; /* Cấp 5 */ } /* === Xóa icon mũi tên trên mobile để giao diện gọn hơn === */ #riversidetheharmony-menu li.menu-item-has-children > a:after { content: none; /* Xóa icon trên mobile */ } } /* === Thiết lập chung cho menu SmartCity === */ #SmartCity-menu { list-style: none; /* Xóa dấu đầu dòng mặc định */ margin: 0; /* Xóa lề mặc định */ padding: 0; /* Xóa đệm mặc định */ display: flex; /* Sử dụng flexbox để xếp menu cấp 1 theo hàng ngang */ font-family: 'Arial', sans-serif; /* Font chữ hiện đại */ background-color: #ffffff; /* Màu nền trắng */ border-bottom: 1px solid #e5e5e5; /* Đường viền dưới nhẹ */ } /* === Thiết lập cho các mục menu cấp 1 === */ #SmartCity-menu > li.menu-item { position: relative; /* Đặt vị trí tương đối để chứa menu con */ padding: 0 15px; /* Khoảng cách trái phải */ } /* === Thiết lập cho liên kết trong mục menu cấp 1 === */ #SmartCity-menu > li.menu-item > a { display: block; /* Hiển thị dạng khối */ padding: 15px 10px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ tối */ text-decoration: none; /* Xóa gạch chân */ font-size: 16px; /* Kích thước chữ */ font-weight: 500; /* Độ đậm chữ */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu cấp 1 === */ #SmartCity-menu > li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập chung cho menu con (tất cả các cấp) === */ #SmartCity-menu .sub-menu { display: none; /* Ẩn menu con mặc định */ position: absolute; /* Đặt vị trí tuyệt đối */ top: 100%; /* Hiển thị ngay dưới mục cha */ left: 0; /* Căn trái với mục cha */ min-width: 220px; /* Chiều rộng tối thiểu */ background-color: #ffffff; /* Màu nền trắng */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */ border: 1px solid #e5e5e5; /* Viền nhẹ */ z-index: 1000; /* Đảm bảo menu con nằm trên các phần tử khác */ } /* === Hiển thị menu con khi hover vào mục cha === */ #SmartCity-menu li.menu-item-has-children:hover > .sub-menu { display: block; /* Hiển thị menu con khi hover */ } /* === Thiết lập cho các mục trong menu con (tất cả các cấp) === */ #SmartCity-menu .sub-menu li.menu-item { position: relative; /* Đặt vị trí tương đối để hỗ trợ menu con cấp sâu hơn */ list-style-type: none; } /* === Thiết lập cho liên kết trong menu con === */ #SmartCity-menu .sub-menu li.menu-item a { display: block; /* Hiển thị dạng khối */ padding: 10px 15px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ */ font-size: 14px; /* Chữ nhỏ hơn cấp 1 */ text-decoration: none; /* Xóa gạch chân */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu con === */ #SmartCity-menu .sub-menu li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập cho menu con cấp 3, 4, 5 === */ #SmartCity-menu .sub-menu .sub-menu { top: 0; /* Hiển thị menu con cấp sâu hơn ở bên phải */ left: 100%; /* Căn trái với cạnh phải của menu cha */ } /* === Thêm padding trái tăng dần cho các cấp sâu hơn để dễ phân biệt === */ #SmartCity-menu .sub-menu .sub-menu li.menu-item a { padding-left: 20px; /* Cấp 3 */ } #SmartCity-menu.sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 4 */ } #SmartCity-menu.sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 30px; /* Cấp 5 */ } /* === Thêm icon mũi tên cho mục có menu con (giống Flatsome) === */ #SmartCity-menu li.menu-item-has-children > a:after { content: '\25B8'; /* Icon mũi tên phải (Unicode) */ font-size: 12px; /* Kích thước icon */ margin-left: 5px; /* Khoảng cách icon với chữ */ display: inline-block; /* Hiển thị inline với chữ */ transition: transform 0.3s ease; /* Hiệu ứng xoay icon */ } /* === Xoay icon khi hover để chỉ menu con === */ #SmartCity-menu li.menu-item-has-children:hover > a:after { transform: rotate(90deg); /* Xoay icon 90 độ khi hover */ } /* === Responsive: Điều chỉnh menu cho màn hình nhỏ (dưới 768px) === */ @media (max-width: 768px) { #SmartCity-menu{ flex-direction: column; /* Chuyển menu thành cột dọc */ background-color: #f9f9f9; /* Nền nhạt hơn cho mobile */ } #SmartCity-menu > li.menu-item { padding: 0; /* Xóa padding trái phải */ } #SmartCity-menu.t3tcode-menu > li.menu-item > a { padding: 12px 15px; /* Giảm padding cho mobile */ border-bottom: 1px solid #e5e5e5; /* Viền dưới cho từng mục */ } /* === Menu con trên mobile === */ #SmartCity-menu .sub-menu { position: static; /* Chuyển về vị trí tĩnh */ box-shadow: none; /* Xóa đổ bóng */ border: none; /* Xóa viền */ background-color: #f1f1f1; /* Nền nhạt hơn */ min-width: 100%; /* Chiếm toàn bộ chiều rộng */ } #SmartCity-menu li.menu-item-has-children:hover > .sub-menu { display: none; /* Ẩn menu con khi hover trên mobile */ } /* === Hiển thị menu con khi có class active (cần JS để toggle) === */ #SmartCity-menu li.menu-item-has-children.active > .sub-menu { display: block; /* Hiển thị menu con khi active */ } /* === Điều chỉnh padding cho các cấp menu con trên mobile === */ #SmartCity-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 2 */ } #SmartCity-menu .sub-menu .sub-menu li.menu-item a { padding-left: 35px; /* Cấp 3 */ } #SmartCity-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 45px; /* Cấp 4 */ } #SmartCity-menu .sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 55px; /* Cấp 5 */ } /* === Xóa icon mũi tên trên mobile để giao diện gọn hơn === */ #SmartCity-menu li.menu-item-has-children > a:after { content: none; /* Xóa icon trên mobile */ } } /* === Thiết lập chung cho menu OceanPark === */ #OceanPark-menu { list-style: none; /* Xóa dấu đầu dòng mặc định */ margin: 0; /* Xóa lề mặc định */ padding: 0; /* Xóa đệm mặc định */ display: flex; /* Sử dụng flexbox để xếp menu cấp 1 theo hàng ngang */ font-family: 'Arial', sans-serif; /* Font chữ hiện đại */ background-color: #ffffff; /* Màu nền trắng */ border-bottom: 1px solid #e5e5e5; /* Đường viền dưới nhẹ */ } /* === Thiết lập cho các mục menu cấp 1 === */ #OceanPark-menu > li.menu-item { position: relative; /* Đặt vị trí tương đối để chứa menu con */ padding: 0 15px; /* Khoảng cách trái phải */ } /* === Thiết lập cho liên kết trong mục menu cấp 1 === */ #OceanPark-menu > li.menu-item > a { display: block; /* Hiển thị dạng khối */ padding: 15px 10px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ tối */ text-decoration: none; /* Xóa gạch chân */ font-size: 16px; /* Kích thước chữ */ font-weight: 500; /* Độ đậm chữ */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu cấp 1 === */ #OceanPark-menu > li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập chung cho menu con (tất cả các cấp) === */ #OceanPark-menu .sub-menu { display: none; /* Ẩn menu con mặc định */ position: absolute; /* Đặt vị trí tuyệt đối */ top: 100%; /* Hiển thị ngay dưới mục cha */ left: 0; /* Căn trái với mục cha */ min-width: 220px; /* Chiều rộng tối thiểu */ background-color: #ffffff; /* Màu nền trắng */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */ border: 1px solid #e5e5e5; /* Viền nhẹ */ z-index: 1000; /* Đảm bảo menu con nằm trên các phần tử khác */ } /* === Hiển thị menu con khi hover vào mục cha === */ #OceanPark-menu li.menu-item-has-children:hover > .sub-menu { display: block; /* Hiển thị menu con khi hover */ } /* === Thiết lập cho các mục trong menu con (tất cả các cấp) === */ #OceanPark-menu .sub-menu li.menu-item { position: relative; /* Đặt vị trí tương đối để hỗ trợ menu con cấp sâu hơn */ list-style-type: none; } /* === Thiết lập cho liên kết trong menu con === */ #OceanPark-menu .sub-menu li.menu-item a { display: block; /* Hiển thị dạng khối */ padding: 10px 15px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ */ font-size: 14px; /* Chữ nhỏ hơn cấp 1 */ text-decoration: none; /* Xóa gạch chân */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu con === */ #OceanPark-menu .sub-menu li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập cho menu con cấp 3, 4, 5 === */ #OceanPark-menu .sub-menu .sub-menu { top: 0; /* Hiển thị menu con cấp sâu hơn ở bên phải */ left: 100%; /* Căn trái với cạnh phải của menu cha */ } /* === Thêm padding trái tăng dần cho các cấp sâu hơn để dễ phân biệt === */ #OceanPark-menu .sub-menu .sub-menu li.menu-item a { padding-left: 20px; /* Cấp 3 */ } #OceanPark-menu.sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 4 */ } #OceanPark-menu.sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 30px; /* Cấp 5 */ } /* === Thêm icon mũi tên cho mục có menu con (giống Flatsome) === */ #OceanPark-menu li.menu-item-has-children > a:after { content: '\25B8'; /* Icon mũi tên phải (Unicode) */ font-size: 12px; /* Kích thước icon */ margin-left: 5px; /* Khoảng cách icon với chữ */ display: inline-block; /* Hiển thị inline với chữ */ transition: transform 0.3s ease; /* Hiệu ứng xoay icon */ } /* === Xoay icon khi hover để chỉ menu con === */ #OceanPark-menu li.menu-item-has-children:hover > a:after { transform: rotate(90deg); /* Xoay icon 90 độ khi hover */ } /* === Responsive: Điều chỉnh menu cho màn hình nhỏ (dưới 768px) === */ @media (max-width: 768px) { #OceanPark-menu{ flex-direction: column; /* Chuyển menu thành cột dọc */ background-color: #f9f9f9; /* Nền nhạt hơn cho mobile */ } #OceanPark-menu > li.menu-item { padding: 0; /* Xóa padding trái phải */ } #OceanPark-menu.t3tcode-menu > li.menu-item > a { padding: 12px 15px; /* Giảm padding cho mobile */ border-bottom: 1px solid #e5e5e5; /* Viền dưới cho từng mục */ } /* === Menu con trên mobile === */ #OceanPark-menu .sub-menu { position: static; /* Chuyển về vị trí tĩnh */ box-shadow: none; /* Xóa đổ bóng */ border: none; /* Xóa viền */ background-color: #f1f1f1; /* Nền nhạt hơn */ min-width: 100%; /* Chiếm toàn bộ chiều rộng */ } #OceanPark-menu li.menu-item-has-children:hover > .sub-menu { display: none; /* Ẩn menu con khi hover trên mobile */ } /* === Hiển thị menu con khi có class active (cần JS để toggle) === */ #OceanPark-menu li.menu-item-has-children.active > .sub-menu { display: block; /* Hiển thị menu con khi active */ } /* === Điều chỉnh padding cho các cấp menu con trên mobile === */ #OceanPark-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 2 */ } #OceanPark-menu .sub-menu .sub-menu li.menu-item a { padding-left: 35px; /* Cấp 3 */ } #OceanPark-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 45px; /* Cấp 4 */ } #OceanPark-menu .sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 55px; /* Cấp 5 */ } /* === Xóa icon mũi tên trên mobile để giao diện gọn hơn === */ #OceanPark-menu li.menu-item-has-children > a:after { content: none; /* Xóa icon trên mobile */ } } /* === Thiết lập chung cho menu OceanPark2 === */ #OceanPark2-menu { list-style: none; /* Xóa dấu đầu dòng mặc định */ margin: 0; /* Xóa lề mặc định */ padding: 0; /* Xóa đệm mặc định */ display: flex; /* Sử dụng flexbox để xếp menu cấp 1 theo hàng ngang */ font-family: 'Arial', sans-serif; /* Font chữ hiện đại */ background-color: #ffffff; /* Màu nền trắng */ border-bottom: 1px solid #e5e5e5; /* Đường viền dưới nhẹ */ } /* === Thiết lập cho các mục menu cấp 1 === */ #OceanPark2-menu > li.menu-item { position: relative; /* Đặt vị trí tương đối để chứa menu con */ padding: 0 15px; /* Khoảng cách trái phải */ } /* === Thiết lập cho liên kết trong mục menu cấp 1 === */ #OceanPark2-menu > li.menu-item > a { display: block; /* Hiển thị dạng khối */ padding: 15px 10px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ tối */ text-decoration: none; /* Xóa gạch chân */ font-size: 16px; /* Kích thước chữ */ font-weight: 500; /* Độ đậm chữ */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu cấp 1 === */ #OceanPark2-menu > li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập chung cho menu con (tất cả các cấp) === */ #OceanPark2-menu .sub-menu { display: none; /* Ẩn menu con mặc định */ position: absolute; /* Đặt vị trí tuyệt đối */ top: 100%; /* Hiển thị ngay dưới mục cha */ left: 0; /* Căn trái với mục cha */ min-width: 220px; /* Chiều rộng tối thiểu */ background-color: #ffffff; /* Màu nền trắng */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */ border: 1px solid #e5e5e5; /* Viền nhẹ */ z-index: 1000; /* Đảm bảo menu con nằm trên các phần tử khác */ } /* === Hiển thị menu con khi hover vào mục cha === */ #OceanPark2-menu li.menu-item-has-children:hover > .sub-menu { display: block; /* Hiển thị menu con khi hover */ } /* === Thiết lập cho các mục trong menu con (tất cả các cấp) === */ #OceanPark2-menu .sub-menu li.menu-item { position: relative; /* Đặt vị trí tương đối để hỗ trợ menu con cấp sâu hơn */ list-style-type: none; } /* === Thiết lập cho liên kết trong menu con === */ #OceanPark2-menu .sub-menu li.menu-item a { display: block; /* Hiển thị dạng khối */ padding: 10px 15px; /* Khoảng cách bên trong */ color: #333333; /* Màu chữ */ font-size: 14px; /* Chữ nhỏ hơn cấp 1 */ text-decoration: none; /* Xóa gạch chân */ transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */ } /* === Hiệu ứng hover cho mục menu con === */ #OceanPark2-menu .sub-menu li.menu-item:hover > a { color: #0073aa; /* Màu chữ khi hover */ background-color: #f5f5f5; /* Nền nhạt khi hover */ } /* === Thiết lập cho menu con cấp 3, 4, 5 === */ #OceanPark2-menu .sub-menu .sub-menu { top: 0; /* Hiển thị menu con cấp sâu hơn ở bên phải */ left: 100%; /* Căn trái với cạnh phải của menu cha */ } /* === Thêm padding trái tăng dần cho các cấp sâu hơn để dễ phân biệt === */ #OceanPark2-menu .sub-menu .sub-menu li.menu-item a { padding-left: 20px; /* Cấp 3 */ } #OceanPark2-menu.sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 4 */ } #OceanPark2-menu.sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 30px; /* Cấp 5 */ } /* === Thêm icon mũi tên cho mục có menu con (giống Flatsome) === */ #OceanPark2-menu li.menu-item-has-children > a:after { content: '\25B8'; /* Icon mũi tên phải (Unicode) */ font-size: 12px; /* Kích thước icon */ margin-left: 5px; /* Khoảng cách icon với chữ */ display: inline-block; /* Hiển thị inline với chữ */ transition: transform 0.3s ease; /* Hiệu ứng xoay icon */ } /* === Xoay icon khi hover để chỉ menu con === */ #OceanPark2-menu li.menu-item-has-children:hover > a:after { transform: rotate(90deg); /* Xoay icon 90 độ khi hover */ } /* === Responsive: Điều chỉnh menu cho màn hình nhỏ (dưới 768px) === */ @media (max-width: 768px) { #OceanPark2-menu{ flex-direction: column; /* Chuyển menu thành cột dọc */ background-color: #f9f9f9; /* Nền nhạt hơn cho mobile */ } #OceanPark2-menu > li.menu-item { padding: 0; /* Xóa padding trái phải */ } #OceanPark2-menu.t3tcode-menu > li.menu-item > a { padding: 12px 15px; /* Giảm padding cho mobile */ border-bottom: 1px solid #e5e5e5; /* Viền dưới cho từng mục */ } /* === Menu con trên mobile === */ #OceanPark2-menu .sub-menu { position: static; /* Chuyển về vị trí tĩnh */ box-shadow: none; /* Xóa đổ bóng */ border: none; /* Xóa viền */ background-color: #f1f1f1; /* Nền nhạt hơn */ min-width: 100%; /* Chiếm toàn bộ chiều rộng */ } #OceanPark2-menu li.menu-item-has-children:hover > .sub-menu { display: none; /* Ẩn menu con khi hover trên mobile */ } /* === Hiển thị menu con khi có class active (cần JS để toggle) === */ #OceanPark2-menu li.menu-item-has-children.active > .sub-menu { display: block; /* Hiển thị menu con khi active */ } /* === Điều chỉnh padding cho các cấp menu con trên mobile === */ #OceanPark2-menu .sub-menu li.menu-item a { padding-left: 25px; /* Cấp 2 */ } #OceanPark2-menu .sub-menu .sub-menu li.menu-item a { padding-left: 35px; /* Cấp 3 */ } #OceanPark2-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 45px; /* Cấp 4 */ } #OceanPark2-menu .sub-menu .sub-menu .sub-menu .sub-menu li.menu-item a { padding-left: 55px; /* Cấp 5 */ } /* === Xóa icon mũi tên trên mobile để giao diện gọn hơn === */ #OceanPark2-menu li.menu-item-has-children > a:after { content: none; /* Xóa icon trên mobile */ } } /*************** ADD CUSTOM CSS HERE. ***************/ /* @media (min-width: 850px){ #t3tcode-menu { background-color:white; color:black; text-align:center; height:10%; } #t3tcode-menu ul { list-style-type: none; margin: 0; padding: 0; text-align:center; } #t3tcode-menu li { display:inline; position: relative; } #t3tcode-menu li a { display: table-cell; color: black; text-align: center; padding: 14px 16px; text-decoration: none; vertical-align: middle; } #t3tcode-menu li a:hover { background-color: #396b2b; } /* #t3tcode-menu ul.sub-menu { position: absolute; background: #fff; padding: 15px 0px; width:auto; display: none !important; } #t3tcode-menu ul.sub-menu a { white-space: normal; margin: 0; padding: 10px 15px; border: 0; font-weight: 400; } #t3tcode-menu li:hover ul.sub-menu { display: block !important; } #t3tcode-menu ul.sub-menu ul.sub-menu { position: absolute; left: 0; background: #fff; padding: 0; } #WonderCity-menu { background-color:white; color:black; text-align:center; height:10%; } #WonderCity-menu ul { list-style-type: none; margin: 0; padding: 0; text-align:center; } #WonderCity-menu li { display:inline; position: relative; } #WonderCity-menu li a { display: table-cell; color: black; text-align: center; padding: 14px 16px; text-decoration: none; vertical-align: middle; } #WonderCity-menu li a:hover { background-color: #396b2b; } #WonderCity-menu ul.sub-menu { position: absolute; background: #fff; padding: 15px 0px; width:auto; display: none !important; } #WonderCity-menu ul.sub-menu a { white-space: normal; margin: 0; padding: 10px 15px; border: 0; font-weight: 400; } #WonderCity-menu li:hover ul.sub-menu { display: block !important; } #WonderCity-menu ul.sub-menu ul.sub-menu { position: absolute; left: 0; background: #fff; padding: 0; }*/ @media only screen and (max-width: 48em) { /*************** ADD MOBILE ONLY CSS HERE ***************/ }