:root {
    --color-border-error: #EE0033;
    --red-origin: #EE0033;
    --red-dark: #C4132B;
    --color-text-error: #EE0033;
    --color-text-light: #09090B;
    --color-text-dark: #FAFAFA;
    --color-input-border: #E4E4E7;
    --color-cancel-text: #C4C4C4;
    --color-bg-error-muted: #FEF2F2;
    --bs-accordion-border-color: none;
    --color-bg-eror-muted:#FEF2F2;
    --font-beausans-pro: FS PF BeauSans Pro, serif;
    --secondary-light: #4D546B;
    --seek-bar-width: 33vw;
}
body[data-theme="light"] {
    --iz--profile-my-rbt--selected-more-detail: #FFF2F2;
    --iz-dim-gray: #71717a;
    --iz-white: #ffffff;
    --iz-lavender-blush: #fef2f2;
    --iz-white-black: #ffffff;
    --iz-white-gray: #ffffff;
    --iz-red-white: #EE0033;
    --iz-black-white: black;
    --iz-black-minwhite: black;
    --border-color: #f5f5f5;
    --iz-shadow-gray: #3d3d3f;
    --iz-white-blackgraygradient: #ffffff;
    --iz-error-strong-black: #EE0033;
    --iz-error-strong-white: #EE0033;
    --iz-white-error-strong: #ffffff;
    --iz-white-erie-black: #ffffff;
    --iz-shadow-white-gray: #ffffff;
    --iz-player-bar-background: #ffffff;
    --iz-player-bar-border-color: #e4e4e4;
    --iz-player-progress-text: #364469;
    --iz-player-bar-button-more-border: #ebebff0d;
    --iz-player-bar-button-more-arrow: #8e8e8e;
    --iz-player-bar-button-more-bg: #e4e4e4;
    --iz-player-bar-setting-btn-text: #ee0033;
    --iz-player-bar-setting-btn-bg: #e4e4e4;
    --iz-player-bar-text-color: #364469;
    --iz-player-bar-text-singer: #212124;
    --iz-player-bar-icon-action-color: #121212;
    --iz-modal-btn-close-color: #000000;
    --iz-modal-btn-close-bg: transparent;
    --iz-modal-btn-close-border: #eaeaea66;
    --iz-modal-border-line: #eaeaea;
    --iz-modal-normal-text: #475467;
    --iz-modal-strong-text: #475467;
    --iz-modal-btn-cancel-bg: #f4f4f5;
    --iz-modal-btn-cancel-text: #a1a1aa;
    --iz-modal-btn-cancel-border: transparent;
    --iz-modal-background: #fff;
    --iz-modal-title-color: #101828;
    --iz-modal-input-border: #ebebeb;
    --iz-modal-input-border: #4f4f4f;
    --iz-header: #e03;
    --iz-disable: #a1a1aa;
    --iz-field: #09090B;
    --iz-mc-header-title: var(--color-border-error);
    --iz-mc-play-icon: #18181b;
    --iz-mc-item-singer: #a1a1aa;
    --iz-mc-underline: #a1a1aa 14;
    --iz-mc-accord-show-bg: transparent;
    --iz-mc-accord-button-show: var(--color-bg-error-muted);
    --iz-mc-accord-detail-name-singer: #a1a1aa;
    --iz-mc-accord-detail-extra-value: #71717a;
    --iz-mc-accord-detail-delete-button: var(--color-bg-error-muted);
    --iz-mc-accord-detail-border-radius: 0;
    --iz-color-text-input: #71717a;
    --iz-border: #e4e4e499;
    --iz-button-active: var(--red-origin);
    --iz-color-text: var(--color-text-light);
    --iz-button-submit: var(--red-origin);
    --iz-color-header-tab: var(--color-text-error);
    --iz-color-label-radio: #364469;
    --iz-color-inactive-header-tab: #71717A;
    --iz-mfg-list-group-table-header: #1F1F224D;
    --iz-mfg-list-group-table-header-border-bottom: #12121208;
    --iz-mfg-list-group-button-action: transparent;
    --iz-mfg-list-group-button-action-hover: #DC26261A;
    --iz-mfg-list-group-content-item-bg: transparent;
    --iz-mfg-list-group-content-item-border: var(--color-bg-error-muted);
    --iz-color-button-add-phone-number: var(--color-bg-error-muted);
    --iz-mfg-list-group-tab-song-header-text: #18181B;
    --iz-mfg-list-group-tab-song-normal-text: #09090B;
    --iz-border-icon-prev-next: transparent;
    --iz-bg-icon-prev-next: transparent;
    --iz-favorite-singer-label-name: #364469;
    --iz-favorite-singer-image-border: #FFFFFF;
    --iz-favorite-singer-name-singer: #364469;
    --iz-search-field-background: #F4F4F5;
    --iz-home-background: #FFFFFF;
    --iz-search-cancel-button:#23263B;
    --iz-sidebar-border:#E9E9E9;
    --iz-sidebar-login-background: var(--color-bg-error-muted);
    --iz-sidebar-bottom-text:#364469;
    --iz-sidebar-bottom-dark-mode-background: #FFFFFF;
    --iz-sidebar-menu-feature-text-color: #364469;
    --iz-sidebar-menu-feature-selected: var(--color-bg-eror-muted);
    --iz-recentlu-download-header: #364469;
    --iz-recently-download-header-border-left:#F81539;
    --iz-recently-download-table-text-chosen:#EE0033;
    --iz-empty-song-no-song-text: #000000;
    --iz-empty-song-note: #9E9E9E;
    --iz-list-may-like-left-header-bottom-icon: #BEBEBE;
    --iz-list-may-like-play-all-button: #4F4F4F;
    --iz-list-may-like-left-header-text: #7C8DB5B8;
    --iz-list-may-like-left-header-title: #2E3271;
    --iz-list-may-like-left-header-singer:#00000082;
    --iz-list-song-select-bar-text: #A1A1AA;
    --iz-list-song-play-icon: #18181B;
    --iz-list-song-th-icon:#B3B3B3;
    --iz-list-may-like-song-modal-text-color:#475467;
    --iz-list-may-like-song-modal-border:#EAEAEA;
    --iz-result-of-search: #303239;
    --iz-header-header-register-border-button: #EE0033;
    --iz-header-header-register-button-text: #EE0033;
    --iz-modal-text: #111111;
    --iz-music-collection-accordion-header-bg: #FEF2F2;
    --iz-music-collection-infor-button-click: inherit;
    --iz-profile-background: #FFFFFF;
    --iz-tooltip-content-song-header:#333333;
    --iz-tooltip-content-song-author: #4F4F4F;
    --iz-bg-icon-download: url(../images/favorite/action-download.svg) no-repeat center;
    --iz-bg-icon-like: url(../images/favorite/action-like.svg) no-repeat center;
    --iz-bg-icon-gift: url(../images/favorite/action-gift.svg) no-repeat center;
    --iz-bg-icon-share: url(../images/favorite/action-share.svg) no-repeat center;
    --iz-header-link-hover:#1C45AF;
    --iz-supplier-name: #123A6C;
    --iz-gray-lightgray: #f3f3f3;
    --iz-666-white: #111111;
    --iz-dialog-close-icon: url(../images/close-icon-black.svg);
    --iz-white-2A2A2A: white;
    --iz-login-cancel: #e4e4e4;
    --f4f4f5-black: #f4f4f5;
    --white-1A1A1A: white;
    --333333-white: #333333;
    --23263b-white: #23263b;
    --f0f0f0-222226: #f0f0f0;
    --search-hashtag-text-color: #4F5162;
    --search-hashtag-border: #D3D4D8;
    --search-tab-list-text-color: #5F6D7E;
    --search-tab-list-text-color-active: #000000;
    --search-search-button: url(/images/search-button.svg);
    --iz-new-modal-text: #475467;
    --iz-new-modal-button-cancel-bg: #F4F4F5;
    --iz-new-modal-button-cancel-text: #A1A1AA;
    --iz-new-modal-button-cancel-border: none;
    --iz-order-hot-key-search-text-color: #6b6b6b;
    --input-text-placeholder: #A1A1AA80;
    --iz-custom-scroll: rgba(0, 0, 0, 0);
    --iz-custom-scroll-hover: rgba(0, 0, 0, 0.2);
    --iz-music-group-group-name-text: #0A1B39;
    --iz-music-group-tab-phone-box-header: #00000073;
    --iz-music-group-tab-phone-box-text: #434343;
    --iz-music-group-back-link-text-color: #C8C8C8;
    --iz-music-gropu-add-more-phone-number-cancel-button: #979797;
    --iz-music-group-song-box-song-text-color: #121212;
    --iz-music-group-song-box-singer-text-color: #ABABAB;
    --iz-song-detail-song-text-color: #7C7C7C;
    --iz-song-detail-singer-text-color: #828282;
    --iz-song-detail-song-detail-tabs: #FFFFFFB0;
    --iz-song-detai-tab-active: #09090B;
    --iz-song-detail-song-detail-tabs-box-shadow: 0px -19px 47px 0px #0000000F;
    --iz-song-detail-song-detail-tabs-border: linear-gradient(
        99.92deg, 
        rgba(255, 255, 255, 0.5) 3.3%, 
        rgba(255, 255, 255, 0.65389) 35.16%, 
        rgba(255, 255, 255, 0.363925) 61.86%, 
        rgba(255, 255, 255, 0.5) 95.36%);
    --iz-song-detail-song-tabs-border-bottom: #EBEAED;
    --iz-song-detail-song-detail-other-cut-supplier:#A0A0A0;
    --iz-song-detail-song-detail-other-cut-duration: #1212127A;
    --iz-song-detail-bottom-text: #474747;
    --iz-song-detail-lyric-cover-top-angle: 180deg;
    --iz-song-detail-lyric-cover-top: #FFFFFFB0 80%, rgba(0, 0, 0, 0) 100%;
    --iz-song-detail-lyric-cover-bottom-angle: 180deg;
    --iz-song-detail-lyric-cover-bottom: rgba(0, 0, 0, 0) 0%, #FFFFFFB0 20%;
    --iz-song-detail-lyric-text: #000000;
    --iz-icon-calendar: url("/images/account/calendar.svg");
    --iz-noti-background: #FFFFFF;
    --iz-noti-border: #eaeaea;
    --iz-noti-header-border-bottom: #EAEAEA;
    --iz-noti-notify-time: #A0A0A0;
    --iz-noti-notify-item-hover: #F7F7F7;
    --iz-package-info-package-name: #18181B;
    --iz-package-info-package-description: #3D3D3D;
    --my-rbt-more-info-border-bottom: #E4E4E4B2;
    --package-price: #3D3D3D;
    --contrast-text: #000
}
body[data-theme="dark"] {
    --iz--profile-my-rbt--selected-more-detail: #FFF2F217;
    --iz-dim-gray: #fff;
    --iz-white: #444940;
    --iz-lavender-blush: #3d3d3f;
    --iz-white-black: #222226;
    --iz-gray-lightgray: rgba(255, 255, 255, 0.22);
    --iz-white-gray: #8C8C8C;
    --iz-red-white: #ffffff;
    --iz-black-white: #ffffff;
    --iz-black-minwhite: #a8a6a6;
    --border-color: #484848;
    --iz-white-blackgraygradient: linear-gradient(180deg, #2a2a2a 0%, rgba(130, 130, 130, 0) 100%);
    --iz-error-strong-black: #000;
    --iz-error-strong-white: #fff;
    --iz-white-error-strong: #EE0033;
    --iz-white-erie-black: #1f1f1f;
    --iz-shadow-white-gray: #3e3e42;
    --iz-player-bar-background: #1a1a1a;
    --iz-player-bar-border-color: #313843;
    --iz-player-progress-text: #a6a6a6;
    --iz-player-bar-button-more: #ebebff0d;
    --iz-player-bar-button-more-border: #ebebff0d;
    --iz-player-bar-button-more-arrow: #fcfcfc;
    --iz-player-bar-button-more-bg: #1f1f22;
    --iz-player-bar-setting-btn-text: #fcfcfc;
    --iz-player-bar-setting-btn-bg: #4c4e54;
    --iz-player-bar-text-color: #fcfcfc;
    --iz-player-bar-text-singer: #fcfcfca6;
    --iz-player-bar-icon-action-color: #fcfcfc;
    --iz-modal-btn-close-color: #fafafa;
    --iz-modal-btn-close-bg: #2a2a2a;
    --iz-modal-btn-close-border: #9999991a;
    --iz-modal-border-line: #222222;
    --iz-modal-normal-text: #999999;
    --iz-modal-strong-text: #ffffff;
    --iz-modal-btn-cancel-bg: transparent;
    --iz-modal-btn-cancel-text: #7d8292;
    --iz-modal-btn-cancel-border: #71717a;
    --iz-modal-background: #1b1b1b;
    --iz-modal-title-color: #ffffff;
    --iz-modal-input-border: #ffffff;
    --iz-modal-input-placeholder: #acacac;
    --iz-header: #FFFFFF;
    --iz-field: #FAFAFA;
    --iz-disable: #FFFFFF;
    --iz-mc-header-title: #FAFAFA;
    --iz-mc-play-icon: #FFFFFF;
    --iz-mc-item-singer: #FFFFFF4D;
    --iz-mc-underline: #FFFFFF08;
    --iz-mc-accord-show-bg: #26252380;
    --iz-mc-accord-button-show: transparent;
    --iz-mc-accord-detail-name-singer: #C9C9C9;
    --iz-mc-accord-detail-extra-value: #FFFFFF;
    --iz-mc-accord-detail-delete-button: #1F1F1F;
    --iz-mc-accord-detail-border-radius: 6px;
    --iz-color-text-input: #FFFFFF;
    --iz-border: #FFFFFF26;
    --iz-button-active: var(--red-dark);
    --iz-color-text: var(--color-text-dark);
    --iz-button-submit: var(--color-text-error);
    --iz-color-header-tab: #FFFFFF;
    --iz-color-label-radio: #FFFFFF;
    --iz-color-inactive-header-tab: #848484;
    --iz-mfg-list-group-table-header: #FFFFFF4D;
    --iz-mfg-list-group-table-header-border-bottom: #FFFFFF08;
    --iz-mfg-list-group-button-action: #1F1F1F;
    --iz-mfg-list-group-button-action-hover: var(--color-text-error);
    --iz-mfg-list-group-content-item-bg: #26252366;
    --iz-mfg-list-group-content-item-border: #26252366;
    --iz-color-button-add-phone-number: #1F1F1F;
    --iz-mfg-list-group-tab-song-header-text: #FFFFFF;
    --iz-mfg-list-group-tab-song-normal-text: #C4C4C4;
    --iz-favorite-singer-label-name: #FAFAFA;
    --iz-favorite-singer-image-border: #272727;
    --iz-favorite-singer-name-singer: #e4e4e4;
    --iz-border-icon-prev-next: #252529;
    --iz-bg-icon-prev-next: #1F1F22;
    --iz-search-field-background: #1A1A1A;
    --iz-home-background: #2A2A2E;
    --iz-search-cancel-button:#FFFFFF;
    --iz-sidebar-border:#313843;
    --iz-sidebar-login-background: #14161B;
    --iz-sidebar-bottom-text: #FFFFFF;
    --iz-sidebar-bottom-dark-mode-background:#313743;
    --iz-sidebar-menu-feature-text-color: #FFFFFF;
    --iz-sidebar-menu-feature-selected: var(--color-text-error);
    --iz-recently-download-header: #FAFAFA;
    --iz-recently-download-header-border-left: transparent;
    --iz-recently-download-table-text-chosen:#F3777D;
    --iz-list-may-like-left-header-bottom-icon: #F4F4F5;
    --iz-list-may-like-play-all-button: #FFFFFF;
    --iz-list-may-like-left-header-text: #A1A1AA;
    --iz-list-may-like-left-header-title: #FFFFFF;
    --iz-list-may-like-left-header-singer:#FFFFFF;
    --iz-list-song-select-bar-text: #FFFFFF;
    --iz-list-song-play-icon: #FFFFFF;
    --iz-list-song-th-icon:#FFFFFF;
    --iz-list-may-like-song-modal-text-color:#999999;
    --iz-list-may-like-song-modal-border:#99999933;
    --iz-empty-song-no-song-text: #FFFFFF;
    --iz-empty-song-note: #C4C4C4;
    --iz-result-of-search: #FFFFFF;
    --iz-header-header-register-border-button: #A1A1AA;
    --iz-header-header-register-button-text: #A1A1AA;
    --iz-modal-text: #FFF;
    --iz-music-collection-accordion-header-bg: inherit;
    --iz-music-collection-infor-button-click: #EE0033;
    --iz-profile-background: #FFFFFF1A;
    --iz-tooltip-content-song-header:#FFFFFF;
    --iz-tooltip-content-song-author: #A1A1AA;
    --iz-bg-icon-download: url(../images/favorite/action-download-dark.svg) no-repeat center;
    --iz-bg-icon-like: url(../images/favorite/action-like-dark.svg) no-repeat center;
    --iz-bg-icon-gift: url(../images/favorite/action-gift-dark.svg) no-repeat center;
    --iz-bg-icon-share: url(../images/favorite/action-share-dark.svg) no-repeat center;
    --iz-header-link-hover:#EE0033;
    --iz-supplier-name: #A1A1AA;
    --iz-666-white: white;
    --iz-dialog-close-icon: url(../images/close-icon-white.svg);
    --iz-white-2A2A2A: #2A2A2A;
    --iz-login-cancel: transparent;
    --f4f4f5-black: #222222;
    --white-1A1A1A: #1A1A1A;
    --23263b-white: white;
    --f0f0f0-222226: #222226;
    --search-hashtag-text-color: #FFFFFF;
    --search-hashtag-border: #71717A;
    --search-tab-list-text-color: #A1A1AA;
    --search-tab-list-text-color-active: #FFFFFF;
    --iz-new-modal-text: #A1A1AA;
    --iz-new-modal-button-cancel-bg: #1B1B1B;
    --iz-new-modal-button-cancel-text: #7D8292;
    --iz-new-modal-button-cancel-border: 1px solid #71717A;
    --iz-order-hot-key-search-text-color: #FFFFFF;
    --input-text-placeholder: #FFFFFF66;
    --iz-custom-scroll: rgb(255, 255, 255, 0.8);
    --iz-custom-scroll-hover: rgba(255, 255, 255, 1);
    --iz-music-group-group-name-text: #FFFFFF;
    --iz-music-group-tab-phone-box-header: #FFFFFF;
    --iz-music-group-tab-phone-box-text: #FFFFFF;
    --iz-music-group-back-link-text-color: #FFFFFF;
    --iz-music-gropu-add-more-phone-number-cancel-button: #FFFFFF;
    --iz-music-group-song-box-song-text-color: #FFFFFF;
    --iz-music-group-song-box-singer-text-color: #FFFFFF;
    --333333-white: #FFFFFF;
    --iz-song-detail-song-text-color: #FFFFFF;
    --iz-song-detail-singer-text-color: #A1A1AA;
    --iz-song-detail-song-detail-tabs: #FFFFFF1A;
    --iz-song-detai-tab-active: #FFFFFF;
    --iz-song-detail-song-detail-tabs-box-shadow: none;
    --iz-song-detail-song-detail-tabs-border: #FFFFFF1A;
    --iz-song-detail-song-tabs-border-bottom: #71717A;
    --iz-song-detail-song-detail-other-cut-supplier:#FFFFFF;
    --iz-song-detail-song-detail-other-cut-duration: #A1A1AA;
    --iz-song-detail-bottom-text: #FFFFFF;
    --iz-song-detail-lyric-cover-top-angle: 180deg;
    --iz-song-detail-lyric-cover-top: #3B3B3E 0%, rgba(217, 91, 62, 0) 120%;
    --iz-song-detail-lyric-cover-bottom-angle: 180deg;
    --iz-song-detail-lyric-cover-bottom: rgba(59, 59, 62, 0) -20%, #3B3B3E 100%;
    --iz-song-detail-lyric-text: #FAFAFA;
    --iz-icon-calendar: url("/images/account/calendar-dark.svg");
    --iz-noti-background: #222226;
    --iz-noti-border: #333333;
    --iz-noti-header-border-bottom: #FFFFFF08;
    --iz-noti-notify-time: #71717A;
    --iz-noti-notify-item-hover: #2A2A2E;
    --iz-package-info-package-name: #FAFAFA;
    --iz-package-info-package-description: #A1A1AA;
    --iz-package-info-package-price: #FAFAFA;
    --my-rbt-more-info-border-bottom: #3D3D3F;
    --package-price: #FFF;
    --contrast-text: #FFF;
}

a {
    text-decoration: none;
    color: black;
}

html, body {
    background: var(--iz-white-black);
    font-family: "FS PF BeauSans Pro", serif;
}

body {
    overflow-x: hidden;
}
/** CSS SideBaer Profile*/
aside.menu-account .nav-pills .nav-item .nav-link {
    border-radius: 0;
    color: var(--iz-dim-gray);
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    padding: 15px 20px;
}
aside.menu-account .nav-pills .nav-item .active {
    background: unset;
    border-left: 4px solid #EE0033;
}
aside.menu-account .nav-pills .nav-item.active {
    background: unset;
    border-left: 4px solid #EE0033;
}
aside.menu-account .nav-pills .nav-item a, aside.menu-account .nav-pills .nav-item a:hover {
    background: unset;
}
.switch {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.button-switch {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var( --secondary-light);
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.button-switch:before {
    position: absolute;
    content: "";
    height: 8px;
    width: 8px;
    background-color: #FFFFFFCC;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    margin: 4px;
}
input:checked + .button-switch {
    background-color: #EE0033;
}
input:checked + .button-switch::before {
    background-color: #FFFFFF;
}
input:focus + .button-switch {
    box-shadow: 0 0 1px var(--iz-lavender-blush);
}
input:checked + .button-switch:before {
    -webkit-transform: translateX(12px);
    -ms-transform: translateX(12px);
    transform: translateX(12px);
}
.button-switch.round {
    border-radius: 34px;
}
.button-switch.round:before {
    border-radius: 50%;
}
/*End CSS SideBar Profile*/
/* CSS Modal Player*/
.modal-player {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 2;
    background: var(--iz-player-bar-background);
    border: 1px solid var(--iz-player-bar-border-color);
}
.modal-player-container {
    /* width: calc(100% - 276px); */
    width: 100%;
    padding: 14px 24px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2vw;
    background-color: #FFFFFF66;
    /* overflow: auto hidden; */
}
.modal-player-comp1 {
    width: 28%;
    display: flex;
    gap: 2vw;
}
.modal-player-comp1-left {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    gap: 16px;
}
.modal-player-comp1-left img {
    width: 65px;
    height: 65px;
    object-fit: contain;
}
.modal-player-comp1_content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 172px;
    word-break: break-word;
}
.modal-player-comp1_content span:nth-child(1) {
    font-family: var(--font-beausans-pro);
    color: var(--iz-player-bar-text-color);
    font-size: 16px;
    font-weight: 600;
    line-height: 21px;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modal-player-comp1_content span:nth-child(2) {
    font-family: var(--font-beausans-pro);
    color: var(--iz-player-bar-text-singer) !important;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.modal-player-comp1-right {
    max-width: 240px;
    font-family: var(--font-beausans-pro);
    color: var(--iz-player-bar-text-color);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
}
.modal-player-comp1-right span:nth-child(1) {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.modal-player-comp1-right span:nth-child(2) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tooltip-inner{
    background-color: #FFFFFF;
    color: #364469;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    font-family: FS PF BeauSans Pro, sans-serif;
    text-align: left;
    border: 1px solid #F2F2F2;
    margin-bottom: 16px;
}

.tooltip-arrow,
.tooltip-arrow::before {
    display: none; /* Add this line to hide the arrow */
}

.modal-player-comp2-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: unset !important;
}
.modal-player-comp2 {
    width: calc(var(--seek-bar-width) + 100px);
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: unset !important;
}
.modal-player_action {
    display: grid;
    grid-auto-flow: column;
    gap: 32px;
    margin-bottom: 12px;
}
.modal-player-comp2 .modal-player_progress .buffer .modal-player_progress-bar {
    min-width: 1%;
    max-width: 100%;
    height: 100%;
    background: #EE0033;
    border-radius: 4px;
    position: relative;
}
.modal-player-comp2 .modal-player_progress .buffer.jp-seek-bar .modal-player_progress-bar .jp-thumb {
    content: '';
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 99px;
    position: absolute;
    right: -8px;
    top: -5px;
    background: #d5d5d5;
}
.modal-player-comp2 .modal-player_progress .buffer.jp-seek-bar:hover .modal-player_progress-bar .jp-thumb,
.modal-player-comp2 .modal-player_progress .buffer.jp-seek-bar:focus .modal-player_progress-bar .jp-thumb {
    display: block;
}
.modal-player-comp2 .modal-player_progress .buffer {
    background-color: unset;
    height: 100%;
}
.modal-player_progress {
    margin-top: 7px;
    padding: 0;
    width: var(--seek-bar-width);
    height: 6px;
    overflow: visible;
    background: #e4e4e4;
    border-radius: 6px;
    cursor: pointer;
}
.modal-player_progress-current-time {
    position: absolute;
    top: 35px;
    left: 0;
    font-family: FS PF BeauSans Pro, serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--iz-player-progress-text);
}
.modal-player_progress-duration-time {
    position: absolute;
    top: 35px;
    right: 0;
    font-family: FS PF BeauSans Pro, serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--iz-player-progress-text);
}
.modal-player-comp3 {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: end;
    gap: 48px;
}
.modal-player-comp3-left {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    gap: 24px;
}
.modal-player-comp3-left_icon-button {
    cursor: pointer;
    padding: 8px;
    border: 1px solid var(--iz-player-bar-button-more-border);
    background-color: var(--iz-player-bar-button-more-bg);
    border-radius: 6px;
}
.modal-player-comp3-left_icon-button:hover {
    opacity: 0.6;
}
.modal-player-comp3-right {
    border: none;
    display: flex;
    justify-content: center;
    color: var(--iz-player-bar-setting-btn-text);
    font-family: var(--font-beausans-pro);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    padding: 12px;
    border-radius: 6px;
    background-color: var(--iz-player-bar-setting-btn-bg);
    min-width: 143px;
}
.modal-player-comp3-right :hover {
    opacity: 0.6;
}
.modal-player-comp3-left_icon-volume {
    cursor: pointer;
    height: 24px;
    width: 24px;
    background-color: var(--iz-player-bar-icon-action-color);
    -webkit-mask: url(../images/modal-player/player-volume.svg) no-repeat center;
    mask: url(../images/modal-player/player-volume.svg) no-repeat center;
}
.modal-player-comp3-left_icon-volume-off {
    cursor: pointer;
    height: 24px;
    width: 24px;
    background-color: var(--iz-player-bar-icon-action-color);
    -webkit-mask: url(../images/modal-player/player-volume-off.svg) no-repeat center;
    mask: url(../images/modal-player/player-volume-off.svg) no-repeat center;
}
.modal-player-comp3-left_icon-share {
    cursor: pointer;
    height: 24px;
    width: 24px;
    background-color: #000;
    -webkit-mask: url(../images/modal-player/player-share.svg) no-repeat center;
    mask: url(../images/modal-player/player-share.svg) no-repeat center;
}
.modal-player-comp3-left_icon-like {
    cursor: pointer;
    height: 24px;
    width: 24px;
    background-color: #000;
    -webkit-mask: url(../images/modal-player/player-like.svg) no-repeat center;
    mask: url(../images/modal-player/player-like.svg) no-repeat center;
}
.modal-player-comp3-left_icon-arrow {
    height: 24px;
    width: 24px;
    background-color: var(--iz-player-bar-button-more-arrow);
    -webkit-mask: url(../images/modal-player/player-arrow.svg) no-repeat center;
    mask: url(../images/modal-player/player-arrow.svg) no-repeat center;
}
.banner-profile {
    max-width: 1652px;
    margin: 0 auto;
}
.modal-player_action-prev {
    height: 24px;
    width: 24px;
    background-color: var(--iz-dim-gray);
    -webkit-mask: url(../images/modal-player/action-prev.svg) no-repeat center;
    mask: url(../images/modal-player/action-prev.svg) no-repeat center;
    cursor: pointer;
}
.modal-player_action-pause {
    height: 24px;
    width: 24px;
    background-color: var(--iz-dim-gray);
    -webkit-mask: url(../images/modal-player/action-play.svg) no-repeat center;
    mask: url(../images/modal-player/action-play.svg) no-repeat center;
    cursor: pointer;
}
.modal-player_action-next {
    height: 24px;
    width: 24px;
    background-color: var(--iz-dim-gray);
    -webkit-mask: url(../images/modal-player/action-next.svg) no-repeat center;
    mask: url(../images/modal-player/action-next.svg) no-repeat center;
    cursor: pointer;
}
.modal-player_action-play {
    height: 24px;
    width: 24px;
    background-color: var(--iz-dim-gray);
    -webkit-mask: url(../images/modal-player/action-pause.svg) no-repeat center;
    mask: url(../images/modal-player/action-pause.svg) no-repeat center;
}
.modal-player-compt-left_container-volume {
    position: relative;
}
.player-icon-volume {
    position: relative;
    z-index: 100;
}
.modal-player-comp3-left_barcontainer {
    background-color: #a1a1aa;
    position: absolute;
    transform: translateY(-50%);
    right: 10px;
    margin-left: 50px;
    height: 100px;
    float: left;
    border-radius: 4px;
    border: 1px solid #a1a1aa;
    z-index: 2;
    width: 5px;
    bottom: -20px;
    cursor: pointer;
    display: none;
}
.modal-player-compt-left_container-volume:hover, .modal-player-compt-left_container-volume:hover .modal-player-comp3-left_barcontainer {
    display: block !important;
}
.space-hover {
    position: absolute;
    left: -15px;
    width: 30px;
    height: 140px;
}
.iz-jp-volume-bar-value {
    height: 80%;
}
.modal-player-comp1-left img {
    border-radius: 12px;
}
.modal-player-comp3-left_bar {
    background-color: #fff;
    position: absolute;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    animation: grow 1.5s ease-out forwards;
    transform-origin: bottom;
    border-radius: 4px;
}
/*End CSS Modal Player*/
/*Start CSS Modal gift music */
::backdrop {
    background: #111;
    opacity: 0.75;
}
dialog {
    width: 480px;
    border: none;
    border-radius: 12px;
    background: var(--iz-modal-background);
}
.dialog-header {
    padding: 24px 24px 20px 24px;
}
.dialog-title {
    color: var(--iz-modal-title-color);
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
}
.dialog-btn-close {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    background: var(--iz-modal-btn-close-bg);
    border-radius: 100px;
    border: 1px solid var(--iz-modal-btn-close-border);
}
.dialog-btn-close :hover {
    opacity: 0.6;
}
.dialog-btn-close .close-icon {
    width: 20px;
    height: 20px;
    background: var(--iz-modal-btn-close-color);
    -webkit-mask: url(../images/modal-player/modal-close.svg) no-repeat center;
    mask: url(../images/modal-player/modal-close.svg) no-repeat center;
}
.borderline {
    background: var(--iz-modal-border-line);
    width: 100%;
    height: 1px;
}
.modal-gift-input-number-phone {
    background: transparent;
    font-size: 14px;
    border: 1px solid var(--iz-modal-input-border);
}
.modal-share-input-number-phone {
    background: transparent;
    font-size: 14px;
    border: 1px solid var(--iz-modal-input-border);
}
.dialog-body-content {
    padding: 12px 24px;
}
.dialog-body-content span {
    font-size: 14px;
    font-weight: 400;
}
.dialog-body-content .strong-text {
    font-weight: 600;
    color: var(--iz-modal-strong-text);
}
.dialog-body-content .share-text {
    text-decoration: none;
    font-family: Roboto, serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--iz-modal-strong-text);
}
.dialog-body-content .normal-text {
    font-size: 14px;
    font-weight: 400;
    color: var(--iz-modal-normal-text);
}
.dialog-body-content .input-wrapper {
    width: 100%;
    position: relative;
    display: inline-block;
}
.dialog-body-content .input-wrapper input {
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 24%;
}
.dialog-body-content .button-copy-link {
    padding: 0 19px;
    border-radius: 6px;
    height: calc(100% - 10px);
    margin: 5px 4px;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    /*background-color: transparent;*/
    cursor: pointer;
    border-color: var(--red-origin);
    background-color: var(--red-origin);
    font-size: 14px;
    font-weight: 400;
    color: #fff;
}
.dialog-body-content .button-copy-link:hover {
    opacity: 0.6;
}
.dialog-group-button {
    padding: 24px;
    display: flex;
    /*gap: 12px;*/
    width: 100%;
}
.dialog-group-button .dialog-btn {
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
}
.dialog-group-button .dialog-btn:hover {
    opacity: 0.6;
}
.dialog-group-button .dialog-btn :hover {
    opacity: 0.6;
}
.dialog-group-button .modal-btn-cancel {
    background: var(--iz-modal-btn-cancel-bg);
    border-color: var(--iz-modal-btn-cancel-border);
    color: var(--iz-modal-btn-cancel-text);
}

#login-form .dialog-group-button .modal-btn-cancel {
    background: var(--iz-login-cancel) !important;
}

.dialog-group-button .modal-btn-submit {
    border-color: var(--red-origin);
    background: var(--red-origin);
    color: #fff;
}
/*End Css Modal Gift Music*/
/*Start Css Modal Info Package*/
.modal-packages {
    border-radius: 12px;
    border: 1px solid var(--iz-modal-border-line);
    background-color: var(--iz-modal-background);
}
.modal-packages_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--iz-modal-border-line);
    padding: 24px 20px 24px 24px;
}
.modal-packages_title span {
    font-family: Inter, serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: var(--iz-modal-title-color);
}
.modal-packages_icon-remove-modal {
    height: 24px;
    width: 24px;
    color: var(--iz-modal-btn-close-color);
    background-color: var(--iz-modal-btn-close-color);
    -webkit-mask: url(../images/remove-modal.svg) no-repeat center;
    mask: url(../images/remove-modal.svg) no-repeat center;
}
.modal-packages_content {
    padding: 12px 24px 24px 24px;
    border-radius: 12px;
    border: 1px;
}
.modal-packages_content span {
    font-family: Inter, serif;
    display: flex;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--iz-modal-strong-text);
    margin-bottom: 40px;
}
.modal-packages_content-action-button {
    display: flex;
    gap: 12px;
}
.modal-packages_content-action-button-remove {
    background-color: var(--iz-modal-btn-cancel-bg);
    color: #a1a1aa;
    width: 50%;
    height: 44px;
    padding: 10px 19px 10px 19px;
    border-radius: 10px;
    border: 1px solid var(--iz-modal-btn-cancel-border);
    font-size: 16px;
    font-weight: 400;
}
.modal-packages_content-action-button-accept {
    background-color: #e03;
    color: #fff;
    /*min-width: 210px;
    */
    width: 50%;
    height: 44px;
    padding: 10px 19px 10px 19px;
    border-radius: 10px;
    border: 1px solid var(--iz-modal-btn-cancel-border);
    font-size: 16px;
    font-weight: 400;
}
.modal-packages_content-action-button-accept:hover {
    background-color: #e03;
    color: #fff;
    opacity: 0.6;
}
.modal-packages_content-action-button-remove {
    background-color: var(--iz-modal-btn-cancel-bg);
    color: #a1a1aa;
    opacity: 0.6;
}
.modal-packages_remove-modal {
    border: 1px solid var(--iz-modal-btn-close-border);
    border-radius: 50%;
    background-color: var(--iz-modal-btn-close-bg);
}
/*End Css Modal Info Package*/
/*Start Css Personal Information*/
.rounded-circle {
    border-radius: 50%;
}
.infor-form {
    background-color: var(--iz-white);
}
.general-information {
    padding: 6px 16px;
    margin-right: 15px;
    margin-top: 5px;
    font-size: 16px;
    border-radius: 14px;
}
.btn-password {
    background-color: #e7e5e5;
    border-radius: 10px;
    padding: 5px 10px;
    color: #C4C4C4;
    border: none;
    margin-right: 15px;
    font-size: 14px;
    font-weight: 700;
}
input {
    width: 100%;
    padding-inline: 10px;
    padding: 0 10px;
    border: 1px solid #e4e4e7;
    border-radius: 5px;
    height: 40px;
    background-color: var(--iz-profile-background);
    color: var(--iz-dim-gray);
}

textarea {
    background-color: var(--iz-profile-background);
    color: var(--iz-dim-gray);
}

p {
    margin-bottom: 0;
}
input[type="radio"] {
    /*transform: scale(1.5);*/
    height: 16px!important;
    width: 16px;
    min-width: 16px!important;
    margin-right: 10px;
    accent-color: #e03;
}
/*input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-calendar-picker-indicator {*/
/*    display: none;*/
/*    -webkit-appearance: none;*/
/*}*/

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.password {
    display: none;
}
.input-space {
    margin-bottom: 5px;
    max-width: 100%;
    font-size: 14px !important;
    margin-top: 0.5rem;
}
.background-form {
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 #8F8C8C14;
    padding: 20px;
    background-color: var(--iz-profile-background);
}
.active-tab {
    background-color: #EE0033;
    border: none;
    color: #FFFFFF;
    font-weight: 500;
}
.inactive-tab {
    background-color: var(--iz-profile-background);
    color: var(--iz-disable);
    border: 1px solid #e4e4e7;
}
.rounded-button {
    border-radius: 10px;
}
.header-color {
    font-size: 32px;
    font-weight: 700;
    color: var(--iz-header);
    margin-bottom: 10px;
}
.field-color {
    color: var(--iz-field);
}

.field-text {
    color: var(--iz-field);
    font-size: 14px;
    font-weight: 600;
}

.radio-input-space {
    margin-left: 4px;
    column-gap: 43px;
}
.label-space {
    /*margin-top: 5px;*/
}
.function-button {
    background-color: #EE0033;
    border-radius: 6px;
    color: #FAFAFA;
    border: none;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
}
/*End Css Personal Information*/
/*Start Css Banner Profile*/
.banner-profile .banner-text {
    font-size: 16px;
    color: #fff;
    line-height: 21px;
    padding: 10px 12px;
}
.banner-profile .banner-bg {
    background-position: center;
    background-size: cover;
    padding-top: 48px;
    padding-bottom: 48px;
}
.banner-profile .banner-phone {
    color: #fff;
    font-size: 96px;
    line-height: 1.52em;
}
/*End Css Banner Profile*/
/*Start Css My Playlist*/
.item-song-container {
    box-shadow: 0 4px 20px 0 #8f8c8c14;
    padding: 24px;
    border-radius: 8px;
    border-top: 1px solid #ffffff1a;
    width: 100%;
    background-color: var(--iz-shadow-white-gray);
}

.my-rbt-main .empty-song > * {
    padding-bottom: 12px;
}

.empty-song {
    /*gap: 12px;*/
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.empty-song .icon-empty-song {
    width: 252px;
}
.empty-song .no-song {
    font-family: var(--font-beausans-pro);
    font-size: 28px;
    font-weight: 700;
    line-height: 43px;
    text-align: center;
    color: var(--iz-empty-song-no-song-text);
}
.empty-song .note {
    width: 60%;
    font-family: FS PF BeauSans Pro, serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    text-align: center;
    color: var(--iz-empty-song-note);
}

.empty-song .note-search{
    width: 280px;
}

.empty-song .back-home {
    text-decoration: none;
    cursor: pointer;
    width: 200px;
    background: var(--red-origin);
    padding: 16px 0;
    border-radius: 40px;
    font-family: var(--font-beausans-pro);
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    text-align: center;
    color: #fff;
}
.empty-song .back-home:hover {
    opacity: 0.6;
}
.table-song-list-header {
    height: 50px;
    border-bottom: 1px solid var(--border-color);
}
.favorite-header-title {
    color: var(--iz-red-white);
    font-family: var(--font-beausans-pro);
    font-size: 32px;
    font-weight: 700;
    line-height: 45px;
    text-align: left;
}
.favorite-header-content {
    justify-content: space-between;
    align-items: center;
    display: flex;
}
.favorite-header-content-left {
    display: flex;
    gap: 25px;
}
.favorite-header-content-left img {
    cursor: pointer;
}
.item-song-header-content-right {
    display: flex;
    gap: 20px;
}

.view-more-text {
    font-family: var(--font-beausans-pro);
    font-size: 16px;
    font-weight: 400;
    color: var(--iz-red-white);
}

.view-more-icon {
    height: 18px;
    width: 18px;
    background-color: var(--iz-red-white);
    -webkit-mask: url(../images/account/dropdown-icon.svg) no-repeat center;
    mask: url(../images/account/dropdown-icon.svg) no-repeat center;
}

tr.media {
    height: 80px;
    border-bottom: 1px solid var(--border-color);
}
.item-song-icon-play-small {
    cursor: pointer;
    height: 30px;
    width: 30px;
    background-color: var(--iz-black-white);
    -webkit-mask: url(../images/favorite/play-small.svg) no-repeat center;
    mask: url(../images/favorite/play-small.svg) no-repeat center;
}
.item-song-icon-pause-small {
    background-image: url(../images/favorite/pause-small.svg);
    cursor: pointer;
    height: 30px;
    width: 30px;
    background-position: center;
    background-repeat: no-repeat;
}
.item-song-content-play {
    width: 5%;
}
.item-song-content-title {
    display: flex;
}
.item-song-content-title div {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
}
.table-song-list-header th {
    font-family: var(--font-beausans-pro);
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    text-align: left;
    color: #a1a1aa;
}
.table-song-list-header th:last-child {
    text-align: center;
}
.item-song-content-title div span:nth-child(1) {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 17vw;
    overflow: hidden;
    font-family: var(--font-beausans-pro);
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    text-align: left;
    color: var(--iz-black-white);
}
.item-song-content-title div span:nth-child(2) {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 17vw;
    overflow: hidden;
    font-family: FS PF BeauSans Pro, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    text-align: left;
    color: #a1a1aa;
}
.item-song-content-title img {
    border-radius: 8px;
}
.item-song-content-text span {
    font-family: var(--font-beausans-pro);
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    text-align: left;
    color: #a1a1aa;
}
.item-song-content-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.table-song-list {
    width: 100%;
}
.item-song-icon-download {
    cursor: pointer;
    height: 24px;
    width: 24px;
    color: var(--iz-red-white);
    background: var(--iz-bg-icon-download), var(--iz-red-white);;
}
.item-song-icon-like {
    cursor: pointer;
    height: 24px;
    width: 24px;
    color: var(--iz-red-white);
    background: var(--iz-bg-icon-like), var(--iz-red-white);
}
.item-song-icon-liked {
    cursor: pointer;
    height: 24px;
    width: 24px;
    background: url("../images/favorite/icon-liked.svg") no-repeat center;
}
.item-song-icon-gift {
    cursor: pointer;
    height: 24px;
    width: 24px;
    color: var(--iz-red-white);
    background: var(--iz-bg-icon-gift), var(--iz-red-white);
}
.item-song-icon-share {
    cursor: pointer;
    height: 24px;
    width: 24px;
    color: var(--iz-red-white);
    background: var(--iz-bg-icon-share),  var(--iz-red-white);;
}
.item-song-icon-download-background, .item-song-icon-like-background, .item-song-icon-gift-background, .item-song-icon-share-background {
    padding: 6px;
    background-color: var(--iz-white-erie-black);
    border-radius: 6px;
}
.item-song-tooltip {
    position: relative;
}
.item-song-tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #27272b;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 120%;
    left: 50%;
    margin-left: -60px;
}
.item-song-tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}
.item-song-tooltip:hover .tooltiptext {
    visibility: visible;
}
/*End Css My Playlist*/
/*Start Css InfoPackage*/
.package-container {
    background: var(--iz-profile-background);
    box-shadow: 0 0 10px rgba(143, 140, 140, 0.08);
    border-radius: 8px;
    padding: 24px;
}
.package-header {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--iz-red-white);
}
.package-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.package-right {
    width: 32%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-direction: column;
}
.action-button {
    display: flex;
    align-items: center;
    padding: 0 40px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    background-color: #EE0033;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}
/*End Css InfoPackage*/

/*Start Css Music Collection*/

.music-collection {
    font-size: 14px;
    background: #FFFFFF1A;
    width: 100%;
    padding: 30px;
    margin-left: 20px;
    box-shadow: 0 4px 20px 0 #8F8C8C14;
}

.music-collection .bold-text{
    font-size: 16px;
    font-weight: 700;
}
.music-collection .regular-text {
    font-size: 14px;
    font-weight: 500;
}
.music-collection .header-title {
    color: var(--iz-mc-header-title);
    font-size: 32px;
    font-weight: 700;
}
.music-collection .underline {
    border-bottom: 1px solid var(--iz-mc-underline);
}
.music-collection .header-table {
    color: var(--iz-mc-item-singer);
}
.music-collection .table-body img {
    width: 45px;
    border-radius: 8px;
}
.music-collection .table-body .icon-play-svg {
    cursor: pointer;
    height: 24px;
    width: 24px;
    background-color: var(--iz-mc-play-icon);
}
.music-collection .table-body .play-icon {
    -webkit-mask: url(../images/favorite/play-small.svg) no-repeat center;
    mask: url(../images/favorite/play-small.svg) no-repeat center;
}
.music-collection .table-body .song-item {
    font-weight: 500;
    font-size: 16px;
    color: var(--iz-mc-play-icon);
}
.music-collection .table-body .singer-item {
    font-weight: 500;
    font-size: 14px;
    color: var(--iz-mc-item-singer);
}
.music-collection .table-body .down-item {
    font-weight: 500;
    font-size: 16px;
    color: var(--iz-mc-item-singer);
}
.music-collection .table-body .button-item-icon {
    cursor: pointer;
    padding: 7px;
    border-radius: 10px;
    background: var(--iz-mfg-list-group-button-action);
}

.music-collection .table-body .button-item-icon:not(.collapsed) {
    background: var(--iz-music-collection-infor-button-click);
}

.music-collection .table-body .accordion-header.active {
    background: var(--iz-music-collection-accordion-header-bg);
}

.music-collection .table-body .button-item-icon:hover {
    background: var(--iz-mfg-list-group-button-action-hover);
}
.music-collection .table-body .item-action-icon {
    cursor: pointer;
    height: 24px;
    width: 24px;
    background-color: var(--iz-color-header-tab);
}
.music-collection .table-body .info-action-icon {
    -webkit-mask: url(../images/account/info-icon.svg) no-repeat center;
    mask: url(../images/account/info-icon.svg) no-repeat center;
}
.music-collection .table-body .gift-action-icon {
    -webkit-mask: url(../images/account/gift-icon.svg) no-repeat center;
    mask: url(../images/account/gift-icon.svg) no-repeat center;
}
.music-collection .table-body .delete-action-icon {
    -webkit-mask: url(../images/account/delete-icon.svg) no-repeat center;
    mask: url(../images/account/delete-icon.svg) no-repeat center;
}
.music-collection .table-body .accordion-item .accordion-collapse {
    padding: 10px 24px;
    border-radius: var(--iz-mc-accord-detail-border-radius) var(--iz-mc-accord-detail-border-radius) 6px 6px;
    background: var(--iz-mc-accord-show-bg);
    border: 1px solid var(--iz-mc-accord-button-show);
}
.music-collection .table-body .accordion-item .accordion-collapse .accordion-body .name-song {
    color: var(--iz-mc-play-icon);
}
.music-collection .table-body .accordion-item .accordion-collapse .accordion-body .name-singer {
    color: var(--iz-mc-accord-detail-name-singer);
}
.music-collection .table-body .accordion-item .accordion-collapse .accordion-body .code-number-title, .music-collection .table-body .accordion-item .accordion-collapse .accordion-body .extra-label {
    color: #848484;
}
.music-collection .table-body .accordion-item .accordion-collapse .accordion-body .code-number-value {
    color: var(--iz-field);
}
.music-collection .table-body .accordion-item .accordion-collapse .accordion-body .price {
    font-size: 14px;
    font-weight: 700;
    color: var(--iz-mc-header-title);
}
.music-collection .table-body .accordion-item .accordion-collapse .accordion-body .note-vat {
    font-weight: 500;
    font-size: 10px;
    color: #848484;
}
.music-collection .table-body .accordion-item .accordion-collapse .accordion-body .extra-value {
    color: var(--iz-mc-accord-detail-extra-value);
    font-weight: 700;
    font-size: 14px;
}
.music-collection .table-body .accordion-item .accordion-collapse .accordion-body .delete-icon {
    max-width: 84px;
    cursor: pointer;
    width: 100%;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
    gap: 10px;
    background: var(--iz-mc-accord-detail-delete-button);
}
.music-collection .table-body .accordion-item .accordion-collapse .accordion-body .delete-icon span {
    font-weight: 700;
    font-size: 14px;
    color: var(--iz-color-header-tab);
}
.music-collection .table-body .accordion-item .accordion-collapse .accordion-body .delete-icon:hover {
    opacity: 0.6;
}
.music-collection .table-body .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    background: var(--iz-mc-accord-button-show);
    border-radius: 6px 6px 0 0;
}
/*End Css Music Collection*/
/*Start Css Music Group*/
.music-for-group {
    font-size: 14px;
}
.music-for-group .header-title {
    font-weight: bold;
    font-size: 32px;
    color: var(--iz-header);
}
.music-for-group .button-tab {
    padding: 6px 16px;
    background-color: var(--iz-button-active);
    color: #FFFFFF;
    font-weight: 500;
    font-size: 16px;
    border: 1px solid var(--iz-button-active);
}
.music-for-group .background-form {
    border-radius: 8px;
    box-shadow: 0 4px 20px 0 #8F8C8C14;
    padding: 30px;
    border: 1px solid #FFFFFF1A;
    background-color: var(--iz-profile-background);
}
.music-for-group .inactive-tab {
    font-weight: 400;
    background-color: var(--iz-profile-background);
    color: var(--iz-disable);
    border: 1px solid var(--iz-player-bar-setting-btn-bg);
}
.music-for-group .create-new-group .container-input {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
}
.music-for-group .create-new-group .container-input label {
    font-size: 14px;
    font-weight: 600;
    color: var(--iz-color-text);
    margin-bottom: 3px;
}
.music-for-group .create-new-group .container-input .required {
    color: var(--color-text-error);
}
.music-for-group .create-new-group .container-input .card-input {
    background: transparent;
    height: 38px;
    border: 1px solid var(--color-input-border);
    border-radius: 6px;
    padding-left: 10px;
    font-size: 16px;
    color: var(--iz-color-text-input);
}
.music-for-group .create-new-group .group-button {
    margin-left: 16px;
    display: flex;
    align-items: center;
    gap: 26px;
}
.music-for-group .create-new-group .group-button .button-cancel {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-cancel-text);
}
.music-for-group .create-new-group .group-button .button-submit {
    padding: 8px 16px;
    background: var(--iz-button-submit);
    border-radius: 6px;
    border: none;
    box-shadow: none;
}
.music-for-group .create-new-group .group-button .button-submit span {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-dark);
}
.music-for-group .create-new-group .group-button .button-submit:hover {
    opacity: 0.6;
}
.music-for-group .list-music-group .table-header {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    color: var(--iz-mfg-list-group-table-header);
    padding: 0 16px 20px 50px;
    border-bottom: 1px solid var(--iz-mfg-list-group-table-header-border-bottom);
}
.music-for-group .list-music-group .table-list .button-item-icon {
    padding: 7px;
    border-radius: 10px;
    background: var(--iz-mfg-list-group-button-action);
}
.music-for-group .list-music-group .table-list .button-item-icon:hover {
    background: var(--iz-mfg-list-group-button-action-hover);
}
.music-for-group .list-music-group .table-list .item-action-icon {
    cursor: pointer;
    height: 24px;
    width: 24px;
    background-color: var(--iz-color-header-tab);
}
.music-for-group .list-music-group .table-list .edit-action-icon {
    -webkit-mask: url(../images/account/edit-icon.svg) no-repeat center;
    mask: url(../images/account/edit-icon.svg) no-repeat center;
}
.music-for-group .list-music-group .table-list .info-action-icon {
    -webkit-mask: url(../images/account/info-icon.svg) no-repeat center;
    mask: url(../images/account/info-icon.svg) no-repeat center;
}
.music-for-group .list-music-group .table-list .gift-action-icon {
    -webkit-mask: url(../images/account/gift-icon.svg) no-repeat center;
    mask: url(../images/account/gift-icon.svg) no-repeat center;
}
.music-for-group .list-music-group .table-list .delete-action-icon {
    -webkit-mask: url(../images/account/delete-icon.svg) no-repeat center;
    mask: url(../images/account/delete-icon.svg) no-repeat center;
}
.music-for-group .list-music-group .table-list .music-list-item-icon {
    cursor: pointer;
    height: 24px;
    width: 24px;
    background-color: var(--iz-color-text);
    -webkit-mask: url(../images/account/music-list-item.svg) no-repeat center;
    mask: url(../images/account/music-list-item.svg) no-repeat center;
    min-width: 24px;
}
.music-for-group .list-music-group .table-list .item-group {
    padding: 16px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.music-for-group .list-music-group .table-list .item-group .item-name {
    display: flex;
    gap: 16px;
    align-items: center;
    color: var(--iz-color-text);
    font-size: 16px;
    font-weight: 500;
}

.music-for-group .list-music-group .table-list .item-group .item-name span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* Giới hạn ở 2 dòng */
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.music-for-group .list-music-group .table-list .item-group .item-avatar {
    height: 45px;
    width: 45px;
    border-radius: 8px;
}
.music-for-group .list-music-group .table-list .border-accordion-item {
    border: 1px solid var(--iz-mfg-list-group-content-item-border);
}
.music-for-group .list-music-group .table-list .accordion-item {
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid var(--iz-mfg-list-group-table-header-border-bottom);
}
.music-for-group .list-music-group .table-list .accordion-item .button-submit {
    padding: 6px 13px;
    background: var(--color-text-error);
    border-radius: 6px;
    border: none;
    box-shadow: none;
}
.music-for-group .list-music-group .table-list .accordion-item .button-submit span {
    font-weight: 400;
    font-size: 14px;
    color: #fff;
}
.music-for-group .list-music-group .table-list .accordion-item .button-submit:hover {
    opacity: 0.6;
}
.music-for-group .list-music-group .table-list .accordion-item > :has( .show) {
    border: 1px solid var(--iz-mfg-list-group-content-item-border);
}
.music-for-group .list-music-group .table-list .accordion-item .accordion {
    --bs-accordion-border-color: none;
}
.music-for-group .list-music-group .table-list .accordion-item .accordion-body {
    padding: 0 1rem;
    background: var(--iz-mfg-list-group-content-item-bg);
}
.music-for-group .list-music-group .table-list .accordion-item .accordion-body .underline {
    border-bottom: 1px solid #e4e4e44D;
}
.music-for-group .list-music-group .table-list .accordion-item .accordion-body .nav-pills .nav-link.active {
    background: transparent;
}
.music-for-group .list-music-group .table-list .accordion-item .accordion-body .nav-pills .nav-link.active .tab-header-text {
    color: var(--iz-color-header-tab);
}
.music-for-group .list-music-group .table-list .accordion-item .accordion-body .nav-pills .nav-link.active .tab-header-icon {
    cursor: pointer;
    height: 24px;
    width: 24px;
    background-color: var(--iz-color-header-tab);
}
.music-for-group .list-music-group .table-list .accordion-item .accordion-body .nav-pills .nav-link.active .tab-header-phone-icon {
    -webkit-mask: url(../images/account/phone-icon.svg) no-repeat center;
    mask: url(../images/account/phone-icon.svg) no-repeat center;
}
.music-for-group .list-music-group .table-list .accordion-item .accordion-body .tab-content > .active {
    float: none;
}
.music-for-group .list-music-group .table-list .accordion-item .accordion-body .nav-item {
    width: 33%;
    min-width: 10rem;
    max-width: 18rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.music-for-group .list-music-group .table-list .accordion-item .accordion-body .nav-item.has-active::after {
    display: block;
    content: " ";
    height: 5px;
    width: 100%;
    border-radius: 3px;
    background: var(--iz-color-header-tab);
    box-shadow: 0 4px 6px 0 #5C5C5C40;
}
.music-for-group .list-music-group .table-list .accordion-item .accordion-body .nav-item img {
    width: 20px;
    height: 20px;
}
.music-for-group .list-music-group .table-list .accordion-item .accordion-body .nav-item .tab-header-text {
    line-height: 20px;
    font-weight: 500;
    color: var(--iz-color-inactive-header-tab);
}
.music-for-group .list-music-group .table-list .accordion-item .accordion-body .nav-item .tab-header-icon {
    cursor: pointer;
    height: 24px;
    width: 24px;
    background-color: var(--iz-color-inactive-header-tab);
}
.music-for-group .list-music-group .table-list .accordion-item .accordion-body .nav-item .tab-header-phone-icon {
    -webkit-mask: url(../images/account/phone-icon.svg) no-repeat center;
    mask: url(../images/account/phone-icon.svg) no-repeat center;
}
.music-for-group .list-music-group .table-list .accordion-item .accordion-body .nav-item .tab-header-melody-icon {
    -webkit-mask: url(../images/account/melody-icon.svg) no-repeat center;
    mask: url(../images/account/melody-icon.svg) no-repeat center;
}
.music-for-group .list-music-group .table-list .accordion-item .accordion-body .nav-item .tab-header-clock-icon {
    -webkit-mask: url(../images/account/clock-icon.svg) no-repeat center;
    mask: url(../images/account/clock-icon.svg) no-repeat center;
}
.music-for-group .list-music-group .table-list .accordion-button {
    border: none;
}
.music-for-group .list-music-group .table-list .accordion-button::after {
    background-image: none;
}
.music-for-group .list-music-group .table-list .accordion-button:not(.collapsed) {
    background-color: var(--iz-mfg-list-group-content-item-border);
    border-radius: 8px 8px 0 0;
}
.music-for-group .list-music-group .table-list .tab-content {
    padding: 1rem 2.3rem;
    color: var(--iz-field);
}
.music-for-group .list-music-group .table-list .tab-content .tab-content-time {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.music-for-group .list-music-group .table-list .tab-content .tab-content-time input[type='radio'] {
    width: 16px;
    height: 16px;
    transform: scale(1);
    accent-color: var(--color-text-error);
}
.music-for-group .list-music-group .table-list .tab-content .tab-content-time label {
    font-size: 14px;
    font-weight: 400;
    color: var(--iz-color-label-radio);
}
.music-for-group .list-music-group .table-list .tab-content .show {
    opacity: 1;
}
.music-for-group .list-music-group .table-list .tab-content .tab-content-song .header-text {
    font-size: 14px;
    font-weight: bold;
    color: var(--iz-mfg-list-group-tab-song-header-text);
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 2.25rem;
}
.music-for-group .list-music-group .table-list .tab-content .tab-content-song .normal-text {
    font-size: 14px;
    font-weight: 400;
    color: var(--iz-mfg-list-group-tab-song-normal-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 2.25rem;
}

.music-for-group .list-music-group .table-header {
    font-size: 16px;
    font-weight: bold;
    color: var(--iz-mfg-list-group-tab-song-header-text);
}

.music-for-group .list-music-group .table-list .tab-content .tab-content-phone .header-text {
    font-size: 14px;
    font-weight: bold;
    color: var(--iz-mfg-list-group-tab-song-header-text);
}
.music-for-group .list-music-group .table-list .tab-content .tab-content-phone .normal-text {
    font-size: 14px;
    font-weight: 400;
}
.music-for-group .list-music-group .table-list .tab-content .tab-content-phone .card-input {
    background: transparent;
    width: 80%;
    max-width: 180px;
    height: 30px;
    border: 1px solid var(--color-input-border);
    border-radius: 6px;
    padding-left: 14px;
    font-size: 14px;
    color: var(--iz-color-text-input);
}
.music-for-group .list-music-group .table-list .tab-content .tab-content-phone .btn-add-phone {
    cursor: pointer;
    border-radius: 8px;
    width: 116px;
    padding: 7px 12px;
    background: var(--iz-color-button-add-phone-number);
}
.music-for-group .list-music-group .table-list .tab-content .tab-content-phone .btn-add-phone span {
    font-size: 14px;
    color: var(--iz-color-header-tab);
}
.music-for-group .list-music-group .table-list .tab-content .tab-content-phone .btn-add-phone:hover {
    opacity: 0.6;
}
/*End Css Music Group*/
/*Start Css Footer Header*/
[data-theme="dark"] .light-theme {
    display: none;
}
[data-theme="light"] .dark-theme {
    display: none;
}
.custom-container {
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
}
/************header*************/
.header {
    background: var(--iz-white-blackgraygradient);
    top: 0;
    left: 0;
    right: 0;
    position: sticky;
    z-index: 1030;
}
.header-group-right {
    display: flex;
    justify-content: flex-end;
    font-size: 20px;
    font-weight: 700;
    color: var(--iz-mc-play-icon);
    padding: 20px 0;
}

.header-group-right .name-user {
    color: var(--iz-list-song-play-icon);
    max-width: 240px;
}

.header-group-right .user {
    height: 25px;
    width: 25px;
    background-color: var(--iz-black-white);
    -webkit-mask: url(../images/user.svg) no-repeat center;
    mask: url(../images/user.svg) no-repeat center;
}
.header-group-right .search {
    height: 25px;
    width: 25px;
    background-color: var(--iz-black-white);
    -webkit-mask: url(../images/search.svg) no-repeat center;
    mask: url(../images/search.svg) no-repeat center;
}
.header-group-right .noti {
    height: 25px;
    width: 25px;
    background-color: var(--iz-black-white);
    -webkit-mask: url(../images/noti.svg) no-repeat center;
    mask: url(../images/noti.svg) no-repeat center;
}

.header-register-button{
    border: 1px solid var(--iz-header-header-register-border-button);
    border-radius: 6px;
    padding: 6px 16px;
    color: var(--iz-header-header-register-button-text);
    background: var(--iz-white-blackgraygradient);
    font-size: 14px;
    font-weight: 600;
}

.header-sign-in-button{
    border: none;
    background-color: #EE0033;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #FAFAFA;
}

.header-notification{
    border: none;
    background-color: inherit;
    position: relative;
}
/************footer*************/
.footer {
    background: var(--iz-error-strong-black);
    padding: 20px 0 0 0;
    margin-top: 50px;
    line-height: normal;
    font-size: 14px;
    font-weight: 400;
    clear: both;
    height: 400px;
    overflow: hidden;
    position: relative;
}

.up-button{
    position: absolute;
    top: 100px;
    right: 10%;
    cursor: pointer;
}

.footer .padding-content {
    padding: 0 5rem;
}

.footer .footer-contact {
    background: var(--iz-white-error-strong);
    color: var(--iz-error-strong-white);
}
.footer .footer-contact .calling-icon {
    text-align: center;
    height: 25px;
    width: 25px;
    background-color: var(--iz-error-strong-white);
    -webkit-mask: url(/images/calling-icon.svg) no-repeat center;
    mask: url(/images/calling-icon.svg) no-repeat center;
}
.footer .footer-contact .mail-icon {
    text-align: center;
    height: 25px;
    width: 25px;
    background-color: var(--iz-error-strong-white);
    -webkit-mask: url(/images/mail-icon.svg) no-repeat center;
    mask: url(/images/mail-icon.svg) no-repeat center;
}
.footer .footer-contact .first-line-left {
    font-size: 12px;
}
.footer .footer-contact .second-line-left {
    font-size: 16px;
    font-weight: 500;
}
.footer .footer-contact .first-line-right {
    padding: 24px 0;
}

.footer .text-copyright {
    color: var(--iz-white-gray);
}

.footer a {
    color: var(--iz-white-gray);
    padding-bottom: 20px;
}
.footer a:hover {
    text-shadow: 0 0 5px;
}
/*End Css Footer Header*/
/*Start Css HomePage*/
.iz-sidebar-swapper {
    min-width: 276px;
    width: 276px;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 2;
}
.homepage-content-wrapper {
    display: flex;
    flex-flow: column;
    padding: 0 47px;
}

.screen-content-wrapper {
    display: flex;
    flex-flow: column;
    padding: 26px 20px;
}

.iz-container-swapper {
    width: 100%;
    position: relative;
    display: flex;
}
.iz-header-swapper {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
.iz-homepage-main {
    width: calc(100% - 276px);
    flex: 0 1 auto;
    position: relative;
    /* z-index: 1; */
}

/*End Css HomePage*/
/*Start Css ListMayLikePage*/
.list-may-like-content-wrapper {
    display: flex;
    flex-flow: column;
    padding: 37px 47px;
}
.iz-list-may-like {
    width: calc(100% - 276px);
    position: relative;
}
.label-title-large {
    display: flex;
    align-items: center;
    font-size: 32px;
    font-weight: 700;
    color: var(--iz-home-listening-title);
    line-height: 45px;
}

.label-title-large a,
.label-title-large span {
    margin: 0 10px;
}

.label-title-large a{
    font-size: 32px;
    font-weight: 700;
    color: var(--iz-home-listening-title);
    line-height: 45px;
}

.label-title-large a:hover{
    color: var(--iz-header-link-hover);
}

.label-title-large .label-title-large-text:hover {
    color: var(--iz-header-link-hover);
}

.label-title-normal {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 600;
    color: var(--iz-home-listening-title);
    line-height: 31px;
}

.label-title-normal a {
    font-size: 24px;
    font-weight: 600;
    color: var(--iz-home-listening-title);
    line-height: 31px;
}

.label-title-normal .red-border {
    margin-right: 12px;
}

.label-title-large .red-border,
.label-title-normal .red-border {
    height: 22px;
    width: 4px;
    border-radius: 10px;
    background: var(--iz-home-listening-head-title);
    display: var(--iz-home-listening-display-head-border);
}

.lable-title-click-more{
    color: #84848B;
    font-size: 18px;
    font-weight: 400;
    font-family: FS PF BeauSans Pro, sans-serif;
}

.lable-title-click-more img {
    margin-left: 9px;
}

.captcha-image img{
    width: 100%;
}

.help-block{
    font-size: 12px;
    color: #EE0033 !important;
}

.help-block-margin {
    margin-bottom: 10px;
    margin-top: 5px;
}

.label-header-title {
    font-family: FS PF BeauSans Pro, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--iz-song-detai-tab-active);
}

.validate-capcha,.validate-capcha-support-report {
    padding-left: calc(15% + 10px) !important;
    width: 100% !important;
}

/*.validate-capcha-support-report {*/
/*    margin-left: 170px;*/
/*}*/

/*@media screen and (max-width: 1400px) {*/
/*    .validate-capcha {*/
/*        margin-left: 110px;*/
/*    }*/
/*}*/

/*@media screen and (max-width: 1200px) {*/
/*    .validate-capcha {*/
/*        margin-left: 90px;*/
/*    }*/
/*}*/

/*End Css HomePage*/

/*Css tim kiem bai hat*/

@media (min-width: 992px){
    .item-w-20 {
        width: 20%;
        flex: 0 0 auto;
    }
}

.result-of-search {
    color: var(--iz-result-of-search);
    font-family: FS PF BeauSans Pro, serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.hidden-scroll::-webkit-scrollbar {
    display: none;
}
/*End Css tim kiem bai hat*/


/*Login*/

.logo-imuzik-modal {
    width: 64px;
}

.login-modal-title{
    color: var(--iz-modal-title-color);
    font-family: var(--font-beausans-pro);
    font-size: 32px;
    font-weight: 500;
    line-height: 39px;
}

.login-modal-close {
    position: absolute;
    right: 2.5%;
}

.login-modal .form-control {
    background-color: var(--iz-white-black);
    border-color: var(--iz-gray-lightgray);
    color: var(--iz-black-white);
}

.register-modal, .forget-password-modal {
    width: 40%;
    padding: 2rem;
    opacity: 1 !important;
}

.register-modal .register-note, .forget-password-modal .register-note {
    color: var(--iz-666-white);
    font-family: var(--font-beausans-pro);
    font-size: 18px;
    font-weight: 500;
}

.login-modal {
    padding: 2rem;
    background-color: var(--iz-white-black);
}

.login-modal .login-modal-note {
    color: var(--iz-666-white);;
    font-family: var(--font-beausans-pro);
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 21px;
}

.login-modal .login-modal-label {
    color: var(--iz-666-white);
    font-family: var(--font-beausans-pro);
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
}

.login-modal .login-modal-syntax {
    font-family: var(--font-beausans-pro);
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    line-height: 16px;
    color: var(--iz-666-white);;
}

.login-modal .login-modal-forgot-password {
    font-family: var(--font-beausans-pro);
    font-size: 14px;
    font-weight: 400;
    color: var(--iz-666-white);;
    text-decoration: underline;
}

.login-modal .login-modal-policy-privacy {
    font-family: var(--font-beausans-pro);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #2563EB;
    text-decoration: underline;
}


.password-icon{
    position: absolute;
    right: 10px;
    top: 8px;
    cursor: pointer;
}

.btn_play_large{
    cursor: pointer;
}
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/*End Login*/

@media screen and (max-width: 1200px){
    :root {
        --seek-bar-width: 16vw;
    }
}

@media screen and (min-width: 1400px) and (max-width: 1517px){
    .modal-player-comp1-right span:nth-child(2) {
        -webkit-line-clamp: 3;
    }
}

@media screen and (max-width: 1350px){
    :root {
        --seek-bar-width: 20vw;
    }
}

@media screen and (max-width: 1517px){
    :root {
        --seek-bar-width: 25vw;
    }
    .modal-player-comp1_content {
        width: 121px;
    }
}

@media screen and (max-width: 576px){
    .label-title-large{
        font-size: 20px !important;
        line-height: 28px !important;
    }
    .homepage-content-wrapper {
        row-gap: 24px;
        padding: 0 16px;
    }
}

.grid-wrapper{
    display: grid;
    grid-auto-columns: auto 1fr;
    grid-auto-flow: column;
}

.grid-wrapper-full-auto{
    display: grid;
    grid-auto-flow: column;
}

.mb-48{
    margin-bottom: 48px;
}

img {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.load-more-loader-container {
  width: 100% !important;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: 1 / -1;
}

.load-more-loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: load-more-spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes load-more-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.load-more-loader-container-disconnected {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: 1 / -1;
}

.load-more-loader-disconnected {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: load-more-spin 1s linear infinite;
  margin: 0 auto;
}

#toast-container {
  top: 10%;
  left: 50%;
}

.connected-toast {
  background-color: #5cb85c;
  color: #ffffff;
  font-size: 24px;
  font-weight: 500;
  font-family: FS PF BeauSans Pro, sans-serif;
  line-height: 21px;
}

.disconnected-toast {
  background-color: #808080;
  color: #ffffff;
  font-size: 24px;
  font-weight: 500;
  font-family: FS PF BeauSans Pro, sans-serif;
  line-height: 21px;
}

.table-borderless tbody+tbody, .table-borderless td, .table-borderless th, .table-borderless thead th {
    border: 0 !important;
}

input[type="checkbox"]:focus {
    outline: none;
}

.modal-dialog .btn-close {
    font-size: 10px;
    padding: 6px;
    border: 1px solid var(--iz-white-gray);
    border-radius: 16px;
    background-color: var(--iz-white-black);
    background-image: var(--iz-dialog-close-icon);
}

#loader-row {
    width: 100%;
    display: flex;
    justify-content: center;
}

.load-more-loader-container {
    width: 100% !important;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.load-more-loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

/* Fullscreen loading screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 9999; /* Ensure it is above all other content */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Loading spinner */
.loading-screen-spinner {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

.play-music-controller.playing.paused .icon--playing {
    display: block;
    background-image: url("/images/common-items/pause-gif-icon.svg");
}

.play-music-controller.playing:not(.paused) .icon--playing {
    display: block;
    background-image: url("/images/common-items/playing-gif.gif");
}

.play-music-controller.playing .detail-song-name {
    color: #ee0033;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-moz-document url-prefix() {
    #loginform-password {
        font-size: 10px;
    }
}

.noti-toast {
    z-index: 9999;
    width: 238px;
    height: 42px;
    font-size: 1.3rem;
    background: whitesmoke;
    box-shadow: 1px 1px 24px #7C7C7C;
    top: 11px;
    right: 50%;
    left: 50%;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    color: grey;
    opacity: 1;
    transition: opacity ease 0.5s;
}

.new-download-modal-text {
    font-family: FS PF BeauSans Pro, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--iz-new-modal-text) !important;
    word-break: break-word;
}

.jconfirm-buttons .btn-modal-cancel{
    padding: 12px 19px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-family: FS PF BeauSans Pro, sans-serif;
    font-weight: 400 !important;
    line-height: 21px !important;
    text-align: center !important;
    background-color: var(--iz-new-modal-button-cancel-bg) !important;
    color: var(--iz-new-modal-button-cancel-text) !important;
    text-transform: none !important;
    border: var(--iz-new-modal-button-cancel-border) !important;
}

.jconfirm-buttons .btn-modal-confirm {
    text-transform: none !important;
    margin-left: 12px !important;
}

.jconfirm-buttons .btn-modal-confirm{
    padding: 12px 19px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: FS PF BeauSans Pro, sans-serif;
    line-height: 21px !important;
    text-align: center !important;
    background-color: #EE0033 !important;
    color: #FFFFFF !important;
    text-transform: none !important;
}

.new-modal-download-header{
    font-family: FS PF BeauSans Pro, sans-serif;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 28px !important;
    color: var(--iz-modal-title-color);
}

.jconfirm-box{
    background-color: var(--iz-modal-background) !important;
}

.text-transform-none {
    text-transform: none !important;
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #EFEFEF;
    opacity: 1;
    cursor: pointer;
}

.listening-today-song {
    font-family: FS PF BeauSans Pro, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: var(--iz-favorite-singer-label-name);
}

.listening-today-singer {
    font-family: FS PF BeauSans Pro, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #A1A1AA;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}

.singer-dot {
    height: 5px;
    width: 5px;
    margin: 7px 5px;
    background-color: var(--iz-modal-btn-cancel-text);
    border-radius: 50px;
}

.profile-banner-web {
    position: relative;
    height: 330px;
}

.profile-banner-web .profile-banner-web-image {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
}

.profile-banner-web .profile-banner-web-content {
    position: absolute;
    padding: 32px 38px;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
}

.profile-banner-web .profile-banner-web-content-account {
    font-family: FS PF BeauSans Pro, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    color: #FFFFFF;
}

.profile-banner-web .profile-banner-web-content-account {
    font-family: FS PF BeauSans Pro, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    color: #FFFFFF;
}

.profile-banner-web .profile-banner-web-content-phone {
    font-family: FS PF BeauSans Pro, sans-serif;
    font-size: 80px;
    font-weight: 400;
    line-height: 104px;
    color: #FFFFFF;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.profile-banner-web .profile-banner-web-content-text {
    padding: 10px 12px;
    font-family: FS PF BeauSans Pro, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    color: #FFFFFF;
}

.modal-logout .fade {
    opacity: 1;
}

.need-to-login-header {
    font-family: FS PF BeauSans Pro, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 45px;
    color: var(--iz-dim-gray);
    margin-bottom: 12px;
}

.need-to-login-title {
    font-family: FS PF BeauSans Pro, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: var(--iz-dim-gray);
    text-align: center;
    max-width: 418px;
    margin-bottom: 32px;
}

.need-to-login-button-register {
    border-radius: 6px;
    border: 1px solid #EE0033;
    font-family: FS PF BeauSans Pro, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 21px;
    background-color: transparent;
    padding: 8px 24px;
    color: #EE0033;
    margin-right: 24px;
}

.need-to-login-button-login {
    border-radius: 6px;
    border: none;
    font-family: FS PF BeauSans Pro, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 21px;
    background-color: #EE0033;
    padding: 8px 24px;
    color: #FAFAFA;
}

.no-data-list .no-data-text-title {
    font-family: FS PF BeauSans Pro, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 43px;
    color: var(--search-tab-list-text-color-active);
}

.no-data-list .go-home-button {
    padding: 17px 48px;
    border-radius: 40px;
    background-color: #EE0033;
    color: #FFFFFF;
    font-family: FS PF BeauSans Pro, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    margin-top: 12px;
}
.date-container input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 0;
    margin-left: 10px;
    z-index: 1;
    height: 24px;
    width: 24px;
    opacity: 0;
    font-size: 14px;
}

.date-container {
    position: relative;
    align-items: center;
}

.date-container .field-member-birthday{
    /* height: 40px; */
}

.date-container input[type="date"] {
    width: 100%;
    padding: 10px 10px 10px 40px;
    padding-inline-start: 40px;
    box-sizing: border-box;
    font-size: 16px;
    -webkit-appearance: none;
}

.date-container input[type="date"]::-webkit-date-and-time-value{
    text-align: start !important;
}

.date-container .field-member-birthday {
    position: relative;
}

.date-container .field-member-birthday input {
    position: relative;
}

.date-container .field-member-birthday input::after {
    content: "";
    position: absolute;
    top: 54%;
    left: 10px;
    transform: translateY(-52%);
    width: 18px;
    height: 18px;
    background: var(--iz-icon-calendar) no-repeat center center;
    background-size: contain;
    z-index: 0;
}

#text-error, #text-error-gift {
    color: var(--color-text-error);
    font-family: FS PF BeauSans Pro, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-imuzik-select-crbt {
    font-size: 16px;
    font-family: FS PF BeauSans Pro, serif;
    font-weight: 400;
    line-height: 21px;
    text-align: center;
    color: var(--iz-header-header-register-button-text) !important;
    background: none!important;
    padding: 0;
    margin: 0;
    text-transform: none;
}

.modal.fade.modal-share .modal-dialog {
    margin-top: unset;
}

.disable-button {
    background-color: var(--iz-profile-background);
    border-radius: 6px;
    color: #C4C4C4;
    border: none;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.loading-spinner {
    border: 7px solid #f3f3f3;
    border-top: 7px solid #3498db;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.mg-b-15{
    margin-bottom: 15px;
}

.noti-no-data {
    color: var(--iz-black-white);
    font-weight: bold;
    font-size: 28px;
}

#confirm-popup {
    z-index: 2000;
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    background-color: rgba(0, 0, 0, 0.5);
}

#confirm-popup .modal-dialog-confirm {
    width: 90%;
    max-width: 1440px;
}
#confirm-popup .modal-dialog-confirm .box-accept .content-all {
    font-weight: 700;
}
#confirm-popup .modal-title {
    font-size: 32px;
    margin-bottom: 20px;
}
#confirm-popup .modal-content.box-policy {
    background-color: var(--iz-modal-background);
    color: var(--iz-mfg-list-group-tab-song-header-text);
}

#confirm-popup * {
    text-align: justify;
}

.play-music-controller {
    cursor: pointer;
}