/* ==========================================================================
   CRYSTAL DARK — ธีมคริสตัลสำหรับ OMODA & JAECOO
   สร้างบนสถาปัตยกรรม Token ของ SeenFord Design System
   ชื่อ token เหมือนเดิมทุกตัว (--surface-*, --accent, --text-*, --space-*,
   --radius-*, --control-*, --dur-*) เปลี่ยนเฉพาะ "ค่า" เป็นโทนคริสตัล
   → ยก component เดิมของ SeenFord มาใช้ได้ทันทีโดยไม่ต้องแก้โค้ด
   Mobile-first · 4px base grid
   ========================================================================== */

/* ==========================================================================
   1. COLOR TOKENS — Crystal ramp
   ========================================================================== */
:root{
  /* Ink ramp — page + surfaces (near-black navy → frost steel) */
  --ink-950:#04060C;
  --ink-900:#070B14;
  --ink-850:#0B111D;
  --ink-800:#101828;
  --ink-750:#172033;
  --ink-700:#1F2A40;
  --ink-600:#2C3A55;
  --ink-500:#415272;
  --ink-400:#5D7095;

  /* Foreground / text */
  --fg-1:#EFF4FC;
  --fg-2:#B6C2D8;
  --fg-3:#7C89A4;
  --fg-invert:#04121C;

  /* Crystal ramp — ice cyan (primary action) */
  --crystal-700:#1FA9D8;
  --crystal-600:#33C4F0;
  --crystal-500:#5ED8FF;
  --crystal-400:#8AE4FF;
  --crystal-300:#B4EEFF;
  --crystal-100:#DFF7FF;
  --crystal-glow:rgba(94,216,255,.36);

  /* Prism ramp — violet (แบรนด์ JAECOO / accent รอง) */
  --prism-700:#6B57E8;
  --prism-600:#836FF5;
  --prism-500:#9C8CFF;
  --prism-400:#B7ABFF;
  --prism-100:#EAE5FF;
  --prism-glow:rgba(156,140,255,.34);

  /* Aqua — เน้นความสด (SHS / REEV) */
  --aqua-500:#4BE0C0;
  --aqua-600:#22C4A3;

  /* Hazard amber — รถพร้อมส่ง / ไฮไลต์ */
  --amber-600:#E08600;
  --amber-500:#F5A524;
  --amber-300:#FFC868;

  /* Status */
  --green-500:#22C55E; --green-600:#16A34A;
  --red-500:#EF4444;   --red-600:#DC2626;

  /* LINE brand */
  --line-green:#06C755; --line-green-600:#05B04B;

  --white:#FFFFFF; --black:#000000;

  /* ===== Semantic aliases ===== */
  --bg-page:var(--ink-950);
  --bg-page-alt:var(--ink-900);
  --surface-1:var(--ink-850);
  --surface-2:var(--ink-800);
  --surface-3:var(--ink-750);
  --surface-inset:var(--ink-900);

  /* กระจกคริสตัล — ใช้กับการ์ดที่ต้องการความโปร่ง */
  --glass-1:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.075);
  --glass-blur:18px;

  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.22);
  --border-accent:var(--crystal-500);

  --text-primary:var(--fg-1);
  --text-secondary:var(--fg-2);
  --text-muted:var(--fg-3);
  --text-accent:var(--crystal-400);

  --accent:var(--crystal-600);
  --accent-hover:var(--crystal-500);
  --accent-active:var(--crystal-700);
  --accent-contrast:#04121C;
  --accent-soft:rgba(94,216,255,.12);

  --hazard:var(--amber-500);
  --hazard-soft:rgba(245,165,36,.14);
  --success:var(--green-500); --success-soft:rgba(34,197,94,.14);
  --danger:var(--red-500);    --danger-soft:rgba(239,68,68,.14);

  --focus-ring:var(--crystal-500);

  --header-bg:rgba(4,6,12,.74);
  --hero-glow:rgba(94,216,255,.18);
  --placeholder-1:var(--ink-800);
  --placeholder-2:var(--ink-850);

  --grad-crystal:linear-gradient(135deg,#5ED8FF 0%,#9C8CFF 55%,#4BE0C0 100%);
  --grad-omoda:linear-gradient(135deg,#5ED8FF,#2F80FF);
  --grad-jaecoo:linear-gradient(135deg,#9C8CFF,#4BE0C0);
  --grad:var(--grad-crystal);
}

/* ธีมย่อยรายแบรนด์ — ใส่ที่ <body class="theme-omoda"> */
body.theme-omoda{
  --accent:var(--crystal-600); --accent-hover:var(--crystal-500);
  --text-accent:var(--crystal-400); --border-accent:var(--crystal-500);
  --accent-soft:rgba(94,216,255,.12); --hero-glow:rgba(94,216,255,.20);
  --grad:var(--grad-omoda);
}
body.theme-jaecoo{
  --accent:var(--prism-600); --accent-hover:var(--prism-500);
  --text-accent:var(--prism-400); --border-accent:var(--prism-500);
  --accent-soft:rgba(156,140,255,.13); --hero-glow:rgba(156,140,255,.20);
  --accent-contrast:#0B0620;
  --grad:var(--grad-jaecoo);
}

/* ===== Light theme (Crystal Light) — [data-theme="light"] ===== */
[data-theme="light"]{
  --bg-page:#F2F6FC;
  --bg-page-alt:#E7EEF8;
  --surface-1:#FFFFFF; --surface-2:#FFFFFF; --surface-3:#EDF3FA;
  --surface-inset:#EDF3FA;
  --glass-1:rgba(255,255,255,.65); --glass-2:rgba(255,255,255,.85);
  --border:rgba(14,28,50,.10); --border-strong:rgba(14,28,50,.18);
  --text-primary:#0D1725; --text-secondary:#42536D; --text-muted:#74829B;
  --text-accent:#0B6A8C; --fg-invert:#0D1725;
  --accent:#0E7EA6; --accent-contrast:#FFFFFF;
  --accent-soft:rgba(14,126,166,.10);
  --border-accent:#0E7EA6;
  --header-bg:rgba(255,255,255,.90);
  --hero-glow:rgba(31,169,216,.16);
  --placeholder-1:#E1E9F4; --placeholder-2:#ECF2F9;
  /* ไล่สีในธีมสว่างต้องเข้มพอ ไม่งั้นตัวหนังสือจาง */
  --grad-crystal:linear-gradient(135deg,#0B6A8C 0%,#4B3BAE 55%,#0F7D6E 100%);
  --grad-omoda:linear-gradient(135deg,#0B6A8C,#1550C4);
  --grad-jaecoo:linear-gradient(135deg,#4B3BAE,#0F7D6E);
  --grad:var(--grad-crystal);
}
[data-theme="light"] body.theme-omoda{--text-accent:#0B6A8C;--accent:#0E7EA6;--border-accent:#0E7EA6;--grad:var(--grad-omoda)}
[data-theme="light"] body.theme-jaecoo{--text-accent:#4B3BAE;--accent:#5B49C9;--border-accent:#5B49C9;--accent-contrast:#FFFFFF;--grad:var(--grad-jaecoo)}

/* ==========================================================================
   2. TYPOGRAPHY TOKENS (สเกลเดียวกับ SeenFord — ปรับสำหรับภาษาไทย)
   ========================================================================== */
:root{
  --font-sans:"IBM Plex Sans Thai","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"IBM Plex Sans Thai","IBM Plex Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  --text-xs:12px;   --lh-xs:18px;
  --text-sm:14px;   --lh-sm:22px;
  --text-base:16px; --lh-base:27px;
  --text-lg:18px;   --lh-lg:30px;
  --text-xl:20px;   --lh-xl:32px;
  --text-2xl:24px;  --lh-2xl:36px;
  --text-3xl:30px;  --lh-3xl:42px;
  --text-4xl:38px;  --lh-4xl:50px;
  --text-5xl:48px;  --lh-5xl:58px;
  --text-6xl:60px;  --lh-6xl:68px;

  --tracking-tight:-.02em;
  --tracking-overline:.16em;

  --text-body:var(--fw-regular) var(--text-base)/var(--lh-base) var(--font-sans);
  --text-body-lg:var(--fw-regular) var(--text-lg)/var(--lh-lg) var(--font-sans);
  --text-caption:var(--fw-regular) var(--text-sm)/var(--lh-sm) var(--font-sans);
}

/* ==========================================================================
   3. SPACING / LAYOUT / RADIUS / MOTION
   ========================================================================== */
:root{
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;

  --container-max:1200px;
  --gutter:var(--space-5);
  --section-pad-y:var(--space-24);

  --control-sm:38px; --control-md:46px; --control-lg:54px;

  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:24px;
  --radius-pill:999px;

  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 8px 24px rgba(0,0,0,.5);
  --shadow-3:0 18px 50px rgba(0,0,0,.6);
  --shadow-glow:0 0 0 1px var(--crystal-500),0 12px 36px var(--crystal-glow);
  --shadow-focus:0 0 0 3px rgba(94,216,255,.45);

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:340ms;

  --nav-h:64px;
  --bar-h:66px;
}

/* ==========================================================================
   4. RESET + พื้นหลังคริสตัล
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0;background:var(--bg-page);color:var(--text-primary);
  font:var(--text-body);font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));
}
@media(min-width:900px){body{padding-bottom:0}}

h1,h2,h3,h4{margin:0;font-family:var(--font-display);color:var(--text-primary);letter-spacing:var(--tracking-tight)}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
table{border-collapse:collapse;width:100%}
ul,ol{margin:0;padding-left:1.25em}
::selection{background:var(--accent-soft);color:var(--fg-1)}
:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}

/* ประกายผลึกพื้นหลัง */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 12% -8%,rgba(94,216,255,.15),transparent 60%),
    radial-gradient(52rem 36rem at 92% 6%,rgba(156,140,255,.14),transparent 62%),
    radial-gradient(46rem 34rem at 50% 106%,rgba(75,224,192,.09),transparent 60%);
}
[data-theme="light"] body::before,body[data-theme="light"]::before{opacity:.5}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.3;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 85%);
  mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 85%);
}

/* ==========================================================================
   5. LAYOUT HELPERS
   ========================================================================== */
.sf-wrap{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
@media(min-width:768px){.sf-wrap{padding-inline:var(--space-6)}}

.sf-section{padding-block:var(--space-12);border-bottom:1px solid var(--border)}
.sf-section.alt{background:var(--bg-page-alt)}
@media(min-width:768px){.sf-section{padding-block:var(--section-pad-y)}}

.sf-sec-head{display:flex;flex-direction:column;gap:10px;max-width:62ch;margin-bottom:var(--space-6)}
@media(min-width:768px){.sf-sec-head{margin-bottom:var(--space-10)}}
.sf-sec-head h2{font:var(--fw-bold) var(--text-3xl)/var(--lh-3xl) var(--font-display)}
@media(min-width:768px){.sf-sec-head h2{font:var(--fw-bold) var(--text-4xl)/var(--lh-4xl) var(--font-display)}}
.sf-sec-head p{font:var(--text-body);color:var(--text-secondary)}

.sf-overline{
  font:var(--fw-semibold) var(--text-xs)/1.6 var(--font-sans);
  letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--text-accent);
}
/* ข้อความไทยไม่ควรถูกยืดระยะตัวอักษร — ใส่ .th ครอบส่วนที่เป็นไทย */
.sf-overline .th{letter-spacing:normal;text-transform:none}

.sf-grid{display:grid;gap:var(--space-4)}
.sf-g2{grid-template-columns:1fr}
.sf-g3{grid-template-columns:1fr}
.sf-g4{grid-template-columns:1fr 1fr}
@media(min-width:640px){.sf-g2{grid-template-columns:1fr 1fr}.sf-g3{grid-template-columns:1fr 1fr}.sf-grid{gap:var(--space-6)}}
@media(min-width:1000px){.sf-g3{grid-template-columns:repeat(3,1fr)}.sf-g4{grid-template-columns:repeat(4,1fr)}}

.sf-stack{display:flex;flex-direction:column;gap:var(--space-4)}
.sf-muted{color:var(--text-muted);font:var(--text-caption)}
.sf-gradtext{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ==========================================================================
   6. SURFACE / GLASS
   ========================================================================== */
.sf-card{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;position:relative;
}
.sf-glass{
  background:var(--glass-1);border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);overflow:hidden;position:relative;
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  box-shadow:var(--shadow-2);
}
.sf-glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.13),transparent 38%);
}
.sf-pad{padding:var(--space-6)}
@media(min-width:768px){.sf-pad{padding:var(--space-8)}}

/* ==========================================================================
   7. BUTTONS (โครงเดียวกับ SeenFord Button / LineButton)
   ========================================================================== */
.sf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--control-md);padding:0 22px;
  font:var(--fw-semibold) var(--text-base)/1 var(--font-sans);
  border-radius:var(--radius-md);border:1px solid transparent;
  letter-spacing:.01em;white-space:nowrap;text-align:center;
  transition:background var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-fast);
}
.sf-btn:active{transform:translateY(1px)}
.sf-btn svg{width:20px;height:20px;flex:none}
.sf-btn--sm{height:var(--control-sm);padding:0 16px;font-size:var(--text-sm)}
.sf-btn--lg{height:var(--control-lg);padding:0 30px;font-size:var(--text-lg)}
.sf-btn--block{width:100%}

/* ทุกปุ่มต้องอ่านออกจากพื้นหลังชัดเจน — ไม่มีปุ่มไหนกลืนฉาก */
.sf-btn--primary{background:var(--accent);color:var(--accent-contrast);box-shadow:var(--shadow-1);border-color:var(--accent)}
.sf-btn--primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-glow)}

/* secondary — พื้นเทาสว่างพอ + ขอบ 1.5px ตัดกับพื้นหลังเข้ม */
.sf-btn--secondary{
  background:var(--ink-700);color:var(--fg-1);
  border:1.5px solid rgba(255,255,255,.42);box-shadow:var(--shadow-1);
}
.sf-btn--secondary:hover{background:var(--ink-600);border-color:var(--crystal-500);color:var(--crystal-300)}
[data-theme="light"] .sf-btn--secondary{background:#E3EBF6;color:#0D1725;border-color:rgba(14,28,50,.28)}

/* ghost — ปุ่มขอบคริสตัล ตัวหนังสือฟ้าสว่าง เห็นชัดบนพื้นดำ */
.sf-btn--ghost{
  background:rgba(94,216,255,.10);color:var(--crystal-300);
  border:1.5px solid var(--crystal-500);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.sf-btn--ghost:hover{background:rgba(94,216,255,.20);color:#EAFBFF;border-color:var(--crystal-400)}
body.theme-jaecoo .sf-btn--ghost{background:rgba(156,140,255,.12);color:var(--prism-400);border-color:var(--prism-500)}
body.theme-jaecoo .sf-btn--ghost:hover{background:rgba(156,140,255,.22);color:#F2EFFF}
[data-theme="light"] .sf-btn--ghost{background:rgba(31,169,216,.10);color:#0B5A75;border-color:var(--crystal-700)}

.sf-btn--line{background:var(--line-green);color:#04250F;border-color:var(--line-green);box-shadow:0 8px 24px -10px rgba(6,199,85,.75)}
.sf-btn--line:hover{background:#08DD60;border-color:#08DD60}

.sf-btn--call{background:var(--hazard);color:#2B1C00;border-color:var(--hazard);box-shadow:0 8px 24px -10px rgba(245,165,36,.7)}
.sf-btn--call:hover{background:var(--amber-300);border-color:var(--amber-300)}

/* ปุ่มโทรแบบขอบ ใช้ตอนที่มีปุ่มพื้นทึบหลายอันเรียงกัน */
.sf-btn--call-outline{background:rgba(245,165,36,.12);color:var(--amber-300);border:1.5px solid var(--hazard)}
.sf-btn--call-outline:hover{background:rgba(245,165,36,.22);color:#FFE0A3}

.sf-btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.sf-btn-row .sf-btn{flex:1 1 190px}
@media(max-width:400px){.sf-btn-row .sf-btn{flex:1 1 100%}}

/* ==========================================================================
   8. BADGE (SeenFord Badge)
   ========================================================================== */
.sf-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:var(--radius-pill);
  font:var(--fw-semibold) var(--text-xs)/1.4 var(--font-sans);
  background:var(--surface-3);color:var(--text-secondary);border:1px solid var(--border);
}
.sf-badge--accent{background:var(--accent-soft);color:var(--text-accent);border-color:var(--border-accent)}
.sf-badge--success{background:var(--success-soft);color:var(--success);border-color:rgba(34,197,94,.35)}
.sf-badge--hazard{background:var(--hazard-soft);color:var(--hazard);border-color:rgba(245,165,36,.35)}
.sf-badge-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
[data-theme="light"] .sf-badge{background:#E8EEF7;color:#33425C;border-color:rgba(14,28,50,.16)}
[data-theme="light"] .sf-badge--success{background:#DCFAE7;color:#116B36;border-color:#8CD9AB}
[data-theme="light"] .sf-badge--hazard{background:#FFF1D6;color:#8A5200;border-color:#E9B45F}
[data-theme="light"] .sf-badge--accent{background:rgba(14,126,166,.12);color:#0B6A8C;border-color:#0E7EA6}

/* ==========================================================================
   9. HEADER + NAV
   ========================================================================== */
.sf-hdr{
  position:sticky;top:0;z-index:20;background:var(--header-bg);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--border);
}
.sf-hdr-in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:var(--space-4)}
@media(min-width:1000px){.sf-hdr-in{height:80px}}

.sf-logo{display:flex;align-items:center;gap:10px;font:var(--fw-bold) var(--text-lg)/1.1 var(--font-display);letter-spacing:var(--tracking-tight)}
.sf-logo .mark{
  width:34px;height:34px;flex:none;border-radius:10px;background:var(--grad-crystal);
  display:grid;place-items:center;color:#04121C;font-size:13px;font-weight:800;
  box-shadow:0 6px 18px -6px var(--crystal-glow);
}
.sf-logo small{display:block;font:var(--fw-regular) var(--text-xs)/1.4 var(--font-sans);color:var(--text-muted);letter-spacing:.04em}

.sf-nav{display:none}
.sf-hdr-cta{display:none;align-items:center;gap:var(--space-3)}
@media(min-width:1000px){
  .sf-nav{display:flex;gap:var(--space-6);margin-left:var(--space-10)}
  .sf-nav a{font:var(--fw-medium) var(--text-sm)/1 var(--font-sans);color:var(--text-secondary);padding:8px 0;border-bottom:2px solid transparent;transition:color var(--dur-fast)}
  .sf-nav a:hover,.sf-nav a[aria-current="page"]{color:var(--text-primary);border-color:var(--border-accent)}
  .sf-hdr-cta{display:flex}
}
.sf-hdr-left{display:flex;align-items:center}
.sf-burger{
  display:grid;gap:5px;padding:10px 11px;border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);background:var(--glass-1);
}
.sf-burger span{width:20px;height:2px;background:var(--fg-1);display:block;border-radius:2px}
@media(min-width:1000px){.sf-burger{display:none}}

/* Drawer มือถือ */
.sf-drawer{
  position:fixed;inset:0;z-index:60;display:none;overflow-y:auto;
  background:rgba(4,6,12,.97);backdrop-filter:blur(22px);
  padding-bottom:calc(var(--space-16) + var(--bar-h));
}
[data-theme="light"] .sf-drawer{background:rgba(242,246,252,.97)}
.sf-drawer.open{display:block}
.sf-drawer-top{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.sf-drawer-close{width:44px;height:44px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--glass-1);font-size:20px}
.sf-drawer nav{margin-top:var(--space-4)}
.sf-drawer nav > a,.sf-acc-head{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:16px 4px;border-bottom:1px solid var(--border);
  font:var(--fw-medium) var(--text-lg)/1.4 var(--font-sans);text-align:left;
}
.sf-acc-body{display:none;padding:4px 0 10px 14px}
.sf-acc.open .sf-acc-body{display:block}
.sf-acc.open .sf-chev{transform:rotate(180deg)}
.sf-acc-body a{display:block;padding:11px 4px;color:var(--text-secondary);font:var(--text-body)}
.sf-acc-body a:hover{color:var(--text-accent)}
.sf-chev{transition:transform var(--dur-base);color:var(--text-muted)}

/* ==========================================================================
   10. STICKY CTA BAR (มือถือ) — จุดปิดการขายหลัก
   ========================================================================== */
.sf-ctabar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:8px;
  padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  background:var(--header-bg);border-top:1px solid var(--border-strong);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
}
.sf-ctabar .sf-btn{height:50px;font-size:var(--text-sm);padding:0 6px;font-weight:var(--fw-bold);border-radius:var(--radius-md)}
.sf-ctabar .sf-btn--ghost{background:rgba(94,216,255,.16);color:#CFF3FF;border-color:var(--crystal-500)}
.sf-ctabar .sf-btn--call-outline{background:rgba(245,165,36,.18);color:#FFD98A;border-color:var(--hazard)}
@media(max-width:359px){.sf-ctabar .sf-btn{font-size:13px}}
@media(min-width:900px){.sf-ctabar{display:none}}

/* ==========================================================================
   11. HERO
   ========================================================================== */
.sf-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.sf-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1000px 500px at 78% 12%,var(--hero-glow),transparent 60%);
}
.sf-hero-in{position:relative;display:grid;gap:var(--space-8);padding-block:var(--space-12)}
@media(min-width:1000px){
  .sf-hero-in{grid-template-columns:1.05fr 1fr;gap:var(--space-12);align-items:center;padding-block:var(--space-20)}
}
.sf-hero h1{font:var(--fw-bold) var(--text-3xl)/var(--lh-3xl) var(--font-display)}
@media(min-width:480px){.sf-hero h1{font:var(--fw-bold) var(--text-4xl)/var(--lh-4xl) var(--font-display)}}
@media(min-width:1000px){.sf-hero h1{font:var(--fw-bold) var(--text-5xl)/var(--lh-5xl) var(--font-display)}}
.sf-hero .lead{font:var(--text-body-lg);color:var(--text-secondary);max-width:52ch}

/* ==========================================================================
   12. IMAGE PLACEHOLDER BLOCK (บล็อกรูป — เตรียมไว้ใส่ภาพจริง)
   ========================================================================== */
.sf-imgbox{
  position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;
  border-radius:var(--radius-lg);border:1.5px dashed var(--border-strong);
  background:
    linear-gradient(135deg,rgba(94,216,255,.09),rgba(156,140,255,.09) 55%,rgba(75,224,192,.07)),
    repeating-linear-gradient(135deg,var(--placeholder-1) 0 14px,var(--placeholder-2) 14px 28px);
  display:grid;place-items:center;text-align:center;padding:18px;
}
.sf-imgbox::after{
  content:"";position:absolute;inset:-30%;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.07) 50%,transparent 58%);
}
.sf-imgbox > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sf-imgbox.has-img{border-style:solid;border-color:var(--border);padding:0}
.sf-imgbox.has-img .sf-imgbox-meta{display:none}

.sf-imgbox-meta{position:relative;z-index:1;max-width:36ch;display:flex;flex-direction:column;gap:6px;align-items:center}
.sf-imgbox-icon{
  width:44px;height:44px;border-radius:var(--radius-md);
  background:var(--glass-2);border:1px solid var(--border-strong);
  display:grid;place-items:center;color:var(--text-accent);font-size:18px;
}
.sf-imgbox-title{font:var(--fw-semibold) var(--text-sm)/1.5 var(--font-sans);color:var(--text-primary)}
.sf-imgbox-spec{font:var(--text-xs)/1.7 var(--font-mono);color:var(--text-muted);word-break:break-all}
.sf-imgbox-alt{font:var(--text-xs)/1.6 var(--font-sans);color:var(--text-muted)}
.sf-imgbox-alt b{color:var(--text-secondary);font-weight:var(--fw-semibold)}

.sf-imgbox.r-hero{aspect-ratio:16/9}
.sf-imgbox.r-square{aspect-ratio:1/1}
.sf-imgbox.r-portrait{aspect-ratio:4/5}
.sf-imgbox.r-wide{aspect-ratio:21/9}
@media(max-width:640px){
  .sf-imgbox.r-hero{aspect-ratio:4/3}
  .sf-imgbox.r-wide{aspect-ratio:16/10}
  .sf-imgbox-spec{display:none}
}

/* แกลเลอรีเลื่อนแนวนอนบนมือถือ */
.sf-hscroll{
  display:grid;grid-auto-flow:column;grid-auto-columns:80%;gap:var(--space-3);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);padding-bottom:8px;
}
.sf-hscroll::-webkit-scrollbar{display:none}
.sf-hscroll > *{scroll-snap-align:start}
@media(min-width:768px){
  .sf-hscroll{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;
              overflow:visible;margin-inline:0;padding-inline:0;gap:var(--space-4)}
}

/* ==========================================================================
   13. MODEL CARD (SeenFord ModelCard)
   ========================================================================== */
.sf-model{display:flex;flex-direction:column;transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base),box-shadow var(--dur-base)}
.sf-model:hover{transform:translateY(-3px);border-color:var(--border-accent);box-shadow:var(--shadow-glow)}
.sf-model .sf-imgbox{border-radius:0;border-left:0;border-right:0;border-top:0}
.sf-model-body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.sf-model-en{font:var(--fw-semibold) var(--text-xs)/1.4 var(--font-sans);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--text-accent)}
.sf-model h3{font:var(--fw-bold) var(--text-xl)/1.3 var(--font-display)}
.sf-model-price{font:var(--fw-bold) var(--text-2xl)/1.25 var(--font-display);color:var(--text-accent)}
.sf-model-price small{display:block;font:var(--text-xs)/1.6 var(--font-sans);color:var(--text-muted);font-weight:var(--fw-regular);margin-top:4px}
.sf-model-fit{font:var(--text-caption);color:var(--text-secondary)}
.sf-model ul{list-style:none;padding:0;margin:0;font:var(--text-caption);color:var(--text-secondary);display:flex;flex-direction:column;gap:4px}
.sf-model ul li{padding-left:18px;position:relative}
.sf-model ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--accent);transform:rotate(45deg);border-radius:1px}
.sf-model-cta{margin-top:auto;padding-top:var(--space-2);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}

/* ==========================================================================
   14. PROMO CARD / NEED TILE / FEATURE
   ========================================================================== */
.sf-promo{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.sf-promo h3{font:var(--fw-bold) var(--text-xl)/1.3 var(--font-display)}
.sf-promo ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font:var(--text-caption);color:var(--text-secondary)}
.sf-promo ul li{padding-left:20px;position:relative}
.sf-promo ul li::before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:700}

.sf-tile{
  display:flex;flex-direction:column;gap:6px;padding:var(--space-5);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);
  transition:border-color var(--dur-base),transform var(--dur-base);
}
.sf-tile:hover{border-color:var(--border-accent);transform:translateY(-3px)}
.sf-tile b{font:var(--fw-semibold) var(--text-lg)/1.3 var(--font-sans);color:var(--text-primary)}
.sf-tile span{font:var(--text-caption);color:var(--text-muted)}

.sf-feat{display:flex;gap:var(--space-4);align-items:flex-start}
.sf-feat .ic{
  width:44px;height:44px;flex:none;border-radius:var(--radius-md);
  background:var(--accent-soft);border:1px solid var(--border-accent);
  display:grid;place-items:center;color:var(--text-accent);font-size:18px;
}
.sf-feat h3{font:var(--fw-semibold) var(--text-lg)/1.4 var(--font-sans);margin-bottom:4px}
.sf-feat p{font:var(--text-caption);color:var(--text-secondary)}

.sf-stat{text-align:center;padding:var(--space-5) var(--space-3)}
.sf-stat .num{font:var(--fw-bold) var(--text-3xl)/1.2 var(--font-display);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sf-stat .lbl{font:var(--text-xs)/1.6 var(--font-sans);color:var(--text-muted);margin-top:4px}

/* TrustBar */
.sf-trust{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);padding:var(--space-5)}
@media(min-width:768px){.sf-trust{grid-template-columns:repeat(4,1fr)}}
.sf-trust > div{display:flex;flex-direction:column;gap:2px}
.sf-trust b{font:var(--fw-semibold) var(--text-base)/1.4 var(--font-sans)}
.sf-trust span{font:var(--text-xs)/1.6 var(--font-sans);color:var(--text-muted)}

/* ==========================================================================
   15. AEO SUMMARY BOX (สรุป 30 วินาที — สำหรับ AI Search)
   ========================================================================== */
.sf-aeo{border-left:3px solid var(--accent)}
.sf-aeo h2{font:var(--fw-bold) var(--text-xl)/1.4 var(--font-display);margin-bottom:var(--space-4);display:flex;gap:10px;align-items:center}
.sf-aeo dl{display:grid;grid-template-columns:auto 1fr;gap:8px var(--space-5);margin:0;font:var(--text-caption)}
.sf-aeo dt{color:var(--text-muted);white-space:nowrap}
.sf-aeo dd{margin:0;color:var(--text-primary);font-weight:var(--fw-semibold)}
@media(max-width:430px){.sf-aeo dl{grid-template-columns:1fr;gap:0}.sf-aeo dt{margin-top:8px}}

/* ==========================================================================
   16. TABLE
   ========================================================================== */
.sf-tbl{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-2);-webkit-overflow-scrolling:touch}
.sf-tbl table{min-width:600px;font:var(--text-caption)}
.sf-tbl th,.sf-tbl td{padding:14px var(--space-5);text-align:left;border-bottom:1px solid var(--border)}
.sf-tbl th{
  background:var(--surface-1);color:var(--text-muted);
  font:var(--fw-semibold) var(--text-xs)/1 var(--font-sans);
  letter-spacing:var(--tracking-overline);text-transform:uppercase;white-space:nowrap;
}
.sf-tbl tbody tr:last-child td{border-bottom:0}
.sf-tbl tbody tr:hover{background:var(--surface-1)}
.sf-tbl td.price{color:var(--text-accent);font-weight:var(--fw-semibold);white-space:nowrap}
.sf-tbl a.go{color:var(--crystal-300);font-weight:var(--fw-semibold);white-space:nowrap;border-bottom:1px solid rgba(94,216,255,.4)}
.sf-tbl a.go:hover{color:#EAFBFF;border-color:var(--crystal-400)}
.sf-tbl-note{margin-top:var(--space-4);font:var(--text-caption);color:var(--text-muted)}
@media(max-width:640px){.sf-tbl-note::before{content:"← เลื่อนตารางแนวนอนได้ · "}}

/* ==========================================================================
   17. FAQ ACCORDION
   ========================================================================== */
.sf-faq details{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-2);margin-bottom:var(--space-2);overflow:hidden}
.sf-faq details[open]{border-color:var(--border-accent)}
.sf-faq summary{
  padding:16px var(--space-5);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);
  font:var(--fw-semibold) var(--text-base)/1.6 var(--font-sans);
}
.sf-faq summary::-webkit-details-marker{display:none}
.sf-faq summary::after{content:"+";color:var(--text-accent);font-size:24px;line-height:1;flex:none;transition:transform var(--dur-base)}
.sf-faq details[open] summary::after{transform:rotate(45deg)}
.sf-faq .a{padding:0 var(--space-5) 16px;font:var(--text-caption);color:var(--text-secondary)}

/* ==========================================================================
   18. FORM (SeenFord LeadForm)
   ========================================================================== */
.sf-field{margin-bottom:var(--space-4)}
.sf-field label{display:block;font:var(--fw-semibold) var(--text-sm)/1.5 var(--font-sans);color:var(--text-secondary);margin-bottom:6px}
.sf-field input,.sf-field select,.sf-field textarea{
  width:100%;height:var(--control-lg);padding:0 14px;
  font:var(--text-body);color:var(--text-primary);
  background:var(--surface-inset);border:1px solid var(--border-strong);
  border-radius:var(--radius-md);transition:border-color var(--dur-fast),background var(--dur-fast);
}
.sf-field textarea{height:auto;min-height:110px;padding:12px 14px;resize:vertical}
.sf-field input:focus,.sf-field select:focus,.sf-field textarea:focus{outline:none;border-color:var(--border-accent);background:var(--surface-3)}
.sf-field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 24px,calc(100% - 14px) 24px;background-size:6px 6px;background-repeat:no-repeat}

/* ==========================================================================
   19. อื่น ๆ
   ========================================================================== */
.sf-crumbs{padding-block:var(--space-4) 0;font:var(--text-xs)/1.8 var(--font-sans);color:var(--text-muted)}
.sf-crumbs a{color:var(--text-secondary)}
.sf-crumbs a:hover{color:var(--text-accent)}
.sf-crumbs i{font-style:normal;margin-inline:6px;opacity:.5}

.sf-updated{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--radius-pill);
  background:var(--surface-2);border:1px solid var(--border);font:var(--text-xs)/1.4 var(--font-sans);color:var(--text-muted)}

.sf-note{font:var(--text-caption);color:var(--text-muted);border-left:2px solid var(--border-strong);padding-left:14px}

.sf-pills{display:flex;gap:var(--space-2);overflow-x:auto;scrollbar-width:none;
  margin-inline:calc(var(--gutter) * -1);padding:0 var(--gutter) 6px}
.sf-pills::-webkit-scrollbar{display:none}
.sf-pills a{flex:none;padding:9px 16px;border-radius:var(--radius-pill);background:var(--surface-2);
  border:1px solid var(--border);font:var(--fw-medium) var(--text-sm)/1 var(--font-sans);color:var(--text-secondary)}
.sf-pills a:hover{color:var(--text-primary);border-color:var(--border-accent)}
@media(min-width:768px){.sf-pills{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}}

.sf-cta-final{
  background:linear-gradient(135deg,rgba(94,216,255,.11),rgba(156,140,255,.11));
  border:1px solid var(--border-strong);text-align:center;
}
.sf-cta-final h2{font:var(--fw-bold) var(--text-3xl)/var(--lh-3xl) var(--font-display);margin-bottom:var(--space-3)}
.sf-cta-final p{font:var(--text-body);color:var(--text-secondary);max-width:54ch;margin-inline:auto}
.sf-cta-final .sf-btn-row{justify-content:center;margin-top:var(--space-6)}

.sf-ftr{background:var(--ink-950);border-top:1px solid var(--border);padding-block:var(--space-12);margin-bottom:0}
[data-theme="light"] .sf-ftr{background:var(--bg-page-alt)}
.sf-ftr-grid{display:grid;gap:var(--space-8)}
@media(min-width:768px){.sf-ftr-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.sf-ftr h4{font:var(--fw-semibold) var(--text-xs)/1 var(--font-sans);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-4)}
.sf-ftr ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;font:var(--text-caption)}
.sf-ftr ul a{color:var(--text-secondary)}
.sf-ftr ul a:hover{color:var(--text-accent)}
.sf-ftr-btm{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--border);
  font:var(--text-xs)/1.7 var(--font-sans);color:var(--text-muted);display:flex;flex-direction:column;gap:10px}

.sf-theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;width:40px;padding:0;border-radius:var(--radius-pill);
  background:var(--glass-1);color:var(--text-primary);border:1px solid var(--border-strong);
  font:var(--fw-semibold) var(--text-sm)/1 var(--font-sans);flex:none;
}
.sf-theme-toggle span{display:none}
.sf-theme-toggle i{width:12px;height:12px;border-radius:50%;background:var(--crystal-400);display:block;box-shadow:0 0 10px var(--crystal-glow)}
[data-theme="light"] .sf-theme-toggle i{background:var(--amber-500);box-shadow:0 0 10px rgba(245,165,36,.6)}
.sf-drawer .sf-theme-toggle{width:auto;padding:0 18px;height:46px}
.sf-drawer .sf-theme-toggle span{display:inline}

.sf-skip{position:absolute;left:-9999px}
.sf-skip:focus{left:12px;top:12px;z-index:200;padding:10px 16px;background:var(--accent);color:var(--accent-contrast);border-radius:var(--radius-sm)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.sf-ctabar,.sf-hdr,.sf-theme-toggle,.sf-drawer{display:none!important}body{padding-bottom:0}}

/* ช่องรูปที่ยังไม่มีไฟล์จริง: ซ่อนไว้ก่อน ไม่ให้ผู้ชมเห็นกล่อง placeholder (แสดงเฉพาะช่องที่มี data-src) */
.sf-imgbox:not([data-src]){display:none !important}

/* Hero slider (หน้าแรก / หน้าแบรนด์) */
.sf-hslider{position:relative;aspect-ratio:3/2;border-radius:var(--radius-xl,20px);overflow:hidden;border:1px solid var(--border);background:var(--surface-2,#0B111D);box-shadow:var(--shadow-2,0 20px 60px rgba(0,0,0,.35))}
.sf-hslide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;display:block;color:#fff}
.sf-hslide.is-on{opacity:1;z-index:1}
.sf-hslide img{width:100%;height:100%;object-fit:cover;display:block}
.sf-hslide-cap{position:absolute;left:0;right:0;bottom:0;padding:48px 20px 40px;background:linear-gradient(to top,rgba(4,6,12,.85),rgba(4,6,12,0));display:flex;flex-direction:column;gap:2px}
.sf-hslide-cap b{font:var(--fw-bold,700) 1.125rem/1.3 var(--font-display,inherit)}
.sf-hslide-cap small{color:#B6C2D8;font-size:.875rem}
.sf-hdots{position:absolute;z-index:2;left:20px;bottom:14px;display:flex;gap:8px}
.sf-hdots button{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer;transition:width .3s}
.sf-hdots button.is-on{width:24px;background:#5ED8FF}
@media (prefers-reduced-motion:reduce){.sf-hslide{transition:none}}