@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Mitr:wght@400;500;600&display=swap");
:root {
  --navy: #0b2d53;
  --blue: #1677ff;
  --sky: #eaf7ff;
  --lime: #b9ef1f;
  --lime2: #8ddb00;
  --ink: #13243a;
  --muted: #66758a;
  --line: #dce7ef;
  --white: #fff;
  --bg: #f7fbfe;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: "IBM Plex Sans Thai", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
h1,
h2,
h3,
.brand {
  font-family: "Mitr", "IBM Plex Sans Thai", sans-serif;
}
header {
  height: 76px;
  padding: 0 max(4vw, 22px);
  display: flex;
  align-items: center;
  gap: 28px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand {
  display: flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  font-size: 21px;
}
.brand img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  margin-right: 9px;
}
.brand span {
  display: grid;
  place-items: center;
  width: 43px;
  height: 48px;
  background: var(--navy);
  clip-path: polygon(50% 0, 100% 18%, 91% 78%, 50% 100%, 9% 78%, 0 18%);
  color: var(--lime);
  font: 600 14px Mitr;
  margin-right: 9px;
}
.pricing { padding: 55px max(4vw,24px); background:#eef7fc; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:20px; align-items:stretch; }
.pricingIntro { padding:18px 24px 18px 0; }
.pricingIntro h2 { font-size:36px; line-height:1.25; margin:8px 0; }
.pricingIntro p { color:var(--muted); max-width:480px; }
.priceCard { background:#fff; border:1px solid var(--line); border-radius:20px; padding:25px; box-shadow:0 12px 30px #123c5510; }
.priceCard>span { color:var(--blue); font-size:12px; font-weight:800; letter-spacing:1.5px; }
.priceCard h3 { font-size:20px; margin:10px 0; }
.priceCard>strong { display:block; font-size:39px; color:var(--navy); margin:10px 0; }
.priceCard>strong small { font-size:14px; color:var(--muted); }
.priceCard p { color:var(--muted); min-height:48px; }
.priceCard button { width:100%; border:0; border-radius:11px; padding:13px; background:var(--navy); color:white; font-weight:700; }
.featuredPrice { border-color:#a9d82a; box-shadow:0 14px 34px #acd52233; }
.featuredPrice button { background:linear-gradient(100deg,var(--lime2),var(--lime)); color:#173600; }
.brand strong {
  font-weight: 500;
}
nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
nav button,
.tabs button {
  border: 0;
  background: transparent;
  padding: 10px 13px;
  color: var(--ink);
}
.line,
.primary,
.createTop {
  border: 0;
  border-radius: 11px;
  background: var(--navy);
  color: #fff;
  padding: 11px 17px;
  font-weight: 700;
  text-decoration: none;
}
.createTop {
  background: var(--lime);
  color: var(--navy);
  box-shadow: 0 8px 22px #a6d91f55;
}
.hero {
  min-height: 570px;
  padding: 55px max(4vw, 28px);
  display: grid;
  grid-template-columns: 1.05fr 0.3fr 0.92fr;
  gap: 35px;
  align-items: center;
  background:
    radial-gradient(circle at 72% 40%, #c7efff 0, transparent 18%),
    linear-gradient(110deg, #fff 0, #e9f7ff 58%, #f8fcff 100%);
  overflow: hidden;
}
.kicker {
  display: inline-block;
  color: #2f72c8;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.hero h1 {
  font-size: clamp(48px, 5.2vw, 76px);
  line-height: 1.08;
  margin: 12px 0 24px;
  font-weight: 500;
  letter-spacing: -2px;
}
.hero h1 em {
  color: var(--blue);
  font-style: normal;
}
.heroCopy > p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 600px;
}
.heroBadges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.heroBadges span {
  border: 1px solid #b9d5e6;
  background: #ffffffaa;
  border-radius: 7px;
  padding: 7px 11px;
  font-size: 13px;
  font-weight: 600;
}
.mapLine {
  height: 390px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--navy);
}
.thMap { position:relative; height:390px; padding:20px; background:radial-gradient(ellipse at center,#e4f4ff 0,transparent 70%); }
.thMap::before { content:""; position:absolute; inset:28px 6px; border:2px solid #cfe7f7; border-radius:45% 35% 50% 30%/25% 45% 35% 55%; transform:rotate(-5deg); opacity:.75; }
.thMap i { position:relative; z-index:1; width:6px; background:#278dff; transform:rotate(6deg); }
.thMap i::before,.thMap i::after,.thMap i span { content:""; position:absolute; left:50%; width:13px; height:13px; border:3px solid #258cff; background:#fff; border-radius:50%; transform:translateX(-50%); }
.thMap i::before { top:-7px; width:22px; height:22px; background:#258cff; box-shadow:0 0 0 8px #d7edff; }
.thMap i::after { bottom:-7px; width:22px; height:22px; background:#258cff; box-shadow:0 0 0 8px #d7edff; }
.thMap i span:nth-child(1){top:27%}.thMap i span:nth-child(2){top:51%}.thMap i span:nth-child(3){top:72%}
.mapLine i {
  width: 7px;
  flex: 1;
  margin: 12px;
  background: linear-gradient(var(--blue), #48a6ff);
  border-radius: 99px;
  transform: rotate(7deg);
  box-shadow: 0 0 30px #1285ff55;
}
.mapLine b,
.mapLine strong {
  font-size: 13px;
}
.searchCard {
  background: #fff;
  border: 1px solid #d8e7f0;
  border-radius: 22px;
  padding: 25px;
  box-shadow: 0 24px 60px #2e6a8c1c;
  display: grid;
  gap: 14px;
}
.searchTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.searchTitle small {
  color: var(--muted);
}
.searchTitle h2 {
  font-size: 25px;
  margin: 3px 0;
}
.swap {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  color: var(--blue);
}
label {
  font-weight: 600;
  font-size: 14px;
}
input,
select,
textarea {
  width: 100%;
  border: 1px solid #cddde7;
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  color: var(--ink);
  margin-top: 6px;
}
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid #2b8cff22;
  border-color: var(--blue);
}
textarea {
  min-height: 90px;
}
.two,
.grid.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.searchBtn {
  border: 0;
  border-radius: 10px;
  padding: 14px;
  background: linear-gradient(100deg, var(--lime2), var(--lime));
  color: #173600;
  font-weight: 800;
  box-shadow: 0 10px 24px #a9dc2266;
}
.micro {
  text-align: center;
  color: #8995a4;
}
.safetyStrip {
  margin: 24px max(2vw, 14px);
  padding: 14px 24px;
  border: 1px solid #cddfe9;
  background: #fff;
  border-radius: 16px;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  box-shadow: 0 8px 28px #315b7310;
}
.safetyStrip > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 18px;
  border-right: 1px solid var(--line);
}
.safetyStrip > div:last-child {
  border: 0;
}
.safetyStrip i {
  color: var(--blue);
  font-style: normal;
}
.safetyStrip p {
  margin: 0;
}
.safetyStrip b,
.safetyStrip small {
  display: block;
}
.safetyStrip small {
  color: var(--muted);
  font-size: 12px;
}
.shield {
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--lime);
  width: 40px;
  height: 44px;
  clip-path: polygon(50% 0, 100% 18%, 91% 78%, 50% 100%, 9% 78%, 0 18%);
}
.featured {
  padding: 45px max(4vw, 24px) 70px;
}
.sectionHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
}
.sectionHead h2 {
  font-size: 34px;
  margin: 5px 0;
}
.sectionHead button {
  border: 0;
  background: none;
  color: var(--blue);
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 20px 0 34px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 20px;
  border-radius: 17px;
  box-shadow: 0 10px 28px #18394e0b;
  transition: 0.2s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px #18394e17;
}
.card h3 {
  margin: 8px 0 10px;
  font-size: 19px;
}
.card p {
  color: var(--muted);
}
.badge {
  display: inline-block;
  background: #eaf8ee;
  color: #21804e;
  border: 1px solid #bfe7cd;
  border-radius: 99px;
  padding: 4px 9px;
  font-size: 12px;
}
.price {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
}
.card button {
  border: 0;
  border-radius: 9px;
  padding: 9px 12px;
  margin: 3px;
}
.demoTrip { position:relative; min-height:265px; display:grid; grid-template-columns:105px 1fr 135px; gap:14px; background:#fff; border:1px solid #d6e3ec; border-radius:16px; padding:42px 14px 14px; box-shadow:0 8px 22px #123b5612; overflow:hidden; }
.verified { position:absolute; top:12px; left:14px; color:#218548; background:#e7f7e9; border-radius:99px; padding:4px 9px; font-size:11px; font-weight:700; }
.driver { display:flex; flex-direction:column; align-items:center; text-align:center; border-right:1px solid #e2e9ee; padding-right:12px; }
.driver img { width:74px; height:74px; border-radius:50%; object-fit:cover; margin:5px 0 8px; border:2px solid #fff; box-shadow:0 0 0 1px #cfdae2; }
.driver b { font-size:14px; }.driver small { color:#f2a800; font-size:11px; }
.demoRoute h3 { font-size:18px; margin:0 0 10px; white-space:nowrap; }.demoRoute h3 span{color:#177cff;margin:0 5px}.demoRoute p{font-size:11px;color:#51657a;margin:7px 0}.demoRoute .blueText{color:#0878ec}.gender{display:inline-block;margin-top:9px;border:1px solid #2287ff;color:#1476d9;padding:5px 8px;border-radius:7px;font-size:11px}.gender.pink{border-color:#ff74ae;color:#e83c87}.gender.purple{border-color:#9874ef;color:#7352c8}
.demoPrice { position:relative; text-align:right; padding-top:3px; }.demoPrice>span{display:inline-block;border:1px solid #cfe0ee;border-radius:7px;padding:5px;color:#24517a;font-size:11px}.demoPrice>strong{display:block;font-size:26px;color:#071f42;margin-top:8px}.demoPrice>small{font-size:10px;color:#60758a}.demoPrice>img{position:absolute;width:135px;right:-9px;bottom:16px}.demoPrice>p{position:absolute;left:0;bottom:2px;text-align:left;font-size:10px;color:#536c83;margin:0}.demoPrice>p small{color:#9aa8b3}
.secondary {
  background: #edf3f6;
  color: var(--ink);
}
.cta {
  min-height: 280px;
  padding: 50px max(8vw, 30px);
  background: linear-gradient(115deg, #08284c, #0e3c70);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cta h2 {
  font-size: 42px;
  line-height: 1.2;
  margin: 8px 0;
}
.cta p {
  color: #c7d9e9;
}
.cta button {
  border: 0;
  background: var(--lime);
  color: var(--navy);
  font-weight: 800;
  border-radius: 12px;
  padding: 15px 24px;
}
#app {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 20px 80px;
}
.tabs {
  display: flex;
  gap: 8px;
  overflow: auto;
  margin-bottom: 28px;
}
.tabs button {
  background: #fff;
  border-radius: 10px;
  white-space: nowrap;
}
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px;
  margin-bottom: 24px;
}
.narrow {
  max-width: 720px;
  margin-inline: auto;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: end;
}
.form {
  display: grid;
  gap: 16px;
}
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.check {
  grid-template-columns: auto 1fr !important;
  align-items: start;
}
.check input {
  width: auto;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.stat {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
}
.stat b {
  font-size: 28px;
  display: block;
}
dialog {
  border: 0;
  border-radius: 20px;
  max-width: 600px;
  width: calc(100% - 30px);
  padding: 28px;
}
dialog::backdrop {
  background: #00173099;
}
.close {
  float: right;
  border: 0;
  background: transparent;
  font-size: 28px;
}
#toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: var(--navy);
  color: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  display: none;
  z-index: 30;
}
footer {
  text-align: center;
  color: var(--muted);
  padding: 30px;
}
footer button {
  border: 0;
  background: none;
  text-decoration: underline;
  color: inherit;
}
footer a{color:inherit}
.notice{background:#fff7df;border:1px solid #f0d58c;border-radius:12px;padding:12px;color:#654c09;font-size:14px;line-height:1.55}
.requestRow{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px;margin:10px 0}.requestRow small,.requestRow span{grid-column:1/-1}.requestRow button{grid-column:auto;padding:8px 12px}
.tripActions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.danger{background:#fff0f0;color:#a31324;border:1px solid #e9a1a9}.buttonLink{display:inline-block;text-decoration:none;text-align:center}.chatMessages{height:min(55vh,430px);overflow:auto;background:#f4f8fb;border-radius:14px;padding:12px;margin:16px 0}.chatBubble{max-width:82%;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;margin:8px 0}.chatBubble.mine{margin-left:auto;background:#e9f7dc}.chatBubble p{margin:5px 0;white-space:pre-wrap}.chatBubble small{color:var(--muted)}.chatForm{display:grid;grid-template-columns:1fr auto;gap:8px}.sharePage{max-width:720px;margin:40px auto;padding:20px}.sharePage>img{width:180px;margin:0 0 24px}.legal{max-width:820px;margin:0 auto;padding:48px 22px 80px;line-height:1.8}.legal h1{font-size:42px;color:var(--navy)}.legal h2{margin-top:32px;color:var(--navy)}
.systemNotice{max-width:1100px;margin:16px auto;background:#fff1f1;border:1px solid #e9818e;color:#761323;border-radius:16px;padding:18px 20px;white-space:pre-line}.systemNotice b{font-size:18px}.systemNotice button{background:#761323;color:#fff;border:0;border-radius:9px;padding:9px 16px}
.safetyBody{background:#f3f8fc;color:#08264a}.safetyHeader{position:static;display:flex;justify-content:space-between}.safetyCenter{max-width:1180px;margin:0 auto;padding:34px 20px 80px}.safetyHero{background:linear-gradient(125deg,#062a50,#114f83);border-radius:28px;padding:42px;color:#fff;box-shadow:0 22px 45px #082a5126}.safetyHero>span{color:#baff15;font-weight:800}.safetyHero h1{font-size:clamp(36px,6vw,66px);line-height:1.05;margin:12px 0}.safetyHero p{max-width:780px;color:#dcebf6;font-size:18px}.urgentActions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}.urgentActions a{background:#fff;color:#0a2b4e;text-decoration:none;border-radius:14px;padding:18px;text-align:center;font-size:20px;font-weight:900}.urgentActions a:first-child{background:#ff4057;color:#fff}.safetyCenter section+section{margin-top:42px}.hotlineGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.hotline{display:grid;grid-template-columns:92px 1fr;background:#fff;border:1px solid #d6e2ec;border-radius:18px;padding:18px;text-decoration:none;color:#0b2d53;box-shadow:0 8px 20px #102d4a0a}.hotline b{grid-row:1/3;font-size:32px;color:#0877e9}.hotline span{font-weight:800;font-size:17px}.hotline small{color:#667c90;margin-top:5px}.alertLinks{display:grid;grid-template-columns:1fr 1fr;gap:12px}.alertLinks a{background:#e5f2ff;border:1px solid #a9cff3;padding:16px;border-radius:13px;color:#075da9;text-decoration:none;font-weight:700}.safetySteps{background:#fff;border-radius:20px;padding:24px}.safetySteps li{padding:7px}.safetyVerified{color:#60768b;text-align:center;margin-top:36px;font-size:13px}
@media (max-width: 900px) {
  header nav {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .mapLine {
    display: none;
  }
  .hero h1 {
    font-size: 54px;
  }
  .safetyStrip {
    grid-template-columns: 1fr 1fr;
  }
  .safetyStrip > div {
    border: 0;
  }
  .cards {
    grid-template-columns: 1fr 1fr;
  }
  .demoTrip { grid-template-columns:90px 1fr; }.demoPrice{grid-column:2}.demoPrice>img{position:static;width:120px}.demoPrice>p{position:static}
  .cta h2 {
    font-size: 34px;
  }
}
@media (max-width: 620px) {
  header {
    gap: 10px;
    padding: 0 14px;
  }
  .brand strong {
    display: none;
  }
  .createTop {
    display: none;
  }
  .line {
    font-size: 13px;
    padding: 9px 11px;
  }
  .hero {
    padding: 45px 18px;
  }
  .hero h1 {
    font-size: 43px;
  }
  .heroCopy > p {
    font-size: 16px;
  }
  .safetyStrip,
  .cards,
  .columns,
  .stats,
  .grid,
  .pricing {
    grid-template-columns: 1fr;
  }
  .demoTrip { grid-template-columns:82px 1fr; }.demoRoute h3{white-space:normal}.demoPrice{grid-column:1/-1;min-height:125px}.demoPrice>img{float:right}.demoPrice>p{position:static}
  .safetyStrip {
    padding: 14px;
  }
  .sectionHead {
    align-items: start;
  }
  .sectionHead h2 {
    font-size: 27px;
  }
  .featured {
    padding-inline: 16px;
  }
  .cta {
    display: block;
  }
  .cta button {
    margin-top: 18px;
  }
  .two,
  .grid.two {
    grid-template-columns: 1fr 1fr;
  }
  .urgentActions,.hotlineGrid,.alertLinks{grid-template-columns:1fr}.safetyHero{padding:28px 20px}.safetyHeader{padding-inline:14px}.safetyHeader .brand strong{display:block}.hotline{grid-template-columns:76px 1fr}
}