﻿body {padding: 0; margin: 0}
.wrapper {width: 1349px; min-height: 500px; margin: 0 auto}
/*layoutcuatui*/
.lefter {float: left; width: 270px; min-height: 703px; background: black; position: fixed; left: 0; z-index: 999}
.content { float: right; width: 1088px; min-height: 703px}
.webicon img { height: 45px; width: 110px; margin: 10px auto 0 auto}
.searchform { margin: 10px auto; height: 40px; width: 95%}
.searchform input[type=text] { border: 0; margin: 0; width: 80%; padding: 7px 0 7px 8px; float: left; font-size: 16px}
.searchform button[type=submit] {margin: 0; height: 36px ;width: 49px; background: white; border: 0}
.searchform button[type=submit]:hover {  background: #e10808; color: white; transition: all 0.35s}
#menucuatui li a { color: white; font-size: 17px}
#menucuatui li a:hover { background: #e10808; transition: all 0.35s}
.lefter-foot { width: 100%; position: absolute; bottom: 100px; margin-left: 10px}
.lefter-foot a { color: gray}
.lefter-foot a:hover { color: #e10808; text-decoration: none}
#cpr { color: gray; font-size: 13px; margin-left: 10px; position: absolute; bottom: 45px}
/*Đăng nhập, Đăng ký*/
.modal-header, h4#modal-hd-name, .close { background-color: #e10808; color:white !important; text-align: center; font-size: 30px}
.modal-footer { background-color: #f9f9f9}
.btndkdn { width: 100%; text-align: center; margin-top: 90px; font-size: 16px}
.btndkdn a { color: white}
.btndk { border: 2px solid white; padding: 8px 20px}
.btndk:hover { background: white; color: black; transition: all 0.35s; text-decoration: none}
.btndn { padding: 8px 12px}
.btndn:hover { background: white; color: black; transition: all 0.35s; text-decoration: none}
.btndkdn a.btndx { color: gray}
a.btndx:hover { text-decoration: none; color: white}
.dkdn-header { padding: 10px; text-align: center; background: #e10808; color: white}
.dn { width: 100%}
.dn td { padding: 10px}
.dn td#label { width: 12%}
.dn td:first-child { width: 30%}
h2.action { color: white; background: #c80505; padding: 10px 15px; margin: 0; box-shadow: 0 5px 0 rgba(0,0,0,0.2); position: fixed; width: 100%; z-index: 99}
.noidung { margin-top: 70px}
/*Trang chủ*/
/* slide show */
#imgs img { width: 80%; height: 44%; position: absolute; right: 0; transition: 1s; visibility: hidden;}
#Snav { display:block; width: 80%; height: 44%; position:absolute; right: 0;}
#SnavMiddle { display:block; width:100%; height: 25%;}
#Sleft { width:8%; height:100%; float:left; margin-left: 1%; opacity: 0.5; margin-top:9%;}
#Sleft:hover { transition: 0.25s; opacity: 1;}
#Sright { width:8%; height:100%; float:right; margin-right: 1%; opacity: 0.5; margin-top:9%;}
#Sright:hover { transition: 0.25s; opacity: 1;}
#slider { height: 350px;}
/*slide show*/
.box-noibat { height: 600px; width: 100%; padding: 5px 15px; margin: 20px auto}
.box-noibat legend {color: gray;}
.box-noibat legend span { color: #e10808}
.item-noibat { height: 265px; width: 210px; float: left; margin: 10px 15px 10px 20px; text-align: center; padding: 5px 0}
.item-noibat-imgs { height: 172px; width: 172px; margin: 3px auto}
.item-noibat-imgs img { width: 172px; height: 172px; max-width: 172px; max-height: 172px; border: 0}
.item-noibat-imgs:hover { box-shadow: 3px 3px 3px rgba(0,0,0,0.5); transition: all 0.3s}
.item-noibat #tenplaylist { color: black; font-size: 16px}
.item-noibat #tenplaylist:hover { color: #e10808; text-decoration: none}
.item-noibat #tenuser { color: gray}
.item-noibat #tenuser:hover { color: #e10808; text-decoration: none}
/*Tìm kiếm*/
.box-kqtk { min-height: 200px; width: 100%; padding: 5px 15px; margin: 20px auto}
.box-kqtk legend { color: #b6b6b6}
.box-kqtk legend a { color: black}
.box-kqtk legend a:hover { text-decoration: none}
.box-kqtk legend span:first-child { color: red}
/*Âm nhạc*/
#menuamnhac li { background: #6b6a6a; font-size: 16px}
#menuamnhac li a { color: white}
#menuamnhac li:hover { background: #4a4949}
#menuamnhac li:hover a { background: none}
#menuamnhac li.active { background: #e10808}
#menuamnhac li.active a { background: none}
#amnhaccontent { margin-top: 10px}
/*Bảng Xếp Hạng*/
#bangxephang { padding-top: 20px}
#menubxh li { width: 33%; text-align: center; background: #6b6a6a; font-size: 20px}
#menubxh li a { color: white}
#menubxh li:hover { background: #4a4949}
#menubxh li:hover a { background: none}
#menubxh li.active { background: #e10808}
#menubxh li.active a { background: none}
table.ndbxh { width: 100%}
table.ndbxh tr { border-bottom: 1px solid #e1e1e1}
table.ndbxh tr:last-child { border: none;}
table.ndbxh tr:hover { background: #ebe9ee; transition: all 0.25s}
table.ndbxh tr:first-child:hover { background: none}
table.ndbxh td { text-align: center; padding: 4px 0}
table.ndbxh td.luotnghe { width: 17%}
table.ndbxh td.ten-bh-cs { width: 770px}
table.ndbxh td.number { font-size: 22px; font-weight: bold; width: 10%}
.top1 { color: red}
.top2 { color: blue}
.top3 { color: green}
table.ndbxh td a { color: black; font-size: 18px}
table.ndbxh td a:hover { text-decoration: none; color: #e10808}
table.ndbxh a.tencs { color: gray; font-size: 16px}
table.ndbxh a.tencs:hover { text-decoration: none; color: #e10808}
/*Nghe Nhạc*/
video { margin: 15px 0; background: black}
video[poster] { height: 430px; width: 100%}
.box-thongtinbh { font-size: 16px; float: left}
.box-thongtinbh a.thongtin { color: black; font-weight: bold}
.box-thongtinbh a.thongtin:hover { color: #e10808; text-decoration: none}
.ttchitiet { font-weight: bold; color: black}
a.down-like-btn { padding: 8px 15px; color: white; font-size: 15px; font-weight: bold; background: #e10808}
a.down-like-btn:hover { text-decoration: none; background: #bb0101; color: white}
textarea { display: none; position: absolute; right: 23px; top: 20px; width: 400px; max-width: 650px; max-width: 730px; max-height: 190px; height: 190px; background: #f1f1f1; border: none; padding: 10px; font-size: 16px; font-style: italic}
/*Nghe Album*/
.trangalbum { min-height: 600px; width: 100%; padding: 15px}
.dianhac img{ height: 240px; width: 240px; margin-left: 115px}
.anhbia { height: 250px; width: 250px; position: absolute; top: 15px; left: 290px}
.anhbia img { height: 249px; width: 249px; box-shadow: 6px 2px 2px rgba(0,0,0,0.2)}
.controls { color: white; height: 90px; width: 249px; position: absolute; top: 174px; left: 290px; text-align: center; background: rgba(0,0,0,0.6)}
.controls .play { font-size: 55px; margin: 7px 0px; padding: 6px 8px 14px 15px; float: left}
.controls .pause { font-size: 55px; margin: 7px 0px; padding: 6px 8px 14px 15px; display: none; float: left}
.next,.prev { font-size: 30px; margin: 15px 12px; padding: 12px 15px 15px 15px; float: left}
.play:hover,.prev:hover,.next:hover,.pause { color: #e10808}
.thongtinab { border-left: 1px solid #e1e1e1; width: 690px; position: absolute; top: 15px; right: 15px; padding: 0 10px; font-size: 16px}
.thongtinab a { color: black; font-weight: bold}
.thongtinab a:hover { color: #e10808; text-decoration: none}
.thongtinab #ttabrln { position: absolute; right: 15px; top: 86px}
.thongtinab #ttabrnph { position: absolute; right: 15px; top: 56px}
#khuctren { z-index: -1}
.chieucao { height: 360px}
#xemthem,#rutgon { color: #e10808; font-weight: normal}
#xemthem:hover,#rutgon:hover { color: black; text-decoration: none}
.playlist { width: 1060px; list-style-type: none; padding: 10px 0 0 0;margin-top: 20px; background: white; position: relative; z-index: 1}
.playlist li { cursor: pointer; font-size: 17px; font-weight: bold; padding: 10px; border-top: 2px solid #e1e1e1}
.playlist li #hin { display: none}
.playlist li:hover { background: #e1e1e1}
.playlist li:hover #hin { display: inline}
.playlist li.active {color: #e10808}
.lyric { min-height: 200px; width: 100%; background: #f1f1f1; padding: 10px; font-size: 16px; font-style: italic}
.lyric .title { font-size: 20px}
.hidden {
    display: none;
}
.controls .visible {
    display: inline;
}
/*Hổ trợ*/
.banner { width: 100%; height: 320px; background: url("/Content/images/banner.jpg") right top fixed no-repeat; background-size: 80%}
#hotro p { font-size: 17px}
.container .hotro-label span { color: #e10808}
.avatar { text-align: center; float: left; height: 230px; width: 230px; margin: 30px 15px; border-radius: 120px;}
.avatar:hover .info { -webkit-transform: translate(0%, -0%) scale(1.05);
 transform: translate(0%, -0%) scale(1.05);
 transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.info { padding-top: 50px; width: 230px; height: 230px; background: rgba(0,0,0,0.5); border-radius: 120px; -webkit-transform: translate(-0%, -0%) scale(0);
 transform: translate(-0%, -0%) scale(0);
 transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);}
.name { color: white;}
.job { font-size: 15px; color: white;}
.abteam img { height: 20px; width: 200px}
#pbt { background: url("/Content/images/pbt.jpg") center no-repeat; background-size: 100%;}
#ltv { background: url("/Content/images/ltv.jpg") center no-repeat; background-size: 100%;}
#lvht { background: url("/Content/images/lvht.jpg") center no-repeat; background-size: 100%;}
#pqt { background: url("/Content/images/pqt.jpg") left no-repeat; background-size: 140%;}
#pbt:hover,#ltv:hover,#lvht:hover { background-size: 130%; transition: linear 0.5s;}
#pqt:hover { background-size: 170%; transition: linear 0.5s;}
p a:hover { text-decoration: none}
p a img#ketnoiicon { height: 40px; width: 40px}
/*Trang ca sĩ*/
.trangcasi { min-height: 600px; width: 100%; padding: 15px}
.trangcasi img { height: 200px; width: 200px; float: left}
.thongtincs { height: 200px; width: 200px; border-right: 1px solid #e1e1e1; float: left; padding: 5px 15px}
.tieusucs { height: 200px; width: 640px; float: left; padding: 20px; font-size: 15px}
#menucasi li { width: 33%; text-align: center; background: #6b6a6a; font-size: 20px; margin-top: 10px}
#menucasi li a { color: white}
#menucasi li:hover { background: #4a4949}
#menucasi li:hover a { background: none}
#menucasi li.active { background: #e10808}
#menucasi li.active a { background: none}
#Tieusu {  font-size: 17px; padding: 15px 10px 0 10px}
table.baihatcs { width: 99.5%}
table.baihatcs tr { height: 60px; border-bottom: 1px solid #e1e1e1; font-size: 17px}
table.baihatcs tr:last-child { border:none}
table.baihatcs tr:hover { background: #e1e1e1}
table.baihatcs tr a.tenbh { color: black}
table.baihatcs tr a.tenbh:hover { color: #e10808; text-decoration: none}
table.baihatcs tr a.tencs { color: gray}
table.baihatcs tr a.tencs:hover { color: #e10808; text-decoration: none}
table.baihatcs td { padding: 0 15px}
table.baihatcs td:last-child { width: 20%}
/*Quản lí Album*/
table.admin-qlab { width: 100%}