/* Tiếp cận: focus, vùng chạm, menu đóng, mục xám */

/* (1) Focus rõ ràng — thay outline:none cũ */
#o-tim:focus-visible,
a.dkp-link:focus-visible {
  outline: 2px solid var(--xanh);
  outline-offset: 2px;
}

/* (2) Vùng chạm tối thiểu 44px trên tablet/mobile */
@media (max-width: 1023px) {
  #o-tim,
  #nut-lam-moi,
  .nut-nho,
  #nut-dang-xuat-ben,
  a.muc,
  .thanh-ben a.muc,
  a.logo-the,
  .lien-ket-nho,
  a.kp-dong {
    min-height: var(--vung-cham);
    min-width: var(--vung-cham);
    box-sizing: border-box;
  }

  #o-tim {
    height: var(--vung-cham);
  }

  #nut-lam-moi,
  .nut-nho,
  #nut-dang-xuat-ben,
  a.logo-the,
  .lien-ket-nho,
  a.kp-dong {
    display: inline-flex;
    align-items: center;
  }

  a.muc,
  .thanh-ben a.muc {
    display: flex;
    align-items: center;
  }
}

/* (3) Nhóm menu đóng: ẩn khỏi Tab, không trễ visibility */
.thanh-ben .nhom:not(.mo) .nhom-muc {
  visibility: hidden;
  transition: grid-template-rows var(--t-vua) var(--ease);
}

.thanh-ben .nhom.mo .nhom-muc {
  visibility: visible;
}

.thanh-ben .nhom:not(.mo) .nhom-muc .muc {
  visibility: hidden;
  transition: none;
}

/* (4) Mục xám / vô hiệu */
.thanh-ben .muc[aria-disabled="true"],
.thanh-ben .nhom-dau[aria-disabled="true"],
.tim-muc[aria-disabled="true"],
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.7;
}

.thanh-ben .muc[aria-disabled="true"]:focus-visible,
.thanh-ben .nhom-dau[aria-disabled="true"]:focus-visible,
.tim-muc[aria-disabled="true"]:focus-visible,
[aria-disabled="true"]:focus-visible {
  outline: 2px solid var(--xanh);
  outline-offset: 2px;
}