a {
    text-decoration: none;
}
.container h2, h3, h1 {
    font-size: 19px;
}
select {
    font-size: 15px;
}
.gap-2 {
    gap: .2rem !important;
}
.text-muted {
    color: #333!important;
}
.container  {
   
}
#question-list {
    max-height: 600px;
    overflow: auto;
}
.question-btn.active {
  border: 2px solid #0d6efd;
}
.question-btn.seen {
  background-color: #d1e7dd !important;
  border-color: #badbcc !important;
}
.question-box h5 {
  font-weight: bold;
  color: #0d6efd;
}
.question-box .form-check {
  border: 1px solid #ddd;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
  background-color: #f8f9fa;
}

.sticky-nav {
  position: sticky;
  top: 10px;
  z-index: 1030;
  background-color: #f8f9fa;
  padding: 10px 15px;
  border-bottom: 1px solid #ddd;
  border-radius: 8px;
  overflow-x: auto;
  margin-bottom: 20px;
  background: #fff;
}

.sticky-nav .btn-question {
    min-width: 30px;
    height: 25px;
    font-weight: bold;
    padding: 0;
    text-align: center;
    transition: background 0.3s;
}

.sticky-nav .btn-question.active {
  border: 2px solid #0d6efd;
  background-color: #e7f1ff;
}

.sticky-nav .btn-submit {
  white-space: nowrap;
  font-weight: 500;
}

#answered-count {
  font-size: 0.875rem;
}

.bg-dark {
    background: rgb(0 53 106) !important;
}

/* Nút số câu hỏi */
.question-btn {
min-width: 40px;
padding: 6px 10px;
font-size: 14px;
border-radius: 6px;
}
.question-btn.active {
background-color: #0d6efd;
color: white;
font-weight: bold;
}
.question-btn.done {
background-color: #198754;
color: white;
}

/* Tối ưu ô tìm kiếm và bộ lọc */
#search, #chapterFilter {
font-size: 16px;
}

/* Giao diện đáp án */
.form-check-label {
display: block;
padding: 10px;
border: 1px solid #ccc;
border-radius: 8px;
margin-bottom: 10px;
background: #f8f9fa;
cursor: pointer;
transition: 0.2s;
}
.form-check-input {
margin-right: 8px;
}
.form-check-label:hover {
background: #e9ecef;
}

/* Câu hỏi có ảnh */
.img-fluid {
max-height: 350px;
object-fit: contain;
margin-bottom: 1rem;
}
.card-body img {
    text-align: center;
    margin: 0 auto;
    display: block;
}
/* Responsive */

@media (max-width: 991.98px) {
  #question-content {
    font-size: 1.0rem;
    line-height: 1.5;
  }
  .form-check-label {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
.container {
  padding-left: 10px;
  padding-right: 10px;
}

#question-content {
  width: 100%;
}
    
.row {
  flex-direction: column;
}

#question-list {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 10px;
}

.question-btn {
  flex: 0 0 auto;
  margin-right: 5px;
}

#question-content {
  margin-top: 20px;
}

footer {
  font-size: 14px;
}
}

/* 1. Tăng khoảng cách giữa các mục menu để dễ chạm */
/*.navbar-nav .nav-link {*/
/*  padding: 10px 20px;*/
/*  font-size: 16px;*/
/*  color: #dbdbdb;*/
/*  font-weight: bold;*/
/*}*/
.navbar {
    /*background: url(./images/bg-headertop.jpg) top center no-repeat;*/
    /*background-size: cover;*/
}
.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgb(26 97 203) !important;
}
.navbar-nav .nav-link {
  font-weight: 500;
  font-size: 16px;
  transition: background 0.3s, color 0.3s;
  padding: 10px 15px;
  border-radius: 6px;
  color: #e5e5e5;
}

.navbar-nav .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.navbar-brand {
  font-size: 18px;
  font-weight: bold;
}


/* 2. Đảm bảo nút toggle (hamburger) to đủ để chạm */
.navbar-toggler {
  padding: 0.5rem;
  border: none;
}
.navbar-toggler-icon {
  background-size: 24px 24px;
  color: #fff;
  border: 2px solid #fff;
}

/* 3. Khi menu bung ra, cho phần menu scroll nếu quá dài */
@media (max-width: 767.98px) {
  .navbar-collapse {
    max-height: 60vh;
    overflow-y: auto;
    background-color: #0d6efd; /* cùng tông với header nếu bạn muốn */
  }
  .navbar-collapse .nav-link {
    color: #fff;           /* đổi màu chữ trên nền đậm */
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  .navbar-collapse .nav-link:last-child {
    border-bottom: none;
  }
  #question-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    width: 100%;
  }
  .question-btn {
    flex: 0 0 auto;
    margin-right: 6px;
    min-width: 48px;
    font-size: 16px;
    height: 48px;
  }
  #question-content {
    width: 100% !important;
    padding: 1rem !important;
    font-size: 1rem;
  }
}

/* 4. Khi mở menu, đảm bảo không che logo */
.navbar {
  position: relative;
  z-index: 1100;
}

/* 5. Tối ưu cho touch: tăng diện tích clickable */
.navbar-nav .nav-item {
  margin-bottom: 0.25rem;
}

/* do_exam */

.form-check-label {
  display: block;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f8f9fa;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.form-check-label:hover {
  background-color: #e9ecef;
}
.form-check-input {
  margin-right: 8px;
}

footer a, footer p {
    color: #fff;
}
#toTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background-color: #0d6efd; /* Bootstrap primary */
  color: #fff;
  font-size: 20px;
  line-height: 1;
  z-index: 999;
  display: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease, transform 0.2s ease;
}
#toTopBtn:hover {
  background-color: #084298;
  transform: scale(1.1);
}

button.btn-success, button.btn-primary {
    color: #fff!important;
}

h5.mb-3 {
    font-size: 18px;
}

.card-body h5, .question-block h5{
    font-size: 17px!important;
    line-height: 1.5;
}

footer span {
    vertical-align: middle;
}

.alert-info h5 {
  font-weight: 600;
}

.alert-info p {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.6;
}

.question-btn-diemliet {
    min-width: 35px;
    padding: 5px 5px;
}

/* css cho các hạng gplx */

.card-license {
  border-radius: 12px;
  padding: 20px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.card-license:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

.b01 { background-color: #007bff; }
.b   { background-color: #28a745; }
.c1  { background-color: #17a2b8; }
.c   { background-color: #ffc107; color: black; }
.d   { background-color: #fd7e14; }
.e   { background-color: #dc3545; }

.section ul, .section ol {
  margin-left: 20px;
}
.section {
  margin-bottom: 2rem;
}

.image-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.image-row img {
    flex: 1 1 30%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}