* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */


/* Create two columns/boxes that floats next to each other */
nav {
  float: left;
  width: 100%;
  height: 15%; /* only for demonstration, should be removed */
  background: #4d88bc;
  padding: 0px;
}

/* Style the list inside the menu */
menu{
  float: right;
  padding: 10px;
  margin: 0px;
  width: 30%;
  background-color: #e2baba;
}
article {
  float: left;
  margin:0px;
  padding: 5px;
  width: 70%;
  background-color: #f1f1f1;
}

/* Clear floats after the columns */
section::after {
  content: "";
  display: table;
  clear: both;
}

/* Style the footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 900px) {
  nav, article,menu {
    width: 100%;
    height: auto;
  }
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #633d7297;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #32cd32;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* ปุ่ม dropdown */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 10px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* กล่อง dropdown */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #6a4fb3; /* ม่วงหลัก */
  min-width: 180px;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* ลิงก์ใน dropdown */
.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 12px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* hover ปุ่มเมนู */
.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #563d9c; /* ม่วงเข้ม */
  color: white;
}

/* hover รายการ dropdown */
.dropdown-content a:hover {
  background-color: #48307f; /* เข้มขึ้นอีกนิด */
  color: white;
}

/* แสดง dropdown */
.dropdown:hover .dropdown-content {
  display: block;
}
.dropbtn.active {
  background-color: #32cd32;
  color: white;
}
.dropdown:hover .dropbtn:not(.active) {
  background-color: #985ee0;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 900px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

.right_menu {
    float: right;
    flex: 0 0 50%; /* กำหนดความกว้างแบบแคบลง */
    width: 50%;
    background-color: #158e7a;
    background-image: url('your-image.jpg'); /* ใส่ path รูปที่ต้องการ */
    background-size: cover; /* ปรับขนาดให้เต็มพื้นที่ */
    background-position: center;
    color: white;
    
    padding: 0px;
    height: auto;
    overflow-y: auto;
    margin: 1px 0;
    border-radius: 12px; /* มุมมนถ้าต้องการ */
}

.right_menu a {
    display: block; /* ทำให้แต่ละลิงก์ขึ้นบรรทัดใหม่ */
    color: white !important;
    font-size: 80% !important;
    font-weight: bold;
    text-decoration: none; /* ไม่ขีดเส้นใต้ */
    margin-bottom: 0px; /* ระยะห่างระหว่างลิงก์ */
    padding: 4px 8px;
    background-color: rgba(255, 255, 255, 0.1); /* พื้นหลังโปร่งใส */
    border-radius: 8px;
    text-align: right;
    transition: background 0.3s;
}

.right_menu a:hover {
    background-color: rgba(255, 255, 255, 0.3); /* hover สว่างขึ้น */
}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 900px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
    
  }
  .topnav a, .dropdown .dropbtn {
    padding: 5px 6px;
    font-size: 12px;}

   .topnav {
    padding: 0px;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

.sidebar {
            flex: 1;
            background-color: #333;
            color: white;
            padding: 20px;
            height: auto;
            overflow-y: auto;
            margin: 10px 0;
        }
        .sidebar h2 {
            color: #ffcc00;
        }
        /* หัวข้อและหัวข้อย่อย */
        .lesson {
            margin: 10px 0;
            padding: 10px;
            background-color: #444;
            cursor: pointer;
        }
        .lesson:hover {
            background-color: #555;
        }
        .sub-lessons {
            margin-top: 5px;
            padding-left: 15px;
        }
        .sub-lessons div {
            margin: 5px 0;
            background-color: #555;
            padding: 5px;
            cursor: pointer;
        }
        .sub-lessons div:hover {
            background-color: #666;
        }


        .breadcrumb {
    padding: 10px;
    background-color: #e0e0e0;
    margin-top: 5px;
}
footer {
  display: flex;
  justify-content: flex-end;
}
.breadcrumb {
    font-family: "Georgia", serif; /* ใช้ฟอนต์ที่มีสไตล์คลาสสิก */
    font-size: 16px;
    color: #4b3832; /* สีน้ำตาลคลาสสิก */
    background-color: #f8f4f0; /* พื้นหลังสีครีม */
    padding: 10px 20px;
    border-radius: 5px;
    display: inline-block;
    text-align: left; /* ชิดซ้าย */
    width: 100%; /* กำหนดความกว้างให้ชิดซ้าย */
  }

  .breadcrumb span {
    color: #4b3832;
  }

  .breadcrumb span:first-child {
    font-weight: bold;
  }

  .breadcrumb span:not(:first-child)::before {
    content: " > ";
    color: #8e8d8a; /* สีเทาเข้มสำหรับสัญลักษณ์ */
  }

  .breadcrumb span:last-child {
    color: #c3a995; /* สีทองอ่อน */
  }


a {
    text-decoration: none;
    color: inherit;
  }
  
  /* เปลี่ยนสีพื้นหลังเมื่อ hover */
  a:hover {
    background-color: rgba(0, 0, 0, 0.1); /* ใช้สีพื้นหลังที่ต้องการเมื่อ hover */
  }

  /* เปลี่ยนสีพื้นหลังเมื่อคลิก */
  a:active {
    background-color: rgba(0, 0, 0, 0.2); /* ใช้สีพื้นหลังที่ต้องการเมื่อ active */
  }

  .sub-number {
    background-color: #333; /* สีเข้ม */
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    margin-right: 10px;
    font-weight: bold;
    min-width: 30px;
    text-align: center;
  }

.sub-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

.number {
  background-color: #333;
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  margin-right: 10px;
  flex-shrink: 0; /* ป้องกันหมายเลขยืด */
}

.sub-link {
  display: inline-block;
  text-decoration: none;
  color: #000;
  line-height: 1.4;
}