/* ========================================================================== DROPDOWN TỰ DỰNG — CSS đi kèm `js/dropdown.js` -------------------------------------------------------------------------- ☠️ FILE RIÊNG, KHÔNG nhét lại vào style.css hay portal.css: hai trang dùng dropdown (`tool.html` nạp style.css · `members.html` nạp portal.css) không chia sẻ file CSS nào. Trước 18/08/2026 khối này nằm trong style.css nên trang Thành viên hiện MỘT LÚC HAI ô chọn — nút tự dựng + thật vẫn nằm đây để core.js/main.js truy vấn được — chỉ ẩn về mặt nhìn */ .dd .dd-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } .dd-btn { width: 100%; display: flex; align-items: center; gap: 8px; background-color: var(--surface); border: 1px solid var(--border-strong); color: var(--text); padding: 8px 10px; border-radius: var(--r-sm); font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.45; cursor: pointer; text-align: left; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .dd-btn:hover { border-color: var(--brand-300); } .dd-btn:focus-visible, .dd-btn[aria-expanded="true"] { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); } .dd-nhan { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dd-mui { flex: none; color: var(--text-2); transition: transform var(--dur) var(--ease); } .dd-btn[aria-expanded="true"] .dd-mui { transform: rotate(180deg); } .dd-panel { /* ☠️ z-index PHẢI TRÊN modal của CẢ HAI trang: members có .modal-backdrop z-index 500 (hộp "Sửa tài khoản"), tool có modal cao nhất 321. Panel gắn vào nên là anh em của modal — để 400 (cũ) thì nó CHUI SAU hộp Sửa, mở ra không thấy/không chọn được (chủ tool báo 16/09/2026 "dropdown hiện đằng sau bảng"; đo: elementFromPoint tại tâm panel trả về .modal-backdrop). 600 > 500 mà vẫn < 900 của dialog.css (alert/confirm phải phủ được dropdown). */ position: fixed; z-index: 600; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 4px; overflow-y: auto; overscroll-behavior: contain; } .dd-muc { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); font-size: var(--fs-base); color: var(--text); cursor: pointer; outline: none; } .dd-chu { flex: 1; min-width: 0; } .dd-muc .dd-check { flex: none; opacity: 0; color: var(--brand); } .dd-muc:hover, .dd-muc:focus-visible { background-color: var(--surface-3); } .dd-muc:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-ring); } .dd-muc[aria-selected="true"] { background-color: var(--brand-soft); color: var(--brand); font-weight: 600; } .dd-muc[aria-selected="true"] .dd-check { opacity: 1; }