/* ============================================================
   theme-2026.css — KaiBaan.in.th Modern Theme
   สร้างโดย AutoClaw 2026-10-12 (โหลดต่อจาก styles.css เดิม)
   ============================================================ */
:root {
  --kb-blue: #448ef6;
  --kb-blue-dark: #2860ad;
  --kb-navy: #142c4c;
  --kb-ink: #243447;
  --kb-muted: #5d6b7e;
  --kb-line: #e5ebf4;
  --kb-bg: #f6f8fc;
  --kb-green: #8bc53e;
  --kb-radius: 14px;
}
html { scroll-behavior: smooth; }
body { background: var(--kb-bg); color: var(--kb-ink); font-size: 1.01rem; line-height: 1.7; }
h1, h2, h3, h4, .card-title, .navbar-brand { font-family: 'Kanit', 'Sarabun', sans-serif; }
h2, h3 { font-weight: 600; color: var(--kb-navy); }
a { color: var(--kb-blue-dark); }
a:hover { color: var(--kb-blue); }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; font-weight: 600; padding: .5rem 1.1rem; transition: all .18s ease; }
.btn-lg { border-radius: 12px; padding: .7rem 1.5rem; }
.btn-sm { border-radius: 8px; }
.btn-primary { background-image: linear-gradient(135deg, #448ef6 0%, #2f6fe0 100%); border: 0; box-shadow: 0 6px 16px rgba(68, 142, 246, .28); }
.btn-primary:hover, .btn-primary:focus { background-image: linear-gradient(135deg, #2f6fe0, #2860ad); border: 0; box-shadow: 0 8px 20px rgba(40, 96, 173, .35); transform: translateY(-1px); }
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle { background-color: #2860ad; background-image: linear-gradient(135deg, #2860ad, #184380); border: 0; }
.btn-outline-primary { border-width: 2px; }
.btn-outline-primary:hover { box-shadow: 0 6px 16px rgba(68, 142, 246, .22); transform: translateY(-1px); }

/* ---------- Navbar ---------- */
#header-nav { background: #fff; box-shadow: 0 2px 14px rgba(20, 44, 76, .07); padding-top: .5rem; padding-bottom: .5rem; }
#header-nav .logo { height: 44px; width: auto; }
#header-nav .nav-item .btn { border-radius: 999px; padding: .4rem 1rem; font-weight: 600; }
#header-nav .btn.text-dark:hover { color: var(--kb-blue-dark) !important; background: #f2f7ff; }
#header-nav .btn-block.text-white { border-radius: 999px; box-shadow: 0 6px 14px rgba(20, 44, 76, .18); }

/* ---------- Hero (jumbotron) ---------- */
.jumbotron { border-radius: 0 0 26px 26px; box-shadow: inset 0 -80px 160px rgba(10, 25, 50, .38), inset 0 60px 120px rgba(10, 25, 50, .22); background-size: cover !important; background-position: center; min-height: 360px; }
.jumbotron h1, .jumbotron .h1 { font-weight: 700; letter-spacing: .5px; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.jumbotron h2 { font-weight: 600; text-shadow: 0 2px 14px rgba(0, 0, 0, .4); }
.jumbotron .form-control { border: 0; border-radius: 12px; box-shadow: 0 10px 26px rgba(10, 25, 50, .18); }
.jumbotron .btn-primary { border-radius: 12px; }

/* ---------- Home section headings ---------- */
.tpl-home .container h3 { position: relative; padding-bottom: 14px; margin-bottom: 26px !important; }
.tpl-home .container h3::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 64px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--kb-blue), var(--kb-green)); }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--kb-line); border-radius: var(--kb-radius); overflow: hidden; box-shadow: 0 4px 16px rgba(20, 44, 76, .06); transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20, 44, 76, .13); }
.card-img { height: 180px; }
.card-img-container { border-radius: 12px; }
.card-img-container img { transition: transform .35s ease; }
.card:hover .card-img-container img { transform: translateX(-50%) scale(1.05); }
.card-body { padding: 1rem 1.05rem; }
.card-title { font-weight: 600; color: var(--kb-navy); line-height: 1.45; }
.card .mb-0 { font-size: .92rem; color: var(--kb-muted); }
.item-rating { color: #f5a623; }
.cat-name-figure { background: #fff; font-weight: 600; }

/* ---------- Forms ---------- */
.form-control { border-radius: 10px; border-color: var(--kb-line); }
.form-control:focus { border-color: var(--kb-blue); box-shadow: 0 0 0 .2rem rgba(68, 142, 246, .15); }

/* ---------- Dropdowns ---------- */
.dropdown-menu { border: 0; border-radius: 12px; box-shadow: 0 12px 34px rgba(20, 44, 76, .16); padding: .4rem; }
.dropdown-item { border-radius: 8px; padding: .45rem .9rem; }
.dropdown-item:hover { background: #f2f7ff; }

/* ---------- Pagination ---------- */
.pagination .page-link { border: 0; margin: 0 3px; border-radius: 9px !important; color: var(--kb-blue-dark); box-shadow: 0 2px 8px rgba(20, 44, 76, .07); }
.pagination .page-item.active .page-link { background: linear-gradient(135deg, #448ef6, #2f6fe0); box-shadow: 0 6px 14px rgba(68, 142, 246, .35); }

/* ---------- Content (blog/listing) ---------- */
.page-content { font-size: 1.06rem; line-height: 1.85; color: #2a3949; }
.page-content h2 { margin-top: 2rem; padding-left: 12px; border-left: 4px solid var(--kb-blue); font-weight: 600; }
.page-content h3 { margin-top: 1.4rem; font-weight: 600; }
.page-content img { max-width: 100%; border-radius: 12px; }
.page-content p { margin-bottom: 1rem; }

/* ---------- Badges & misc ---------- */
.badge { border-radius: 999px; padding: .35em .75em; font-weight: 600; }
hr { border-color: var(--kb-line); }
.tel { font-weight: 600; }
::selection { background: rgba(68, 142, 246, .25); }

/* ---------- Footer (kb-footer) ---------- */
.kb-footer { background: linear-gradient(180deg, #142c4c 0%, #0e2038 100%); color: #c7d3e3; }
.kb-footer h6 { color: #fff; font-weight: 600; font-size: .95rem; letter-spacing: .2px; margin-bottom: 14px; font-family: 'Kanit', 'Sarabun', sans-serif; }
.kb-footer-links { list-style: none; margin: 0; padding: 0; }
.kb-footer-links li { margin-bottom: 9px; font-size: .92rem; }
.kb-footer-links a { color: #a9bcd4; text-decoration: none; transition: color .15s; }
.kb-footer-links a:hover { color: #fff; }
.kb-footer-tag { color: #93a7c1; font-size: .92rem; line-height: 1.65; margin-bottom: 14px; max-width: 330px; }
.kb-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 14px; padding-top: 18px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .85rem; color: #8ea3bf; }
.kb-footer-bottom a { color: #a9bcd4; }
.kb-footer .btn-kb-cta { background: linear-gradient(135deg, #8bc53e, #6faf27); border: 0; color: #fff; border-radius: 999px; font-weight: 600; padding: .45rem 1.15rem; box-shadow: 0 6px 14px rgba(139, 197, 62, .3); }
.kb-footer .btn-kb-cta:hover { color: #fff; transform: translateY(-1px); }
.kb-footer-net { font-size: .78rem; text-transform: uppercase; letter-spacing: .6px; color: #7d92b0; }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .jumbotron { min-height: 300px; border-radius: 0 0 18px 18px; }
  .card-img { height: 200px; }
  .kb-footer-bottom { flex-direction: column; }
}

/* ---------- Navbar nav links (child header) ---------- */
#header-nav .navbar-nav .nav-link { color: #2c3e50; font-weight: 600; padding: .45rem .85rem; border-radius: 999px; }
#header-nav .navbar-nav .nav-link:hover { background: #f2f7ff; color: var(--kb-blue-dark); }
@media (max-width: 991px) {
  #header-nav .navbar-nav { padding: .5rem 0; }
  #header-nav .navbar-nav .nav-item { margin-right: 0 !important; margin-bottom: 6px; }
}

/* ---------- Mobile navbar toggler (make always visible) ---------- */
@media (max-width: 767px) {
  #header-nav { background: #fff !important; box-shadow: 0 2px 14px rgba(20, 44, 76, .08); }
  #header-nav .navbar-toggler { color: #243447 !important; border: 1px solid #e5ebf4; border-radius: 10px; padding: .35rem .6rem; }
}

/* Brand hero */
.tpl-home .jumbotron h2 { font-size: 2.8rem; font-weight: 700; letter-spacing: .5px; text-shadow: 0 3px 20px rgba(0,0,0,.4); }
.tpl-home .jumbotron p.lead { font-size: 1.25rem; font-weight: 400; }
@media (max-width: 767px) {
  .tpl-home .jumbotron h2 { font-size: 2rem; }
  .tpl-home .jumbotron p.lead { font-size: 1.05rem; }
}