@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600&display=swap');

:root{
   --main-color:#8e44ad;
   --red:#e74c3c;
   --oragen:#f39c12;
   --white:#fff;
   --black:#2c3e50;
   --light-color:#888;
   --light-bg:#eee;
   --border:.1rem solid rgba(0,0,0,.2);
}

*{
   font-family: 'Nunito', sans-serif;
   margin: 0; padding: 0;
   box-sizing: border-box;
   outline: none; border: none;
   text-decoration: none;
}

*::selection{
   background-color: var(--main-color);
   color: #fff;
}

*::-webkit-scrollbar{
   height: .5rem;
   width: 1rem;
}

*::-webkit-scrollbar-track{
   background-color: transparent;
}

*::-webkit-scrollbar-thumb{
   background-color: var(--main-color);
}

html{
   font-size: 62.5%;
   overflow-x: hidden;
}

body{
   background-color: var(--light-bg);
   padding-left: 30rem;
}

.modal{
    z-index: 1300;
    margin-left: 5%;
    margin: auto;
}

.modal-xxl {
    max-width: 1200px;
    margin: auto;
}


.middle-modal .modal-dialog {
    display: flex;
    align-items: center;
    min-height: 100vh;
}

.navbar a {
    text-decoration: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

th {
    text-align: center;
    font-size: 1.7rem !important;
    padding: 8px;
}

td {
    font-size: 1.7rem !important;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

a:hover {
    text-decoration: none;
    color: var(--main-color) !important;
}

button:disabled {
    background-color: #d3d3d3;
    color: #a9a9a9;
    cursor: not-allowed;
    opacity: 0.7;
}

.card {
    text-align: justify;
    font-size: 12pt;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 10px;
    margin-right: 10px;
    border: 0;
}

.card h2 {
    margin-top: 0;
}

.card p {
    font-size: 12pt;
    line-height: 1.5;
    margin: 10px 0;
}

.card p strong {
    font-weight: 900;
    color: var(--main-color);
    margin-top: 0em;
    margin-bottom: 0em;
}

.card strong {
    font-weight: 900;
    color: var(--main-color);
    margin-top: 0em;
    margin-bottom: 0em;
}

.card ul {
    display: block;
    list-style-type: disc;
    padding-left: 20px;
}

.card ul li {
    display: list-item;
}


.normal {
    color: var(--black) !important;
    padding-top: 0rem !important;
    font-size: 1.7rem !important;
}

.text-sm {
    font-size: 1.5rem !important;
}
.text-center{
    text-align: center !important;
}

.pl-1 {
    padding-left: 1px;
}
.pl-2 {
    padding-left: 2px;
}
.pl-3 {
    padding-left: 5px;
}

.px-2 {
    padding-left: 4px;
    padding-right: 4px;
}

.pr-1 {
    padding-right: 1px;
}
.pr-2 {
    padding-right: 2px;
}
.pr-3 {
    padding-right: 5px;
}

.pl-3 {
    padding-left: 5px;
}

.pb-3 {
    padding-bottom: 5px;
}

.mt-3 {
   margin-top: 3px;
}

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

.red-text{
    color: var(--red) !important;
}

.bold {
    font-weight: 600;
}
.underline {
    text-decoration: underline !important;
}

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

.badge {
    background-color: var(--red);
    color: white !important;
    padding: 4px 8px;
    text-align: center;
    border-radius: 5px;
    margin-right: 5px;
}

.badge-primary{
    background-color: var(--main-color);
}

.badge-warning{
    background-color: var(--oragen) !important;
}


.badge-danger{
    background-color: var(--red);
}

.wrapper {
   position: relative;
   overflow: auto;
   white-space: nowrap;
 }
 
 .sticky-col {
   position: -webkit-sticky;
   position: sticky;
   background-color: white;
 }
 
.first-col {
   left: 0px;
}
 
.second-col {
   left: 25px;
   min-width: 150px;
}

.third-col {
   left: 150px;
}


.more-content {
    display: none; /* Ẩn nội dung mở rộng ban đầu */
}
.see-more-btn {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}

.checkbox-group {
    text-align: left;
    margin: 1rem 0;
}
.checkbox-group label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--light-bg);
    padding: 1rem;
    border-radius: .5rem;
    margin-bottom: 0.5rem;
}
.checkbox-group input[type="checkbox"] {
    margin-right: 0.5rem;
}
.checkbox-group span {
    flex-grow: 1;
    font-size: 1.5rem;
    padding: 0.3rem;
}
.qty-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.qty-box {
    width: 40px;
    text-align: center;
    border-radius: .5rem;
    padding: 0.5rem;
}
.help-icon {
    text-decoration: none;
    color: var(--black);
    font-size: 1.2rem;
    margin-left: 3px;
}

.price-summary {
    text-align: right;
    margin-top: 1rem;
    color: red;
}

.price-summary h4 {
    font-size: 2rem;
    font-weight: bold;
}





body.dark{
   --white:#222;
   --black:#fff;
   --light-color:#aaa;
   --light-bg:#333;
   --border:.1rem solid rgba(255,255,255,.2);
}

body.active{
   padding-left: 0;
}

section{
   padding: 1rem;
   max-width: 100%;
   margin: auto;
   margin-left: 0%;
}

.navbar {
    display: block;
}

.btn,
.option-btn,
.delete-btn,
.inline-btn,
.inline-option-btn,
.inline-delete-btn{
   border-radius: .5rem;
   padding: 1rem 1rem;
   font-size: 1.8rem;
   color: #fff;
   margin-top: 1rem;
   text-transform: capitalize;
   cursor: pointer;
   text-align: center;
   margin-top: 5px;
}

.btn,
.option-btn,
.delete-btn{
   display: block;
   width: 100%;
}

.inline-btn,
.inline-option-btn,
.inline-delete-btn{
   display: inline-block;
}

.btn,
.inline-btn{
   background-color: var(--main-color);
}

.option-btn,
.inline-option-btn{
   background-color: var(--oragen);
}

.delete-btn,
.inline-delete-btn{
   background-color: var(--red);
}

.btn:hover,
.option-btn:hover,
.delete-btn:hover,
.inline-btn:hover,
.inline-option-btn:hover,
.inline-delete-btn:hover{
   background-color: var(--black);
   color: var(--white);
}

.flex-btn{
   display:flex;
   gap: 1rem;
}

.message{
   position: sticky;
   top:0;
   margin:0 auto;
   background-color: var(--light-bg);
   padding:2rem;
   display: flex;
   align-items: center;
   gap:1rem;
   justify-content: space-between;
}

.message.form{
   max-width: 1200px;
   margin: 0 auto;
   background-color: var(--white);
   top: 2rem;
   border-radius: .5rem;
}

.message span{
   font-size: 2rem;
   color:var(--black);
}

.message i{
   font-size: 2.5rem;
   color:var(--red);
   cursor: pointer;
   transition: .2s linear;
}

.message i:hover{
   transform: rotate(90deg);
}

.empty{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 1.5rem;
   text-align: center;
   width: 100%;
   font-size: 2rem;
   color: var(--red);
}

.heading{
   padding-bottom: 1rem;
   border-bottom: var(--border);
   font-size: 3rem;
   color: var(--black);
   text-transform: capitalize;
   margin-bottom: 1rem;
   font-weight: 700;
}

.header{
   background-color: var(--white);
   border-bottom: var(--border);
   position: sticky;
   top: 0; left: 0; right: 0;
   z-index: 1000;
}

.header .flex{
   padding: 1.25rem 2rem;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.header .flex .logo{
   font-size: 2.5rem;
   color: var(--black);
   font-weight: bolder;
}

.header .flex .search-form{
   width: 50rem;
   border-radius: .5rem;
   display: flex;
   align-items: center;
   gap: 2rem;
   padding: 1.5rem 2rem;
   background-color: var(--light-bg);
}

.header .flex .search-form input{
   width: 100%;
   background:none;
   font-size: 2rem;
   color: var(--black);
}

.header .flex .search-form button{
   font-size: 2rem;
   color: var(--black);
   cursor: pointer;
   background: none;
}

.header .flex .search-form button:hover{
   color: var(--main-color);
}

.header .flex .icons div{
   font-size: 2rem;
   color: var(--black);
   border-radius: .5rem;
   height: 4.5rem;
   cursor: pointer;
   width: 4.5rem;
   line-height: 4.4rem;
   background-color: var(--light-bg);
   text-align: center;
   margin-left: .5rem;
}

.header .flex .icons div:hover{
   background-color: var(--black);
   color:var(--white);
}

#search-btn{
   display: none;
}

.header .flex .profile{
   position: absolute;
   top: 120%; right: 2rem;
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
   text-align: center;
   width: 30rem;
   transform: scale(0);
   transform-origin: top right;
}

.header .flex .profile.active{
   transform: scale(1);
   transition: .2s linear;
}

.header .flex .profile img{
   height: 10rem;
   width: 10rem;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: .5rem;
}

.header .flex .profile h3{
   font-size: 2rem;
   color: var(--black);
}

.header .flex .profile span{
   color: var(--light-color);
   font-size: 1.6rem;
}

.active{
    background-color: var(--light-bg);
    border-radius: 5px;
    color: var(--white) !important;
}

.active span {
    /* color: var(--white); */
}

.side-bar{
   position: fixed;
   top: 0; left: 0;
   height: 100vh;
   width: 30rem;
   background-color: var(--white);
   border-right: var(--border);
   z-index: 1200;
}

.side-bar .close-side-bar{
   text-align: right;
   padding: 1rem;
   padding-bottom: 0;
   display: none;
}

.side-bar .close-side-bar i{
    height: 2rem;
    width: 2rem;
    line-height: 2rem;
    font-size: 1.5rem;
    color: #fff;
    cursor: pointer;
    background-color: var(--red);
    text-align: center;
    border-radius: .5rem;
}

.side-bar .close-side-bar i:hover{
   background-color: var(--black);
}

.side-bar .profile{
   padding: 1rem 1rem;
   text-align: center;
}

.side-bar .profile img{
   height: 10rem;
   width: 10rem;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: .5rem;
}

.side-bar .profile h3{
   font-size: 2rem;
   color: var(--black);
}

.side-bar .profile span{
   color: var(--light-color);
   font-size: 1.6rem;
}

.side-bar .navbar a{
   display:block;
   padding: 1.2rem;
   margin: 0.3rem 0;
   font-size: 1.6rem;
}

.side-bar .navbar a i{
   color: var(--main-color);
   margin-right: 1.5rem;
   transition: .2s linear;
}

.side-bar .navbar a span{
   color: var(--light-color);
}

.side-bar .navbar a:hover{
   background-color: var(--light-bg);
}

.side-bar .navbar a:hover i{
   margin-right: 2.5rem;
}

.side-bar.active{
   left: -31rem;
}

.quick-select .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(27.5rem, 1fr));
   gap: 1.5rem;
   align-items: flex-start;
   /* justify-content: center; */
}

.quick-select .box-container .box{
   border-radius: .5rem;
   background-color: var(--white);
   padding: 2rem;
}

label.checkbox{
    font-size: 14pt;
    padding-left: 10px;
 }

.quick-select .box-container .box .title{
   font-size: 2rem;
   color: var(--black);
}

.quick-select .box-container .box p{
   line-height: 1.5;
   padding-top: 1.5rem;
   color: var(--light-color);
   font-size: 1.7rem;
}

.quick-select .box-container .box p span{
   color: var(--main-color);
}

.quick-select .box-container .tutor{
   text-align: center;
}

.quick-select .box-container .tutor p{
   padding-bottom: 1rem;
}

.quick-select .box-container .box .flex{
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   padding-top: 2rem;
}

.quick-select .box-container .box .flex .red{
    background-color: var(--oragen);
    color: white !important;
}

.red:hover{
    background-color: var(--red) !important;
}

.quick-select .box-container .box .flex a{
   padding: 1rem 1.5rem;
   border-radius: .5rem;
   font-size: 1.6rem;
   background-color: var(--light-bg);
}

.quick-select .box-container .box .flex a i{
   margin-right: 1rem;
   color: var(--black);
}

.quick-select .box-container .box .flex a span{
   color: var(--light-color);
}

.quick-select .box-container .box .flex a:hover{
   background-color: var(--black);
}

.quick-select .box-container .box .flex a:hover i{
   color: var(--white);
}

.quick-select .box-container .box .flex a:hover span{
   color: var(--white)  ;
}

.courses .box-container{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 1.5rem;
   align-items: flex-start;
   /* justify-content: center; */
}

.courses .box-container .box{
   border-radius: .5rem;
   background-color: var(--white);
   padding: 2rem;
}

.courses .box-container .box .tutor{
   margin-bottom: 2rem;
   display: flex;
   align-items: center;
   gap: 2rem;
}

.courses .box-container .box .tutor img{
   width: 5rem;
   height: 5rem;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: .5rem;
}

.courses .box-container .box .tutor h3{
   font-size: 2rem;
   color: var(--black);
   margin-bottom: .2rem;
}

.courses .box-container .box .tutor span{
   font-size: 1.5rem;
   color: var(--light-color);
}

.courses .box-container .box .thumb{
   width: 100%;
   border-radius: .5rem;
   height: 20rem;
   object-fit: contain;
   margin-bottom: .3rem;
}

.courses .box-container .box .title{
   font-size: 2rem;
   color: var(--black);
   margin-top: .5rem;
   padding: .5rem 0;
}

.courses .more-btn{
   margin-top: 2rem;
   text-align: center;
}

section.about{
    /* max-width: 1300px;  */
    margin: 0 auto;
}

section.reviews{
    /* max-width: 1300px;  */
    margin: 0 auto;
}

.about .row{
   display: flex;
   align-items: center;
   gap: 1.5rem;
   flex-wrap: wrap;
   padding: 30px 10px;
}

.about .row .image{
   flex: 1 1 10rem;
}

.about .row .image img{
   width: 70%;
   margin-left: 20%;
   /* height: 50rem; */
}

.about .row .content{
   flex: 1 1 40rem;
   text-align: justify;
}

.about .row .content h3{
   font-size: 2.5rem;
   color: var(--black);
}

.about .row .content p{
   line-height: 2;
   font-size: 1.7rem;
   color: var(--light-color);
   /* padding: 1rem 0; */
}

.about .box-container{
   margin-top: 3rem;
   display: flex;
   gap: 1.5rem;
   flex-wrap: wrap;
}

.about .box-container .box{
   flex: 1 1 25rem;
   display: flex;
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
   align-items: center;
   gap: 2rem;
}

.about .box-container .box i{
   font-size: 3rem;
   color: var(--black);
}

.about .box-container .box h3{
   color: var(--main-color);
   font-size: 2.5rem;
   margin-bottom: .2rem;
}

.about .box-container .box span{
   font-size: 1.6rem;
   color: var(--light-color);
}

.reviews .box-container{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 1.5rem;
   align-items: flex-start;
   justify-content: center;
}

.reviews .box-container .box{
   border-radius: .5rem;
   padding: 2rem;
   background-color: var(--white);
   padding-top: 1.5rem;
}

.reviews .box-container .box p{
   line-height: 1.5;
   font-size: 1.7rem;
   color: var(--light-color);
   text-align: justify;
}

.reviews .box-container .box .user{
   display: flex;
   align-items: center;
   gap: 1.5rem;
   margin-top: 1.5rem;
}

.reviews .box-container .box .user img{
   height: 5rem;
   width: 5rem;
   border-radius: 50%;
   object-fit: cover;
}

.reviews .box-container .box .user h3{
   font-size: 2rem;
   color: var(--black);
   margin-bottom: .2rem;
}

.reviews .box-container .box .user .stars i{
   color: var(--main-color);
   font-size: 1.5rem;
}

.save-list button{
   font-size: 2rem;
   border-radius: .5rem;
   background-color: var(--light-bg);
   padding: 1.2rem 2.5rem;
   cursor: pointer;
   margin-bottom: 2rem;
}

.save-list button i{
   color: var(--black);
   margin-right: 1rem;
}

.save-list button span{
   color: var(--light-color);
}

.save-list button:hover{
   background-color: var(--black);
}

.save-list button:hover i{
   color: var(--white);
}

.save-list button:hover span{
   color: var(--white);
}

.thumb{
   position: relative;
   height: 30rem;
}

.thumb span{
   position: absolute;
   top: 1rem; left: 1rem;
   border-radius: .5rem;
   padding: .5rem 1.5rem;
   font-size: 2rem;
   color: #fff;
   background-color: rgba(0,0,0,.3);
}

.thumb img{
   /* width: 100%; */
   height: 100%; 
   border-radius: .5rem;
   object-fit: contain;
}

.tutor{
   display: flex;
   align-items: center;
   gap: 1.7rem;
}

.tutor img{
   height: 7rem;
   width: 7rem;
   border-radius: 50%;
   object-fit: cover;
}

.tutor h3{
   font-size: 2rem;
   color: var(--black);
   margin-bottom: .2rem;
}

.tutor span{
   color: var(--main-color);
   font-size: 1.5rem;
}

.details{
   padding-top: 1.5rem;
}

.details h3{
   font-size: 2rem;
   color: var(--black);
}

.details p{
   padding: 1rem 0;
   line-height: 1.5;
   color: var(--light-color);
   font-size: 1.7rem;
}

.details .date{
   font-size: 1.7rem; 
   padding-top: .5rem;
}

.details .date i{
   color: var(--main-color);
   margin-right: 1rem;
}

.details .date span{
   color: var(--light-color);
}

.videos-container .box-container{
   display: grid;
   grid-template-columns: 1fr 1fr; /*repeat(auto-fit, 55rem); */
   gap: 1.5rem;
   align-items: flex-start;
   /* justify-content: center; */
}

.videos-container .book{
    grid-template-columns: 1fr 1fr 1fr 1fr; 
 }

.videos-container .box-container .box{
   position: relative;
   border-radius: .5rem;
   padding: 2rem;
   background-color: var(--white);
}

.videos-container .box-container .box img{
   /* height: 20rem; */
   width: 100%;
   border-radius: .5rem;
   object-fit: contain;
}

.videos-container .box-container .box i{
   position: absolute;
   top: 0rem; left: 1.15rem; right: 1.15rem;
   margin-top: 0px;
   height: 100%;
   background-color: rgba(0,0,0,.3);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 4rem;
   color: #fff;
   border-radius: .5rem;
   display: none;
}

.videos-container .box-container .box:hover i{
   display: flex;
}

.videos-container .box-container .box h3{
   font-size: 2rem;
   color: var(--black);
   margin-top: 1rem;
}

.videos-container .box-container .box:hover h3{
   color: var(--main-color);
}

.watch-video .video-details{
   background-color: var(--white);
   padding: 2rem;
   border-radius: .5rem;
}

.watch-video .video-details .video{
   width: 100%;
   border-radius: .5rem;
   background: #000;
   height: 50rem;
}

.watch-video .video-details .title{
   font-size: 2rem;
   color: var(--black);
   padding: 1.5rem 0;
}

.watch-video .video-details .info{
   display: flex;
   gap: 2rem;
   padding-bottom: 1.5rem;
   border-bottom: var(--border);
}

.watch-video .video-details .info p{
   font-size: 1.7rem;
}

.watch-video .video-details .info p i{
   margin-right: 1rem;
   color: var(--main-color);
}

.watch-video .video-details .info p span{
   color: var(--light-color);
}

.watch-video .video-details .tutor{
   padding: 1rem 0;
   display: flex;
   align-items: center;
   gap: 2rem;
   /* padding-bottom: 0px; */
}

.watch-video .video-details .tutor img{
   height: 7rem;
   width: 7rem;
   border-radius: 50%;
   object-fit: cover;
}

h3{
   font-size: 2rem;
   color: var(--light-color);
   margin-bottom: .2rem;
}

.watch-video .video-details .tutor span{
   color: var(--light-color);
   font-size: 1.5rem;
}

.watch-video .video-details .flex{
   display: flex;
   align-items: center;
   gap: 1.5rem;
   justify-content: space-between;
}

.watch-video .video-details .flex a{
   margin-top: 0;
}

.watch-video .video-details .flex button{
   background-color: var(--light-bg);
   cursor: pointer;
   padding: 1rem 2.5rem;
   font-size: 2rem;
   border-radius: .5rem;
   margin-left: auto; 
   margin-right: 0;
}

.watch-video .video-details .flex button i{
   color: var(--black);
   margin-right: 1rem;
}

.watch-video .video-details .flex button span{
   color: var(--light-color);
}

.watch-video .video-details .flex button:hover{
   background-color: var(--black);
}

.watch-video .video-details .flex button:hover i{
   color: var(--white);
}

.watch-video .video-details .flex button:hover span{
   color: var(--white);
}

.watch-video .video-details .description{
   padding-top: 1rem;
}

p{
   line-height: 1.5;
   font-size: 1.7rem;
   color: var(--light-color);
   white-space: pre-line;
}

.comments .add-comment{
   background-color: var(--white);
   border-radius: .5rem;
   margin-bottom: 3rem;
   padding: 2rem;
}

.comments .add-comment textarea{
   border-radius: .5rem;
   padding: 1.4rem;
   width: 100%;
   height: 20rem;
   background-color: var(--light-bg);
   resize: none;
   font-size: 1.8rem;
   color: var(--black);
}

.comments .show-comments{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
   display: grid;
   gap: 2.5rem;
}

.comments .show-comments .user{
   display: flex;
   align-items: center;
   gap: 1.5rem;
   margin-bottom: 2rem;
}

.comments .show-comments .user img{
   height: 5rem;
   width: 5rem;
   border-radius: 50%;
   object-fit: cover;
}

.comments .show-comments .user h3{
   font-size: 2rem;
   color: var(--black);
   margin-bottom: .2rem;
}

.comments .show-comments .user span{
   color: var(--light-color);
   font-size: 1.5rem;
}

.comments .show-comments .content{
   margin-bottom: 2rem;
}

.comments .show-comments .content p{
   font-size: 2rem;
   color: var(--black);
   padding: 0 1rem;
   display: inline-block;
}

.comments .show-comments .content span{
   font-size: 1.7rem;
   color: var(--light-color);
}

.comments .show-comments .content a{
   color: var(--main-color);
   font-size: 1.8rem;
}

.comments .show-comments .content a:hover{
   text-decoration: underline;
}

.comments .show-comments .text{
   border-radius: .5rem;
   background-color: var(--light-bg);
   padding: 1rem 1.5rem;
   color: var(--black);
   margin: .5rem 0;
   position: relative;
   z-index: 0;
   white-space: pre-line;
   font-size: 1.8rem;
}

.comments .show-comments .text::before{
   content: '';
   position: absolute;
   top: -1rem; left: 1.5rem;
   height: 1.2rem;
   width: 2rem;
   background-color: var(--light-bg);
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 
}

.edit-comment form{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
}

.edit-comment form .box{
   width: 100%;
   border-radius: .5rem;
   padding: 1.4rem;
   font-size: 1.7rem;
   color: var(--black);
   background-color: var(--light-bg);
   resize: none;
   height: 20rem;
}

.edit-comment form .flex{
   display: flex;
   gap: 1.5rem;
   justify-content: space-between;
   margin-top: .5rem;
}

.teachers .search-tutor{
   margin-bottom: 3rem;
   display: flex;
   align-items: center;
   gap: 1.5rem;
   padding: 1.5rem 2rem;
   background-color: var(--white);
   border-radius: .5rem;
}

.teachers .search-tutor input{
   width: 100%;
   font-size: 1.8rem;
   color: var(--black);
   background: none;
}

.teachers .search-tutor button{
   font-size: 2rem;
   cursor: pointer;
   color: var(--black);
   background: none;
}

.teachers .search-tutor button:hover{
   color: var(--main-color);
}

.teachers .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 35rem);
   gap: 1.5rem;
   align-items: flex-start;
   justify-content: center;
}

.teachers .box-container .box{
   border-radius: .5rem;
   padding: 2rem;
   background-color: var(--white);
}

.teachers .box-container .box .tutor{
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
   gap: 1.5rem;
}

.teachers .box-container .box .tutor img{
   height: 5rem;
   width: 5rem;
   object-fit: cover;
   border-radius: 50%;
}

.teachers .box-container .box .tutor h3{
   color: var(--black);
   font-size: 2rem;
   margin-bottom: .2rem;
}

.teachers .box-container .box .tutor span{
   color: var(--main-color);
   font-size: 1.5rem;
}

.teachers .box-container .box p{
   padding-top: 1rem;
   font-size: 1.7rem;
   color: var(--light-color);
}

.teachers .box-container .box p span{
   color: var(--main-color);
}

.teachers .box-container .offer{
   text-align: center;
}

.teachers .box-container .offer h3{
   font-size: 2rem;
   color: var(--black);
}

.teachers .box-container .offer p{
   line-height: 2;
   padding-bottom: .5rem;
}

.tutor-profile .details{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
   text-align: center;
}

.tutor-profile .details .tutor{
   margin-bottom: 2rem;
}

.tutor-profile .details .tutor img{
   height: 10rem;
   width: 10rem;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: .5rem;
}

.tutor-profile .details .tutor h3{
   font-size: 2rem;
   color: var(--black);
   margin: .5rem 0;
}

.tutor-profile .details .tutor span{
   font-size: 1.5rem;
   color: var(--light-color);
}

.tutor-profile .details .flex{
   display: flex;
   gap: 1.5rem;
   align-items: center;
   flex-wrap: wrap;
}

.tutor-profile .details .flex p{
   flex: 1 1 25rem;
   border-radius: .5rem;
   background-color: var(--light-bg);
   padding: 1rem 3rem;
   font-size: 2rem;
   color: var(--light-color);
}

.tutor-profile .details .flex p span{
   color: var(--main-color);
}

.contact .row{
   display: flex;
   align-items: center;
   gap: 1.5rem;
   flex-wrap: wrap;
}

.contact .row .image{
   flex: 1 1 50rem;
}

.contact .row .image img{
   height: 50rem;
   width: 100%;
}

.contact .row form{
   flex:1 1 30rem;
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
   text-align: center;
}

.contact .row form h3{
   font-size: 2.5rem;
   margin-bottom: 1rem;
   color: var(--black);
}

.contact .row form .box{
   width: 100%;
   margin: 1rem 0;
   border-radius: .5rem;
   background-color: var(--light-bg);
   padding: 1.4rem;
   color: var(--black);
   font-size: 1.7rem;
}

.contact .row form textarea{
   height: 20rem;
   resize: none;
}

.contact .box-container{
   margin-top: 3rem;
   display: flex;
   align-items: flex-start;
   gap: 1.5rem;
   flex-wrap: wrap;
}

.contact .box-container .box{
   flex: 1 1 30rem;
   border-radius: .5rem;
   background-color: var(--white);
   padding: 2rem;
   text-align: center;
}

.contact .box-container .box i{
   font-size: 3rem;
   color: var(--main-color);
   margin-bottom: 1rem;
}

.contact .box-container .box h3{
   margin: 1.5rem 0;
   font-size: 2rem;
   color: var(--black);
}

.contact .box-container .box a{
   display: block;
   font-size: 1.7rem;
   color: var(--light-color);
   line-height: 1.5;
   margin-top: .5rem;
}

.contact .box-container .box a:hover{
   text-decoration: underline;
   color: var(--main-color);
}

.profile .details{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
}

.profile .details .user{
   text-align: center;
   margin-bottom: 2rem;
}

.profile .details .user img{
   height: 10rem;
   width: 10rem;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: .5rem;
}

.profile .details .user h3{
   font-size: 2rem;
   margin: .5rem 0;
   color: var(--black);
}

.profile .details .user p{
   font-size: 1.7rem;
   color: var(--light-color);
}

.profile .details .box-container{
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   gap: 1.5rem;
}

.profile .details .box-container .box{
   background-color: var(--light-bg);
   border-radius: .5rem;
   padding: 2rem;
   flex: 1 1 30rem;
}

.profile .details .box-container .box .flex{
   display: flex;
   align-items: center;
   gap: 1.7rem;
   margin-bottom: 1rem;
}

.profile .details .box-container .box .flex i{
   height: 4.5rem;
   width: 4.5rem;
   border-radius: .5rem;
   background-color: var(--black);
   line-height: 4.4rem;
   font-size: 2rem;
   color: var(--white);
   text-align: center;
}

.profile .details .box-container .box .flex h3{
   font-size: 2rem;
   color: var(--main-color);
   margin-bottom: .2rem;
}

.profile .details .box-container .box .flex span{
   font-size: 1.5rem;
   color: var(--light-color);
}

.form-container{
   display: flex;
   align-items: center;
   justify-content: center;
   min-height:80vh;
}

form{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 1rem;
}

.form-container .login{
   width: 50rem;
}

.form-container .register{
   width: 80rem;
}

form h3{
   text-align: center;
   font-size: 2.5rem;
   margin-bottom: 1rem;
   color: var(--black);
   text-transform: capitalize;
}

form p{
   padding-top: 1rem;
   font-size: 1.7rem;
   color: var(--light-color);
}

form p span{
   color: var(--red);
}

.form-container .link{
   text-align: center;
   font-size: 2rem;
}

.form-container .link a{
   color: var(--main-color);
}

.form-container .link a:hover{
   color: var(--black);
   text-decoration: underline;
}

form .box{
   width: 100%;
   border-radius: .5rem;
   margin: 1rem 0;
   font-size: 1.7rem;
   color: var(--black);
   padding: 1.4rem;
   background-color: var(--light-bg);
}

.form-container .flex{
   display: flex;
   gap: 2rem;
}

.form-container .flex .col{
   flex: 1 1 25rem;
}

.liked-videos .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 35rem);
   gap: 1.5rem;
   align-items: flex-start;
   justify-content: center;
   text-overflow: hidden;
}

.liked-videos .box-container .box{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
   overflow-x: hidden;
}

.liked-videos .box-container .box .tutor{
   margin-bottom:2rem;
   display: flex;
   align-items: center;
   gap: 1.5rem;
}

.liked-videos .box-container .box .tutor img{
   height: 5rem;
   width: 5rem;
   border-radius: 50%;
   object-fit: cover;
}

.liked-videos .box-container .box .tutor h3{
   font-size: 1.8rem;
   color: var(--black);
   margin-bottom: .2rem;
}

.liked-videos .box-container .box .tutor span{
   font-size: 1.5rem;
   color: var(--light-color);
}

.liked-videos .box-container .box .thumb{
   width: 100%;
   height: 20rem;
   object-fit: cover;
   border-radius: .5rem;
   margin-bottom: 1rem;
}

.liked-videos .box-container .box .title{
   font-size: 2rem;
   color: var(--black);
   padding: .5rem 0;
   text-overflow: ellipsis;
   overflow-x: hidden;
}


.posts-container .box-container{
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr)); */
    gap:1.5rem;
    align-items: flex-start;
    justify-content: center;
 }
 
 .posts-container .box-container .box{
    border:var(--border);
    box-shadow: var(--box-shadow);
    border-radius: .5rem;
    background-color: var(--white);
    padding:2rem;
    overflow: hidden;
 }
 
 .posts-container .box-container .box .post-admin{
    display: flex;
    align-items: center;
    gap:1.5rem;
    margin-bottom: 2rem;
 }
 
 .posts-container .box-container .box .post-admin i{
    text-align: center;
    height: 4.5rem;
    width: 5rem;
    line-height: 4.2rem;
    font-size: 2rem;
    border:var(--border);
    border-radius: .5rem;
    background-color: var(--light-bg);
    color:var(--black);
 }
 
 .posts-container .box-container .box .post-admin a{
    font-size: 2rem;
    color:var(--main-color);
 }
 
 .posts-container .box-container .box .post-admin a:hover{
    color:var(--black);
 }
 
 .posts-container .box-container .box .post-admin div{
    font-size: 1.5rem;
    margin-top: .2rem;
    color:var(--light-color);
 }
 
 .posts-container .box-container .box .post-image{
    width: 100%;
    border-radius: .5rem;
    margin-bottom: 2rem;
 }
 
 .posts-container .box-container .box .post-title{
    font-size: 2rem;
    color:var(--black);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 1rem;
 }
 
 .posts-container .box-container .box .post-content{
    font-size: 2rem;
    line-height: 1.5;
    padding:.5rem 0;
    color:var(--light-color);
    white-space: pre-line;
 }
 
 .posts-container .box-container .box .post-content::after{
    content: '...';
 }
 
 .posts-container .box-container .box .post-cat{
    display: block;
    margin-top: 2rem;
    font-size: 1.7rem;
 }
 
 .posts-container .box-container .box .post-cat i{
    margin-right: .5rem;
    color:var(--light-color);
 }
 
 .posts-container .box-container .box .post-cat{
    color:var(--main-color);
 }
 
 .posts-container .box-container .box .post-cat:hover{
    color:var(--black);
 }
 
 .posts-container .box-container .box .icons{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:1rem;
    background-color: var(--light-bg);
    border-radius: .5rem;
    padding:1.5rem 2rem;
    border:var(--border);
    margin-top: 2rem;
 }
 
 .posts-container .box-container .box .icons button{
    cursor: pointer;
 }
 
 .posts-container .box-container .box .icons i{
    margin-right:.5rem;
    font-size:2rem;
    color:var(--light-color);
 }
 
 .posts-container .box-container .box .icons span{
    font-size: 2rem;
    color:var(--main-color);
 }
 
 .posts-container .box-container .box .icons *:hover{
    color:var(--black);
 }
 
 .comments-container .comment-title{
    background-color: var(--black);
    color:var(--white);
    padding:1.5rem;
    font-size: 2rem;
    border-radius: .5rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
 }
 
 .comments-container .add-comment{
    border:var(--border);
    margin-bottom: 2rem;
    box-shadow: var(--box-shadow);
    border-radius: .5rem;
    padding:2rem;
    background-color: var(--white);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
 }
 
 .comments-container .add-comment p{
    font-size: 2rem;
    color:var(--light-color);
    margin-bottom: 1rem;
 }
 
 .comments-container .add-comment p i{
    margin-right:1rem;
 }
 
 .comments-container .add-comment p a{
    color:var(--main-color);
 }
 
 .comments-container .add-comment p a:hover{
    text-decoration: underline;
    color:var(--black);
 }
 
 .comments-container .add-comment textarea{
    width: 100%;
    border-radius: .5rem;
    background-color: var(--light-bg);
    padding:1.5rem 2rem;
    margin:1rem 0;
    border: var(--border);
    font-size: 2rem;
    color:var(--black);
    height: 15rem;
    resize:none;
 }
 
 .comments-container .user-comments-container{
    display: grid;
    gap:2.5rem;
    border:var(--border);
    box-shadow: var(--box-shadow);
    border-radius: .5rem;
    padding:2rem;
    background-color: var(--white);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
 }
 
 .comments-container .user-comments-container .show-comments .post-title{
    margin-bottom: 1rem;
    font-size: 2rem;
    color:var(--light-color);
 }
 
 .comments-container .user-comments-container .show-comments .post-title span{
    color:var(--black);
    line-height: 1.5;
 }
 
 .comments-container .user-comments-container .show-comments .post-title a{
    color:var(--main-color);
 }
 
 .comments-container .user-comments-container .show-comments .post-title a:hover{
    text-decoration: underline;
 }
 
 .comments-container .user-comments-container .show-comments .comment-user{
    display: flex;
    align-items: center;
    gap:1rem;
    margin-bottom: 1.5rem;
 }
 
 .comments-container .user-comments-container .show-comments .comment-user i{
    text-align: center;
    height: 5rem;
    width: 5rem;
    line-height: 4.7rem;
    font-size: 2rem;
    border:var(--border);
    border-radius: .5rem;
    background-color: var(--light-bg);
    color:var(--black);
 }
 
 .comments-container .user-comments-container .show-comments .comment-user span{
    font-size: 2rem;
    color:var(--main-color);
 }
 
 .comments-container .user-comments-container .show-comments .comment-user div{
    font-size: 1.5rem;
    margin-top: .2rem;
    color:var(--light-color);
 }
 
 .comments-container .user-comments-container .show-comments .comment-text{
    line-height: 1.5;
    font-size: 1.7rem;
    color:var(--light-color);
 }
 
 .comments-container .user-comments-container .show-comments .comment-box{
    border-radius: .5rem;
    background-color: var(--light-bg);
    padding:1.5rem 2rem;
    font-size: 2rem;
    color:var(--black);
    width: 100%;
    white-space: pre-line;
    line-height: 1.5;
    border: var(--border);
 }
 
 .comments-container .user-comments-container .show-comments textarea{
    resize: none;
    border:var(--border);
 }
 
 .comment-edit-form{
    padding-bottom: 0;
 }
 
 .comment-edit-form p{
    background-color: var(--black);
    color:var(--white);
    padding:1.5rem;
    font-size: 2rem;
    border-radius: .5rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
 }
 
 .comment-edit-form form{
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
    border:var(--border);
    padding:2rem;
    background-color: var(--white);
    box-shadow: var(--box-shadow);
 }
 
 .comment-edit-form form textarea{
    font-size: 2rem;
    color:var(--black);
    line-height: 1.5;
    height: 15rem;
    width: 100%;
    resize: none;
    background-color: var(--light-bg);
    border:var(--border);
    border-radius: .5rem;
    padding:1.5rem;
    margin-bottom: .5rem;
 }
 
 .authors .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
    gap:1.5rem;
    align-items: flex-start;
    justify-content: center;
 }
 
 .authors .box-container .box{
    border:var(--border);
    border-radius: .5rem;
    background-color: var(--light-bg);
    padding:2rem;
    background-color: var(--white);
    box-shadow: var(--box-shadow);
 }
 
 .authors .box-container .box p{
    padding-bottom: 1rem;
    font-size: 2rem;
    color:var(--light-color);
 }
 
 .authors .box-container .box p span{
    color:var(--main-color);
 }
 
 .categories .box-container{
    border:var(--border);
    border-radius: .5rem;
    background-color: var(--light-bg);
    padding:1rem 2rem;
    background-color: var(--white);
    box-shadow: var(--box-shadow);
 }
 
 .categories .box-container .box{
    padding:1rem 0;
    font-size: 2rem;
 }
 
 .categories .box-container .box span{
    color:var(--light-color);
    display: inline-block;
    padding:.7rem 1rem;
    border:var(--border);
    background-color: var(--light-bg);
    border-radius: .5rem;
    text-align: center;
 }
 
 .categories .box-container .box a{
    margin-left: 1.2rem;
    color:var(--black);
 }
 
 .categories .box-container .box a:hover{
    color:var(--main-color);
    text-decoration: underline;
 }
 
 
/* Ẩn tiêu đề video và các video liên quan */
.plyr__video-embed iframe {
    pointer-events: auto;
}

/* Container holding sidebar and main content */
.container {
  display: flex; /* Enables flexbox layout */
  /* height: 100vh;  */
  width: 100%; /* Full width */
  /* margin-left: 5%; */
}

/* Sidebar styles */
.sidebar {
  width: 30%;
  background-color: var(--white);
  color: white;
  height: 100%;
  padding-bottom: 50px;
  overflow-y: auto;
  transition: width 0.3s ease;
  margin-top: 10px;
  max-height: 90vh;
}

.sidebar.collapsed {
  width: 30px;
}

.sidebar .toggle-btn {
  text-align: right;
  padding: 10px;
  cursor: pointer;
  background-color: var(--main-color);
}

.sidebar .video-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar .video-list li {
  padding: 15px 15px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--light-color);
}

.sidebar .video-list li:hover {
  color: var(--white);
  background-color: var(--oragen);
}

.sidebar .video-list .active {
    background-color: var(--oragen);
    color: var(--white);
}

/* Main content styles */
.main-content {
  flex: 1;
  padding: 20px;
  background-color: var(--light-color);
}
/* Main content styles */
.watch-video {
  flex: 1; /* Take up the remaining width */
  padding: 10px;
  overflow-y: auto; 
}

/* Collapse sidebar on small screens */
@media only screen and (max-width: 600px) {
    .sidebar {
        width: 30px; 
    }

    .sidebar.collapsed {
        width: 250px;
        position: absolute;
        right: 0;
    }

    .sidebar .video-list {
        display: none; 
    }

    .sidebar .toggle-btn {
        font-size: 12px; 
        margin-left: auto; 
        margin-right: 0;
    }

    .audio-player.sticky {
        width: 100%;
        left: 0;
    }

    .header .flex {
        padding: 1.25rem 1.5rem;
    }
    .side-bar {
        transition: .2s linear;
        left: -40rem;
    }

    section {
        margin-left: 0px;
        max-width: 99%;
    }

    .second-col {
      left: 20px;
   }
   
   .third-col {
      left: 100px;
   }

   .courses .box-container{
      grid-template-columns: 1fr;
   }

   .reviews .box-container{
        grid-template-columns: 1fr;
    }
}

.modal-header {
    display: block;
}


.rating-container {
    transform: scale(0.55); 
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row-reverse;
	padding: 2em 2em 2em 5em;
	gap: 10px;
	border-top-right-radius: 75px;
	border-bottom-right-radius: 75px;
	border: none;
	position: relative;
	background: #2b2b2b;
	box-shadow: 0 1px 1px hsl(0deg 0% 0%/0.075), 0 2px 2px hsl(0deg 0% 0%/0.075),
		0 4px 4px hsl(0deg 0% 0%/0.075), 0 8px 8px hsl(0deg 0% 0%/0.075),
		0 16px 16px hsl(0deg 0% 0%/0.075);
	.rating-value {
		position: absolute;
		top: -10px;
		left: -69px;
		border-radius: 50%;
		height: 120px;
		width: 120px;
		background: #ffbb00;
		box-shadow: 0 1px 1px hsl(0deg 0% 0%/0.075), 0 2px 2px hsl(0deg 0% 0%/0.075),
			0 4px 4px hsl(0deg 0% 0%/0.075), 0 8px 8px hsl(0deg 0% 0%/0.075),
			0 16px 16px hsl(0deg 0% 0%/0.075), inset 0 0 10px #f7db5e, 0 0 10px #f7db5e;
		&:before {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			text-align: center;
			line-height: 120px;
			font-size: 4em;
			color: #2b2b2b;
			content: "0";
			transform-origin: "center center";
			transition: all 0.25s ease 0s;
		}
		&:after {
			content: "";
			position: absolute;
			height: 120px;
			width: 120px;
			top: -1px;
			left: -1px;
			
			margin: auto;
			border: 1px solid #ffbb00;
			border-radius: 50%;
			transition: all 0.4s ease-in;
		}
	}
	input {
		display: none;
	}
	label {
		height: 50px;
		width: 50px;
		transform-origin: "center center";
		svg {
			transition: transform 0.4s ease-in-out;
			opacity: 0.5;
		}
		&:hover {
			svg {
				transform: scale(1.25) rotate(10deg);
			}
		}
	}
}

.rating-container input:checked ~ label svg {
	opacity: 1;
	transform: scale(1.25) rotate(10deg);
}

.rating-container label:hover {
	svg,
	~ label svg {
		opacity: 1;
		transform: scale(1.25) rotate(10deg);
        cursor: pointer;
	}
}

.rating-container input:checked {
	+ label:hover svg {
		opacity: 1;
	}

	~ label:hover {
		svg,
		~ label svg {
			opacity: 1;
		}
	}
}

.rating-container label:hover ~ input:checked ~ label svg {
	opacity: 1;
}

.rating-container #rate1:checked ~ .rating-value:before {
	content: "1";
	font-size: 4.5em;
}

.rating-container label[for="rate1"]:hover ~ .rating-value:before {
	content: "1" !important;
	font-size: 4.5em !important;
}

.rating-container #rate2:checked ~ .rating-value:before {
	content: "2";
	font-size: 4.5em;
}

.rating-container label[for="rate2"]:hover ~ .rating-value:before {
	content: "2" !important;
	font-size: 4em !important;
}

.rating-container #rate3:checked ~ .rating-value:before {
	content: "3";
	font-size: 4.5em;
}

.rating-container label[for="rate3"]:hover ~ .rating-value:before {
	content: "3" !important;
	font-size: 4em !important;
}

.rating-container #rate4:checked ~ .rating-value:before {
	content: "4";
	font-size: 4.5em;
}

.rating-container label[for="rate4"]:hover ~ .rating-value:before {
	content: "4" !important;
	font-size: 4em !important;
}

.rating-container #rate5:checked ~ .rating-value:before {
	content: "5";
	font-size: 4.5em;
}

@keyframes pulse {
	0% {
		height: 138px;
		width: 138px;
		top: -1px;
		left: -1px;
		opacity: 1;
	}
	100% {
		height: 170px;
		width: 170px;
		top: -16px;
		left: -16px;
		opacity: 0;
	}
}

.rating-container #rate5:checked ~ .rating-value:after {
	animation: pulse 0.4s ease-out 1;
}

.rating-container label[for="rate5"]:hover ~ .rating-value:before {
	content: "5" !important;
	font-size: 4em !important;
}

/* Nút Calendar ở góc dưới bên phải */
#calendarButton {
    position: fixed;
    bottom: 130px;
    right: 0px;
    z-index: 9999; /* Nổi lên trên các phần tử khác */
    border-radius: 8px;
}

/* Nút Donate ở góc dưới bên phải */
#donateButton {
    position: fixed;
    bottom: 20px;
    right: 0px;
    z-index: 9999; /* Nổi lên trên các phần tử khác */
    border-radius: 8px;
}

/* Nút Donate ở góc dưới bên phải */
#zaloButton {
    position: fixed;
    bottom: 70px;
    right: 0px;
    z-index: 9999; /* Nổi lên trên các phần tử khác */
    border-radius: 8px;
}

#content p {
   color: var(--black);
}

body.dark #content p {
    color: var(--white);
}

.audio-player {
    position: relative;
    width: 100%;
    z-index: 999;
}

.audio-player audio {
    width: 100%;
    /* Đảm bảo phần tử audio co giãn */
    height: auto;
    display: block;
    /* Loại bỏ khoảng trắng không mong muốn */
}

/* Điều chỉnh thêm khi sử dụng Plyr */
.plyr {
    max-width: 100%;
    /* Đảm bảo không vượt quá kích thước màn hình */
    width: 100%;
    height: auto;
}

.audio-player.sticky {
    position: fixed;
    bottom: 0;
    left: 10%;
    width: 80%;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    /* Đảm bảo nổi trên tất cả các phần tử khác */
    padding: 20px 10px 10px 20px;
}
.custom-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    background: #f7f7f7;
    /* border-top: 1px solid #ddd; */
    display: none;
}

.custom-controls button {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 3px 10px;
    cursor: pointer;
    font-size: 12px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 5px;
}

.custom-controls .hide-button{
   position: absolute;
   top: 10px;
   right: 10px;
}

.custom-controls.show{
    display: flex;
}

.custom-controls button:hover {
    background: #f0f0f0;
    border-color: #999;
}

.custom-controls .fa {
    font-size: 16px;
}

.btn-next{
    width: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: var(--red);
}

.audio {
    list-style: none;
    padding: 0;
    margin-top: 10px;
    border-top: 1px solid #ddd;
    border: 1px dashed #000;
    overflow-y: auto; 
    max-height: 40vh;
    margin-bottom: 20px;
    z-index: 999;
}

.audio li {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
    background: #f9f9f9;
    transition: background 0.2s ease-in-out;
    font-size: 11pt;
}

.audio li:hover {
    background: #f0f0f0;
}

.audio li.active {
    background: #d8eefa;
    font-weight: bold;
    color: red;
}

.audio li.active::before {
    content: '\f04b'; /* Icon đang phát (sử dụng FontAwesome hoặc mã Unicode khác) */
    font-family: FontAwesome;
    margin-left: 5px; /* Cách xa một chút với tên bài hát */
    margin-right: 5px;
}

.audio li.active::after {
    content: '(đang phát)'; /* Icon đang phát (sử dụng FontAwesome hoặc mã Unicode khác) */
    margin-left: 5px; 
}

/* Cuộn đẹp mắt (optional) */
.audio::-webkit-scrollbar {
    width: 8px;
}

.audio::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.audio::-webkit-scrollbar-thumb:hover {
    background: #999;
}




.footer{
   position: fixed;
   bottom: 0; right: 0; left: 0;
   background-color: var(--white);
   border-top: var(--border);
   padding: 1rem 1rem;
   text-align: center;
   color: var(--black);
   font-size: 1.5rem;
   margin-top: 1rem;
   z-index: 1000;
   /* padding-bottom: 9.5rem; */
}

.footer span{
   color: var(--main-color);
}

/* media queries  */

@media (max-width:1200px){

   body{
      padding-left: 0;
   }

   .side-bar{
      transition: .2s linear;
      left: -40rem;
   }

   .side-bar.active{
      left: 0;
      box-shadow: 0 0 0 100vw rgba(0,0,0,.7);
   }

   .side-bar .close-side-bar{
      display: block;
   }

   section {
        margin-left: 0px;
        max-width: 99%;
    }

    .courses .box-container{
      grid-template-columns: 1fr 1fr;
   }

   .reviews .box-container{
        grid-template-columns: 1fr;
    }

    section.about{
        max-width: 100%;
        margin: 10px 20px;
    }

    .about .row {
        padding: 10px;
    }

    section.reviews{
        max-width: 100%;
        margin: 10px 15px;
    }

}

@media (max-width:991px){
   
   html{
      font-size: 55%;
   }

}

@media (max-width:768px){

   #search-btn{
      display: inline-block;
   }

   .header .flex .search-form{
      position: absolute;
      top:99%; left: 0; right: 0;
      width: auto;
      border-top: var(--border);     
      border-bottom: var(--border);
      background-color: var(--white);
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
      transition: .2s linear;
   }

   .header .flex .search-form.active{
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   }

   .form-container .flex{
      display: flex;
      gap: 0;
      flex-flow: column;
   }

   .watch-video .video-details .video{
      height: 30rem;
   }

   .videos-container .box-container {
      grid-template-columns: 2fr;
   }

   .videos-container .book {
        grid-template-columns: 2fr;
   }

   #calendarButton{
        position: fixed;
        bottom: 135px;
        right: 0px;
        z-index: 9999; /* Nổi lên trên các phần tử khác */
        border-radius: 8px;
    }

   /* Nút Donate ở góc dưới bên phải */
   #donateButton {
      position: fixed;
      bottom: 10px;
      right: 0px;
      z-index: 9999; /* Nổi lên trên các phần tử khác */
      border-radius: 8px;
   }

   .container{
      margin-left: 0px !important;
      margin-right: 0px !important;
      padding-right: 0px !important;
      padding-left: 0px !important;
   }

   .navbar {
        max-height: 50vh;
        overflow-y: auto;
        padding: 0.5rem;
    }

    .navbar a {
        display: flex;
        align-items: center;
        padding: 10px;
    }

    .navbar span {
        margin-left: 2px;
    }

}

@media (max-width:450px){
   
   html{
      font-size: 50%;
   }

   .flex-btn{
      flex-flow: column;
      gap: 0;
   }

   .about .row .image img{
      height: auto;
   }

   .playlist .row .col .thumb{
      height: 20rem;
   }

   .contact .row .image img{
      height: auto;
   }

   .courses .box-container{
      grid-template-columns: 1fr;
   }

   .videos-container .box-container{
      grid-template-columns: 1fr;
   }

   .videos-container .book {
    grid-template-columns: 2fr;
  }

   .teachers .box-container{
      grid-template-columns: 1fr;
   }

   .watch-video .video-details .video{
      height: auto;
      margin: 20px auto;
   }

}


.warning-row {
   background-color: #fff3cd !important;
   border-left: 4px solid #ffc107;
}
.warning-row td {
   color: #856404;
}
.stopped-row {
   background-color: #f8d7da !important;
   border-left: 4px solid #dc3545;
}
.stopped-row td {
   color: #721c24;
}
.stopped-cell {
   background-color: #e9ecef !important;
   color: #6c757d !important;
}

/* Style the tab */
.tab {
   overflow: hidden;
   /* background-color: var(--light); */
}

/* Style the buttons that are used to open the tab content */
.tab button {
   float: left;
   border: none;
   outline: none;
   cursor: pointer;
   padding: 14px 16px;
   transition: 0.3s;
   font-size: 1.5rem;
   margin-right: 3px;
   background-color: var(--light);
   margin-bottom: 5px;
}

.tab button:hover {
   background-color: #ddd;
}

.tab button.active {
   background-color: var(--black);
}

/* Style the tab content */
.tabcontent {
   display: none;
   padding: 6px;
   border-top: none;
}
.tabcontent.active {
   display: block;
}

#sub-calendar {
   width: 80%;
   background-color: var(--light);
   max-height: 750px;
   padding: 20px;
   background: #ffffff;
   border-radius: 10px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   color: #000;
   margin-left: auto;
   margin-right: auto;
}
.fc-list-day-text {
   font-weight: bold;
   font-size: 1.25rem;
   color: #333;
}
.fc-list-day-side-text {
   font-size: 1rem;
   color: #777;
}
.fc-list-event-title a {
   font-weight: bold;
   font-size: 1.125rem;
}
.fc-list-event-time {
   font-weight: normal;
}
.fc-toolbar {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
}
.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr {
   margin-bottom: 1.5em;
}
.fc-toolbar-chunk:first-child {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}
.fc-toolbar-chunk:nth-child(2) {
   display: flex;
   align-items: center;
   gap: 1rem;
}
.fc-toolbar-chunk:last-child {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}
.fc-toolbar-title {
   font-size: 1.5rem !important;
   font-weight: bold;
}
.fc-button {
   background-color: transparent !important;
   border: 1px solid #ccc !important;
   color: black !important;
   box-shadow: none !important;
   text-transform: none !important;
   font-size: 14px !important;
   padding: 8px 12px !important;
}
.fc-button-primary:hover {
   background-color: #f0f0f0 !important;
}
.fc-button-active {
   background-color: #e0e0e0 !important;
}
.fc-icon {
   font-size: 1.25rem;
}
.fc-button-group > .fc-button:first-child:not(:last-child) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
}
.fc-button-group > .fc-button:last-child:not(:first-child) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
}

.fc-day-other .fc-daygrid-day-top {
   opacity: 0.5;
}
.fc-daygrid-day-number {
   font-weight: 600;
}
.s-blue-event {
   background-color: #3f88c5 !important;
   border-color: #3f88c5 !important;
}
.s-purple-event {
   background-color: #8c52ff !important;
   border-color: #8c52ff !important;
}
.s-red-event {
   background-color: #d12e2e !important;
   border-color: #d12e2e !important;
}
.s-green-event {
   background-color: #5cb85c !important;
   border-color: #5cb85c !important;
}
.s-black-event {
   background-color: black !important;
   border-color: white !important;
}

.s-black-event > .fc-event-main > .fc-event-main-frame > .fc-event-title-container > .fc-event-title {
   color: white !important;
}

.fc-daygrid-event {
   white-space: normal; 
}
.fc-event-title, .fc-list-event-title {
   font-size: 1.4rem;
   color: var(--white);
}

.fc-scrollgrid-sync-table {   height: 100px !important; }



@media only screen and (max-width: 768px) {
   #sub-calendar {
       width: 100%;
       min-height: 1200px;
   }
   .fc-daygrid-event {
       white-space: normal; 
   }
   .fc-event-title, .fc-list-event-title {
       font-size: 1.1rem;
   }
   .lesson-container {
       flex-direction: row;
   }
   .lessons-list {
       width: 33.333%;
   }
}

/* Container chính */
.lesson-container {
   display: flex;
   width: 100%;
   margin: 0 auto;
   background-color: var(--white);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   margin-bottom: 30px;
}

/* Sidebar bên trái */
.lesson-sidebar {
   width: 320px;
   background-color: var(--white);
   border-right: 1px solid #e3e6f0;
   overflow-y: auto;
   transition: transform 0.3s ease;
   padding: 10px;
}

.lesson-sidebar h2 {
   padding: 25px 20px;
   background-color: var(--white);
   margin: 0;
   font-size: 1.4em;
   font-weight: 600;
   color: #4a90e2;
   border-bottom: 1px solid #e3e6f0;
}

/* Danh sách bài học */
.lesson-list {
   list-style: none;
   padding: 20px 0;
}

.lesson-item {
   display: flex;
   align-items: center;
   padding: 12px 30px;
   cursor: pointer;
   transition: all 0.2s ease;
   color: #4a90e2;
   font-weight: 500;
   position: relative;
   color: var(--white);
}

.lesson-item:hover {
   background-color: #e8f0ff;
   color: #2c5aa0;
}

.lesson-item.active {
   background-color: var(--main-color);
   color: var(--light);
}

.lesson-number {
   display: none; /* Ẩn số thứ tự tròn */
}

.lesson-title {
   font-weight: 500;
   font-size: 0.95em;
   line-height: 1.4;
}

/* Nội dung bên phải */
.content {
   flex: 1;
   padding: 40px;
   overflow-y: auto;
   background-color: var(--white);
}

/* Welcome message */
.welcome-message {
   text-align: center;
   padding: 80px 20px;
   color: #6c757d;
}

.welcome-message h1 {
    color: var(--black);
   margin-bottom: 20px;
   font-size: 2.2em;
   font-weight: 300;
}

.welcome-message p {
   font-size: 1.1em;
   color: #6c757d;
}

/* Lesson content */
.lesson-content h1 {
    color: var(--black);
   margin-bottom: 30px;
   font-size: 2.2em;
   font-weight: 600;
   border-bottom: none;
   padding-bottom: 0;
}

.lesson-content h3 {
   margin: 25px 0 15px 0;
   font-size: 1.3em;
   font-weight: 600;
}

.lesson-content p {
   margin-bottom: 18px;
   font-size: 1.05em;
   color: #495057;
   line-height: 1.7;
}

.lesson-content ul {
   margin-bottom: 20px;
   padding-left: 25px;
}

.lesson-content li {
   margin-bottom: 8px;
   line-height: 1.6;
}

.lesson-content b {
   font-weight: 600;
}

.lesson-content code {
   background-color: #f8f9fa;
   color: #e83e8c;
   padding: 3px 8px;
   border-radius: 4px;
   font-family: 'Courier New', monospace;
   font-size: 0.9em;
   border: 1px solid #dee2e6;
}

/* Code example styling */
.code-example {
   background-color: #f8f9fa;
   border: 1px solid #dee2e6;
   border-radius: 8px;
   margin: 25px 0;
   overflow-x: auto;
}

.code-example pre {
   padding: 20px;
   margin: 0;
   font-family: 'Courier New', monospace;
   font-size: 0.9em;
   line-height: 1.5;
   color: #495057;
}

/* Responsive Design */
@media (max-width: 768px) {
   .lesson-container {
       flex-direction: column;
       margin-bottom: 200px;
   }
   
   .lesson-sidebar {
       width: 100%;
       position: fixed;
       top: 0;
       left: 0;
       z-index: 1000;
       transform: translateX(-100%);
       height: 100vh;
       transition: transform 0.3s ease;
       background-color: #f8f9ff;
   }
   
   .lesson-sidebar.open {
       transform: translateX(0);
   }
   
   .content {
       padding: 10px;
       margin-top: 0;
   }
   
   .menu-toggle {
       margin-left: auto;
       margin-right: 5px;
       margin-top: 5px;
       width: 50px;
       z-index: 1001;
       background-color: var(--main-color);
       color: white;
       border: none;
       padding: 12px 16px;
       border-radius: 6px;
       cursor: pointer;
       font-size: 14px;
       font-weight: 500;
       display: none;
       box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
   }
   
   .overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.4);
       z-index: 999;
       display: none;
   }
   
   .overlay.active {
       display: block;
   }
}

@media (max-width: 768px) {
   .menu-toggle {
       display: block;
   }
   
   .lesson-content h1 {
       font-size: 1.8em;
       margin-top: 10px;
   }
   
   .content {
       padding: 10px;
   }
   
   .lesson-item {
       padding: 15px 25px;
   }
   
   .lesson-title {
       font-size: 0.9em;
   }
   
   .lesson-sidebar h2 {
       padding: 20px;
       font-size: 1.2em;
   }
}

@media (max-width: 480px) {
   .content {
       padding: 10px;
   }
   
   .lesson-content h1 {
       font-size: 1.6em;
   }
   
   .lesson-sidebar {
       width: 280px;
   }
   
   .lesson-item {
       padding: 12px 20px;
   }
}

/* Animations */
.lesson-content {
   animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
   from {
       opacity: 0;
       transform: translateY(15px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}

/* Scrollbar styling */
.lesson-sidebar::-webkit-scrollbar {
   width: 6px;
}

.lesson-sidebar::-webkit-scrollbar-track {
   background: #f1f1f1;
}

.lesson-sidebar::-webkit-scrollbar-thumb {
   background: #c1c1c1;
   border-radius: 3px;
}

.lesson-sidebar::-webkit-scrollbar-thumb:hover {
   background: #a8a8a8;
}

.content::-webkit-scrollbar {
   width: 8px;
}

.content::-webkit-scrollbar-track {
   background: #f1f1f1;
}

.content::-webkit-scrollbar-thumb {
   background: #c1c1c1;
   border-radius: 4px;
}

.content::-webkit-scrollbar-thumb:hover {
   background: #a8a8a8;
}

.error-icon, .empty-icon{
    font-size: 30pt;
}

.lesson-item.active > .normal {
    color: var(--white) !important;
}

.empty-state > h2,
.empty-state > p {
    color: var(--black) !important;
}