/* Section หมวดหมู่หลัก */
#categories {
    background: linear-gradient(180deg, #0d6efd, #0b4ba1); /* ไล่โทนน้ำเงิน */
    color: #fff; /* ตัวอักษรหลักสีขาว */
  }
  
  #categories h2 {
    color: #fff;
  }
  
  /* ปรับให้การ์ดยังคงพื้นหลังขาวและอ่านง่าย */
  #categories .category-card {
    background: #fff;
    border: none;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
  }
  #categories .category-card .category-icon {
    background: #e9f3ff;
    color: #0d6efd;
  }
  :root{
    --klik-primary:#0d6efd;     /* ฟ้าน้ำเงินหลัก */
    --klik-secondary:#0ea5e9;   /* ฟ้า */
    --klik-bg:#f8fbff;          /* ขาวอมฟ้า */
    --klik-dark:#0b3b6f;        /* น้ำเงินเข้มสำหรับตัวหนังสือ */
  }
  body{ background:var(--klik-bg); color:#0b2e4f; font-size:18px; }
  .navbar{ background:linear-gradient(90deg, var(--klik-primary), var(--klik-secondary)); }
  .navbar-brand, .navbar .nav-link{ color:#fff !important; }
  .brand-badge{
    background:#ffffff20; border:1px solid #ffffff33; padding:.25rem .5rem; border-radius:999px; color:#fff; font-size:.9rem;
  }
  .hero{
    background:linear-gradient(180deg,#e7f2ff, #fff); 
    border-bottom:1px solid #e3f2ff;
  }
  .category-card{
    background:#fff; border:1px solid #e6f0ff; border-radius:1.25rem;
    transition:transform .15s ease, box-shadow .15s ease;
    height:100%;
  }
  .category-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(13,110,253,.12); }
  .category-icon{
    width:64px; height:64px; display:grid; place-items:center;
    border-radius:1rem; background:#e9f3ff; color:var(--klik-primary);
    font-size:32px;
  }
  .btn-tile{
    padding:.75rem 1rem; border-radius:.85rem; 
    background:#f4f9ff; border:1px solid #e6f0ff; text-align:left;
  }
  .btn-tile:hover{ background:#eaf3ff; }
  .text-large{ font-size:1.125rem; }
  .footer{
    background:#ffffff; border-top:1px solid #e6f0ff;
  }
  /* เพิ่มพื้นที่สัมผัสสำหรับผู้สูงอายุ */
  .btn, .form-control{ min-height:48px; font-size:1.05rem; }
  .nav-link{ font-size:1.05rem; }
  /* โฟกัสชัดเจน */
  :focus-visible{ outline:3px solid #94c6ff; outline-offset:2px; border-radius:.5rem; }
/* หัวข้อย่อยใต้ชื่อหมวดหมู่ */
.klik-subtitle {
    font-size: 1.05rem;        /* ขนาดใหญ่กว่าข้อความปกติเล็กน้อย */
    color: #0b4ba1;            /* น้ำเงินเข้ม อ่านง่ายบนพื้นฟ้า */
    font-weight: 500;          /* หนากลางๆ */
    margin-top: .25rem;
    margin-bottom: 0;
  }
/* จัดไอคอนตัวคนให้พอดีกับตัวอักษร */
.klik-i {
    font-size: 1.3em;       /* สูงกว่าเล็กน้อยให้ดูเป็นแท่ง i */
    vertical-align: -3px;   /* ลดลงให้ฐานเสมอตัวหนังสือ */
    margin: 0 1px;          /* ระยะห่างเล็กน้อย */
  }
/* หัวข้อย่อยใต้ชื่อหมวด */
.klik-subtitle{
    font-size: 1.15rem;
    color: #0b4ba1;
    font-weight: 600;
    margin: .25rem 0 0 0;
  }