/* ========================================================================== TRAWISE — MENU LỚN (phương án J) -------------------------------------------------------------------------- Chỉ được nạp khi công tắc ở Menu lớn → Cài đặt đang bật, hoặc khi đang xem trước. Tắt công tắc là file này không có mặt trên trang. Mọi thứ nằm trong .tw-mm-it (mục menu có panel) nên không đụng tới các mục menu khác và không đụng tới menu trượt trên điện thoại. ========================================================================== */ .tw-mm-it { --brand: var(--tw-s-brand, #0042e8); --brand-d: var(--tw-s-brandd, #0034bd); --tint: var(--tw-s-tint, #eaf0ff); --ink: var(--tw-s-ink, #030712); --ink2: var(--tw-s-ink2, #4b5163); --ink3: var(--tw-s-ink3, #858b9c); --line: var(--tw-s-line, #e2e6ee); --mist: #eef1f7; --f: var(--tw-s-f, "Be Vietnam Pro", system-ui, -apple-system, sans-serif); --fh: var(--tw-s-fh, var(--f)); --ease: cubic-bezier(.22, .61, .36, 1); position: relative; } /* Mũi tên cạnh tên mục. Flatsome vốn có mũi tên riêng; cái này chỉ hiện khi menu lớn đang bật, và xoay khi panel mở. */ .tw-mm-it .tw-mm-chev { width: 10px; height: 10px; margin-left: 5px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s var(--ease); } .tw-mm-it.tw-mm-open .tw-mm-chev { transform: rotate(180deg); } /* Flatsome tự dựng dropdown của nó cho mục có con. Panel của tôi thay thế nó, nên phải chặn cái cũ lại — nếu không hai lớp cùng bung ra chồng lên nhau. */ .tw-mm-it > .nav-dropdown, .tw-mm-it > ul.sub-menu:not(.tw-mm-keep) { display: none !important; } /* ========================================================================== PANEL ========================================================================== */ .tw-mm-panel { position: absolute; left: 0; top: 100%; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(3, 7, 18, .28); font-family: var(--f); text-align: left; opacity: 0; visibility: hidden; /* TRƯỢT XUỐNG, KHÔNG TRƯỢT LÊN. Trượt lên nghĩa là lúc bung ra panel nhô cao hơn vị trí cuối và đè lên chính hàng chữ menu. Con trỏ đang ở dải đó bỗng nằm trên panel thay vì trên chữ; panel lại trải hết bề ngang nên che luôn chữ của mọi mục khác. Thứ nằm dưới con trỏ đổi liên tục theo nhịp hiệu ứng, kéo theo mở–đóng không dứt. Đo trên trình duyệt ở bản thử: rê qua lại vài lần ở dải 5px phía trên đường gạch dưới sinh ra 67 lần mở/đóng liên tiếp, tự lặp vô hạn. Trượt xuống thì panel không bao giờ chạm tới hàng chữ. */ transform: translateY(6px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; z-index: 40; /* Cắt gọn phần nền tràn của cột chiến dịch, xem .tw-mm-promo::before. */ overflow: hidden; cursor: default; /* PANEL ĐANG TẮT DẦN KHÔNG ĐƯỢC ĂN CHUỘT. visibility có mặt trong danh sách transition ở trên, mà visibility nội suy theo kiểu rời rạc: đi từ visible sang hidden thì nó GIỮ NGUYÊN visible suốt 220ms rồi mới lật. Nghĩa là trong toàn bộ thời gian mờ dần, panel vẫn nằm trên cùng và vẫn nhận sự kiện chuột. Panel lại nằm bên trong chính
  • , nên t.closest() ở tw-megamenu.js vẫn khớp — đưa con trỏ xuyên qua vùng panel đang mờ dần là menu bung trở lại. Đây đúng là cảnh người dùng mô tả: rê ra cho nó đóng, đưa chuột lên thao tác với nội dung trang thì nó hiện lại chắn đường. Tắt pointer-events lúc chưa mở thì con trỏ đi thẳng xuống nội dung bên dưới — vốn là thứ người dùng đang nhắm tới. Không dùng cách rút visibility khỏi transition: làm vậy panel biến mất phựt một cái ngay khi bắt đầu mờ, mất luôn hiệu ứng. */ pointer-events: none; } .tw-mm-it.tw-mm-open .tw-mm-panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } .tw-mm-in { display: grid; grid-template-columns: minmax(0, 1fr) 340px; max-width: 1440px; margin: 0 auto; } .tw-mm-main { padding: 34px 40px 38px; min-width: 0; } /* -------------------------------------------------------------------------- VÌ SAO MỌI QUY TẮC CHO THẺ

    ĐỀU CÓ TIỀN TỐ .tw-mm-panel Flatsome có một dòng: .nav p { margin: 0; padding-bottom: 0 } Panel nằm trong