/* ============================================================
   Dream Force — Foreign Worker Services
   Shared brand stylesheet  •  Navy + Teal  •  Noto Sans/Serif Thai
   ============================================================ */

:root{
  /* Brand — sampled from logo */
  --navy:        #1b3a5c;
  --navy-700:    #16314d;
  --navy-800:    #102639;
  --navy-900:    #0b1c2c;
  --teal:        #2e7d96;
  --teal-600:    #246072;
  --teal-400:    #4a9cb4;
  --teal-200:    #aed6e0;
  --gold:        #c2a14e;
  --gold-200:    #ead9ad;
  --glow-rgb:    46,125,150;
  --gold-rgb:    194,161,78;
  --tint-a:      #eaf4f7;
  --tint-b:      #d8ebf0;

  /* Neutrals */
  --ink:         #16222e;
  --body:        #3d4d59;
  --muted:       #6b7a87;
  --line:        #e4e9ee;
  --line-soft:   #eef2f6;
  --bg:          #f4f7fa;
  --bg-2:        #eef3f7;
  --surface:     #ffffff;

  /* Status */
  --green:       #1f9d61;
  --green-bg:    #e7f6ee;
  --amber:       #d98a1f;
  --amber-bg:    #fbf0dd;
  --red:         #d8483f;

  /* Type */
  --sans: "Noto Sans Thai", system-ui, -apple-system, sans-serif;
  --serif: "Noto Serif Thai", Georgia, serif;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-full: 999px;

  /* Shadow */
  --sh-sm: 0 1px 3px rgba(16,38,57,.06), 0 1px 2px rgba(16,38,57,.04);
  --sh-md: 0 6px 22px rgba(16,38,57,.08);
  --sh-lg: 0 18px 48px rgba(16,38,57,.13);
  --sh-navy: 0 22px 50px rgba(11,28,44,.30);

  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--body);
  background:var(--surface);
  font-size:17px;
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:var(--teal-600); text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink); line-height:1.28; margin:0; font-weight:700; letter-spacing:.1px; }
p{ margin:0 0 1em; text-wrap:pretty; }
strong{ color:var(--ink); font-weight:600; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section{ padding:84px 0; }
.section-sm{ padding:56px 0; }
.bg-soft{ background:var(--bg); }
.bg-soft2{ background:var(--bg-2); }
.bg-navy{ background:var(--navy-800); color:#cfdbe6; }
.center{ text-align:center; }

/* ---------- Eyebrow + headings ---------- */
.eyebrow{
  font-family:var(--sans);
  display:inline-flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:700; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--teal-600);
  margin-bottom:16px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--gold); border-radius:2px; }
.eyebrow.solo::before{ display:none; }
.eyebrow .ic{ width:15px; height:15px; flex:none; }
.bg-navy .eyebrow{ color:var(--teal-200); }

.h-sec{ font-size:clamp(28px,3.4vw,40px); }
.h-lead{ font-size:19px; color:var(--muted); font-family:var(--sans); max-width:62ch; }
.center .h-lead{ margin-left:auto; margin-right:auto; }
.bg-navy .h-sec{ color:#fff; }
.bg-navy .h-lead{ color:#a9bccd; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:700; font-size:16px;
  padding:14px 26px; border-radius:var(--r-md); border:1.6px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap; line-height:1;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{ background:var(--teal); color:#fff; box-shadow:0 8px 20px rgba(var(--glow-rgb),.28); }
.btn-primary:hover{ background:var(--teal-600); box-shadow:0 12px 26px rgba(var(--glow-rgb),.34); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-700); }
.btn-gold{ background:var(--gold); color:#3a2f12; }
.btn-gold:hover{ filter:brightness(1.05); }
.btn-ghost{ background:transparent; color:var(--navy); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--navy); background:#fff; }
.btn-ghost-light{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.28); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); }
.btn-lg{ padding:17px 32px; font-size:17px; }
.btn-block{ width:100%; }
.btn .ic{ width:19px; height:19px; }

/* ============================================================
   Header / Nav
   ============================================================ */
.topbar{ background:var(--navy-900); color:#a7bccf; font-size:13.5px; }
.topbar a{ color:#cfe0ee; }
.topbar .wrap{ display:flex; align-items:center; gap:22px; height:42px; }
.topbar .tb-item{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.topbar .ic{ width:15px; height:15px; color:var(--teal-400); flex:none; }
.topbar .spacer{ flex:1; }
.topbar .tb-license{ display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:600; }
.topbar .tb-license b{ color:var(--gold-200); }
.topbar .tb-soc{ display:inline-flex; gap:6px; }
.topbar .tb-soc a{ width:26px; height:26px; display:grid; place-items:center; border-radius:7px; background:rgba(255,255,255,.08); }
.topbar .tb-soc a:hover{ background:var(--teal); }
.topbar .tb-soc .ic{ color:#fff; }
@media (max-width:860px){ .topbar .hide-sm{ display:none; } }

.nav{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line); transition:box-shadow .25s ease;
}
.nav.scrolled{ box-shadow:0 6px 20px rgba(16,38,57,.07); }
.nav .wrap{ display:flex; align-items:center; gap:18px; height:78px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:46px; width:auto; }
.brand-tag{ display:flex; flex-direction:column; line-height:1.05; }
.brand-tag b{ font-family:var(--serif); color:var(--navy); font-size:19px; }
.brand-tag span{ font-size:11.5px; color:var(--muted); letter-spacing:.3px; }
.nav-links{ display:flex; align-items:center; gap:4px; margin-left:18px; }
.nav-links a{
  font-family:var(--sans); font-weight:600; font-size:15.5px; color:var(--ink);
  padding:10px 15px; border-radius:var(--r-sm); position:relative; transition:color .15s, background .15s;
}
.nav-links a:hover{ color:var(--teal-600); background:var(--bg); }
.nav-links a.active{ color:var(--teal-600); }
.nav-links a.active::after{
  content:""; position:absolute; left:15px; right:15px; bottom:3px; height:2.5px;
  background:var(--gold); border-radius:2px;
}
.nav-cta{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav-phone{ display:inline-flex; align-items:center; gap:9px; font-weight:700; color:var(--navy); font-size:15.5px; }
.nav-phone .ic{ width:20px; height:20px; color:var(--teal); }
.nav-burger{ display:none; width:46px; height:46px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; cursor:pointer; }
.nav-burger span{ display:block; width:20px; height:2px; background:var(--navy); margin:4px auto; border-radius:2px; }

@media (max-width:1024px){
  .nav-links{ position:fixed; inset:0 0 0 auto; width:300px; background:#fff; flex-direction:column; align-items:stretch;
    padding:90px 18px 24px; margin:0; gap:4px; box-shadow:var(--sh-lg); transform:translateX(105%); transition:transform .3s var(--ease,cubic-bezier(.16,1,.3,1)); }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:17px; padding:14px 16px; }
  .nav-links a.active::after{ display:none; }
  .nav-links a.active{ background:var(--bg); }
  .nav-burger{ display:block; order:5; }
  .nav-phone-txt{ display:none; }
  .nav-scrim{ position:fixed; inset:0; background:rgba(11,28,44,.4); opacity:0; pointer-events:none; transition:opacity .3s; z-index:55; }
  .nav-scrim.open{ opacity:1; pointer-events:auto; }
}
@media (max-width:560px){
  .brand-tag{ display:none; }
  .nav .wrap{ height:66px; }
  .brand img{ height:40px; }
}

/* ============================================================
   Pills / badges / chips
   ============================================================ */
.pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:var(--r-full);
  font-size:13.5px; font-weight:600; background:var(--bg); color:var(--body); border:1px solid var(--line); }
.pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--teal); }
.pill-green{ background:var(--green-bg); color:#15683f; border-color:#cdebd9; }
.pill-green .dot{ background:var(--green); }
.pill-light{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:#dbe6f0; }
.pill-light .dot{ background:var(--teal-400); }

.flag{ width:26px; height:18px; border-radius:3px; box-shadow:0 1px 2px rgba(0,0,0,.18); flex:none; overflow:hidden; }

/* ============================================================
   Cards
   ============================================================ */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); }
.grid{ display:grid; gap:24px; }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .g-3,.g-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } }

/* Service card */
/* Service card — photo header, borderless */
.svc{ padding:0; border-radius:0; background:none; border:0; box-shadow:none; position:relative; overflow:visible;
  display:flex; flex-direction:column; transition:transform .2s ease; }
.svc:hover{ transform:translateY(-5px); }
.svc .svc-photo{ position:relative; height:158px; overflow:hidden; background:var(--bg-2); border-radius:var(--r-lg);
  box-shadow:var(--sh-md); transition:box-shadow .25s ease; }
.svc:hover .svc-photo{ box-shadow:var(--sh-lg); }
.svc .svc-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; }
.svc:hover .svc-photo img{ transform:scale(1.07); }
.svc .svc-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent 55%, rgba(11,28,44,.4)); }
.svc .svc-photo .svc-no{ position:absolute; top:12px; right:14px; z-index:2; font-family:var(--serif); font-size:15px; font-weight:800;
  color:var(--navy); background:rgba(255,255,255,.92); backdrop-filter:blur(5px); min-width:36px; height:36px; padding:0 9px;
  border-radius:10px; display:grid; place-items:center; box-shadow:0 3px 10px rgba(11,28,44,.18); }
.svc .svc-photo .svc-ic{ position:absolute; left:12px; bottom:-20px; z-index:2; width:46px; height:46px; border-radius:13px;
  background:#fff; box-shadow:var(--sh-sm); display:grid; place-items:center; color:var(--teal-600); transition:background .3s, color .3s; }
.svc:hover .svc-photo .svc-ic{ background:var(--teal); color:#fff; }
.svc .svc-photo .svc-ic .ic{ width:24px; height:24px; }
.svc .svc-body{ padding:30px 4px 0; display:flex; flex-direction:column; flex:1; }
.svc h3{ font-size:20px; margin-bottom:9px; transition:color .2s; }
.svc:hover h3{ color:var(--teal-600); }
.svc p{ font-size:15px; color:var(--muted); margin:0; }
.svc .svc-link{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-weight:700; font-size:14.5px; color:var(--teal-600); font-family:var(--sans); }

/* Icon tile (why us) */
.feat{ display:flex; gap:18px; align-items:flex-start; }
.feat .feat-ic{ width:50px; height:50px; border-radius:13px; flex:none; display:grid; place-items:center;
  background:var(--navy); color:#fff; }
.feat .feat-ic.gold{ background:linear-gradient(150deg,var(--gold),#a9883b); color:#fff; }
.feat .feat-ic .ic{ width:24px; height:24px; }
.feat h3{ font-size:18.5px; margin-bottom:5px; }
.feat p{ font-size:14.5px; color:var(--muted); margin:0; }

/* Stat */
.stat{ text-align:center; }
.stat .num{ font-family:var(--serif); font-weight:800; font-size:clamp(34px,4vw,48px); color:var(--navy); line-height:1; }
.bg-navy .stat .num{ color:#fff; }
.stat .num .u{ color:var(--teal); font-size:.6em; }
.bg-navy .stat .num .u{ color:var(--teal-400); }
.stat .lbl{ font-size:14.5px; color:var(--muted); margin-top:8px; font-weight:600; }
.bg-navy .stat .lbl{ color:#9fb4c6; }

/* ============================================================
   Document mockups (CSS art — passport, cards, visa)
   ============================================================ */
.docs{ position:relative; }
.doc{ border-radius:12px; box-shadow:var(--sh-lg); position:relative; overflow:hidden; }
.doc-pass{ width:200px; height:280px; background:linear-gradient(160deg,#234b6e,#13304a); color:#e7d9a8; padding:24px 20px;
  display:flex; flex-direction:column; }
.doc-pass .pass-top{ font-size:10px; letter-spacing:1.5px; color:#cdb978; opacity:.9; }
.doc-pass .pass-emblem{ width:74px; height:74px; border:1.6px solid #cbb775; border-radius:50%; margin:auto;
  display:grid; place-items:center; opacity:.85; }
.doc-pass .pass-emblem svg{ width:40px; height:40px; }
.doc-pass .pass-bot{ font-family:var(--serif); font-size:17px; color:#f0e3b6; text-align:center; }
.doc-pass .pass-sub{ font-size:9.5px; letter-spacing:1px; text-align:center; color:#bfa86a; opacity:.75; }

.doc-card{ width:300px; height:188px; border-radius:14px; padding:18px 18px; color:#fff; position:relative; }
.doc-card .dc-chip{ width:36px; height:27px; border-radius:5px; background:linear-gradient(135deg,#f3e3a6,#cdaa54); }
.doc-card .dc-row{ display:flex; justify-content:space-between; align-items:flex-start; }
.doc-card .dc-title{ font-size:11px; letter-spacing:.6px; font-weight:700; opacity:.92; }
.doc-card .dc-photo{ width:54px; height:66px; border-radius:6px; background:rgba(255,255,255,.85); }
.doc-card .dc-lines{ position:absolute; left:18px; bottom:18px; right:90px; }
.doc-card .dc-lines i{ display:block; height:7px; border-radius:4px; background:rgba(255,255,255,.55); margin-bottom:7px; }
.doc-card .dc-lines i:nth-child(2){ width:70%; }
.doc-card .dc-lines i:nth-child(3){ width:50%; background:rgba(255,255,255,.4); }
.doc-pink{ background:linear-gradient(150deg,#e98aa6,#c84e74); }
.doc-blue{ background:linear-gradient(150deg,#3f7fa8,#23597a); }
.doc-visa{ width:150px; height:104px; border-radius:9px; background:linear-gradient(150deg,#f3f6ef,#dde7d4);
  border:1px solid #cbd8bf; padding:12px; color:#2f5132; box-shadow:var(--sh-md); }
.doc-visa .vz-h{ font-size:10px; font-weight:800; letter-spacing:2px; color:#3a6b3d; }
.doc-visa .vz-stamp{ position:absolute; }

/* ============================================================
   Process / steps
   ============================================================ */
.steps{ counter-reset:step; display:grid; gap:22px; }
.step{ display:flex; gap:20px; align-items:flex-start; position:relative; }
.step .step-n{ width:52px; height:52px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-family:var(--serif); font-weight:800; font-size:21px; color:#fff; background:var(--navy);
  box-shadow:0 6px 16px rgba(27,58,92,.25); position:relative; z-index:2; }
.step.tl .step-n{ background:var(--teal); }
.step h3{ font-size:19px; margin-bottom:5px; }
.step p{ font-size:15px; color:var(--muted); margin:0; }
.steps.line .step:not(:last-child)::after{ content:""; position:absolute; left:25px; top:54px; bottom:-22px; width:2px; background:var(--line); }

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq{ border:1px solid var(--line); border-radius:var(--r-md); background:#fff; margin-bottom:0; overflow:hidden;
  transition:box-shadow .25s, border-color .25s, transform .2s; position:relative; }
.faq::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--teal);
  transform:scaleY(0); transform-origin:top; transition:transform .3s ease; }
.faq.open{ box-shadow:var(--sh-md); border-color:transparent; }
.faq.open::before{ transform:scaleY(1); }
.faq-q{ display:flex; align-items:center; gap:15px; padding:20px 22px; cursor:pointer; font-family:var(--serif);
  font-weight:700; font-size:17.5px; color:var(--ink); transition:color .2s; }
.faq:hover .faq-q{ color:var(--teal-600); }
.faq.open .faq-q{ color:var(--navy); }
.faq-q .fq-no{ width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center;
  font-family:var(--serif); font-size:14px; font-weight:800; color:var(--teal-600); background:var(--tint-a); transition:background .25s, color .25s; }
.faq.open .faq-q .fq-no{ background:var(--teal); color:#fff; }
.faq-q .fq-ic{ margin-left:auto; width:30px; height:30px; flex:none; border-radius:50%; background:var(--bg);
  display:grid; place-items:center; color:var(--teal-600); transition:transform .25s, background .2s; }
.faq.open .faq-q .fq-ic{ transform:rotate(45deg); background:var(--teal); color:#fff; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a .faq-a-in{ padding:0 22px 22px 71px; font-size:15px; color:var(--muted); line-height:1.7; }

/* FAQ — modern two-column layout */
.faq-layout{ display:grid; grid-template-columns:.82fr 1.18fr; gap:50px; align-items:start; }
@media (max-width:900px){ .faq-layout{ grid-template-columns:1fr; gap:34px; } }
.faq-list{ display:flex; flex-direction:column; gap:14px; }
.faq-intro{ position:sticky; top:100px; background:linear-gradient(150deg,var(--navy-800),var(--navy-700)); color:#fff;
  border-radius:var(--r-xl); padding:40px 34px; overflow:hidden; }
.faq-intro::before{ content:""; position:absolute; right:-50px; top:-50px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--glow-rgb),.4), transparent 70%); pointer-events:none; }
.faq-intro > *{ position:relative; z-index:1; }
.faq-intro .fi-ic{ width:58px; height:58px; border-radius:16px; background:rgba(255,255,255,.1); display:grid; place-items:center;
  color:var(--gold-200); margin-bottom:22px; }
.faq-intro .fi-ic .ic{ width:30px; height:30px; }
.faq-intro .eyebrow{ color:var(--teal-200); }
.faq-intro h2{ color:#fff; font-size:clamp(25px,2.8vw,32px); margin-bottom:14px; line-height:1.3; }
.faq-intro p{ color:#a9bccd; font-size:15.5px; margin-bottom:26px; }
.faq-support{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); border-radius:var(--r-lg); padding:22px; }
.faq-support .fs-top{ display:flex; align-items:center; gap:13px; margin-bottom:16px; }
.faq-support .fs-av{ width:46px; height:46px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff;
  font-family:var(--serif); font-weight:700; font-size:18px; background:linear-gradient(150deg,var(--teal),var(--teal-600)); }
.faq-support .fs-top b{ display:block; color:#fff; font-size:15px; }
.faq-support .fs-top span{ font-size:13px; color:#9fb4c6; }
.faq-support .fs-btns{ display:flex; gap:10px; }
.faq-support .fs-btns .btn{ flex:1; padding:12px 14px; font-size:14.5px; }
@media (max-width:900px){ .faq-intro{ position:static; } }

/* ============================================================
   Article cards
   ============================================================ */
.post{ background:none; border:0; border-radius:0; overflow:visible; box-shadow:none;
  transition:transform .2s; display:flex; flex-direction:column; }
.post:hover{ transform:translateY(-5px); }
.post .post-img{ aspect-ratio:16/10; position:relative; overflow:hidden; border-radius:var(--r-lg); box-shadow:var(--sh-md); transition:box-shadow .25s ease; }
.post:hover .post-img{ box-shadow:var(--sh-lg); }
.post .post-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.post:hover .post-img img{ transform:scale(1.05); }
.post .post-cat{ position:absolute; left:14px; top:14px; background:rgba(11,28,44,.82); color:#fff;
  font-size:12px; font-weight:700; padding:5px 12px; border-radius:var(--r-full); z-index:2; }
.post .post-body{ padding:20px 4px 0; display:flex; flex-direction:column; flex:1; }
.post .post-meta{ font-size:13px; color:var(--muted); display:flex; gap:14px; margin-bottom:10px; }
.post h3{ font-size:19px; line-height:1.4; margin-bottom:10px; }
.post:hover h3{ color:var(--teal-600); }
.post p{ font-size:14.5px; color:var(--muted); margin:0 0 16px; }
.post .post-more{ margin-top:auto; font-weight:700; font-size:14px; color:var(--teal-600); display:inline-flex; gap:6px; align-items:center; }

/* gradient cover placeholders for article images */
.cover{ width:100%; height:100%; display:grid; place-items:center; color:rgba(255,255,255,.9); }
.cover .ic{ width:48px; height:48px; opacity:.85; }
.cv1{ background:linear-gradient(150deg,#235375,#13304a); }
.cv2{ background:linear-gradient(150deg,#2e7d96,#1c4f63); }
.cv3{ background:linear-gradient(150deg,#3a6f8c,#21465c); }
.cv4{ background:linear-gradient(150deg,#1b3a5c,#2e7d96); }
.cv5{ background:linear-gradient(150deg,#496f8a,#274a60); }
.cv6{ background:linear-gradient(150deg,#1f4e63,#0e2a3d); }

/* ============================================================
   Footer
   ============================================================ */
.footer{ background:var(--navy-900); color:#9db2c4; padding:64px 0 0; font-size:14.5px; }
.footer h4{ color:#fff; font-family:var(--sans); font-size:15px; font-weight:700; letter-spacing:.4px; margin-bottom:18px; text-transform:uppercase; }
.footer a{ color:#9db2c4; }
.footer a:hover{ color:#fff; }
.footer .f-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:40px; padding-bottom:48px; }
.footer .f-logo img{ height:48px; margin-bottom:18px; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer .f-contact li{ display:flex; gap:11px; align-items:flex-start; }
.footer .f-contact .ic{ width:17px; height:17px; color:var(--teal-400); flex:none; margin-top:4px; }
.footer .f-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:22px 0; display:flex; flex-wrap:wrap;
  gap:14px; justify-content:space-between; align-items:center; font-size:13px; color:#7f93a6; }
.footer .f-soc{ display:flex; gap:9px; }
.footer .f-soc a{ width:36px; height:36px; border-radius:9px; background:rgba(255,255,255,.07); display:grid; place-items:center; }
.footer .f-soc a:hover{ background:var(--teal); }
.footer .f-soc .ic{ width:18px; height:18px; color:#fff; }
.footer .f-license{ display:inline-flex; align-items:center; gap:9px; background:rgba(var(--gold-rgb),.12);
  border:1px solid rgba(var(--gold-rgb),.3); color:var(--gold-200); padding:8px 14px; border-radius:var(--r-sm); font-weight:600; font-size:13px; }
@media (max-width:880px){ .footer .f-grid{ grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:520px){ .footer .f-grid{ grid-template-columns:1fr; } }

/* ============================================================
   Floating contact buttons
   ============================================================ */
.fab{ position:fixed; right:20px; bottom:22px; z-index:80; display:flex; flex-direction:column; gap:12px; }
.fab a{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:#fff;
  box-shadow:var(--sh-lg); transition:transform .15s; position:relative; }
.fab a:hover{ transform:scale(1.07); }
.fab .fab-line{ background:#06c755; }
.fab .fab-call{ background:var(--teal); }
.fab .fab-top{ background:var(--navy); width:46px; height:46px; margin:2px auto 0; opacity:0; pointer-events:none; transition:opacity .25s, transform .15s; }
.fab .fab-top.show{ opacity:1; pointer-events:auto; }
.fab a .ic{ width:26px; height:26px; }
.fab a .fab-tip{ position:absolute; right:66px; top:50%; transform:translateY(-50%); background:var(--navy-900);
  color:#fff; font-size:13px; font-weight:600; padding:7px 13px; border-radius:8px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s; }
.fab a:hover .fab-tip{ opacity:1; }
@media (max-width:560px){ .fab a .fab-tip{ display:none; } }

/* ============================================================
   Page hero (inner pages)
   ============================================================ */
.phero{ background:
  radial-gradient(circle at 1px 1px, rgba(255,255,255,.045) 1px, transparent 0) 0 0/26px 26px,
  linear-gradient(120deg,var(--navy-900),var(--navy-700)); color:#fff; position:relative; overflow:hidden; }
.phero::before{ content:""; position:absolute; inset:0; background:
  radial-gradient(720px 420px at 86% -8%, rgba(var(--glow-rgb),.55), transparent 60%),
  radial-gradient(560px 360px at 6% 118%, rgba(var(--glow-rgb),.24), transparent 60%),
  radial-gradient(420px 300px at 70% 110%, rgba(var(--gold-rgb),.14), transparent 60%); }
.phero .wrap{ position:relative; padding:64px 24px 70px; }
.phero .crumb{ font-size:14px; color:#9fb4c6; margin-bottom:16px; display:flex; gap:8px; align-items:center; }
.phero .crumb a{ color:#cfe0ee; } .phero .crumb a:hover{ color:#fff; }
.phero h1{ color:#fff; font-size:clamp(32px,4.4vw,50px); margin-bottom:14px; }
.phero p{ color:#aabfd0; font-size:19px; max-width:60ch; margin:0; }
.phero .mark-wm{ position:absolute; right:-40px; top:50%; transform:translateY(-50%); width:340px; opacity:.07; }

/* watermark mark */
.wm{ position:absolute; opacity:.05; pointer-events:none; }

/* utility */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:40px}
.flex{display:flex}.aic{align-items:center}.jcsb{justify-content:space-between}.gap-s{gap:10px}.gap-m{gap:18px}.wrap-f{flex-wrap:wrap}
.lead-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

.reveal{ opacity:1; transform:none; }
.js-on .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.js-on .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js-on .reveal{ opacity:1; transform:none; } }

/* ============================================================
   CSS flags (simplified)
   ============================================================ */
.cflag{ width:30px; height:21px; border-radius:3px; overflow:hidden; flex:none; box-shadow:0 1px 3px rgba(0,0,0,.2);
  position:relative; background:#ccc; }
.cflag.th{ background:linear-gradient(#a51931 0 17%,#fff 17% 33%,#2d2a4a 33% 67%,#fff 67% 83%,#a51931 83%); }
.cflag.mm{ background:linear-gradient(#fecb00 0 33%,#34b233 33% 67%,#ea2839 67%); }
.cflag.mm::after{ content:"★"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:13px; line-height:1; }
.cflag.la{ background:linear-gradient(#ce1126 0 25%,#002868 25% 75%,#ce1126 75%); }
.cflag.la::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; background:#fff; }
.cflag.kh{ background:linear-gradient(#032ea1 0 25%,#e00025 25% 75%,#032ea1 75%); }
.cflag.kh::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:13px; height:8px; background:#fff; clip-path:polygon(50% 0,62% 38%,100% 38%,70% 62%,82% 100%,50% 75%,18% 100%,30% 62%,0 38%,38% 38%); }
.cflag.vn{ background:#da251d; }
.cflag.vn::after{ content:"★"; position:absolute; inset:0; display:grid; place-items:center; color:#ff0; font-size:14px; line-height:1; }

/* nationality card */
.nat{ display:flex; align-items:center; gap:14px; padding:18px 20px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--sh-sm); transition:transform .2s, box-shadow .2s; }
.nat:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); }
.nat .cflag{ width:44px; height:31px; }
.nat b{ font-family:var(--serif); font-size:18px; color:var(--ink); display:block; }
.nat span{ font-size:13px; color:var(--muted); }

/* ============================================================
   Tracking widget
   ============================================================ */
.track-card{ background:#fff; border-radius:var(--r-xl); box-shadow:var(--sh-lg); padding:34px; }
.track-bar{ display:flex; gap:12px; }
.track-bar input{ flex:1; font-family:var(--sans); font-size:16px; padding:15px 18px; border:1.6px solid var(--line);
  border-radius:var(--r-md); background:var(--bg); color:var(--ink); transition:border-color .2s, background .2s; }
.track-bar input:focus{ outline:none; border-color:var(--teal); background:#fff; }
.track-hint{ font-size:13.5px; color:var(--muted); margin-top:12px; }
.track-hint code{ background:var(--bg); padding:2px 8px; border-radius:5px; font-family:var(--mono,monospace); color:var(--teal-600); font-weight:600; }
#track-result{ max-height:0; overflow:hidden; opacity:0; transition:max-height .4s ease, opacity .3s ease, margin .3s; }
#track-result.show{ max-height:600px; opacity:1; margin-top:24px; }
.track-empty{ background:var(--amber-bg); color:#8a5a14; border-radius:var(--r-md); padding:16px 18px; font-size:14.5px; }
.track-empty .track-demo{ background:none; border:0; color:var(--teal-600); font-weight:700; cursor:pointer; text-decoration:underline; font-family:var(--sans); font-size:14.5px; }
.track-head{ display:flex; justify-content:space-between; align-items:center; padding-bottom:16px; border-bottom:1px solid var(--line); }
.track-name{ font-family:var(--serif); font-size:20px; font-weight:700; color:var(--ink); }
.track-sub{ font-size:13.5px; color:var(--muted); }
.track-live{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--green);
  background:var(--green-bg); padding:6px 12px; border-radius:var(--r-full); }
.track-live .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
.track-type{ font-size:14px; font-weight:700; color:var(--teal-600); margin:16px 0 18px; }
.track-steps{ display:grid; gap:2px; }
.track-step{ display:flex; align-items:center; gap:14px; padding:12px 0; position:relative; }
.track-step .ts-dot{ width:18px; height:18px; border-radius:50%; border:2px solid var(--line); background:#fff; flex:none; position:relative; z-index:2; }
.track-step:not(:last-child)::before{ content:""; position:absolute; left:8px; top:24px; bottom:-12px; width:2px; background:var(--line); }
.track-step.done .ts-dot{ background:var(--green); border-color:var(--green); }
.track-step.done:not(:last-child)::before{ background:var(--green); }
.track-step.cur .ts-dot{ border-color:var(--teal); box-shadow:0 0 0 4px rgba(var(--glow-rgb),.16); }
.track-step .ts-lbl{ font-size:15px; color:var(--muted); }
.track-step.done .ts-lbl,.track-step.cur .ts-lbl{ color:var(--ink); font-weight:600; }
.track-step .ts-tag{ margin-left:auto; font-size:12px; font-weight:700; color:var(--green); }
.track-step .ts-tag.cur{ color:var(--teal-600); background:var(--tint-a); padding:4px 10px; border-radius:var(--r-full); }

/* contact form */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:7px; }
.field input,.field select,.field textarea{ width:100%; font-family:var(--sans); font-size:16px; padding:13px 16px;
  border:1.6px solid var(--line); border-radius:var(--r-md); background:var(--bg); color:var(--ink); transition:border-color .2s, background .2s; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--teal); background:#fff; }
.field textarea{ min-height:120px; resize:vertical; }
.cf-ok{ display:none; background:var(--green-bg); color:#15683f; border:1px solid #cdebd9; border-radius:var(--r-md);
  padding:16px 18px; font-weight:600; margin-top:8px; }
.cf-ok.show{ display:block; }

/* info row */
.inforow{ display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--line); }
.inforow:last-child{ border-bottom:0; }
.inforow .ir-ic{ width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:var(--bg); color:var(--teal-600); }
.inforow .ir-ic .ic{ width:22px; height:22px; }
.inforow h4{ font-family:var(--sans); font-size:14px; color:var(--muted); font-weight:600; margin-bottom:3px; }
.inforow .ir-v{ font-size:17px; color:var(--ink); font-weight:600; }
.inforow .ir-v a{ color:var(--ink); }
.inforow .ir-v a:hover{ color:var(--teal-600); }

/* ============================================================
   HOME — hero
   ============================================================ */
.hero-grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:54px; align-items:center; padding-top:56px; }
.hero-copy h1{ font-size:clamp(34px,4.9vw,58px); line-height:1.14; margin:20px 0; font-weight:700; }
.hero-copy .pill{ margin-bottom:4px; }
.hero-trust{ display:flex; gap:26px; flex-wrap:wrap; margin-top:34px; padding-top:26px; border-top:1px solid rgba(255,255,255,.13); }
.hero-trust div{ display:inline-flex; align-items:center; gap:9px; color:#cfe0ee; font-weight:600; font-size:15px; }
.hero-trust .ic{ width:20px; height:20px; color:var(--teal-400); }

.hero-visual{ position:relative; height:480px; }
.hero-visual .hero-glow{ position:absolute; width:380px; height:380px; border-radius:50%; right:-26px; top:14px;
  background:radial-gradient(circle, rgba(var(--glow-rgb),.5), transparent 66%); z-index:0; pointer-events:none; }
.hero-photo{ box-shadow:var(--sh-navy), 0 0 0 1px rgba(255,255,255,.08); }
.hero-photo::after{ content:""; position:absolute; inset:0; border-radius:24px; background:linear-gradient(180deg, transparent 60%, rgba(11,28,44,.32)); }
.hero-float-stat{ position:absolute; left:-20px; top:26px; z-index:6; background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7); border-radius:16px; padding:13px 17px; box-shadow:var(--sh-lg); display:flex; align-items:center; gap:12px; }
.hero-float-stat .hfs-avatars{ display:flex; }
.hero-float-stat .hfs-avatars span{ width:30px; height:30px; border-radius:50%; border:2px solid #fff; margin-left:-9px;
  display:grid; place-items:center; color:#fff; font-size:12px; font-weight:700; font-family:var(--serif); }
.hero-float-stat .hfs-avatars span:first-child{ margin-left:0; }
.hero-float-stat b{ display:block; font-family:var(--serif); color:var(--ink); font-size:17px; line-height:1; }
.hero-float-stat small{ font-size:11.5px; color:var(--muted); }
.hero-live{ position:absolute; left:-26px; bottom:46px; z-index:6; background:#fff; border-radius:16px; padding:13px 17px;
  display:flex; align-items:center; gap:12px; box-shadow:var(--sh-lg); }
.hero-live .hl-ic{ width:40px; height:40px; border-radius:11px; background:var(--green-bg); color:var(--green); display:grid; place-items:center; flex:none; position:relative; }
.hero-live .hl-ic .ic{ width:21px; height:21px; }
.hero-live .hl-ic::after{ content:""; position:absolute; top:-2px; right:-2px; width:11px; height:11px; border-radius:50%; background:var(--green); border:2px solid #fff; animation:pulse 1.8s infinite; }
.hero-live b{ display:block; font-family:var(--serif); color:var(--ink); font-size:17px; line-height:1; }
.hero-live small{ font-size:11.5px; color:var(--muted); }
.hero-badge{ position:absolute; right:-12px; bottom:-14px; z-index:6; background:#fff; border-radius:16px; padding:14px 18px;
  display:flex; align-items:center; gap:13px; box-shadow:var(--sh-lg); }
.hero-badge .hb-seal{ width:44px; height:44px; border-radius:12px; background:linear-gradient(150deg,var(--gold),#a9883b);
  color:#fff; display:grid; place-items:center; }
.hero-badge .hb-seal .ic{ width:24px; height:24px; }
.hero-badge b{ display:block; font-family:var(--serif); color:var(--ink); font-size:16px; }
.hero-badge span{ font-size:12.5px; color:var(--muted); }

.hero-stats{ background:rgba(255,255,255,.05); border-top:1px solid rgba(255,255,255,.1); padding:34px 0; }
.hero-stats .stat .num{ color:#fff; }
.hero-stats .stat .num .u{ color:var(--teal-400); }
.hero-stats .stat .lbl{ color:#9fb4c6; }

@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; gap:30px; padding-top:30px; }
  .hero-visual{ height:400px; max-width:460px; margin:10px auto 0; width:100%; }
}
@media (max-width:520px){
  .hero-visual{ transform:scale(.9); height:360px; margin-top:-6px; }
  .hero-live{ left:-8px; } .hero-float-stat{ left:-6px; } .hero-badge{ right:-2px; }
}

/* ============================================================
   HOME — why us
   ============================================================ */
.why-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; }
.why-aside{ position:relative; }
.why-aside image-slot{ box-shadow:var(--sh-lg); }
.why-quote{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-md);
  padding:24px 26px; margin:-46px 18px 0; position:relative; z-index:2; }
.why-quote .wq-mark{ font-family:var(--serif); font-size:54px; line-height:.5; color:var(--teal-200); height:24px; }
.why-quote p{ font-size:15.5px; color:var(--ink); font-style:normal; margin:8px 0 16px; }
.why-quote .wq-by{ display:flex; align-items:center; gap:12px; }
.why-quote .wq-av{ width:42px; height:42px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center;
  font-family:var(--serif); font-weight:700; font-size:18px; flex:none; }
.why-quote .wq-by b{ font-size:14.5px; color:var(--ink); display:block; }
.why-quote .wq-by span{ font-size:13px; color:var(--muted); }
@media (max-width:920px){ .why-grid{ grid-template-columns:1fr; gap:30px; } }

/* ============================================================
   HOME — process
   ============================================================ */
.proc-card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg);
  padding:30px 26px; transition:transform .2s, background .2s; }
.proc-card:hover{ transform:translateY(-4px); background:rgba(255,255,255,.07); }
.proc-card .proc-n{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; font-family:var(--serif);
  font-weight:800; font-size:21px; color:var(--navy-900); background:var(--gold); margin-bottom:18px; }
.proc-card h3{ color:#fff; font-size:18.5px; margin-bottom:8px; }
.proc-card p{ color:#a9bccd; font-size:14.5px; margin:0; }

/* ============================================================
   HOME — tracking layout
   ============================================================ */
.track-wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:center; }
.track-feats{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.track-feats li{ display:flex; gap:12px; align-items:center; font-size:15.5px; color:var(--ink); font-weight:500; }
.track-feats .ic{ width:22px; height:22px; flex:none; color:#fff; background:var(--green); border-radius:50%; padding:4px; }
@media (max-width:920px){ .track-wrap{ grid-template-columns:1fr; gap:30px; } }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{ background:linear-gradient(120deg,var(--navy),var(--teal-600)); color:#fff; position:relative; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 85% 120%, rgba(255,255,255,.12), transparent 60%); }
.cta-inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap; padding:60px 0; }
.cta-inner h2{ color:#fff; font-size:clamp(26px,3.2vw,36px); margin-bottom:10px; }
.cta-inner p{ color:#d6e6f1; font-size:17px; margin:0; max-width:52ch; }
.cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }
@media (max-width:760px){ .cta-inner{ padding:46px 0; } }

/* ============================================================
   THAI decorative — ลายประจำยาม pattern + กนก ornament
   ============================================================ */
.thai-section{ position:relative; overflow:hidden; }
.thai-section::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%231b3a5c' stroke-width='1' stroke-opacity='0.05'%3E%3Cpath d='M32 18c4 0 7 3 7 7s-3 7-7 7-7-3-7-7 3-7 7-7zm0-18c2 5 2 13 0 18-2-5-2-13 0-18zm0 64c-2-5-2-13 0-18 2 5 2 13 0 18zm32-32c-5 2-13 2-18 0 5-2 13-2 18 0zm-64 0c5-2 13-2 18 0-5 2-13 2-18 0z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:64px 64px;
}
.thai-section > .wrap{ position:relative; z-index:1; }

/* กนก-style ornamental divider */
.ornament{ display:flex; align-items:center; justify-content:center; gap:12px; margin:16px 0 0; }
.ornament .o-line{ width:54px; height:1.5px; background:linear-gradient(90deg,transparent,var(--gold)); border-radius:2px; }
.ornament .o-line.r{ background:linear-gradient(90deg,var(--gold),transparent); }
.ornament svg{ width:34px; height:24px; color:var(--gold); flex:none; }
.ornament .o-diamond{ width:6px; height:6px; background:var(--gold); transform:rotate(45deg); opacity:.55; }

/* warmer, lifted service cards */
.thai-section .svc{ z-index:1; }
.thai-section .svc::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,var(--teal),var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.thai-section .svc:hover::before{ transform:scaleX(1); }
.thai-section .svc .svc-ic{ background:linear-gradient(150deg,var(--tint-a),var(--tint-b)); position:relative; }
.thai-section .svc:hover .svc-ic{ background:linear-gradient(150deg,var(--teal),var(--teal-600)); color:#fff; }
.thai-section .svc .svc-ic{ transition:background .3s ease, color .3s ease; }
.thai-section .svc .svc-corner{ position:absolute; right:0; bottom:0; width:46px; height:46px; opacity:.06; color:var(--navy); pointer-events:none; }

/* ============================================================
   INNER PAGES — shared blocks
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.split.a55{ grid-template-columns:1.1fr .9fr; }
@media (max-width:880px){ .split,.split.a55{ grid-template-columns:1fr; gap:34px; } }

.media-frame{ position:relative; }
.media-frame image-slot{ box-shadow:var(--sh-lg); display:block; width:100%; }
.media-frame .mf-tag{ position:absolute; left:-14px; bottom:-16px; background:#fff; border-radius:14px; padding:14px 18px;
  display:flex; align-items:center; gap:13px; box-shadow:var(--sh-lg); }
.media-frame .mf-tag .mf-ic{ width:44px; height:44px; border-radius:12px; background:var(--navy); color:#fff; display:grid; place-items:center; }
.media-frame .mf-tag b{ display:block; font-family:var(--serif); color:var(--ink); font-size:22px; line-height:1; }
.media-frame .mf-tag span{ font-size:12.5px; color:var(--muted); }

.check-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.check-list li{ display:flex; gap:13px; align-items:flex-start; font-size:16px; color:var(--body); }
.check-list .ic{ width:24px; height:24px; flex:none; color:#fff; background:var(--green); border-radius:50%; padding:4px; margin-top:1px; }
.check-list b{ color:var(--ink); }

/* value / pillar cards */
.value{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 28px; box-shadow:var(--sh-sm);
  transition:transform .2s, box-shadow .2s; height:100%; }
.value:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.value .v-ic{ width:58px; height:58px; border-radius:15px; display:grid; place-items:center; margin-bottom:20px;
  background:linear-gradient(150deg,var(--navy),var(--navy-700)); color:#fff; }
.value .v-ic.teal{ background:linear-gradient(150deg,var(--teal),var(--teal-600)); }
.value .v-ic.gold{ background:linear-gradient(150deg,var(--gold),#a9883b); }
.value .v-ic .ic{ width:28px; height:28px; }
.value h3{ font-size:21px; margin-bottom:10px; }
.value p{ font-size:15px; color:var(--muted); margin:0; }

/* license seal card */
.seal{ background:linear-gradient(150deg,var(--navy-800),var(--navy-700)); color:#fff; border-radius:var(--r-xl);
  padding:38px; position:relative; overflow:hidden; }
.seal::before{ content:""; position:absolute; right:-30px; top:-30px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--glow-rgb),.35), transparent 70%); }
.seal .seal-badge{ width:84px; height:84px; border-radius:50%; border:2px solid var(--gold); display:grid; place-items:center;
  color:var(--gold-200); margin-bottom:22px; position:relative; }
.seal .seal-badge .ic{ width:42px; height:42px; }
.seal h3{ color:#fff; font-size:24px; margin-bottom:10px; }
.seal p{ color:#a9bccd; font-size:15px; margin-bottom:20px; }
.seal .seal-no{ display:inline-flex; align-items:center; gap:10px; background:rgba(var(--gold-rgb),.14); border:1px solid rgba(var(--gold-rgb),.34);
  color:var(--gold-200); padding:10px 18px; border-radius:var(--r-md); font-weight:700; font-size:15px; }

/* timeline */
.timeline{ position:relative; padding-left:8px; }
.timeline::before{ content:""; position:absolute; left:23px; top:8px; bottom:8px; width:2px; background:var(--line); }
.tl-item{ position:relative; padding:0 0 36px 70px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item .tl-dot{ position:absolute; left:8px; top:0; width:34px; height:34px; border-radius:50%; background:var(--navy);
  color:#fff; display:grid; place-items:center; font-family:var(--serif); font-weight:700; font-size:14px; z-index:2; box-shadow:0 0 0 5px var(--bg); }
.tl-item .tl-year{ font-family:var(--serif); font-weight:800; color:var(--teal-600); font-size:20px; margin-bottom:4px; }
.tl-item h3{ font-size:18px; margin-bottom:5px; }
.tl-item p{ font-size:14.5px; color:var(--muted); margin:0; }

/* agency chips */
.agency{ display:flex; align-items:center; gap:14px; padding:18px 22px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--sh-sm); }
.agency .ag-ic{ width:46px; height:46px; border-radius:12px; background:var(--bg); color:var(--navy); display:grid; place-items:center; flex:none; }
.agency .ag-ic .ic{ width:24px; height:24px; }
.agency b{ font-size:15px; color:var(--ink); display:block; line-height:1.3; }
.agency span{ font-size:12.5px; color:var(--muted); }

/* page intro lead under hero */
.lead-band{ font-size:20px; color:var(--ink); font-family:var(--serif); line-height:1.6; }

/* service detail rows */
.svc-row{ display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; padding:28px 30px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); transition:box-shadow .2s, transform .2s; }
.svc-row:hover{ box-shadow:var(--sh-md); transform:translateY(-2px); }
.svc-row .sr-ic{ width:64px; height:64px; border-radius:16px; display:grid; place-items:center; flex:none;
  background:linear-gradient(150deg,var(--tint-a),var(--tint-b)); color:var(--teal-600); }
.svc-row .sr-ic .ic{ width:30px; height:30px; }
.svc-row h3{ font-size:21px; margin-bottom:6px; }
.svc-row p{ font-size:15px; color:var(--muted); margin:0; }
.svc-row .sr-tags{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.svc-row .sr-tag{ font-size:12.5px; font-weight:600; color:var(--teal-600); background:var(--tint-a); padding:4px 11px; border-radius:var(--r-full); }
.svc-row .sr-no{ font-family:var(--serif); font-size:30px; font-weight:800; color:var(--line-soft); }
@media (max-width:680px){ .svc-row{ grid-template-columns:auto 1fr; } .svc-row .sr-no{ display:none; } }

/* service photo cards — borderless / modern */
.svc-card{ display:flex; flex-direction:column; background:none; border:0; box-shadow:none; border-radius:0; }
.svc-card .sc-img{ position:relative; height:228px; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-md);
  transition:transform .28s ease, box-shadow .28s ease; }
.svc-card:hover .sc-img{ transform:translateY(-5px); box-shadow:var(--sh-lg); }
.svc-card .sc-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent 52%, rgba(11,28,44,.34)); }
.svc-card .sc-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; }
.svc-card:hover .sc-img img{ transform:scale(1.07); }
.svc-card .sc-no{ position:absolute; top:14px; left:14px; z-index:3; background:rgba(255,255,255,.92); backdrop-filter:blur(5px);
  color:var(--navy); font-family:var(--serif); font-weight:800; font-size:15px; min-width:38px; height:38px; padding:0 10px;
  border-radius:10px; display:grid; place-items:center; box-shadow:0 3px 10px rgba(11,28,44,.18); }
.svc-card .sc-ic{ position:absolute; left:14px; bottom:14px; top:auto; right:auto; z-index:3; width:46px; height:46px;
  border-radius:13px; background:rgba(255,255,255,.94); backdrop-filter:blur(6px); box-shadow:var(--sh-sm);
  display:grid; place-items:center; color:var(--teal-600); }
.svc-card .sc-ic .ic{ width:25px; height:25px; }
.svc-card .sc-body{ padding:20px 4px 0; flex:1; display:flex; flex-direction:column; }
.svc-card .sc-body h3{ font-size:20px; margin-bottom:9px; transition:color .2s ease; }
.svc-card:hover .sc-body h3{ color:var(--teal-600); }
.svc-card .sc-body p{ font-size:15px; color:var(--muted); margin:0 0 16px; flex:1; }
.svc-card .sr-tags{ margin-top:0; }

/* contact split */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; gap:36px; } }
.map-embed{ width:100%; height:520px; border:0; border-radius:var(--r-xl); box-shadow:var(--sh-md); }
.map-full{ margin-top:50px; }
.map-full .map-head{ display:flex; align-items:center; gap:11px; margin-bottom:18px; }
.map-full .map-head .mh-ic{ width:44px; height:44px; border-radius:12px; background:var(--navy); color:#fff; display:grid; place-items:center; flex:none; }
.map-full .map-head .mh-ic .ic{ width:22px; height:22px; }
.map-full .map-head b{ font-family:var(--serif); font-size:19px; color:var(--ink); display:block; line-height:1.3; }
.map-full .map-head span{ font-size:14px; color:var(--muted); }
.contact-cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; }
@media (max-width:520px){ .contact-cards{ grid-template-columns:1fr; } }
.cc{ background:none; border:0; border-radius:0; padding:0; box-shadow:none; }
.cc .cc-ic{ width:44px; height:44px; border-radius:12px; background:var(--bg); color:var(--teal-600); display:grid; place-items:center; margin-bottom:14px; }
.cc .cc-ic .ic{ width:23px; height:23px; }
.cc h4{ font-family:var(--sans); font-size:13.5px; color:var(--muted); font-weight:600; margin-bottom:5px; text-transform:uppercase; letter-spacing:.4px; }
.cc .cc-v{ font-size:16px; color:var(--ink); font-weight:600; line-height:1.5; }
.cc .cc-v a{ color:var(--ink); } .cc .cc-v a:hover{ color:var(--teal-600); }

/* article page filters */
.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.filters .fbtn{ font-family:var(--sans); font-weight:600; font-size:14.5px; padding:9px 18px; border-radius:var(--r-full);
  border:1px solid var(--line); background:#fff; color:var(--body); cursor:pointer; transition:all .15s; }
.filters .fbtn:hover{ border-color:var(--teal); color:var(--teal-600); }
.filters .fbtn.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.post-feature{ display:grid; grid-template-columns:1.1fr .9fr; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-md); margin-bottom:44px; }
.post-feature .pf-img{ position:relative; min-height:320px; }
.post-feature .pf-body{ padding:44px; display:flex; flex-direction:column; justify-content:center; }
.post-feature .pf-body h2{ font-size:clamp(24px,2.6vw,32px); line-height:1.32; margin:14px 0 14px; }
.post-feature .pf-body p{ color:var(--muted); font-size:16px; margin-bottom:22px; }
@media (max-width:780px){ .post-feature{ grid-template-columns:1fr; } .post-feature .pf-img{ min-height:220px; } .post-feature .pf-body{ padding:30px; } }

/* ============================================================
   PHOTOS — hero photo, gallery, bands, testimonials
   ============================================================ */
.hero-photo{ position:absolute; inset:0; width:100%; height:100%; border-radius:24px; overflow:hidden;
  box-shadow:var(--sh-navy); background:var(--navy-700); }
.hero-photo image-slot, .hero-photo img{ width:100%; height:100%; display:block; object-fit:cover; }
.ph-img{ width:100%; height:100%; display:block; object-fit:cover; }
.hero-float-stat{ position:absolute; left:-18px; top:34px; z-index:6; background:#fff; border-radius:14px;
  padding:13px 16px; box-shadow:var(--sh-lg); display:flex; align-items:center; gap:12px; }
.hero-float-stat .hfs-avatars{ display:flex; }
.hero-float-stat .hfs-avatars span{ width:30px; height:30px; border-radius:50%; border:2px solid #fff; margin-left:-9px;
  display:grid; place-items:center; color:#fff; font-size:12px; font-weight:700; font-family:var(--serif); }
.hero-float-stat .hfs-avatars span:first-child{ margin-left:0; }
.hero-float-stat b{ display:block; font-family:var(--serif); color:var(--ink); font-size:17px; line-height:1; }
.hero-float-stat small{ font-size:11.5px; color:var(--muted); }
.hero-visual .hero-card-1{ left:-14px; right:auto; bottom:-16px; top:auto; transform:rotate(-5deg); }

/* photo gallery */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:16px; }
.gallery .gitem{ border-radius:var(--r-lg); overflow:hidden; position:relative; box-shadow:var(--sh-sm); }
.gallery .gitem image-slot, .gallery .gitem img{ width:100%; height:100%; display:block; object-fit:cover; }
.gallery .gitem.tall{ grid-row:span 2; }
.gallery .gitem.wide{ grid-column:span 2; }
.gallery .gcap{ position:absolute; left:0; right:0; bottom:0; padding:18px 16px 14px; z-index:2;
  background:linear-gradient(transparent, rgba(11,28,44,.78)); color:#fff; font-weight:600; font-size:14.5px;
  display:flex; align-items:center; gap:8px; pointer-events:none; }
.gallery .gcap .ic{ width:17px; height:17px; color:var(--teal-200); }
@media (max-width:880px){ .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; } .gallery .gitem.tall{ grid-row:span 1; } }
@media (max-width:520px){ .gallery{ grid-auto-rows:140px; } }

/* photo split frame */
.photo-frame{ border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-lg); position:relative; }
.photo-frame image-slot, .photo-frame img{ width:100%; height:100%; display:block; min-height:380px; object-fit:cover; }

/* testimonials */
.tcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 28px; box-shadow:var(--sh-sm); height:100%; display:flex; flex-direction:column; }
.tcard .t-stars{ display:flex; gap:3px; color:var(--gold); margin-bottom:14px; }
.tcard .t-stars .ic{ width:18px; height:18px; }
.tcard .t-quote{ font-size:15.5px; color:var(--ink); line-height:1.7; flex:1; margin:0 0 20px; }
.tcard .t-by{ display:flex; align-items:center; gap:13px; }
.tcard .t-av{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:#fff;
  font-family:var(--serif); font-weight:700; font-size:19px; flex:none; }
.tcard .t-by b{ display:block; font-size:15px; color:var(--ink); }
.tcard .t-by span{ font-size:13px; color:var(--muted); }

/* photo stat band */
.statband{ position:relative; overflow:hidden; color:#fff; }
.statband .sb-bg{ position:absolute; inset:0; }
.statband .sb-bg image-slot{ width:100%; height:100%; display:block; }
.statband .sb-overlay{ position:absolute; inset:0; background:linear-gradient(120deg, rgba(11,28,44,.92), rgba(27,58,92,.82)); }
.statband .wrap{ position:relative; padding:70px 24px; }

/* ============================================================
   Expiry-alert + notification — Dream Force branded
   ============================================================ */
.notify-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:54px; align-items:center; }
@media (max-width:920px){ .notify-grid{ grid-template-columns:1fr; gap:48px; } }

/* expiry alert cards */
.alerts{ display:flex; flex-direction:column; gap:16px; }
.alert{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm);
  padding:20px 22px 20px 24px; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s; }
.alert:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--teal-200); }
.alert::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; }
.alert.a-navy::before{ background:var(--navy); }
.alert.a-teal::before{ background:var(--teal); }
.alert.a-gold::before{ background:var(--gold); }
.alert-top{ display:flex; align-items:center; gap:13px; margin-bottom:13px; }
.alert .a-ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none; }
.alert.a-navy .a-ic{ background:var(--navy); color:#fff; }
.alert.a-teal .a-ic{ background:var(--tint-a); color:var(--teal-600); }
.alert.a-gold .a-ic{ background:linear-gradient(150deg,var(--gold),#a9883b); color:#fff; }
.alert .a-ic .ic{ width:23px; height:23px; }
.alert h3{ font-size:20px; font-family:var(--serif); margin:0; }
.alert .a-round{ margin-left:auto; font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:var(--r-full); white-space:nowrap; }
.a-round.r-ok{ background:var(--green-bg); color:#15823f; }
.a-round.r-warn{ background:var(--amber-bg); color:#9a6312; }
.a-round.r-due{ background:#fbe6d6; color:#b5541a; }
.alert .a-desc{ font-size:14px; color:var(--muted); margin:0 0 13px; }
.alert .a-desc b{ color:var(--ink); }
.alert .a-track{ height:8px; border-radius:var(--r-full); background:var(--line-soft); overflow:hidden; margin-bottom:13px; }
.alert .a-track i{ display:block; height:100%; border-radius:var(--r-full); }
.alert .a-track .f-ok{ background:linear-gradient(90deg,#27b56c,#1f9d61); }
.alert .a-track .f-warn{ background:linear-gradient(90deg,#f3b13c,#e0901c); }
.alert .a-track .f-due{ background:linear-gradient(90deg,#f08a4b,#e06a1e); }
.alert .a-foot{ display:flex; justify-content:space-between; align-items:center; font-size:13.5px; }
.alert .a-foot .a-left{ color:var(--ink); font-weight:700; }
.alert .a-foot .a-left b{ color:var(--teal-600); }
.alert .a-foot .a-exp{ color:var(--muted); }
.alert .a-foot .a-exp b{ color:var(--ink); }

/* notify channel chips */
.notify-feats{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; list-style:none; padding:0; }
.notify-feats li{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--body);
  background:#fff; border:1px solid var(--line); padding:9px 15px; border-radius:var(--r-full); box-shadow:var(--sh-sm); }
.notify-feats .ic{ width:18px; height:18px; color:var(--teal-600); }
.notify-feats .nf-line .ic{ color:#06c755; }

/* branded notification phone */
.df-phone-wrap{ display:flex; justify-content:center; position:relative; }
.df-phone-wrap::before{ content:""; position:absolute; width:360px; height:360px; border-radius:50%; right:-10px; top:-16px;
  background:radial-gradient(circle, rgba(var(--glow-rgb),.16), transparent 68%); }
.df-bell{ position:absolute; top:-8px; right:30px; z-index:6; width:62px; height:62px; border-radius:50%;
  background:linear-gradient(150deg,var(--gold),#a9883b); color:#fff; display:grid; place-items:center; box-shadow:0 14px 30px rgba(var(--gold-rgb),.42); }
.df-bell .ic{ width:30px; height:30px; }
.df-bell::after{ content:"3"; position:absolute; top:-3px; right:-3px; width:23px; height:23px; border-radius:50%; background:var(--red);
  color:#fff; font-size:12.5px; font-weight:700; display:grid; place-items:center; border:2px solid #fff; font-family:var(--sans); }
.phone{ position:relative; z-index:1; width:300px; height:600px; background:#0c0c0c; border-radius:42px; padding:11px;
  box-shadow:0 30px 70px rgba(11,28,44,.35); }
.phone-screen{ width:100%; height:100%; border-radius:32px; overflow:hidden; background:var(--bg); position:relative; display:flex; flex-direction:column; }
.phone-notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:26px; background:#0c0c0c; border-radius:0 0 16px 16px; z-index:5; }
.df-status{ background:var(--navy-800); color:#fff; display:flex; justify-content:space-between; align-items:center; padding:12px 20px 7px; font-size:13px; font-weight:600; }
.df-status .ph-r{ display:flex; gap:5px; align-items:center; opacity:.9; }
.df-head{ background:linear-gradient(120deg,var(--navy-800),var(--navy-700)); color:#fff; padding:8px 16px 16px; display:flex; align-items:center; gap:11px; position:relative; }
.df-head::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg,var(--teal),var(--gold)); }
.df-head .dh-av{ width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.12); display:grid; place-items:center; flex:none; padding:7px; }
.df-head .dh-av img{ width:100%; height:100%; object-fit:contain; }
.df-head .dh-name{ font-family:var(--serif); font-size:15px; font-weight:700; line-height:1.15; }
.df-head .dh-sub{ font-size:11px; color:var(--teal-200); display:flex; align-items:center; gap:5px; }
.df-head .dh-sub::before{ content:""; width:6px; height:6px; border-radius:50%; background:#46d39a; }
.df-head .dh-bell{ margin-left:auto; opacity:.9; }
.df-head .dh-bell .ic{ width:20px; height:20px; }
.df-feed{ flex:1; padding:14px 13px; overflow:hidden; display:flex; flex-direction:column; gap:11px; }
.df-feed .feed-day{ align-self:center; background:var(--bg-2); color:var(--muted); font-size:11px; font-weight:700; padding:4px 14px; border-radius:var(--r-full); }
.df-note{ background:#fff; border-radius:14px; padding:13px; box-shadow:var(--sh-sm); position:relative; border-left:4px solid var(--navy); }
.df-note.n-teal{ border-left-color:var(--teal); }
.df-note.n-gold{ border-left-color:var(--gold); }
.df-note .nt-h{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.df-note .nt-ic{ width:24px; height:24px; border-radius:7px; display:grid; place-items:center; flex:none; }
.df-note.n-navy .nt-ic{ background:var(--navy); color:#fff; }
.df-note.n-teal .nt-ic{ background:var(--tint-a); color:var(--teal-600); }
.df-note.n-gold .nt-ic{ background:linear-gradient(150deg,var(--gold),#a9883b); color:#fff; }
.df-note .nt-ic .ic{ width:14px; height:14px; }
.df-note .nt-title{ font-size:12.5px; font-weight:700; color:var(--ink); }
.df-note .nt-round{ margin-left:auto; font-size:10px; font-weight:700; color:var(--muted); }
.df-note p{ font-size:13px; color:var(--body); margin:0; line-height:1.5; }
.df-note p b{ color:var(--teal-600); }
.df-note .nt-date{ display:inline-flex; align-items:center; gap:6px; margin-top:9px; background:var(--bg); border-radius:8px; padding:5px 10px; font-size:11.5px; font-weight:600; color:var(--ink); }
.df-note .nt-date.warn{ background:var(--amber-bg); color:#9a6312; }
.df-note .nt-date .ic{ width:13px; height:13px; }
.df-channel{ margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px; background:#fff; border-radius:12px; box-shadow:var(--sh-sm); font-size:12px; font-weight:600; color:var(--muted); }
.df-channel b{ color:#06c755; }
.df-channel .ic{ width:16px; height:16px; color:#06c755; }

/* phone — timeline job-tracking view */
.df-case{ background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:11px 13px; box-shadow:var(--sh-sm); }
.df-case .dc-top{ display:flex; align-items:center; gap:9px; }
.df-case .dc-ic{ width:26px; height:26px; border-radius:8px; background:var(--navy); color:#fff; display:grid; place-items:center; flex:none; }
.df-case .dc-ic .ic{ width:15px; height:15px; }
.df-case .dc-name{ font-size:12.5px; font-weight:700; color:var(--ink); }
.df-case .dc-live{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:9.5px; font-weight:700; color:var(--green); background:var(--green-bg); padding:3px 9px; border-radius:var(--r-full); }
.df-case .dc-live .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 1.6s infinite; }
.df-case .dc-sub{ font-size:10.5px; color:var(--muted); margin-top:5px; }
.df-tl{ padding:10px 4px 0 6px; }
.df-tl-item{ display:grid; grid-template-columns:22px 1fr; gap:11px; position:relative; padding-bottom:15px; }
.df-tl-item:last-child{ padding-bottom:0; }
.df-tl-item:not(:last-child)::before{ content:""; position:absolute; left:10px; top:21px; bottom:-2px; width:2px; background:var(--line); }
.df-tl-item .tl-dot{ width:21px; height:21px; border-radius:50%; border:2px solid var(--line); background:var(--surface); display:grid; place-items:center; z-index:2; }
.df-tl-item .tl-dot .ic{ width:11px; height:11px; color:#fff; }
.df-tl-item.done .tl-dot{ background:var(--teal); border-color:var(--teal); }
.df-tl-item.done:not(:last-child)::before{ background:var(--teal); }
.df-tl-item.cur .tl-dot{ border-color:var(--teal); box-shadow:0 0 0 4px rgba(var(--glow-rgb),.18); }
.df-tl-item.cur .tl-dot::after{ content:""; width:9px; height:9px; border-radius:50%; background:var(--teal); }
.df-tl-c{ padding-top:1px; }
.df-tl-c .tl-t{ font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.df-tl-item.todo .tl-t{ color:var(--muted); font-weight:500; }
.df-tl-c .tl-s{ font-size:10px; margin-top:2px; font-weight:600; }
.df-tl-item.done .tl-s{ color:var(--teal-600); }
.df-tl-item.cur .tl-s{ color:var(--gold); }
.df-tl-item.todo .tl-s{ color:var(--muted); font-weight:500; }

/* ============================================================
   THEME PALETTES — alternates (not logo-based)
   ============================================================ */
/* Theme B — Emerald & Bronze (มรกต · ทองสำริด) */
[data-theme="emerald"]{
  --navy:#15463a; --navy-700:#0f3a30; --navy-800:#0b2e26; --navy-900:#07211b;
  --teal:#1f9d6e; --teal-600:#157a55; --teal-400:#45b88a; --teal-200:#b4e3d0;
  --gold:#c08a3e; --gold-200:#ecd6ad;
  --glow-rgb:31,157,110; --gold-rgb:192,138,62;
  --tint-a:#e7f5ee; --tint-b:#d3ece0;
}
/* Theme C — Indigo & Amber (คราม · อำพัน) */
[data-theme="indigo"]{
  --navy:#232a63; --navy-700:#1b2150; --navy-800:#161b41; --navy-900:#0f1330;
  --teal:#4f5bd5; --teal-600:#3b46b8; --teal-400:#7b85e0; --teal-200:#c5cbf2;
  --gold:#e0992f; --gold-200:#f3d9a6;
  --glow-rgb:79,91,213; --gold-rgb:224,153,47;
  --tint-a:#ecedfb; --tint-b:#dde0f6;
}
/* Theme D — Warm Editorial (ดินเผา · เขียวป่า · ครีม) */
[data-theme="warm"]{
  --navy:#2c4a40; --navy-700:#1f3a31; --navy-800:#172e27; --navy-900:#0f211c;
  --teal:#ef6b35; --teal-600:#d4521f; --teal-400:#fb8c5d; --teal-200:#fbd5c2;
  --gold:#f2a83c; --gold-200:#fbe3b4;
  --glow-rgb:239,107,53; --gold-rgb:242,168,60;
  --tint-a:#fdeee2; --tint-b:#fbe0cd;
  --ink:#2a211b; --body:#5c4f45; --muted:#8a7a6c;
  --line:#f0e2d5; --line-soft:#f7ede2; --bg:#fdf6ee; --bg-2:#fbeee1;
}
/* Theme E — Staffing Agency (เขียวมะนาว · ชาร์โคล) */
[data-theme="agency"]{
  --navy:#10271a; --navy-700:#0b1e13; --navy-800:#08160e; --navy-900:#040d08;
  --teal:#86e01a; --teal-600:#368f00; --teal-400:#a8ed4a; --teal-200:#d2f5a4;
  --gold:#10b34f; --gold-200:#a8f0c4;
  --glow-rgb:134,224,26; --gold-rgb:16,179,79;
  --tint-a:#e7fbcb; --tint-b:#d3f7a8;
  --ink:#0a1f12; --body:#3c5444; --muted:#6c8474;
  --line:#deeed2; --line-soft:#ecf7df; --bg:#f3fbe6; --bg-2:#e8f7d2;
}
/* Theme F — Corporate Blue (น้ำเงินสด · ทอง) — Design 5 */
[data-theme="corp"]{
  --navy:#0f1b3d; --navy-700:#0c1631; --navy-800:#0a1228; --navy-900:#070d1c;
  --teal:#2563eb; --teal-600:#1d4ed8; --teal-400:#60a5fa; --teal-200:#c7dafe;
  --gold:#f5a623; --gold-200:#fce3b0;
  --glow-rgb:37,99,235; --gold-rgb:245,166,35;
  --tint-a:#eaf1fe; --tint-b:#dbe7fd;
  --ink:#0f1b3d; --body:#46506b; --muted:#79839c;
  --line:#e6eaf2; --line-soft:#f0f3f9; --bg:#f5f7fc; --bg-2:#edf1f9;
}
/* Theme G — Regal Law Firm (ถ่าน · ทอง · serif) — Design 6 */
[data-theme="regal"]{
  --navy:#1c1b18; --navy-700:#161513; --navy-800:#11100e; --navy-900:#0a0a09;
  --teal:#b8924f; --teal-600:#9a7838; --teal-400:#cdab6a; --teal-200:#ece0c8;
  --gold:#b8924f; --gold-200:#ece0c8;
  --glow-rgb:184,146,79; --gold-rgb:184,146,79;
  --tint-a:#f3eee4; --tint-b:#ebe3d3;
  --ink:#1f1d18; --body:#5a554c; --muted:#8a8478;
  --line:#e7e1d4; --line-soft:#f1ece1; --bg:#f7f3ea; --bg-2:#f0ebde;
}

/* ============================================================
   THEME SWITCHER — floating control (fixed colors, not themed)
   ============================================================ */
.theme-switch{ position:fixed; left:20px; bottom:22px; z-index:85; font-family:var(--sans); }
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after{ transition:none !important; }
.theme-switch .ts-toggle{ width:56px; height:56px; border-radius:50%; border:0; cursor:pointer; background:#fff;
  box-shadow:var(--sh-lg); display:grid; place-items:center; color:var(--navy); transition:transform .15s; position:relative; }
.theme-switch .ts-toggle:hover{ transform:scale(1.07); }
.theme-switch .ts-toggle .ic{ width:25px; height:25px; }
.theme-switch .ts-toggle .ts-dot3{ position:absolute; right:-2px; top:-2px; display:flex; }
.theme-switch .ts-toggle .ts-dot3 i{ width:10px; height:10px; border-radius:50%; border:1.5px solid #fff; margin-left:-4px; }
.theme-switch .ts-panel{ position:absolute; left:0; bottom:68px; width:262px; background:#fff; border-radius:18px;
  box-shadow:var(--sh-lg); padding:16px; opacity:0; transform:translateY(10px) scale(.96); transform-origin:bottom left;
  pointer-events:none; transition:opacity .22s ease, transform .22s cubic-bezier(.16,1,.3,1); }
.theme-switch.open .ts-panel{ opacity:1; transform:none; pointer-events:auto; }
.theme-switch .ts-head{ font-family:var(--serif); font-weight:700; font-size:15px; color:var(--ink); margin-bottom:3px; }
.theme-switch .ts-sub{ font-size:12px; color:var(--muted); margin-bottom:14px; }
.theme-opt{ display:flex; align-items:center; gap:12px; width:100%; padding:10px; border-radius:12px; border:1.5px solid var(--line);
  background:#fff; cursor:pointer; margin-bottom:9px; transition:border-color .15s, background .15s; text-align:left; font-family:var(--sans); }
.theme-opt:last-child{ margin-bottom:0; }
.theme-opt:hover{ background:var(--bg); }
.theme-opt.active{ border-color:var(--navy); background:var(--bg); }
.theme-opt .to-sw{ display:flex; flex:none; }
.theme-opt .to-sw i{ width:22px; height:22px; border-radius:50%; border:2px solid #fff; margin-left:-8px; box-shadow:0 1px 3px rgba(0,0,0,.18); }
.theme-opt .to-sw i:first-child{ margin-left:0; }
.theme-opt .to-txt b{ display:block; font-size:14px; color:var(--ink); font-weight:600; }
.theme-opt .to-txt span{ font-size:11.5px; color:var(--muted); }
.theme-opt .to-check{ margin-left:auto; width:22px; height:22px; border-radius:50%; background:var(--navy); color:#fff;
  display:none; place-items:center; flex:none; }
.theme-opt.active .to-check{ display:grid; }
.theme-opt .to-check .ic{ width:14px; height:14px; }
@media (max-width:560px){ .theme-switch{ left:14px; bottom:84px; } }