:root {
  --bg: #f6f7fb; --card: #fff; --text: #0f172a; --muted: #64748b; --line: #e2e8f0;
  --brand: #1d4ed8; --brand-2: #0ea5e9; --ok: #16a34a; --off: #b91c1c; --book: #f97316;
  --hdr-bg: #fff; --hdr-text: #0f172a; --hdr-on: #1d4ed8; --ft-bg: #0f172a; --ft-text: #cbd5e1;
  --tint: color-mix(in srgb, var(--brand) 10%, #fff);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: 'Noto Sans Thai', system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: 1.2rem 0 .8rem; }
h2 { font-size: 1.2rem; margin: 1.6rem 0 .6rem; }
code { background: var(--tint); padding: 0 .3em; border-radius: 4px; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

.topbar { background: var(--hdr-bg); border-bottom: 1px solid color-mix(in srgb, var(--hdr-text) 12%, transparent); position: sticky; top: 0; z-index: 1000; }
.topbar-in { display: flex; align-items: center; gap: 1rem; height: 56px; }
.brand { font-weight: 700; font-size: 1.1rem; color: var(--hdr-text); white-space: nowrap; display: inline-flex; align-items: center; gap: .45rem; }
.brand:hover { text-decoration: none; }
.brand img { display: block; width: auto; max-width: 220px; object-fit: contain; }
.nav { display: flex; gap: .2rem; flex: 1; overflow-x: auto; }
.nav a { padding: .35rem .7rem; border-radius: 8px; color: color-mix(in srgb, var(--hdr-text) 72%, var(--hdr-bg)); white-space: nowrap; }
.nav a:hover { color: var(--hdr-text); text-decoration: none; background: color-mix(in srgb, var(--hdr-text) 6%, transparent); }
.nav a.on { background: color-mix(in srgb, var(--hdr-on) 14%, var(--hdr-bg)); color: var(--hdr-on); font-weight: 500; }
.lang { position: relative; flex: 0 0 auto; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .65rem; border: 1px solid color-mix(in srgb, var(--hdr-text) 18%, transparent); border-radius: 10px; cursor: pointer; color: var(--hdr-text); font-size: .9rem; white-space: nowrap; user-select: none; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { background: color-mix(in srgb, var(--hdr-text) 6%, transparent); }
.lang-caret { font-size: .7rem; opacity: .7; transition: transform .15s; }
.lang[open] .lang-caret { transform: rotate(180deg); }
.flag { display: block; flex: 0 0 auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 170px; background: #fff; color: #1f2937; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: .35rem; z-index: 1100; }
.lang-menu a { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: 8px; color: inherit; white-space: nowrap; }
.lang-menu a:hover { background: #f1f5f9; text-decoration: none; }
.lang-menu a.on { font-weight: 600; color: var(--hdr-on); }
.lang-tick { margin-left: auto; }
.mockbar { background: #fef3c7; color: #92400e; font-size: .85rem; padding: .4rem 0; }

.hero { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; padding: 2rem 0 1.5rem; }
.hero h1 { margin-top: 0; }
.search { display: grid; grid-template-columns: 1fr 1fr auto; gap: .8rem; background: var(--card); color: var(--text); padding: 1rem; border-radius: 14px; align-items: end; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.field span { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .2rem; }
input, select { width: 100%; font: inherit; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1.2rem; text-align: center; }
.stats b { display: block; font-size: 1.5rem; }

.btn { display: inline-block; border: 0; background: var(--brand); color: #fff; padding: .55rem 1rem; border-radius: 10px; font: inherit; cursor: pointer; white-space: nowrap; }
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn-book { background: var(--book); }
.btn-lg { padding: .7rem 1.4rem; font-weight: 700; }
.btn.disabled { opacity: .45; pointer-events: none; }

.section-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.section-head select { width: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .9rem; color: var(--text); }
a.card:hover { text-decoration: none; border-color: var(--brand); }
.card-title { font-weight: 500; }
.carrier-card { display: flex; gap: .8rem; align-items: center; }
.logo { width: 52px; height: 52px; border-radius: 10px; object-fit: contain; flex: none; background: #fff; }
.logo-lg { width: 84px; height: 84px; font-size: 2rem; }
.logo-sm { width: 24px; height: 24px; font-size: .8rem; border-radius: 6px; }
.logo-ph { display: inline-flex; align-items: center; justify-content: center; background: #e0e7ff; color: var(--brand); font-weight: 700; }
.carrier-head { display: flex; gap: 1rem; align-items: center; margin: 1rem 0; }
.carrier-head h1 { margin: 0 0 .2rem; }

.badge { display: inline-block; font-size: .75rem; padding: .05rem .5rem; border-radius: 999px; background: #e2e8f0; color: #334155; vertical-align: middle; white-space: nowrap; }
.badge-ok { background: #dcfce7; color: var(--ok); }
.badge-off { background: #fee2e2; color: var(--off); }
.badge-boat { background: #e0f2fe; color: #0369a1; }
.badge-van, .badge-minibus { background: #fef9c3; color: #854d0e; }

.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs a { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); white-space: nowrap; line-height: 1.3; }
.tabs a:hover { text-decoration: none; border-color: var(--brand); color: var(--brand); }
.tabs a.on { background: var(--brand); border-color: var(--brand); color: #fff; }

.map { height: 380px; border-radius: 12px; border: 1px solid var(--line); margin: 1rem 0; z-index: 0; }
.map-sm { height: 300px; margin: 0; }
.map-lg { height: 70vh; min-height: 420px; }
.legend { display: flex; gap: 1rem; font-size: .9rem; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
.dot-ok { background: var(--ok); } .dot-no { background: #64748b; }

.route { background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: .7rem; padding: .2rem .9rem; }
.route summary { cursor: pointer; padding: .6rem 0; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.route-name { font-weight: 500; }
.timeline { list-style: none; margin: 0 0 .8rem; padding: 0 0 0 1.2rem; border-left: 3px solid #bfdbfe; }
.timeline li { position: relative; padding: .3rem 0 .3rem .6rem; }
.timeline li::before { content: ''; position: absolute; left: -1.62rem; top: .75rem; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); }
.timeline li.closed { opacity: .55; }

.pair-list { display: grid; gap: .4rem; margin-bottom: .8rem; }
.pair { display: flex; justify-content: space-between; align-items: center; gap: .8rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .8rem; }
.route .pair { background: #fff7ed; border-color: #fed7aa; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.kv { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 12px; overflow: hidden; }
.kv th, .kv td { text-align: left; padding: .5rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.kv th { width: 35%; color: var(--muted); font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem .25rem .3rem; color: var(--text); }
.route-card { display: grid; gap: .3rem; margin-bottom: .5rem; }
.crumbs { margin-top: 1rem; font-size: .85rem; color: var(--muted); }

.filters { display: grid; grid-template-columns: 2fr 1fr 1fr auto auto; gap: .5rem; align-items: center; }
.check { display: flex; gap: .3rem; align-items: center; white-space: nowrap; }
.check input { width: auto; }
.stop-list { display: grid; gap: .4rem; }
.stop-row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; }
.pager { display: flex; gap: .3rem; flex-wrap: wrap; margin: 1rem 0; }
.pager a { padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.pager a.on { background: var(--brand); color: #fff; }

.alert { padding: .8rem 1rem; border-radius: 10px; margin: 1rem 0; }
.alert-error { background: #fee2e2; color: var(--off); }
.footer { margin-top: 3rem; background: var(--ft-bg); color: var(--ft-text); font-size: .9rem; }
.footer a { color: var(--ft-text); }
.footer a:hover { color: #fff; color: color-mix(in srgb, var(--ft-text) 40%, #fff); }
.ft-grid { display: grid; grid-template-columns: 1.6fr repeat(var(--ft-cols, 2), 1fr) 1.4fr; gap: 2rem; padding-top: 2.5rem; padding-bottom: 2rem; }
.footer h4 { margin: .2rem 0 .8rem; font-size: .95rem; color: color-mix(in srgb, var(--ft-text) 35%, #fff); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ft-brand { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: 1.15rem; color: color-mix(in srgb, var(--ft-text) 35%, #fff) !important; }
.ft-brand:hover { text-decoration: none; }
.ft-brand img { display: block; width: auto; max-width: 220px; object-fit: contain; }
.ft-brand img.on-chip { background: #fff; border-radius: 10px; padding: 6px 10px; box-sizing: content-box; }
.ft-about p { margin: .7rem 0 1rem; line-height: 1.7; opacity: .9; }
.ft-contact li { display: flex; gap: .5rem; align-items: baseline; }
.ft-contact li span { width: 1.3em; flex: none; text-align: center; }
.pay-chip { display: inline-block; background: #fff; border-radius: 10px; padding: .5rem .6rem; line-height: 0; max-width: 100%; }
.pay-chip img { display: block; max-width: 100%; height: auto; width: 292px; }
.ft-pay p { margin: .6rem 0 0; opacity: .85; }
.ft-bottom { border-top: 1px solid color-mix(in srgb, var(--ft-text) 18%, transparent); font-size: .8rem; }
.ft-bottom .container { display: flex; justify-content: space-between; gap: .4rem 1.5rem; flex-wrap: wrap; padding-top: 1rem; padding-bottom: 1.2rem; opacity: .85; }
@media (max-width: 960px) { .ft-grid { grid-template-columns: 1fr 1fr; } .ft-about, .ft-pay { grid-column: 1 / -1; } }
@media (max-width: 520px) { .ft-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; } .ft-about, .ft-pay { grid-column: 1 / -1; } }

@media (max-width: 760px) {
  .search, .two-col, .filters { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .brand { font-size: 1rem; }
  .pair { flex-direction: column; align-items: stretch; }
  .map-lg { height: 60vh; }
}

.article { margin: 1rem 0; padding: 1.2rem 1.4rem; }
.article h2 { margin-top: 0; }
.article-cover { width: 100%; max-height: 360px; object-fit: cover; border-radius: 10px; margin-bottom: 1rem; }
.article-body { line-height: 1.75; }
.article-body img { display: block; max-width: 100%; height: auto; border-radius: 8px; margin: 1rem auto; }
.article-body blockquote { margin: 1rem 0; padding: .5rem 1rem; border-left: 4px solid var(--brand-2); background: #f0f9ff; }
.article-body.clamped { max-height: 420px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.article-toggle { margin-top: .5rem; background: none; border: 0; color: var(--brand); font: inherit; cursor: pointer; padding: 0; }

.popular-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem; }
.popular-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.popular-img { height: 140px; background: linear-gradient(135deg, var(--brand), var(--brand-2)) center/cover no-repeat; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; }
.popular-body { padding: .8rem .9rem .9rem; display: grid; gap: .25rem; flex: 1; }
.popular-note { color: var(--book); font-weight: 500; font-size: .9rem; }
.popular-actions { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .4rem; }

/* ---------- ช่องเลือกแบบพิมพ์ค้นหา ---------- */
.field em { font-style: normal; color: var(--brand); }
.picker { position: relative; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.picker:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(29,78,216,.15); }
.picker.disabled { background: #f1f5f9; }
.picker input { border: 0; box-shadow: none; background: transparent; padding-left: .2rem; min-width: 0; }
.picker input:focus { outline: none; }
.pk-icon { padding-left: .7rem; font-size: 1rem; }
.pk-clear { border: 0; background: none; color: var(--muted); font-size: .9rem; padding: 0 .7rem; cursor: pointer; }
.pk-panel { display: none; position: absolute; z-index: 1100; top: calc(100% + 6px); left: 0; right: 0; max-height: min(60vh, 420px); overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(15,23,42,.18); padding: .3rem 0; }
.picker.open .pk-panel { display: block; }
.pk-group { position: sticky; top: -.3rem; background: #f8fafc; color: var(--muted); font-size: .75rem; font-weight: 500; padding: .35rem .9rem; border-bottom: 1px solid var(--line); }
.pk-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; padding: .55rem .9rem; cursor: pointer; color: var(--text); }
.pk-item:hover, .pk-item.on { background: var(--tint); }
.pk-name { flex: 1 1 auto; }
.pk-prov, .pk-extra { font-size: .78rem; color: var(--muted); }
.pk-extra { color: var(--ok); }
.pk-empty { padding: .7rem .9rem; color: var(--muted); font-size: .85rem; }

/* ---------- เมนูมือถือ ---------- */
.menu-btn { display: none; margin-left: auto; width: 42px; height: 38px; border: 1px solid color-mix(in srgb, var(--hdr-text) 18%, transparent); border-radius: 10px; background: transparent; cursor: pointer; padding: 9px 10px; flex-direction: column; justify-content: space-between; }
.menu-btn span { display: block; height: 2px; background: var(--hdr-text); border-radius: 2px; transition: transform .2s, opacity .2s; }
.menu-open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .topbar-in { flex-wrap: wrap; height: auto; min-height: 56px; gap: 0; padding-top: 9px; padding-bottom: 9px; }
  .menu-btn { display: flex; }
  .topbar .nav { display: none; flex: 0 0 100%; width: 100%; }
  .topbar .lang { order: 2; margin-left: auto; margin-right: .5rem; }
  .topbar .menu-btn { order: 3; margin-left: 0; }
  .topbar .nav { order: 4; }
  .topbar.menu-open .nav { display: flex; flex-direction: column; gap: .15rem; padding-top: .6rem; overflow: visible; }
  .topbar .nav a { padding: .7rem .8rem; font-size: 1rem; }
  .hero { padding: 1.2rem 0 1rem; }
  .hero h1 { font-size: 1.25rem; }
  .search { padding: .8rem; gap: .6rem; }
  .search .btn-lg { text-align: center; }
  .stats b { font-size: 1.2rem; }
  h1 { font-size: 1.35rem; }
  .carrier-head { align-items: flex-start; }
  .logo-lg { width: 60px; height: 60px; font-size: 1.5rem; }
  .route summary { font-size: .95rem; }
  .map { height: 300px; }
  .section-head select { width: 100%; }
  .popular-grid { grid-template-columns: 1fr; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 2px 16px; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { flex: none; }
}

/* ไอคอนประเภทรถ (SVG แทน emoji) */
.vi { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.badge .vi { width: 1.05em; height: 1.05em; vertical-align: -.18em; }

/* ปุ่มเล็กทั่วไป */
.btn-sm { padding: .35rem .75rem; font-size: .85rem; }
.btn-ghost { background: transparent; color: var(--brand); border: 1px solid var(--brand); }
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--brand); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.check { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.check input { width: auto; }

/* หน้าเส้นทาง */
.routes-hero { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; padding: 1.6rem 0 1.2rem; }
.routes-hero h1 { margin: 0 0 .3rem; display: flex; align-items: center; gap: .5rem; }
.routes-hero h1 .vi { width: 1.3em; height: 1.3em; }
.routes-hero p { margin: 0 0 1rem; opacity: .92; }
.type-tabs { margin: 0; }
.type-tabs a { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff; }
.type-tabs a:hover { background: rgba(255,255,255,.24); color: #fff; border-color: #fff; }
.type-tabs a.on { background: #fff; color: var(--brand); border-color: #fff; font-weight: 500; }
.rt-search { display: grid; grid-template-columns: 1fr auto 1fr 1fr; gap: .6rem .7rem; align-items: end; margin: -1px 0 1rem; position: relative; top: -12px; box-shadow: 0 10px 30px rgba(15,23,42,.10); padding: 1rem; }
.rt-swap { width: 40px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--brand); font-size: 1.15rem; cursor: pointer; }
.rt-swap:hover { border-color: var(--brand); }
.rt-search-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; font-size: .9rem; }
.rt-count { font-weight: 500; margin-left: auto; }
.rt-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.chip-btn { border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 999px; padding: .2rem .7rem; font: inherit; font-size: .82rem; cursor: pointer; }
.chip-btn:hover { border-color: var(--brand); color: var(--brand); }
.rt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: .8rem; }
.rt-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.rt-card[hidden] { display: none; }
.rt-head { display: flex; align-items: center; gap: .6rem; }
.rt-head .logo { width: 36px; height: 36px; }
.rt-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.rt-who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-carrier { font-weight: 600; color: var(--text); }
.rt-ends { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .5rem; align-items: center; }
.rt-end { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.rt-end b { font-weight: 600; overflow-wrap: anywhere; }
.rt-end small { color: var(--muted); }
.rt-end-to { text-align: right; }
.rt-line { display: flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.rt-line i { width: 18px; height: 2px; background: var(--brand); opacity: .5; border-radius: 2px; }
.rt-line em { font-style: normal; border: 1px solid var(--line); border-radius: 999px; padding: 0 .45rem; }
.rt-provs { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.pv { font-size: .75rem; background: var(--tint); color: var(--brand); border-radius: 999px; padding: .05rem .5rem; }
.rt-match { color: var(--ok); }
.rt-foot { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: auto; padding-top: .5rem; border-top: 1px dashed var(--line); }
.rt-foot .spacer { flex: 1; }
.rt-foot .rt-book { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rt-stops { margin: .2rem 0 0; font-size: .9rem; }
.rt-stops li.hit a { font-weight: 700; }
.rt-stops li.hit::before { background: var(--brand); }
.rt-more-wrap { text-align: center; margin: 1.2rem 0; }
@media (max-width: 760px) {
  .rt-search { grid-template-columns: 1fr auto; top: -10px; }
  .rt-search .field:nth-of-type(1) { grid-column: 1; }
  .rt-swap { grid-row: 1 / span 2; grid-column: 2; align-self: center; transform: rotate(90deg); }
  .rt-search .field:nth-of-type(2) { grid-column: 1; }
  .rt-search .field:nth-of-type(3) { grid-column: 1 / -1; }
  .rt-count { margin-left: 0; }
  .rt-list { grid-template-columns: 1fr; }
  .rt-ends { grid-template-columns: 1fr; gap: .15rem; padding-left: .9rem; border-left: 3px solid color-mix(in srgb, var(--brand) 35%, transparent); }
  .rt-end-to { text-align: left; }
  .rt-line i { display: none; }
  .rt-line em { font-size: .7rem; }
  .rt-foot .rt-book { flex: 1 1 100%; text-align: center; }
  .routes-hero h1 { font-size: 1.35rem; }
}

/* แถบเลือกประเภทรถบนมือถือ: 5 ช่องเท่ากัน ไอคอนอยู่บนชื่อ ไม่ต้องเลื่อนข้าง */
@media (max-width: 760px) {
  .tabs.type-tabs, .tabs.type-tabs-plain { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; }
  .type-tabs a, .type-tabs-plain a { flex-direction: column; justify-content: center; gap: .2rem; padding: .5rem .15rem; border-radius: 12px; font-size: .78rem; min-width: 0; }
  .type-tabs a span, .type-tabs-plain a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .type-tabs a .vi, .type-tabs-plain a .vi { width: 1.45rem; height: 1.45rem; }
}

/* ---------- ข่าวและบทความ ---------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.post-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; color: var(--text); transition: transform .15s, box-shadow .15s; }
.post-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 23, 42, .1); }
.post-card.is-expired { opacity: .7; }
.post-img { position: relative; aspect-ratio: 1200 / 630; background: var(--tint, #eef2ff); }
.post-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-ph { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2.6rem; }
.post-img .post-cat { position: absolute; left: .6rem; top: .6rem; }
.post-cat { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 500; background: var(--brand); color: #fff; }
.post-cat-promo { background: var(--book, #ea580c); }
.post-body { padding: .8rem 1rem 1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.post-body h3 { margin: 0; font-size: 1.05rem; line-height: 1.45; }
.post-body p { margin: 0; }
.post-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.post-more { margin-top: auto; padding-top: .3rem; color: var(--brand); font-size: .9rem; font-weight: 500; }
.blog-bar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; }
.blog-bar .tabs { margin: 0; }
.blog-search { flex: 0 1 280px; }
.post-wrap { max-width: 820px; }
.post header { margin: .8rem 0 1rem; }
.post h1 { margin: .5rem 0 .4rem; line-height: 1.35; }
.post-cover { width: 100%; max-height: 460px; object-fit: cover; border-radius: 14px; margin-bottom: 1rem; }
.post-content img { max-width: 100%; height: auto; border-radius: 10px; }
.post-cta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin: 1.5rem 0; background: var(--tint, #eef2ff); }
@media (max-width: 640px) {
  .blog-search { flex: 1 1 100%; }
  .post-grid { grid-template-columns: 1fr; }
  .post-cta .btn { flex: 1 1 100%; text-align: center; }
}
.rt-list.loading { opacity: .55; transition: opacity .15s; }

/* ปุ่มแชร์ */
.share { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 1rem; }
.share-label { font-size: .85rem; color: var(--muted); margin-right: .2rem; }
.share-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; color: #fff; transition: transform .15s, opacity .15s; }
.share-btn:hover { transform: translateY(-1px); opacity: .9; text-decoration: none; }
.share-btn svg { width: 20px; height: 20px; fill: currentColor; }
.share-fb { background: #1877f2; }
.share-line { background: #06c755; }
.share-x { background: #111; }
.share-copy { background: var(--card); color: var(--text); border: 1px solid var(--line); }
.share-copy.copied { background: #16a34a; border-color: #16a34a; color: #fff; }
.share-copy.copied svg { display: none; }
.share-copy.copied::after { content: "✓"; font-weight: 700; }
.share-end { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1.5rem; }

/* จังหวัด */
.prov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; }
.prov-card { display: flex; flex-direction: column; gap: .25rem; color: var(--text); }
.prov-card:hover { text-decoration: none; border-color: var(--brand); }
.prov-card .badge { align-self: flex-start; }
.chip-text { padding: .3rem .8rem; }
.prov-chain b { color: var(--brand); }
.more-btn { display: block; width: 100%; margin-top: .4rem; }

/* เกี่ยวกับเรา */
.about-contact ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }

/* ป้ายแบนเนอร์ */
.bn-zone { margin: 1rem 0; }
.bn-zone .container { display: grid; gap: .6rem; }
.bn img { display: block; width: 100%; height: auto; border-radius: 12px; }
.bn-html { overflow: hidden; }
.bn-html img, .bn-html iframe { max-width: 100%; }
.bn-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: var(--card); box-shadow: 0 -4px 18px rgba(15, 23, 42, .15); padding: .5rem 0; }
.bn-sticky .container { display: grid; gap: .4rem; padding-right: 44px; }
.bn-sticky .bn img { max-height: 120px; width: auto; max-width: 100%; margin: 0 auto; border-radius: 8px; }
.bn-close { position: absolute; top: 6px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 1.1rem; line-height: 1; cursor: pointer; }
body.has-sticky { padding-bottom: var(--sticky-h, 0); }

/* หน้าเดินทางระหว่างจังหวัด */
.trip-groups { display: grid; gap: .6rem; }
.trip-group .pair-list { margin: .5rem 0 0; }
.trip-group .pair { background: var(--bg, #f8fafc); }
.trip-board { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* จุดขึ้นรถใกล้ฉัน */
.near-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.near-list { display: grid; gap: .6rem; margin-top: .8rem; }
.near-head { display: flex; gap: .6rem; align-items: flex-start; }
.near-no { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .85rem; font-weight: 700; }
.near-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.near-dest { margin: .6rem 0 0; }

/* วางแผนเดินทาง */
.plan-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.plan-form label { display: grid; gap: .2rem; flex: 1 1 200px; }
.plan-form select { width: 100%; padding: .55rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fff; }
.plan-swap { align-self: flex-end; }
.plan-direct { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; margin-top: 1rem; }
.plan-list { display: grid; gap: .6rem; }
.plan-legs { margin: .4rem 0; padding-left: 1.3rem; }
.plan-ok { color: var(--ok); }

/* กล่องค้นหา: แท็บสลับ กล่องของ BusX และวันเดินทาง */
.sb-tabs { display: flex; gap: .4rem; margin-bottom: .6rem; flex-wrap: wrap; }
.sb-tabs button { border: 0; border-radius: 999px; padding: .45rem 1rem; font: inherit; font-size: .9rem; cursor: pointer; background: rgba(255,255,255,.18); color: #fff; }
.sb-tabs button.on { background: #fff; color: var(--brand); font-weight: 700; }
.sb-busx { background: var(--card); color: var(--text); border-radius: 14px; padding: .6rem; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.busx-bar { background: var(--tint); border-bottom: 1px solid var(--line); padding: .6rem 0; }
.search.has-date { grid-template-columns: 1fr 1fr 170px auto; }
.date-input { width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; min-height: 46px; }
@media (max-width: 760px) { .search.has-date { grid-template-columns: 1fr; } }
.date-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; background: var(--tint); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .8rem; margin: .4rem 0 .8rem; }
.date-bar label { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.date-bar .date-input { width: auto; min-height: 40px; padding: .35rem .6rem; }
.rt-search .date-bar { grid-column: 1 / -1; margin: 0; }
/* กล่องค้นหาของเว็บเราใต้เมนู */
.search-bar { background: linear-gradient(135deg, var(--brand), var(--brand-2)); padding: .7rem 0; }
.search.search-compact { padding: .7rem; gap: .6rem; box-shadow: none; }
.search-compact .field span { font-size: .75rem; margin-bottom: .1rem; }
.search-compact .btn-lg { padding: .6rem 1rem; }

/* เคาน์เตอร์เช็คอิน */
.counter-groups { display: grid; gap: .8rem; }
.counter-co { font-size: 1.05rem; margin: 0 0 .5rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.counter-list { display: grid; gap: 0; }
.counter-list.card { padding: .3rem .9rem; }
.counter-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .3rem 1rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.counter-row:first-child { border-top: 0; }
.counter-row b { font-weight: 600; }
.counter-row a.tel { white-space: nowrap; font-weight: 600; }
.counter-row a.tel::before { content: "📞 "; }
@media (max-width: 640px) { .counter-row { grid-template-columns: 1fr; } }

/* ตรวจสอบสถานะตั๋ว */
.status-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9rem; margin-bottom: .9rem; }
.status-grid h2, .status-day h2 { font-size: 1.1rem; margin-top: 0; }
.status-steps { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.status-steps li { display: grid; gap: .15rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 10px; }
.status-btn { display: block; text-align: center; font-size: 1.05rem; padding: .85rem 1rem; }
.status-list { padding-left: 0; list-style: none; display: grid; gap: .45rem; margin: 0 0 1rem; }
.status-dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem .8rem; margin: 0; align-items: start; }
.status-dl dd { margin: 0; }
@media (max-width: 760px) { .status-grid { grid-template-columns: 1fr; } .status-dl { grid-template-columns: 1fr; } }
.badge-warn { background: #fef3c7; color: #92400e; }

/* แถบขอความยินยอมคุกกี้ (PDPA) */
.ck-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: #0f172a; color: #e2e8f0; box-shadow: 0 -6px 24px rgba(0,0,0,.18); font-size: .9rem; }
.ck-bar[hidden] { display: none; }
.ck-in { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1.2rem; padding-top: .8rem; padding-bottom: .8rem; flex-wrap: wrap; }
.ck-in p { margin: 0; flex: 1 1 320px; }
.ck-in a { color: #93c5fd; }
.ck-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.ck-bar .btn-ghost { color: #e2e8f0; border-color: #94a3b8; }
.ft-legal a { color: inherit; }

/* คำถามพบบ่อย */
.faq-list { display: grid; gap: .6rem; margin: 1rem 0; }
.faq-item { background: #fff; border: 1px solid var(--line, #e5e7eb); border-radius: 12px; padding: 0; }
.faq-item summary { cursor: pointer; padding: .9rem 1.1rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-weight: 400; font-size: 1.3rem; line-height: 1; color: var(--brand); }
.faq-item[open] summary::after { content: '−'; }
.faq-a { padding: 0 1.1rem 1rem; line-height: 1.7; }
.faq-a p { margin: .4rem 0; }
.faq-cat { margin-top: 1.6rem; }

/* หน้าออฟไลน์ (แอป) */
.offline { text-align: center; padding: 3rem 1rem; }
.offline-ico { font-size: 3rem; }

/* ประกาศด่วนบนสุดของหน้า (admin → ประกาศ) */
.notice-bar { font-size: .92rem; line-height: 1.45; }
.notice-in { display: flex; align-items: center; gap: .6rem; padding-top: .55rem; padding-bottom: .55rem; }
.notice-in p { margin: 0; flex: 1; }
.notice-in a { font-weight: 600; color: inherit; text-decoration: underline; white-space: nowrap; }
.notice-x { border: 0; background: transparent; color: inherit; opacity: .6; cursor: pointer; font-size: 1rem; padding: .2rem .4rem; }
.notice-x:hover { opacity: 1; }
.notice-info { background: #e0f2fe; color: #075985; }
.notice-warn { background: #fef3c7; color: #92400e; }
.notice-alert { background: #dc2626; color: #fff; }
.home-intro { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.home-intro .article-body { background: var(--card, #fff); border: 1px solid var(--line, #e5e7eb); border-radius: 12px; padding: 1rem 1.25rem; }
.home-intro .article-body > :first-child { margin-top: 0; }
.home-intro .article-body > :last-child { margin-bottom: 0; }
/* ป๊อปอัปป้าย/วิดีโอตอนเข้าเว็บ */
.bn-pop { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .6); opacity: 0; transition: opacity .2s; }
.bn-pop.on { opacity: 1; }
.bn-pop[hidden] { display: none; }
.bn-pop-box { position: relative; max-width: min(640px, 100%); max-height: calc(100vh - 32px); transform: scale(.96); transition: transform .2s; }
.bn-pop.on .bn-pop-box { transform: none; }
.bn-pop-video { width: min(900px, 100%); max-width: none; }
.bn-pop-box .bn img { display: block; max-width: 100%; max-height: calc(100vh - 32px); width: auto; height: auto; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.bn-pop-box .bn-html { background: var(--card); color: var(--text); border-radius: 12px; padding: 1rem; overflow: auto; max-height: calc(100vh - 32px); }
.bn-yt { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #000; border-radius: 12px; overflow: hidden; }
.bn-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bn-pop-x { position: absolute; top: -12px; right: -12px; z-index: 2; min-width: 36px; height: 36px; padding: 0 .6rem; border-radius: 18px; border: 0; background: #fff; color: #0f172a; font-size: .95rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.bn-pop-x span { font-weight: 400; color: #64748b; font-size: .85rem; }
html.bn-pop-open { overflow: hidden; }
@media (max-width: 640px) { .bn-pop-x { top: -14px; right: -6px; } }
/* วันหยุดยาว */
.hol-list { display: grid; gap: .7rem; margin: 1rem 0 1.5rem; }
.hol-card { display: flex; align-items: center; gap: 1rem; }
.hol-next { border-color: var(--brand, #2563eb); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, #2563eb) 25%, transparent); }
.hol-days { flex: 0 0 64px; height: 64px; border-radius: 12px; background: #fff7ed; color: #c2410c; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.hol-days b { font-size: 1.6rem; }
.hol-days span { font-size: .75rem; }
.hol-body { flex: 1; min-width: 0; }
.hol-now { color: #15803d; font-weight: 600; }
.hol-routes { flex-wrap: wrap; gap: .5rem; display: flex; }
.hol-table td { padding: .45rem .6rem; }
@media (max-width: 560px) { .hol-card { flex-wrap: wrap; } .hol-card .btn { width: 100%; text-align: center; } }
.bn-yt-unmute { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); z-index: 2; padding: .75rem 1.3rem; border: 0; border-radius: 999px; background: rgba(15, 23, 42, .82); color: #fff; font: inherit; font-size: 1.05rem; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.35); animation: bn-pulse 1.8s ease-in-out infinite; white-space: nowrap; }
.bn-yt-unmute:hover { background: rgba(15, 23, 42, .95); }
@keyframes bn-pulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .bn-yt-unmute { animation: none; } }
/* ปุ่มหาที่พัก */
.stay-box { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 1.2rem 0; padding: .75rem 1rem; border: 1px dashed var(--line); border-radius: 12px; background: var(--card); }
.stay-ico { font-size: 1.6rem; line-height: 1; }
.stay-txt { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.stay-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.stay-btn { background: #fff; color: var(--text); border: 1px solid var(--line); }
.stay-btn:hover { text-decoration: none; border-color: var(--brand, #2563eb); }
.stay-agoda::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #e2263a; margin-right: .4rem; vertical-align: middle; }
.stay-booking::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #003b95; margin-right: .4rem; vertical-align: middle; }
@media (max-width: 560px) { .stay-btns { width: 100%; } .stay-btn { flex: 1; text-align: center; } }

/* ปุ่มกลับขึ้นด้านบน: โผล่เมื่อเลื่อนลงมาเกินหนึ่งหน้าจอ ยกขึ้นเองถ้ามีแถบลอยด้านล่าง */
.to-top { position: fixed; right: 16px; bottom: calc(16px + var(--to-top-lift, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 950; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--hdr-on, #2563eb); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(15, 23, 42, .25); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s, transform .2s, visibility .2s, bottom .2s; }
.to-top.show { opacity: .92; visibility: visible; transform: none; }
.to-top:hover { opacity: 1; }
.to-top:focus-visible { outline: 3px solid color-mix(in srgb, var(--hdr-on, #2563eb) 40%, transparent); outline-offset: 2px; }
@media print { .to-top { display: none; } }

/* ป้าย "ใหม่" (บริษัท/จุดจอด/เส้นทางที่เพิ่งมีในข้อมูล) */
.badge-new { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px; background: #dc2626; color: #fff; font-size: .7rem; font-weight: 700; line-height: 1.5; vertical-align: middle; letter-spacing: .02em; }
h1 .badge-new { font-size: .8rem; }

/* เส้นทางมาแรง (หน้าแรก) */
.trend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.trend-card { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; color: inherit; }
.trend-card:hover { text-decoration: none; border-color: var(--brand); }
.trend-rank { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); }
.trend-card:nth-child(-n+3) .trend-rank { background: var(--book, #f97316); color: #fff; }
.trend-name { font-weight: 600; line-height: 1.35; }

/* หน้าแรกเว็บหลัก: ทางลัดไปหน้าต่าง ๆ */
.shortcuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin-top: 1rem; }
.shortcut { display: flex; align-items: center; gap: .55rem; padding: .7rem .8rem; font-weight: 500; line-height: 1.3; }
.shortcut-ic { flex: none; width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--tint); font-size: 1.15rem; }
@media (max-width: 480px) { .shortcuts { grid-template-columns: 1fr 1fr; } .shortcut { font-size: .9rem; padding: .6rem; } }

/* ภาพพื้นหลังกล่องค้นหาหน้าแรก (admin → จัดหน้าแรก) */
.hero-img { background-image: var(--hero-layer), var(--hero-img); background-size: cover; background-repeat: no-repeat; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.hero-img .search, .hero-img .sb-pane, .hero-img #busx-search-form, .hero-img .sb-tabs button.on { text-shadow: none; }
.hero-tall { padding: 4.5rem 0 3rem; }
@media (max-width: 640px) {
  .hero-img { background-image: var(--hero-layer), var(--hero-img-sm, var(--hero-img)); }
  .hero-tall { padding: 2rem 0 1.5rem; }
}