/* =============================================================================
   BkkPrivateCar — โครงสร้าง ดีไซน์ และลูกเล่นทั้งหมด
   -----------------------------------------------------------------------------
   ไฟล์นี้คือ "โครง" ของดีไซน์ ไม่ควรแก้ถ้าไม่จำเป็น
   ถ้าต้องการเปลี่ยนสี ฟอนต์ ความมน ให้แก้ที่  assets/css/theme.css  แทน
   สีทั้งหมดอ้างอิงตัวแปร --c-*  ซึ่งถูกกำหนดมาจาก includes/config.php
   ========================================================================== */

:root{
  --font-display:'Trirong', Georgia, serif;
  --font-body:'IBM Plex Sans Thai', 'Segoe UI', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --shell:1240px;
  --pad:clamp(18px, 4vw, 34px);
  --radius:4px;
  --radius-lg:10px;
  --radius-pill:100px;
  --rule:1px solid var(--c-line);

  --sp-section:clamp(60px, 8vw, 112px);
  --shadow-xs:0 1px 2px rgba(20,16,12,.05);
  --shadow-soft:0 1px 2px rgba(20,16,12,.04), 0 14px 34px -24px rgba(20,16,12,.4);
  --shadow-lift:0 2px 6px rgba(20,16,12,.06), 0 30px 60px -32px rgba(12,50,42,.55);
  --shadow-gold:0 12px 28px -14px color-mix(in srgb, var(--c-gold) 60%, transparent);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --foil:linear-gradient(120deg, var(--c-gold-deep) 0%, var(--c-gold) 28%, var(--c-gold-light) 50%, var(--c-gold) 72%, var(--c-gold-deep) 100%);
  --gold-rule:linear-gradient(90deg, transparent, var(--c-gold), transparent);
}
html[data-lang="zh"]{
  --font-display:'Noto Serif SC', 'Trirong', serif;
  --font-body:'Noto Sans SC', 'IBM Plex Sans Thai', system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:120px}
body{
  margin:0;
  background:var(--c-ivory);
  color:var(--c-ink);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-primary);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--c-gold-deep)}
:focus-visible{outline:2px solid var(--c-gold);outline-offset:3px;border-radius:3px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:999;background:var(--c-gold);color:var(--c-deep);padding:10px 16px;border-radius:var(--radius)}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.18;margin:0 0 .5em;text-wrap:balance;letter-spacing:-.008em}
h1{font-size:clamp(34px,5vw,60px);font-weight:700;letter-spacing:-.018em}
h2{font-size:clamp(27px,3.4vw,42px);letter-spacing:-.012em}
h3{font-size:clamp(19px,1.7vw,23px)}
h4{font-size:17px}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(16.5px,1.35vw,19px);color:var(--c-muted);max-width:62ch}

/* ทองคำเปลวบนตัวอักษร */
.foil{
  background:var(--foil);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:foilShift 9s linear infinite;
}
@keyframes foilShift{to{background-position:220% 0}}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.icon{width:1.15em;height:1.15em;flex:none}

/* ---------- ตัวอักษรกำกับ ---------- */
.kicker{
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--c-gold-deep);margin:0 0 14px;
  display:inline-flex;align-items:center;gap:9px;
}
.kicker::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.kicker--deep{color:var(--c-gold-light)}

/* ---------- ลายกนกคั่น ---------- */
.kranok{display:flex;align-items:center;gap:12px;color:var(--c-gold);margin:0 0 18px;max-width:340px}
.kranok__line{height:1px;flex:1;background:linear-gradient(90deg,transparent,currentColor);transform-origin:right;animation:lineIn 1.1s var(--ease-out) both}
.kranok__line:last-child{background:linear-gradient(90deg,currentColor,transparent);transform-origin:left}
@keyframes lineIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.kranok__mark{width:46px;height:23px;flex:none;animation:markIn .8s var(--ease-out) .2s both}
@keyframes markIn{from{opacity:0;transform:translateY(6px) scale(.85)}to{opacity:1;transform:none}}
.kranok--center{margin-inline:auto}
.kranok--left{margin-left:0}
.kranok--light{color:var(--c-gold-light)}

/* =============================================================================
   HEADER
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:60;transition:box-shadow .3s var(--ease)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold-rule);opacity:.55}
.site-header.is-stuck{box-shadow:0 10px 30px -18px rgba(12,40,34,.5)}

.topline{background:var(--c-deep);color:var(--c-gold-light);font-size:12.5px;
  transition:max-height .35s var(--ease),opacity .25s;max-height:60px;overflow:hidden}
.site-header.is-stuck .topline{max-height:0;opacity:0}
.topline__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;flex-wrap:wrap}
.topline__item{display:inline-flex;align-items:center;gap:7px;color:var(--c-gold-light);white-space:nowrap}
.topline__item:hover{color:#fff}
.topline__right{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

.langswitch{display:flex;align-items:center;gap:3px;font-family:var(--font-mono);font-size:11.5px;
  background:rgba(255,255,255,.06);border-radius:var(--radius-pill);padding:3px 5px 3px 9px}
.langswitch__icon{color:var(--c-gold);margin-right:3px}
.langswitch__a{
  color:var(--c-gold-light);padding:3px 10px;border-radius:var(--radius-pill);letter-spacing:.03em;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.langswitch__a:hover{color:#fff;background:rgba(255,255,255,.1)}
.langswitch__a.is-on{background:var(--foil);color:var(--c-deep);font-weight:600}

.navbar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px;
  background:color-mix(in srgb, var(--c-ivory) 88%, transparent);backdrop-filter:blur(14px) saturate(1.3);
  transition:min-height .3s var(--ease)}
.site-header.is-stuck .navbar{min-height:64px}

.logo{display:flex;align-items:center;gap:13px;color:var(--c-ink)}
.logo__mark{width:42px;height:42px;display:grid;place-items:center;color:var(--c-gold);flex:none;
  transition:transform .5s var(--ease-out)}
.logo:hover .logo__mark{transform:translateY(-3px) rotate(-4deg)}
.logo__mark .chofa{width:100%;height:auto}
.logo__name{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-.02em;display:block;line-height:1.1}
.logo__name em{font-style:normal;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo__sub{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--c-muted);display:block}

.mainnav ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.mainnav a{
  display:block;padding:10px 14px;font-size:14.5px;color:var(--c-ink);position:relative;
  border-radius:var(--radius);transition:color .2s var(--ease),background .2s var(--ease);
}
.mainnav a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;
  background:var(--foil);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease-out);
}
.mainnav a:hover{color:var(--c-primary)}
.mainnav a:hover::after,.mainnav a.is-on::after{transform:scaleX(1)}
.mainnav a.is-on{color:var(--c-primary);font-weight:600}
.mainnav__cta{margin-left:12px}
.mainnav__cta a::after{display:none}
.mainnav__cta .btn{border-radius:var(--radius-pill)}

.navtoggle{display:none;align-items:center;gap:9px;background:none;border:1px solid var(--c-line);
  border-radius:var(--radius-pill);padding:10px 16px;font:inherit;font-size:13px;color:var(--c-ink);cursor:pointer}
.navtoggle__bars{display:grid;gap:4px;width:17px}
.navtoggle__bars i{height:1.6px;background:currentColor;display:block;border-radius:2px;transition:transform .28s var(--ease),opacity .2s}
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

@media (max-width:1080px){
  .navtoggle{display:inline-flex}
  .mainnav{
    position:absolute;left:0;right:0;top:100%;background:var(--c-ivory);
    border-top:var(--rule);box-shadow:var(--shadow-lift);
    max-height:0;overflow:hidden;transition:max-height .38s var(--ease-out);
  }
  .mainnav.is-open{max-height:80vh;overflow-y:auto}
  .mainnav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 22px}
  .mainnav a{padding:14px 0;border-bottom:1px solid var(--c-line);border-radius:0}
  .mainnav a::after{left:0;right:auto;width:34px;bottom:0}
  .mainnav__cta{margin:16px 0 0}
  .mainnav__cta a{justify-content:center}
}

/* =============================================================================
   ปุ่ม
   ========================================================================== */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;font-family:var(--font-body);font-size:14.5px;font-weight:600;
  letter-spacing:.01em;border-radius:var(--radius-pill);border:1px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease),background .25s,color .25s,border-color .25s;
  text-align:center;line-height:1.3;
}
.btn > *{position:relative;z-index:2}
.btn--gold{background:var(--foil);background-size:200% 100%;color:var(--c-deep);border-color:transparent;box-shadow:var(--shadow-gold)}
.btn--gold:hover{color:var(--c-deep);transform:translateY(-2px);background-position:100% 0;box-shadow:0 16px 34px -14px color-mix(in srgb,var(--c-gold) 75%,transparent)}
.btn--primary{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.btn--primary:hover{background:var(--c-primary-soft);border-color:var(--c-primary-soft);color:#fff;transform:translateY(-2px)}
.btn--ghost{background:rgba(255,255,255,.06);color:var(--c-gold-light);border-color:rgba(255,255,255,.28);backdrop-filter:blur(4px)}
.btn--ghost:hover{border-color:var(--c-gold);color:var(--c-gold-light);background:rgba(255,255,255,.13);transform:translateY(-2px)}
.btn--outline{background:transparent;color:var(--c-primary);border-color:var(--c-line)}
.btn--outline:hover{border-color:var(--c-gold);color:var(--c-primary);background:color-mix(in srgb,var(--c-gold) 8%,transparent);transform:translateY(-2px)}
.btn--sm{padding:10px 19px;font-size:13.5px}
.btn--lg{padding:17px 34px;font-size:16px}
.btn--full{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* แสงกวาดบนปุ่ม */
.btn--shine::before{
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:left .65s var(--ease-out);
}
.btn--shine:hover::before{left:130%}

/* =============================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(80% 60% at 80% 12%, color-mix(in srgb, var(--c-primary-soft) 45%, transparent) 0%, transparent 62%),
    radial-gradient(60% 50% at 8% 90%, color-mix(in srgb, var(--c-gold-deep) 24%, transparent) 0%, transparent 60%),
    linear-gradient(158deg, var(--c-deep) 0%, var(--c-deep-2) 52%, var(--c-primary) 132%);
}
.hero.has-bg::before{
  content:"";position:absolute;inset:-4%;background-image:var(--bg-image);
  background-size:cover;background-position:center;opacity:.3;
  animation:heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.07) translate3d(-1.5%,-1%,0)}}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(92deg, var(--c-deep) 0%, color-mix(in srgb, var(--c-deep) 74%, transparent) 44%, transparent 82%);
}
.hero__in{position:relative;z-index:2;padding-block:clamp(58px,8.5vw,116px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,4vw,64px);align-items:center}
.hero h1{color:#fff;margin-bottom:.42em}
.hero h1 .foil{filter:drop-shadow(0 2px 12px rgba(214,169,63,.28))}
.hero__sub{font-size:clamp(16px,1.35vw,19px);color:rgba(255,255,255,.84);max-width:56ch;margin-bottom:30px}
.hero .kicker{color:var(--c-gold-light)}
.hero__badges{display:flex;flex-wrap:wrap;gap:11px 24px;margin-top:32px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.16);font-size:13.5px;color:rgba(255,255,255,.8)}
.hero__badges span{display:inline-flex;align-items:center;gap:9px}
.hero__badges .icon{color:var(--c-gold)}

/* ประกายทองลอย */
.sparkles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.sparkles i{
  position:absolute;width:3px;height:3px;border-radius:50%;background:var(--c-gold-light);
  opacity:0;animation:floatUp linear infinite;box-shadow:0 0 8px 1px color-mix(in srgb,var(--c-gold) 60%,transparent);
}
@keyframes floatUp{
  0%{opacity:0;transform:translateY(20px) scale(.6)}
  15%{opacity:.85}
  85%{opacity:.5}
  100%{opacity:0;transform:translateY(-140px) scale(1.2)}
}

/* หัวหน้ารอง */
.pagehead{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(70% 60% at 82% 10%, color-mix(in srgb, var(--c-primary-soft) 38%, transparent) 0%, transparent 62%),
    linear-gradient(155deg, var(--c-deep) 0%, var(--c-deep-2) 68%, var(--c-primary) 142%);
}
.pagehead.has-bg::before{content:"";position:absolute;inset:0;background-image:var(--bg-image);
  background-size:cover;background-position:center;opacity:.26}
.pagehead::after{content:"";position:absolute;inset:0;
  background:linear-gradient(92deg,var(--c-deep) 4%, color-mix(in srgb,var(--c-deep) 62%,transparent) 56%, transparent 100%)}
.pagehead__in{position:relative;z-index:2;padding-block:clamp(48px,6.5vw,88px)}
.pagehead h1{color:#fff;max-width:20ch;margin-bottom:.35em}
.pagehead p{color:rgba(255,255,255,.83);max-width:62ch;margin:0}

/* ขอบลายไทยจั่ววัด */
.thai-edge{position:relative;height:16px;background:var(--c-deep);overflow:hidden}
.thai-edge::before,.thai-edge::after{content:"";position:absolute;inset:0}
.thai-edge::before{
  background-image:linear-gradient(135deg,var(--c-gold) 26%,transparent 26%),
                   linear-gradient(225deg,var(--c-gold) 26%,transparent 26%);
  background-size:24px 16px;opacity:.55;
}
.thai-edge::after{
  background-image:linear-gradient(135deg,var(--c-gold-light) 14%,transparent 14%),
                   linear-gradient(225deg,var(--c-gold-light) 14%,transparent 14%);
  background-size:24px 16px;opacity:.35;
}

/* =============================================================================
   SECTION
   ========================================================================== */
.section{padding-block:var(--sp-section);position:relative}
.section--alt{background:var(--c-ivory-2)}
.section--mint{background:var(--c-mint)}
.section--deep{background:var(--c-deep);color:#fff;position:relative;overflow:hidden}
.section--deep::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 88% 10%, color-mix(in srgb,var(--c-primary-soft) 34%,transparent), transparent 66%);
}
.section--deep > *{position:relative;z-index:2}
.section--deep h2,.section--deep h3{color:#fff}
.section--deep p{color:rgba(255,255,255,.79)}
.section--tight{padding-block:clamp(42px,5vw,68px)}

.sechead{max-width:66ch;margin-bottom:clamp(30px,3.6vw,50px)}
.sechead--center{margin-inline:auto;text-align:center}
.sechead--center .kranok{margin-inline:auto}
.sechead--center .kicker{justify-content:center}
.sechead p{color:var(--c-muted);margin:0}
.section--deep .sechead p{color:rgba(255,255,255,.74)}

/* =============================================================================
   แถบขอราคาด่วนผ่าน WhatsApp
   ========================================================================== */
.quotebar{
  position:relative;margin-top:-38px;z-index:20;
  background:var(--c-surface);border:var(--rule);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);padding:clamp(20px,2.6vw,30px);
  overflow:hidden;
}
.quotebar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--foil)}
.quotebar__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-bottom:18px}
.quotebar__head h2{font-size:clamp(19px,1.9vw,24px);margin:0}
.quotebar__head p{color:var(--c-muted);font-size:14px;margin:0;flex:1 1 260px}
.quotebar__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;align-items:end}
.quotebar__grid .field{gap:5px}
.quotebar__go{grid-column:span 1;min-width:180px}
.quotebar__note{margin:14px 0 0;font-size:12.5px;color:var(--c-muted);display:flex;align-items:center;gap:8px}
.quotebar__note .icon{color:var(--c-gold);width:15px;height:15px}
@media (max-width:720px){.quotebar{margin-top:0;border-radius:var(--radius)}}

/* =============================================================================
   แถบตัวเลข
   ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);overflow:hidden}
.stat{background:var(--c-deep);padding:clamp(22px,2.6vw,32px) clamp(16px,2vw,24px);text-align:center;position:relative}
.stat::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;background:var(--foil);
  transform:translateX(-50%);transition:width .5s var(--ease-out)}
.stat:hover::after{width:60%}
.stat__n{font-family:var(--font-display);font-size:clamp(32px,4vw,50px);font-weight:700;line-height:1;
  background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;display:block;margin-bottom:8px}
.stat__k{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.66);line-height:1.6;display:block}

/* =============================================================================
   กล่องคำตอบสั้น (AEO)
   ========================================================================== */
.answerbox{
  background:var(--c-surface);border:var(--rule);border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,38px);position:relative;overflow:hidden;box-shadow:var(--shadow-soft);
}
.answerbox::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--foil)}
.answerbox::after{
  content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--c-gold) 16%,transparent), transparent 70%);
  pointer-events:none;
}
.answerbox__tag{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-gold-deep);display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;
}
.answerbox h2{font-size:clamp(21px,2.3vw,29px);margin-bottom:.5em}
.answerbox p{color:var(--c-ink);max-width:78ch;margin:0}

/* =============================================================================
   การ์ด
   ========================================================================== */
.grid{display:grid;gap:clamp(16px,2vw,26px)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(222px,1fr))}

.card{
  background:var(--c-surface);border:var(--rule);border-radius:var(--radius-lg);
  padding:clamp(22px,2.5vw,30px);position:relative;overflow:hidden;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease),border-color .35s;
  display:flex;flex-direction:column;
}
/* มุมลายไทยวาดออกมาตอนชี้ */
.card::before,.card::after{
  content:"";position:absolute;width:26px;height:26px;pointer-events:none;
  border-color:var(--c-gold);opacity:0;transition:opacity .35s var(--ease),transform .45s var(--ease-out);
}
.card::before{top:10px;left:10px;border-top:1.5px solid;border-left:1.5px solid;border-top-left-radius:6px;transform:translate(6px,6px)}
.card::after{bottom:10px;right:10px;border-bottom:1.5px solid;border-right:1.5px solid;border-bottom-right-radius:6px;transform:translate(-6px,-6px)}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--c-gold) 40%,var(--c-line))}
.card:hover::before,.card:hover::after{opacity:.8;transform:none}

.card__icon{width:50px;height:50px;display:grid;place-items:center;color:var(--c-gold-deep);
  border:1px solid var(--c-line);border-radius:50%;margin-bottom:18px;position:relative;
  background:color-mix(in srgb,var(--c-gold) 8%,transparent);
  transition:transform .45s var(--ease-out),background .35s,color .35s}
.card__icon .icon{width:22px;height:22px}
.card:hover .card__icon{transform:rotate(-8deg) scale(1.06);background:var(--foil);color:var(--c-deep)}
.card h3{margin-bottom:.35em}
.card__lead{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-gold-deep);margin-bottom:12px;display:block;line-height:1.6}
.card p{color:var(--c-muted);font-size:15px;margin:0}
.card__foot{margin-top:auto;padding-top:20px}

.section--deep .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15)}
.section--deep .card p{color:rgba(255,255,255,.75)}
.section--deep .card__icon{border-color:rgba(255,255,255,.24);color:var(--c-gold-light);background:rgba(255,255,255,.05)}
.section--deep .card__lead{color:var(--c-gold-light)}

/* =============================================================================
   ช่องใส่รูป
   ========================================================================== */
.img-slot{margin:0;aspect-ratio:var(--ratio,4/3);overflow:hidden;border-radius:var(--radius-lg);background:var(--c-ivory-2);position:relative}
.img-slot img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.img-slot.is-empty{
  border:1.5px dashed color-mix(in srgb, var(--c-gold) 55%, transparent);
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb,var(--c-gold) 7%,transparent) 0 10px, transparent 10px 20px),
    var(--c-ivory-2);
  display:grid;place-items:center;color:var(--c-muted);
}
.img-slot.is-empty::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 25%,color-mix(in srgb,var(--c-gold) 14%,transparent) 50%,transparent 75%);
  background-size:250% 100%;animation:shimmer 3.4s linear infinite;
}
@keyframes shimmer{to{background-position:-250% 0}}
.img-slot__inner{text-align:center;padding:18px;display:grid;justify-items:center;gap:6px;position:relative;z-index:2}
.img-slot__corner{width:36px;height:36px;color:var(--c-gold);margin-bottom:2px}
.img-slot__label{font-size:13px;font-weight:600;color:var(--c-primary)}
.img-slot__path{font-family:var(--font-mono);font-size:11px;color:var(--c-muted);
  background:rgba(0,0,0,.05);padding:3px 9px;border-radius:3px;word-break:break-all}
.img-slot__alt{font-size:11.5px;color:var(--c-muted);opacity:.8;max-width:28ch}
a:hover .img-slot img,.card:hover .img-slot img,.dest:hover .img-slot img,.vehicle:hover .img-slot img{transform:scale(1.06)}

/* =============================================================================
   FLEET
   ========================================================================== */
.fleetgroup{margin-bottom:clamp(38px,5vw,70px)}
.fleetgroup__head{display:flex;align-items:baseline;gap:14px;margin-bottom:24px;
  padding-bottom:14px;position:relative}
.fleetgroup__head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold-rule);opacity:.7}
.fleetgroup__head h2{margin:0;font-size:clamp(22px,2.3vw,29px)}
.fleetgroup__count{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-muted)}

.vehicle{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,3vw,40px);
  align-items:center;background:var(--c-surface);border:var(--rule);border-radius:var(--radius-lg);
  padding:clamp(16px,2vw,24px);margin-bottom:20px;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease),border-color .35s;
}
.vehicle:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--c-gold) 38%,var(--c-line))}
.vehicle:nth-child(even) .vehicle__media{order:2}
.vehicle__body h3{margin-bottom:.25em}
.vehicle__class{font-family:var(--font-mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--c-gold-deep);display:block;margin-bottom:10px}
.vehicle__body p{color:var(--c-muted);font-size:15px}
.specs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.spec{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;
  border:1px solid var(--c-line);border-radius:var(--radius-pill);padding:6px 14px;color:var(--c-ink);
  background:var(--c-ivory);transition:border-color .25s,background .25s;
}
.vehicle:hover .spec{border-color:color-mix(in srgb,var(--c-gold) 42%,transparent)}
.spec .icon{width:16px;height:16px;color:var(--c-gold-deep)}
.spec b{font-family:var(--font-mono);font-weight:600}
.vehicle__best{font-size:13.5px;color:var(--c-muted);border-top:1px dashed var(--c-line);padding-top:13px;margin-top:4px}
.vehicle__best b{color:var(--c-ink);font-weight:600}
.vehicle__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:20px}

.price{font-family:var(--font-mono);font-size:20px;font-weight:600;color:var(--c-primary);font-variant-numeric:tabular-nums}
.price__cur{font-size:12px;letter-spacing:.08em;color:var(--c-muted)}
.price--ask{
  font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--c-gold-deep);
  border:1px solid color-mix(in srgb,var(--c-gold) 48%,transparent);border-radius:var(--radius-pill);
  padding:6px 15px;display:inline-block;background:color-mix(in srgb,var(--c-gold) 10%,transparent);
}

/* =============================================================================
   DESTINATIONS
   ========================================================================== */
.dest{background:var(--c-surface);border:var(--rule);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease),border-color .35s}
.dest:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--c-gold) 38%,var(--c-line))}
.dest .img-slot{border-radius:0}
.dest__body{padding:clamp(19px,2.2vw,27px);display:flex;flex-direction:column;flex:1}
.dest__body h2,.dest__body h3{margin-bottom:.3em}
.dest__meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.chip{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  border:1px solid var(--c-line);border-radius:var(--radius-pill);padding:4px 11px;color:var(--c-muted);
  display:inline-flex;align-items:center;gap:5px;background:var(--c-ivory);
}
.chip .icon{width:13px;height:13px}
.chip--gold{border-color:color-mix(in srgb,var(--c-gold) 52%,transparent);color:var(--c-gold-deep);
  background:color-mix(in srgb,var(--c-gold) 9%,transparent)}
.dest__body p{color:var(--c-muted);font-size:14.5px}
.dest__stops{font-size:12.5px;color:var(--c-muted);border-top:1px dashed var(--c-line);
  padding-top:13px;margin-top:auto}
.dest__stops b{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--c-gold-deep);margin-bottom:5px;font-weight:500}

/* =============================================================================
   ขั้นตอน
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:0;
  border:var(--rule);border-radius:var(--radius-lg);overflow:hidden;background:var(--c-surface)}
.step{padding:clamp(22px,2.5vw,30px);border-right:var(--rule);position:relative;
  transition:background .3s var(--ease)}
.step:last-child{border-right:0}
.step:hover{background:var(--c-mint)}
.step__no{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--c-gold-deep);
  display:block;margin-bottom:14px;font-weight:600}
.step__no::after{content:"";display:block;width:28px;height:2px;background:var(--foil);margin-top:9px;
  transition:width .4s var(--ease-out)}
.step:hover .step__no::after{width:52px}
.step h3{font-size:17px;margin-bottom:.35em}
.step p{font-size:14px;color:var(--c-muted);margin:0}
@media (max-width:860px){.step{border-right:0;border-bottom:var(--rule)}.step:last-child{border-bottom:0}}

/* =============================================================================
   ลูกค้า
   ========================================================================== */
.cust{display:flex;gap:16px;padding:22px 0;border-bottom:1px dashed var(--c-line);transition:transform .3s var(--ease)}
.cust:hover{transform:translateX(4px)}
.cust__ic{width:44px;height:44px;flex:none;display:grid;place-items:center;color:var(--c-gold-deep);
  border:1px solid var(--c-line);border-radius:50%;background:color-mix(in srgb,var(--c-gold) 8%,transparent);
  transition:background .3s,color .3s}
.cust:hover .cust__ic{background:var(--foil);color:var(--c-deep)}
.cust h3{font-size:17px;margin-bottom:.25em}
.cust p{font-size:14.5px;color:var(--c-muted);margin:0}

/* =============================================================================
   FAQ
   ========================================================================== */
.faq{border-top:var(--rule)}
.faq details{border-bottom:var(--rule)}
.faq summary{
  display:flex;align-items:flex-start;gap:15px;padding:21px 0;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-size:clamp(16.5px,1.5vw,19.5px);font-weight:600;color:var(--c-ink);
  transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"";width:22px;height:22px;flex:none;margin-top:5px;border-radius:50%;
  border:1px solid var(--c-gold);position:relative;
  background:
    linear-gradient(var(--c-gold-deep),var(--c-gold-deep)) center/9px 1.5px no-repeat,
    linear-gradient(var(--c-gold-deep),var(--c-gold-deep)) center/1.5px 9px no-repeat;
  transition:transform .3s var(--ease-out),background-size .3s var(--ease);
}
.faq details[open] summary::before{transform:rotate(135deg);background-size:9px 1.5px,0 0}
.faq summary:hover{color:var(--c-primary)}
.faq__a{padding:0 0 24px 37px;color:var(--c-muted);font-size:15px;max-width:82ch;
  animation:faqIn .4s var(--ease-out) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* =============================================================================
   เนื้อหาแบบเอกสาร
   ========================================================================== */
.prose{max-width:72ch}
.prose p{color:var(--c-muted)}
.prose p strong{color:var(--c-ink)}
.termlist{counter-reset:tl;list-style:none;margin:0;padding:0;max-width:82ch}
.termlist li{counter-increment:tl;padding:24px 0 24px 56px;border-bottom:var(--rule);position:relative}
.termlist li::before{
  content:counter(tl,decimal-leading-zero);position:absolute;left:0;top:26px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--c-gold-deep);font-weight:600;
}
.termlist h3{font-size:18px;margin-bottom:.35em}
.termlist p{margin:0;color:var(--c-muted);font-size:15px}

/* =============================================================================
   กล่อง QR
   ========================================================================== */
.qrbox{
  background:var(--c-deep);color:#fff;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid color-mix(in srgb,var(--c-gold) 42%,transparent);position:relative;
  box-shadow:var(--shadow-lift);
}
.qrbox::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(95% 70% at 50% 0%, color-mix(in srgb,var(--c-primary-soft) 45%,transparent), transparent 72%)}
.qrbox__head{position:relative;z-index:2;text-align:center;padding:26px 24px 8px;border-bottom:1px solid rgba(255,255,255,.13)}
.qrbox__title{font-family:var(--font-display);font-size:34px;font-weight:700;letter-spacing:.2em;margin:0;
  background:var(--foil);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:foilShift 7s linear infinite}
.qrbox__sub{font-size:13px;color:rgba(255,255,255,.74);margin:5px 0 20px}
.qrbox__grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;background:rgba(255,255,255,.13)}
.qrcell{background:var(--c-deep);padding:22px 16px;text-align:center;transition:background .3s}
.qrcell:hover{background:var(--c-deep-2)}
.qrcell__img{background:#fff;border-radius:var(--radius);padding:9px;display:block;margin:0 auto 11px;max-width:180px;
  transition:transform .35s var(--ease-out),box-shadow .35s}
.qrcell:hover .qrcell__img{transform:scale(1.05);box-shadow:0 12px 26px -12px rgba(0,0,0,.6)}
/* QR ต้นฉบับมีสัดส่วนไม่เท่ากัน จัดให้เป็นสี่เหลี่ยมจัตุรัสเท่ากันทุกช่อง */
.qrcell__img img{border-radius:2px;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff}
.qrcell__label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--c-gold-light)}
.qrcell.is-empty .qrcell__img{background:rgba(255,255,255,.06);border:1.5px dashed color-mix(in srgb,var(--c-gold) 50%,transparent);
  aspect-ratio:1;display:grid;place-items:center;color:rgba(255,255,255,.6);font-size:11px;padding:14px}
.qrbox__foot{position:relative;z-index:2;padding:16px 24px 24px;text-align:center;font-size:12.5px;color:rgba(255,255,255,.62)}

.contactlist{list-style:none;margin:0;padding:0}
.contactlist li{display:flex;gap:14px;align-items:flex-start;padding:17px 0;border-bottom:var(--rule)}
.contactlist .icon{color:var(--c-gold-deep);width:20px;height:20px;margin-top:3px}
.contactlist__k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--c-muted);display:block;margin-bottom:2px}
.contactlist__v{font-size:17.5px;color:var(--c-ink);font-weight:600}
.contactlist__v a{color:var(--c-ink)}
.contactlist__v a:hover{color:var(--c-gold-deep)}

/* =============================================================================
   ฟอร์ม (ใช้ในแถบขอราคา)
   ========================================================================== */
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
.field label{font-size:12.5px;font-weight:600;color:var(--c-ink);
  font-family:var(--font-mono);letter-spacing:.09em;text-transform:uppercase}
.field input,.field select,.field textarea{
  font:inherit;font-family:var(--font-body);font-size:15px;padding:12px 14px;
  border:1px solid var(--c-line);border-radius:var(--radius);
  background:var(--c-ivory);color:var(--c-ink);width:100%;
  transition:border-color .2s var(--ease),background .2s,box-shadow .2s;
}
.field input::placeholder{color:color-mix(in srgb,var(--c-muted) 62%,transparent)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--c-gold);background:var(--c-surface);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c-gold) 20%,transparent);
}
.field textarea{min-height:110px;resize:vertical}

.notice{border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:24px;border:var(--rule);
  background:var(--c-surface);position:relative;overflow:hidden;box-shadow:var(--shadow-xs)}
.notice::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--foil)}
.notice h3{margin-bottom:.3em;font-size:18px}
.notice p{margin:0;color:var(--c-muted);font-size:14.5px}

/* =============================================================================
   แกลเลอรี
   ========================================================================== */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:14px}
.gallery .img-slot{border:var(--rule)}

/* =============================================================================
   แถบ CTA ท้ายหน้า
   ========================================================================== */
.ctaband{position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(60% 80% at 78% 20%, color-mix(in srgb,var(--c-primary-soft) 42%,transparent), transparent 65%),
    linear-gradient(118deg,var(--c-deep) 0%,var(--c-primary) 100%)}
.ctaband.has-bg::before{content:"";position:absolute;inset:0;background-image:var(--bg-image);
  background-size:cover;background-position:center;opacity:.24}
.ctaband::after{content:"";position:absolute;inset:0;
  background:linear-gradient(92deg,var(--c-deep) 0%,color-mix(in srgb,var(--c-deep) 58%,transparent) 62%,transparent 100%)}
.ctaband__in{position:relative;z-index:2;padding-block:clamp(48px,6.5vw,80px);
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:34px;align-items:center}
.ctaband h2{color:#fff;font-size:clamp(24px,2.8vw,36px);margin-bottom:.4em}
.ctaband p{color:rgba(255,255,255,.82);font-size:15px;max-width:62ch;margin:0}
.ctaband__actions{display:flex;flex-direction:column;gap:11px}
@media (max-width:880px){.ctaband__in{grid-template-columns:1fr}}

/* =============================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--c-deep);color:rgba(255,255,255,.77);font-size:14.5px;position:relative}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--gold-rule);opacity:.6}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:clamp(24px,3vw,46px);
  padding-block:clamp(46px,5vw,72px)}
.footer__col h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-gold);margin-bottom:19px;font-weight:500}
.logo__mark--footer{width:40px;height:40px;color:var(--c-gold);display:block;margin-bottom:13px}
.footer__name{font-family:var(--font-display);font-size:23px;font-weight:700;color:#fff;margin:0 0 12px}
.footer__name em{font-style:normal;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.footer__about{font-size:14px;line-height:1.75;margin-bottom:15px;max-width:42ch}
.footer__langs{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--c-gold-light);margin:0}
.footer__links,.footer__contact{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer__links a{color:rgba(255,255,255,.79);font-size:14px;display:inline-block;transition:transform .25s var(--ease),color .2s}
.footer__links a:hover{color:var(--c-gold);transform:translateX(4px)}
.footer__contact li{display:flex;align-items:center;gap:10px;font-size:14px}
.footer__contact .icon{color:var(--c-gold);width:16px;height:16px}
.footer__contact a{color:rgba(255,255,255,.86)}
.footer__contact a:hover{color:var(--c-gold)}
.footer__col--contact .btn{margin-top:19px}
.footer__bar{border-top:1px solid rgba(255,255,255,.1)}
.footer__bar-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  padding-block:19px;font-size:12.5px;color:rgba(255,255,255,.56)}
.footer__bar p{margin:0}
@media (max-width:900px){.footer__grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}

/* =============================================================================
   ปุ่มลอย + กลับขึ้นบน
   ========================================================================== */
.floatchat{position:fixed;right:18px;bottom:18px;z-index:70;display:grid;gap:10px;
  transition:opacity .3s var(--ease),transform .35s var(--ease-out)}
.floatchat.is-hidden{opacity:0;transform:translateY(16px) scale(.9);pointer-events:none}
.floatchat__btn{
  display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--radius-pill);
  background:var(--c-primary);color:#fff;font-size:13.5px;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.26);
  transition:transform .3s var(--ease-out),box-shadow .3s,filter .3s;
}
.floatchat__btn:hover{transform:translateX(-4px) scale(1.03);color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.34)}
.floatchat__btn--line{background:#06c755}
.floatchat__btn--wa{background:#25d366;color:#04331a}
.floatchat__btn--wa:hover{color:#04331a}
.floatchat__btn--wa::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:pulseWa 2.6s var(--ease-out) infinite;
}
.floatchat__btn{position:relative}
@keyframes pulseWa{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.floatchat__btn--wc{background:#07c160;color:#04331a}
.floatchat__btn--wc:hover{color:#04331a}
.floatchat__btn--tel{background:var(--foil);color:var(--c-deep)}
.floatchat__btn--tel:hover{color:var(--c-deep)}
.floatchat__btn .icon{width:18px;height:18px;position:relative;z-index:2}
.floatchat__btn span{position:relative;z-index:2}

.backtop{
  position:fixed;left:18px;bottom:18px;z-index:69;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--c-surface);color:var(--c-primary);
  border:1px solid var(--c-line);box-shadow:var(--shadow-soft);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease-out),visibility .3s;
}
.backtop.is-on{opacity:1;visibility:visible;transform:none}
.backtop:hover{border-color:var(--c-gold);color:var(--c-gold-deep)}
.backtop .icon{width:19px;height:19px;transform:rotate(-90deg)}

@media (max-width:640px){
  .floatchat{right:10px;bottom:10px;grid-auto-flow:column;gap:8px}
  .floatchat__btn span{display:none}
  .floatchat__btn{padding:14px;border-radius:50%}
  .backtop{left:10px;bottom:10px;width:40px;height:40px}
  .footer__bar-in{padding-bottom:78px}
}

/* =============================================================================
   ลูกเล่นตอนเลื่อนหน้า  (มองเห็นได้ทันทีถ้าไม่มี JS)
   ========================================================================== */
html.js .reveal{opacity:0;transform:translateY(22px)}
html.js .reveal.is-in{opacity:1;transform:none;
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
html.js .reveal[data-d="1"].is-in{transition-delay:.08s}
html.js .reveal[data-d="2"].is-in{transition-delay:.16s}
html.js .reveal[data-d="3"].is-in{transition-delay:.24s}
html.js .reveal[data-d="4"].is-in{transition-delay:.32s}

.yaksha{display:block}
.chofa{display:block;width:100%;height:auto}

/* =============================================================================
   Responsive
   ========================================================================== */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr}
  .hero__media{display:none}
  .vehicle{grid-template-columns:1fr}
  .vehicle:nth-child(even) .vehicle__media{order:0}
}
@media (max-width:640px){
  body{font-size:16px}
  .topline__in{justify-content:center;text-align:center;gap:8px}
  .btn{width:100%}
  .btn-row .btn{width:auto;flex:1 1 auto;min-width:158px}
  .hero__badges{gap:9px 18px;font-size:12.5px}
  .quotebar__go{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html.js .reveal{opacity:1!important;transform:none!important}
}
@media print{
  .site-header,.floatchat,.backtop,.ctaband,.site-footer,.quotebar{display:none}
}