* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
.ms-home-layout {
    display: grid;
    grid-template-areas: "ms-header" "ms-menu" "ms-home-top" "ms-home-bottom" "ms-footer";
    grid-auto-columns: 100%;
    background-color: rgba(247, 247, 247, 0.918);
}

.ms-header {
    grid-area: ms-header;
    display: flex;
    justify-content: space-between;
    /* box-shadow: 1px 2px 3px #B7B9BD; */
    padding: 10px 10px 5px 10px;
    background-color: rgba(0, 0, 0, 0.671);
}

.ms-menu {
    grid-area: ms-menu;
    box-shadow: 1px 2px 1px #B7B9BD;
    background-color: #EBE8E8;
}

.ms-home-top {
    width: 80%;
    margin: 5px auto 0px auto;
    grid-area: ms-home-top;
    display: flex;
    background-color: #fff;
}

.ms-home-bottom {
    grid-area: ms-home-bottom;
    background-color: #fff;
    width: 80%;
    margin: 0 auto;
}

.ms-footer {
    grid-area: ms-footer;
    text-align: center;
    border-top: 1px solid rgba(228, 228, 228, 0.897);
    padding: 10px;
}


/* Start: Search */

.ms-header-timkiem>input[type=search] {
    width: 500px;
    height: 35px;
    border: none;
    background-color: #EBE8E8;
    border-radius: 3px;
    font-size: 16px;
    padding-left: 30px;
    margin-bottom: 5px;
}

.ms-header-timkiem>input[type=search]::placeholder {
    font-style: italic;
    font-size: 16px;
}

.ms-header-timkiem button{
    width: 10px;
    background: none;
    cursor: pointer;
    border: none;
    position: relative;
    right: 30px;
}
.ms-header-dangnhap>button:checked {
    outline: none;
}

/* End: Search */


/* Start: Login */

.ms-header-dangnhap {
    background-color: rgba(72, 129, 185, 0.74);
    font-size: 16px;
    font-weight: 600;
    width: 100px;
    text-align: center;
    height: 36px;
    line-height: 36px;
    box-shadow: 1px 1px 2px rgba(187, 187, 187, 0.377);
    border-radius: 2px;
    margin-bottom: 5px;
}

.ms-header-dangnhap>a {
    color: rgb(255, 255, 255);
    display: block;
}

.ms-header-dangnhap>a:hover {
    text-decoration: none;
}

.ms-header-dangnhap>a:focus {
    text-decoration: none;
    outline: none;
    color: #ccc;
}
.ms-dadangnhap{
    margin-right: 10px;
}
.ms-dadangnhap>div{
    display:inline;
}
.ms-dadangnhap>span{
    font-size:14px;
    color: #fff;
    margin-top:5px;
}
/* Start: Login */


/* Start: Menu */
.ms-menu ul {
    list-style-type: none;
}
.ms-menu>ul {
    display: flex;
    justify-content: center;
    
    margin-bottom: 1px;
    margin-top: 2px;
}

.ms-menu>ul>li {
    width: 100px;
    height: 35px;
    text-align: center;
    margin-left: 1px;
    line-height: 35px;
}

.ms-menu>ul>li:hover {
    background-color: #B7B9BD;
}

.ms-menu a:hover {
    text-decoration: none;
    color: #000;
}

.ms-menu a:focus {
    text-decoration: none;
}

.ms-menu a {
    height: 100%;
    display: block;
    color: #000;
}
.ms-menu-sub{
    display: none;
    position: absolute;
    z-index: -99;
}
.ms-menu>ul>li:hover > .ms-menu-sub {
    display: block;
    background-color: rgba(243, 243, 243, 0.781);
    top: 93px;
    width: 300px;
    text-align: left;
    z-index: 1;
    padding-left: 10px;
    
}
.ms-menu>ul>li:hover > .ms-menu-sub li {
    border-bottom: 1px solid beige;
}
.ms-menu-sub::before{
    content: "";
    width:0px;
    height:0px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:10px solid rgba(243, 243, 243, 0.781);
    position: absolute;
    top: -8px;
}



/*End: Menu */

.ms-home-carousel,
.ms-home-bxh {
    margin: 20px 20px;
}

.ms-home-top ul {
    list-style-type: none;
}


/* Start: Carousel home */

.ms-home-carousel ul {
    display: flex;
    justify-content: center;
}

.ms-home-carousel ul li {
    margin: 3px;
    box-shadow: 2px 1px 3px #B7B9BD;
}


/* End: Carousel home */


/* Start: Bảng xếp hạng */

.ms-home-bxh ul {
    max-height: 300px;
    overflow-y: scroll;
    width: 260px;
}

.ms-home-bxh ul::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.ms-home-bxh ul::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(160, 160, 160, 0.3);
    background-color: rgb(175, 175, 175);
}

.ms-home-bxh ul li {
    border-bottom: 1px solid #ccc;
}

.ms-home-bxh span {
    display: block;
    color: #cccccc;
}

.ms-home-bxh>p {
    font-size: 20px;
    text-align: center;
    font-style: bold;
}


/* End: Bảng xếp hạng */

.ms-home-bottom h3,
.ms-home-nhacmoi,
.ms-home-nhachot,
.ms-home-nghesihot,
.ms-home-albumhot,
.ms-home-albumnew {
    margin: 20px 20px;
}

.ms-home-bottom h3 {
    text-transform: uppercase;
    color: #5553d8;
}

.ms-home-albumhot,
.ms-home-albumnew,
.ms-home-nhachot,
.ms-home-nhacmoi,
.ms-home-nghesihot {
    display: flex;
    justify-content: space-between;
    flex-flow: wrap;
}

.ms-home-bottom span {
    display: block;
}


/* Start: Nhạc mới */


/* End: Nhạc mới */


/* Start: Nhạc hot */


/* End: Nhạc hot */


/* Start: Album */


/* End: Album */


/* Start: Nghệ sĩ */


/* End: Nghệ sĩ */


/* Start: Footer */

.ms-footer span {
    display: block;
    font-style: bold;
    color: #a1300e;
}


/* End: Footer */


/* Start: Responsive*/

@media only screen and (max-width: 1000px) {
    .ms-home-carousel {
        width: 300px;
    }
    .ms-home-carousel ul {
        display: none;
    }
}

@media only screen and (max-width: 800px) {
    .ms-home-carousel {
        display: none;
    }
    .ms-header-timkiem>input[type=search] {
        width: 200px;
    }
}


/*End: Responsive*/