.section-list{
    margin:2rem 0;
    padding: 0;
    border-radius:8px;
    border:4px solid rgba(0,0,0,0.07);
}
.section-list .hover > span{
    color:var(--text-mute);
    margin:0 0.5rem;
    font-size:0.8rem;
}
.section-list .hover > span:last-of-type{
    display:inline-block;
}
.section-list .hover > span.description{
    color:var(--text-sub);
    font-size:1rem;
}
.section-list .hover span:empty{
    display:none;
    margin:0;
    padding:0;
    width:0;
    height:0;
}
.section-list > ul{
    margin:0;
    padding:0;
    margin-left:-4px;
    overflow:hidden;
}
.section-list > ul > li{
    list-style: none;
    width:100%;
    padding:0.5rem 1rem;
    border-left:4px solid  rgba(0,0,0,0);
    border-bottom:1px solid rgba(0,0,0,0.05);
    overflow: hidden;
    transition: all 0.2s ease;
    will-change: transform;  /* แจ้งเบราว์เซอร์ให้เตรียม GPU ไว้ล่วงหน้า */
}
.section-list > ul > li:last-child{
    border-bottom:none;
}
.section-list ul:first-of-type li:first-child{
    border-top-left-radius:6px;
    border-top-right-radius:6px;
}
.section-list ul:last-of-type li:last-child{
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
}
li.hover:hover{
    padding-left:calc(1rem + 4px);
    padding-right:calc(1rem - 4px);
    box-shadow: inset 6px 0 0 0 rgba(0, 0, 0, 0.3);
    border-left-color:rgba(0,0,0,0.3);
    overflow: hidden;
}
.section-list > ul > li:hover{
    background-color: rgba(0,0,0,0.015);
}
ul.sub-section li{
    border-left:4px solid rgba(0,0,0,0.09);
}
.sub-section > li::before {
    content: "";
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.6rem;
    margin-left:0rem;
    vertical-align: middle;

    
    -webkit-mask-image:  url("../img/folder.svg");
    mask-image: url("../img/folder.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;

    background-color: #ffcc00; 
    transition: background-color 0.2s ease;
}
.sub-section > li:hover::before {
    //background-color: #ffdb4d; 

    //-webkit-mask-image:  url("../img/folder-open.svg");
    //mask-image: url("../img/folder-open.svg");
}
.pages-list > li.hover::before {
    content: "";
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0;
    margin-left:0rem;
    vertical-align: middle;

    
    -webkit-mask-image:  url("../img/doc.svg");
    mask-image: url("../img/doc.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;

    background-color: var(--border-dim); 
    transition: background-color 0.2s ease;
}
.pages-list > li.pinned_items::before {
    content: "";
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0;
    margin-left:0rem;
    vertical-align: middle;

    
    -webkit-mask-image:  url("../img/star.svg");
    mask-image: url("../img/star.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;

    background-color: #ffcc00; 
    transition: background-color 0.2s ease;
}
.section-list > ul:nth-child(n+2){
    border-top:1px solid rgba(0,0,0,0.05);
}/*
.section-list > ul:nth-child(2){
    border-top:4px solid #eee;
}*/
.microblog-content{
    overflow-x:visible;
}
.microblog-content *:first-child{
    margin-top:0;
}
.microblog-content *:last-child{
    margin-bottom:0;
}