navbar-expand-sm navbar-light bg-light {
                background-color: blueviolet;
            }
            
            fa-bars a1 {
                border: 1px solid black;
            }
            
            .logo {
                height: 45px;
                width: 45px;
                border-radius: 50%;
                flex: auto;
                margin-left: 2px;
            }
            
            .full-logo {
                height: 45px;
                width: auto;
                flex: auto;
                padding: 2px;
            }
            @media(max-width:576px) {
                .full-logo {
                    max-width: 130px;
                }
            }
            .search_form {
                float: 1
            }
            
            /* .avatavideoer {
                margin: auto;
                max-width: 10px;
                max-height: 10px;
            } */
            @media (max-width: 768px) {
                .form-control {
                    display: block !important; /* Sử dụng !important nếu cần */
                }
            }
            
            .headerSideBar {
                text-align: initial;
                margin-top: 1px;
            }
            
            .notification {
                width: 400px;
                height: auto;
                overflow: auto;
                margin: auto;
            }
            
            .index-notification {
                /* position: relative!important; */
                z-index: 5000!important;
                background-color: #bbb9b9;
            }
            
            .notification :hover {
                background: #e0dadd;
            }
            
            @media(max-width:576px) {
                .notification {
                    width: 240px;
                }
            }
            
            .sideBar {
                padding: 0;
                box-sizing: border-box;
                font-family: 'Poppins', sans-serif;
                width: 210px;
                color: rgb(74, 180, 184);
            }
            
            @media(max-width:576px) {
                .sideBar {
                    z-index: -1;
                    height: 1px;
                }
            }
            
            .videosRecommended {
                width: 100%;
                max-height: 950px;
                overflow-y: scroll;
            }
            .isVideoDownload{
                width: 70%;
            }
            .atTop {
                position: sticky;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 99;
            }
            
            .commentsVideo {
                width: auto;
                height: 750px;
                overflow-x: hidden;
                overflow-y: scroll;
            }
            
            .avatarComment {
                width: 65px;
                height: 65px
            }
            
            .marginVideoRecommend {
                margin-left: 1px;
            }
            
            @media(max-width: 1200px) {
                .marginVideoRecommend {
                    margin-left: 35px;
                }
            }
            
            @media(max-width: 1000px) {
                .marginVideoRecommend {
                    margin-left: 0px;
                }
            }
            
            @media(max-width:576px) {
                .bodyWatching {
                    margin-top: 500px;
                }
            }
            .documentPdfVideo{height: 750px;}
            .navigation {
                position: fixed;
                width: 300px;
                height: 100%;
                background: #f5f6f7;
                transition: 0.1s;
                overflow: hidden;
            }
            
            @media(max-width:576px) {
                .navigation {
                    height: 10px;
                }
            }
            
            .navigation:hover,
            .navigation.active {
                width: 300px;
                z-index: 1;
            }
            
            .navigation ul {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                margin-left: -50px;
            }
            
            .navigation ul li {
                position: relative;
                width: 300px;
                list-style: none;
            }
            
            .navigation ul li:hover {
                background: #e0dadd;
                width: 300px;
            }
            
            .navigation ul li a {
                position: relative;
                display: flex;
                width: 100%;
                text-decoration: none;
                color: #303636;
            }
            
            .navigation ul li a .Icon {
                position: relative;
                display: block;
                min-width: 60px;
                height: 60px;
                line-height: 60px;
                text-align: center;
            }
            
            .navigation ul li a .Icon .fa {
                font-size: 24px;
            }
            
            .navigation ul li a .title {
                position: relative;
                display: block;
                padding: 0 10px;
                height: 60px;
                line-height: 60px;
                text-align: start;
                white-space: normal;
                font-size: 15px;
                white-space: nowrap;
                max-width: 300px;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            .toggle.active {
                background-color: floralwhite;
            }
            
            @media(max-width:576px) {
                .navigation {
                    margin-top: -50px;
                }
            }
            @media(max-width: 1700px) {
                .navigation {
                    width: 240px;
                }
                .navigation.active {
                    left: 0px;
                }
            }@media(max-width: 1400px) {
                .navigation {
                    width: 220px;
                }
                .navigation.active {
                    left: 0px;
                }
            }
            @media(max-width: 1200px) {
                .navigation {
                    width: 220px;
                }
                .navigation.active {
                    left: 0px;
                }
            }
            
            @media(max-width: 992px) {
                .navigation {
                    left: -360px;
                    margin-top: 80px;
                }
                .navigation.active {
                    left: 0px;
                }
            }
            /* begin navigation1  */
            
            .navigation1 {
                position: fixed;
                width: 300px;
                height: 100%;
                transition: 0.1s;
                margin-top: 10px;
            }
            
            .navigation1 ul {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                margin-left: -50px;
            }
            
            .navigation1 ul li {
                position: relative;
                width: 100%;
                list-style: none;
            }
            
            .navigation1 ul li:hover {
                background: #e0dadd;
            }
            
            .navigation1 ul li a {
                position: relative;
                display: flex;
                width: 100%;
                text-decoration: none;
                color: #303636;
            }
            
            .navigation1 ul li a .Icon {
                position: relative;
                display: block;
                min-width: 60px;
                height: 60px;
                line-height: 60px;
                text-align: center;
            }
            
            .navigation1 ul li a .Icon .fa {
                font-size: 24px;
            }
            
            .navigation1 ul li a .title {
                position: relative;
                display: block;
                padding: 0 10px;
                height: 60px;
                line-height: 60px;
                text-align: start;
                white-space: normal;
            }
            /* end navigation1 */
            
            .veoVideo {
                text-align: end;
                margin-top: 0.5px;
            }
            
            /* .imgavata {
                max-height: 30px;
                text-align: center;
            }
            
            .formdangky {
                border: 2px solid rgb(216, 213, 213);
                margin-top: 50px;
                margin-bottom: 50px;
                height: 1000px;
            } */
            
            .formSetting {
                border: 2px solid rgb(216, 213, 213);
                margin-top: 50px;
                margin-bottom: 50px;
                display: flex;
                justify-content: center;
            }
            
            .coverManagerPix {
                width: 500px;
                height: 300px;
                margin: auto;
                margin-bottom: 50px;
                margin-top: 20px;
            }
            
            .AvatarManagerPix {
                width: 200px;
                height: 200px;
                margin: auto;
                margin-bottom: 50px;
                margin-top: 20px;
            }
            
            .titleNextVideo {
                margin-bottom: 5px;
            }
            
            .size-font {
                font-size: small;
            }
            /* begin .recomendedVideos*/
            
            .recommendedVideos {
                flex: 0.8;
                background-color: rgb(241, 237, 232);
                padding: 40 20;
                padding-bottom: 0cm;
            }
            
            .recommendedVideos>h2 {
                margin-left: 5px;
                margin-bottom: 20px;
            }
            
            .recommendedVideos_videos {
                display: flex;
                flex-wrap: wrap;
            }
            /* .fixVideoCard {
                background: #fff !important;
                border-radius: 12px !important;
                overflow: hidden !important;
                box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
                transition: transform .2s !important;
            } */
            .videoCard {
                margin-bottom: 40px !important;
                width: 100% !important;
                background: #fff !important;
                border-radius: 12px !important;
                overflow: hidden !important;
                box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
                transition: transform .2s !important;
            }
            /* begin add */
            .videoCard:hover {
                transform: translateY(-4px);
                }
            .videoCard_info {
            padding: 8px 10px;
            display: flex;
            flex-direction: column;
            }
            .videoCard_info .Title_video {
            display: -webkit-box;
            -webkit-line-clamp: 4; /* Giới hạn 4 dòng */
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-weight: 600;
            font-size: 15px;
            margin-bottom: 4px;
            }
            .videoCard_info .tags_video {
            color: #757f85;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* Giới hạn 2 dòng */
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 11px;
            word-break: break-word;
            margin-bottom: 6px;
            }
            /* end add */
            .videoCard_thumbnail {
                /* height: 180px;
                max-width: 98%;
                border-radius: 10px; */
                width: 100%;
                aspect-ratio: 16 / 9; /* Đảm bảo tỷ lệ 16:9 */
                max-width: 98%;
                border-radius: 10px;
                object-fit: cover; /* Đảm bảo ảnh sẽ được cắt để vừa với khung 16:9 */
            }
            
            
            .videoCard_info {
                display: flex;
                margin-top: 10px;
                padding-right: 5px;
            }
            
            .videoCard_info_text {
                margin-left: 5px;
            }
            
            .modal-video-fix {
                max-width: 1000px !important;
            }
            
            .backgroundShow {
                background: #e0e6e6;
            }
            .tags_video{
                display: inline-block;
            max-width: 280px; /* Điều chỉnh chiều rộng theo yêu cầu */
            /* white-space: nowrap;  */
            overflow: hidden; /* Ẩn văn bản vượt quá */
            text-overflow: ellipsis; /* Thêm dấu "..." khi văn bản dài quá */
            }
            .Title_video {
                font-size: 18px;
                text-decoration: none;
                font-family: "Roboto", "Arial", sans-serif;
                word-wrap: break-word;
                color: #303636;
            }
            
            .text_per_line {
                /* white-space: pre; */
                /* font-size: 100%;
                word-wrap: break-word; */
                white-space: pre-wrap;
            }
            
            .videoCard_info_text>p {
                font-size: 14px;
                color: gray;
            }
            
            .nameUser {
                text-decoration: none;
                color: rgb(62, 60, 60);
            }
            
            .newNotification {
                text-decoration: none;
                color: rgba(0, 0, 0, 0.938);
                background: rgba(180, 172, 172, 0.938);
            }
            
            .notificationText {
                text-decoration: none;
                color: rgba(0, 0, 0, 0.938);
            }
            
            .notificationText.hover {
                background: #303636;
            }
            
            .dot {
                height: 10px;
                width: 10px;
                background-color: rgb(32, 106, 195);
                border-radius: 50%;
                display: inline-block;
            }
            
            .bell-icon {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 25px;
                height: 25px;
                background-color: rgb(192, 188, 188);
                border-radius: 50%;
            }
            
            .bell-icon i {
                font-size: 20px;
                color: rgb(66, 64, 64);
            }
            
            .nameUser:hover {
                text-decoration: none;
                color: rgb(22, 21, 21);
            }
            
            .statisticalVideo {
                display: flex;
            }
            
            .statisticalVideo button {
                color: rgb(12, 11, 11);
            }
            
            .btn-in-img {
                margin-top: -100px;
                z-index: 10;
            }
            .img-crop {
                max-width: 100%;
                height: auto;
                }
                @media (max-width: 600px) {
                .img-crop {
                    width: 100vw;
                    height: auto;
                }
                }
            
            .thumbnailOnForm {
                width: 320px;
                height: auto;
            }
            
            .video_avatar {
                height: 30px;
                width: 30px;
            }
            
            .test {
                display: flex;
            }
            
            .logo_header {
                flex: 1;
            }
            
            .search-form {
                max-width: 600px;
            }
            /* begin playVideo */
            
            .bodyWatching {
                margin-top: 700px;
            }
            
            .videoAbout {
                width: 100%;
                margin-top: 20px;
                height: auto;
                max-width: 854px;
            }
            
            .videoPlay {
                /* width: 100%;
                height: 100%;
                height: auto; */
                width: 90%;
                max-width: 1000px;
                max-height: 750px;
            }
            
            .videoPlaying {
                margin-top: 50px;
                padding-top: 10px;
            }
            
            .nameUserWatching {
                margin: 10px;
            }
            
            .nameUserWatching a p {
                font-size: 20px
            }
            
            .nameUserWatching a p {
                text-decoration: none;
                color: rgb(22, 21, 21);
                margin: auto;
                margin-right: 5px;
                white-space: nowrap;
                width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            .nameUserWatching a p:hover {
                text-decoration: none;
                color: rgb(170, 14, 14);
            }
            
            .documentVideo {}
            
            @media(max-width:2560px) {
                .videoPlaying {
                    padding-top: 10px;
                }
            }
            
            /* @media(max-width:1200px) {
                .videoCard {
                    margin-left: 90px;
                }
            }
             */
            .showListUser {
                width: 120px;
                height: 120px;
                border-radius: 50%;
            }
            
            .WatchingVideoLeft {
                margin-top: 20px;
                width: 800px;
            }
            /* begin intVideo */
            
            .dataVideoPlaying {
                margin-left: 20px;
                margin-top: 30px;
            }
            
            .headerCommented {
                height: 65px;
            }
            
            .iconLikeComment {
                margin-right: 40px;
                border: 2px;
                border-radius: .25rem!important;
                padding-left: 10px;
                padding-right: 10px;
                height: 50px;
                margin: 4px;
                margin-right: 5px;
                max-width: 70px;
            }
            
            .iconLikeComment p {
                margin-left: 10px;
                margin-top: 10px;
            }
            
            .iconLikeVideo div {
                margin-left: 5px;
            }
            
            .likeTextVideo {
                min-width: 60px;
                max-width: 70px;
                height: auto;
            }
            
            .likeTextVideo p {
                height: 10px;
                margin-left: 5px;
            }
            
            .iconLikeVideoUp {
                margin-top: 10px;
            }
            
            .iconLikeVideo {
                height: 50px;
                border-radius: 15px;
                background-color: #e2e8e8;
            }
            
            .likeText {
                margin-left: 3px;
                margin: 1px;
                padding: 1px;
                width: 60px;
                height: 55px;
            }
            
            .likeText p {
                height: 20px;
            }
            
            .shareVideo {
                height: 50px;
                border-radius: 15px;
                background-color: #e2e8e8;
            }
            
            .shareVideo i {
                margin-left: 10px;
                margin-right: 10px;
                margin-top: 15px;
            }
            
            .shareVideo p {
                margin-right: 10px;
                margin-top: 10px;
            }
            /* end intVideo */
            
            .newComment {
                margin-top: 10px;
                margin-bottom: 20px;
            }
            
            .img-video_avatar {
                margin: 1px;
                width: 40px;
                height: 40px;
            }
            
            .imgCover {
                max-height: 400px;
                height: auto;
                max-width: 100%;
                aspect-ratio: 2.7 / 1;
                object-fit: cover;
            }
            
            .avatar {
                max-width: 200px;
                height: 200px;
                margin-top: -100px;
                aspect-ratio: 1 / 1;
                object-fit: cover;
            }
            
            .nameCommented {
                margin: 3px;
                margin-left: 10px;
            }
            
            .nameCommented a {
                margin: 2px;
            }
            
            .headerCommented p {
                margin: auto;
                margin-right: 10px;
            }
            
            .header {
                width: 200px;
            }
            
            .comment {
                margin-top: 25px;
            }
            /* userSub */
            
            .nameUserWatching {
                margin: 10px;
            }
            
            .nameUserWatching a p {
                font-size: 20px
            }
            
            .nameUserWatching a p {
                text-decoration: none;
                color: rgb(22, 21, 21);
                margin: auto;
                margin-right: 5px;
                white-space: nowrap;
                width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            .nameUserWatching a p:hover {
                text-decoration: none;
                color: rgb(200, 195, 195);
            }
            
            .decorationLink a h5 {
                text-decoration: none;
            }
            
            .nameUserInLink {
                text-decoration: none !important;
                color: rgb(22, 21, 21);
                /* margin: auto; */
                margin-right: 5px;
                white-space: nowrap;
                width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            /* begin nextVideo */
            
            .nextVideo1 {
                margin: 3px;
                /* padding: 3px; */
                min-width: 325px;
                width: 100%;
                max-height: 900px;
                overflow-y: scroll;
                border:#dbdada 1px solid;
            }
            .listVideoAtWatching {
                margin: 3px;
                /* padding: 3px; */
                min-width: 325px;
                width: 100%;
                max-height: 750px;
                overflow-y: scroll;
                border:#dbdada 1px solid;
            }
            /* Thêm vào file CSS của component */
            .sticky-header {
                position: sticky;
                top: 0;
                background: #f5f6f7;
                z-index: 10;
                padding: 8px;
            }
            /* .videoCard {
                margin: 5px
            } */
            
            /* @media(min-width:1000px) {
                .videoCard {
                    margin-right: 80px;
                }
            } */
            /* begin user */
            
            .bodyUser {
                margin-top: 20px;
            }
            
            .imgListVideo {
                max-width: 95%;
                max-height: 450px;
                /* border-radius: 10px; */
                aspect-ratio: 16 / 9;
                object-fit: cover;
                margin: 3px
            }
            /* end */
            /* begin newsfeed */
            
            /* .newsfeed {
                margin-top: 100px;
            } */
            
            /* .imgNews {
                max-width: 750px;
                max-height: 450px;
            } */
            /* end newsfeed */
            
            .subsUser {
                max-width: 250px;
                max-height: 200px;
                padding-top: 10px;
                margin: auto;
            }
            
            .subsUser p {
                color: hsl(120, 3%, 46%);
            }
            
            .newVideoButton {
                width: 150px;
                margin-left: -30px;
                height: 50px;
                background-color: rgb(75, 157, 196);
                border: none;
                color: hsl(120, 44%, 93%);
            }
            
            .newVideoButton p {
                color: hsl(120, 3%, 46%);
            }
            
            .iconToolImg i {
                color: #000;
                background-color: #f1e9e9;
                margin-right: 100px
            }
            
            .iconToolImg i:hover {
                background-color: #000;
                color: #f1e9e9;
            }
            
            .UserCard {
                margin-bottom: 20px;
            }
            
            /* .iconcommentShareNews {
                display: flex;
                justify-content: flex-end
            }
            
            .iconcommentShareNews button {
                margin: 10px;
            } */
            
            .textButtonAdd {
                text-overflow: ellipsis;
            }
            
            .offcanvasHeader {
                height: 50px;
                margin-top: 10px;
                justify-content: first flex-end
            }
            
            .sideBarOffcanvas {
                width: 110px;
            }
            
            .btnAdd {
                background-color: #5c5f61;
                color: rgb(230, 223, 223);
                font-size: 16px;
                padding: 7px 10px;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                transition: all 0.3s ease;
                font-family: "Roboto", "Arial", sans-serif;
            }
            
            .btnAdd:hover {
                background-color: #292a2b;
                color: rgb(255, 254, 254);
            }
            
            .btnSubUser {
                background-color: #818283;
                color: rgb(244, 240, 240);
                font-size: 16px;
                padding: 7px 10px;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                transition: all 0.3s ease;
                font-family: "Roboto", "Arial", sans-serif;
            }
            
            .btnSubUser:hover {
                background-color: #6b6d71;
                color: rgb(255, 247, 247);
            }
            
            .noneBorderButton {
                border: none;
            }
            
            .btnManage {
                background-color: #818283;
                color: rgb(244, 240, 240);
                font-size: 16px;
                padding: 7px 10px;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                transition: all 0.3s ease;
                font-family: "Roboto", "Arial", sans-serif;
            }
            
            .btnManage:hover {
                background-color: #6b6d71;
                color: #FFFFFF;
            }
            .max-withMobileImg{
                max-width: 200px;
            }
            .fix-maxWidth {
                max-width: 1100px !important;
            }
            
            .setIndexModal {
                z-index: 3000 !important;
            }
            
            .gradient-custom-3 {
                background: #84fab0;
                background: -webkit-linear-gradient(to right, rgba(132, 250, 176, 0.5), rgba(143, 211, 244, 0.5));
                background: linear-gradient(to right, rgba(132, 250, 176, 0.5), rgba(143, 211, 244, 0.5))
            }
            
            .gradient-custom-4 {
                background: #84fab0;
                background: -webkit-linear-gradient(to right, rgba(132, 250, 176, 1), rgba(143, 211, 244, 1));
                background: linear-gradient(to right, rgba(132, 250, 176, 1), rgba(143, 211, 244, 1))
            }
            
            .textError {
                text-align: center;
                color: red
            }
            
            .offcanvasFix {
                width: 300px !important;
            }
            
            /* Sticky Header for Reusable */
            .sticky-section-header {
                position: sticky !important;
                top: 0 !important;
                background-color: #f5f6f7!important;
                z-index: 10 !important;
                padding: 10px 0 !important;
                margin: 5px 0 10px 0 !important;
                box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
            }