/* Lampang EV Carrent - redesign shared CSS (tokens + site). */
/* =============================================================
   LAMPANG EV CARRENT — Design Tokens (v2 · CI-aligned)

   Reflects the canonical Corporate Identity:
   bright Lampang green + dark navy/forest + yellow lightning bolt
   + cream off-white surfaces. Pulled from the brand's logo files
   (logos/logo-color.jpg, logos/logo-mono.png) and the reference
   poster set (assets/reference/*).

   Two presentation modes are supported:
   - LIGHT MODE (canonical CI): green-on-cream, clean and friendly.
     The look of every poster, the rate card, and the logo cover.
   - DARK MODE (website hero / premium): deep forest + warm gold.
     The look of the shipped lampangevcarrent.com hero, modal, and
     dark sections. Use sparingly — for premium framing only.
   ============================================================= */



:root {
  /* ── BRAND CORE ─────────────────────────────────────────── */
  /* Lampang Green — the bright brand green from the logo's car body
     and the "EV CARRENT" wordmark. Use for headlines, CTAs,
     ribbon banners, success markers. */
  --lec-green-700: #0e7a45;
  --lec-green-600: #15a35a;    /* Primary brand green */
  --lec-green-500: #1ab067;    /* Bright (gradient pair top) */
  --lec-green-400: #2ec373;    /* Highlight */
  --lec-green-100: #dcfce7;
  --lec-green-50:  #f0fdf4;
  --lec-green-border: #bbf7d0;

  /* Forest / Navy — the deep dark used in the logo's "LAMPANG"
     wordmark and the charging plug. Page text on light bg,
     and the page bg on the website's dark sections. */
  --lec-navy-900: #0a1a14;     /* Deepest — dark section bg */
  --lec-navy-800: #0f2318;     /* Site dark surface */
  --lec-navy-700: #163020;     /* Card on dark */
  --lec-navy-600: #1a3a26;     /* Wordmark navy */
  --lec-navy-500: #284a36;

  /* Yellow Bolt — the lightning glyph in the logo. Used as a
     spot accent: small icon-fills, energy markers, and as the
     warm pop inside an otherwise green/cream/navy composition.
     Use very sparingly. */
  --lec-bolt-600: #e8b513;
  --lec-bolt-500: #fbd116;     /* Logo bolt yellow */
  --lec-bolt-400: #ffdd3a;

  /* Gold — *only* for the premium dark-mode aesthetic on the
     website hero, modals, and the boutique-hotel framing. Not
     part of canonical CI. Don't pair gold + bright-green in the
     same composition; pick a mode. */
  --lec-gold-700: #a07a2a;
  --lec-gold-600: #c4973a;
  --lec-gold-500: #e8b84b;
  --lec-gold-400: #f0c94d;
  --lec-gold-100: #fdf3dc;
  --lec-gold-border: #f0d080;

  /* Neutrals */
  --lec-ink:    #1a1a1a;       /* Body copy on light */
  --lec-ink-2:  #374151;
  --lec-muted:  #6b7280;
  --lec-muted-2:#9ca3af;
  --lec-border: #e5e7eb;
  --lec-border-soft: #f0f0f0;

  /* Cream surfaces — the slightly-warm off-whites the CI uses.
     Cream-warm is the canonical poster background; cream-cool is
     the website's lighter sections. */
  --lec-cream:      #f4f4f0;   /* CI poster bg (logo cover) */
  --lec-cream-cool: #fafdf7;   /* Website light section bg */
  --lec-white:      #ffffff;

  /* Semantic */
  --lec-success: #15a35a;
  --lec-warn:    #d97706;
  --lec-danger:  #dc2626;
  --lec-info:    #2563eb;

  /* Channel colors */
  --lec-line:    #06c755;
  --lec-fb:      #1877f2;
  --lec-google-blue:   #4285f4;
  --lec-google-green:  #34a853;
  --lec-google-yellow: #fbbc04;
  --lec-google-red:    #ea4335;

  /* Tier colors (rate-card) — the canonical CI uses dark-green
     capsule labels for tier headers; these named tokens map to
     legacy 5-tier work and aren't part of the current design. */
  --lec-tier-anchor: #163020;    /* 1 วัน · full price */
  --lec-tier-mid:    #15a35a;    /* 2-4 วัน */
  --lec-tier-sweet:  #0e7a45;    /* 5 วัน+ · best */
  --lec-tier-long:   #6366f1;
  --lec-tier-month:  #64748b;

  /* ── ELEVATION & SHAPE ─────────────────────────────────── */
  --lec-radius-xs: 4px;
  --lec-radius-sm: 6px;
  --lec-radius:    10px;
  --lec-radius-md: 12px;
  --lec-radius-lg: 14px;
  --lec-radius-xl: 16px;
  --lec-radius-2xl: 22px;
  --lec-radius-pill: 999px;

  --lec-shadow-sm: 0 2px 12px rgba(0,0,0,0.06);
  --lec-shadow:    0 2px 16px rgba(0,0,0,0.08);
  --lec-shadow-md: 0 8px 32px rgba(0,0,0,0.12);
  --lec-shadow-lg: 0 12px 40px rgba(0,0,0,0.15);
  --lec-shadow-green: 0 4px 20px rgba(21,163,90,0.30);
  --lec-shadow-gold:  0 4px 20px rgba(196,151,58,0.35);

  /* Signature gradients */
  --lec-grad-hero:      linear-gradient(160deg, #0a1a14 0%, #0f2318 50%, #163020 100%); /* @kind color */
  --lec-grad-green:     linear-gradient(135deg, #15a35a, #1ab067); /* @kind color */
  --lec-grad-green-dark:linear-gradient(135deg, #0e7a45, #15a35a); /* @kind color */
  --lec-grad-bolt:      linear-gradient(135deg, #fbd116, #ffdd3a); /* @kind color */
  --lec-grad-gold:      linear-gradient(135deg, #c4973a, #e8b84b); /* @kind color */
  --lec-grad-gold-bar:  linear-gradient(90deg, #c4973a, #f0c94d, #c4973a); /* @kind color */
  --lec-grad-green-bar: linear-gradient(90deg, #15a35a, #1ab067, #15a35a); /* @kind color */

  /* ── SPACING SCALE ─────────────────────────────────────── */
  --lec-space-1: 4px;
  --lec-space-2: 8px;
  --lec-space-3: 12px;
  --lec-space-4: 16px;
  --lec-space-5: 20px;
  --lec-space-6: 24px;
  --lec-space-8: 32px;
  --lec-space-10: 40px;
  --lec-space-12: 48px;
  --lec-space-16: 64px;
  --lec-space-20: 80px;
  --lec-space-24: 96px;

  /* ── TYPE FAMILIES ─────────────────────────────────────── */
  /* Body / UI — Noto Sans Thai is what ships on the website.
     Sarabun is the alt seen on printable rate cards. */
  --lec-font-body:    'Noto Sans Thai', 'Sarabun', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* DISPLAY · Puffy — Mali at 700 is the closest Google Fonts
     match to the heavy rounded Thai display used in the poster
     headlines ("เช่ารถไฟฟ้าลำปาง", "คาร์ซีทเด็กให้บริการฟรี!").
     Use for big customer-facing headlines on posters, the
     campaign hero, and stamp/sticker decorations.
     SUBSTITUTION FLAG: the original may be a paid Thai display
     face (RBL / Anuparp / etc). Mali is the public match. */
  --lec-font-display: 'Mali', 'Noto Sans Thai', 'Sarabun', system-ui, sans-serif;

  /* DISPLAY · Architectural — Noto Sans Thai 800 with tight
     tracking, used on the rate cards and on the website. Less
     playful than Mali; use for product/page headings. */
  --lec-font-display-arch: 'Noto Sans Thai', 'Sarabun', system-ui, sans-serif;

  /* English — Inter is what the website + posters use for
     wordmarks and numerals. */
  --lec-font-en:      'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --lec-font-serif:   'Cormorant Garamond', Georgia, serif;
  --lec-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── TYPE SCALE ────────────────────────────────────────── */
  --lec-fs-hero:    clamp(40px, 6vw, 64px); /* @kind font */
  --lec-fs-display: clamp(32px, 5vw, 52px); /* @kind font */
  --lec-fs-h1:      clamp(28px, 4vw, 42px); /* @kind font */
  --lec-fs-h2:      clamp(22px, 3vw, 32px); /* @kind font */
  --lec-fs-h3:      20px; /* @kind font */
  --lec-fs-h4:      17px; /* @kind font */
  --lec-fs-lg:      16px; /* @kind font */
  --lec-fs-body:    15px; /* @kind font */
  --lec-fs-sm:      13px; /* @kind font */
  --lec-fs-xs:      11px; /* @kind font */
  --lec-fs-eyebrow: 11px; /* @kind font */

  --lec-lh-tight:   1.1; /* @kind font */
  --lec-lh-snug:    1.3; /* @kind font */
  --lec-lh-body:    1.7; /* @kind font */
  --lec-lh-loose:   2; /* @kind font */

  --lec-tracking-eyebrow: 1.5px; /* @kind font */
  --lec-tracking-wide:    2px; /* @kind font */
  --lec-tracking-tight:   -0.3px; /* @kind font */

  /* ── MOTION ────────────────────────────────────────────── */
  --lec-ease:        cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --lec-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --lec-dur-fast:    150ms; /* @kind other */
  --lec-dur:         250ms; /* @kind other */
  --lec-dur-slow:    450ms; /* @kind other */
}

/* =============================================================
   SEMANTIC PRIMITIVES
   ============================================================= */

.lec-eyebrow {
  display: inline-block;
  font-family: var(--lec-font-body);
  font-size: var(--lec-fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--lec-tracking-eyebrow);
  text-transform: uppercase;
  background: var(--lec-green-50);
  color: var(--lec-green-700);
  border: 1px solid var(--lec-green-border);
  padding: 4px 14px;
  border-radius: var(--lec-radius-xs);
}
.lec-eyebrow--dark {
  background: rgba(26,176,103,0.12);
  color: var(--lec-green-400);
  border-color: rgba(26,176,103,0.30);
}
.lec-eyebrow--gold {
  background: var(--lec-gold-100);
  color: var(--lec-gold-700);
  border-color: var(--lec-gold-border);
}
.lec-eyebrow--gold-dark {
  background: rgba(196,151,58,0.15);
  color: var(--lec-gold-500);
  border-color: rgba(196,151,58,0.30);
}

.lec-display       { font-family: var(--lec-font-display); font-size: var(--lec-fs-display); font-weight: 700; line-height: var(--lec-lh-tight); }
.lec-display--arch { font-family: var(--lec-font-display-arch); font-weight: 800; letter-spacing: var(--lec-tracking-tight); }
.lec-h1   { font-family: var(--lec-font-display-arch); font-size: var(--lec-fs-h1); font-weight: 800; line-height: 1.2; letter-spacing: var(--lec-tracking-tight); color: var(--lec-navy-900); }
.lec-h2   { font-family: var(--lec-font-display-arch); font-size: var(--lec-fs-h2); font-weight: 800; line-height: 1.25; }
.lec-h3   { font-family: var(--lec-font-display-arch); font-size: var(--lec-fs-h3); font-weight: 700; line-height: 1.3; }
.lec-body { font-family: var(--lec-font-body); font-size: var(--lec-fs-body); line-height: var(--lec-lh-body); color: var(--lec-ink); }
.lec-caption { font-family: var(--lec-font-body); font-size: var(--lec-fs-sm); color: var(--lec-muted); line-height: 1.6; }
.lec-num  { font-family: var(--lec-font-en); font-weight: 800; font-feature-settings: 'tnum' 1; }

.lec-divider-green {
  width: 48px; height: 3px;
  background: var(--lec-grad-green);
  border-radius: 2px;
}
.lec-divider-gold {
  width: 48px; height: 3px;
  background: var(--lec-grad-gold);
  border-radius: 2px;
}

/* Buttons */
.lec-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--lec-radius-sm);
  font-family: var(--lec-font-body);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--lec-dur) var(--lec-ease), box-shadow var(--lec-dur) var(--lec-ease), background var(--lec-dur) var(--lec-ease);
}
.lec-btn:hover { transform: translateY(-1px); }

.lec-btn--green {
  background: var(--lec-grad-green);
  color: var(--lec-white);
  box-shadow: var(--lec-shadow-green);
}
.lec-btn--green:hover { box-shadow: 0 8px 30px rgba(21,163,90,0.50); }

.lec-btn--navy {
  background: var(--lec-navy-900);
  color: var(--lec-bolt-500);
}

.lec-btn--gold {
  background: var(--lec-grad-gold);
  color: var(--lec-navy-900);
  box-shadow: var(--lec-shadow-gold);
}
.lec-btn--gold:hover { box-shadow: 0 8px 30px rgba(196,151,58,0.5); }

.lec-btn--outline {
  background: transparent;
  color: var(--lec-navy-900);
  border: 1px solid var(--lec-border);
}
.lec-btn--outline:hover { border-color: var(--lec-green-600); color: var(--lec-green-700); }

.lec-btn--line {
  background: var(--lec-line);
  color: var(--lec-white);
  box-shadow: var(--lec-shadow-green);
}

/* ── Brand patterns: ribbon, stamp, leaf-check ─────────────── */
/* Green ribbon banner — the CI poster's hero-headline pattern.
   Wrap a heading with this for the "เช่ารถกับเรา" / "โปรโมชั่นพิเศษ!" feel. */
.lec-ribbon {
  display: inline-block;
  padding: 10px 26px 10px 22px;
  background: var(--lec-grad-green-dark);
  color: #fff;
  font-family: var(--lec-font-display);
  font-weight: 700;
  letter-spacing: 0.5px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%);
  box-shadow: 0 4px 16px rgba(21,163,90,0.30);
}

/* Circular price stamp — the red "เริ่มต้นเพียง 1,200.-/วัน"
   sticker pattern. */
.lec-stamp {
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 130px; height: 130px;
  background: var(--lec-danger);
  color: #fff;
  border-radius: 50%;
  font-family: var(--lec-font-body);
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
  padding: 12px;
  box-shadow: 0 8px 28px rgba(220,38,38,0.4);
  transform: rotate(-6deg);
}
.lec-stamp .amt { font-family: var(--lec-font-en); font-size: 26px; font-weight: 800; letter-spacing: -1px; }
.lec-stamp .lbl { font-size: 11px; font-weight: 600; opacity: 0.9; margin-bottom: 2px; }

/* Leaf-check — small green checkmark used in benefit lists. */
.lec-leaf-check {
  width: 22px; height: 22px;
  background: var(--lec-green-600);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Lampang EV Carrent — Redesign · Canonical CI mode
   Cream + bright Lampang green + dark navy + yellow bolt + leafy.
   Built fresh to the canonical CI direction, NOT the legacy
   dark-forest/gold mode used on the original lampang-ev-website.html. */



* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: 'Noto Sans Thai', system-ui, sans-serif;
  color: var(--lec-ink);
  background: var(--lec-cream);
}

/* ── ARTBOARD root ───────────────────────────────────────── */
.lec-art {
  width: 1440px;
  background: var(--lec-cream);
  position: relative;
  overflow: hidden;
  font-family: 'Noto Sans Thai', sans-serif;
  color: var(--lec-ink);
}

/* botanical leaf scatter — used decoratively at corners */
.leaf-scatter::before, .leaf-scatter::after {
  content: ''; position: absolute; pointer-events: none;
  background: linear-gradient(135deg, #15a35a, #0e7a45);
  border-radius: 0 100% 0 100%;
  opacity: 0.10;
}
.leaf-scatter::before { width: 220px; height: 220px; top: -60px; right: -40px; transform: rotate(28deg); }
.leaf-scatter::after  { width: 180px; height: 180px; bottom: -50px; left: -30px; transform: rotate(220deg); opacity: 0.08; }

/* ── NAV BAR ─────────────────────────────────────────────── */
.lec-topnav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px;
  padding: 22px 56px;
  position: relative; z-index: 5;
}
.lec-topnav .logo { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.lec-topnav .logo img { height: 52px; width: auto; }
.lec-topnav .links { display: flex; gap: 34px; list-style: none; flex-wrap: nowrap; }
.lec-topnav .links a {
  font-size: 14px; font-weight: 600; color: var(--lec-navy-600);
  text-decoration: none; letter-spacing: 0.2px; white-space: nowrap;
  position: relative; padding: 4px 0;
}
.lec-topnav .links a.active { color: var(--lec-green-700); }
.lec-topnav .links a.active::after,
.lec-topnav .links a:hover::after {
  transform: scaleX(1);
}
.lec-topnav .links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--lec-green-600); transform: scaleX(0);
  transition: transform .25s var(--lec-ease);
}
.lec-topnav .links a.active::after { transform: scaleX(1); }
.lec-topnav .actions { display: flex; gap: 14px; align-items: center; }
.lec-lang-toggle {
  display: inline-flex; background: #fff; border: 1px solid var(--lec-border);
  border-radius: 999px; padding: 3px; font-size: 12px; font-weight: 700;
}
.lec-lang-toggle button {
  background: transparent; border: none; padding: 6px 12px; border-radius: 999px;
  font-family: inherit; cursor: pointer; color: var(--lec-muted);
  letter-spacing: 0.5px;
}
.lec-lang-toggle button.active { background: var(--lec-navy-600); color: #fff; }

.lec-cta-pill {
  background: linear-gradient(135deg, #15a35a, #1ab067);
  color: #fff; border: none; cursor: pointer;
  padding: 12px 24px; border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 800;
  letter-spacing: 0.3px; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(21,163,90,0.30);
  transition: transform .25s var(--lec-ease), box-shadow .25s var(--lec-ease);
}
.lec-cta-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(21,163,90,0.42); }

.lec-cta-outline {
  background: transparent; color: var(--lec-navy-900); border: 1.5px solid var(--lec-navy-900);
  padding: 11px 22px; border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  letter-spacing: 0.3px; white-space: nowrap;
  transition: all .25s var(--lec-ease);
  cursor: pointer;
}
.lec-cta-outline:hover { background: var(--lec-navy-900); color: #fff; }

/* ── EYEBROW + RIBBON variants ───────────────────────────── */
.lec-eb {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--lec-green-700);
}
.lec-eb .dot { width: 6px; height: 6px; background: var(--lec-green-600); border-radius: 50%; }

.lec-ribbon-pill {
  display: inline-block;
  padding: 12px 32px 12px 24px;
  background: linear-gradient(135deg, #0e7a45, #15a35a);
  color: #fff;
  font-family: 'Mali', sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 22px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%);
  box-shadow: 0 6px 20px rgba(21,163,90,0.30);
}

/* ── Stamp (price sticker) ───────────────────────────────── */
.lec-stamp-big {
  width: 132px; height: 132px;
  background: var(--lec-danger);
  color: #fff; border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 12px;
  box-shadow: 0 12px 36px rgba(220,38,38,0.45);
  transform: rotate(-7deg);
  font-weight: 700;
}
.lec-stamp-big .lbl { font-size: 11px; opacity: 0.95; }
.lec-stamp-big .amt { font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -1px; line-height: 1; margin: 3px 0; }
.lec-stamp-big .unit { font-size: 11px; opacity: 0.85; }

/* ── Mali display headline ───────────────────────────────── */
.lec-mali { font-family: 'Mali', 'Noto Sans Thai', sans-serif; font-weight: 700; }
.lec-display-puffy {
  font-family: 'Mali', sans-serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--lec-navy-900);
}
.lec-display-puffy .green { color: var(--lec-green-600); }
.lec-display-puffy .stroke {
  -webkit-text-stroke: 4px #fff;
  paint-order: stroke fill;
  color: var(--lec-green-600);
}

.lec-h-arch {
  font-family: 'Noto Sans Thai', sans-serif;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--lec-navy-900);
  line-height: 1.1;
}
.lec-sub-serif {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--lec-navy-600);
}

/* ── Trust-line strip ────────────────────────────────────── */
.lec-trust-strip {
  display: flex; gap: 0;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
  overflow: hidden;
  border: 1px solid var(--lec-border-soft);
}
.lec-trust-item {
  flex: 1; padding: 22px 24px;
  border-right: 1px solid var(--lec-border-soft);
  display: flex; align-items: center; gap: 14px;
}
.lec-trust-item:last-child { border-right: none; }
.lec-trust-icon {
  width: 48px; height: 48px; min-width: 48px;
  background: linear-gradient(135deg, #15a35a, #1ab067);
  border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(21,163,90,0.30);
}
.lec-trust-icon svg { width: 22px; height: 22px; stroke-width: 2; }
.lec-trust-item .h { font-size: 14px; font-weight: 800; color: var(--lec-navy-900); line-height: 1.2; }
.lec-trust-item .s { font-size: 12px; color: var(--lec-muted); margin-top: 3px; }

/* ── Booking dock — floating widget ──────────────────────── */
.lec-booking-dock {
  background: #fff;
  border-radius: 24px;
  padding: 18px 22px;
  box-shadow: 0 20px 60px rgba(10,26,20,0.12);
  border: 1px solid var(--lec-border-soft);
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr auto;
  gap: 16px;
  align-items: center;
}
.lec-dock-field { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; border-right: 1px solid var(--lec-border-soft); }
.lec-dock-field:last-of-type { border-right: none; }
.lec-dock-field .l { font-size: 10px; font-weight: 700; color: var(--lec-muted); letter-spacing: 1px; text-transform: uppercase; }
.lec-dock-field .v { font-size: 15px; font-weight: 700; color: var(--lec-navy-900); margin-top: 4px; }
.lec-dock-field .v .ic { color: var(--lec-green-600); margin-right: 6px; }

/* ── Fleet horizontal showcase ───────────────────────────── */
.lec-fleet-rail {
  display: flex; gap: 22px;
  padding: 0 56px 30px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}
.lec-fleet-rail::-webkit-scrollbar { height: 6px; }
.lec-fleet-rail::-webkit-scrollbar-thumb { background: rgba(21,163,90,0.4); border-radius: 999px; }
.lec-fleet-card {
  min-width: 340px; max-width: 340px;
  background: #fff; border-radius: 22px;
  border: 1px solid var(--lec-border-soft);
  scroll-snap-align: start;
  overflow: hidden;
  position: relative;
  transition: transform .35s var(--lec-ease), box-shadow .35s var(--lec-ease);
  display: flex; flex-direction: column;
}
.lec-fleet-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(10,26,20,0.12); }
.lec-fleet-card.featured {
  background: linear-gradient(160deg, #0e7a45 0%, #163020 100%);
  color: #fff;
  border-color: transparent;
}
.lec-fleet-card .photo { aspect-ratio: 16/10; overflow: hidden; background: var(--lec-cream); display: flex; align-items: center; justify-content: center; }
.lec-fleet-card .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--lec-ease); }
.lec-fleet-card:hover .photo img { transform: scale(1.04); }
.lec-fleet-card.featured .photo { background: rgba(255,255,255,0.05); }
.lec-fleet-card .body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.lec-fleet-card .tag {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--lec-green-50); color: var(--lec-green-700);
  font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  width: fit-content;
}
.lec-fleet-card.featured .tag { background: rgba(251,209,22,0.18); color: var(--lec-bolt-500); }
.lec-fleet-card .name { font-family: 'Mali', sans-serif; font-size: 22px; font-weight: 700; line-height: 1.15; }
.lec-fleet-card .specs { display: flex; gap: 14px; font-size: 12px; color: var(--lec-muted); }
.lec-fleet-card.featured .specs { color: rgba(255,255,255,0.6); }
.lec-fleet-card .specs b { color: var(--lec-navy-900); font-family: 'Inter', sans-serif; font-weight: 700; }
.lec-fleet-card.featured .specs b { color: #fff; }
.lec-fleet-card .price-row { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--lec-border-soft); }
.lec-fleet-card.featured .price-row { border-top-color: rgba(255,255,255,0.15); }
.lec-fleet-card .price-row .from { font-size: 11px; color: var(--lec-muted); }
.lec-fleet-card.featured .price-row .from { color: rgba(255,255,255,0.55); }
.lec-fleet-card .price-row .amt { font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 800; color: var(--lec-green-700); letter-spacing: -1px; }
.lec-fleet-card.featured .price-row .amt { color: var(--lec-bolt-500); }
.lec-fleet-card .price-row .unit { font-size: 12px; color: var(--lec-muted); margin-left: 4px; font-weight: 500; }
.lec-fleet-card .lec-fleet-more { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--lec-green-600); }
.lec-fleet-card.featured .lec-fleet-more { color: var(--lec-bolt-500); }
.lec-fleet-card .lec-fleet-actions {
  margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.lec-fleet-card .lec-fleet-actions .lec-fleet-more { margin-top: 0; }
.lec-fleet-card .lec-fleet-book {
  flex: none; text-decoration: none; font-size: 13px; font-weight: 700;
  color: #fff; background: var(--lec-green-600); white-space: nowrap;
  padding: 9px 18px; border-radius: 999px;
  transition: background .2s var(--lec-ease), transform .2s var(--lec-ease);
}
.lec-fleet-card .lec-fleet-book:hover { background: var(--lec-green-700, #0f7a44); transform: translateY(-1px); }
.lec-fleet-card.featured .lec-fleet-book { background: var(--lec-bolt-500); color: var(--lec-navy-900); }

/* ── Fleet detail modal ──────────────────────────────────── */
.lec-modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10,26,20,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: lecFade .2s ease;
}
@keyframes lecFade { from { opacity: 0; } to { opacity: 1; } }
.lec-modal-box {
  background: #fff; border-radius: 24px; overflow: hidden;
  width: min(520px, 100%); max-height: 90vh; overflow-y: auto;
  box-shadow: 0 30px 90px rgba(10,26,20,0.4); position: relative;
  animation: lecPop .24s var(--lec-ease);
}
@keyframes lecPop { from { transform: translateY(16px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.lec-modal-close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.9); color: var(--lec-navy-900);
  font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(10,26,20,0.15);
}
.lec-modal-close:hover { background: #fff; transform: scale(1.05); }
.lec-modal-gallery { background: var(--lec-cream); }
.lec-modal-photo { aspect-ratio: 16/10; background: var(--lec-cream); display: flex; align-items: center; justify-content: center; }
.lec-modal-photo img { width: 100%; height: 100%; object-fit: cover; }
.lec-modal-thumbs { display: flex; gap: 8px; padding: 10px 14px 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lec-modal-thumb { flex: 0 0 auto; width: 68px; height: 46px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: none; transition: border-color .15s, transform .15s; }
.lec-modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lec-modal-thumb.active { border-color: var(--lec-green-600); }
.lec-modal-thumb:hover { transform: translateY(-1px); border-color: var(--lec-green-400, #52a97c); }
.lec-modal-body { padding: 26px 28px 28px; }
.lec-modal-tag {
  display: inline-block; padding: 5px 14px; border-radius: 999px;
  background: var(--lec-green-50); color: var(--lec-green-700);
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
}
.lec-modal-name { font-family: 'Mali', sans-serif; font-size: 28px; font-weight: 700; color: var(--lec-navy-900); margin: 12px 0 18px; line-height: 1.15; }
.lec-modal-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.lec-modal-specs > div { background: var(--lec-cream); border-radius: 14px; padding: 14px 8px; text-align: center; }
.lec-modal-specs b { display: block; font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 800; color: var(--lec-green-700); letter-spacing: -.5px; }
.lec-modal-specs span { font-size: 11px; color: var(--lec-muted); }
.lec-modal-meta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.lec-modal-meta > div { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; border: 1px solid var(--lec-border-soft); border-radius: 12px; }
.lec-modal-meta .k { font-size: 13px; color: var(--lec-muted); }
.lec-modal-meta .v { font-size: 14px; font-weight: 600; color: var(--lec-navy-900); }
.lec-modal-feats { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0 0 22px; padding: 0; }
.lec-modal-feats li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--lec-navy-900); line-height: 1.4; }
.lec-modal-feats .chk { color: var(--lec-green-600); font-weight: 800; flex-shrink: 0; }
.lec-modal-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 20px; border-top: 1px solid var(--lec-border-soft); }
.lec-modal-price .from { font-size: 12px; color: var(--lec-muted); display: block; }
.lec-modal-price .amt { font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 800; color: var(--lec-green-700); letter-spacing: -1px; }
.lec-modal-price .unit { font-size: 13px; color: var(--lec-muted); margin-left: 4px; }
.lec-modal-tiers { background: var(--lec-green-50, #f0fdf4); border: 1px solid var(--lec-border-soft); border-radius: 16px; padding: 16px 18px; margin-bottom: 22px; }
.lec-modal-tiers .tiers-head { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--lec-muted); margin-bottom: 12px; }
.lec-modal-tiers .tier-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--lec-border-soft); }
.lec-modal-tiers .tier-row:first-of-type { padding-top: 0; }
.lec-modal-tiers .tier-row.best { margin-top: 6px; padding: 10px 12px; background: var(--lec-green-600); border-radius: 10px; border: none; }
.lec-modal-tiers .tier-label { font-size: 13.5px; color: var(--lec-navy-900); }
.lec-modal-tiers .tier-row.best .tier-label { color: #fff; font-weight: 700; }
.lec-modal-tiers .tier-right { display: flex; align-items: baseline; gap: 10px; }
.lec-modal-tiers .tier-rate { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 800; color: var(--lec-green-700); letter-spacing: -.4px; }
.lec-modal-tiers .tier-row.best .tier-rate { color: #fff; }
.lec-modal-tiers .tier-unit { font-size: 11px; font-weight: 500; color: var(--lec-muted); margin-left: 2px; }
.lec-modal-tiers .tier-row.best .tier-unit { color: rgba(255,255,255,.8); }
.lec-modal-tiers .tier-save { font-size: 11px; font-weight: 700; color: var(--lec-green-700); background: rgba(22,163,74,.12); border-radius: 5px; padding: 2px 7px; }
.lec-modal-tiers .tier-row.best .tier-save { color: #fff; background: rgba(255,255,255,.22); }
.lec-modal-tiers .tiers-foot { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--lec-border-soft); font-size: 12px; color: var(--lec-muted); }
.lec-modal-tiers .tiers-foot b { color: var(--lec-navy-900); }
.lec-modal-tiers .tiers-foot .oop { line-height: 1.5; }
@media (max-width: 480px) {
  .lec-modal-specs { grid-template-columns: repeat(2, 1fr); }
  .lec-modal-feats { grid-template-columns: 1fr; }
  .lec-modal-foot { flex-direction: column; align-items: stretch; }
}

/* ── Bold variation — Choice Carousel ────────────────────── */
.lec-choice {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: 580px;
  margin: 0 56px;
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(10,26,20,0.18);
}
.lec-choice .col {
  position: relative; cursor: pointer;
  transition: flex-grow .45s var(--lec-ease);
  display: flex; flex-direction: column; justify-content: flex-end;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.lec-choice .col::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,26,20,0.85) 0%, rgba(10,26,20,0.2) 60%, transparent 100%);
}
.lec-choice .col .copy { position: relative; z-index: 1; padding: 28px 24px; color: #fff; }
.lec-choice .col .ord { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; opacity: 0.7; letter-spacing: 2px; }
.lec-choice .col .nm { font-family: 'Mali', sans-serif; font-size: 22px; font-weight: 700; margin-top: 4px; line-height: 1.1; }
.lec-choice .col .pr { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--lec-bolt-500); margin-top: 8px; opacity: 0; transition: opacity .25s; }
.lec-choice .col.active { grid-column: span 2; }
.lec-choice .col.active .pr { opacity: 1; }
.lec-choice .col.active::after {
  background: linear-gradient(to top, rgba(10,26,20,0.92) 0%, rgba(14,122,69,0.30) 50%, transparent 100%);
}

/* ── New section: Charging map ───────────────────────────── */
.lec-section { padding: 64px 56px; }
.lec-section h2 { font-family: 'Mali', sans-serif; font-size: clamp(30px, 3.8vw, 46px); font-weight: 700; color: var(--lec-navy-900); line-height: 1.12; margin: 16px 0 12px; letter-spacing: -0.5px; }
.lec-section h2 .green { color: var(--lec-green-600); }
.lec-section .lead { font-size: 16px; color: var(--lec-muted); line-height: 1.85; max-width: 640px; }

.lec-charge-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px;
  margin-top: 40px;
}
.lec-charge-map {
  background: #fff; border-radius: 24px; padding: 28px;
  border: 1px solid var(--lec-border-soft);
  box-shadow: 0 10px 32px rgba(0,0,0,0.04);
  position: relative; overflow: hidden;
  min-height: 460px;
  background-image: radial-gradient(circle at 30% 40%, rgba(21,163,90,0.06) 0%, transparent 35%),
                    radial-gradient(circle at 70% 65%, rgba(21,163,90,0.05) 0%, transparent 40%),
                    radial-gradient(circle at 85% 25%, rgba(251,209,22,0.05) 0%, transparent 30%);
}
.lec-charge-map .map-label { position: absolute; top: 28px; left: 28px; font-size: 11px; color: var(--lec-muted); letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
.lec-charge-map .pin {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
}
.lec-charge-map .pin .dot {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--lec-green-600); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(21,163,90,0.4);
  animation: pulse 2.5s infinite var(--lec-ease);
}
.lec-charge-map .pin .dot::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--lec-green-600); opacity: 0.4; animation: ring 2.5s infinite var(--lec-ease); }
.lec-charge-map .pin .lbl { margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--lec-navy-900); background: #fff; padding: 4px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); white-space: nowrap; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes ring  { 0% { transform: scale(0.9); opacity: 0.5; } 100% { transform: scale(1.5); opacity: 0; } }

.lec-charge-list { display: flex; flex-direction: column; gap: 14px; }
.lec-charge-list-h { font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--lec-muted); margin-bottom: 2px; }
.lec-charge-entry {
  background: #fff; border-radius: 14px;
  border: 1px solid var(--lec-border-soft);
  padding: 16px 18px;
  display: flex; gap: 14px; align-items: center;
}
.lec-charge-entry .ico {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--lec-green-50); color: var(--lec-green-700);
  display: flex; align-items: center; justify-content: center;
}
.lec-charge-entry .nm { font-size: 14px; font-weight: 700; color: var(--lec-navy-900); }
.lec-charge-entry .meta { font-size: 12px; color: var(--lec-muted); margin-top: 2px; }
.lec-charge-entry .kw { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 800; color: var(--lec-green-700); margin-left: auto; flex-shrink: 0; }
/* charge list as interactive buttons synced to the real map */
.lec-charge-list .lec-charge-entry { width: 100%; text-align: left; cursor: pointer; font-family: inherit; transition: all .22s var(--lec-ease); }
.lec-charge-list .lec-charge-entry:hover { border-color: rgba(21,163,90,0.4); transform: translateX(2px); }
.lec-charge-list .lec-charge-entry.active { border-color: var(--lec-green-600); background: var(--lec-green-50, #eafaf0); box-shadow: 0 6px 18px rgba(21,163,90,0.14); }
/* real-map charge pins */
.lec-charge-pin { width: 32px; height: 32px; background: var(--lec-green-600); color: #fff; border: 2px solid #fff;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center;
  font-size: 15px; box-shadow: 0 3px 10px rgba(0,0,0,0.3); }
.lec-charge-pin.base { background: var(--lec-bolt-500, #fbd116); color: var(--lec-navy-900); }
.lec-charge-pin > * { transform: rotate(45deg); }
/* charging app chips */
.lec-charge-apps { margin-top: 44px; }
.lec-charge-apps-h { font-size: 13px; font-weight: 700; color: var(--lec-navy-900); margin-bottom: 16px; }
.lec-charge-apps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lec-charge-app { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px; border-radius: 18px;
  background: #fff; border: 1.5px solid var(--lec-border-soft); text-decoration: none; transition: all .22s var(--lec-ease); }
.lec-charge-app:hover { border-color: rgba(21,163,90,0.45); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(21,163,90,0.12); }
.lec-charge-app .tile { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 800; letter-spacing: -.5px; color: #fff; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(10,26,20,0.12); }
.lec-charge-app .rec { position: absolute; top: 14px; right: 14px; background: var(--lec-green-600); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: .3px; }
.lec-charge-app .nm { font-family: 'Mali', sans-serif; font-size: 16px; font-weight: 700; color: var(--lec-navy-900); }
.lec-charge-app .by { font-size: 11px; color: var(--lec-muted); }
.lec-charge-app .note { font-size: 12px; font-weight: 600; color: var(--lec-green-700); margin-top: 4px; }
.lec-charge-all { display: inline-block; margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--lec-green-700); text-decoration: none; }
.lec-charge-all:hover { text-decoration: underline; }
@media (max-width: 860px) { .lec-charge-apps-row { grid-template-columns: 1fr 1fr; } }

/* ── Lampang routes / travel guide ───────────────────────── */
.lec-routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.lec-route-card {
  background: #fff; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--lec-border-soft);
  transition: transform .35s var(--lec-ease), box-shadow .35s var(--lec-ease);
}
.lec-route-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.08); }
.lec-route-photo { aspect-ratio: 4/3; background: var(--lec-cream); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lec-route-photo img { width: 100%; height: 100%; object-fit: cover; }
.lec-route-body { padding: 22px 24px; }
.lec-route-body .tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lec-green-700); }
.lec-route-body .nm { font-family: 'Mali', sans-serif; font-size: 22px; font-weight: 700; color: var(--lec-navy-900); margin: 6px 0 8px; line-height: 1.2; }
.lec-route-body .desc { font-size: 13px; color: var(--lec-muted); line-height: 1.7; }
.lec-route-body .meta { display: flex; gap: 14px; margin-top: 14px; font-size: 12px; color: var(--lec-navy-600); font-weight: 600; }
.lec-route-body .meta span { display: inline-flex; align-items: center; gap: 6px; }

/* ── Lampang attractions map ──────────────────────────────── */
.lec-attractions { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 24px; margin-top: 40px; align-items: stretch; }
.lec-attr-map-wrap { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--lec-border-soft); box-shadow: 0 12px 32px rgba(0,0,0,0.06); min-height: 460px; }
.lec-attr-map-wrap.full { margin-top: 40px; min-height: 620px; }
.lec-attr-map-wrap.full .lec-attr-map { min-height: 620px; }
.lec-charge-foot { display: flex; justify-content: center; margin-top: 22px; }
.lec-map-credit { position: absolute; left: 12px; bottom: 12px; z-index: 5; background: rgba(255,255,255,0.92); color: var(--lec-navy-900); font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(10,26,20,0.15); pointer-events: none; }
.lec-attr-map { width: 100%; height: 100%; min-height: 460px; }
.lec-attr-list { display: flex; flex-direction: column; gap: 10px; max-height: 520px; overflow-y: auto; padding-right: 4px; }
.lec-attr-list::-webkit-scrollbar { width: 6px; }
.lec-attr-list::-webkit-scrollbar-thumb { background: rgba(21,163,90,0.35); border-radius: 999px; }
.lec-attr-item { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; cursor: pointer;
  background: #fff; border: 1.5px solid var(--lec-border-soft); border-radius: 16px; padding: 14px 16px;
  font-family: inherit; transition: all .22s var(--lec-ease); }
.lec-attr-item:hover { border-color: rgba(21,163,90,0.4); transform: translateX(2px); }
.lec-attr-item.active { border-color: var(--lec-green-600); background: var(--lec-green-50, #eafaf0); box-shadow: 0 6px 18px rgba(21,163,90,0.14); }
.lec-attr-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--lec-navy-900); color: var(--lec-bolt-500, #fbd116);
  display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 14px; }
.lec-attr-item.active .lec-attr-num { background: var(--lec-green-600); color: #fff; }
.lec-attr-info { flex: 1; min-width: 0; }
.lec-attr-name { font-family: 'Mali', sans-serif; font-size: 16px; font-weight: 700; color: var(--lec-navy-900); line-height: 1.25; }
.lec-attr-desc { font-size: 12px; color: var(--lec-muted); line-height: 1.55; margin-top: 3px; }
.lec-attr-dist { flex-shrink: 0; text-align: right; line-height: 1; }
.lec-attr-dist .km { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 800; color: var(--lec-green-700); letter-spacing: -0.5px; }
.lec-attr-dist .u { font-size: 10px; color: var(--lec-muted); font-weight: 600; margin-top: 2px; }
.lec-attr-note { font-size: 12px; color: var(--lec-muted); margin-top: 18px; font-style: italic; }
.lec-spot-pin { width: 30px; height: 30px; background: var(--lec-green-600); color: #fff; border: 2px solid #fff;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 13px; box-shadow: 0 3px 10px rgba(0,0,0,0.3); }
.lec-spot-pin > * { transform: rotate(45deg); }
.lec-air-pin { width: 34px; height: 34px; background: var(--lec-navy-900); color: #fff; border: 2px solid var(--lec-bolt-500, #fbd116);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 3px 10px rgba(0,0,0,0.35); }
@media (max-width: 860px) {
  .lec-attractions { grid-template-columns: 1fr; }
  .lec-attr-map-wrap, .lec-attr-map { min-height: 320px; }
  .lec-attr-list { max-height: none; }
}

/* ── Footer ──────────────────────────────────────────────── */
.lec-foot {
  background: linear-gradient(160deg, #0a1a14 0%, #0f2318 60%, #163020 100%);
  color: #fff;
  padding: 80px 56px 40px;
  position: relative; overflow: hidden;
}
.lec-foot::after {
  content:''; position:absolute; top:-100px; right:-100px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(21,163,90,0.18) 0%, transparent 70%);
}

/* ── Nav: tighten on narrower viewports so nothing clips ──── */
@media (max-width: 1180px) {
  .lec-topnav { padding: 20px 36px; gap: 28px; }
  .lec-topnav .links { gap: 26px; }
  .lec-topnav .links a { font-size: 13.5px; }
  .lec-topnav .actions { gap: 10px; }
}
@media (max-width: 1000px) {
  .lec-topnav { padding: 18px 24px; gap: 20px; }
  .lec-topnav .links { gap: 20px; }
  .lec-topnav .logo img { height: 46px; }
}


/* ════ MOBILE RESPONSIVE — เพิ่ม 12 มิ.ย. 2026 ════ */
/* กัน scrollbar แนวนอนจาก blob/ใบไม้ตกแต่งที่ยื่นขอบ (ทุกขนาดจอ) */
html, body { overflow-x: hidden; }
.lec-nav-burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0;flex-shrink:0}
.lec-nav-burger span{display:block;width:24px;height:2.5px;background:var(--lec-navy-900);border-radius:2px;transition:transform .3s,opacity .3s}
.lec-topnav.nav-open .lec-nav-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.lec-topnav.nav-open .lec-nav-burger span:nth-child(2){opacity:0}
.lec-topnav.nav-open .lec-nav-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media (max-width: 760px){
  html,body{overflow-x:hidden}
  img{max-width:100%}
  .lec-nav-burger{display:flex}
  .lec-topnav{padding:12px 14px;gap:10px}
  .lec-topnav .logo img{height:40px}
  .lec-topnav .links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:4px 16px 12px;box-shadow:0 18px 30px rgba(0,0,0,.12);border-bottom:1px solid var(--lec-border-soft);z-index:60}
  .lec-topnav.nav-open .links{display:flex}
  .lec-topnav .links a{display:block;padding:13px 6px;font-size:15.5px;border-bottom:1px solid var(--lec-border-soft)}
  .lec-topnav .links li:last-child a{border-bottom:0}
  .lec-topnav .links a::after{display:none}
  .lec-topnav .actions{margin-left:auto;gap:8px}
  .lec-topnav .lec-cta-pill{padding:10px 14px;font-size:13px}

  /* inline grid ทุกตัว → 1 คอลัมน์ · ยกเว้นปฏิทิน 7 ช่อง */
  [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  [style*="repeat(7"]{grid-template-columns:repeat(7,1fr) !important}

  /* บีบขอบข้างของ section ใหญ่ */
  section[style]{padding-left:16px !important;padding-right:16px !important}
  .lec-section{padding-left:16px !important;padding-right:16px !important}
  .teaser-cta{flex-direction:column;margin:16px !important;padding:20px !important;align-items:stretch}
  .teaser-cta .photo{width:100% !important;height:190px !important}

  .lec-trust-strip{flex-direction:column;gap:0;padding:4px 0}
  .lec-trust-item{border-right:none;border-bottom:1px solid var(--lec-border-soft);padding:16px 20px}
  .lec-trust-item:last-child{border-bottom:none}
  .lec-stamp-big{right:6px !important;top:-14px !important;transform:rotate(-5deg) scale(.78)}
  .lec-fleet-card{min-width:78vw}
  .lec-routes{grid-template-columns:1fr}
  .lec-charge-apps-row{grid-template-columns:1fr}
  .lec-charge-grid{grid-template-columns:1fr}
  .lec-foot{padding:40px 18px}
  .lec-booking-dock{flex-direction:column;align-items:stretch}
  .lec-modal-box{width:94vw;max-height:92vh}
  .lec-modal-photo{height:200px}
  iframe{max-width:100%}

  /* ── compact typography มือถือ: เล็กลง อ่านง่าย ไม่ล้น ── */
  .lec-ribbon-pill{font-size:12.5px !important;padding:7px 16px 7px 12px !important}
  .lec-display-puffy{font-size:clamp(28px,8vw,38px) !important;line-height:1.15 !important}
  .lec-h-arch{font-size:clamp(21px,5.6vw,28px) !important;line-height:1.3 !important}
  .lec-h1{font-size:clamp(24px,6.5vw,32px) !important}
  .lec-h2{font-size:clamp(20px,5.5vw,26px) !important}
  .lec-eb{font-size:9.5px !important;letter-spacing:1.6px !important}
  .lec-sub-serif{font-size:14px !important}
  .lec-body{font-size:13.5px !important;line-height:1.75 !important}
  .lec-btn,.lec-cta-outline{padding:11px 20px !important;font-size:13px !important}
  .lec-cta-pill{padding:10px 18px;font-size:13px}
  .lec-stamp-big{transform:rotate(-5deg) scale(.68) !important;right:0 !important;top:-10px !important}
  .lec-trust-icon{width:38px !important;height:38px !important}
  .lec-trust-item{padding:13px 18px}
  .lec-trust-item .h{font-size:13px}
  .lec-trust-item .s{font-size:11.5px;margin-top:2px}
  .lec-section{padding-top:40px !important;padding-bottom:40px !important}
  .teaser-cta h3{font-size:21px !important;margin-bottom:7px !important}
  .teaser-cta p{font-size:13px !important;margin-bottom:10px !important}
  .teaser-cta .photo{height:160px !important}
  .teaser-cta .eb{font-size:9.5px !important;letter-spacing:1.6px !important}
  .lec-fleet-card{min-width:84vw}
  .lec-route-body{padding:14px 16px}
  .lec-attr-item{padding:10px 12px}
  .lec-attr-name{font-size:13.5px}
  .lec-attr-desc{font-size:12px}
  .lec-charge-app{padding:14px}
  .lec-foot{padding:34px 18px 26px}
  .lec-foot p{font-size:13px !important}
  .lec-modal-name{font-size:20px}
  .lec-modal-specs{gap:8px}
}
@media (max-width: 1024px){
  .blog-grid{grid-template-columns:1fr 1fr !important}
}
@media (max-width: 640px){
  .blog-grid{grid-template-columns:1fr !important}
}
@media (max-width: 760px){
  .lec-h-arch{margin-top:8px;line-height:1.25 !important}
  .lec-display-puffy{line-height:1.18 !important}
}
/* ── compact desktop band: จอแคบ/zoom สูง (761–1150px) — nav 8 ลิงก์ต้องไม่ล้น/ไม่ทับ ── */
@media (min-width: 761px) and (max-width: 1150px){
  html,body{overflow-x:hidden}
  .lec-topnav{padding:16px 20px;gap:14px}
  .lec-topnav .links{gap:13px;flex-wrap:wrap;justify-content:center;row-gap:4px}
  .lec-topnav .links a{font-size:12.5px}
  .lec-topnav .logo img{height:42px}
  .lec-topnav .actions{gap:8px}
  .lec-topnav .lec-cta-pill{padding:9px 14px;font-size:12px}
}
@media (min-width: 761px) and (max-width: 980px){
  .lec-topnav .lec-cta-pill{display:none}
}
@media (max-width: 560px){
  .lec-fleet-card{min-width:88vw}
  .lec-display-puffy{font-size:clamp(34px,10vw,46px) !important}
}


/* ── fleet มือถือ: หัวข้อเต็มแถว + รถเรียงแนวตั้ง (12 มิ.ย. 2026) ── */
@media (max-width: 760px){
  .fleet-head{flex-direction:column;align-items:flex-start;gap:6px;padding:0 16px !important;margin-bottom:20px !important}
  .fleet-head h2{font-size:clamp(26px,7.5vw,34px) !important;line-height:1.25 !important;margin-top:8px !important}
  .fleet-head p{font-size:13px !important;margin-top:6px !important}
  .fleet-arrows{display:none !important}
  .lec-fleet-rail{flex-direction:column;overflow:visible;gap:18px;padding:4px 16px 10px;scroll-snap-type:none}
  .lec-fleet-card{min-width:0 !important;max-width:none !important;width:100%}
}