/* CSS Document */

a, input, button, a:focus, input:focus, button:focus {
    /*outline: none !important;*/
}

.menu-left .anchor-change-2 li:last-child, .menu-left .anchor-change-3 li:last-child {
    padding-bottom: 0;
}

.scroll-disable {
    overflow: hidden;
}

span.btn-function {
    cursor: pointer;
}
#loginform-captcha-image {
    position: relative;
    top: -7px;
    width: 100px;
    height: 47px;
}
.alert-danger, .alert-success {
    margin-top: 10px;
}

@media (min-width:980px){
    .player-bar .control-center .volume {
        width: 60px;
    }

    .jp-volume-bar{
        background-color:#666666;
        position:absolute;
        overflow:hidden;
        top:5px;
        left:22px;
        width:46px;
        height:2px;
        cursor:pointer;
        margin-top: 6px;
    }

    .jp-volume-bar-value{
        width:0;
        height:2px;
        background-color:#2fbb52;
    }

    .player-bar .control-center .volume:hover .jp-volume-bar,.player-bar .control-center .volume:hover .jp-volume-bar-value{
        height: 5px;
        top: 3px;
    }

    .player-bar .control-center .slider-horizontal:hover{
        height: 5px;
        cursor: pointer;
        margin-top: 22px;
    }

    .player-bar .control-center .slider-horizontal:hover .buffer{
        height: 5px;
    }

    .player-bar .control-center .progess {
        top: 0;
    }

    .player-bar .control-center .slider-horizontal:hover .jp-play-bar{
        height: 5px;
        bottom: -7px;
    }

    .player-bar .control-center .slider-horizontal:hover .knob{
        width: 7px;
        height: 7px;
        top: -1px;
        border-radius: 50%;
    }
}

@media (max-width:980px){
    .jp-volume-bar{
        width: 0;
    }

    .player-bar .control-center .progess {
        top: 0 !important;
    }
}

@media (max-width:769px) {
    .hide-pagging {
        display: none;
    }

    .mdl-form .ipt-imuzik {
        /*width: 180px !important;*/
        display: inline-block;
        margin-right: 7px;
    }
    .setting-mobile{
        display: block;
        padding: 5px;
    }

    #vtmessages-captcha {
        width: 70px;
    }

    .checkbox input[type="checkbox"] {
        margin-left: -20px !important;
    }
    .fb-like {
        top: -6px;
    }
    .form-group .col-xs-12 .ipt-imuzik {
        width: 100% !important;
    }

    .form-group  .col-xs-12 #vtmessages-captcha {
        width: 50% !important;
    }

    #id01 p, #id01 label {
        font-size: 0.8em;
    }
}

.input-date input {
    display: inline-block;
    vertical-align: middle;
    width: 140px;
}

.input-date .short {
    width: 80px !important;
    display: inline-block;
}

.group-form-delete {
    display: inline-block;
}
.button-error {
    background-color: red;
    border: none;
}
.modal-login .form-group{
    margin-bottom: 5px;
}
.table .bg-color-01 .icon-pause2 {
    margin-top: 6px;
}
.mdl-form .sub-title {
    margin-top: 20px;
}

.modal-login .form-control {
    background-color: #f7f7f7;
    /*border-color: #dbdbdb;*/
    border-radius: 20px;
    box-shadow: none;
    color: #323232;
}

#vtmessages-captcha {
    width: 100px;
}

#vtmessages-captcha-image {
    height: 50px;
    margin-top: -7px;
}

.text-style-3{
    display: inline-block;
    padding-top: 17px;
}

.mdl-billboard {
    overflow: hidden;
}
.avatar-loading {
    margin-top: 18px !important;
    margin-left: 13px !important;
    font-size:40px !important;
}
.rbt-table .jscroll-added {
    border-bottom: none;
}
.rbt-table .table {
    margin-bottom: 0;
}
.rbt-table .jscroll-added .table>tbody+tbody {
    border-top: none;
}
.rbt-table .jscroll-added .table tr.first-item>td {
    border-top: none;
}

.content-scroll .row-music:hover {
    background-color: #f5f5f5;
}
.mdl-detail-song .column-2, .mdl-detail-song .column-3, .mdl-detail-song .column-4 {
    text-align: right;
    padding-right: 6px !important;
}
span.required {
    color: #c43b1d;
}
.mdl-form .sub-title span {
    color: #31A955;
}

#search-nav-form ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #e5e5e5;
}
#search-nav-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #e5e5e5;
    opacity:  1;
}
#search-nav-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #e5e5e5;
    opacity:  1;
}
#search-nav-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #e5e5e5;
}
#search-nav-form :-ms-input-placeholder { /* Microsoft Edge */
    color:    #e5e5e5;
}
#member-sex label {
    margin-right: 15px;
}
li.active a {
    cursor: default;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background: #fff;
}

@font-face {
    font-family: 'Roboto';
    src:url('../fonts/Roboto-Regular.ttf');
    src:url('../fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'RobotoLight';
    src:url('../fonts/Roboto-Light.ttf');
    src:url('../fonts/Roboto-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'RobotoMedium';
    src:url('../fonts/Roboto-Medium.ttf');
    src:url('../fonts/Roboto-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'RobotoBold';
    src:url('../fonts/Roboto-Bold.ttf');
    src:url('../fonts/Roboto-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'RobotoThin';
    src:url('../fonts/Roboto-Thin.ttf');
    src:url('../fonts/Roboto-Thin.ttf') format('truetype');
}

.body-tablet {
    font-family:Roboto;	
}

.delete-color {
    background-color: red !important;
    border: none !important;
    color: #fff !important;
}
#search-page .mdl-songs .media-right .download {
    display: inline-block;
}
#search-page .icon3-ring, #search-page .icon3-ringback, #contentSuggess .icon3-ring,#contentSuggess .icon3-ringback {
    font-size: 24px;
}
.mdl-songs .media-left .icon-bg {
    display: inline-block;
    height: 48px;
    width: 48px;
    text-align: center;
    background: #fdce26;
    padding-top: 13px;
}
.mdl-news .article-title {font-weight: bold;text-transform: capitalize;}
.mdl-news .news-item  {
    margin-bottom: 15px;
    float: left;
    width: 100%;
}
#header-live-icon {display: none;}
body.menu-left #header-live-icon {display:none !important;}
@media (max-width:767px){
    .mdl-news .article-title {font-weight: normal;}
    .mdl-news .news-item img.img-responsive {width: 100%;}
    .mdl-news .item .article-image{width: 100%; height: auto; margin: 0 10px 10px 0;
                                   float: none;}
    .mdl-news .item .hieght-xs-auto{height: auto;}
    #header-live-icon {
        display: inline-block;
        background: red;
        border-radius: 20px;
        position: absolute;
        width: 8px;
        height: 8px;
        z-index: 2222;
        top: 14px;
        left: 30px;

        animation-name: anim;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: linear;
    }
    @keyframes anim {
        to {
            background-color: #ebff76;
        }
    }
    @keyframes anim-half {
        50% {
            background-color: #ebff76;
        }
    }
}
@media screen and (max-width: 769px){
    .load-more {
        display: block;
    }

}
.mdl-news .article-title:hover {
    color: #3ac663;
}
@media (min-width: 979px) {
    .mdl-news .item .image-2 {
        height: auto;
        max-height: 212px;
    }
    .mdl-news .item .image {
        width: 120px;
        height: auto;
        margin: 0 10px 0 0;
        float: left;
        max-height: 77px;
    }
    .video-hot-menu .icon-video-hot{display: none !important;}
    .nhac-phim-menu {display: none !important;}
    .fb-box {display: none !important;}
}
@media (min-width: 979px) {
    .sang-tao {display: none !important;}
}

@media (max-width: 980px) {
    .main-article img {width: 100% !important; height: auto !important; max-width: 600px !important;display: block; margin: 0 auto;}
}
.p-chuthich {width: 100% !important}
#hot-keywords-box h5 {
    margin: 15px 15px 5px 15px;
    text-transform: uppercase;
    color: #f9e816;
    font-weight: 400;
    padding-bottom: 3px;
    border-bottom: rgba(255,255,255,0.1) solid 1px;
}
#hot-keywords-box a:hover {
    color: #f9e816;
}
.navbar-imuzik .app-download-link {display: none;}
@media (max-width: 979px) {
    #hot-keywords-box h5 {
        color: black;
        font-weight: bold;
    }
    #hot-keywords-box a:hover {
        color: #3ac663;
    }
    .navbar-imuzik .app-download-link {
        position: absolute;
        display: inline-block;
        text-transform: uppercase;
        border-radius: 10px;
        border: 1px solid #fff;
        padding: 3px 8px 0px 8px;
        top: 13px;
        right: 10px;
        font-size: 0.8em;
        font-family: LatoLight;
    }
}
/*#adv-reg{*/
/*text-align: center;*/
/*position: absolute;*/
/*top: 40%;*/
/*left: 0;*/
/*width: 100%;*/
/*opacity: 0.85;*/
/*}*/
.popup-action .btn {text-transform: uppercase;}

#adv-popup .modal-content {
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

#adv-popup .modal-dialog {max-width: 300px; margin: 30px auto 0 auto;}

#close-adv-popup {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    color: #3ac663;
}
#close-adv-popup:hover {color: red}
#close-adv-popup span {font-size: 22px;}
#adv-popup .modal-body {padding:0px; }
#adv-popup .popup-text-only {padding:15px;background: #fff; border-radius: 6px;}
#user-avatar-box {
    text-align: center;
    padding: 10px 0;
}
#user-avatar-box a.user {display: inline-block;position: relative;}
#user-avatar-box #user-avatar-image img {width: 100px;  height: 100px;}
#user-avatar-box .icon-change .fa-camera{
    color: #fff;
}
#user-avatar-box .icon-change {
    position: absolute;
    top: 0px;
    background: #3ac663;
    right: 0px;
    width: 26px;
    height: 26px;
    vertical-align: middle;
    line-height: 24px;
    border-radius: 50%;
}
#username-info {
    padding-bottom: 10px;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 18px;
    color: #222;
    text-align: center;
}
#user-info-box {
    background: #f4f4f4;
    padding-top: 10px;
}
.menu-title{
    color: #222;
    text-transform: uppercase;
    font-size: 20px;
}
.menu-list {margin:0; padding:0;list-style: none}
.menu-list li {
    border-top: 1px solid #f4f4f4;
    padding: 8px 5px;
}
.menu-list li a {
    color: #222;
    display: inline-block;
    text-transform: capitalize;
}
.menu-list li a span {
    margin-right: 10px;
    font-size:20px;
}
.menu-list li a:hover, .menu-list li a:hover span:before {
    color: #3ac663;
}
.menu-list li.last-menu {
    border-bottom: 1px solid #f4f4f4;
}
.menu-left .navbar-default .navbar-right > li > a.text:focus,.menu-left .navbar-default .navbar-right > li > a.text:hover,.menu-left .navbar-default .navbar-right > li > a.btn-change:hover, .menu-left .navbar-default .navbar-right > li > a.btn-change:focus{
    background: none;
}
.menu-left .navbar-default .navbar-right > li > a.btn-change {padding: 3px 0 0 1px;}
.navbar-imuzik .navbar-right > li > a.btn-change:hover {color: #3ac663;}
.navbar-imuzik .navbar-right > li > a.text:hover {color: #222;}
.headline .item a {
    line-height: 20px;
}

.headline .owl-item {
    overflow: hidden;
}
#carousel-headline .owl-item {
}
#carousel-headline .owl-stage {
    height: 40px;
    overflow: hidden;
}

#carousel-headline .owl-stage .owl-item{
    display: table;
    height: 40px;
}

#carousel-headline .owl-stage .owl-item .item{
    display: table-cell;
    vertical-align: middle;
    padding: 3px 0 3px 15px;
    position: relative;
    font-size: 13px;
}

#carousel-headline .owl-stage .headline-icon1 {
    background: url(/images/dot.png) no-repeat left center;
    background-size: 8px;
    padding-left: 12px;
    display: inline-block;
    line-height: 40px;
    height: 40px;
    width: 15px;
    position: absolute;
    top: 0px;
    left: 0;
}

.icon-circle {
    background: #3ac663;
    width: 8px;
    height: 8px;
    display: inline-block !important;
    border-radius: 50%;
    vertical-align: middle;
}
@media screen and (max-width: 736px) {/*iphone6+ rotate*/
    #carousel-headline .owl-stage {
        height: 38px;
    }
    #carousel-headline .owl-stage .owl-item {
        padding: 0px 5px 0 5px;
        height: 38px;
    }
}
.video-hot-menu .icon-video-hot {
    height: 20px;
    vertical-align: text-bottom;
    margin-right: 10px
}
#hot-keywords-box .clearfix {margin-bottom: 20px;}
.modal-sm .modal-content {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
.jconfirm.jconfirm-white .jconfirm-box, .jconfirm.jconfirm-light .jconfirm-box, .jconfirm .jconfirm-box {
    border-radius: 15px;
}

.jconfirm .jconfirm-box .jconfirm-buttons,.jconfirm.jconfirm-material .jconfirm-box .jconfirm-buttons {text-align: center;}
.jconfirm .jconfirm-box, .jconfirm.jconfirm-material .jconfirm-box {padding: 15px;}
.jconfirm .jconfirm-box div.jconfirm-closeIcon {display: none !important;}
.jconfirm-buttons .jconfirm-buttons button, .jconfirm .jconfirm-box .jconfirm-buttons button {
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 20px;
}
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-imuzik-cancel {
    background: none;
    border: none;
    box-shadow: none;
    text-transform: capitalize;
}
#waiting-dialog .modal-content {
    background: transparent;
    border: none;
    box-shadow: unset;
}
.btn-fb img {margin-right: 10px;}
.listen-all {
    font-size: 14px;
    position: absolute;
    right: 0;
    font-weight: normal;
    text-transform: initial;
    font-family: Lato;
    color: #fff !important;
    padding: 6px 16px 4px 15px;
    border-radius: 15px;
    top: 5px;
}

.listen-all .icon-play2 {
    margin-right: 5px;
    position: relative;
    bottom: -1px;
}
.list-player-bar, .rbt-list-player-bar{
    padding: 0 10px;
    margin-top: 20px;
}
#playing-info{
    color: #2fbb52;
    font-size: 18px;
    padding: 10px 0 5px 0;
}
#playing-singer {
    font-size: 13px;
    color: whitesmoke;
}
.mdl-songs .playing-media .song-name{
    color: #31A955;
}
.mdl-songs .playing-media {
    background: #f6f6f6;
    display: block;
}
.mdl-listen-all .media-image {position: relative;display: inline-block;}
.media .media-image .icon-playing{position: absolute;height: 20px;top:auto;bottom:0;display: none}
.mdl-listen-all .playing-media .media-image .icon-playing{display: block;}
.mdl-listen-all .special-text .singer-name{cursor: pointer;}
@media (min-width: 979px) {
    .mdl-songs .playing-media .overlay {
        display: block;
    }
}
.player-bar .control-left .jp-previous i, .player-bar .control-left .jp-next i {font-size: 12px;}
.player-bar .control-left a:hover i{
    color: #2ebc50;
}
@media screen and (min-width: 737px) {
    .jp-previous, .jp-next {
        padding-top: 3px;
    }
}
.mdl-billboard .title {position: relative;}
.mdl-billboard .listen-all2{top:73px}
.listen-all2 {
    right: 0;
    padding: 6px 6px 4px 8px;
    border-radius: 30px;
    width: 30px;
    height: 30px;
}
.mdl-billboard .listen-all3{top:0px}
.listen-all3 {
    right: 8px;
    padding: 6px 3px 10px 10px;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    margin-top: 5px;
}
.ndt-box .title .txt {
    display: block;
    margin-bottom: 0;
}
@media screen and (min-width: 641px) and (max-width: 768px) {
    .listen-all {
        right: 0;
        padding: 6px 6px 4px 8px;
        border-radius: 30px;
        width: 30px;
        height: 30px;
    }
    .listen-all .icon-play2 {
        margin-right: 0;
    }
}
@media screen and (max-width: 640px) {
    .ndt-box .listen-all {
        display: inline-block;
        position: inherit;
        margin-bottom: 10px;
    }
}
.listen-all:hover{background: #dd5c2c}
.listen-all2 .icon-play2{margin-right: 0}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {display:none;}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #3ac663;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/*Css for popup confirm policy*/
.modal-title {
    display: flex;
    color: #000000;
    font-size: 30px;
    font-weight: 700;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    text-align: center;
}

.box-policy{
    padding: 60px 50px;
}
.information-text{
    margin-top: 20px;
    font-size: 16px;
}
.modal.fade .modal-dialog-confirm {
    margin: 70px auto 0px;
}
.two-content{
    height: 55vh;
    overflow-y: scroll;
    padding-right: 16px;
}
.two-content::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
}

.two-content::-webkit-scrollbar-thumb {
    background-color: #999999c2; /* Màu của cụm cài đặt (than) */
    border-radius: 5px; /* Độ cong của cụm cài đặt */
}

.two-content::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Màu khi rê chuột lên cụm cài đặt */
}
.purpose-cmt{
    color: #000000;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 16px;
}
.two-content .modal-body{
    padding: 15px 0px 0px !important;
}
.container-checkbox{
    display: flex;
    border: 1px solid #80808063;
    padding: 8px 15px 8px 8px;
    border-radius: 5px;
    align-items: center;
    justify-content: center;

}
.container-checkbox input[type="checkbox"] {
    height: 20px;
    width: 20px;
    float: right;
}
.container-checkbox input[type="checkbox"]:checked {
    accent-color: #e74c3c;

}
.container-checkbox label{
    max-width: 96% !important;
    padding-right: 10px;
    margin-right: auto;
}
.required-box{
    background-color: rgb(254,229,233) !important;
    border: 1px solid rgb(152,50,76) !important;
}
.optional-box{
    margin-bottom: 16px;
}
.required-star::before {
    content: '*'; /* Thêm nội dung là dấu * */
    color: red; /* Màu sắc của dấu * */
    margin-right: 5px;
}
.title-required-check{
    color: red;
    font-size: 14px;
    font-style: italic;
    margin: 6px 0px;
}
.option-checked{
    margin-bottom: 23px;
    border: unset !important;
}
.accept-confirm{
    display: flex;
    justify-content: center;
    text-align: center;
    border-radius: 12px;
    padding-top: 12px;
    width: 33%;
    margin-left: auto;
    margin-right: 16px;
    height: 45px;
    background-color: #E5E5E5;
    border-bottom-left-radius: 0px;
    font-size: 16px;
    font-weight: 700;
    cursor: not-allowed;
}
.box-accept{
    display: flex;
    margin-top: 20px;
}
.content-all{
    max-width: 55% !important;
}
.box-accept input[type="checkbox"]{
    height: 20px;
    width: 20px;
    margin-right: 16px;
}
.box-accept input[type="checkbox"]:checked {
    accent-color: #e74c3c;

}
.confirm-active{
    background-color: #e74c3c !important;
    color: white !important;
    cursor: pointer !important;
}
.pc-none{
    display: none;

}
.txt-line-one{
    text-indent: 15px;
}
.title-article{
    font-weight: 700;
    color: black;
    margin: 10px 0px;
}
.content-title-1{
    display: flex;
}
.detail-title-1{
    margin-left: 30px;
    margin-bottom: 12px;
}
.txt-vt{
    font-style: italic;
    font-weight: 700;
    margin-right: 6px;
    color: black;
}
.no-dot{
    font-style: italic;
    font-weight: 700;
    color: black;
}
.i-content{
    margin-right: 12px;
    min-width: 30px;
}
.i-stt-drip{
    display: flex;
    margin-top: 6px;
}
.one-chap{
    font-weight: 700;
    color: black;
}
.box-chap{
    margin-left: 30px;
}
.plugin-pix{
    display: flex;
}
.txt-confirm-private{
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: black;
    margin-top: 20px;
    font-size: 18px;
}
/*-------------------------------------------------------------*/
@media (max-width: 375px) {
    .two-content {
        height: 42vh !important;
    }
}
/* Thiết lập cho màn hình extra small */
@media (max-width: 576px) {
    .pc-none{
        display: flex;
        color: #000000;
        font-size: 24px;
        font-weight: 700;
        justify-content: center;
        align-items: center;
        text-align: center;
        text-transform: uppercase;
    }
    .modal-title{
        display: none;
    }
    .box-policy {
        padding: 30px 14px;
    }
    .two-content {
        padding-right: 5px;
    }
    .two-content::-webkit-scrollbar {
        width: 0.3em;
    }
    .container-checkbox label {
        max-width: 92% !important;
        padding-right: 6px;
    }
    .two-content {
        height: 55vh;
    }
    .box-accept {
        flex-wrap: wrap;
    }
    .content-all {
        max-width: 85% !important;
        font-size: 15px;
    }
    .accept-confirm{
        padding: 10px 0px;
        width: 40%;
    }
    .modal.fade .modal-dialog-confirm {
        margin: 50px 15px 15px;
    }
    .box-check label{
        font-size: 16px;
    }
}
@media (min-width: 577px) and (max-width: 768px) {
    .modal-title{
        display: none;
    }
    .pc-none{
        display: flex;
        color: #000000;
        font-size: 24px;
        font-weight: 700;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .modal.fade .modal-dialog-confirm {
        margin: 50px 20px 15px;
    }
    .box-policy {
        padding: 50px 30px;
    }
}
@media (min-width: 769px) and (max-width: 992px) {
    .modal-title{
        display: none;
    }
    .pc-none{
        display: flex;
        color: #000000;
        font-size: 24px;
        font-weight: 700;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .modal.fade .modal-dialog-confirm {
        margin: 50px 20px 15px;
    }
    .box-policy {
        padding: 50px 30px;
    }
    .two-content {
        height: 48vh;
    }
}

/*End Css For Popup Confirnm Policy*/