html,body{height:100%;margin:0;overflow:hidden;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
.dl{height:100vh;display:flex;background:#f6f7fb}
.dl__side{
  width:380px;flex:0 0 380px;background:#fff;border-right:1px solid #eee;
  display:flex;flex-direction:column;padding:14px 12px;box-sizing:border-box
}
.dl__brand{font-weight:800;font-size:16px;margin:4px 8px 12px}
.dl__nav{display:flex;flex-direction:column;gap:6px;overflow:auto;padding:6px}
.dl__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: #111;
    border: 1px solid transparent;
    font-size: 16px;
}
.dl__item:hover{background:#f5f6ff}
.dl__item.is-active{background:#f0edff;border-color:#e6e0ff}
.dl__dot{width:6px;height:6px;border-radius:99px;background:#7c3aed;flex:0 0 auto}
.dl__count{margin-left:auto;font-size:12px;background:#eee;border-radius:999px;padding:2px 8px;color:#333}
.dl__foot{padding:10px 8px;border-top:1px solid #eee;margin-top:auto}
.dl__small{font-size:12px;color:#666;line-height:1.4}

.dl__main{flex:1;display:flex;flex-direction:column;min-width:0}
.dl__top{
  padding:18px 18px 12px;border-bottom:1px solid #eee;background:#fff;
  display:flex;align-items:center;gap:14px
}
.dl__title{margin:0;font-size:18px;font-weight:800}
.dl__search{margin-left:auto;max-width:360px;width:100%}
.dl__search input{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid #e5e5e5;outline:none
}

.dl__tableWrap{flex:1;overflow:auto;padding:14px}
.dl__table{width:100%;border-collapse:separate;border-spacing:0 10px}
.dl__table thead th{
  text-align:left;font-size:12px;color:#666;font-weight:700;padding:0 12px
}
.dl__table tbody tr{
  background:#fff;border:1px solid #eee
}
.dl__table tbody td{
  padding:14px 12px;vertical-align:top;border-top:1px solid #eee;border-bottom:1px solid #eee
}
.dl__table tbody tr td:first-child{border-left:1px solid #eee;border-radius:12px 0 0 12px}
.dl__table tbody tr td:last-child{border-right:1px solid #eee;border-radius:0 12px 12px 0}
.dl__name a {
    text-decoration: none;
    color: #111;
    font-size: 14px !important;
}
.dl__desc{font-size:12px;color:#666;margin-top:6px;line-height:1.4}

@media (max-width: 900px){
  html,body{overflow:auto;height:auto}
  .dl{display:block;height:auto}
  .dl__side{width:auto;position:sticky;top:0;z-index:9}
  .dl__main{min-height:60vh}
  
  .dl__table tbody td {
   
    font-size: 10px;
}
.dl__title {
    display: none;
}
.dl__search {
    max-width: 100%;
    width: 100%;
}

.dl__small {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    display: none;
}
.dl__foot {
    padding: 10px 8px;
    border-top: 1px solid #eee;
    margin-top: auto;
    display: none;
}



}


.hd-home{
  width:18px;
  height:18px;
  display:inline-block;
  background: currentColor;
  opacity:.95;

  /* vẽ icon nhà */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 3 10h2v10h6v-6h2v6h6V10h2L12 3z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 3 10h2v10h6v-6h2v6h6V10h2L12 3z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.hd-home {
    width: 30;
    height: 30px;
    border-radius: 10px;
    background: rgb(124 58 237);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.hd-home::before{
  content:"";
  width:16px;height:16px;
  background:#fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 3 10h2v10h6v-6h2v6h6V10h2L12 3z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 3 10h2v10h6v-6h2v6h6V10h2L12 3z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.helpdesk__titleLink {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
}

.helpdesk__titleLink:hover{
  opacity:.9;
}