.article-info dd {
    padding: 0;
    display: inline-block;
    margin-right: 1em;
}
/* Menu */

/* nav in logo */
.container-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "top below" 
                         "logo logo" 
                         "nav nav";
}
.container-header .container-topbar {
    padding: .5em;
}
.container-header .container-topbar {
    grid-area: top;
}
.container-header .container-below-top {
    grid-area: below;
    justify-content: flex-end;
}
.container-header .grid-child:has(.navbar-brand) {
    grid-area: logo;
}
.container-header .container-nav {
    grid-area: nav;
}
@media (width >= 991.98px) {
    .container-header {
        grid-template-columns: 
            [full-start] minmax(0,1fr) 
            [main-start] repeat(4,minmax(0,19.875rem))
            [main-end] minmax(0,1fr)[full-end];
        grid-template-areas: ". logo nav nav nav .";
        gap: 0 1rem;
    }
    .container-header:has(.container-below-top, .container-topbar) {
        grid-template-areas: ". top top below below ." 
                             ". logo nav nav nav .";
    }
  .container-header {
    z-index: 10;
    background-color: var(--cassiopeia-color-primary);
    background-image: linear-gradient(0deg, var(--cassiopeia-color-primary) 0%);
    position: relative;
    box-shadow: inset 0 5px 5px #112855
}
  a:not([class])
 {
    text-decoration: none;
}
.boxed .blog-item {
   box-shadow: inset 0 1px 1px  #dddedf
}
      h2, .h2 {
        font-size: 1.6rem;
    }
  /* ปุ่มโหลด */
.download-btn {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 30px auto;
  background-color: #2c7be5;
  color: white;
  text-align: center;
  padding: 15px 20px;
  font-size: 1.2rem;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.3s ease;
}
.download-btn:hover {
  background-color: #1a5fd0;
}

/* กล่องข้อมูลไดรเวอร์ */
.driver-info {
  background: #f8f9fa;
  padding: 15px 20px;
  margin: 20px 0;
  border-left: 5px solid #2c7be5;
  border-radius: 5px;
  font-size: 0.95rem;
  line-height: 1.6;
}

  /* ปรับขนาดหัวข้อบทความ */
.article-wrapper h1,
h1 {
  font-size: 1.8rem; /* ลดจาก 2.4rem ลงมา */
  font-weight: 700;
  color: #000000;
  margin-bottom: 1.2rem;
  font-family: 'Comic Sans MS', cursive, sans-serif;
}
.card-header h3 {
  font-size: 1.3rem; /* ปรับขนาดฟอนต์ตามที่เหมาะสม */
  font-weight: 600;
  margin: 0; /* เคลียร์ margin เพิ่มความเรียบร้อย */
  color: #2c3e50; /* สีสวย เท่ห์ๆ */
}
  /* ปรับขนาดหัวข้อ h2 ให้น่าสนใจแต่ไม่ใหญ่เกิน */
article h2 {
  font-size: 1.6rem; /* ประมาณ 26px */
  font-weight: 700;
  color: #222;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  text-align: left;
}

/* ปรับย่อหน้า */
article p {
  font-size: 1rem; /* ประมาณ 16px */
  line-height: 1.6;
  color: #333;
  text-align: left;
}

/* ตารางสวย ๆ ตาม Bootstrap */
.table {
  width: 100% !important;
  max-width: 900px;
  margin: 1rem 0;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border: 1px solid #dee2e6;
  font-size: 1rem;
  color: #222;
}

.table thead th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #2c3e50;
  text-align: left;
}


/* รูปภาพ ให้เต็มความกว้างแบบ Responsive */
article img {
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Link ที่เน้นสี */


a:hover {
  text-decoration: underline;
}