:root {
     font-size: 14px;
     --body-bg-color: rgb(240, 242, 245);
     --body-font-family: "Roboto", sans-serif;
     --body-color: #494949;
     --title-font-family: "Roboto Slab", serif;
     --title-color: #333333;
     --bs-btn-color: #0250C0 !important
 }

 h1,
 .fs-1 {
     font-size: 1.25rem !important;
 }

 h2,
 .fs-2 {
     font-size: 1.2rem !important;
 }

 h3,
 .fs-3 {
     font-size: 1.15rem !important;
 }

 h4,
 .fs-4 {
     font-size: 1.1rem !important;
 }

 h5,
 .fs-5 {
     font-size: 1.05rem !important;
 }

 h6,
 .fs-6 {
     font-size: 1rem !important;
 }

 body {
     background: var(--body-bg-color);
     font-family: var(--body-font-family);
     color: var(--body-color);
 }

 header,
 footer {
     background: linear-gradient(220deg, #1c397b, #389fd9, #1c397b, #389fd9);
 }

 a {
     text-decoration: none !important;
     color: #0250C0;
     font-weight: bold;
 }

 img {
     max-width: 100% !important;
 }

 strong {
     font-weight: bold;
 }

 h1,
 h2,
 h3,
 h4 {
     margin-top: 0.1rem;
     font-family: var(--title-font-family);
     font-weight: 600;
 }

 .f-title {
     font-family: var(--title-font-family);
     font-weight: 600;
 }

 #menu-item-1784>a:after {
     content: url('data:image/svg+xml,<svg version="1.2" xmlns="http://www.w3.org/2000/svg" width="32px" viewBox="0 0 472 260" preserveAspectRatio="xMidYMid meet"><g fill="%23ffe066"><path d="M 78 255.9 c -35.9 -3.3 -67.1 -31.5 -74.4 -67.1 -2.4 -11.4 -2.4 -108.2 0 -119.6 6.4 -31.3 30.5 -56.4 62.9 -65.4 8 -2.2 8 -2.2 122 -2.6 76.4 -0.2 117.7 0 125.2 0.7 18.9 1.9 33.2 7.6 47.4 18.9 8.4 6.7 12.1 11.4 44.9 56.5 9 12.4 14.9 19.6 15.7 19.3 0.8 -0.4 1.3 0.3 1.3 1.8 0 3.9 -18.1 18.1 -29.6 23.2 -5.7 2.5 -13.8 3.4 -11.7 1.3 1.5 -1.5 -0.7 -7.8 -4.6 -13.1 -5.4 -7.3 -15.3 -12.9 -22.5 -12.7 -1.7 0 -2.5 0.3 -1.8 0.6 2.3 0.9 1.2 2.3 -1.7 2.3 -3.4 0 -5 -1.6 -2.4 -2.4 1 -0.3 -0.3 -0.4 -2.9 -0.2 -9.3 0.7 -19.3 7.9 -24 17.4 -1.7 3.4 -2.4 6.9 -2.6 13 -0.4 7.7 -0.2 8.8 2.7 14.7 3.2 6.3 12.9 16.7 18.1 19.2 4.9 2.2 12.5 4.2 12.8 3.3 0.2 -0.6 1.9 -1 3.8 -1 1.9 0 3.4 -0.4 3.4 -1 0 -0.5 0.9 -1 2 -1 1.1 0 2 -0.4 2 -1 0 -0.5 0.7 -1 1.5 -1 0.8 0 1.5 -0.4 1.5 -1 0 -0.5 0.8 -1 1.8 -1 2.2 0 5.2 -3 5.2 -5.1 0 -0.8 0.9 -2 2 -2.7 1.1 -0.7 2 -1.8 2 -2.5 0 -2.1 3.8 -4.6 8.8 -6 2.6 -0.6 5.3 -1.7 6 -2.4 0.7 -0.7 2.5 -1.6 4 -2 1.5 -0.3 3.3 -1.2 4 -2 0.7 -0.7 2.2 -1.3 3.3 -1.3 1.1 0 2.2 -0.7 2.5 -1.5 0.4 -0.8 1.2 -1.5 2 -1.5 0.8 0 1.4 -0.4 1.4 -1 0 -0.5 0.7 -1 1.5 -1 0.8 0 1.5 -0.4 1.5 -1 0 -0.5 0.9 -1 2 -1 1.1 0 2 -0.7 2 -1.5 0 -0.9 0.9 -1.5 2.1 -1.5 1.2 0 2.3 -0.8 2.6 -2 0.5 -1.8 8.9 -6.8 9.9 -5.8 0.2 0.3 0.9 3.3 1.5 6.7 1.3 7.4 0.1 15.8 -3.4 23.4 -2.3 5 -46.5 66.5 -57.2 79.7 -13.9 17 -34.8 27.8 -58.2 30 -12.7 1.2 -223.3 1.1 -236.3 -0.1 z m 102 -85.2 c 1.3 -0.7 3.1 -2.4 3.9 -3.9 1.3 -2.2 1.3 -3 0.2 -5.2 -0.8 -1.4 -2.1 -2.8 -3 -3.3 -0.9 -0.4 -8.1 -1 -16.1 -1.3 -14.5 -0.5 -14.5 -0.5 -14.8 -10.6 -0.3 -10.2 -0.3 -10.2 12.8 -10.5 13.2 -0.4 13.2 -0.4 16.1 -3.7 3.6 -4.1 3.6 -5.1 -0.2 -8.8 -3 -2.9 -3.2 -2.9 -16 -3.2 -12.9 -0.4 -12.9 -0.4 -12.9 -10.8 0 -10.4 0 -10.4 13.9 -10.4 13.9 0 13.9 0 17 -3.1 1.7 -1.7 3.1 -3.5 3.1 -4.1 0 -0.5 -1.5 -2.5 -3.4 -4.4 -3.4 -3.4 -3.4 -3.4 -21.1 -3.4 -17.7 0 -17.7 0 -21.1 3.4 -3.5 3.5 -3.5 3.5 -3.2 41.1 0.4 47.1 -1.7 43.5 24.6 43.5 12.1 0 18.5 -0.4 20.2 -1.3 z m 48.9 -6 c 1 -2.3 5.1 -13.3 9.2 -24.5 7.3 -20.3 7.3 -20.3 10.7 -20 3.4 0.3 3.4 0.3 11.8 23.2 4.6 12.6 9.1 23.8 10.1 24.8 3.5 3.8 5 4 8.3 1.1 2.9 -2.6 3.7 -5.2 12.5 -39.3 5.2 -20.1 9.5 -37.2 9.5 -38.1 0 -2.5 -5.5 -7.2 -7.7 -6.5 -4.5 1.4 -6.1 5 -11.4 25.4 -5.2 20.2 -5.2 20.2 -8.3 20.2 -3.1 0 -3.1 0 -9.5 -17.8 -8.4 -23.1 -9.8 -26 -13.2 -27.8 -2.7 -1.3 -3 -1.3 -5.9 1.3 -2.3 2.2 -4.5 7.1 -10.3 22.8 -7.3 20 -7.3 20 -10.8 20.3 -3.6 0.3 -3.6 0.3 -8.4 -18.5 -2.6 -10.3 -5.4 -20.1 -6.2 -21.6 -2 -4.1 -5.6 -5.4 -8.7 -3.3 -5.2 3.3 -5.2 2.9 5 42.8 8.7 34.3 9.8 37.5 12.5 40.1 2.9 2.6 3.1 2.7 6 1.2 1.9 -1 3.7 -3.2 4.8 -5.8 z m -163.8 3.7 c 2.4 -2.5 2.4 -2.9 2.7 -24 0.3 -21.4 0.3 -21.4 3.5 -21.4 3 0 4 1.1 18.1 21.3 8.2 11.6 16 22.4 17.4 24 3.4 3.5 6.4 3.4 9.6 -0.4 2.6 -3.1 2.6 -3.1 2.6 -39.8 0 -35.8 -0.1 -36.9 -2.1 -39.5 -3.8 -4.9 -5.6 -5.1 -9.4 -1.3 -3.5 3.5 -3.5 3.5 -3.5 24.6 0 21.1 0 21.1 -3.3 21.1 -3.1 0 -3.9 -0.9 -16.7 -19.2 -18.6 -26.4 -20.5 -28.8 -23.6 -28.8 -1.4 0 -3.5 1.1 -4.9 2.6 -2.5 2.7 -2.5 2.7 -2.5 40 0 37.2 0 37.2 2.6 40.3 3.2 3.8 6.2 4 9.5 0.5 z "/><path d="M 333 104 c 0 -0.5 0.9 -1.4 2 -2 1.7 -0.9 2 -0.8 2 1 0 1.3 -0.7 2 -2 2 -1.1 0 -2 -0.4 -2 -1 z "/><path d="M 338 101.1 c 0 -0.8 5.2 -3.1 7.1 -3.1 1.9 0 0.8 2.8 -1.3 3.4 -3.3 0.8 -5.8 0.7 -5.8 -0.3 z "/><path d="M 382.9 43.8 c -6.3 -8.9 -6.3 -8.8 -3.9 -8.8 1.3 0 2 0.7 2 2 0 1.1 0.7 2 1.5 2 0.8 0 1.5 0.6 1.5 1.4 0 0.8 0.7 1.6 1.5 2 0.8 0.3 1.5 1.2 1.5 2.1 0 0.8 0.5 1.5 1 1.5 0.6 0 1 0.6 1 1.4 0 3.4 -2 2.2 -6.1 -3.6 z "/></g><g fill="%23f25f5c"><path d="M 53.5 171.7 c -3.5 -3.5 -3.5 -3.5 -3.5 -43.6 0 -44.1 -0.1 -43.6 6 -46.1 1.7 -0.7 4.4 -1 6.5 -0.6 4.2 0.8 5.5 2.4 24.5 29.5 13.5 19.2 13.5 19.2 14 -2.4 0.5 -21.7 0.5 -21.7 3.8 -24.6 4.6 -4.2 9.3 -4 13.8 0.5 3.4 3.4 3.4 3.4 3.4 43.5 0 40.1 0 40.1 -2.7 43.1 -3.7 4.2 -9.7 5.1 -13.5 2.1 -1.4 -1.2 -9.7 -12.2 -18.5 -24.6 -15.8 -22.6 -15.8 -22.6 -16.3 -1 -0.5 21.5 -0.5 21.5 -3.1 24.1 -1.6 1.6 -4.1 2.8 -6.7 3.1 -3.7 0.5 -4.5 0.2 -7.7 -3 z "/><path d="M 135.8 172.1 c -3.3 -2.9 -3.3 -2.9 -3.6 -43.6 -0.3 -51.4 -2.6 -47.5 27.3 -47.5 20.7 0 20.7 0 24.1 3.4 4.7 4.7 4.8 10.1 0.3 14.5 -3.1 3.1 -3.1 3.1 -17 3.1 -13.9 0 -13.9 0 -13.9 7.4 0 7.4 0 7.4 12.9 7.8 12.8 0.3 13 0.3 16 3.2 4.3 4.1 4.4 10.2 0.2 14.8 -2.9 3.3 -2.9 3.3 -16.1 3.7 -13.1 0.3 -13.1 0.3 -12.8 7.5 0.3 7.1 0.3 7.1 14.8 7.6 8 0.3 15.3 0.9 16.2 1.3 1.9 1 4.8 6.6 4.8 9.4 0 2.9 -3.8 8.3 -6.6 9.3 -1.4 0.6 -11.7 1 -22.9 1 -20.5 0 -20.5 0 -23.7 -2.9 z "/><path d="M 215.1 172.3 c -2.7 -2.6 -3.8 -5.9 -12.5 -40.2 -5.3 -20.5 -9.6 -38.9 -9.6 -40.7 0 -9.2 14 -13.3 18.8 -5.5 1 1.6 3.9 11.5 6.6 22 2.7 10.6 5.3 18.8 5.7 18.4 0.4 -0.4 3.9 -9.6 7.8 -20.3 5.6 -15.2 7.8 -20.1 10.1 -22.3 5.2 -4.7 13.2 -2.9 16.3 3.5 0.8 1.8 4.3 10.9 7.7 20.3 3.4 9.3 6.5 17.8 6.9 18.9 0.5 1.2 2.5 -4.8 6 -18.5 2.9 -11.2 6 -21.2 6.9 -22.3 2.4 -2.7 7.5 -4.6 10.3 -3.9 3.3 0.8 7.7 5.1 8.4 8.2 0.3 1.6 -3.3 17.2 -9.4 41.1 -9.3 36 -10.2 38.7 -13.1 41.3 -2.1 1.8 -4.1 2.7 -6.5 2.7 -6.6 0 -8.7 -3.2 -17.5 -27.5 -4.4 -12.1 -8.3 -22.7 -8.6 -23.5 -0.6 -1.5 -2.4 2.8 -12.9 31.4 -5 13.7 -6.2 16.1 -8.9 17.7 -4.5 2.7 -9 2.4 -12.5 -0.8 z "/></g><g fill="%2350514f"><path d="M 378.5 145.9 c 0.4 -1.1 -1.6 -1.4 -10.2 -1.4 -12.8 0 -17.3 -1.6 -25.2 -9 -5.6 -5.2 -8.9 -12 -10.1 -20.8 -1.3 -8.8 -0.5 -11.4 4.2 -13.8 4.1 -2.1 13.3 -4 15.4 -3.2 0.9 0.3 1 2.7 0.7 8.1 -0.7 10.6 1 14.5 7.3 17.4 5.7 2.5 14.7 2 21.6 -1 2.4 -1.1 6.4 -2.9 9 -4 10.3 -4.5 27.7 -18.3 36.9 -29.2 11.1 -13.2 18.2 -28.2 19.5 -40.7 0.9 -8.1 -1.9 -14.7 -7 -16.8 -10.1 -4.2 -29.6 1.3 -45.2 12.8 -3.3 2.4 -6.4 4.6 -7 5 -0.6 0.4 -3.4 -2.6 -6.7 -7.3 -3.2 -4.3 -5.7 -8.1 -5.7 -8.3 0 -0.9 17.7 -12.5 23.7 -15.6 3.5 -1.7 10.3 -4.3 15.3 -5.7 12.2 -3.5 25.7 -3.2 34 0.7 6.9 3.3 12.2 8.6 15.8 15.8 2.5 5.1 2.7 6.5 2.6 17.1 0 9.9 -0.4 12.6 -2.8 19.5 -5.1 14.9 -14.4 29.9 -26.3 42.5 -4.5 4.8 -6.3 7.5 -6.3 9.4 0 2.2 -0.7 3 -3.6 4.2 -2 0.8 -3.3 1.8 -3 2.1 1 1 -1.5 3.3 -3.5 3.3 -1.1 0 -1.8 0.6 -1.7 1.2 0.2 0.7 -0.7 1.4 -2 1.6 -1.2 0.2 -2 0.8 -1.7 1.3 0.4 0.5 -0.3 0.9 -1.5 0.9 -1.2 0 -1.8 0.5 -1.5 1 0.3 0.6 -0.3 1 -1.5 1 -1.2 0 -1.9 0.4 -1.5 1 0.3 0.5 -1.3 1.4 -3.5 2 -2.2 0.6 -3.8 1.5 -3.5 2 0.4 0.6 -0.3 1 -1.5 1 -2 0 -6 1.6 -7 2.9 -0.6 0.8 -9.4 3.2 -13.8 3.9 -2.4 0.3 -3.1 0.1 -2.7 -0.9 z "/></g><g fill="%23ccad66"><path d="M 347 168.1 c -0.8 -0.6 -1.7 -0.8 -2.2 -0.5 -0.4 0.3 -1.5 0.1 -2.5 -0.4 -1 -0.6 -3.1 -1.6 -4.8 -2.3 -6.2 -2.9 -17.2 -16.5 -15.1 -18.7 0.3 -0.3 2.3 1.5 4.5 3.9 5.8 6.6 12.9 10.1 21.5 10.7 3.9 0.2 9 -0.1 11.3 -0.7 5.6 -1.5 13.1 -6.7 16.8 -11.7 2.6 -3.5 3.9 -4.3 9.7 -5.8 12 -3.1 30.5 -13.8 41.6 -23.9 4.2 -4 4.2 -4 4.2 -1.3 0 2.2 -0.7 3 -3.6 4.2 -2 0.8 -3.3 1.8 -3 2.1 1 1 -1.5 3.3 -3.5 3.3 -1.1 0 -1.8 0.6 -1.7 1.2 0.2 0.7 -0.7 1.4 -2 1.6 -1.2 0.2 -2 0.8 -1.7 1.3 0.4 0.5 -0.3 0.9 -1.5 0.9 -1.2 0 -1.8 0.5 -1.5 1 0.3 0.6 -0.3 1 -1.5 1 -1.2 0 -1.9 0.4 -1.5 1 0.3 0.5 -1.3 1.4 -3.5 2 -2.2 0.6 -3.8 1.5 -3.5 2 0.4 0.6 -0.3 1 -1.5 1 -2 0 -6 1.6 -7 2.9 -0.3 0.4 -2.6 1.2 -5.2 1.9 -5 1.2 -8.8 3.8 -8.8 5.9 0 0.6 -0.8 1.8 -1.7 2.5 -1 0.7 -1.9 2 -2.1 2.8 -0.6 2.4 -3.4 5 -5.4 5 -1.1 0 -1.6 0.5 -1.3 1 0.3 0.6 -0.3 1 -1.5 1 -1.2 0 -1.8 0.5 -1.5 1 0.3 0.6 -0.5 1 -1.9 1 -1.3 0 -2.6 0.6 -2.8 1.2 -0.3 0.7 -1.8 1.1 -3.6 1 -1.8 -0.1 -3.2 0.2 -3.2 0.8 0 1.2 -7 1.3 -9 0.1 z "/></g></svg>');
     margin-left: 8px;
     vertical-align: text-top;
 }

 .btn {
     color: #0f4b95 !important;
 }

 .bg-info {
     background: #7ECFDD !important;
     color: #303030 !important
 }

 .bg-info:hover {
     background-color: #2980B9 !important;
 }

 .btn-grad {
     background-image: linear-gradient(to right, #389fd9 0%, #1c397b 51%, #389fd9 100%);
     background-size: 200% auto;
     color: var(--bs-light);
     box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
     padding: 0.5rem;
     border: 0;
     border-radius: var(--bs-border-radius) !important;
     font-weight: bold;
 }

 .btn-grad.active,
 .btn-grad:active {
     box-shadow: 0 0 20px #eee;
     background: #60560B !important;
 }

 .taglink {
     font-size: 1.1rem;
     font-family: 'Roboto Slab';
 }

 .section {
     margin-top: 0rem;
 }

 textarea.form-control-lg {
     border: 1px solid #ccc !important;
 }

 .section .header {
     background: linear-gradient(220deg, #1c397b, #389fd9, #1c397b, #389fd9);
     background-repeat: no-repeat;
     font-size: var(--font-size-md);
     text-transform: uppercase;
     display: flex;
     justify-content: center;
     text-align: center;
     border-radius: var(--bs-border-radius) !important;
     margin-top: 1px;
     padding: 0.3rem 0;
 }

 .section h2.header {
     background: linear-gradient(220deg, #1c397b, #389fd9, #1c397b, #389fd9);
     background-repeat: no-repeat;
     font-size: var(--font-size-md);
     text-transform: uppercase;
     display: flex;
     justify-content: center;
     text-align: center;
     border-radius: var(--bs-border-radius) !important;
     margin-top: 1px;
     padding: 0.6rem 0;
 }

 .danhsach {
     display: flex !important;
     flex-wrap: wrap;
 }

 .danhsach .f-title {
     margin-left: 6px;
 }

 .section .content {
     padding: 1rem;
     color: #212529;
     background-color: white;
 }

 html.dark-mode .section .content {
     background-color: #111010;
 }

 .section .content h2 {
     font-size: var(--font-size-md);
 }

 .main-content .section .header {
     color: var(--bs-light);
 }

 .sidebar .section .header {
     background-size: 100% 5px;
     padding-top: 15px;
     background-color: #edf1f0;
 }

 .sidebar .section {
     box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.10);
     box-sizing: border-box;
     background: #fff;
 }

 .song-tabs {
     font-size: var(--font-size-md);
     max-width: calc(100% - 45px);
     line-height: 1.5;
     overflow: hidden;
 }

 .song-tabs p {
     color: #30363c;
 }

 .song-tabs span.chord {
     color: #bf5353;
     cursor: pointer;
 }

 .song-tabs .view-ha {
     position: absolute;
     top: 0px;
     left: 0px;
     z-index: 1000;
     visibility: hidden;
     opacity: 0;
     padding-left: 0px;
     padding-right: 0px;
     width: 160px;
     transition: visibility 0s, opacity 0.5s linear;
 }

 .song-tabs .google-auto-placed {
     max-width: calc(100% - 40px);
 }

 .ha-wrap {
     display: flex;
     position: relative;
     text-align: center;
     padding: 0.7rem;
     border: 1px solid;
     background: var(--bs-gray-100);
     justify-content: space-evenly;
     flex-direction: column;
     width: 130px;
     height: 180px;
     overflow: hidden;
     box-sizing: content-box;
 }

 .ha-wrap .title {
     margin-bottom: 0;
     font-weight: bolder;
     font-size: 16px;
 }

 .list-tt {
     display: flex;
     flex-direction: row;
     width: fit-content;
     gap: 15px;
 }

 .ha-inner {
     display: flex;
     white-space: nowrap;
     position: relative;
     width: 130px;
     justify-content: center;
 }

 .ha-inner .text {
     display: block;
     width: 12px;
     height: 85px;
     background: transparent url(../img/img-new/text-1.png) center center no-repeat;
     position: relative;
     top: -6px;
 }

 .ha-inner .k-pos-2 {
     left: 45px !important;
 }

 .ha-inner .k-pos-3 {
     left: 65px !important;
 }

 .ha-inner .k-pos-4 {
     left: 85px !important;
 }

 .ha-inner .k-pos-5 {
     left: 105px !important;
 }

 .ha-inner .k {
     position: absolute;
     display: block;
     width: 5px;
     background-color: #3e49c5f5;
     top: -5px;
     left: 26px;
     z-index: 10;
 }

 .ha-inner .k1 {
     height: 12px;
 }

 .ha-inner .k2 {
     height: 27px;
 }

 .ha-inner .k3 {
     height: 42px;
 }

 .ha-inner .k4 {
     height: 57px;
 }

 .ha-inner .k5 {
     height: 73px;
 }

 .ha-inner .k6 {
     height: 84px;
 }

 .ha-inner .dash {
     position: relative;
     display: block;
     width: 91px;
     height: 75px;
     background: transparent url(../img/dash.png) center center no-repeat;
     margin-left: 5px;
 }

 .ha-inner .dash .numb {
     position: absolute;
     width: 16px;
     height: 16px;
     display: block;
     color: #fff;
     border-radius: 50%;
     background: #363895;
     text-align: center;
     font-size: 10px;
 }

 .ha-inner .dash .pos11,
 .ha-inner .dash .pos21,
 .ha-inner .dash .pos31,
 .ha-inner .dash .pos41,
 .ha-inner .dash .pos51 {
     top: -8px;
 }

 .ha-inner .dash .pos12,
 .ha-inner .dash .pos22,
 .ha-inner .dash .pos32,
 .ha-inner .dash .pos42,
 .ha-inner .dash .pos52 {
     top: 7px;
 }

 .ha-inner .dash .pos13,
 .ha-inner .dash .pos23,
 .ha-inner .dash .pos33,
 .ha-inner .dash .pos43,
 .ha-inner .dash .pos53 {
     top: 22px;
 }

 .ha-inner .dash .pos14,
 .ha-inner .dash .pos24,
 .ha-inner .dash .pos34,
 .ha-inner .dash .pos44,
 .ha-inner .dash .pos54 {
     top: 37px;
 }

 .ha-inner .dash .pos15,
 .ha-inner .dash .pos25,
 .ha-inner .dash .pos35,
 .ha-inner .dash .pos45,
 .ha-inner .dash .pos55 {
     top: 53px;
 }

 .ha-inner .dash .pos16,
 .ha-inner .dash .pos26,
 .ha-inner .dash .pos36,
 .ha-inner .dash .pos46,
 .ha-inner .dash .pos56 {
     top: 68px;
 }

 .ha-inner .dash .pos11,
 .ha-inner .dash .pos12,
 .ha-inner .dash .pos13,
 .ha-inner .dash .pos14,
 .ha-inner .dash .pos15,
 .ha-inner .dash .pos16 {
     left: 0px;
 }

 .ha-inner .dash .pos21,
 .ha-inner .dash .pos22,
 .ha-inner .dash .pos23,
 .ha-inner .dash .pos24,
 .ha-inner .dash .pos25,
 .ha-inner .dash .pos26 {
     left: 19px;
 }

 .ha-inner .dash .pos31,
 .ha-inner .dash .pos32,
 .ha-inner .dash .pos33,
 .ha-inner .dash .pos34,
 .ha-inner .dash .pos35,
 .ha-inner .dash .pos36 {
     left: 38px;
 }

 .ha-inner .dash .pos41,
 .ha-inner .dash .pos42,
 .ha-inner .dash .pos43,
 .ha-inner .dash .pos44,
 .ha-inner .dash .pos45,
 .ha-inner .dash .pos46 {
     left: 58px;
 }

 .ha-inner .dash .pos51,
 .ha-inner .dash .pos52,
 .ha-inner .dash .pos53,
 .ha-inner .dash .pos54,
 .ha-inner .dash .pos55,
 .ha-inner .dash .pos56 {
     left: 82px;
 }

 .ha-inner .round {
     display: block;
     position: relative;
     top: -4.5px;
 }

 .ha-inner .round {
     display: block;
     position: relative;
     top: -4.5px;
 }

 .ha-inner .round span {
     width: 12px;
     height: 12px;
     line-height: 12px;
     display: block;
     margin-left: 5px;
     margin-bottom: 2.5px;
 }

 .ha-inner .round span:last-child {
     margin-bottom: 0px;
 }

 .ha-inner .round .c-box {
     background: transparent url(../img/img-new/circle-1.png) center center no-repeat;
 }

 .ha-inner .round .r-box {
     background: transparent url(../img/img-new/round-1.png) center center no-repeat;
 }

 .ha-inner .round .x-box {
     background: transparent url(../img/img-new/x-1.png) center center no-repeat;
 }

 /* HAP: dark mode - anh PNG mau xam (187,187,187), invert don thuan lam toi hon.
    Dung brightness(0) ep ve den tuyet doi, roi invert(1) thanh trang tinh */
 html.dark-mode .ha-inner .dash,
 html.dark-mode .ha-inner .text,
 html.dark-mode .ha-inner .round .c-box,
 html.dark-mode .ha-inner .round .r-box,
 html.dark-mode .ha-inner .round .x-box {
     filter: brightness(0) invert(1);
 }

 .control-chrod {
     display: flex;
     justify-content: space-between;
     padding: 0.2rem 0.5rem;
 }

 .control-chrod button {
     border: 0;
     padding: 0;
     background: none;
 }

 .control-chrod button:hover {
     text-decoration: underline;
 }

 .bang-hop-am {
     justify-content: space-evenly;
     display: flex;
     flex-wrap: wrap;
     row-gap: 1rem;
 }

 .list-pl {
     margin-top: 10px;
     display: flex;
     justify-content: center;
 }

 .xbhadd_right {
     float: right !important;
 }

 .section-boloc-xp .header {
     padding: 0 0 0px;
     margin: 0 0 15px;
     color: rgba(0, 0, 0, 0.75);
     border-bottom: 1px solid #e8e8e8;
 }

 .clear:after,
 .clear:before {
     display: block;
     content: '';
 }

 .clear:after {
     clear: both;
 }

 .left,
 .entry-content .alignleft,
 .social a,
 .singer li,
 .composer li,
 .song-tab-control a,
 .ha-inner .text,
 .ha-inner .dash,
 .ha-inner .round {
     float: left;
 }

 .right,
 .entry-content .alignright,
 .primary-area .search-form {
     float: right;
     margin-right: 5px;
 }

 .bl {
     display: block;
 }

 .entry-content {
     text-align: justify;
     color: #333333;
 }

 .entry-content p {
     margin-bottom: 10px;
 }

 .entry-content blockquote {
     font-style: italic;
     padding-left: 40px;
     border-left: 2px solid #3399cc;
 }

 .entry-content img {
     max-width: 665px;
     height: auto;
 }

 .entry-content img.aligncenter {
     display: block;
     margin: 0 auto;
 }

 .entry-content figure {
     margin: 0px;
     margin-bottom: 10px;
 }

 .entry-content .dp-caption-text {
     font-size: 12px;
     font-style: italic;
     color: #666;
 }

 .entry-content .aligncenter .dp-caption-text {
     text-align: center;
 }

 .entry-content .alignleft {
     margin-right: 15px;
     text-align: center;
 }

 .entry-content .alignright {
     margin-left: 15px;
     text-align: center;
 }

 .entry-content em {
     font-style: italic;
 }

 .entry-content strong {
     font-weight: bold;
 }

 .entry-content ul,
 .entry-content ol {
     margin-bottom: 10px;
     padding-left: 40px;
 }

 .entry-content ul li,
 .entry-content ol li {
     margin-bottom: 5px;
     list-style: disc;
 }

 .entry-content a,
 .empty-content a {
     color: #3399cc;
 }

 .entry-content a:hover,
 .empty-content a:hover {
     text-decoration: underline;
 }

 .term-title {
     margin-bottom: 10px !important;
 }

 .term-group {
     margin-bottom: 20px;
     color: #333333;
 }

 .share-area .fb-share,
 .share-area .tw-share {
     margin-right: 10px;
 }

 .head-top {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
 }

 .sidebar-yc {
     color: #7d7676;
     width: 375px;
     margin-top: 30px;
     margin-bottom: 30px;
     background: #f3f3f3;
     padding: 0 !important;
 }

 .top-block {
     line-height: 51px;
     background-color: #1283b0;
     border-radius: 4px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -o-border-radius: 4px;
 }

 .top-block .left {
     color: #ffffff;
     font-weight: bold;
 }

 .block.total-yc .top-block {
     background: #8abaea;
     border-radius: 5px;
 }

 .block.total-yc .top-block .ds-yc-title {
     background: url(../img/img-new/icon-sbh-title1.png) no-repeat center left;
     color: #ffffff;
     font-size: 15px;
     font-family: MYRIADPRO-SEMIBOLD;
     text-transform: uppercase;
     padding-left: 40px;
 }

 .block.composer .col1 .top-block {
     height: auto;
     border-radius: 0;
     line-height: initial;
     position: relative;
     background: #f3f3f3;
     border-bottom: 1px solid #d6d6d5;
 }

 .block.composer .col1 .top-block h4 {
     color: #FFF;
     margin: 0;
     padding: 5px 0px 5px 5px;
     padding-left: 38px;
     background: url(../img/img-new/icon-music-title.png) no-repeat center left;
     font-size: 18px;
     text-transform: uppercase;
     font-family: MYRIADPRO-SEMIBOLD;
 }

 .top-block h4 {
     text-transform: uppercase;
     font-size: 16px;
     padding-left: 10px;
     color: #FFF;
 }

 .singer h4 {
     background: transparent url(../img/icon-singer.png) left center no-repeat;
 }

 .type h4 {
     background: transparent url(../img/type.png) left center no-repeat;
 }

 .view h4 {
     padding-left: 50px;
 }

 .home-news h4,
 .composer h4 {
     color: #000000;
     margin: 0;
     padding: 0px 10px;
     padding-left: 60px;
     background: url(../img/img-new/icon-music-title.png) no-repeat center left 25px;
     font-size: 18px;
     text-transform: uppercase;
     font-family: MYRIADPRO-SEMIBOLD;
 }

 .singer .owl-item,
 .composer .owl-item {
     width: 33.33%;
     text-align: center;
 }

 .singer li img,
 .composer li img {
     display: block;
     margin: 0 auto;
 }

 .singer li a,
 .composer li a {
     color: #484747;
     display: block;
     padding: 0 3px;
     font-weight: 600
 }

 .block.composer .col1 .top-block .control {
     position: absolute;
     right: 29px;
     top: 50%;
     transform: translateY(-50%);
 }

 .control a {
     display: inline-block;
     text-indent: -20000px;
     width: 6px;
     height: 11px;
     vertical-align: middle;
 }

 .control .next {
     background: transparent url(../img/img-new/icon-arrow.png) no-repeat center;
     margin-left: 10px;
     background-position: right;
 }

 .control .prev {
     background: transparent url(../img/img-new/icon-arrow.png) no-repeat center;
     background-position: left;
 }

 .type li a {
     color: #fff;
     display: inline-block;
     padding: 8px 20px;
     background: transparent url(../img/type-arrow.png) left center no-repeat;
 }

 .type ul {
     padding: 8px;
 }

 .type li {
     background-color: #121313;
     border: 1px solid #000;
     padding: 0 25px;
     margin-bottom: 4px;
 }

 .view .inner {
     padding-bottom: 10px;
 }

 .view ul {
     padding: 10px;
     background: #ffffff;
 }

 .view ul li {
     padding-bottom: 10px;
 }

 .view ul li:last-child {
     padding-bottom: 10px;
 }

 .view ul li p {
     color: #000000;
 }

 .view a {
     color: #606e76;
     padding: 8px 0px;
     display: inline;
 }

 .yc a {
     background: transparent url(../img/icon-yc.png) repeat-x;
     border-radius: 7px;
     color: #fff;
     font-size: 12px;
     display: inline-block;
     height: 52px;
     line-height: 52px;
     padding: 0 19px 0px 55px;
     width: 182px;
     position: relative;
     text-transform: uppercase;
 }

 .yc a:first-child {
     float: left;
 }

 .yc a:nth-child(2) {
     float: right;
 }

 .yc a:before,
 .yc a:after {
     position: absolute;
     display: block;
     content: '';
 }

 .yc a:before {
     width: 29px;
     height: 29px;
     top: 10px;
     left: 14px;
 }

 .yc a:nth-child(2):before {
     background: transparent url(../img/pen.png);
 }

 .yc a:first-child:before {
     background: transparent url(../img/ycha.png);
 }

 .newsletter {
     padding: 0 13px;
 }

 .newsletter p {
     color: #3399cc;
     text-transform: uppercase;
     margin-bottom: 15px;
 }

 .newsletter form {
     height: 35px;
     line-height: 35px;
     background: transparent url(../img/form-bg.png) repeat-x;
     border-radius: 7px;
     -webkit-border-radius: 7px;
     -moz-border-radius: 7px;
     -o-border-radius: 7px;
 }

 .newsletter input {
     border: 1px solid #7F7F7F;
     border-radius: 7px;
     -webkit-border-radius: 7px;
     -moz-border-radius: 7px;
     -o-border-radius: 7px;
     color: #fff;
     padding: 4px 40px;
     background-color: #3794bd;
     margin-left: 12px;
     outline: none;
     position: relative;
     top: 1px;
     width: 285px;
 }

 .newsletter input::-webkit-input-placeholder {
     color: #fff;
 }

 .newsletter input:-moz-placeholder {
     color: #fff;
 }

 .newsletter input::-moz-placeholder {
     color: #fff;
 }

 .newsletter input:-ms-input-placeholder {
     color: #fff;
 }

 .newsletter button {
     cursor: pointer;
     outline: none;
     border: none;
     background: none;
     color: #292928;
     margin-left: 15px;
     font-weight: bold;
 }

 .social {
     padding: 0 20px;
     margin: 20px 0;
 }

 .social a {
     display: block;
     margin-right: 10px;
     width: 35px;
     height: 35px;
     text-indent: -20000px;
 }

 .social .fb {
     background: transparent url(../img/icon-fb.png);
 }

 .social .tw {
     background: transparent url(../img/icon-tw.png);
 }

 .social .gg {
     background: transparent url(../img/icon-gg.png);
 }

 .social .u2b {
     background: transparent url(../img/icon-u2b.png);
 }

 .social .rss {
     background: transparent url(../img/icon-rss.png);
 }

 .share {
     padding: 15px 20px 30px;
 }

 .share .fb-share {
     margin-right: 10px;
 }

 .guitar-icon {
     height: 42px;
     width: 42px;
     background: url(../img/guitar-icon.png) center;
     background-size: contain;
 }

 .writer-icon {
     height: 20px;
     width: 20px;
     background: url(../img/writer-icon.png) center;
     background-size: contain;
 }

 .type-icon {
     height: 20px;
     width: 20px;
     background: url(../img/type-icon.png) center;
     background-size: contain;
 }

 .melody-icon {
     height: 20px;
     width: 20px;
     background: url(../img/melody-icon.png) center;
     background-size: contain;
 }

 .favorites .songs {
     border-bottom: none;
 }

 .background.songs {
     margin: 0;
     float: left;
     width: 100%;
 }

 .background.songs li {
     float: left;
     width: 100%;
     padding-left: 0;
 }

 .songs {
     margin: -2px 0 25px;
     padding-bottom: 20px;
     border-bottom: 1px solid #fff;
 }

 .songs li {
     padding-left: 35px;
     margin-bottom: 20px;
     font-weight: 600;
     border-bottom: 1px solid #cdcccb;
     padding-bottom: 8px;
 }

 .songs li:last-child {
     margin-bottom: 0px;
 }

 .songs li .top-title {
     line-height: 25px;
     margin-left: -30px;
     padding-left: 30px;
     background: transparent url(../img/img-new/guitar.png) no-repeat;
 }

 .songs a {
     color: #16758C;
 }

 .songs a.sheet-nhac {
     float: right;
     background: #32b6e4;
     border: 1px solid #32b6e4;
     border-radius: 4px;
     color: #fff;
     padding: 0px 5px;
     font-size: small;
 }

 .songs a.sheet-nhac:hover {
     box-shadow: none;
     background: #333;
     color: #ffffff;
 }

 .songs li a.group:hover {
     background: #45515A;
     box-shadow: none;
     color: #ffffff;
 }

 .songs .rhythm,
 .songs .sing {
     font-size: 13px;
     font-style: italic;
     margin-bottom: 7px;
     color: #718cad;
     float: left;
     text-align: justify;
     padding-left: 20px;
 }

 .songs .sing {
     background: url(../img/icon-mic.png) no-repeat;
     padding-left: 22px;
     max-width: 465px;
 }

 .songs .rhythm span {
     color: #e88487;
 }

 .songs li .top-title h3,
 .songs li .top-title h1 {
     text-transform: uppercase;
     margin-right: 15px;
 }

 .composer li h3 {
     margin-bottom: 5px;
 }

 .songs li .top-title p {
     color: #7f8d98;
 }

 .songs li .top-title p a {
     color: #3399cc;
 }

 .composer .inner {
     padding: 20px 23px 2px;
 }

 .composer {
     border-bottom: 1px solid #fff;
 }

 .composer .col1 {
     width: 420px;
     margin-right: 20px;
     border: 1px solid #d6d6d5;
 }

 .composer .col2 {
     width: 225px;
     font-style: italic;
     font-size: 13px;
     text-align: justify;
     color: #676565;
     font-weight: 600;
 }

 .composer .col2 h3 {
     font-style: normal;
     text-transform: uppercase;
     text-align: center;
     margin-bottom: 10px;
     border: 1px solid #d6d6d5;
 }

 .composer .col2 h3 a {
     color: #000000;
     display: inline-block;
     padding: 10px 30px;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -o-border-radius: 5px;
     font-weight: 600;
 }

 .home-news {
     margin-bottom: 15px;
 }

 .home-news .loop-post p {
     height: 54px;
     overflow: hidden;
 }

 .home-news .thumb-wrap {
     padding: 11px 7px;
     background: #3a3432 url(../img/content.jpg) repeat;
     display: block;
     box-shadow: 3px 3px 6px #000;
 }

 .home-news .loop-post .content-post .info {
     margin-left: 155px;
 }

 .home-news .loop-post .content-post {
     margin-bottom: 0px;
 }

 .home-news .loop-post .content-post .info h3 {
     padding-top: 13px;
 }

 .home-news .loop-post .content-post .info h3 a {
     color: #3399cc;
 }

 .home-news .loop-post .content-post .info .read-more {
     display: none;
 }

 .loop-post .content-post {
     margin-bottom: 15px;
 }

 .loop-post .content-post img {
     display: block;
 }

 .loop-post .content-post .info {
     margin-left: 137px;
 }

 .loop-post .content-post .info h3 {
     font-weight: bold;
     margin-bottom: 10px;
 }

 .loop-post .content-post .info h3 a {
     color: #fff;
 }

 .loop-post .content-post .info p {
     font-size: 13px;
     color: #666;
     margin-bottom: 5px;
 }

 .home .home-news .loop-post .content-post .info p {
     height: 37px;
     overflow: hidden;
 }

 .loop-post .content-post .info .read-more {
     display: inline-block;
     font-style: italic;
     color: #3399cc;
 }

 .songs li .top-title h3 a {
     color: #16758C;
     font-weight: 600;
 }

 .breadcrumbs {
     padding: 15px 0px;
     color: #3399cc;
 }

 .breadcrumbs a {
     color: #3399cc;
 }

 .archive-template h1.term-title {
     margin-top: 0px;
     color: #333333;
 }

 .archive-template .term-desc {
     color: #333333;
 }

 .archive-template .songs {
     border-bottom: none;
 }

 .bai-hat-template .entry-header,
 .content-bang-ha .entry-header {
     font-size: 16px;
     line-height: 20px;
     text-transform: uppercase;
     color: #3399cc;
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
 }

 .top-song {
     margin-bottom: 2px;
     background: #edf2f5e3;
 }

 .top-song p {
     margin-bottom: 10px;
 }

 .top-song a {
     color: #6699cc;
 }

 .top-song .song-writer {
     border-right: 1px dotted #b5c0d8;
     padding-right: 10px;
     width: 60%;
 }

 .head-top.custom-head-top .search-form .search-field {
     width: 300px;
 }

 .top-song .song-writer .song-info {
     margin-left: 132px;
     color: #656d71;
     font-weight: 600;
 }

 .top-song .uploader {
     padding-left: 10px;
 }

 .top-song .uploader .song-info {
     margin-right: 15px;
     color: #656d71;
     font-weight: 600;
 }

 .top-song .person-thumb {
     padding: 15px;
 }

 .top-song .person-thumb,
 .top-song .person-thumb img {
     display: block;
     border-radius: 4px;
 }

 .top-song .song-writer p {
     line-height: 25px;
     padding-left: 30px;
 }

 .control-cmt-tabs a,
 .song-tab-control a,
 .tab-search-control a {
     display: block;
     margin-right: 5px;
     text-transform: uppercase;
     color: #000000;
     padding: 10px 15px;
     border-top-left-radius: 5px;
     -webkit-border-top-left-radius: 5px;
     -moz-border-top-left-radius: 5px;
     -o-border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     -webkit-border-top-right-radius: 5px;
     -moz-border-top-right-radius: 5px;
     -o-border-top-right-radius: 5px;
     border-top: 1px solid #bbb7b7;
     background: -webkit-linear-gradient(#878282, #2a2a2a);
     background: -o-linear-gradient(#878282, #2a2a2a);
     background: -moz-linear-gradient(#878282, #2a2a2a);
     background: linear-gradient(#dddfe2, #cdcccb);
 }

 .song-tab-control a:last-child,
 .tab-search-control a:last-child {
     margin-right: 0px;
 }

 .control-cmt-tabs {
     margin-top: 5px;
 }

 .control-cmt-tabs .active,
 .song-tab-control .active,
 .tab-search-control .active {
     background: #6cd6ef;
     color: #000000;
     border: 1px solid #ddd;
     border-bottom: none;
 }

 .song-tabs .tab {
     display: none;
 }

 .song-tabs .tab.display {
     display: block;
 }

 .sound .inner-sound {
     padding: 3px;
 }

 .sound audio {
     width: 100%;
     position: relative;
     margin-top: 10px;
 }

 .sound {
     border-bottom: none !important;
 }

 .block.video iframe {
     min-height: 250px;
 }

 .sound.view h4,
 .list-cl h4,
 .list-hop-am h4 {
     background: transparent url(../img/icon-k.png) left center no-repeat;
 }

 .list-cl {
     margin-bottom: 20px !important;
 }

 .list-cl ul {
     margin-top: 10px;
     max-height: 70px;
     overflow: hidden;
     -webkit-transition: max-height 0.1s;
     transition: max-height 0.1s;
 }

 .list-cl ul li {
     width: 33.33%;
     padding: 0 3px;
     text-align: center;
     margin-bottom: 10px;
     float: left;
 }

 .list-cl ul li a {
     display: block;
     font-size: 9px;
     text-transform: uppercase;
     color: #fff;
     padding: 5px 3px;
     border-radius: 2px;
     -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
     -o-border-radius: 2px;
     border-top: 1px solid #bbb7b7;
     background: -webkit-linear-gradient(#878282, #2a2a2a);
     background: -o-linear-gradient(#878282, #2a2a2a);
     background: -moz-linear-gradient(#878282, #2a2a2a);
     background: linear-gradient(#edeff1, #2a2a2a);
 }

 .list-cl ul li a.active,
 .list-cl ul li a:hover {
     background: #32b6e4;
 }

 .list-cl ul li a span {
     color: #f3efed;
     text-transform: none;
     font-size: 11px;
     font-weight: bold;
 }

 .list-cl ul.hidden-list {
     max-height: 70px;
     overflow: hidden;
 }

 .list-cl .show-full-list,
 .show-full-ha {
     display: inline-block;
     margin-top: 10px;
     font-weight: 600;
     position: relative;
 }

.content-bang-ha ul.list-hop-am {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}
 .content-bang-ha .list-hop-am li {
     width: 20%;
     float: left;
 }
@media (max-width: 991.98px) {
    .content-bang-ha .list-hop-am li {
        width: 33.33%;
    }
}
@media (max-width: 575.98px) {
    .content-bang-ha .list-hop-am li {
        width: 50%;
    }
}

 .tools-area .group {
     background: #ebebeb;
     margin-bottom: 1px;
     border-radius: 3px;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     -o-border-radius: 3px;
 }

 .tools-area .bot {
     width: 39px;
     height: 1px;
     display: block;
     position: relative;
     right: -1px;
 }

 .tools-area .el,
 .tools-area .sp-title {
     cursor: pointer;
     display: block;
     width: 39px;
     height: 39px;
     text-indent: -20000px;
     background: transparent center center no-repeat;
     border: none;
 }

 .tools-area .favorites {
     background-image: url(../img/nonstar.png);
 }

 .tools-area .favorites.active {
     background-image: url(../img/star.png);
 }

 .tools-area .up-tone {
     background-image: url(../img/up-tone.png);
 }

 .tools-area .down-tone {
     background-image: url(../img/reset-tone.png);
 }

 .tools-area .reset-tone {
     background-image: url(../img/reset-color.png);
 }

 .tools-area .reset-speed {
     background-image: url(../img/reset-scroll.png);
 }

 .tools-area .sp-title {
     background-image: url(../img/scroll.png);
 }

 .tools-area .up-fonts {
     background-image: url(../img/up-fonts.png);
 }

 .tools-area .down-fonts {
     background-image: url(../img/reset-fonts.png);
 }

 .tools-area .change-color {
     background-image: url(../img/change-color.png);
 }

 .tools-area .reset-color,
 .tools-area .reset-ha-color {
     background-image: url(../img/reset-color.png);
 }

 .tools-area .change-ha-color {
     background-image: url(../img/ha-color.png);
 }

 .tools-area .speed-opts {
     opacity: 0;
     visibility: hidden;
     transition: all 0.4s .4s linear;
     text-indent: 0px;
     position: absolute;
     top: 0px;
     right: 100%;
     padding-right: 10px;
     text-align: center;
 }

 .tools-area .change-speed:hover .speed-opts {
     visibility: visible;
     opacity: 1;
 }

 .tools-area .speed-opts .speed-inner {
     background-color: #ebebeb;
     width: 40px;
     position: relative;
 }

 .tools-area .speed-opts .speed-inner:before {
     position: absolute;
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 6px 0 6px 8px;
     border-color: transparent transparent transparent #b5b3b2;
     display: block;
     content: '';
     top: 12px;
     right: -8px;
 }

 .tools-area .speed-opts span {
     color: #69c;
     display: block;
     cursor: pointer;
     font-weight: bold;
 }

 .tools-area .speed-opts span {
     border-top: 1px solid #ffffff;
     padding: 5px 0;
 }

 .change-speed {
     text-indent: -20000px;
     position: relative;
 }

 .song-tabs .ha-wrap .title {
     margin: 0px;
 }

 .song-tabs .single-inner {
     left: 10px;
     top: 15px;
 }

 .song-tabs .ha-wrap a:hover {
     text-decoration: none;
 }

 #up-song {
     background-color: #333;
     padding: 15px 0px;
 }

 #up-song h1 {
     color: #2c9ee0;
     font-size: 18px;
     line-height: 20px;
     text-transform: uppercase;
     margin-bottom: 15px;
 }

 #up-song label,
 #up-song span.desc,
 #up-song span.err,
 #up-song input[type="text"],
 #up-song textarea,
 #up-song select,
 .comment-tabs .comments textarea,
 .comment-tabs .comments input[type="text"],
 .comment-tabs .comments input[type="email"],
 .comment-tabs .comments input[type="url"],
 .ninja-forms-all-fields-wrap input[type="text"] {
     display: block;
     width: 100%;
 }

 .comment-tabs .comments label {
     display: block;
     margin-bottom: 5px;
 }

 #up-song input[type="text"],
 #up-song textarea,
 #up-song select,
 #up-song button,
 .comment-tabs .comments textarea,
 .comment-tabs .comments button,
 .comment-tabs .comments input,
 .ninja-forms-all-fields-wrap input,
 .ninja-forms-all-fields-wrap #ninja_forms_field_5 {
     outline: none;
 }

 .comment-tabs .comments input#submit {
     margin: 10px 0 20px;
 }

 .comment-tabs .comments #reply-title,
 .comment-tabs .comments label[for="comment"],
 .ninja-forms-form-title {
     display: none;
 }

 .ninja-forms-required-items {
     margin-bottom: 20px;
     font-style: italic;
 }

 .comment-tabs .comments p {
     margin: 10px 0;
 }

 .comment-tabs .comments a {
     color: #3399cc;
 }

 #up-song button,
 .comment-tabs .comments input#submit,
 .update-item-fav-btn,
 .ninja-forms-all-fields-wrap #ninja_forms_field_5 {
     display: inline-block;
     text-transform: uppercase;
     color: #fff;
     font-size: 13px;
     background-color: #4891d9;
     padding: 10px 15px;
     border-radius: 3px;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     -o-border-radius: 3px;
     border: none;
     cursor: pointer;
 }

 .update-item-fav-btn {
     color: #fff !important;
 }

 #up-song label {
     margin-bottom: 10px;
 }

 #up-song label span {
     color: #ed1f24;
 }

 #up-song input[type="text"],
 #up-song textarea,
 #up-song select,
 .comment-tabs .comments input[type="text"],
 .comment-tabs .comments input[type="email"],
 .comment-tabs .comments input[type="url"],
 .comment-tabs .comments textarea,
 .ninja-forms-all-fields-wrap input[type="text"],
 .ninja-forms-all-fields-wrap textarea {
     background-color: #ffffff;
     border-bottom: 1px solid #ccc;
     border-right: 1px solid #ccc;
     border-top: 1px solid #ccc;
     border-left: 1px solid #ccc;
     padding: 8px 12px;
     color: #000000;
 }

 #up-song span.desc,
 #up-song span.err {
     margin-top: 10px;
     font-style: italic;
 }

 #up-song span.err {
     color: #ed1f24;
     display: none;
 }

 #up-song span.err.display {
     display: block;
 }

 #up-song textarea {
     min-height: 260px;
 }

 #up-song .half {
     width: 100%;
     padding: 10px 0px;
 }

 #up-song .half:first-child {}

 #up-song .half:last-child {}

 #up-song .third .left {
     width: 100%;
     padding: 10px 0px;
 }

 #up-song .third .left:first-child {
     padding-left: 0px;
 }

 #up-song .third .left:last-child {
     padding-right: 0px;
 }

 #up-song .block {
     margin-bottom: 20px;
 }


 .list-tt .list-inner {
     width: 310px;
     height: 104px;
     position: relative;
     top: 10px;
     left: 5px;
     padding-top: 10px;
     overflow: hidden;
     margin: 25px 0 30px;
 }

 .list-tt .list-inner .ha-inner {
     margin: 0 10px;
 }

 .not-active {
     pointer-events: none;
     cursor: default;
 }

 .list-inner-full {
     position: absolute;
     left: 0px;
 }

 .content-has-items .list-tt {
     display: block;
     right: -320px;
     top: -1px;
     height: 202px;
     text-align: center;
     background: #6cd6ef;
 }

 .content-has-items .list-tt .list-inner {
     margin-top: 30px;
 }

 .hiden-ha {
     position: absolute;
     color: #000;
     background-color: #fff;
     display: block;
     width: 20px;
     height: 20px;
     line-height: 20px;
     text-align: center;
     border-radius: 100%;
     -webkit-border-radius: 100%;
     -moz-border-radius: 100%;
     -o-border-radius: 100%;
     font-size: 12px;
     top: -10px;
     left: 147px;
     z-index: 999999;
 }

 .list-pl a {
     display: inline-block;
     padding: 10px 14px;
     color: #fff;
     background-color: #3399cc;
     margin-right: 5px;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -o-border-radius: 5px;
 }

 .list-pl li:last-child a {
     margin-right: 0px;
 }

 .content-bang-ha h2 {
     margin: 30px 0;
     font-size: 16px;
     text-transform: uppercase;
 }

 .login-form {
     width: 100%;
     margin: 0 auto;
 }

 .login-form-container {
     padding-top: 25px;
     padding-bottom: 50px;
 }

 .login-form-inner {
     background: #ffffff;
     width: 100%;
     float: left;
     padding: 15px;
 }

 .login-form form p {
     margin-bottom: 15px;
     float: left;
     width: 100%;
 }

 .login-form .login-form-inner h1,
 .login-form .login-form-inner form {
     color: #000000;
 }

 .login-form .login-form-inner form {
     border-right: 1px solid #cfcfcf;
     padding: 20px 30px 5px 30px;
     border-top: 1px solid #cfcfcf;
     width: 100%;
 }

 .login-form h1 {
     text-transform: uppercase;
     margin-bottom: 15px;
     padding: 0 20px;
     font-weight: bold;
     color: black;
     font-size: 18px;
 }

 .login-form label {
     display: block;
     margin-bottom: 8px;
     /**width: 18%; float: left;**/
     text-align: left;
     width: 100%;
     padding-right: 15px;
     vertical-align: middle;
 }

 .login-form input.input,
 #wp_pass_reset input.input {
     display: block;
     /**width: 82%;**/
     outline: none;
     background-color: #ffffff;
     border: 1px solid #d2d2d1;
     width: 100%;
     padding: 8px 12px;
     color: #000000;
     border-radius: 4px;
     float: left;
 }

 .login-form .button-primary,
 .login-form input.reset_password {
     display: inline-block;
     text-transform: uppercase;
     color: #fff;
     font-size: 13px;
     background-color: #336699;
     padding: 10px 15px;
     border-radius: 3px;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     -o-border-radius: 3px;
     border: none;
     cursor: pointer;
     outline: none;
 }

 .login-form a {
     color: #33669a;
 }

 .login-form-container p.error {
     font-style: italic;
     color: #ed1f24;
     margin-bottom: 15px;
 }

 .login-form-container p.sucess {
     margin-bottom: 15px;
     padding: 10px 15px;
     background-color: #346C33;
     border-radius: 5px;
     color: #5CFF1D;
 }

 .ha-inner .nd {
     position: absolute;
     line-height: 12px;
     width: 20px;
     display: block;
     left: 18px;
     bottom: -10px;
     font-size: 12px;
     text-align: center;
 }

 #modal .modal-header {
     background: linear-gradient(220deg, #1c397b, #389fd9, #1c397b, #389fd9);
     padding: 10px 15px;
     color: #fff;
     font-weight: bold;
 }

 #modal .modal-body {
     text-align: center;
     color: #0D8D10;
 }

 .author-content .author-image,
 .favorites .author-image {
     padding: 10px;
     background: #3a3432 url(../img/content.jpg) repeat;
     box-shadow: 5px 5px 8px #000;
     -webkit-box-shadow: 5px 5px 8px #000;
     -moz-box-shadow: 5px 5px 8px #000;
     -o-box-shadow: 5px 5px 8px #000;
 }

 .favorites .author-image {
     margin-left: 35px;
 }

 .author-content li.li-auth-img {
     padding-bottom: 15px;
 }

 .author-content li.li-auth-img a {
     position: relative;
     top: 35px;
 }

 .author-content h1 {
     font-size: 13px;
     text-transform: uppercase;
     margin-bottom: 15px;
     border-bottom: 1px solid #d2d2d1;
     padding-bottom: 10px;
     font-weight: 600;
 }

 .star-group span {
     display: inline-block;
     width: 10px;
     height: 10px;
     background: transparent url(../img/icon-star.png) center center no-repeat;
 }

 #form_change_gender {
     display: none;
 }

 #form_change_gender select {
     outline: none;
     margin-left: 10px;
     min-width: 100px;
 }

 #change_old,
 #change_msg,
 #change_notice {
     display: none;
     margin-left: 10px;
 }

 #change_old input,
 #change_pass input {
     outline: none;
     width: 170px;
     padding: 3px;
 }

 #change_old .error,
 #change_pass .error {
     display: none;
     font-size: 12px;
     color: #F97521;
     font-style: italic;
 }

 #change_pass {
     display: none;
     margin-left: 10px;
     width: 170px;
 }

 #change_pass input {
     margin-bottom: 3px;
 }

 #change_pass .error {
     margin-bottom: 3px;
 }

 .author-content .msg-wrap,
 #up-song .msg-wrap {
     padding-top: 25px;
 }

 #up-song .msg-wrap p {
     margin-bottom: 20px;
 }

 .author-content .msg-wrap p,
 #up-song .msg-wrap p {
     padding: 10px 15px;
     border-radius: 3px;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     -o-border-radius: 3px;
 }

 .author-content .update-success,
 #up-song .success {
     background-color: #ABCCA9;
     color: #1F6D30;
     border: 1px solid #9ACDA5;
 }

 .author-content .update-fail,
 #up-song .fail {
     background-color: #FF6D6D;
     color: #9D0000;
     border: 1px solid #FD8C8C;
 }

 .favorites .author-info {
     font-size: 13px;
 }

 .favorites .author-info .p {
     margin-bottom: 8px;
 }

 .advanced-search p {
     color: #fff;
     font-weight: 600;
 }

 div.advanced-search .bcc a {
     font-weight: 600;
     font-size: 16px;
 }

 .advanced-search .melody a {
     padding: 5px 5px !important;
     border-radius: 50px;
     color: #fbfafa !important;
     font-style: italic;
 }

 div.advanced-search a {
     padding: 5px 9px !important;
     border: 1px solid #0d1230;
     background: #415c6f;
     border-radius: 3px;
     color: #fff !important;
 }

 div.advanced-search .bcc {
     margin: 20px 0 25px;
 }

 div.advanced-search .melody {
     margin-top: 20px;
 }

 .block-primary.songs {
     padding: 0 0px 0px;
     background: #fff;
 }

 .favorites-list-col1 .top-title {
     font-weight: 600;
     padding-right: 20px !important;
     padding-bottom: 10px;
 }

 .favorites-list-col1 .top-title a {
     font-weight: 600;
 }

 .favorites-list-col1 .top-title.clear h3 {
     background: url(../img/img-new/icon-star.png)no-repeat center left;
     padding-left: 20px;
 }

 .favorites-list-col1 .block-primary.songs {
     padding: 0 15px 0px;
     border-bottom: 0;
 }

 .favorites-list-col1 .block-primary.songs #my-fav-list tbody td {
     padding-bottom: 12px;
     border-bottom: 1px solid #efefef;
     padding-top: 20px;
 }

 .favorites-list-col1 .block-primary.songs #my-fav-list tbody td .top-title p {
     background: url(../img/img-new/icon-use-like.png)no-repeat center left;
     padding-left: 25px;
     color: #7f8d98;
     margin-left: 15px;
 }

 .block-primary.songs ul {
     padding: 10px 10px 0;
 }

 .tab-views {
     margin-bottom: 10px;
     text-align: center;
 }

 .tab-views .tvi {
     display: inline-block;
 }

 .tab-views a {
     display: inline-block;
     margin-right: 10px;
     background-color: #5f6062;
     text-transform: uppercase;
     color: #fff;
     font-size: 10px;
     padding: 7px 10px;
     border-radius: 4px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -o-border-radius: 4px;
     box-shadow: 3px 3px 8px #000;
 }

 .tab-views a:last-child {
     margin-right: 0px;
 }

 .tab-views .active {
     border: 1px solid #fff;
 }

 .view ul {
     display: none;
 }

 .view ul.display {
     display: block;
 }

 .view ul.display p.sing {
     font-style: italic;
     margin-bottom: 7px;
     color: #666;
 }

 .view ul.display p.sing a {
     display: inline-block;
     color: #587f92;
     font-size: 12px;
     padding: 0;
 }

 .song-info td {
     padding: 5px;
 }

 .song-info td:nth-child(2n) {
     padding-left: 7px;
 }

 .song-info td:nth-child(2n):before {
     display: inline-block;
     content: ':';
     margin-left: -20px;
     margin-right: 3px;
 }

 .song-tabs .tab object {
     height: 840px !important;
     left: -20px;
     position: relative;
     top: -37px;
     width: 662px !important;
 }

 .sound.view ul {
     display: block;
     white-space: nowrap;
     overflow: auto;
 }

 .share-area {
     margin-top: 10px;
     float: right;
 }

 .home .composer {
     margin-top: 10px;
     border-bottom: none;
     margin-bottom: 15px;
 }

 .has-toggle-content {
     height: 1200px;
     overflow: hidden;
 }

 #result-toggle-btn {
     position: relative;
     right: 2px;
     text-align: right;
     top: -42px;
 }

 #toggle-content-btn {
     background-color: #5dadd4;
     border: 1px solid #fff;
     color: #fff;
     display: inline-block;
     font-style: italic;
     padding: 5px 10px;
     position: relative;
     right: 3px;
     top: -10px;
 }

 .search-template .content-post h3 {
     margin-right: 15px;
     text-transform: uppercase;
 }

 .empty-content .yc a:hover {
     text-decoration: none;
 }

 #footer-menu a {
     padding: 10px 25px;
     color: #1579c1;
     text-transform: uppercase;
 }

 #footer-menu a:hover {
     color: #589fbe;
 }

 .has-chrod .tt a {
     margin-top: 30px;
 }

 .sidebar-yc .block {
     margin-bottom: 8px;
 }

 .total-yc p {
     font-size: 30px;
     color: #F12222;
 }

 .total-yc h5 {
     color: #55A8B5;
     padding-left: 15px;
     padding-top: 10px;
 }

 .temp-yc-ha .term-group {
     color: #333333
 }

 .temp-yc-ha .term-group .col-md-6 {
     width: 48%;
     float: left;
 }

 .temp-yc-ha .term-group .col-md-6:first-child {
     margin-right: 4%;
 }

 .tt-bai {
     padding-top: 5px;
 }

 .tt-bai i {
     color: #3299cc;
     padding-right: 5px;
     padding-left: 5px;
     font-size: 16px;
 }

 .tt-bai a {
     color: #000000 !important;
 }

 .tt-bai span.n {
     color: #000000 !important;
 }

 .tt-bai i:first-child {
     padding-left: 0px;
     padding-right: 15px;
 }

 .block.dk-nhan-tin {
     padding-top: 40px;
 }

 .block.dk-nhan-tin.temp-yc-ha h4 {
     color: #000000;
     font-size: 18px !important;
     font-family: MYRIADPRO-SEMIBOLD;
     text-transform: uppercase;
     margin-bottom: 15px;
 }

 .block.dk-nhan-tin.temp-yc-ha .form-email {
     background: #ffffff;
     text-align: center;
     padding: 7px 0;
     border-radius: 5px;
 }

 .block.dk-nhan-tin.temp-yc-ha .form-email form .email {
     padding: 4px 20px;
     border-radius: 30px;
     border: 2px solid #90949c;
 }

 .block.dk-nhan-tin.temp-yc-ha .form-email form .btn.btn-primary {
     background: none;
     border: 0;
     font-weight: bold;
     margin-left: 20px;
     padding: 6px 5px;
 }

 .block.social-mxh.temp-yc-ha li {
     background: no-repeat;
     display: inline-block;
     font-size: 30px;
     padding: 10px;
     margin-bottom: 0;
 }

 .block.social-mxh.temp-yc-ha li a {
     color: #333333;
 }

 .temp-yc-ha .share {
     padding: 0px;
 }

 .form-yc {
     margin-top: 20px;
     color: #000000;
 }

 .form-yc label,
 .form-yc input,
 .form-yc select {
     display: block;
     width: 100%;
     margin-bottom: 10px;
 }

 .form-yc label {
     margin-bottom: 5px;
     text-transform: uppercase;
 }

 .form-yc label span {
     color: #f12222;
 }

 table.list-favorites input,
 .form-yc input,
 .form-yc select {
     background-color: #ffffff;
     border-color: #cdcccb;
     border-style: solid;
     border-width: 1px;
     border-radius: 5px;
     color: #000000;
     padding: 8px 5px;
     outline: none;
 }

 .form-yc button {
     background-color: #32b6e4;
     border: medium none;
     border-radius: 3px;
     color: #fff;
     cursor: pointer;
     display: inline-block;
     font-size: 13px;
     padding: 10px 15px;
     text-transform: uppercase;
 }

 .form-yc .error {
     display: block;
     color: #f12222;
     font-style: italic;
     margin-bottom: 10px;
 }

 .alert-ok {
     background-color: #abcca9;
     border: 1px solid #9acda5;
     color: #1f6d30;
     margin-top: 10px;
     padding: 5px 10px;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -o-border-radius: 5px;
 }

 .home .home-news .top-block a {
     color: #3399cc;
     display: block;
     font-style: italic;
     position: absolute;
     right: 10px;
     top: -2px;
 }

 .tab-searchs .tab-search {
     display: none;
 }

 .tab-searchs .tab-search.display {
     display: block;
 }

 .tab-searchs .songs {
     margin-top: 0px;
     padding: 20px 15px;
 }

 table.list-favorites {
     width: 100%;
 }

 table.list-favorites td,
 table.list-favorites th {
     border: 1px solid #515151;
     padding: 10px;
 }

 table.list-favorites input {
     width: 50px;
     outline: none;
 }

 table.list-favorites .delete {
     display: inline-block;
     width: 20px;
     height: 20px;
     text-indent: -20000px;
     background: transparent url(../img/icon-delete.png) no-repeat;
 }

 .comment-tabs .comments {
     display: none;
 }

 .comment-tabs .comments.display {
     display: block;
 }

 .view.bxh h4 {
     background: transparent url(../img/bangxephang.png) left center no-repeat;
     padding-left: 45px;
 }

 .view.bxh a {
     display: block;
 }

 .nghenhac h4 {
     background: transparent url(../img/listen.png) left center no-repeat;
 }

 .sidebar-sound-chitiet .list-cl .inner-sound {
     margin-top: 10px;
     height: 60px;
     line-height: 60px;
     text-align: center;
 }

 .sidebar-sound-chitiet .list-cl .inner-sound audio {
     margin-top: 0px;
 }

 .sidebar-sound-chitiet .thebam {
     background: none;
     padding: 0;
     height: auto;
     line-height: initial;
 }

 .sidebar-sound-chitiet .thebam h4 {
     background: transparent url(../img/icon-k.png) left center no-repeat;
     background-color: #8abaea;
     background-position-x: 25px;
     float: none;
     padding: 15px 0;
     padding-left: 55px;
     color: #ffffff;
     border-radius: 5px;
 }

 .sidebar-sound-chitiet .list-cl {
     margin-bottom: 0;
 }

 .sidebar-sound-chitiet .ccd,
 .sidebar-sound-chitiet .list-cl .nghenhac,
 .sidebar-sound-chitiet .list-co-loi .nhac-co-loi {
     background: no-repeat;
     padding: 0;
     height: auto;
     line-height: initial;
 }

 .tkns-alpha h3,
 .sidebar-sound-chitiet .ccd h4,
 .sidebar-sound-chitiet .list-cl .nghenhac h4,
 .sidebar-sound-chitiet .list-co-loi .nhac-co-loi h4,
 .bai-lien-quan h4,
 .video-lq h4 {
     background: transparent url(../img/icon-k.png) left center no-repeat;
     background-color: #8abaea;
     background-position-x: 25px;
     float: none;
     padding: 15px 0;
     padding-left: 55px;
     color: #ffffff;
     border-radius: 5px;
     font-family: inherit;
     font-size: 14px;
 }

 .sidebar-sound-chitiet .block.sound.view .inner {
     padding: 15px 15px 0px;
 }

 .tintuc h4 {
     background: transparent url(../img/news.png) left center no-repeat;
 }

 .song_tontai {
     opacity: 0.9;
 }

 .song_tontai p a.title {
     text-decoration: line-through;
 }

 .owl-carousel .owl-wrapper-outer {
     max-width: 100%;
 }

 .content-search-list-ha .list-hop-am li {
     width: 33.33%;
     float: left;
 }

 .songs .list-hop-am li {
     background: none;
     padding-left: 0;
 }

 .song-info tr td:first-child {
     width: 100px;
     vertical-align: top;
 }

 .song_tontai .dd {
     display: inline-block;
     margin-left: 0;
     background: #8adff3 none repeat scroll 0 0;
     border-radius: 4px;
     font-size: 11px;
     padding: 2px 5px;
 }

 .term-title.ycha-sk {
     height: 51px;
     line-height: 51px;
     padding: 0 0px;
     color: #000000;
 }

 .term-title.ycha-sk {
     height: 51px;
     line-height: 51px;
     padding: 0 0px;
     color: #2a73bd;
 }

 div#ninja_forms_form_1_all_fields_wrap {
     color: #5CA299;
 }

 body.bai-hat-template .entry-content h2 {
     display: none;
 }

 .bxhcomment h4 {
     background: transparent url('../img/comment-icon.png') left center no-repeat;
     padding-left: 45px;
     font-size: 14px;
     color: #ffffff
 }

 .comment-author.vcard img {
     width: 0px !important;
     height: 0px !important;
 }

 .block-haft {
     float: left;
     width: 40%;
     margin: 0 auto;
     color: #000000;
 }

 .author-content.block-haft {}

 .author-content .author-image {
     background: none;
     padding: 10px 0;
     box-shadow: none;
 }

 .songs1 {
     color: #333333;
     padding-bottom: 10px;
 }

 .songs1 table {
     background: #eef2f3;
 }

 .advanced-search-kho-sheet.left {}

 .advanced-search-kho-sheet {
     color: #1b3adc;
 }

 .songs1 table a:hover {
     box-shadow: 0px 1px 0px #333;
 }

 .sheetshow .player h3 a {
     color: #89CCF0;
 }

 .sheetshow .player h3 {
     color: #0073AD;
 }

 .sheetshow h3 span.i {
     color: #0073AD;
 }

 .sheetnhacshow {
     overflow: auto;
     height: 810px;
 }

 .sheetnhacshow img {
     width: 100%;
 }

 .bxhcomment p {
     color: #666;
 }

 .custom-title {
     color: #000000;
     margin: 10px;
     padding: 10px 10px 15px;
     padding-left: 60px;
     font-size: 18px;
     text-transform: uppercase;
     font-family: MYRIADPRO-SEMIBOLD;
     border-bottom: 1px solid #ebebeb;
 }

 .tkns-alpha {
     margin-top: 2px;
     clear: both
 }

 .tkns-alpha .top-block {}

 .tkns-alpha .top-block h3 {
     text-transform: uppercase;
 }

 .tkns-alpha .bcc {
     padding: 15px 0;
 }

 .tkns-alpha .bcc a {
     display: inline-block;
     color: #f9f6f6;
     padding: 5px 9px;
     border: 1px solid #a1a5bf;
     border-radius: 3px;
     background: #889fb5;
     margin: 5px;
     font-weight: 600;
 }

 .tkns-alpha .bcc a:hover {
     color: #ffffff;
 }

 .tkcns-loop li {
     padding: 0 0 0 10px;
 }

 #background {
     background: #32b6e4 !important;
 }

 .lyric span {
     color: #ed1f24;
 }

 .tkcns-loop a {
     color: #333333;
 }

 .tkcns-loop ul {
     background: rgb(243, 243, 243);
     padding: 10px 10px 0;
 }

 .tkcns-loop ul li {
     float: left;
     width: 50%
 }

 .tkcns-loop ul::before,
 .tkcns-loop ul::after {
     content: '';
     clear: both;
     display: block;
 }

 .inner-sound.close {
     display: none !important
 }

 .inner-video,
 .inner-soundcloud {
     display: none
 }

 .inner-video.open,
 .inner-soundcloud.open {
     display: block
 }

 .tktksn {
     overflow: hidden
 }

 .tktksn .advanced-search-kho-sheet {
     padding: 0 10px
 }

 .tktksn .advanced-search-kho-sheet .bcc {
     margin: 0 0 15px
 }

 .tktksn .advanced-search-kho-sheet p {
     margin: 0 0 10px;
     font-size: 17px;
 }

 .main-content .list-cl #video-player {
     width: 100%;
     height: 480px
 }

 .sidebar .block.yc {
     margin-top: 0 !important
 }

 .sidebar .block.singer {
     margin-top: 10px;
     border: 1px solid #d6d6d5;
     border-radius: 6px;
 }

 .sidebar .block.singer .top-block {
     background: #8abaea;
     border-bottom: 1px solid #d6d6d5;
     border-radius: 0;
 }

 .sidebar .block.singer h4 {
     background: url(../img/img-new/icon-sbh-title1.png) no-repeat center left;
     color: #ffffff;
     font-size: 18px;
     font-family: MYRIADPRO-SEMIBOLD;
 }

 .sidebar .block.the-loai .top-block {
     background: none;
     padding: 0;
 }

 .sidebar .block.the-loai .top-block h4 {
     color: #000000;
     font-size: 18px !important;
     font-family: MYRIADPRO-SEMIBOLD;
     background: url(../img/img-new/type.png) no-repeat center left;
 }

 .sidebar .block.the-loai .inner {
     padding-bottom: 30px;
 }

 .sidebar .block.the-loai .inner ul {
     background: none;
     padding: 0;
 }

 .sidebar .block.the-loai .inner ul li {
     background: url(../img/img-new/icon-theloai.png) no-repeat top left 25px #f3f3f3;
     background-position-y: 12px;
     padding: 6px 0;
     padding-left: 50px;
     margin-bottom: 3px;
 }

 .sidebar .block.the-loai .inner ul li a {
     color: #000000;
     font-weight: bold;
 }

 .sidebar .block.the-loai .inner ul li:last-child {
     margin-bottom: 0;
 }

 .sidebar .block.yc {
     background-color: #4b68b1;
     border-radius: 5px;
     text-align: center;
     margin-top: 20px !important;
 }

 .sidebar .block.yc a {
     background: none;
     height: auto;
     line-height: 1.4em;
     font-size: 18px;
     float: none;
     width: auto;
     font-family: MYRIADPRO-SEMIBOLD;
     text-align: center;
     padding: 19px 50px 11px;
     position: relative;
 }

 .sidebar .block.yc.yc-sb-fix {
     background: none !important;
 }

 .sidebar .block.yc.yc-sb-fix a {
     background: none;
     background-color: #4b68b1;
     font-size: 14px;
     float: left;
     padding: 18px 0px 10px;
     padding-left: 14px;
     margin: 0 1%;
     width: 48%;
 }

 .sidebar .block.yc a:before {
     content: "";
     background: url(../img/img-new/icon-yeu-cau.png) no-repeat center left;
     top: 50%;
     left: 10px;
     transform: translateY(-50%);
     text-shadow: none;
 }

 .sidebar .block.yc a:after {
     content: "\f075";
     position: absolute;
     right: 10px;
     top: 50%;
     transform: translateY(-50%);
     font-family: FontAwesome;
     text-shadow: none;
 }

 .sidebar .block.yc a:hover {
     text-shadow: 2px 2px 0px #333;
 }

 .main-content .block.view.bxhcomment ul {
     padding: 10px 25px 20px;
 }

 .main-content .block.view.bxhcomment ul li {
     color: #3399cc;
     font-weight: 600;
     text-transform: uppercase;
 }

 .main-content .block.view.bxhcomment ul li span {
     display: none !important;
 }

 .main-content .block.view.bxhcomment ul li b {
     color: #000000;
     text-transform: none;
 }

 .main-content .block.view.bxhcomment ul li a {
     color: #544848;
     font-weight: 600;
     padding-right: 50px;
 }

 .main-content .block.view.bxhcomment ul li p {
     color: #5d5b5b;
     font-weight: normal;
     font-style: italic;
     padding-top: 5px;
     text-transform: none;
 }

 .hinh-thuc-khac {
     padding-top: 20px;
     float: left;
     width: 100%;
     padding-left: 30px;
     padding-right: 30px;
     border-top: 1px solid #cfcfcf;
 }

 .hinh-thuc-khac ul li {
     display: inline-block;
 }

 .hinh-thuc-khac ul li.ht-fb {
     width: 500px;
     margin-right: 0;
     margin-bottom: 15px;
 }

 .hinh-thuc-khac ul li.ht-fb a {
     color: black;
 }

 .hinh-thuc-khac ul li.ht-fb a img {
     float: left;
     padding: 12px 15px;
     border: 1px solid #244075;
     margin-right: 10px;
     background-color: #455e96;
     border-radius: 4px;
 }

 .hinh-thuc-khac ul li.ht-fb a p {
     padding: 8px 0;
 }

 .hinh-thuc-khac ul li.ht-gg {
     width: 220px;
 }

 .hinh-thuc-khac ul li.ht-gg a {
     color: #000000;
 }

 .hinh-thuc-khac ul li.ht-gg a img {
     float: left;
     padding: 7px 10px;
     background: #de4e34;
     margin-right: 10px;
     border-radius: 4px;
     border: 1px solid #de4e34;
 }

 .hinh-thuc-khac ul li.ht-gg a p {
     padding: 8px 0;
 }

 main.main-container.clear.favorites-list {
     background-color: #f3f3f3;
 }

 main.main-container.clear.favorites-list .top-block {
     background: #65a8d0;
     padding: 0;
     position: relative;
 }

 .favorites-list .favorites-list-col1 .top-block form {
     color: #ffffff;
 }

 .favorites-list .favorites-list-col1 .top-block form #view-perpage {
     width: 50px;
     height: 22px;
     border-radius: 4px;
     margin-left: 5px;
     margin-right: 15px;
 }

 main.main-container.clear.favorites-list .top-block h4 {
     color: #ffffff;
 }

 main.main-container.clear.favorites-list .favorites-list-col1 .top-block h4 {
     background: url(../img/img-new/favorites-list-icon.png) no-repeat center left 25px;
 }

 main.main-container.clear.favorites-list .favorites-list-col2 .top-block h4 {
     background: url(../img/img-new/favorites-list-icon2.png) no-repeat center left 25px;
 }

 .block.home-news.favorites-list-col2 .author-info {
     color: #000000 !important;
     font-weight: 600;
 }

 .block.home-news.favorites-list-col2 .author-info .p:first-child {
     text-decoration: underline;
 }

 .block.home-news.favorites-list-col2 .author-info p {
     padding-bottom: 5px;
 }

 .block.home-news.favorites-list-col2 {
     width: 97%;
     margin-left: auto;
     background: #fff;
 }

 .logged-in.author-template.customize-support {
     background: #8495b7;
 }

 .logged-in.author-template.customize-support .main-container {
     background: #f3f3f3;
     padding: 0 !important;
     margin: 15px 0;
 }

 .sidebar-sound-chitiet .list-hop-am.sound .ha-wrap.show {
     border-color: #cdcccb;
 }

 .sidebar-sound-chitiet .list-hop-am.sound .ha-wrap.show .title {
     border-bottom: 1px solid #cdcccb;
     background-color: #fbfcfc;
     font-weight: 600;
 }

 .sidebar-sound-chitiet .list-hop-am.sound .ha-wrap .title {
     color: #000000;
 }

 .sidebar-sound-chitiet .list-hop-am.sound .ha-wrap.show .tt a {
     color: #2d2c2b;
     background-color: #fbfcfc;
     border: 1px solid #cdcccb;
 }

 .sidebar-sound-chitiet .show-full-ha {
     color: #333333;
 }

 .box-bai-lien-quan {
     background: #f3f3f3;
     padding: 10px 20px;
 }

 .box-bai-lien-quan li:last-child {
     border-bottom: 0 !important;
 }

 .cmt-fix .fb,
 .cmt-fix .cmtw {
     padding: 8px;
     padding-left: 35px;
     text-transform: none;
     border-radius: 7px;
     margin-top: 30px;
     margin-bottom: 15px;
     background-color: #bbbbbb;
     border: 1px solid #bbbbbb;
 }

 .cmt-fix .fb {
     background-image: url(../img/img-new/icon-fb.png);
     background-repeat: no-repeat;
     background-position: center left;
     background-position-x: 10px;
 }

 .cmt-fix .cmtw {
     background-image: url(../img/img-new/icon-cmt.png);
     background-repeat: no-repeat;
     background-position: center left;
     background-position-x: 10px;
 }

 .cmt-fix .active {
     background-color: #889fb5;
     border-color: #333333;
 }

 .song-tab-control h2 {
     margin: 0;
     font-weight: 300;
     font-size: 14px;
 }

 .box-bai-lien-quan {
     background: #f3f3f3;
     padding: 10px 20px;
 }

 .box-bai-lien-quan li:last-child {
     border-bottom: 0 !important;
 }

 .tkns-alpha h3 {
     background-color: transparent;
     color: #162b52;
     padding: 15px 30px;
     -ms-background-position-x: 0;
     background-position-x: 0;
 }

 .logged-in.author-template.customize-support .main-container {
     margin: 15px -15px;
 }

 .custom-head-top {
     display: block;
 }

 .login-form form p.login-remember,
 .login-form form p.login-submit,
 .login-form form p.login-terms,
 .login-form-container p.error {
     /**float: right;**/
     width: 100%;
     clear: both;
 }

 .login-form form p.login-remember label {
     text-align: left;
     float: left;
 }

 .login-form form p.login-remember a {
     float: right;
     text-align: right;
 }

 .login-form form p.login-terms label {
     width: 100%;
 }

 #login_form .g-recaptcha,
 #res_form .g-recaptcha {
     /**float: right; width: 70%;**/
     width: 100%;
     clear: both;
 }

 .login-form .button-primary,
 .login-form input.reset_password {
     width: 100%;
     margin-top: 15px;
 }

 .or {
     text-transform: uppercase;
     text-align: center;
     border-bottom: 1px solid grey;
     position: relative;
     padding-top: 30px;
     margin: 10px 0 20px 0;
 }

 .or span {
     padding: 5px 15px;
     background-color: #fff;
     position: absolute;
     top: 3px;
     margin: auto;
     left: 0;
     right: 0;
     width: 72px;
     color: black;
 }

 .text-center {
     text-align: center;
 }

 .load-more:hover {
     cursor: pointer;
     background-color: #fff;
     color: #3399cc !important;
 }

 .load-more {
     font-weight: bold;
     padding: 7px 25px;
     text-transform: uppercase;
     background-color: #3399cc;
     border: 1px solid #3399cc;
     color: #fff !important;
     margin: 10px auto;
     display: inline-block;
 }

 .img-responsive {
     max-width: 100%;
     height: auto;
 }

 .center-block {
     margin: 15px auto;
     display: block;
 }

 .ava-casi {
     border-radius: 8px;
 }

 .sidebar .view .inner {
     border: 1px solid #d6d6d5;
     padding: 0 15px;
     margin-top: 10px;
     background-color: #FFF;
 }

 .casi-excerpt {
     color: black;
 }

 .more-info-btn {
     margin-bottom: 15px;
     display: inline-block !important;
 }

 .view h4.tieu-su-heading {
     padding-left: 0;
     color: white;
     text-transform: uppercase;
     font-weight: bold;
     font-size: inherit;
 }

 .main-content.full {
     width: 100%;
 }

 .usr-avatar {
     width: 45px !important;
     height: 45px !important;
     border-radius: 50% !important;
     border: 2px solid #e2e2e2;
     float: left;
     margin-right: 15px;
     object-fit: cover !important;
     background-color: #f0f0f0;
     display: inline-block !important;
 }

 .usr-avatar img {
     width: 100% !important;
     height: 100% !important;
     object-fit: cover !important;
     border-radius: 50% !important;
     display: block;
 }

 .fw {
     float: left;
     width: 100%;
 }

 .list-pl li {
     display: inline;
 }

 ::placeholder {
     color: #33353759;
 }

 :-ms-input-placeholder {
     color: #33353759;
 }

 ::-ms-input-placeholder {
     color: #33353759;
 }

 ul,
 li {
     margin: 1px;
     padding: 0;
     list-style-type: none;
 }

 .site_name {
     position: absolute;
     text-indent: -9999px;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 a.sheet_nhac_link {
     background: #32b6e4;
     border-radius: 4px;
     color: #fff;
     padding: 2px 5px;
     font-size: small;
 }

 a.the_loai_link,
 a.giai_dieu_link {
     background: #d1e9ff;
     border-radius: 4px;
     color: #005a99 !important;
     padding: 2px 8px;
     font-size: 12px;
     font-weight: 500;
     float: left;
     margin-right: 5px;
 }

 i.fb_like_icon {
     background-image: url(../img/facebook-icon.png);
     background-repeat: no-repeat;
     background-size: 50px 748px;
     background-position: 1px -550px;
 }

 i.fb_love_icon {
     background-image: url(../img/facebook-icon.png);
     background-repeat: no-repeat;
     background-size: 50px 748px;
     background-position: -17px -514px;
 }

 i.fb_haha_icon {
     background-image: url(../img/facebook-icon.png);
     background-repeat: no-repeat;
     background-size: 50px 748px;
     background-position: -17px -496px;
 }

 i.fb_wow_icon {
     background-image: url(../img/facebook-icon.png);
     background-repeat: no-repeat;
     background-size: 50px 748px;
     background-position: 1px -568px;
 }

 i.fb_sad_icon {
     background-image: url(../img/facebook-icon.png);
     background-repeat: no-repeat;
     background-size: 50px 748px;
     background-position: -17px -532px;
 }

 i.fb_angry_icon {
     background-image: url(../img/facebook-icon.png);
     background-repeat: no-repeat;
     background-size: 50px 748px;
     background-position: -17px -460px;
 }

 .search-form.focus {
     margin-right: 20px;
 }

 header>#collapseHeader {
     background: #32b6e4;
     position: absolute;
     bottom: -25px;
     right: 25px;
     height: 25px;
     line-height: 25px;
     color: #fff;
     padding: 0px 10px;
     border-radius: 0px 0px 7px 7px;
 }

 .search-form {
     position: relative;
 }

 .search-form #search-q {
     height: 38px;
     width: 100%;
     line-height: 38px;
     border: none;
     outline: none;
     background: #f8f9f9;
     padding-left: 12px;
     padding-right: 62px;
 }

 .search-form #search-submit {
     position: absolute;
     top: 0px;
     right: 0px;
     width: 55px;
     height: 38px;
     text-align: center;
     line-height: 38px;
     cursor: pointer;
     color: #fff;
     background: #1283b0;
 }

 .show {
     display: block !important;
 }

 .hide {
     display: none;
 }

 .button-group {
     position: relative;
     border-top: 1px solid;
     border-bottom: 1px solid;
 }

 .button {
     width: 33.33%;
     text-align: center;
     float: left;
     padding: 10px 0;
 }

 .button.fb-reaction:hover .reactions {
     display: inline-block;
 }

 .reactions {
     background: #ffffff !important;
     display: none;
     position: absolute;
     bottom: 100%;
     left: 0;
     border: 1px solid rgba(0, 0, 0, 0.1) !important;
     border-radius: 50px !important;
     -webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.45) !important;
     box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.45) !important;
     line-height: 0 !important;
 }

 .reaction {
     display: inline-block !important;
     width: 70px !important;
     height: 70px !important;
     margin: -9px !important;
     cursor: pointer !important;
     position: relative !important;
     -webkit-transition: 200ms !important;
     transition: 200ms !important;
 }

 .reaction img {
     width: 100% !important;
     margin: 0 !important;
     padding: 0 !important;
     vertical-align: middle !important;
 }

 .reaction:active,
 .reaction:hover {
     -webkit-transform: scale(1.33) translate(0, -4px) !important;
     transform: scale(1.33) translate(0, -4px) !important;
 }

 .reaction::after {
     content: attr(data-count) !important;
     font-size: 8px !important;
     font-family: Arial, Helvetica, sans-serif !important;
     color: #fff !important;
     background: #d81111 !important;
     display: inline-block !important;
     font-weight: bold !important;
     padding: 0 4px !important;
     border-radius: 50px !important;
     box-sizing: border-box !important;
     position: absolute !important;
     line-height: 13px !important;
     max-width: 100% !important;
     width: unset !important;
     overflow: hidden !important;
     top: 15px !important;
     right: 11.3px !important;
     text-decoration: none !important;
     text-overflow: ellipsis !important;
     -webkit-user-select: none !important;
 }

 .section .tab-bar {
     margin-bottom: 10px;
 }

 .section .tab {
     border: none;
     color: #ffffff;
     margin-right: 10px;
     border-radius: 4px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -o-border-radius: 4px;
 }

 .section .tab:last-child {
     margin-right: 0;
 }

 .section-tb .list {
     max-height: 215px;
     margin: 0;
     overflow: hidden;
     -webkit-transition: max-height 0.2s;
     transition: max-height 0.2s;
 }

 .section-tb .item {
     text-align: center;
     width: 50%;
     margin-bottom: 16px;
     position: relative;
     float: left;
 }

 .section-tb .item:hover .list-tt.has-list-items {
     display: block;
 }

 .section-ycha p {
     padding-left: 8px;
     margin: 0;
     font-size: 14px;
 }

 .section-ycha .tab-bar {
     text-align: center;
 }

 .section-ycha .tab {
     display: inline-block;
 }

 .section-ycha .tab h4 {
     font-weight: 600;
 }

 .section-ycha .list {
     list-style: decimal;
     list-style-position: inside;
 }

 .section-ycha .item {
     padding: 10px;
 }

 .section-ycha .like {
     background-color: #fff;
     color: #000;
     font-size: 12px;
 }

 .section-ycha .title {
     color: #16758C;
     font-weight: 600;
     max-width: 220px;
     display: inline-block;
     vertical-align: top;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     text-transform: uppercase;
 }

 .section-ycha .n {
     color: #0250C0;
     font-style: italic;
     font-size: 12px;
 }

 .section-ycha .s,
 .section-ycha .ds {
     float: right;
     font-size: 12px;
     line-height: 18px;
     border-radius: 4px;
     padding: 0 5px;
     color: #FFFFFF;
 }

 .section-ycha .s {
     background: #455C69;
 }

 .section-ycha .ds {
     background: #0250C0;
 }

 .section-halq .list {
     list-style: decimal;
     color: #000;
     padding-left: 10px;
 }

 .section-halq .item .title {
     display: block;
     color: #242627;
     padding: 8px 0px;
 }

 .section-halq .item .group {
     background: rgba(101, 156, 212, 0.87);
     border: 1px solid #65a6b1;
     border-radius: 10px;
     color: #ffffff;
     padding: 0px 10px;
     font-size: 12px;
     line-height: 15px;
     float: left;
     margin-right: 5px;
 }

 .section-halq .item .singer {
     background: url(../img/icon-mic.png) no-repeat;
     padding-left: 22px;
     max-width: 465px;
     font-size: 12px;
     font-style: italic;
     margin-bottom: 8px;
     color: #666;
     float: left;
     line-height: 20px;
 }

 .section-ttv .list .item {
     background: #eff6f7;
     padding: 5px 15px;
     margin-top: 5px;
 }

 .section-nn .content {
     text-align: center;
 }

 .section-nn .list {
     max-height: 42px;
     overflow: hidden;
 }

 .section-nn .item {
     margin-bottom: 10px;
 }

 .section-nn .item a {
     display: block;
     font-size: 12px;
     color: #fff;
     padding: 5px 3px;
     border-radius: 4px;
     border-top: 1px solid #bbb7b7;
     background: linear-gradient(#edeff1, #2a2a2a);
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
 }

 .section-nn .item a:hover,
 .section-nn .item a.active {
     background: #32b6e4;
 }

 .section-nn #player>* {
     width: 100%;
 }

 /** ==================== * Lista de Comentarios =======================*/
 .comments-list {
     position: relative;
 }

 .comments-list h4 a {
     color: #4d7394;
     font-weight: 600;
 }

 #comment-form {
     display: none;
 }

 .comments-list #comment-form {
     display: flex;
     align-items: center;
 }

 /** * Lineas / Detalles -----------------------*/
 .comments-list li {
     display: block;
     position: relative;
 }

 .comments-list li:after {
     content: '';
     display: block;
     clear: both;
     height: 0;
     width: 0;
 }

 .comments-list:not(.reply-list)>li>.reply-list {
     padding-left: 70px;
     clear: both;
 }

 /** * Avatar ---------------------------*/
 .comment-avatar {
     width: 43px;
     height: 43px;
     position: relative;
     z-index: 99;
     float: left;
     margin-top: 5px;
     background: #fff;
     border: 3px solid #FFF;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
     -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
     overflow: hidden;
 }

 .comment-avatar img {
     width: 36px;
     height: 36px;
     float: left;
 }

 .comments-list .comment-avatar img {
     width: 100%;
     max-height: 100%;
 }

 .reply-list .comment-avatar {
     width: 40px;
     height: 40px;
 }

 .comment-main-level:after {
     content: '';
     width: 0;
     height: 0;
     display: block;
     clear: both;
 }

 /** * Caja del Comentario ---------------------------*/
 .comment-box {
     overflow: hidden;
     position: relative;
     padding: 5px;
 }

 .comment-box .comment-reply {
     display: block;
 }

 .comment-reply {
     padding: 5px;
     display: none;
 }

 .comment-reply .reply-user {
     margin-right: 8px;
     float: left;
 }

 .comment-reply .reply-user img {
     width: 32px;
     border-radius: 50%;
     overflow: hidden;
 }

 .comment-reply .reply-content {
     border-radius: 18px;
     overflow: hidden;
     border: 1px solid #ccd0d5;
 }

 .comment-content {
     color: #1c1e21;
     padding: 10px;
 }

 .comment-text {
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .comment-text p {
     margin: 0;
 }

 .comment {
     background: #f2f3f5;
 }

 .comment-info {
     padding: 5px;
 }

 .comment_reaction_static {
     position: absolute;
     bottom: -10px;
     right: 0;
     background: #fff;
     border-radius: 10px;
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
     color: #8d949e;
     font-size: 11px;
     font-weight: normal;
     padding: 2px 1px 2px 2px;
 }

 .comment_reaction_static i {
     display: inline-block;
     box-sizing: content-box;
     border-radius: 10px;
     border-right: 2px solid #fff;
     margin-left: -7px;
     outline: none;
     position: relative;
     vertical-align: top;
     height: 16px;
     width: 16px;
 }

 .comment_reaction_static i:nth-child(1) {
     margin-left: 0;
     z-index: 6;
 }

 .comment_reaction_static i:nth-child(2) {
     z-index: 5;
 }

 .comment_reaction_static i:nth-child(3) {
     z-index: 4;
 }

 .comment_reaction_static i:nth-child(4) {
     z-index: 3;
 }

 .comment_reaction_static i:nth-child(5) {
     z-index: 2;
 }

 .comment_reaction_static i:nth-child(6) {
     z-index: 1;
 }

 .comment-form textarea {
     width: 100%;
     outline: none;
     resize: none;
     border: none;
     background: none;
     font-size: 13px;
     overflow: hidden !important;
     vertical-align: middle;
 }

 .navbar {
     z-index: 11111;
 }

 .navbar a {
     display: inline-block;
     color: #fff;
     text-transform: uppercase;
     font-size: 14px;
     font-weight: bold;
     padding: 7px;
 }

 .navbar a:hover {
     text-shadow: 2px 2px 0px #333;
 }

 .navbar>ul>li {
     display: inline-block;
     margin-right: 0px;
     padding: 6px 0;
 }

 .navbar>ul>li.menu-item-has-children>a:after,
 .navbar>ul>li.advanced-search>a:after {
     display: inline-block;
     width: 0;
     height: 0;
     margin-left: .255em;
     vertical-align: .255em;
     content: "";
     border-top: .3em solid;
     border-right: .3em solid transparent;
     border-bottom: 0;
     border-left: .3em solid transparent;
 }

 .navbar>ul>li>a {
     border-radius: 7px;
     background-color: #0f7fabeb;
     text-align: center;
 }

 .navbar .sub-menu {
     margin-bottom: 7px;
 }

 .navbar>ul>li>ul {
     position: absolute;
     display: none;
     background-color: #0f7fabeb;
     z-index: 1000;
     margin-top: 10px;
     border-radius: 5px;
     box-shadow: 1px 1px 7px #000;
     left: 0;
     width: 600px;
     max-width: 100vw;
 }

 .navbar>ul>li>ul:before {
     position: absolute;
     content: "";
     margin-top: -10px;
     border-right: 10px solid transparent;
     border-bottom: 10px solid #0f7fabeb;
     border-left: 10px solid transparent;
 }

 .navbar>ul>li:hover>ul {
     display: block;
 }

 .navbar>ul>li.menu-item-37:hover>ul {
     display: grid;
     grid-template-columns: 1fr 1fr;
 }
 .navbar>ul>li.menu-item-37:hover>ul>li:not(.menu-item-has-children)>a {
     display: flex;
     align-items: center;
     gap: 6px;
 }
 .navbar>ul>li.menu-item-37:hover>ul>li:not(.menu-item-has-children)>a:before {
     content: "";
     width: 13px;
     height: 13px;
     flex: 0 0 13px;
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E") no-repeat center/contain;
 }

 .primary-menu li#menu-item-37 a.active+.sub-menu {}

 .navbar>ul>li.advanced-search>ul:before {
     left: 290px;
 }

 .navbar>ul>li>ul>li {
     position: relative;
 }

 .navbar>ul>li>ul>li.menu-item-has-children>a:before {
     float: right;
     width: 0;
     height: 0;
     margin-top: 3px;
     margin-left: 10px;
     content: "";
     border-top: 5px solid transparent;
     border-right: 0;
     border-bottom: 5px solid transparent;
     border-left: 5px solid;
 }

 .navbar>ul>li>ul>li:hover>ul {
     display: block;
 }

 .navbar>ul>li>ul>li>ul {
     display: none;
     position: absolute;
     top: 0;
     left: 118px;
     z-index: 1;
     background-color: #2289b2;
     border: 1px solid #E0E0E0;
     border-radius: 5px;
 }

 .navbar>ul>li>ul>li>ul>li {
     white-space: nowrap;
 }

 div.advanced-search {
     padding: 10px 20px;
 }

 .sidebar .block.singer {
     border: 1px solid #f3f3f0;
     border-radius: 6px;
 }

 .sidebar .block.singer .top-block {
     background: #8abaea;
     border-bottom: 1px solid #d6d6d5;
     border-radius: 0;
 }

 .sidebar .block.singer h4 {
     background: url(../img/img-new/icon-sbh-title1.png) no-repeat center left;
     color: #ffffff;
     font-size: 18px;
     font-family: MYRIADPRO-SEMIBOLD;
 }

 .sidebar .block.the-loai .top-block {
     background: none;
     padding: 0;
 }

 .sidebar .block.the-loai .top-block h4 {
     color: #000000;
     font-size: 18px !important;
     font-family: MYRIADPRO-SEMIBOLD;
     background: url(../img/img-new/type.png) no-repeat center left;
 }

 .sidebar .block.the-loai .inner {
     padding-bottom: 30px;
 }

 .sidebar .block.the-loai .inner ul {
     background: none;
     padding: 0;
 }

 .sidebar .block.the-loai .inner ul li {
     background: url(../img/img-new/icon-theloai.png) no-repeat top left 25px #f3f3f3;
     background-position-y: 12px;
     padding: 6px 0;
     padding-left: 50px;
     margin-bottom: 3px;
 }

 .sidebar .block.the-loai .inner ul li a {
     color: #000000;
     font-weight: bold;
 }

 .sidebar .block.the-loai .inner ul li:last-child {
     margin-bottom: 0;
 }

 .sidebar .block.yc {
     background-color: #4b68b1;
     border-radius: 5px;
     text-align: center;
     margin-top: 20px !important;
 }

 .sidebar .block.yc a {
     background: none;
     height: auto;
     line-height: 1.4em;
     font-size: 18px;
     float: none;
     width: auto;
     font-family: MYRIADPRO-SEMIBOLD;
     text-align: center;
     padding: 19px 50px 11px;
     position: relative;
 }

 .sidebar .block.yc.yc-sb-fix {
     background: none !important;
 }

 .sidebar .block.yc.yc-sb-fix a {
     background: none;
     background-color: #4b68b1;
     font-size: 14px;
     float: left;
     padding: 18px 0px 10px;
     padding-left: 14px;
     margin: 0 1%;
     width: 48%;
 }

 .sidebar .block.yc a:before {
     content: "";
     background: url(../img/img-new/icon-yeu-cau.png) no-repeat center left;
     top: 50%;
     left: 10px;
     transform: translateY(-50%);
     text-shadow: none;
 }

 .sidebar .block.yc a:after {
     content: "\f075";
     position: absolute;
     right: 10px;
     top: 50%;
     transform: translateY(-50%);
     font-family: FontAwesome;
     text-shadow: none;
 }

 .sidebar .block.yc a:hover {
     text-shadow: 2px 2px 0px #333;
 }

 .sheet-with-border img {
     border: 1px solid rgba(199, 199, 199, 0.5);
     max-width: 100% !important;
 }

 .userbox .dangky a {
     line-height: 30px;
 }

 .userbox .dangky a:last-child {
     border-left: 1px solid #FFF;
 }

 .dangky {
     position: absolute;
     bottom: 0;
     transform: translateY(100%);
     z-index: 111100;
     display: none;
     background: #767676;
     right: 0;
     width: 170px;
     border-radius: 5px;
     overflow: hidden;
 }

 .logout {
     position: relative;
     display: none;
 }

 .logout.uk-active .dangky {
     display: flex;
 }

 .entry-header+.list-hop-am {
     height: 180px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 title .entry-header+.list-hop-am li {
     width: 50%;
 }

 .entry-header+.list-hop-am li .title {
     font-size: 20px;
     font-weight: bold;
 }

 .entry-header+.list-hop-am li .ha-inner {
     transform: scale(1);
     text-align: center;
 }


 .main-container {
     display: flex;
     flex-wrap: wrap;
 }

 .main-container>article {
     width: 66.66%;
 }

 .phienban {
     border-radius: 7px;
     background-color: #0f7fabeb;
     text-align: center;
     color: #fff !important;
     text-transform: uppercase;
     font-size: 14px;
     font-weight: bold;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 5px;
     z-index: 10000;
 }

 .phienban img {
     margin-left: 5px;
 }

 .song-tab-control {
     background: #0f7fabeb;
     border-radius: 5px;
     position: absolute;
     z-index: 111;
     top: 45px;
     display: none;
     left: 10px;
 }

 .phienban.active+.song-tab-control {
     display: inline-grid;
 }

 .song-tab-control::before {
     content: "";
     border: 10px solid transparent;
     border-bottom-color: #0f7fabeb;
     position: absolute;
     z-index: 111;
     top: 0;
     transform: translateY(-100%) translateX(10px);
 }

 .song-tab-control a {
     border-radius: 0;
     font-size: 14px;
     font-weight: bold;
     letter-spacing: 0.9;
     white-space: nowrap;
     width: 100%;
     background: transparent !important;
     padding: 5px 10px;
     text-transform: none;
     margin-right: 0;
     border-top: 0;
     color: #FFF;
     border: 0px solid transparent;
 }

 .song-tab-control .active {
     border: none;
     background: #ffffff80 !important;
 }

 .pb_content {
     position: relative;
 }

 #menu-item-63 .sub-menu {
     width: 300px;
 }

 #menu-item-63 .sub-menu:before {
     left: 110px;
 }

 #menu-item-37 .sub-menu:before {
     left: 30px;
 }

 #menu-footer-menu a {
     display: block;
 }

 .printThis .modal-body {
     columns: 2;
 }

 @keyframes scrollAnimation {
     from {
         transform: translateY(0);
     }

     to {
         transform: translateY(-100%);
     }
 }

 @media (max-width: 575.98px) {
     .navbar a {
         font-size: 11px;
     }

     .content table {
         zoom: 80%;
     }

     .section.print .content {
         padding: 0.5rem;
     }

     .tools-area,
     .tools-area .group {
         display: flex;
     }

     .tools-area {
         gap: 2px;
         margin: -1rem -1rem 0 -1rem; /* HAP: bottom PHAI la 0, khong duoc am - tranh de len .hap-infobar2 */
         background: #fff;
     }

     .tools-area .group {
         justify-content: center;
         flex-grow: 1;
     }

     .tools-area .bot,
     .tools-area .group:nth-last-child(-n+2),
     .tools-area .speed-opts .speed-inner:before {
         display: none;
     }

     .tools-area .speed-opts {
         top: 39px;
         left: 0;
     }

     .song-tabs {
         max-width: unset;
     }

     .tieude .bg-info {
         float: right;
     }
 }

 @media (max-width: 991.98px) {
     :root {
         font-size: 14px;
     }

     .search-form {
         position: absolute;
         width: 0;
         transition: width 1s;
     }

     .primary-menu {
         width: 100%;
         padding: 0 0px;
     }

     .printThis .modal-body {
         columns: unset;
     }
 }

 @media screen {
     #printSection {
         display: none;
     }
 }

 @media print {

     body>*:not(#printSection),
     .adsbygoogle,
     .adsbygoogle * {
         display: none !important;
     }

     #printSection,
     #printSection * {
         visibility: visible;
     }

     .printThis .modal-body {
         columns: unset !important;
     }

     #printSection .modal-footer {
         display: none;
     }
 }

 .tabbed {
     border-bottom: 4px solid #000;
     overflow: hidden;
     transition: border 250ms ease;
 }

 .tabbed div {
     display: flex;
     justify-content: center;
     gap: 30px;
 }

 .tabbed div * {
     margin: 0px;
     padding: 0px;
 }

 .tabbed div button {
     padding: 5px 5px 0;
     background-color: #FFF;
     z-index: 2;
     position: relative;
     cursor: pointer;
     color: #777;
     text-transform: uppercase;
     font-size: 0.9rem;
     font-weight: 600;
     transition: all 250ms ease;
 }

 .tabbed div button:hover {
     z-index: 3;
 }

 .tabbed div button:before,
 .tabbed div button:after {
     display: block;
     content: " ";
     position: absolute;
     top: 0;
     height: 100%;
     width: 30px;
     background-color: #FFF;
     transition: all 250ms ease;
 }

 .tabbed div button:before {
     right: -15px;
     transform: skew(30deg, 0deg);
 }

 .tabbed div button:after {
     left: -15px;
     transform: skew(-30deg, 0deg);
 }

 .tabbed div button:hover,
 .tabbed div button:hover:before,
 .tabbed div button:hover:after {
     background-color: #F4F7F9;
     color: #444;
 }

 .tabbed div button.active {
     z-index: 4;
 }

 .tabbed div button.active,
 .tabbed div button.active:before,
 .tabbed div button.active:after {
     background-color: #000;
     color: #fff;
 }

 .tabbed.round div button {
     border-radius: 8px 8px 0 0;
 }

 .tabbed.round div button:before {
     border-radius: 0 8px 0 0;
     z-index: -1;
 }

 .tabbed.round div button:after {
     border-radius: 8px 0 0 0;
     z-index: -1;
 }

 .tabbed[class*="skin-"] div button {
     color: #FFF;
     text-shadow: rgba(0, 0, 0, .1) 0 1px;
     border: 0;
 }

 .tabbed.skin-belize-hole {
     border-bottom-color: #2980B9;
 }

 .tabbed.skin-belize-hole div button,
 .tabbed.skin-belize-hole div button:before,
 .tabbed.skin-belize-hole div button:after {
     background-color: #439AD3;
 }

 .tabbed.skin-belize-hole div button:hover,
 .tabbed.skin-belize-hole div button:hover:before,
 .tabbed.skin-belize-hole div button:hover:after {
     background-color: #4FA6DF;
 }

 .tabbed.skin-belize-hole div button.active,
 .tabbed.skin-belize-hole div button.active:before,
 .tabbed.skin-belize-hole div button.active:after {
     background-color: #2980B9;
 }

 .toolbar button svg {
     fill: #fff;
 }

 .btn-check:checked+.btn,
 .btn.active,
 .btn.show,
 .btn:first-child:active,
 :not(.btn-check)+.btn:active {
     background: #ff7900;
     border-color: #5D5F5F;
 }

 .draw-chord {
     border: 1px solid #84bfcb;
 }

 .bg-info.text-white {
     background-color: #D3EFF3 !important;
     color: #004B4D !important;
     border: 1px solid #e3e5e8;
 }

 .header-logo-avatar {
     width: 43px;
     height: 43px;
     object-fit: contain;
     display: inline-block;
     vertical-align: middle;
     margin-top: 5px;
     border: none;
     border-radius: 0;
     box-shadow: none;
 }

 .home #main>.container:first-of-type {
     min-height: 220px;
 }

 .item .thumb,
 .card .thumb,
 .thumb {
     aspect-ratio: 1 / 1;
     overflow: hidden;
 }

 .item .thumb img {
     width: 100%;
     height: auto;
     display: block;
 }

 .hap-toggle {
     display: inline-flex;
     align-items: stretch;
     gap: 0;
     border: 1px solid #d0d7de;
     border-radius: 6px;
     background: #fff;
     overflow: hidden;
     box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
     align-items: center;
     vertical-align: middle;
     position: relative;
     top: 0px;
 }

 .hap-seg {
     padding: .4rem .8rem;
     font-weight: 600;
     line-height: 1;
     border: 0;
     background: transparent;
     cursor: pointer;
     white-space: nowrap;
     transition: background .15s ease, color .15s ease;
 }

 .hap-seg+.hap-seg {
     border-left: 1px solid #d0d7de;
 }

 .hap-seg:hover {
     background: #f3f4f6;
 }

 .hap-seg:focus {
     outline: 2px solid #99c2ff;
     outline-offset: 0;
 }

 .hap-seg.active {
     background: #77E9DA;
     color: #fff;
     box-shadow: inset 0 0 0 1px #1f6fff;
 }

 @media (max-width:576px) {
     .hap-seg {
         padding: .55rem .9rem;
         font-size: 14px;
     }
 }

 .hap-section-divider,
 .hap-section-divider hr {
     border: 0 !important;
     height: 0 !important;
     border-top: 2px solid #B7C3D0 !important;
     opacity: 1 !important;
     margin: .5rem 0 .7rem !important;
 }

 @media (prefers-color-scheme: dark) {

     hr.hap-section-divider,
     hr.hap-bxh-divider {
         background-color: rgba(255, 255, 255, .28) !important;
     }
 }

 .theme-dark hr.hap-section-divider,
 .theme-dark hr.hap-bxh-divider,
 .dark hr.hap-section-divider,
 .dark hr.hap-bxh-divider {
     background-color: rgba(255, 255, 255, .28) !important;
 }

 @media (prefers-color-scheme: dark) {
     .hap-section-divider {
         background: rgba(255, 255, 255, .22);
     }
 }

 .hap-bxh .tab-pane>.pb-3 {
     padding: .35rem 0 .55rem;
 }

 .hap-bxh .tab-pane>.pb-3+.pb-3 {
     border-top: 1px solid rgba(0, 0, 0, .08);
 }

 @media (prefers-color-scheme: dark) {
     .hap-bxh .tab-pane>.pb-3+.pb-3 {
         border-top: 1px solid rgba(255, 255, 255, .22);
     }
 }

 .theme-dark .hap-bxh .tab-pane>.pb-3+.pb-3,
 .dark .hap-bxh .tab-pane>.pb-3+.pb-3 {
     border-top: 1px solid rgba(255, 255, 255, .22);
 }

 .section-nn a:focus,
 .section-nn a:active,
 .section-nn a:hover,
 .section-nn img,
 .listHopAm a:focus,
 .listHopAm a:active,
 .listHopAm img {
     border: 0 !important;
     outline: 0 !important;
     box-shadow: none !important;
     border-image: none !important;
 }

 .section-nn a[href*="/bai-hat/"],
 .listHopAm a[href*="/bai-hat/"] {
     border: 0 !important;
     outline: 0 !important;
     box-shadow: none !important;
 }

 img.border {
     border: 0 !important;
 }

 html,
 body {
     font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
     -webkit-text-size-adjust: 100%;
 }

 .section .item .d-flex.align-items-baseline.justify-content-between {
     display: grid !important;
     grid-auto-flow: column;
     align-items: baseline;
     justify-content: space-between;
     position: relative;
     z-index: 1;
 }

 .f-title a,
 a.f-title,
 .f-title.text-nowrap {
     color: #0044cc !important;
     font-weight: 600;
 }

 .f-title a:hover {
     color: #002a80 !important;
 }

 .visually-hidden {
     position: absolute !important;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border: 0;
 }

 @media (max-width: 768px) {

     header,
     .hap-header,
     .top-bar {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         justify-content: center;
     }

     .btn,
     .hap-btn,
     button {
         width: auto;
         min-width: 60px;
         margin: 0px;
     }

     .search-box,
     .search-bar {
         max-width: 90%;
     }

     .chord-image,
     .hap-chord {
         display: block;
         margin: 0 auto;
     }
 }

 body.admin-bar #wpadminbar {
     position: fixed !important;
     top: 0 !important;
     z-index: 2147483647 !important;
 }

 body.admin-bar {
     padding-top: 32px !important;
 }

 @media (max-width: 782px) {
     body.admin-bar {
         padding-top: 46px !important;
     }
 }

 body.admin-bar .site-header,
 body.admin-bar .hap-header,
 body.admin-bar .main-header,
 body.admin-bar #masthead {
     top: 32px !important;
 }

 @media (max-width: 782px) {

     body.admin-bar .site-header,
     body.admin-bar .hap-header,
     body.admin-bar .main-header,
     body.admin-bar #masthead {
         top: 46px !important;
     }
 }

 html {
     margin-top: 0 !important;
 }

 body.admin-bar {
     --abH: 32px;
 }

 @media (max-width:782px) {
     body.admin-bar {
         --abH: 46px;
     }
 }

 body.admin-bar .site-header,
 body.admin-bar .hap-header,
 body.admin-bar .main-header,
 body.admin-bar #masthead {
     margin-top: var(--abH) !important;
 }

 .ins-ads,
 ins.adsbygoogle {
     display: block !important;
     width: 100% !important;
     min-height: auto;
 }

 @media (max-width: 768px) {

     .ins-ads,
     ins.adsbygoogle {
         min-height: 250px;
     }
 }

 .hap-bxh-list {
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .hap-bxh-item {
     position: relative;
     padding: 6px 0;
     border-bottom: 1px solid #e9ecef;
 }

 .hap-bxh-rank {
     font-weight: 700;
     margin-right: 6px;
     font-size: 14px;
 }

 .hap-bxh-title {
     font-weight: 600;
     color: #333;
     text-decoration: none;
 }

 .hap-bxh-title:hover {
     color: #0066cc;
 }

 .hap-bxh-tags {
     margin-left: 22px;
     margin-top: 2px;
 }

 .hap-tag {
     display: inline-block;
     background: #d1e9ff;
     padding: 2px 6px;
     border-radius: 4px;
     font-size: 12px;
     margin-right: 3px;
     color: #005a99;
     font-weight: 500;
 }

 .hap-bxh-eye {
     position: absolute;
     right: 0;
     top: 8px;
     font-size: 14px;
     color: #666;
 }

 .hap-bxh-eye i {
     margin-right: 2px;
 }

 .hap-song-seo-intro {
     margin-bottom: 16px;
     padding: 10px 12px;
     border-left: 3px solid #1f6fff;
     background: #f7f9ff;
     font-size: 14px;
     line-height: 1.5;
 }

 .hap-song-seo-intro p {
     margin: 0;
 }

 .site-header,
 .main-navigation {
     overflow: visible !important;
 }

 .main-navigation ul ul {
     z-index: 999999 !important;
 }

 .main-navigation li.menu-item-has-children {
     position: relative;
 }

 .main-navigation li.menu-item-has-children>ul.sub-menu {
     top: 100%;
     margin-top: 0 !important;
     padding-top: 8px;
 }

 .main-navigation li.menu-item-has-children:hover>ul.sub-menu,
 .main-navigation li.menu-item-has-children:focus-within>ul.sub-menu {
     display: block;
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
 }

 .tax-seo-intro {
     margin: 10px 0 14px
 }

 .tax-seo-intro p {
     margin: 0;
     line-height: 1.6
 }

 .single-ca-si .post-thumbnail img,
 .single-nhac-si .post-thumbnail img {
     width: 100%;
     height: auto;
     aspect-ratio: 1/1;
     object-fit: cover;
 }

 .single-bai-hat .post-thumbnail img {
     width: 100%;
     height: auto;
     aspect-ratio: 16/9;
     object-fit: cover;
 }

 .entry-content img {
     max-width: 100%;
     height: auto;
     aspect-ratio: auto;
 }

 .site-header {
     min-height: 64px;
 }

 .site-header.sticky {
     min-height: 64px;
 }

 a mark.hap-hl,
 span mark.hap-hl,
 mark.hap-hl {
     background: #ffe08a !important;
     color: #000 !important;
     padding: 0 .18em;
     border-radius: 3px;
     font-weight: 700;
 }

 body.admin-bar #wpadminbar {
     display: block !important;
     visibility: visible !important;
     opacity: 1 !important;
     transform: none !important;
     pointer-events: auto !important;
     position: fixed !important;
     top: 0 !important;
     left: 0 !important;
     right: 0 !important;
     width: 100% !important;
     height: 32px !important;
     min-height: 32px !important;
     z-index: 2147483647 !important;
 }

 @media (max-width:782px) {
     body.admin-bar #wpadminbar {
         height: 46px !important;
         min-height: 46px !important;
     }
 }

 body.admin-bar {
     padding-top: 32px !important;
 }

 @media (max-width:782px) {
     body.admin-bar {
         padding-top: 46px !important;
     }
 }

 body.admin-bar {
     margin-top: 32px !important;
 }

 @media screen and (max-width: 782px) {
     body.admin-bar {
         margin-top: 46px !important;
     }
 }

 .hap-ifaq-tabs {
     display: inline-flex;
     align-items: center;
     border: 1px solid #2d6cdf;
     border-radius: 999px;
     overflow: hidden;
     margin-bottom: 15px;
     background: #fff;
 }

 .hap-ifaq-btn {
     border: 0;
     background: transparent;
     color: #2d6cdf;
     padding: 7px 18px;
     font-size: 14px;
     font-weight: 600;
     line-height: 1.2;
     cursor: pointer;
     transition: all .2s ease;
 }

 .hap-ifaq-btn+.hap-ifaq-btn {
     border-left: 1px solid #2d6cdf;
 }

 .hap-ifaq-btn.active {
     background: #2d6cdf;
     color: #fff;
 }

 .hap-ifaq-pane {
     display: none;
 }

 .hap-ifaq-pane.active {
     display: block;
 }

 .hap-info-faq>h2 {
     text-align: center;
     font-size: 50px;
     font-weight: 800;
     margin-bottom: 20px;
     color: #1f2937;
     letter-spacing: -0.3px;
 }

 .hap-body p {
     margin: 0 0 10px;
 }

 .hap-body ul,
 .hap-body ol {
     margin: 8px 0 12px 22px;
     padding-left: 18px;
 }

 .hap-body li {
     margin: 4px 0;
     line-height: 1.6;
 }

 .hap-body {
     line-height: 1.65;
 }

 .hap-pb-sidebar .taglink {
     font-size: 0.875rem;
 }

 .hap-theme-toggle {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     border: none;
     background: rgba(255, 255, 255, .15);
     color: #fff;
     cursor: pointer;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     transition: background .2s;
     padding: 0;
     display: flex;
 }

 @media (min-width: 992px) {
     .hap-theme-toggle {
         display: flex;
     }
 }

 .hap-theme-toggle:hover {
     background: rgba(255, 255, 255, .28);
 }

 .hap-theme-toggle .icon-sun {
     display: none;
 }

 .hap-theme-toggle .icon-moon {
     display: block;
 }

 html.dark-mode .hap-theme-toggle .icon-sun {
     display: block;
 }

 html.dark-mode .hap-theme-toggle .icon-moon {
     display: none;
 }

 @media (min-width: 992px) {
     .navbar .search-form {
         max-width: 280px;
     }
 }

 html.dark-mode,
 html.dark-mode body {
     background: #0f0f17 !important;
     color: #d0d0d8 !important;
 }

 html.dark-mode header,
 html.dark-mode .header,
 html.dark-mode nav,
 html.dark-mode .navbar {
     background: #1a1a2a !important;
 }

 html.dark-mode a {
     color: #7eb8f7;
 }

 html.dark-mode a:hover {
     color: #aecbfa;
 }

 html.dark-mode .text-white {
     color: #fff !important;
 }

 html.dark-mode .card,
 html.dark-mode .card-body,
 html.dark-mode .section,
 html.dark-mode .widget,
 html.dark-mode .sidebar,
 html.dark-mode .box,
 html.dark-mode [class*="section-"],
 html.dark-mode .bg-white,
 html.dark-mode .bg-light {
     background: #1c1c2a !important;
     color: #d0d0d8 !important;
 }

 html.dark-mode .border,
 html.dark-mode .card,
 html.dark-mode [class*="border-"] {
     border-color: #2e2e3e !important;
 }

 html.dark-mode .section-title,
 html.dark-mode h1,
 html.dark-mode h2,
 html.dark-mode h3,
 html.dark-mode h4 {
     color: #e8e8f0 !important;
 }

 html.dark-mode .text-muted {
     color: #778 !important;
 }

 html.dark-mode .text-dark {
     color: #d0d0d8 !important;
 }

 html.dark-mode small {
     color: #889 !important;
 }

 html.dark-mode input:not([type=submit]):not([type=button]),
 html.dark-mode textarea,
 html.dark-mode select {
     background: #1c1c2a !important;
     color: #d0d0d8 !important;
     border-color: #3a3a4e !important;
 }

 html.dark-mode .badge,
 html.dark-mode [class*="btn-outline"] {
     border-color: #445;
 }

 html.dark-mode .hap-top-tab {
     color: #aaa;
 }

 html.dark-mode .hap-top-tab.active {
     color: #fff;
     background: #2a2a3e;
 }

 html.dark-mode span.draw-chord>div,
 html.dark-mode span.draw-chord>div[style] {
     background: #1c1c2a !important;
     color: #ddd !important;
 }

 html.dark-mode span.draw-chord a,
 html.dark-mode span.draw-chord .change-instrument {
     color: #7eb8f7 !important;
 }

 html.dark-mode span.draw-chord .change-instrument-popup,
 html.dark-mode span.draw-chord .change-instrument-popup[style] {
     background: #1c1c2a !important;
     border-color: #3a3a4e !important;
 }

 html.dark-mode span.draw-chord canvas {
     filter: invert(1);
 }

 html.dark-mode .song-tabs .bg-white,
 html.dark-mode .tab-content .bg-white {
     background: #1a1a2a !important;
     color: #ccc !important;
 }

 html.dark-mode .bg-body-secondary,
 html.dark-mode blockquote.bg-body-secondary {
     background: #1e1e30 !important;
     color: #ccc !important;
     border-color: #e74c3c !important;
 }

 html.dark-mode .tab-content.song-tabs,
 html.dark-mode .song-tabs .tab-pane {
     background: #0f0f17 !important;
     color: #ccc !important;
 }

 html.dark-mode .chord {
     color: #7eb8f7 !important;
 }

 html.dark-mode .f-title {
     color: #7eb8f7 !important;
 }

 html.dark-mode .section-tb {
     background: #0f0f17 !important;
 }

 html.dark-mode .main-sidebar .card,
 html.dark-mode .main-sidebar .section {
     background: #1a1a2a !important;
     border-color: #2e2e3e !important;
 }

 html.dark-mode .song-tabs .bg-white,
 html.dark-mode .tab-content .bg-white {
     background: #1a1a2a !important;
     color: #ccc !important;
 }

 html.dark-mode .bg-body-secondary,
 html.dark-mode blockquote.bg-body-secondary {
     background: #1e1e30 !important;
     color: #ccc !important;
     border-color: #e74c3c !important;
 }

 html.dark-mode .tab-content.song-tabs,
 html.dark-mode .song-tabs .tab-pane {
     background: #0f0f17 !important;
     color: #ccc !important;
 }

 html.dark-mode .chord {
     color: #7eb8f7 !important;
 }

 html.dark-mode .f-title {
     color: #7eb8f7 !important;
 }

 html.dark-mode .section-tb {
     background: #0f0f17 !important;
 }

 html.dark-mode .main-sidebar .card,
 html.dark-mode .main-sidebar .section {
     background: #1a1a2a !important;
     border-color: #2e2e3e !important;
 }

 html.dark-mode #search-q {
     background: rgba(255, 255, 255, .1) !important;
     color: #fff !important;
     border-color: rgba(255, 255, 255, .2) !important;
 }

 html.dark-mode #search-q::placeholder {
     color: rgba(255, 255, 255, .5) !important;
 }

 html.dark-mode .sidebar {
     background: #0f0f17 !important;
 }

 html.dark-mode .sidebar .card,
 html.dark-mode .sidebar .section,
 html.dark-mode .sidebar>div,
 html.dark-mode .sidebar .bg-white {
     background: #1a1a2a !important;
     color: #ccc !important;
 }

 html.dark-mode .sidebar .card-body {
     background: #1a1a2a !important;
 }

 html.dark-mode .sidebar p,
 html.dark-mode .sidebar span {
     color: #bbb !important;
 }

 html.dark-mode .sidebar h3,
 html.dark-mode .sidebar h4,
 html.dark-mode .sidebar .section-title {
     color: #e0e0f0 !important;
 }

 html.dark-mode #toolbar,
 html.dark-mode .tools-area {
     background: #1a1a2a !important;
     border-color: #2e2e3e !important;
 }

 html.dark-mode .tools-area .group {
     border-color: #2e2e3e !important;
     background: #1a1a2a !important;
 }

 html.dark-mode .tools-area .el {
     color: #aac4f0 !important;
 }

 html.dark-mode .tools-area .el:hover {
     color: #fff !important;
     background: #2a2a3e !important;
 }

 html.dark-mode .tools-area .sp-title {
     color: #aaa !important;
 }

 html.dark-mode .tools-area .speed-opts {
     background: #1a1a2a !important;
     border-color: #333 !important;
 }

 html.dark-mode .tools-area .speed-inner span {
     color: #ccc !important;
 }

 html.dark-mode .comment-reply,
 html.dark-mode #comment-reply-box {
     background: #1a1a2a !important;
     border-color: #2e2e3e !important;
 }

 html.dark-mode .reply-user {
     background: #1a1a2a !important;
     color: #ccc !important;
 }

 html.dark-mode .reply-content {
     background: #1a1a2a !important;
 }

 html.dark-mode #hap-comment-text {
     background: #0f0f17 !important;
     color: #ddd !important;
     border-color: #333 !important;
 }

 html.dark-mode .reply-content button {
     border-color: #444 !important;
 }

 .item.row a.bg-info.rounded-pill,
 .item.row a.text-uppercase.d-inline-flex.align-items-center {
     min-height: 48px;
     display: inline-flex !important;
     align-items: center !important;
 }

 .taglink span.border.border-info.rounded {
     align-self: center;
     line-height: 1.4;
 }

 .taglink span.border.border-info.rounded {
     font-size: 12.5px;
 }

 .taglink span.border.border-info.rounded {
     font-size: 16px;
     align-self: center;
     line-height: 1.4;
 }

 html.dark-mode .taglink a.bg-info.rounded-pill {}

 html.dark-mode .taglink a.bg-info.rounded-pill,
 html.dark-mode .taglink a[class*="rounded-pill"] {
     box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
 }

 @media (max-width: 767px) {
     canvas.piano-canvas {
         width: 100% !important;
         height: auto !important;
     }
 }

 #hap-toolbar-inline {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 6px;
     padding: 8px 12px;
     background: #f8fafc;
     border: 1px solid #e2e8f0;
     border-radius: 10px;
     margin-bottom: 12px;
 }

 #hap-toolbar-inline .hap-tb-btn {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     padding: 5px 11px;
     font-size: 13px;
     font-weight: 600;
     line-height: 1;
     border: 1px solid #d0d7de;
     border-radius: 6px;
     background: #fff;
     color: #24292f;
     cursor: pointer;
     text-decoration: none;
     transition: background .15s, border-color .15s, color .15s;
     white-space: nowrap;
     user-select: none;
 }

 #hap-toolbar-inline .hap-tb-btn:hover {
     background: #f3f4f6;
     border-color: #b0b7c0;
     color: #24292f;
 }

 #hap-toolbar-inline .hap-tb-btn.active {
     background: #1e63ff;
     border-color: #1e63ff;
     color: #fff;
 }

 #hap-toolbar-inline #btn-easy-chord {
     background: #fff7ed;
     border-color: #f59e0b;
     color: #b45309;
 }

 #hap-toolbar-inline #btn-easy-chord:hover {
     background: #fef3c7;
 }

 #hap-toolbar-inline #btn-easy-chord.active {
     background: #f59e0b;
     border-color: #d97706;
     color: #fff;
 }

 .hap-tb-group {
     display: inline-flex;
     border: 1px solid #d0d7de;
     border-radius: 6px;
     overflow: hidden;
 }

 .hap-tb-group .hap-tb-btn {
     border: none;
     border-radius: 0;
     border-right: 1px solid #d0d7de;
 }

 .hap-tb-group .hap-tb-btn:last-child {
     border-right: none;
 }

 .hap-tb-group .hap-tb-btn:hover {
     background: #f3f4f6;
 }

 .hap-tb-divider {
     width: 1px;
     height: 24px;
     background: #e2e8f0;
     flex-shrink: 0;
 }

 @media (max-width: 575px) {
     #hap-toolbar-inline {
         gap: 4px;
         padding: 7px 8px;
     }

     #hap-toolbar-inline .hap-tb-btn {
         padding: 5px 8px;
         font-size: 12px;
     }

     .hap-tb-divider {
         display: none;
     }
 }

 .song-tabs blockquote.border-start {
     padding: 10px 14px !important;
     font-size: 13.5px;
     line-height: 1.7;
 }

 .song-tabs blockquote .me-4 {
     margin-right: 12px !important;
 }

 .hap-toggle-row {
     margin-top: 8px;
 }

 .hap-vote-popup {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
 }

 .hap-vote-item {
     padding: 4px 10px;
     font-size: 12.5px;
     font-weight: 600;
     border: 1px solid #e2e8f0;
     border-radius: 6px;
     background: #f8fafc;
     color: #444;
     cursor: pointer;
     transition: background .15s, border-color .15s;
 }

 .hap-vote-item:hover {
     background: #1e63ff;
     border-color: #1e63ff;
     color: #fff;
 }

 .hap-infobar2 {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
     gap: 6px;
     padding: 7px 12px;
     background: #f8fafc;
     border: 1px solid #e2e8f0;
     border-radius: 10px;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
     font-size: 13px;
     margin-bottom: 12px;
 }

 .hap-infobar2::-webkit-scrollbar {
     display: none;
 }

 .hap-ib2-chip {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     padding: 3px 9px;
     background: #fff;
     border: 1px solid #e2e8f0;
     border-radius: 6px;
     white-space: nowrap;
     font-size: 12.5px;
     color: #555;
     flex-shrink: 0;
 }

 .hap-ib2-chip svg {
     opacity: .5;
     flex-shrink: 0;
 }

 .hap-ib2-val {
     font-weight: 600;
     color: #1e63ff;
     text-decoration: none;
 }

 .hap-ib2-val:hover {
     text-decoration: underline;
 }

 .hap-ib2-divider {
     width: 1px;
     height: 22px;
     background: #e2e8f0;
     flex-shrink: 0;
 }

 html.dark-mode .hap-infobar2 {
     background: #1c1c2a;
     border-color: #2d2d3d;
 }

 html.dark-mode .hap-ib2-chip {
     background: #252535;
     border-color: #3a3a4d;
     color: #ccc;
 }

 html.dark-mode .hap-ib2-val {
     color: #7eb8f7;
 }

 html.dark-mode .hap-ib2-val:hover {
     color: #7eb8f7;
 }

 html.dark-mode .hap-ib2-divider {
     background: #3a3a4d;
 }

 .hap-ib2-chip--transposed {
     background: #f0fdf4;
     border-color: #86efac;
     color: #166534;
 }

 .hap-ib2-chip--transposed svg {
     opacity: .7;
 }

 .hap-ib2-chip--transposed .hap-ib2-val {
     color: #15803d;
 }

 .hap-ib2-chip--transposed .hap-ib2-label {
     font-size: 11px;
     color: #166534;
     opacity: .8;
 }

 html.dark-mode .hap-ib2-chip--transposed {
     background: #052e16;
     border-color: #166534;
     color: #86efac;
 }

 html.dark-mode .hap-ib2-chip--transposed .hap-ib2-val {
     color: #4ade80;
 }

 html.dark-mode .hap-ib2-chip--transposed .hap-ib2-label {
     color: #86efac;
 }

 html.dark-mode #btn-easy-chord {
     background: #3a2800;
     border-color: #b45309;
     color: #fbbf24;
 }

 html.dark-mode #btn-easy-chord.active {
     background: #d97706;
     color: #fff;
 }

 html.dark-mode .hap-header-meta {
     background: rgba(0, 0, 0, .35);
 }

 html.dark-mode .hap-meta-chip {
     background: rgba(255, 255, 255, .08);
     border-color: rgba(255, 255, 255, .15);
 }

 html.dark-mode .hap-meta-val {
     color: #fff;
 }

 html.dark-mode #hap-vote-popup-box {
     background: #1c1c2a;
     border-color: #3a3a4d;
 }

 html.dark-mode .hap-vote-item {
     background: #252535;
     border-color: #3a3a4d;
     color: #ccc;
 }

 html.dark-mode .hap-vote-item:hover {
     background: #1e63ff;
     color: #fff;
 }

 .hap-header-block {
     display: flex;
     flex-direction: column;
     padding: 0 !important;
     overflow: hidden;
 }

 .hap-header-title {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 0.4rem 1rem;
     min-height: 0;
 }

 .hap-header-title h1 {
     margin: 0;
     color: #fff;
     font-weight: 700;
     text-transform: uppercase;
     font-size: clamp(0.95rem, 2.5vw, 1.3rem);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     flex: 1;
     text-align: center;
 }

 .hap-badge-sheet {
     display: inline-flex;
     align-items: center;
     padding: 2px 8px;
     background: rgba(255, 255, 255, .2);
     border: 1px solid rgba(255, 255, 255, .4);
     border-radius: 4px;
     color: #fff;
     font-size: 11px;
     font-weight: 600;
     text-decoration: none;
     white-space: nowrap;
     flex-shrink: 0;
 }

 .hap-badge-sheet:hover {
     background: rgba(255, 255, 255, .35);
     color: #fff;
 }

 .hap-header-meta {
     display: flex;
     align-items: center;
     gap: 5px;
     padding: 8px 10px;
     background: rgba(0, 0, 0, .2);
     overflow-x: auto;
     flex-wrap: nowrap;
     scrollbar-width: none;
     -webkit-overflow-scrolling: touch;
 }

 .hap-header-meta::-webkit-scrollbar {
     display: none;
 }

 .hap-meta-chip {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     padding: 3px 9px;
     background: rgba(255, 255, 255, .15);
     border: 1px solid rgba(255, 255, 255, .25);
     border-radius: 6px;
     color: #fff;
     font-size: 12px;
     white-space: nowrap;
     flex-shrink: 0;
     text-decoration: none;
 }

 .hap-meta-chip svg {
     opacity: .8;
     flex-shrink: 0;
 }

 .hap-meta-val {
     font-weight: 600;
     color: #fff;
     text-decoration: none;
 }

 .hap-meta-val:hover {
     text-decoration: underline;
     color: #fff;
 }

 a.hap-meta-like {
     cursor: pointer;
     background: rgba(220, 53, 69, .2);
     border-color: rgba(255, 200, 200, .4);
 }

 a.hap-meta-like:hover {
     background: rgba(220, 53, 69, .4);
     color: #fff;
 }

 .hap-vote-btn {
     background: rgba(255, 255, 255, .25);
     border: 1px solid rgba(255, 255, 255, .4);
     border-radius: 4px;
     color: #fff;
     font-size: 11px;
     padding: 1px 5px;
     cursor: pointer;
     line-height: 1;
 }

 .hap-vote-btn:hover {
     background: rgba(255, 255, 255, .4);
 }

 html.dark-mode .hap-header-meta {
     background: rgba(0, 0, 0, .4);
 }

 html.dark-mode .hap-meta-chip {
     background: rgba(255, 255, 255, .08);
     border-color: rgba(255, 255, 255, .15);
 }

 html.dark-mode .hap-meta-val {
     color: #fff;
 }

 html.dark-mode #hap-vote-popup-box {
     background: #1c1c2a;
     border-color: #3a3a4d;
 }

 html.dark-mode .hap-vote-item {
     background: #252535;
     border-color: #3a3a4d;
     color: #ccc;
 }

 html.dark-mode .hap-vote-item:hover {
     background: #1e63ff;
     color: #fff;
 }

 @media (max-width: 767px) {
     .hap-infobar2 {
         gap: 5px !important;
         padding: 6px 8px !important;
     }

     .hap-ib2-chip {
         padding: 3px 7px !important;
         font-size: 12px !important;
     }

     #btn-easy-chord {
         padding: 3px 8px !important;
         font-size: 12px !important;
     }
 }

 .hap-infobar2 {
     overflow-x: auto !important;
     flex-wrap: nowrap !important;
     -webkit-overflow-scrolling: touch !important;
 }

 .hap-infobar2>* {
     flex-shrink: 0;
 }

 .hap-infobar2 #hap-toggle-brand {
     border: 1px solid #e2e8f0 !important;
     border-radius: 6px !important;
     background: #fff !important;
     overflow: hidden !important;
     display: inline-flex !important;
     flex-shrink: 0;
 }

 .hap-infobar2 #hap-toggle-brand .hap-seg {
     padding: 3px 10px !important;
     font-size: 12.5px !important;
     font-weight: 600 !important;
     background: transparent !important;
     color: #555 !important;
     border: none !important;
     border-right: 1px solid #e2e8f0 !important;
     line-height: 1.6 !important;
     white-space: nowrap;
 }

 .hap-infobar2 #hap-toggle-brand .hap-seg:last-child {
     border-right: none !important;
 }

 .hap-infobar2 #hap-toggle-brand .hap-seg:hover {
     background: #f3f4f6 !important;
     color: #24292f !important;
 }

 .hap-infobar2 #hap-toggle-brand .hap-seg.active,
 .hap-infobar2 #hap-toggle-brand .hap-seg[aria-pressed="true"] {
     background: #1e63ff !important;
     color: #fff !important;
 }

 .hap-infobar2 #btn-easy-chord {
     padding: 3px 10px !important;
     font-size: 12.5px !important;
     border-radius: 6px !important;
     line-height: 1.6 !important;
     flex-shrink: 0;
 }

 #hap-toggle-easy {
     border: 1px solid #e2e8f0 !important;
     border-radius: 6px !important;
     background: #fff !important;
     overflow: hidden !important;
     display: inline-flex !important;
     flex-shrink: 0;
 }

 #hap-toggle-easy .hap-seg {
     padding: 3px 10px !important;
     font-size: 12.5px !important;
     font-weight: 600 !important;
     background: transparent !important;
     color: #555 !important;
     border: none !important;
     border-right: 1px solid #e2e8f0 !important;
     line-height: 1.6 !important;
     white-space: nowrap;
     cursor: pointer;
 }

 #hap-toggle-easy .hap-seg:last-child {
     border-right: none !important;
 }

 #hap-toggle-easy .hap-seg:hover {
     background: #f3f4f6 !important;
     color: #24292f !important;
 }

 #hap-toggle-easy .hap-seg.active,
 #hap-toggle-easy .hap-seg[aria-pressed="true"] {
     background: #f59e0b !important;
     color: #fff !important;
 }

 .hap-header-meta,
 .hap-meta-chip,
 .hap-meta-val {
     text-transform: none !important;
 }

 .section .header .hap-header-meta,
 .section .header .hap-meta-chip,
 .section .header .hap-meta-chip *,
 .section .header .hap-meta-val,
 .hap-header-meta * {
     text-transform: none !important;
     letter-spacing: normal !important;
 }

 .hap-vote-btn--empty {
     background: rgba(255, 255, 255, .25) !important;
     border: 1px solid rgba(255, 255, 255, .5) !important;
     border-radius: 5px !important;
     color: #fff !important;
     font-size: 11.5px !important;
     font-weight: 600 !important;
     padding: 2px 8px !important;
     cursor: pointer;
     line-height: 1.4;
 }

 .hap-vote-btn--empty:hover {
     background: rgba(255, 255, 255, .4) !important;
 }

 #hap-vote-popup-box {
     position: fixed;
     z-index: 9999;
     background: #fff;
     border: 1px solid #e2e8f0;
     border-radius: 10px;
     padding: 12px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
     max-width: 300px;
     min-width: 240px;
 }

 #hap-vote-popup-box .hap-vote-title {
     font-weight: 700;
     font-size: 13px;
     margin-bottom: 10px;
     color: #333;
     border-bottom: 1px solid #e2e8f0;
     padding-bottom: 8px;
 }

 #hap-vote-popup-box .hap-vote-popup {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
 }

 .hap-vote-item {
     padding: 4px 10px;
     font-size: 12.5px;
     font-weight: 600;
     border: 1px solid #e2e8f0;
     border-radius: 6px;
     background: #f8fafc;
     color: #444;
     cursor: pointer;
     transition: background .15s, border-color .15s, color .15s;
 }

 .hap-vote-item:hover,
 .hap-vote-item.selected {
     background: #1e63ff;
     border-color: #1e63ff;
     color: #fff;
 }

 #hap-like-btn {
     transition: opacity .15s, background .15s;
 }

 #hap-like-btn.liked {
     background: rgba(220, 53, 69, .35) !important;
     border-color: rgba(255, 150, 150, .5) !important;
 }

 #hap-like-btn svg {
     transition: fill .2s;
 }

 .hap-header-block {
     overflow: visible !important;
 }

 .hap-header-title {
     overflow-x: auto !important;
     flex-wrap: nowrap !important;
     scrollbar-width: none !important;
     justify-content: flex-start !important;
 }

 .hap-header-title::-webkit-scrollbar {
     display: none;
 }

 .hap-header-meta {
     overflow-x: auto !important;
     flex-wrap: nowrap !important;
     scrollbar-width: none !important;
 }

 .hap-header-meta::-webkit-scrollbar {
     display: none;
 }

 .hap-header-meta>*,
 .hap-header-title>* {
     flex-shrink: 0 !important;
 }

 .hap-infobar2 {
     overflow-x: auto !important;
     flex-wrap: nowrap !important;
 }

 .hap-infobar2>* {
     flex-shrink: 0 !important;
 }

 .p-3.border.rounded.bg-white.position-relative {
     overflow: visible !important;
 }

 .hap-header-title h1 {
     font-size: clamp(1.1rem, 3vw, 1.5rem) !important;
 }

 .hap-header-title {
     padding: 0.55rem 1rem !important;
 }

 .hap-meta-chip {
     font-size: 13px !important;
     padding: 4px 11px !important;
 }

 .hap-header-meta {
     padding: 6px 10px !important;
     gap: 6px !important;
 }

 .hap-infobar2 {
     padding: 8px 14px !important;
     font-size: 13.5px !important;
     gap: 7px !important;
 }

 .hap-ib2-chip {
     font-size: 13px !important;
     padding: 4px 10px !important;
 }
/* HAP-TAGLINK-BGINFO-OVERRIDE-V1 */
.taglink a.bg-info, .taglink a.bg-info.text-white {
    background-color: #e3f4ff !important;
    color: #006090 !important;
    border: 1px solid #b8dced !important;
    border-radius: 9999px !important;
    padding: 2px 8px !important;
    font-size: 12.5px !important;
    font-weight: normal !important;
    display: inline-block !important;
    margin: 2px 4px 2px 0 !important;
}
html.dark-mode .taglink a.bg-info,
html.dark-mode .taglink a.bg-info.text-white {
    background-color: #16324a !important;
    color: #7eb8f7 !important;
    border-color: #2d4f6b !important;
}
/* HAP-TAGLINK-SINGER-OVERRIDE-V1 */
.taglink span.border.border-info {
    background-color: #e3f4ff !important;
    color: #006090 !important;
    border: 1px solid #b8dced !important;
    border-radius: 9999px !important;
}
.taglink span.border.border-info a {
    color: #006090 !important;
}
html.dark-mode .taglink span.border.border-info {
    background-color: #16324a !important;
    border-color: #2d4f6b !important;
}
html.dark-mode .taglink span.border.border-info a {
    color: #7eb8f7 !important;
}

/* Fix Layout Mới Cập Nhật Chuẩn Như Giao Diện Cũ */
.hap-home__section .media,
.hap-home__section .song-item,
.hap-home__section-body .d-flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    width: 100% !important;
}

.hap-home__section img,
.hap-home__section .avatar,
.hap-home__section .song-thumb {
    flex-shrink: 0 !important;
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
    margin-right: 15px !important;
}

.hap-home__section .media-body,
.hap-home__section .song-info,
.hap-home__section .content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
}

/* Đưa phần Tiêu đề bài hát và Số lượt xem lên cùng 1 hàng ngang */
.hap-home__section .song-title-wrapper,
.hap-home__section .media-heading {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

.hap-home__section .song-views,
.hap-home__section .views-count {
    margin-left: auto !important;
    white-space: nowrap !important;
    color: #888 !important;
}

/* Fix riêng ảnh cho Slider Nổi bật trong tuần (listHopAmFeatured.php) */
.hap-featured-thumb-wrap {
    width: 130px !important;
    height: 98px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #f0f0f0 !important;
}

.hap-featured-thumb-wrap img.hap-featured-thumb {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
}
/* HAP: mobile nav - an link menu chinh, gop vao dropdown hamburger trong userbox (<992px) */
@media (max-width: 991.98px) {
    .navbar > .primary-menu > li.menu-item {
        display: none;
    }
}
.hap-mobile-nav .dropdown-menu { min-width: 280px; width: min(88vw, 320px); max-height: 80vh; overflow-y: auto; }
.hap-mobile-nav-menu a {
    display: block;
    padding: 8px 16px;
    color: #212529;
    text-decoration: none;
    white-space: normal;
}
.hap-mobile-nav-menu a:hover {
    background-color: #f8f9fa;
}
.hap-mobile-nav-menu li {
    list-style: none;
}
.hap-mobile-nav-menu > li > ul {
    padding-left: 16px;
}

/* HAP: 2 nut CTA doc lap phia tren card BXH */
.hap-bxh-cta {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.hap-cta-item {
    flex: 1 1 160px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform .18s ease, box-shadow .18s ease;
}
.hap-cta-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.22);
    color: #fff !important;
}
.hap-cta-song {
    background: linear-gradient(135deg, #ff7a45, #ff3d68);
}
.hap-cta-chord {
    background: linear-gradient(135deg, #4facfe, #00c6a2);
}
.hap-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    flex-shrink: 0;
}
@media (max-width: 575.98px) {
    .hap-cta-item { flex: 1 1 100%; }
}
/* HAP: sap xep lai thu tu logo/tools(search+dark-mode)/userbox/navbar */
@media (min-width: 992px) {
    .logo { order: 0; }
    .navbar { order: 1; }
    .hap-header-tools { order: 2; }
    .userbox { order: 3; }
}
@media (max-width: 991.98px) {
    .logo { order: 0 !important; }
    .hap-header-tools { order: 1 !important; }
    .userbox { order: 2 !important; }
    .navbar { order: 3 !important; }
}
/* HAP: an link Dang nhap/Dang ky rieng khi <992px (da chuyen vao trong hamburger) */
@media (max-width: 991.98px) {
    .userbox-auth-links { display: none; }
}
.hap-mobile-auth-divider hr {
    margin: 6px 12px;
    border-color: rgba(0,0,0,0.1);
}
/* HAP: ghim search+dark-mode dinh sat canh userbox (thay vi dan deu justify-content-between) khi <992px */
@media (max-width: 991.98px) {
    header .row.justify-content-between { justify-content: flex-start !important; }
    .hap-header-tools { margin-left: auto !important; margin-right: 10px; }
}
/* HAP: ep .navbar luon full-width (xuong dong rieng) tu 0 den 991.98px, tranh Bootstrap col-md tu 768px lam no gian rong choan cho */
@media (max-width: 991.98px) {
    .navbar.col-12 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
}
/* HAP: dam bao dropdown hamburger luon noi len tren cung, khong bi thanh cong cu noi (transpose toolbar) che mat */
.hap-mobile-nav.dropdown { position: relative; z-index: 100000 !important; }
.hap-mobile-nav .dropdown-menu.show { z-index: 100001 !important; }
/* HAP: khung rieng cho Dang nhap/Dang ky (dang nut pill nhu hopamviet) + icon tron mau cho cac muc menu trong hamburger */
.hap-mobile-auth-box { display: flex; flex-wrap: nowrap; gap: 10px; padding: 14px 16px; }
.hap-mobile-nav-menu a.hap-mobile-auth-link {
    flex: 1 1 0; min-width: 0; box-sizing: border-box;
    display: flex !important; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 6px !important; border-radius: 999px !important;
    font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap;
    border: 1.5px solid #16b8a6;
}
.hap-mobile-auth-login { background: #fff !important; color: #16b8a6 !important; }
.hap-mobile-auth-register { background: #16b8a6 !important; color: #fff !important; }
.hap-mobile-nav-menu > li > a { display: flex !important; align-items: center; padding: 10px 16px !important; }
.hap-mobile-nav-menu > li > a::before {
    content: ""; display: inline-block; width: 26px; height: 26px; min-width: 26px;
    border-radius: 50%; margin-right: 12px; flex-shrink: 0; background-color: #8b7ff0;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nd2hpdGUnPjxwYXRoIGQ9J00xMiAzdjEwLjU1QTQgNCAwIDEgMCAxNCAxN1Y3aDRWM2gtNnonLz48L3N2Zz4=");
    background-repeat: no-repeat; background-position: center; background-size: 13px 13px;
}
.hap-mobile-nav-menu > li:nth-child(8n+2) > a::before { background-color: #ff6b8a; }
.hap-mobile-nav-menu > li:nth-child(8n+3) > a::before { background-color: #4aa8ff; }
.hap-mobile-nav-menu > li:nth-child(8n+4) > a::before { background-color: #4caf78; }
.hap-mobile-nav-menu > li:nth-child(8n+5) > a::before { background-color: #f5a623; }
.hap-mobile-nav-menu > li:nth-child(8n+6) > a::before { background-color: #e5484d; }
.hap-mobile-nav-menu > li:nth-child(8n+7) > a::before { background-color: #c48a3f; }
.hap-mobile-nav-menu > li:nth-child(8n+0) > a::before { background-color: #2bb3a3; }
.hap-mobile-nav-menu li.hap-mobile-auth-box > a::before,
.hap-mobile-nav-menu li.hap-mobile-auth-divider::before { content: none; }