@media (max-width: 767px) {
  /* 1) Giữ .az-sd-panel ẩn theo mặc định, không khai báo display:none ở đây */
  .az-sd-panel {
    transform: translateX(11%) !important;
  }
  .az-sd-dropdown, .az-sd-panel {
    overflow: visible !important;
  }
}


.az-sd-dropdown { position:relative; display:inline-block; }
.az-sd-toggle { position:relative; font-size:22px; color:#333; }
.az-sd-badge {
  position:absolute; top:-6px; right:-6px;
  background:#e94b35; color:#fff;
  font-size:10px; padding:1px 5px; border-radius:50%;
}

.az-sd-panel {
  display:none; position:absolute;
  top:100%; right:0; padding:1rem;
  width:400px; background:#fff;
  border:1px solid #ddd; box-shadow:0 4px 12px rgba(0,0,0,0.1);
  z-index:999;
  border-radius:6px;
}
.az-sd-dropdown.open .az-sd-panel { display:block; }

.az-sd-header {
  display:flex; justify-content:space-between;
  align-items:center; padding: 0px 0px 10px 0px;
  border-bottom:1px solid #eee;
}
.az-sd-header strong { color:#c49d26; font-size:16px; }
#az-sd-mark-all { color:#d09e3f; text-decoration:none; }

.az-sd-tabs {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  overflow: visible !important;
  white-space: nowrap;  /* cho scroll ngang nếu quá dài */
}


.az-sd-tabs li {
  margin-right:10px; position:relative;
  cursor:pointer; font-size:14px; color:#555;
}
.az-sd-tabs li span {
  background:#ff9100; color:#fff;
  font-size:10px; padding:1px 4px; border-radius:3px;
  margin-left:4px;
}

.az-sd-more {
  position: relative;
  z-index: 1000;
}
.az-sd-subtabs {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  list-style: none;
  padding: 4px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: visible;
  z-index: 1001;
}

.az-sd-more.open-sub .az-sd-subtabs {
  display: block !important;
}

.az-sd-more:hover .az-sd-subtabs {
  display: block;
}

.az-sd-subtabs li { padding:6px 12px; white-space:nowrap; }

.az-sd-list { max-height:240px; overflow-y:auto; padding:0; margin:0; list-style:none; }
.az-sd-list li {display: flex;
    align-items: center;
    padding: 10px 10px;
    gap: 12px;
    cursor: pointer;
    border-radius: 6px;
    background: #fffdee;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.unread .az-sd-msg { color:#205d9e; }
.read .az-sd-msg { color:#8597bc; font-weight:400; }
.none { color:#aaa; padding:30px 0; text-align:center;}
.az-sd-list li.none { text-align:center; color:#999; }
.az-sd-msg { font-size:11px; color:#144c91; font-weight:600; }
.az-sd-time { font-size:10px; color:#aaa; margin-top:4px; }

.az-icon-wallet, .az-icon-points, .az-icon-booking, .az-icon-contract, .az-icon-document, .az-icon-account, .az-icon-bell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgb(242, 242, 242);
    font-size: 16px;
    position: relative;
}
.unread .az-icon-wallet:after,
.unread .az-icon-points:after,
.unread .az-icon-booking:after,
.unread .az-icon-contract:after,
.unread .az-icon-document:after,
.unread .az-icon-account:after,
.unread .az-icon-bell:after {
  content:''; position:absolute; top:3px; right:3px; width:10px; height:10px;
  background:#ff9800; border:2px solid #fff; border-radius:50%;
}
.az-sd-footer {
  padding:10px 12px; text-align:center;
  border-top:1px solid #eee;
}
.az-sd-footer a { color:#205d9e; text-decoration:none; }