* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* font-family: Arial, sans-serif; */
    /* font-family:Aptos Display; */
    font-family: sans-serif;
    line-height: 1.6;
}

.container {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 300px;
    background-color: #f5f5f5;
    
    padding: 5px 0px 20px 20px;
    position: fixed;
    height: 103vh;
    overflow-y: auto;

    display: flex;
    flex-direction: column; /* Sắp xếp các phần tử theo chiều dọc */
}

.content {
    margin-left: 300px;
    padding: 20px;
    flex: 1;
    display:flex;
    background-color: #ede8e8;
    
}
.index{
    background-color: #eee;
    padding:10px;
    border-radius: 10px;
    font-size: 14px;
    margin-top: 5px;
}
.content a {
    text-decoration:none;
    color: #000;
    margin:10px;
}

.content a:hover {
    text-decoration:none;
    color: #fff;
    background-color: #ee8402;
    border-radius: 10px;
    padding:5px;
}

.menu h3 {
    
    color: #333;
    padding:5px;
}

.menu h2 {
    
    color: #333;
}

.menu ul {
    list-style: none;
    margin-left: 20px;
}

.menu ul li {
    margin: 10px 0;
}


.menu ul li a:hover {
    text-decoration: none;
}

.tab {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
}

.tab button {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 20px;
    transition: 0.3s;
}

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

.tab button.active {
    background-color: #ccc;
}

.tabcontent {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
}

.problem-section {
    background-color: #fff;
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
}

h1 {
    color: #333;
    font-size:18px;
}

h2 {
    color: #173de7;
    
    font-size:15px;
}

h3 {
    color: #e64444;
    /* margin: 10px 0; */
    font-size:13px;
}

h4, h5 {
    color: #3a3535;
    margin: 5px 0;
}
li{
    font-size:15px;
}

ul, ol {
    margin-left: 20px;
    margin-bottom: 10px;
}

section {
    margin-bottom: 40px;
}

.submenu,
.submenu-questions,
.submenu-causes {
    margin-left: 20px;
    display: none;
}

/* Thêm class mới cho trạng thái active */
.submenu.active,
.submenu-questions.active,
.submenu-causes.active {
    display: block;
}

.content-section {
    display: none;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    width: 100%;
    height: fit-content;
    
}

.content-section1 {
    display: none;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    margin-left: 10px;
    height: fit-content;
}



.problem-details h3 {
    /* color: #2c3e50; */
    
    /* padding-bottom: 5px; */
    border-bottom: 2px solid #eee;
}

.problem-details ul {
    margin-left: 20px;
    margin-bottom: 10px;
}

.problem-details li {
    /* margin: 5px 0; */
    line-height: 1.6;
    font-size:15px;
    text-align: justify;
}


/* Thêm hiệu ứng hover cho các link trong sidebar */
.menu ul li a {
    display: block;
   
    color:#002bb8; 
    transition: all 0.3s ease;
    text-decoration: none;
    padding-right:5px;
    font-size: 12px;
    
}

.menu ul li a:focus  {
   background-color: #ee8402;
   color:#fff;
   padding:5px;
   border-radius: 10px;
   
    
}


.menu a:hover {
    color:#3498db; 
    padding-left: 5px;
    background-color: rgba(52, 152, 219, 0.1);
}

/* Style cho active link */
.menu a.active {
     color: #2980b9;
    font-weight: bold;
}


/* Thêm màu sắc khác nhau cho các cấp menu */
.submenu a {
    color: #2980b9;
}

.submenu-questions a {
    color: #27ae60;
}

.submenu-causes a {
    color: #d35400;
}

.submenu-solutions a {
    color: #8e44ad;
}

/* Thêm indent cho các cấp menu */
.submenu {
    margin-left: 15px;
}

.submenu-questions {
    margin-left: 30px;
}

.submenu-causes {
    margin-left: 45px;
}

.submenu-solutions {
    margin-left: 60px;
}

/* Thêm icons cho các loại menu khác nhau */
/* .submenu > li > a::before {
    content: "▸ ";
} */

.submenu-questions > li > a::before {
    content: "❓ ";
}

.submenu-causes > li > a::before {
    content: "⚠️ ";
}

.submenu-solutions > li > a::before {
    content: "✅ ";
}

.causes-menu {
    display: none;
    margin-left: 20px;
    list-style: none;
    padding-left: 0;
    
}

.causes-menu li {
    margin: 5px 0;
}

/* Thêm responsive cho điện thoại */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        position: relative;
        height: auto;
    }

    .content {
        margin-left: 0;
        padding: 10px;
    }

    .menu h3 {
        font-size: 1.2em;
    }

    .menu ul {
        margin-left: 10px;
    }

    .menu ul li {
        margin: 5px 0;
    }

    .menu ul li a {
        font-size: 0.9em;
    }


    .problem-section {
        padding: 15px;
    }

    .problem-details {
        margin-top: 15px;
    }
    
}

.content2 img {
    width: 70%;
    height: auto;
    padding-bottom:30px;
}

/* #cause4, #cause7, #cause8, #cause10, #cause18 img{
    height:500px;    
} */

#cause25, #cause26,#cause27,#cause28,#cause29,#cause30,#cause31,#cause32,#cause33,#cause34,#cause35,#cause36,#cause37,#cause38,#cause39,#cause40,#cause41,#cause42,#cause43,#cause44,#cause45,#cause46,#cause47,#cause48,#cause49,#cause50,#cause51
{
    color:#365DFE;
}

.content1 h2{
    color:#365DFE;
}
.content2 h2{
    color:#365DFE;
}
.content2 h4{
    text-align: center;
    color:#3a3535;
    font-size:17px;
}

.content21 h2{
    color:#365DFE;
}
.content21 h4{
    text-align: center;
    color:#3a3535;
    font-size:17px;
}

.content21 {
    display: flex;
    flex-direction: row;  /* Giữ các dòng ảnh theo cột */
     /* Căn giữa nội dung */
    gap: 20px;  /* Khoảng cách giữa các dòng */
   
}

.content21 img {
    width: 100%;
    height: 600px;
    padding-bottom:30px;
}
/* .image-row{
    padding: 0px 20px 0px 20px;
} */


img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain; /* Hoặc cover nếu muốn ảnh bao phủ toàn bộ */
    
  }

  
  /* .image-container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  } */

/* Wifi5 */
.entry {
    word-wrap: break-word;
    line-height: 22px;
}
.entry p{
    margin-bottom: 20px;
    text-align: justify;
}

.box.shadow {
    border: 1px solid #ddd;
    box-shadow: 0 0 5px rgba(153, 153, 153, 0.6);
}
.box.shadow div.box-inner-block {
    padding: 0;
}
.box div.box-inner-block {
   
    min-height: 50px;
}   
.box {
    padding: 5px;
    background-color: #F6F6F6;
    margin-bottom: 20px;
    word-wrap: break-word;
}

.entry h4 {
    font-size: 18px;
}

.entry ol, .entry ul {
    margin: 0 0 20px 15px;
    font-size:15px;
}

.entry ol li {
    list-style: outside decimal;
    text-align: justify;
}

.entry li {
    margin: 10px;
}

/* Wifi6 */
.detail-content h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.detail-content p {
    line-height: 28px !important;
    color: #090e1b !important;
    font-size: 16px !important;
}
.problem-details a 
{
    padding:5px;

    font-size:16px;
    
    color:#36b;
}
.problem-details a::before{
    content: "▸ ";  
}
.content1{
    padding:10px;
    /* margin:5px; */
    
}
.sidebar img {
    width: 20%;
    height: auto;   
    /* top: 50%; */
    
    left: 50%;
    /* transform: translate(-50%, -50%); Căn giữa bằng cách dịch chuyển */
        /* Đặt chiều cao cụ thể */
    
}
.content .img  {
    width: 30%;
    opacity: 0.2;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.content .img img {
    margin-left: auto;
    margin-right: auto;
}


.border-menu
{
    border: #8f8a8a 0.5px groove;
    margin-right: 20px;
    
}

.footer
{
    margin-top: auto; /* Đẩy phần footer xuống dưới cùng */
    text-align: center; /* Canh giữa nội dung nếu cần */
    font-weight: bold; /* Tùy chọn: làm nổi bật */
    margin-right: 20px;
     /* Khoảng cách trong footer */
    
}
.footer p
{
    margin-top:5px;
    font-size: 13px;
    
}

.social-links {
    
    display: flex;
    justify-content: center;
    gap: 15px; /* Khoảng cách giữa các logo */
}

.social-icon i {
    width: 30px; /* Kích thước logo */
    height: 30px;
    transition: transform 0.3s; /* Hiệu ứng khi hover */
    
}

.fa-tiktok {
    color: #000;
}
.fa-youtube-play{
    color:red;
}

.social-icon img:hover {
    transform: scale(1.2); /* Phóng to khi hover */
    cursor: pointer;
}

/* Camera */

.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal-width columns */
    gap: 10px; /* Adjust the gap between columns as needed */
}

.problem-image img {
    width: 60%; /* Make the image responsive */
    height: 500px;
    padding-top: 20px;
     
}
.problem-image .content21
{
    padding:10px 50px 10px 10px;
}
#cause56 .problem-image img{
    width:90%;
}
#cause58 .problem-image img
{
    width:100%;
    height:300px;
}
#cause59 .problem-image img
{
    width:100%;
    height:300px;
}

/* Wifi 6 */
.content2 p
{
    text-align: justify;
    font-size: 13px;
}

/* Chia tab */

.toggle-btn {
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 80%;
    font-size: 18px;
    text-align: center;
    margin: 0 10px;
    flex-shrink: 0;
}

.toggle-btn:hover {
    background-color: #0056b3;
}
.content-section
{
    transition: width 0.4s ease-in-out;
}
.content-section1
{
    transition: width 0.4s ease-in-out;
}

/* Base styles for mobile first approach */
:root {
    --sidebar-width: 300px;
    --content-padding: 20px;
  }
  
  /* Mobile first base styles */
  .container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  
  .sidebar {
    width: 100%;
    position: static;
    height: auto;
    padding: 10px;
  }
  
  .content {
    margin-left: 0;
    padding: var(--content-padding);
    width: 100%;
  }
  
  /* Tablet breakpoint */
  @media screen and (min-width: 768px) {
    .container {
      flex-direction: row;
    }
  
    .sidebar {
      width: var(--sidebar-width);
      position: fixed;
      height: 100vh;
      overflow-y: auto;
    }
  
    .content {
      margin-left: var(--sidebar-width);
      width: calc(100% - var(--sidebar-width));
    }
    
    .content-section, .content-section1 {
      padding: 20px;
    }
  }
  
  /* Desktop breakpoint */
  @media screen and (min-width: 1024px) {
    .content-section.shrink {
      width: 30%;
    }
    
    .content-section.expand {
      width: 70%;
    }
  
    .content21 {
      flex-direction: row;
      
    }
  }
  
  /* Large desktop breakpoint */
 /* Add these styles for mobile menu button */
#mobile-menu-toggle {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
    background-color: #365DFE;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 20px;
    cursor: pointer;
    display: none; /* Hidden by default, shown on mobile */
}

/* M