body {    
    font-size:16px;
    line-height: 1.15;
    color: black;
}
.container, #wrapper, #page {
    max-width: 1910px;
    margin: 0px auto;
}

#page {
   background: #f8f8f8;  
   flex-basis: 100%; 
   margin-top: 5rem;  
   padding: 4px 8px;
   box-sizing: border-box;
}
.d-flex {
    display: flex;
    flex-wrap: wrap;
}

.d-flex2 {
    display: flex;
    width: 100%;
}
.justify-content-between {
/*    justify-content: space-between;    */
    justify-content: space-evenly
}
.align-items-center {
    align-items: center;
}

h1{
/*  font-size:20px;
    margin-bottom: 10px;*/
    font-size:1.7rem;
    margin-bottom: 0.625rem;
}

#heading {
    text-align: center;
    color:blue;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.5rem;
    margin: 15px 5px 16px;
}
#sub-heading {
    text-align: center;
    color:blue;
    font-weight: 300;
    font-size: 1.4rem;
    line-height: 1.4rem;
    margin: 12px 4px 14px;
}

#sub-sub-heading {
    text-align: center;
    color:black;
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.2rem;
    margin: 10px 3px 10px;
}


h2 {
/*    font-size:18px; 
    margin-bottom: 7px;*/
     font-size:1.125rem;
     margin-bottom: 0.4375rem;
}
p {
/*    font-size:16px; 
    margin-bottom: 5px; */
   font-size:1rem;
   margin-bottom: 0.3125rem;    
}
table thead tr td {
  font-weight: bold;
}

table tr td {
  border: 1px solid #c5c5c5;
  padding: 5px 10px;  
}
#wrapper {
    max-width: 460px;
    margin: 0px auto;   
} 

#headline {
   text-align: center;
   color: red;
   font-size: 40px;
   font-weight: 400;
}

#headline:hover {
   color: #007bff;  
   font-weight: 500;
   cursor: pointer;
}
/*======header=====*/
#header {
 text-align: center;
 position: relative;
 background: none;
 height: 18.4px;
}
#header-1 {
 text-align: center;
 /*position: relative;*/
 position: fixed;
 top: 0px;
 background: none;
 height: 18.4px;
}
#header-2 {
 text-align: center;
 position: relative;
/* position: fixed;
 top: 0px;*/
 margin-top: 2rem;
 background: none;
 height: 18.4px;
}

nav {
    background: #087bc7;
    position: fixed;
    width: 100%;
}


#navbar-brand {
  color:#ffffff;
  font-size: 20px;
}
#navbar-brand #logo {
    /*---5rem----*/
/*   max-height: 25px;*/
   max-height: 3.5rem;
/*   position: absolute;*/
   width: auto;
/*   left:2px;
   top: -2px;*/
}
#logo:hover{
   background: white;
   position: relative;
   top:30px;
   left:20px;
   transform: scale(1.5);
}

ul#main-menu {
    display: flex; 
    list-style: none;
    padding: 10px 0px;
    margin-bottom: 0px;
}

ul#main-menu li{
    position: relative;
}

ul#main-menu a{
    /*color: #d9d9d9;*/
    color: #f4f4f4;
    display: block;
    padding: 10px;
    text-decoration: none;
    transition: all 0.25s ease-in-out;
}



ul#main-menu>li:hover>a{
/*    background: white;*/
    /*color: #ffffff;*/
    color: #32f77f;
    font-weight: 400;
}
/*--------------------*/
/*style sub menu*/
ul#main-menu ul.sub-menu{
  position: absolute;
  left: 2px;
  top: 40px; 
  color: red;
  width:10rem;
  background: #333;
  list-style: none;
  padding: 15px 10px;
  display: none;
}

ul#main-menu li:hover ul.sub-menu{  
  display: block;  
}

ul#main-menu ul.sub-menu a{
  padding: 5px 10px;
  text-align: left;
}
ul#main-menu ul.sub-menu li:hover a{
/*    background: white;*/
    color: #ef8f9c;
    font-weight: 400;
}
/*----------------*/

#coin{
  background: #ffa500;
  font-weight: bold;
  color: #ffffff;
  border-radius: 19px;
  padding: 5px 10px;
}
#coin::after {
  font-family:'FontAwesome';
  font-weight: 900;
/*  content:"\f007";
    content:"\f175";*/
  content:"\f51e" ;
  position: relative;
  right:-5px;
  color:yellow;
}

#coin:hover {     
     background: #ff4550;
}
/*#coin-symbol::after {
  font-family:'FontAwesome';
  font-weight: 900;
  content:"\f007";
    content:"\f175";
  content:"\f51e" ;
  position: relative;
  right:3px;
  color:yellow;   
}*/

/*----------------------*/
.login {
/*  background: #ffa500;*/
  font-weight: bold;
  color: #ffffff;
/*  border-radius: 19px;*/
/*  padding: 5px 15px;*/
}

.login-user, .login-log-user{
/*  background: #ffa500;*/
  font-weight: bold;
  color: lightsalmon;
/*  border-radius: 19px;*/
/*  padding: 5px 15px;*/
}

.login::after {
  font-family:'FontAwesome';
  font-weight: bold;
  content:"\f007";
/*    content:"\f175";*/
/*  content:"\f51e" ;*/
  position: relative;
  right:-5px;
  color:white;
}

.login-user::after,.login-log-user::after {
  font-family:'FontAwesome';
  
  font-weight: bold;
  content:"\f007";
/*    content:"\f175";*/
/*  content:"\f51e" ;*/
  position: relative;
  right:-5px;
  color:#7CFC00;
}



login-log-user::after {
  font-family: 'FontAwesome';
  font-weight: bold;
  color: yellow;
  content: "\f007";
  /* content:"\f175"; */
  /* content:"\f51e" ; */
  position: relative;
  right: -5px;
  color: #7CFC00;
}

a .login:hover,a .login-user:hover ,.login-user::after:hover  {     
    /*color: #ffa500;*/
    color: #1e90ff;
    background: palegoldenrod;
}

.username-banner {
    color:#e2e0d3;
    font-weight: 400;
}

.username-banner:hover {
    color:yellow;  
}

#navbar-toggle{
    font-size:24px;
    color: #fff;
    display:none;
    
/*    padding-right: 5px;*/
}
#navbar-toggle:hover{
   color: lightcoral;
   /*background: #b6effb;*/
   cursor: pointer;
}

ul#responsive-menu{
    position: absolute;
    text-align: left;
    padding-left:5px;
    padding-bottom: 20px;
    list-style: none;
    background-color: #c4c4e2;
    left:0px;
    width: 40%;
    top: 1.8rem; 
    display:none;
    z-index: 100; /* Higher z-index to ensure it stands in front */
}

ul#responsive-menu li{
    position: relative; 
}
   
ul#responsive-menu a {
    color: black;
/*    color: #d9d9d9;*/
    /*color: #5d4343;*/
    display: block;
    padding: 4px 5px;
    list-style: circle;
    text-decoration: none;   
/*    transition: all 0.25s ease-in-out;*/
}

ul#responsive-menu ul.sub-menu {  
    position: absolute;
    left: 110px;
    top: 0px; 
    color: red;
    background: lightgray;
    padding: 5px 10px;
    width:120%;
    display: none;
}

ul#responsive-menu li:hover ul.sub-menu {
    display: block;
}

ul#responsive-menu>li:hover>a{
 color:#ffffff;
 font-weight: 400;
}

/*style sub menu of responsive menu*/


ul#responsive-menu ul.sub-menu li:hover a{
 /*color:#ffffff;*/
 color:	#1e90ff;
}

 ul#main-menu li a.active, ul#responsive-menu li a.active {
    color: black; /* Change the style as needed */
    /*font-weight: 800;  Change the style as needed */
    background: lightgoldenrodyellow;
  }
nav div a.login.active {
    color: red; /* Change the style as needed */
    font-weight: 600; 
    /*background: lightgoldenrodyellow;*/
  }  
  .body-blue {
   /*blue*/
   background: #029ef3;  
  }  
/*====end of header======*/
#footer {
  /*  background: #029ef3; */
  /*background: #adc6d5;*/
  background: #d7e5ee;
/*  position: fixed;
  bottom: 0px;
  width: 100%;*/
/*  height: 50px;*/
  text-align: center; 
  padding: 0.2rem 0px;
  
}
/*=============preview file csss===================*/
.preview-menu {
  display:flex; 
  justify-content: center;  
  width: 900px;  
/*   word-wrap: break-word;*/
}
.sub-preview-menu { 
  flex-wrap: wrap;
  text-align: left;  
}
.preview-content {
  color:blue;    
  word-wrap: break-word;
}

/*============Login form==============*/

#page #previous-page, #previous-page2 {
   text-align: center;   
}
#previous-page a, #previous-page2 a{
   
    margin-bottom: 20px;
    font-size:140%;  
    background:lemonchiffon ;
    color:chocolate;    
    padding: 5px 10px;  
    text-decoration: none;     
}
#previous-page2 a {
    color:pink;
}
#previous-page2 {
 margin-top: 20px;   
}

#previous-page:hover a,#previous-page2:hover a{
    /*color:firebrick;*/ 
   color:black; 
   font-weight: 500;
   cursor: pointer;
}

.login-form {
    align-items:center;
    display:flex;
    flex-direction:column;
    grid-area:auto;
    justify-content:flex-start;
    line-height:19.2px;
    padding:0px 10px;
    text-align:center;
}

.form {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background-color: #f2f2f2;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    width:370px;
}
input[type="text"],
input[type="password"] {
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    float: left;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
/*     color:#666;*/
}
.editForm label input[type="text"] {
    display: inline-block;
    float: revert;
}


.show-password {
    display: inline-block;
    cursor: pointer;
}

button[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 30px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #45a049;
}

#link-align {
  display:flex; 
   justify-content: center;
   align-items: center;
   font-size:24px;
/*   background: salmon;*/
}
u {
    color: #e90d0d;
    text-decoration: none;  /* Remove default underline */
    border-bottom: 1px solid red; /* Add a red bottom border instead */
}

#link {
    color: blue;
    font-size:22px;
    text-align: center;
    align-items: center;
    margin-top: 10px;   
}
#link1 {
    color: red;
    font-size:22px;
    text-align: center;
    align-items: center;
    margin-top: 10px;
    padding:10px 5px;
}
#link2 {
    color: black;
    font-size:22px;
    text-align: center;
    align-items: center;
    margin-top: 10px;
    padding:10px 5px; 
}
#link3 {
    color: yellow;
    font-size:22px;
    text-align: center;
    align-items: center;
    margin-top: 10px;
    padding:10px 5px; 
}
#link:hover {
    color: red;
    cursor: pointer;
}
#link1:hover {
    color: #4CAF50;
    cursor: pointer;
}
#link2:hover {
    color: #660606;
    background: #ddd;
    cursor: pointer;
}
#link3:hover {
    color: #660606;
    background: #ddd;
    cursor: pointer;
}

.link {
    text-align: center;
    margin-top: 10px;
}

.link-log {   
    text-align: center;
    margin-top: 10px;
    background: lemonchiffon;
    font-size: 20px;
    border: 1px solid #ccc;
    padding:7px 10px;
}
.link-log a{
 color: chocolate;

}
.link-log a:hover ,.link2-log a:hover{
    color: red;
    cursor: pointer;
}
/*==================file tải lên========================*/
/* file name */
/*view file test + google link*/ 

.link-line {
    display: inline-block;
    margin-left: 10px;
    font-size: 0.9em;
    vertical-align: middle;
    margin: 5px; /* Adjust the margin as needed */
    margin-left:20px;
    width: 120px;
/*    background:#dcd9e7;*/
    padding-left:16px;       /* <-- “a bit indent” */
    border: 1px solid #c5c5c5;
    cursor: pointer;
}

.link-line:nth-of-type(2) {
   margin-left:15px; 
}
/*==============================*/

.file-view {
   display: flex;
   justify-content: center;
   align-items: center;  
 
}
.file-view iframe {    
    width:600px; 
    height:500px;
/*    position: relative;*/
  /* Disable text selection */
     -webkit-user-select: none; /* Safari */
     -moz-user-select: none; /* Firefox */
     -ms-user-select: none; /* IE10+/Edge */
     user-select: none; /* Standard */
     /* Disable context menu */
      pointer-events: none;
   
}
.file-view {  
   overflow: auto;
   max-height: 500px; /* Set maximum height to enable scrolling */
}

.file-upload {
   display: flex;
   justify-content: center;
   align-items: center;    
}
.file-menu {
  width:70%;  
  align-items:center;
    display:flex;
    flex-direction:column;
    grid-area:auto;
    justify-content:flex-start;
    line-height:19.2px;
    padding:0px 10px;
    text-align:center; 
}


.upload {
text-align: center; 
font-size:20px; 
color:crimson; 
background:aliceblue; 
cursor: pointer; /* Pointer/hand icon */  
}
.upload:hover {
 color:#058416;   
}
.upload-title {
 text-align: left; 
 font-size:18px; 
 color:darkblue; 
 margin:5px 0px; 
}
.file-form {
    display:flex;
    flex-wrap: wrap;
    font-size:20px;
    width: 600px;
    margin: 0 auto;
    padding: 20px;
    align-items: center;
    align-content: center;
    background: #fffbe0;
    border: 1px solid #ccc;
    border-radius: 8px;
}
.file-name, .file-coin, .file-des {
    /*position: relative;*/
    display:flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    margin-bottom: 15px;
}

.file-name label,
.file-coin label,
.file-des label
{
    font-size:18px;
    text-align: left;
    flex-basis: 30%;
    font-weight: bold;
    margin-right: 5px;  
}


.file-name input[type="file"] {
   flex-basis: 50%;
    /*color: #b40464;*/ 
    color:blue;
      border: none;
     cursor: pointer; /* Pointer/hand icon */   
}

.file-name input[type="text"],
.file-coin input[type="text"],
.file-des input[type="text"],
.form-floating select
{
    flex-basis: 50%;
    color: #b40464;
    border-color: #C0C0C0;
    /*border: none;*/
    padding: 4px; /* Adjust the padding as needed */   
    border-radius: 6px;
    margin: 0px 0px;
}
.file-button {
   display: flex;
   flex-wrap: wrap;
   flex-basis: 100%; 
   justify-content: center;
   align-content: center;
   align-items: center;   
}
.file-button input[type="submit"] { 
   font-size: 20px;
   color:blue;
   border: none;
    border-radius: 8px;
    cursor: pointer; /* Pointer/hand icon */
/*    font-weight: bold;*/
}

.file-button input[type="submit"]:hover {
  color:red; 
  
}

/*------------Hết file menu---------------*/
/*------------vocabulary wordbuild ---------------*/
   #vocabForm {
            max-width: 700px;
            margin: 0 auto; /* Center form on the page */
            text-align: center;
            background:lightgray;
        }

        #vocabList {
            width: 100%; /* Make textarea responsive */
            max-width: 100%; /* Prevent overflowing */
            min-width: 100%;
            box-sizing: border-box; /* Include padding and border in width */
            height: auto; /* Allow height to adapt */
        }

    
        #examplePattern {
            max-width: 600px;
            margin: 20px auto;
            padding: 15px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        #examplePattern h2 {
            margin-bottom: 10px;
            font-size: 18px;
            color: #333;
        }

        #examplePattern pre {
            background-color: #fff;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-family: monospace;
            overflow-x: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
         #myListResult {
            max-width: 700px;
            margin: 20px auto;
            padding: 15px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button {
        user-select: none; /* Disable text selection */
        }

        button[unselectable="on"] {
            -webkit-user-select: none; /* Chrome, Safari */
            -moz-user-select: none;    /* Firefox */
            -ms-user-select: none;     /* IE10+ */
            user-select: none;         /* Standard */
        }
        .editEntryBtn {
           color:#19b483; 
        }
        .deleteEntryBtn {
            color:red;
        }
        
        .vocaSubForm {
        display: flex; /* Use flexbox for alignment */
        align-items: center; /* Align items vertically */
        gap: 10px; /* Optional: Add space between items */
        flex-wrap: nowrap; /* Ensure all content stays on the same line */
        }
        #viewCardList {
        margin: 0 auto; /* Center form on the page */
        text-align: center;         
        }
        button.addEntryBtn {
         margin: 2px;   
        }
        
/*----------------------Form comment---------------------------*/
.form-comment-menu {
  display:flex;
    flex-wrap: wrap;
    font-size:20px;
    width: 700px;
    margin: 0 auto;
    padding: 20px;
    align-items: center;
    align-content: center;
    background: #fffbe0;
    border: 1px solid #ccc;
    border-radius: 8px;   
}
.form-comment {
    display:flex;
    flex-wrap: wrap;   
    justify-content: center;
    align-items: center;
    text-align: center;  
    align-content: center;
/*    flex-basis: 100%;*/
    margin-bottom: 15px;
}

.form-comment label {
    font-size:18px;
    text-align: center;   
/*    flex-basis: 100%;*/
    font-weight: bold;
    margin-right: 5px;  
}
.ckeditor, .ckeditor-editor {
width:100%;

}

/*.form-comment textarea {
   width:100%;   
   height:auto ;  
}*/
.form-comment input[type="submit"]{
  font-size: 20px;
   color:blue;  
/*    flex-basis: 100%;*/
   border: none;
    border-radius: 8px;
    cursor: pointer; /* Pointer/hand icon */  
}
/*--------------------Hết form comment------------------------*/
#file-list {
float: left;
text-align: left;
font-size: 18px; 
}



#file-name {  
  background-color:  #eee;/* Green background */
 /* border: 1px solid green;  Green border */
  color: #660606; /* red text */
  padding: 10px 24px;  
  cursor: pointer; /* Pointer/hand icon */
  font-size: 18px;
  transition-duration: 0.4s;
  display: inline-block; 
}

#file-name:hover {
  background-color: lightskyblue;
}

#file-des, #file-username, #file-date{
width: auto;
font-size: 17px;
border: none;
margin-top: 5px;
color:blue;
}
#file-des #file-des-inner, #file-username #file-username-inner, #file-date #file-date-inner {
    color: black;
    font-size: 17px;
}
/*==================link book tài liệu===============================*/
.book-link {
   display: flex;
   justify-content: center;
    /* Add other styles for the parent container if needed */
}
.sub-link{
    width: 60%; /* Set width of the parent container */  
    
}

.book-title{
    color:#9332d2;
    font-weight: bold; /* Make the text bold */ 
    margin:20px 0px;
    
}
.book-name {
    margin-bottom: 10px; /* Adjust margin between book names */
    margin-left: 10px;
    display: block; /* Ensure book-name is inline */
  /*  vertical-align: middle;  Align with book-coin */
}

.book-name a {
    color: #007bff; /* Set link color */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Make the text bold */
   /*  vertical-align: middle;  Align with book-coin */
}

.book-name a:hover {
    text-decoration: underline; /* Add underline on hover */
}

/* Optional: Adjust styles for visited links */
.book-name a:visited {
    color: #4CAF50; /* Set color for visited links */
}

.book-coin {
    display: inline-block; /* Ensure book-coin is inline */
    color:red;
    margin-left: 5px; /* Adjust margin to add space between book-name and book-coin */
  /*  vertical-align: middle;  Align with book-name */
/*    font-weight: bold;*/
}
/*=========username, fullname, email===========*/
.password-toggle  {
    position: relative;
    align-items: center;
    display: block;   
    color: black;
    text-align: left; 
    width: 95%;
}
.username, .fullname, .email {
    position: relative;
    align-items: center;
    display: block;   
    color: black;
    /*vertical-align: middle;  Vertically align the text in the middle */
    text-align: left;   
    width: 95%;
}

.box-email {
    position: relative;
    align-items: center;
    display: block;   
    color: black;
    /*vertical-align: middle;  Vertically align the text in the middle */
    text-align: center;   
    width: 95%;
}

.box-email name  {
    align-items: center;    
    font-weight: 600;  
}
.password-toggle input[type="password"],
.username input[type="text"],
.fullname input[type="text"],
.email input[type="text"]
{
    padding-right: 20px; 
    width: 75%;    
}

/*input#fullname{
   margin-left:35px;
}
input#password{
   margin-left:33px;
}
input#email{
   margin-left:58px;
}*/

.username label, .fullname label, .email label,
.password-toggle label { 
    width:25%;
    float: left;   
    margin-top: 20px;
    font-weight: 600;
}

.red {
  color: red;  
}
.blue {
  color: blue;  
}
.green {
  color: green;  
}
.password-toggle .toggle-icon {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

h1.dangnhap {
   color: #087bc7; 
}
/*==========================*/

#warning {
  margin: 10px 5px;
  color:red;
  text-align: center;  
  font-size: 20px;
  /*background: lightgoldenrodyellow;*/
  
}
#warning, #warning-2, #warning-3 {
  margin: 10px 5px;
  color:#b95c5c;
  text-align: center;  
  font-size: 20px;
  /*background: lightgoldenrodyellow;*/
  
}
#warning-2 {
  color:purple;  
  background: none;
}

/*============End of login form===================*/
/*=================== quiz==========================*/
/* Common styles for all screen sizes */
.set1 {
    display: flex;
    flex-wrap: wrap;
    margin-bottom:10px;
}

.sub-set1 {
    width: 100%; /* Takes full width initially */
    box-sizing: border-box;
    margin-bottom:10px;
}

.label-set1 {
    width:100%;
    text-align: center;
    color: #c64523;
    font-size: 24px;
}

.sub-label-set1 {
    width:100%;
    text-align: left;
    color: #9748b2;
    font-size: 20px;
    margin-left:5px;
    background:#ffa50045;
}

.sub-label-set1.b{
    background:#dfff004a;
}
.sub-label-set1.g{
    background:#da70d630;
}
.item-set,.item-set1,.item-set2,.item-set3,.item-set4,.item-set5,.item-set6  {
    flex: 1; /* Equal width for all items */
    margin: 5px; /* Adjust the margin as needed */
    width: 200px;
    flex-basis: calc(33.33% - 10px); /* 33.33% minus the margins on both sides */
    background:#dcd9e7;
    border: 1px solid #c5c5c5;
    cursor: pointer;
}
.item-set8, .item-set9, .item-set10, .item-set11   {
  flex: 1; /* Equal width for all items */
    margin-left: 20px; /* Adjust the margin as needed */
    width: 120px;
    flex-basis: calc(33.33% - 10px); /* 33.33% minus the margins on both sides */
/*    background:#dcd9e7;*/
    border: 1px solid #c5c5c5;
    cursor: pointer;   
}

.item-set8  {
    background:#dcd9e7;  
}
item-set9  {
    background:fixed;  
}
item-set10  {
    background:hotpink;  
}
item-set11  {
    background:springgreen;  
}

/*.item-set7  {
    flex: 1;  Equal width for all items 
    margin: 5px;  Adjust the margin as needed 
    width: 200px;
    flex-basis: calc(33.33% - 10px);  33.33% minus the margins on both sides 
    background:#dcd9e7;
    border: 1px solid #c5c5c5;
    cursor: pointer;
}*/

.item-set7 {
    width: 200px;
    flex: 0 0 auto; /* keep natural width */
    margin: 5px;
    background: #dad0b6;
    border: 1px solid #c5c5c5;
    cursor: pointer;
    flex-basis: 100%; /* forces break to next line */
}

.item-set.yellow {
  background: #00deff38;  
  color:black;
}
.item-set5 {
   background:#d9c0c0;  
}

.item-set6 {
   background:#dad7b2;  
}

.item-set7 {
   background:#dad0b6;  
}

.item-set8, .item-set9, .item-set10, .item-set11 {
   background:cyan;  
}

.item-set9, .item-set10, .item-set11 {
   background:beige;  
}
.item-set10, .item-set11 {
   background:darksalmon;  
}
.item-set4:hover,.item-set5:hover, .item-set6:hover,.item-set7:hover, .item-set8:hover {
   background:yellow;   
   color: red;
}
.item-set9:hover, .item-set10:hover, .item-set11:hover {
   background:cornsilk;   
   color: red;  
}

.item-set1::before{
    font-family:'FontAwesome';
    font-size:18px;
    content:"\f1c2" ;
    color: #5880a9;
    margin-right: 5px;
   }
.item-set2::before{
    font-family:'FontAwesome';
    font-size:18px;
    content:"\f1c1" ;
    color: darkred;
    margin-right: 5px;
   } 
 .item-set3::before{
    font-family:'FontAwesome';
    font-size:18px;
    content:"\f1c3" ;
    color: darkgreen;
    margin-right: 5px;
   }  
   .free-coin {
    /*lightgreen*/
    background:#cfeccf;  
   }

button[type="button"]:hover {
    background-color: #a9efb2;
}

/*=====================end quiz=============================*/
/*++++++++++++++++++++++++WordSpace title++++++++++++++++++++++++++++*/
.wordspace-title {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    color: lightcoral;
    background-color: #d2fad5;
    letter-spacing: 2px;
    margin-bottom: 30px;
    font-weight: 600;
}
/*--------------------User infor in users.php------------------------*/
/* Basic styling for user card */
.user-card {
    display:flex;
    flex-wrap: wrap;
    font-size:20px;
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background: #fffbe0;
    border: 1px solid #ccc;
    border-radius: 8px;
}

/* Style for user information sections */
.user-info-section {
    display:flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    margin-bottom: 15px;
}

.user-info-label {
    flex-basis: 30%;
    font-weight: bold;
    margin-right: 5px;
}

.user-info-value {
    flex-basis: 60%;
    color: #b40464;
}

/* Style for course links */
.course-links {
    list-style: none;
    padding: 0;
}

.course-links li {
    margin-bottom: 5px;
}

.course-links a {
    text-decoration: none;
    color: #007bff;
}

/*---------------------end userinfor-------------------*/
/* Basic styling for file card */
.file-card {
    display:flex;
    flex-wrap: wrap;
    font-size:17px;
    max-width: 400px;
    margin: 10px auto;
    padding: 20px;
    background: #fffbe0;
    border: 1px solid #ccc;
    border-radius: 8px;
}

/* Style for user information sections */
.file-info-section {
    display:flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    margin-bottom: 5px;
}

.file-info-label {
    flex-basis: 35%;
    font-weight: 300;
    margin-right: 5px;
}

.file-info-value {
    flex-basis: 60%;
    color: #b40464;
}
span .file-info-value:nth-child(1) {    
    color: #b40464;
}

span .file-info-value:nth-child(2) {    
    color: blue;
}

.form-title {
    text-align: center; 
    font-size:20px; 
    color:darkblue; 
    margin-bottom: 3px;
}
.form-file {
   text-align: center; 
}

.form-file input[type="submit"]{
  font-size: 20px;
   color:blue;  
/*    flex-basis: 100%;*/
   border: none;
    border-radius: 8px;
    cursor: pointer; /* Pointer/hand icon */  
}

.form-title input[type="submit"]:hover{ 
  color:red;  
}

/* Style for course links */
.file-links {
    display: flex;
    width: 100%;
    gap: 10px;
    padding: 0;  
/*    align-items: center;
    text-align: center;  
    align-content: center; */
    justify-content: center;
}
.file-download,.file-delete,.file-vipham {
    display: inline-block;  
    margin-bottom: 5px;
    list-style: none; 
    border: 1px solid #ccc;
}

.file-links button {  
    display: inline-block;  
    min-width: 75px;
    border: 1px solid #ccc;
    /*margin-right: 10px;*/ 
    /* Additional styles for buttons */
}
file-links button:hover {   
    background: grey;    
}

.file-links input[type="submit"] {  
    display: inline-block;  
    min-width: 75px;
    color:red;
    background:yellow;
     border: 1px solid #ccc;
    /*margin-right: 10px;*/ 
    /* Additional styles for buttons */
}

.file-links input[type="submit"]:hover { 
   background:#ff4550; 
   color:black;
}

.file-links button:nth-child(1) {
  background: #e68888;
}
.file-links button:nth-child(2) {
  background: #efc87f;
}
.file-links button:nth-child(3) {
  background: #9adc96;
}
 
/* Ensure the last button doesn't have unnecessary margin */
file-links button:last-child {   
    margin-right: 0;    
}

.file-links button:nth-child(1):hover {
  color:red;
  background:#d7e5ee;
}
.file-links button:nth-child(2):hover {
  color:red;
  background:white;
}
.file-links button:nth-child(3):hover {
  background: #32f77f;
  font-weight: 400;
  color:red;
}

.file-download a,.file-delete a {
    text-decoration: none;
    color: #007bff;
}
.file-vipham {
    margin-bottom: 5px;
    list-style: none;
}

.file-vipham a {
    text-decoration: none;
    color: #007bff;
}

/*---------------------end file card-------------------*/

/*----------------------coin page---------------------------*/
.coin-wrap{
  display: flex;  
  justify-content: center;
 
  text-align: center;
  align-items:center;
}
.sub-coin-wrap {
  text-align: center;
  align-items:center;
  justify-content: center;
  width:30%; 
}
.coin-heading { 
  font-size:25px; 
  width:100%;
  color:saddlebrown; 
  padding: 10px 10px; 
  background:wheat;
  margin: 10px 0px;  
}
.coin-heading2 {
    text-align: center;
    align-items:center;
    font-size:30px; 
    color:saddlebrown; 
    padding: 10px 10px; 
/*    background:palegreen;*/
    margin: 10px 0px;
}

/*.coin-heading2:hover { 
  background: #32f77f;
  font-weight: 400;
  color:red; 
}*/

.nap-coin {
  background: palegreen; 
   padding: 10px 10px; 
}
.nap-coin:hover {
  color:red;  
  background: #32f77f;
}

.coin-menu {
    display:flex;
    flex-wrap: wrap;
    font-size:20px;
    max-width: 450px;
    justify-content: center;
    align-content: center;
    margin: 0 auto;
    padding: 20px;
    background: #fffbe0;
    border: 1px solid #ccc;
    border-radius: 8px;
}
.sub-coin-menu {
   text-align: center; 
   font-size:21px; 
   color:darkred;
   background:#c6e4f1;
}
.coin-form {
    display:flex;
    flex-wrap: wrap;
    font-size:20px;
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    align-items: center;
    align-content: center;
    background: #fffbe0;
    border: 1px solid #ccc;
    border-radius: 8px;
}
.sub-coin {
    display:flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    margin-bottom: 15px;
}
.sub-coin label {
    font-size:18px;
    text-align: left;
    flex-basis: 35%;
    font-weight: bold;
    margin-right: 5px; 
}
.sub-coin input[type="text"] {
    flex-basis: 60%;
    
    color: #b40464;
    border-color: #C0C0C0;
    /*border: none;*/
    padding: 4px; /* Adjust the padding as needed */   
    border-radius: 6px;
    margin: 0px 0px;  
}
.submit-coin {
   display: flex;
   flex-wrap: wrap;
   flex-basis: 100%; 
   justify-content: center;
   align-content: center;
   align-items: center;  
}
.submit-coin input[type="submit"] { 
   font-size: 18px;
   color:darkred;
   background: salmon;
   border: none;
   /*border-radius: 6px;*/
   border: 1px solid #c5c5c5;
   cursor: pointer; /* Pointer/hand icon */
/*    font-weight: bold;*/
}
.submit-coin input[type="submit"]:hover { 
   color:red;
   background-color: #a9efb2;
}
/*--------------------------------------------------*/
.table-bank {
    display: flex;
    flex-wrap: wrap;
    /*width: fit-content;*/ 
    width: 60%; 
    margin: 0 auto; /* Center the table horizontally */
    border-collapse: collapse;
    justify-content: center;
    margin-top:20px;
    /*background: green;*/   
}
.sub-table-bank {
    width:100%;
   text-align: left;
   font-size:20px; 
    margin: 10px 0px;
}
.table-bank td {
    vertical-align: middle;
}
.sub-table-bank2 {
   width:100%;
   text-align: center; 
   font-size:30px; 
   margin: 10px 0px;
}


.notice-bank3 {
   text-align: center;
   font-size:22px; 
   color:black; 
   padding: 10px 10px; 
   background:skyblue ;
} 
.table-bank table img {
   width:150px;
   height:50px; 
}

.table-bank table .qr  {
   width:150px;
   height:200px; 
}

.table-bank th {
    
}

.table-notice {
    display: flex;
    flex-wrap: wrap;
    /*width: fit-content;*/ 
    width: 60%; 
    margin: 0 auto; /* Center the table horizontally */
    border-collapse: collapse;
    justify-content: center;
    text-align: center; 
    align-items:center;
    margin-top:20px;
    /*background: green;*/   
}
.sub-table-notice{
   font-size:20px;
   color: red;
   margin: 10px 0px;
   width: 100%;
}

.table-transact {
    display: flex;
    flex-wrap: wrap;
    /*width: fit-content;*/ 
    width: 60%; 
    margin: 0 auto; /* Center the table horizontally */
    border-collapse: collapse;
    justify-content: center;
    text-align: center; 
    align-items:center;
    margin-top:20px;
    /*background: green;*/   
}
.table-transact table  {   
    text-align: center;
    align-items:center;
}
.table-transact table th, table-transact table td {
    min-width: 100px;
    text-align: center;
    align-items:center;
    border: 1px solid #ccc;
}
.sub-table-transact{
   font-size:20px;
   color:cornflowerblue;
   margin: 10px 0px;
   width: 100%;
   text-align: center; 
}
.sub-table-transact2{
   font-size:18px;
   color:black;
   margin: 10px 0px;
   width: 100%;
   text-align: center; 
}
.sub-table-transact3{
   font-size:18px;
   color:cornflowerblue;
   margin: 10px 0px;
   width: 100%;
   text-align: center; 
}
/*  ---style pagging----phân trang */
.phantrang {
  width:100%;  
}
ul#pagging {float: right;}
ul#pagging li {
    float: left;
    padding: 0px 2px;
    margin-top: 2%;
}
ul#pagging li a {
    display:block; 
    padding:5px 6px;
    color: #333;
    border: 1px solid #e1d9e9;
}

ul#pagging li.active a {
 border: 1px solid #f00;
}
#num_rows {
    font-size: 100%;
    font-style: italic;
    margin-top: 1%;
    float:left;
}
#active {
    border: 1px solid blue; 
    color: red;
}
/*-----------------------------*/
/*--------------------end of coin page-----------------------*/
/* Ensure the container has enough room to display the file details */
.file-set {
    display: flex;
    flex-direction: column;
    max-width:99%;
    font-size:22px;    
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.label-file-set {
   background:lightcyan; 
   font-weight: bold;
   color: red;
}
.label-sub-file-set {
    background:#eaf0f4;  
    font-weight: bold;
    color: blue;
}
/* Ensure each file's information stays on the same line */
 .sub-file-set {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 5px;
}

/* Style the index, filename, and date */
 .file-index {
  flex-basis: 3%;  
}
.file-value {
  flex-basis: 35%;  
  flex-wrap: wrap;
}
 .file-date-label {
  flex-basis: 15%;   
}
 .file-date {
   flex-basis: 15%;   
}

 .file-index,
 .file-value,
.file-date-label,
.file-date {
    flex-shrink: 0;
    margin-right: 4px;
    white-space: nowrap;
    font-size:20px;
}

/* Ensure links and buttons are displayed properly */
.sub-file-link ul {
    display: flex;
    gap: 10px;
}

.file-links,
.file-link-download,
.file-purchase {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size:18px;
}

.file-links li,
 .file-link-download li,
.file-purchase li {
    display: inline-block;
}

/* Button-like appearance for links */
.file-links a,
.file-link-download a,
.file-purchase a {
    display: inline-block;
    padding: 6px 12px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.file-links a,
.file-link-download a,
.file-purchase a {
  min-width:100px;
}
.file-links a:hover,
 .file-link-download a:hover,
.file-purchase a:hover {
    background-color: #0056b3;
}
/*------------------------mark table------------------------------*/
.table-mark {    
    display: flex;
    flex-wrap: wrap;
    /*width: fit-content;*/ 
    width: 50%; 
    margin: 0 auto; /* Center the table horizontally */
    border-collapse: collapse;
    /*background: green;*/    
}
.table-mark th {
   color: black; 
   border: 1px solid #ccc;
}
.table-mark td {
   /*color: #e40576;*/
   color: blue;   
   border: 1px solid #ccc;
}

.table-mark th, .table-mark td {
   width:64px; 
   padding: 6px 4px;
   text-align: center;
}

.table-mark th.fullname-header {
   width:300px;
}

.table-mark tr td:nth-child(even) {
    background-color: #c4dfe4; /* Grey background for even rows */
}

.table-mark tr:nth-child(even) td {
    background-color: #abacb4; /* Grey background for even rows */
}

/* .table-mark > :nth-child(12n) {
        flex-basis: 100%;  Force the 11th element to take up the full width 
    }*/




/*---------------------------end of mark table-----------------------------*/
/*  ---style pagging----phân trang 1*/
.pagging {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px; /* Adjust margin as needed */
     margin-bottom: 10px; /* Adjust margin as needed */
}

.pagging div {
    margin: 0 5px; /* Adjust spacing between pagination links */
}

.pagging a {
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid #ccc;
    background-color: #f2f2f2;
    color: #333;
}

.pagging a.active {
    /*background-color: #333;*/
    /*color: #fff;*/
    border: 1px solid #f00;
}

.pagging a:hover {
    background-color: #ddd;
}

.num_rows {
    font-size: 100%;
    font-style: italic;
    margin-top: 1%;
    float:left;
}

/*-----------end of pagging-------------*/
/*  ---style pagination----phân trang 2*/
.pagination {
    text-align: center; /* Center the pagination links */
    margin-top: 15px; /* Add some space above the pagination */
}

.pagination a {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #333;
}

.pagination a:hover {
    background-color: #f0f0f0; /* Change background color on hover */
}

.pagination .active {
    background-color: #007bff; /* Highlight active page */
    color: #fff; /* Text color for active page */
}



/*----------------end of pagination------------------------*/
/* Container for the three columns */
.wp-content {
    display: flex;
    width: 100%;
}

/* Sidebar Left */
.sidebar1 {
    width: 20%;
    background-color: #f4f4f4; /* Optional: add background color */
    padding: 10px;
}
.sidebar1b {
    width: 15%;
    background-color: #f4f4f4; /* Optional: add background color */
    padding: 10px;
}

.sidebar1c {
    width: 15%;
    background-color: #f4f4f4; /* Optional: add background color */
    padding: 10px;
}
/* Main Content */
.m-content {
    width: 79%;
    padding: 10px;
}
/* Main Content */
.m-content1c {
    width: 75%;
    padding: 10px;
}

.m-content1d {
    width: 80%;
    padding: 10px;
}
/* Sidebar Right */
.sidebar2 {
    width: 20%;
    background-color: #f4f4f4; /* Optional: add background color */
    padding: 10px;
}

.sidebar2b {
    width: 10%;
    background-color: #f4f4f4; /* Optional: add background color */
    padding: 10px;
}

.sidebar2c {
    width: 15%;
    background-color: #f4f4f4; /* Optional: add background color */
    padding: 10px;
}
/*------------------------*/
#content {
    background: #f8f8f8;  
    flex-basis: 100%; 
    margin-top: 4rem;
}
#sidebar, #sidebar-left {
    background: lightgoldenrodyellow;
    color: crimson;   
    flex-basis: 100%;
}

#sidebar-left{
     margin-top: 50px;
}

#content, #sidebar, #sidebar-left {
     padding: 4px 8px;
     box-sizing: border-box;
}
/*==============================================*/
#content #file-viewer{
  flex-basis: 100%; 
}

#content #file-viewer #each-item{
  background: #ffffff;
  display: flex;
  flex-wrap: wrap;
  padding: 0 0 5px;
  margin-left: 0px;
  line-height: 24px;
  text-align:left;
  list-style: none;
  justify-content: space-evenly;
}

#content #file-viewer #each-item #doc{ 
flex-basis: 15%; 
background:#ffffff;
display: inline;

}
#doc #icon-doc {
  
    /*---5rem----*/
/*   max-height: 25px;*/
   max-height: 4rem;
/*   position: absolute;*/
   width: auto;
   text-align: right;
   
/*   left:2px;
   top: -2px;*/
}
#each-item #title{
flex-basis: 75%; 
text-align: left;
}
#title #name{
/*display: -webkit-box;*/
font-weight: 500;
font-size: 1rem;
line-height: 1.1rem;
margin: 0 0 5px;
}

#title{
/*display: -webkit-box;*/
font-weight: 500;
font-size: 1rem;
line-height: 1.1rem;
margin: 0 0 5px;
}

#title #caption{
/*display: -webkit-box;*/

font-weight: 500;
font-size: 1rem;
line-height: 1.2rem;
margin: 10px 0px 0px 5px;

}

#caption{
  display: flex;
  flex-wrap: wrap; 
  justify-content: space-evenly;  
}

#caption #author{
background:#ffa500;
display: inline;
}

#caption #view{
background:#ffa500;
display: inline;
}

#caption #download{
display: inline;
}
#title #name:hover, #caption #author:hover a,#caption #view:hover a,#caption #download:hover a {
 color: #007bff;   
}

/*=====================================*/
p {
    color: black;
}
p.highlight {
    background: aqua;
}

.box-1 {
     /*50% độ rộng thiết bị*/
/*    width: 50vw;*/
    width: 100%;
    background: lightgreen;
}
.box-2 {
    /*80% độ rộng thiết bị*/
/*    width: 80vw;  */
    width: 100%;
    background: lime;
}

/* ===============================Menu button============================================*/


   li.unimportant {
    display: none;
    }

/* ===============================The end of menu button=============================================*/
/*=================Banner image==============*/
.banner img {
  max-width: 100%;
  height: auto;  
}


/* ===============================Hide and show button=============================================*/
#hide {
 display: none;   
}
#show {
 display: inline-block;
}

/*====================Box not important==========================*/
.box {
    padding: 20px 4px;
    background: #ddb1b1;
    margin-bottom: 30px;
}
.box.box-not-important {
    background: gray;
}
.box-not-important {
    display: none;
}

#center-name {
    font-weight:bold;
    color:#f3b298;
    display: none;
    font-size:0.6rem;
}
/*===========================================*/


/* ===========The end of Hide and show button=========*/
.video-menu {
 display: inline-block;

}
.sub-video {
  font-size:20px;  
  margin: 5px 5px; 
  text-align: center;
  color:blue;
}
.video {
 margin-left: 10px; 
 margin-top: 10px;    
 margin-bottom: 10px;  
}


.video-clip {
   padding: 5px 10px;    
   margin:5px 5px;   
   border: 1px solid #c5c5c5;  
   background:lightgoldenrodyellow; 
   min-width:200px;
}
.video-title { 
 font-size:20px;
 color: blue;
}

a.video-title:hover {
 color:red;   
}

.video-frame {
/*   width:640px;
   height: 480px;*/
   width:150px;
   height:100px;
}

/* ===========The end of video=========*/
/* =========== left menu=========*/
.left-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size:19px;
    width: 200px;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    z-index: 1; /* Lower z-index */
}

.left-menu > li {
    position: relative;
}

.left-menu > li > a {
    display: block;
    padding: 8px;
    text-decoration: none;
    color: #000;
    border-bottom: 1px solid #ccc;
}

.left-menu > li > a:hover {
    background-color: #ddd;
}

.sub-left-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    left: 195px; /* Adjust as needed */
    top: 0;
    width: 200px;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
}

.sub-left-menu > li > a {
    display: block;
    padding: 8px;
    text-decoration: none;
    color: #000;
    border-bottom: 1px solid #ccc;
}

.sub-left-menu > li > a:hover {
    background-color: #ddd;
}
.sub-left-menu > li .count {
    float: right;
    background-color: #f3b162;
    color: #fff;
    padding: 2px 8px;
    font-weight: bold;
    border-radius: 12px;
}
/*------------skills---------------------*/

.click-left-menu-skills {
   background:#00deff38;
   text-align: center;
   font-weight: 600;
   color:#df5050;
}
.click-left-menu-skills:hover {
   color:#df5050;
}

.click-left-menu-skills .count {
    float: right;
    background-color: #f3b162;
    color: #fff;
    padding: 2px 8px;
    font-weight: bold;
    border-radius: 12px;
}

.sub-left-menu-skills {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    left: 0px; /* Adjust as needed */
/*    text-indent:30px;*/
    top: 40px;
/*    width: 200px;*/
    width:100%;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
}

/*.sub-left-menu-skills li > a:hover {
    background-color: violet;
}*/


/* Center-align text and justify the content of click-grade-skills */
.click-grade-skills {
    background-color: #e9e9e9;  /* Existing background color */
    text-align: center;         /* Center text horizontally */
    display: block;             /* Ensures the element behaves like a block for proper alignment */
    margin: auto;     /* Center it within the parent container */
    color:blue;
    padding: 10px;              /* Add padding for better spacing */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

/* Change background color on hover */
.click-grade-skills:hover {
    background-color: #087BC7;  /* Lighter green on hover */
    color:white;
}
/*===========Seachbar================*/
.search-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

.search-box input[type="text"] {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 250px;
    margin-right: 10px;
}

.select-box select {
    padding: 7px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
    margin-top: 5px;
    width: 120px;
}

.search-button input[type="submit"] {
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    margin-top:5px;
    background-color: #28a745;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.search-button input[type="submit"]:hover {
    background-color: #218838;
}

/*-------------lesson fro course----------------*/
/* Style for the main lesson list */
.lesson-list {
    list-style-type: none; /* Remove default bullets */
    padding: 0;
    margin: 0;
}

.lesson-list > li {
    margin: 20px 0; /* Space between lessons */
    position: relative;
}

.lesson-list > li > .lesson-header {
    background-color: #5bc0de; /* Different background color for the lesson name */
    color: white; /* Text color for the lesson name */
    padding: 10px;
    border: 1px solid #46b8da; /* Border color for the lesson name */
    border-radius: 4px; /* Rounded corners */
    width: 100%; /* Take up the full width of the flex container */
    box-sizing: border-box; /* Include padding and border in the width */
}

.lesson-list > li > ul {
    list-style-type: none; /* Remove bullets from nested lists */
    padding-left: 20px; /* Indent nested list items */
    margin: 0;
    background-color: #eef; /* Light blue background for quiz links */
    border: 1px solid #ddd; /* Border around quizzes */
    border-radius: 4px; /* Rounded corners */
    margin-top: 10px; /* Space between lesson header and quizzes */
}

.lesson-list > li > ul li {
    margin: 5px 0; /* Space between quizzes */
}

.lesson-list > li > ul li a {
    text-decoration: none;
    color: #337ab7; /* Link color */
    padding: 5px;
    display: block;
    transition: background-color 0.3s;
}

.lesson-list > li > ul li a:hover {
    background-color: #d9edf7; /* Slightly darker blue on hover */
}


.lesson-background {
 background:lightyellow;   
}
/*-----------online course --------------*/
.lesson-completed {
    color: grey; /* Change the text color to grey */
    text-decoration: line-through; /* Optionally add a strikethrough effect */
}

.lesson-in-progress {
    color: black; /* Default color for in-progress lessons */
}

/*==========new online teaching================*/
/*.item-set7  {
   flex: 0 0 100% !important;   Force full width on its own line 
    width: 100% !important;
}*/
/* CSS */
.flex-break { flex-basis: 100%; height: 0; }

/* Keep .item-set7 at 200px */
.item-set7 { flex: 0 0 200px; width: 200px; }
 .links-wrap{
    display: inline-flex;     /* shrink to content, stay on same line */
    align-items: center;
    gap: 6px;
    vertical-align: middle;   /* align with neighbors */
  }
   /* ensure the button sits inline with the links */
  .item-set8{
    display: inline-block;    /* if it's a <div>, make it inline-like */
    flex: 0 0 auto;           /* don't grow inside .set1 flex row */
    width: 120px;             /* your existing width */
    margin-left: 10px;        /* tweak as you like */
    vertical-align: middle;
  } 
.link-line:hover {
  color: red;
  background: yellow;
}
  
/*==================listening =====================*/

#audio {
    border: none;
    width: 800px;
    height: 40px;
    display: block;
}

/*-------------For WordSpace display----------------*/
#analysisResult {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;    /* include padding in width calculation */
  padding: 0.5rem;           /* optional - gives breathing room */
  overflow-wrap: break-word; /* soft-wrap long words */
  word-wrap: break-word;     /* legacy support */
  word-break: normal;        /* don't aggressively break normal words */
  white-space: normal;       /* allow wrapping (pre>pre-wrap handled below) */
  hyphens: auto;             /* nicer breaks on supported browsers */
  overflow-x: auto;         /* allow horizontal scroll only when necessary */
}

/* Ensure paragraphs and divs inside wrap nicely */
#analysisResult p,
#analysisResult div {
  margin: 0 0 0.25rem 0;
  line-height: 1.35;
  word-break: keep-all;
}

/* If you display preformatted text, make it wrap instead of overflow */
#analysisResult pre {
  white-space: pre-wrap;     /* allow wrapping of pre blocks */
  word-wrap: break-word;
  overflow-x: auto;          /* keep horizontal scroll as fallback */
  background: #fff;          /* visually consistent */
  padding: .6rem;
  border-radius: 6px;
}

/* Make images inside analysis responsive */
#analysisResult img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* extra: ensure any long inline tokens (links, long synonyms) break */
#analysisResult .token-long,
#analysisResult a {
  overflow-wrap: anywhere;   /* breaks anywhere if needed */
}

#copyMyListButton {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.2s;
}

#copyMyListButton:hover {
  background: #45a049;
}

#copyAnalysisButton {
  display: none;
  background: #4CAF50;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.2s;
}

#copyAnalysisButton:hover {
  background: #45a049;
}

.vocab-head {
  margin-bottom: 5px;
  line-height: 1.5;
}
.vocab-meaning {
  font-weight: normal;
  color: #0035ff;
}

.vocab-meta-syn {
  color: #6631e0;  
}

.vocab-meta-anto {
  color: #ff6300;  
}
.wordspace-toggle {
  background: #0b76d1;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  display: block;
  margin: 10px auto 15px auto;
  text-align: center;
}
.wordspace-toggle:hover {
  background: #095da7;
}
.wordspace-guide {
  max-width: 850px;
  display: none;
  margin: 20px auto;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}


/*#analysisResult span {
  display: block;
  margin-left: 15px;
  line-height: 1.5;
}*/

 /*============begin responsive- computer==============*/
@media (max-width: 1919.99px) {
 .container, #wrapper, #page {
        max-width:1900px;
        /*height: auto;*/
    } 
    #ws {
       width: 100%; 
    }
   .login-form {
       max-width: 1900px;
       padding: 10px 10px;
    
    } 
 
         /*max-height: 6rem;*/
}

@media (max-width: 1399.99px) {
 .container, #wrapper, #page {
        max-width:1380px;
    } 
    
    .login-form {
        max-width: 1399px;
    } 
   #navbar-brand #logo {
        /*        max-height: 120px; */
        max-height: 6rem;
    }  

} 

@media (max-width: 1199.99px) {
     .container, #wrapper, #page {
        max-width:1180px;
    }
     .login-form {
        max-width: 1199px;
    } 
    
     #navbar-brand #logo {
        /*        max-height: 120px; */
        max-height: 5rem;
    }
   
  
}

@media only screen and (max-width: 1023.99px) {
     .container, #wrapper, #page {
        max-width:1017px;
    }
    .table-mark {
        width:75%;
    }
    .sub-link{
     width: 70%; /* Set width of the parent container */   
    } 
    .login-form {
        max-width: 1023px;
    } 
    #navbar-brand #logo {
        /*        max-height: 120px; */
        max-height: 4.5rem;
    }
     
    
    #content, #sidebar, #sidebar-left {
        margin-top: 100px;
    }
    
   .sidebar1 {
     flex-basis:15%;   
    }
    .sidebar1b {
     flex-basis:8%;   
    }
     .sidebar1c {
     flex-basis:8%;   
    }
    .m-content, .m-content1c, .m-content1d {
      flex-basis:80%;  
    }
    
    .m-content1d {
      flex-basis:85%;  
    }
    .sidebar2,.sidebar2b {
     display:none;   
    }
    .sidebar2c {
     width:100%;   
    }
    .file-links a,
    .file-link-download a,
    .file-purchase a{
        min-width:70px; 
        padding: 5px 5px;
    }
    
}
  @media (min-width: 992px) {
 
}

@media only screen and (max-width: 991.99px) {
  
     .container, #wrapper, #page {
        max-width:982px;
    }
    .table-mark {
        width:80%;
    }
   
    .login-form {
        max-width: 991px;
    }
     #navbar-brand #logo {
/*        max-height: 120px; */
        max-height: 4rem; 
    }
    h1 {
        font-size:32px;
        margin-bottom: 20px;
    }
    h2 {
        font-size:24px;
        margin-bottom: 15px;
    }
    p {
        font-size:20px;
        margin-bottom: 12px;
    }
    
   #center-name {
       display:block;
   }
   
   li.unimportant {
    display: none;
    }
   #content, #sidebar, #sidebar-left {  
    margin-top: 80px;
    }
   
    .form-control {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    }
    
/*     #logo:hover{      
        top:50px;
        left:30px;      
    }*/
.video-frame {
   width:760px;
   height: 500px;
}
/*---------------*/
     .wp-content {
        flex-direction: column;
       
    }

    .sidebar1,
    .sidebar1b,
    .m-content,
     .m-content1c,
    .sidebar2
    .sidebar2b {
        width: 100%;
    }
  /*-----------------*/
 .file-set {
  max-width: 100%; 

  }
 .file-index,
 .file-value,
.file-date-label,
.file-date {
   margin-right: 2px;  
   font-size:18px;
}





 /* Style the index, filename, and date */  
 .sub-file-set {
    flex-direction: row;
    align-items: flex-start;        
    }
    .file-index {
      color:darkred;
      flex-wrap: wrap;
      flex-basis: 5%;  
    }
    .file-value {
      color: #e68888;  
      flex-wrap: wrap;   
      flex-basis: 70%;  
      font-size: 20px;  
      min-width: 194px;
    }
     .file-date-label {
       flex-basis: 15%;  
    }
     .file-date {
      flex-basis: 20%; 
    } 
    
    .file-link-download, .file-links,  .file-purchase {
      font-size: 16px;   
    }
  
    .file-links a,
    .file-link-download a,
    .file-purchase a{
        min-width:60px; 
        padding: 5px 3px;
    }

  }
  

/*------------------------------------------*/  
  @media only screen and (max-width: 800px) {
   .container, #wrapper, #page {
        max-width:795px;
    }
  .file-index {
    flex-basis: 3%;     
  }
  .file-value {      
      flex-basis: 40%;        
       min-width: 194px;      
    }
     .file-date-label {
       flex-basis: 10%;  
    }
     .file-date {
      flex-basis: 15%; 
    } 
}
  
/*----------Thiết bị Ipad--------------*/
@media only screen and (max-width: 767.99px) {
    .container, #wrapper,#page {
        max-width:760px;
    }
    .table-mark {
        width:100%;
    }
     .sub-link{
     width: 90%; /* Set width of the parent container */   
    } 
    
    .table-mark th,
    .table-mark td {
        padding: 6px 6px; /* Adjust padding for smaller screens */
    }
    #page {
    margin-top: 4.5rem;
    }
    
    .login-form{
        max-width: 767px;
        padding: 0 10px;
    }
  
    
     #content {     
    flex-basis: 60%;
    }
    #sidebar-left {
     flex-basis: 20%;   
    } 
    
    #sidebar {     
    flex-basis: 20%;
    }
    
     #navbar-brand #logo {
           display: none;
/*        max-height: 40px; */
        max-height: 4rem; 
    }
/*    #logo:hover{      
        top:40px;
        left:30px;      
    }*/
    
    .box-not-important {
        display: block;
    }
 
    h1 {
       font-size:1.5rem;
       margin-bottom: 15px;
    }
    h2 {
        font-size:24px;
        margin-bottom: 12px;
    }
    p {
        font-size:20px;
        margin-bottom: 10px;
    }
    
   
    #content, #sidebar, #sidebar-left {  
    margin-top: 90px;
    } 
    /*----------------*/
    ul#main-menu{   
    padding:5px 0px; 
   }
    ul#main-menu a{   
    padding:5px; 
   }
   #coin {
    padding: 1px 4px;
   }
    /*------------------*/
    .file-menu {
     width:70%;   
    }
    /*-------------*/
    .table-bank,.table-notice {  
      width: 100%; 
    }
    .table-bank table img {
      width:60px;
      height:20px; 
    }
 .video-frame {
   width:570px;
   height: 320px;
}
  /*----------*/
  .left-menu {
   width:150px;
  }
  .sub-left-menu {
   width:180px;
   left: 140px;
  }
    .sub-link{
     width: 100%; /* Set width of the parent container */   
    }
   .wordspace-guide {
    font-size: 90%;   
   }
}
  /*-------------------------------*/
/* Responsive design for smaller screens */
@media (max-width: 600px) {
    .lesson-list, .m-content,#analysisResult {
        max-width: 100%; /* Full width on smaller screens */
    }
    
    .lesson-list > li {
        padding: 12px 15px; /* Adjust padding for smaller screens */
    }
    
    .lesson-list > li > ul > li {
        padding: 8px 15px; /* Adjust padding for smaller screens */
    }
    
    .lesson-list li a {
        font-size: 14px; /* Slightly smaller font size */
    }
       #vocabList {
                height: 200px; /* Adjust height for smaller screens */
            }
    .editEntryBtn,.deleteEntryBtn {
        padding: 2px 2px;
        margin: 2px;
        font-size: 14px;
    }
   #refreshRemoveButton, #analyzeButton, #myListButton,#hideListButton, #saveButton,.saveEditBtn,.cancelEditBtn,.findListButton,#refreshPageButton,#overwriteBtn,#skipBtn,#findListButton,#addEntryBtn,#viewCardsButton  {
        padding: 2px 2px;
        margin: 2px;
        font-size: 15px;
    }  

.wordspace-title {
    font-size: 20px;
    color: #333;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-weight: 500;
}    
/*       button {
          width: 100%;
          font-size: 14px;
       }*/
}



/*---------------------------------*/
@media only screen and (max-width: 575.99px) { 
    .container, #wrapper, #page, #analysisResult {
        max-width:570px;
    }
    .table-mark { 
        width:100%;
    }
  
    #headline {
        font-size: 22px;
    }
    #heading {
        font-size: 18px;
    }
    #sub-heading {
        font-size: 17px;
    }
    #sub-sub-heading {
        font-size: 17px;
    }
    #navbar-brand #logo {
/*        max-height: 32px; */
      
        max-height: 3.5rem; 
    }
    #page {
    margin-top: 3.7rem;
    }
    
     .login-form {
        max-width: 374px;
        padding: 0 7px;
    }
   
   #content, #sidebar,#sidebar-left {
    padding: 10px 15px;   
    }  
    /*============================*/
    #content #file-viewer #each-item{
      text-align:right;    
    }
    #content #file-viewer #each-item #doc{
        flex-basis: 15%; 
    }
    #each-item #title{
        flex-basis: 80%;
    }
    #title #name{
        /*display: -webkit-box;*/
        font-size: 1.2rem;
        line-height: 1.32rem;     
    }

    #title{
        /*display: -webkit-box;*/
        font-size: 1rem;
        line-height: 1.2rem;     
    }
    /*===============================*/
    
    p.highlight{
      background: tomato;     
    }
    h1 {
        font-size:24px;
         margin-bottom: 12px;
    }
    h2 {
        font-size:21px;
         margin-bottom: 9px;
    }
    p {
        font-size:18px;
        margin-bottom: 7px;
    }
    #header, #header-1, #header-2 {      
        height: auto;
    }
    #sidebar-left{
     margin-top: 70px;   
    }
    .login-form {
    line-height:16px;   
}
  /*=================*/
  .table-mark th, .table-mark td {
    padding: 6px 6px;
  }
 .file-view iframe {    
    width:320px; 
    height:500px
}
/*-----------------*/
#heading {
 line-height: 0.8rem;   
}
#sub-heading {
 line-height: 0.8rem;   
}
#sub-sub-heading {
 line-height: 0.8rem;   
}
.file-menu {
  width:90%; 
  padding:0px 5px;  
}
.upload {
  margin: 5px 0px;
  padding: 0px 0px;
  line-height: 8px;
}
.upload-title {
 padding:10px 0px;   
}
.file-form {
  width: 338px;
  padding:5px; 
  margin: 0px 0px;
}

.file-name lable {
 margin-right:2px;   
}
.file-name input[type="file"] {
 flex-basis:60%;   
}
.file-name label, .file-coin label, .file-des label {
 flex-basis:35%;   
}
.sub-coin-wrap {
  width:100%; 
}
.coin-heading {
  font-size:20px;  
  padding: 5px 3px; 
  margin: 5px 0px;  
}
.coin-heading2 {
    font-size:20px; 
    padding: 5px 3px; 
    margin: 5px 0px;
}

  ul#responsive-menu{
    display:block;
    }

 #navbar-toggle{
       display:block;
    }
ul#main-menu a{   
    display: none; 
   }
 #heading {
     margin: 5px 5px;   
}
.login-user::after {
    font-size: 13px;
}
.username-banner {
  font-size:15px;
}
.video-frame {
   width:365px;
   height: 250px;
}
.file-date-label, .file-date  {
  font-size:16px;  
}
  
  .links-wrap { display:flex; flex-wrap:nowrap; align-items:center; }
  .links-wrap .link-line { display:inline-block; width:120px; margin:5px; }

  /* first link */
  .links-wrap .link-line:first-of-type {
    margin:5px 5px 5px 20px;   /* left = 20px */
  }
  /* second link only — change 14px to whatever you want */
  .links-wrap .link-line:nth-of-type(2) {
    margin:5px 5px 5px 10px;   /* left = 14px */
  }
  /* optional: links from the 3rd onward */
  .links-wrap .link-line:nth-of-type(n+3) {
    margin:5px;                /* or any pattern you like */
  }
  .item-set8 {
    margin-left: 20px; 
    margin-bottom: 5px;
  }

 
     .item-set7  {
        flex: 0 0 100% !important;
        width: 100% !important;
    }   

   #audio {
        width: 300px;
    }
    
#analysisResult {
    padding: 0.35rem;
    font-size: 0.95rem; /* optional — adjust to taste */
}
.vocab-head {
  line-height: 1.2;
}
  
}


@media only screen and (max-width: 435px) {
    .container, #wrapper, #page, .m-content, #analysisResult {
        max-width:400px;
    }
    .file-value {
      min-width:250px;  
    }
    .file-date-label, .file-date  {
       margin-right:0px;  
    }
    /*----------------------*/
       .left-menu {
        position: fixed;
        top: 30px;
        right: 0; /* Position on the right side of the screen */
        display:none;
    }

    .sub-left-menu {
        right: 149px; /* Display sub-menu to the left of the main menu */
        left: auto;   /* Ensure left positioning doesn't override right */
    }
   
}


@media only screen and (max-width: 374.98px) {
    .container, #wrapper, #page, .m-content, #analysisResult {
        max-width:370px;
    }
    
    #navbar-brand #logo {
/*        max-height: 32px; */
       
        max-height: 3rem; 
    }
    #coin {
      padding: 1px 8px;   
    }
    #page {
    margin-top: 0.5rem;
    }
    .login-form{
       max-width: 319px;
       padding: 0 5px;         
    }
    .password-toggle .toggle-icon {
       right: 26px;
     }
 .username, .fullname, .email,.password-toggle { 
    text-align: center;     
 }    
 input[type="text"],
 input[type="password"] {
    padding: 10px 10px;
    margin: 3px 12px;   
}
.file-name input[type="text"] {
   margin: 0px 0px; 
} 
.username label, .fullname label, .email label,
.password-toggle label { 
    width:90%;  
    margin-top: 2px;
}
.password-toggle input[type="password"],
.username input[type="text"],
.fullname input[type="text"],
.email input[type="text"]
{
    width: 90%;    
}
 .sub-set1 {
    width: 50%; /*    Two items per row */
  }  
  .label-set1 {
     font-size: 20px;
  }
  .item-set,.item-set1,.item-set2 ,.item-set3, .item-set4,.item-set5, .item-set6, .item-set7   {
    margin-left: 20px;  
  }

.sub-label-set1 {
    font-size: 17px;
}
#heading {
     margin: 25px 5px;   
}
#sub-heading {
     margin: 12px 4px;   
}
#sub-sub-heading {
     margin: 10px 3px;   
}
.user-card {
  line-height: 1;
  font-size:18px;
  margin-bottom: 10px;
}
.file-card {
  line-height: 1;
  font-size:18px;
  margin-bottom: 10px;
}
 .file-view iframe {    
    width:575px; 
    height:500px      
}
 

#link, .link, #link1 {
  font-size: 20px;  
}
  .file-form {
   width: 305px;   
  }
  .file-name input[type="text"] {  
   margin:3px 0px;
  }
  .form-comment-menu { 
    width: 320px;   
}

    /*----------------*/
    ul#main-menu{   
    padding:1px 0px; 
   }
    ul#main-menu a{   
    padding:2px 1px; 
   }
   #coin {
    padding: 1px 1px;
    font-size: 15px;
   }
    /*------------------*/
    #line-heading {
     margin: 35px 5px;   
    }
    .login-user {
     font-size:15px;   
    }
.video-frame {
   width:310px;
   height: 200px;
}
      /* Ensure analysis area content can wrap */
#analysisResult,
#analysisResult * {
  white-space: normal !important;    /* allow normal wrapping (overrides nowrap) */
  overflow-wrap: break-word;         /* break long tokens if needed */
}

/* Make each metadata field a block so they drop to a new line */
#analysisResult .meta-field,
#analysisResult .synonym,
#analysisResult .antonym,
#analysisResult .example,
#analysisResult .vietnamese {
  display: block;      /* force block-level so each appears on new line */
  margin: .25rem 0 .5rem 0;
  word-break: break-word;
}

/* If analysisResult or parent is display:flex, allow wrapping */
#analysisResult,
#analysisResult > * {
  display: block !important;
}

/* If you want them indented */
#analysisResult .meta-field { margin-left: 18px; font-size: .98em; }

}

/* Adjust container width for screens with a maximum width of 320px */

@media only screen and (max-width: 319.98px) {
    body {
      line-height: 1;
    }
    #page {
    margin-top: 1.3rem;
    } 
    
     
   .container, #wrapper, #page, .m-content, #analysisResult {
        max-width:315px;
    }
  
    #navbar-brand #logo {
/*        max-height: 32px; */
        display: none;
        max-height: 2.7rem; 
    }
  .file-view iframe {    
    width:319px; 
    height:500px
  }
  

 
}