:root{
      --brand:#0068d5;         /* ปรับเป็นสีหลักของ bigcarrent */
      --brand-2:#0284c7;       /* โทนเข้ม */
      --ink:#0f172a;           /* ข้อความหลัก */
      --muted:#64748b;         /* ข้อความรอง */
      --bg:#f8fafc;            /* พื้นหลัง */
      --card:#ffffff;          /* การ์ด */
      --ok:#16a34a;            /* สีบวก */
      --warn:#ea580c;          /* เน้น */
      --drop-blue:rgba(0,137,199,.12);
      --shadow:0 10px 30px rgba(2,8,23,.08);
      --radius:18px;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif;line-height:1.6}
    img{max-width:100%;display:block}
    a{color:var(--brand);text-decoration:none}
    .container{width:min(1200px,92%);margin-inline:auto}
    .btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;border-radius:12px;border:1px solid transparent;font-weight:600}
    .btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow)}
    .btn-outline{border-color:rgba(2,8,23,.1);background:#fff;color:var(--ink)}
    .btn-ghost{background:transparent;color:var(--ink)}
    .hide{display:none}

    /* ===== Topbar / Nav ===== */
    header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid rgba(2,8,23,.06);backdrop-filter:saturate(180%) blur(6px)}
    .nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
    .brand{display:flex;align-items:center;gap:.7rem; height:30px }
    .brand .logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:var(--shadow)}
    .brand b{font-size:1.15rem}
    .menu{display:flex;gap:1rem;align-items:center}
    .menu a{padding:.6rem .8rem;border-radius:10px;color:#0b1220}
    .menu a:hover{background:rgba(14,165,233,.08)}
    .menu .dropdown{position:relative}
    .menu .dropdown:hover .drop{opacity:1;transform:translateY(0);pointer-events:auto}
    .drop{position:absolute;left:0;top:110%;min-width:280px;background:#fff;border:1px solid rgba(2,8,23,.06);box-shadow:var(--shadow);border-radius:14px;padding:.6rem;opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none}
    .drop a{display:flex;gap:.7rem;padding:.7rem;border-radius:10px;color:var(--ink)}
    .drop a:hover{background:rgba(2,8,23,.04)}
    .nav-cta{display:flex;gap:.6rem}
    .hamb{display:none}

    /* ===== Hero Search ===== */
    .hero{position:relative;isolation:isolate;background:radial-gradient(1200px 500px at 10% -10%, rgba(14,165,233,.25), transparent),linear-gradient(180deg,#fff, #eef6fb)}
    .hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding:3.2rem 0}
    .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
    .kpi{background:#fff;border:1px solid rgba(2,8,23,.06);box-shadow:var(--shadow);border-radius:14px;padding:1rem;text-align:center}
    .kpi b{font-size:1.25rem}

    .search-box{background:var(--card);border:1px solid rgba(2,8,23,.08);box-shadow:var(--shadow);border-radius:var(--radius);padding:1rem}
    .search-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
    .field{display:flex;flex-direction:column;gap:.35rem}
    label{font-size:.85rem;color:var(--muted)}
    input,select{padding:.9rem .8rem;border-radius:12px;border:1px solid rgba(2,8,23,.12);outline:none}
    input:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(14,165,233,.15)}

    /* ===== Cities Grid ===== */
    .sec{padding:2.8rem 0}
    .sec h2{font-size:1.7rem;margin:0 0 .6rem}
    .lead{color:var(--muted);margin-bottom:1.2rem}
    .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
    .card{background:#fff;border:1px solid rgba(2,8,23,.06);box-shadow:var(--shadow);border-radius:var(--radius);overflow:hidden}
    .card .media{height:auto;overflow:hidden}
    .card .media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
    .card:hover .media img{transform:scale(1.04)}
    .card .in{padding:1rem}
    .badge{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .55rem;background:var(--drop-blue);color:var(--brand-2);border-radius:999px;font-size:.8rem}
    .ul{margin:.7rem 0 0;padding:0;list-style:none;color:var(--muted)}
    .ul li{display:flex;gap:.5rem;margin:.25rem 0}

    /* ===== Van Rental Section (ดึงโครงสร้างจากหน้าบริการเช่ารถตู้) ===== */
    .van{background:linear-gradient(180deg,#fff, #f3fbff)}
    .split{display:grid;grid-template-columns:1.1fr .9fr;gap:1.6rem;align-items:center}
    .list-check{list-style:none;padding:0;margin:0}
    .list-check li{margin:.45rem 0;display:flex;gap:.6rem}
    .check{flex:0 0 22px;height:22px;border-radius:6px;background:rgba(22,163,74,.12);display:grid;place-items:center}
    .check svg{width:14px;height:14px;fill:var(--ok)}
    .price-table{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
    .price{background:#fff;border:1px solid rgba(2,8,23,.06);border-radius:16px;padding:1rem;box-shadow:var(--shadow)}
    .price h4{margin:.3rem 0}

    /* ===== Steps ===== */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
    .step{background:#fff;border:1px solid rgba(2,8,23,.06);border-radius:16px;padding:1rem;box-shadow:var(--shadow)}
    .num{width:34px;height:34px;border-radius:10px;background:rgba(14,165,233,.15);display:grid;place-items:center;font-weight:700}

    /* ===== Articles Menu ===== */
    .blogbar{position:relative;border-top:1px solid rgba(2,8,23,.06);border-bottom:1px solid rgba(2,8,23,.06);background:#fff}
    .blogbar .row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;padding:.6rem 0}
    .chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .8rem;border-radius:999px;background:rgba(2,8,23,.04);border:1px solid rgba(2,8,23,.06);font-size:.9rem}

    .articles{display:grid;grid-template-columns:2fr 1fr;gap:1.4rem}
    .post{display:grid;grid-template-columns:140px 1fr;gap:.9rem;background:#fff;border:1px solid rgba(2,8,23,.06);border-radius:16px;padding:.8rem;align-items:center}
    .post h4{margin:.2rem 0 .4rem}
    .muted{color:var(--muted)}
    .side{background:#fff;border:1px solid rgba(2,8,23,.06);border-radius:16px;padding:1rem;height:max-content}
    .side ul{list-style:none;margin:0;padding:0}
    .side li{padding:.45rem 0;border-bottom:1px dashed rgba(2,8,23,.08)}

    /* ===== Footer ===== */
    footer{margin-top:2.4rem;background:#0b1220;color:#cbd5e1}
    .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:1.2rem;padding:2rem 0}
    footer a{color:#cbd5e1}
    .copyright{border-top:1px solid rgba(255,255,255,.08);padding:1rem 0;color:#94a3b8}

    /* ===== Responsive ===== */
    @media (max-width: 1024px){
      .hero .wrap,.split{grid-template-columns:1fr}
      .grid{grid-template-columns:repeat(2,1fr)}
      .steps{grid-template-columns:repeat(2,1fr)}
      .price-table{grid-template-columns:repeat(2,1fr)}
      .articles{grid-template-columns:1fr}
      .kpis{grid-template-columns:repeat(3,1fr)}
    }
    @media (max-width: 720px){
      .menu{display:none}
      .hamb{display:inline-flex}
      .search-grid{grid-template-columns:1fr 1fr}
      .grid{grid-template-columns:1fr}
      .steps{grid-template-columns:1fr}
      .price-table{grid-template-columns:1fr}
      .post{grid-template-columns:1fr}
      .kpis{grid-template-columns:1fr 1fr 1fr}
    }