/* ==========================================================================
   CheckDi Marketplace Design System — 2026-05-04
   Shared cd-* classes for marketplace landing pages and footer.
   Loaded via combres bundle "mpfrontendnewcss" → cached once across pages.
   Pages using this stylesheet: /th/main, /th/car/main, /th/motorbike/main,
   plus the global footer (uc/masterpage/footer.ascx).
   ========================================================================== */

:root {
  --cd-orange: #FF7A00;
  /* Text-orange token. Set to brand #FF7A00 per design preference 2026-06-24 (looks-first).
     HEADS UP: #FF7A00 on white = 2.61:1 → FAILS WCAG AA contrast. AA-passing alternatives if
     accessibility is revisited: #B45309 (~5.9:1) or #C2410C (~4.6:1) — swap this one value.
     --cd-orange itself = fills/borders/icons (non-text). */
  --cd-orange-text: #FF7A00;
  --cd-amber: #FFB000;
  --cd-deep: #F7881F;
  --cd-mid: #F99F38;
  --cd-gold: #FFD54C;
  --cd-yellow: #FBBD23;
  --cd-ink: #1a1d23;
  --cd-text: #2c2c2c;
  --cd-text-2: #5a5a5a;
  --cd-muted: #8a8a8a;
  --cd-line: #ececec;
  --cd-soft: #fff7ec;
  --cd-bg: #fafafa;
  --cd-blue: #1A518C;
  --cd-green: #16a34a;
  --cd-shadow-sm: 0 2px 8px rgba(20, 20, 20, .06);
  --cd-shadow-md: 0 8px 24px rgba(20, 20, 20, .08);
  --cd-shadow-lg: 0 16px 48px rgba(255, 122, 0, .12);
}

/* ===== BASE ===== */
.cd-section { padding: 4rem 0; }
.cd-section-tight { padding: 2.5rem 0; }

/* Kanit for Thai pages only — English uses Fomantic default (Lato/system) */
:lang(th) .cd-hero,
:lang(th) .cd-trust,
:lang(th) .cd-products,
:lang(th) .cd-helper,
:lang(th) .cd-section,
:lang(th) .cd-section-tight,
:lang(th) .cd-partners,
:lang(th) .cd-app-grid,
:lang(th) .cd-promos-grid,
:lang(th) .cd-why-grid,
:lang(th) .cd-content-block,
:lang(th) .cd-en-seo,
:lang(th) .cd-breadcrumb,
:lang(th) .cd-foot { font-family: 'Kanit', 'Sarabun', sans-serif; }

.cd-h-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .8px;
  color: var(--cd-orange-text);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.cd-h1 {
  font-family: inherit;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.15;
  font-weight: 600;
  color: var(--cd-ink);
  margin: 0 0 16px 0;
}
.cd-h1 .accent { color: var(--cd-orange-text); }
.cd-h2 {
  font-family: inherit;
  font-size: clamp(22px, 3.5vw, 34px);
  line-height: 1.2;
  font-weight: 600;
  color: var(--cd-ink);
  margin: 0 0 12px 0;
}
.cd-h2 .accent { color: var(--cd-orange-text); }
.cd-h2-sub {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.5;
  font-weight: 400;
  color: var(--cd-text-2);
  margin: 0 0 24px 0;
}
.cd-lede {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
  color: var(--cd-text-2);
  margin: 0 0 24px 0;
}
.cd-section-title { text-align: center; margin-bottom: 8px; }
.cd-section-title.left { text-align: left; }
.cd-section-title h2 {
  font-family: inherit;
  font-size: clamp(22px, 3.5vw, 34px);
  line-height: 1.2;
  font-weight: 600;
  color: var(--cd-ink);
  margin: 0 0 12px 0;
}
.cd-section-title h2 .accent { color: var(--cd-orange-text); }

/* ===== HERO ===== */
.cd-hero {
  position: relative;
  background:
    radial-gradient(ellipse at 85% 20%, rgba(255, 213, 76, .25) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 90%, rgba(255, 122, 0, .08) 0%, transparent 50%),
    #fff;
  overflow: hidden;
  padding: 3.5rem 0 4rem;
}
.cd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 122, 0, .08) 1px, transparent 0);
  background-size: 32px 32px;
  opacity: .35;
  pointer-events: none;
}
.cd-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.cd-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--cd-line);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cd-text);
  box-shadow: var(--cd-shadow-sm);
  margin-bottom: 18px;
}
.cd-hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cd-green); animation: cd-pulse 2s infinite; }
@keyframes cd-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.cd-hero-quick {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cd-hero-quick-label {
  width: 100%;
  font-size: 13px;
  color: var(--cd-text-2);
  margin-bottom: 4px;
}
.cd-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid var(--cd-line);
  color: var(--cd-ink);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all .18s ease;
}
.cd-quick-chip:hover {
  border-color: var(--cd-orange-text);
  color: var(--cd-orange-text);
  transform: translateY(-1px);
  box-shadow: var(--cd-shadow-sm);
}
.cd-quick-chip svg { width: 16px; height: 16px; }

.cd-hero-cta {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Hero lead paragraph + bullet checklist (SEO content above the fold) */
.cd-hero-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--cd-text-2);
  margin: 16px 0 18px 0;
  max-width: 560px;
}
.cd-hero-checklist {
  list-style: none;
  margin: 0 0 8px 0;
  padding: 0;
}
.cd-hero-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--cd-text);
}
.cd-hero-checklist li::before {
  content: "";
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background-color: var(--cd-green);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='white' d='M7 14.17 2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.41L7 14.17z'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 13px 13px;
  margin-top: 1px;
}

/* ===== BUTTONS ===== */
.cd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 12px;
  text-decoration: none;
  transition: all .18s ease;
  border: none;
  cursor: pointer;
}
.cd-btn-primary {
  /* Brand orange + white per design preference 2026-06-24 (reverted the a11y yellow/dark-text
     trial). NB: white-on-#FF7A00 = 2.61:1, fails WCAG AA — accepted, looks-first. */
  background: var(--cd-orange);
  color: #fff;
  box-shadow: 0 6px 18px rgba(255, 122, 0, .35);
}
.cd-btn-primary:hover { background: #e96e00; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255, 122, 0, .45); color: #fff; }
.cd-btn-ghost {
  background: #fff;
  color: var(--cd-ink);
  border: 1.5px solid var(--cd-line);
}
.cd-btn-ghost:hover { border-color: var(--cd-ink); color: var(--cd-ink); }

/* ===== MASCOT STAGE (hero right column) ===== */
.cd-mascot-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
}
.cd-mascot-stage .mascot-main {
  position: relative;
  z-index: 2;
  max-width: 480px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(255, 122, 0, .15));
}
.cd-mascot-stage .blob {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, var(--cd-soft) 0%, transparent 65%);
  border-radius: 50%;
  z-index: 1;
}
.cd-floating-card {
  position: absolute;
  background: #fff;
  border: 1px solid var(--cd-line);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: var(--cd-shadow-md);
  z-index: 3;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cd-floating-card .ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.cd-floating-card .ic svg { width: 18px; height: 18px; fill: #fff; }
.cd-floating-card .lab { font-size: 11px; color: var(--cd-muted); line-height: 1; margin-bottom: 3px; }
.cd-floating-card .val { font-weight: 600; color: var(--cd-ink); line-height: 1.2; }
.cd-fc-1 { top: 8%; left: -2%; animation: cd-float 4s ease-in-out infinite; }
.cd-fc-2 { bottom: 18%; right: -2%; animation: cd-float 4.5s ease-in-out infinite .8s; }
.cd-fc-3 { top: 45%; left: -6%; animation: cd-float 4.2s ease-in-out infinite .4s; }
@keyframes cd-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (max-width: 900px) {
  .cd-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .cd-hero { padding: 2rem 0 2.5rem; }
  .cd-hero-cta .cd-btn-primary { width: 100%; }
  .cd-mascot-stage { min-height: 320px; }
  .cd-mascot-stage .mascot-main { max-width: 280px; }
  .cd-mascot-stage .blob { width: 260px; height: 260px; }
  .cd-fc-1 { top: 4%; left: 2%; }
  .cd-fc-2 { bottom: 8%; right: 2%; }
  .cd-fc-3 { display: none; }
}

/* ===== TRUST BAR ===== */
.cd-trust {
  background: #fff;
  border-top: 1px solid var(--cd-line);
  border-bottom: 1px solid var(--cd-line);
  padding: 20px 0;
}
.cd-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.cd-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.cd-trust-num {
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  color: var(--cd-orange-text);
  line-height: 1;
}
.cd-trust-lab {
  font-size: 12px;
  color: var(--cd-text-2);
  line-height: 1.3;
}
@media (max-width: 700px) {
  .cd-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ===== PRODUCT MARKETPLACE GRID ===== */
.cd-products { background: var(--cd-bg); }
.cd-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 28px;
}
@media (max-width: 1100px) { .cd-products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .cd-products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 480px) { .cd-products-grid { grid-template-columns: 1fr; } }

.cd-prod-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--cd-line);
  border-radius: 16px;
  padding: 22px;
  text-decoration: none;
  color: var(--cd-ink);
  transition: all .22s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.cd-prod-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 2px solid transparent;
  transition: border-color .22s ease;
  pointer-events: none;
}
.cd-prod-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cd-shadow-lg);
  color: var(--cd-ink);
}
.cd-prod-card:hover::after { border-color: var(--cd-orange-text); }
.cd-prod-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background: var(--cd-soft);
  color: var(--cd-orange-text);
}
.cd-prod-icon svg { width: 28px; height: 28px; fill: currentColor; }
.cd-prod-card.tone-blue .cd-prod-icon { background: #e8f1fb; color: #1A518C; }
.cd-prod-card.tone-pink .cd-prod-icon { background: #fdecef; color: #d6336c; }
.cd-prod-card.tone-green .cd-prod-icon { background: #e6f6ec; color: #16a34a; }
.cd-prod-card.tone-purple .cd-prod-icon { background: #f1ecfd; color: #7c3aed; }
.cd-prod-card.tone-teal .cd-prod-icon { background: #e0f5f3; color: #0d9488; }
.cd-prod-card.tone-amber .cd-prod-icon { background: #fff5d9; color: #d97706; }
.cd-prod-card.tone-rose .cd-prod-icon { background: #ffe7e7; color: #dc2626; }

.cd-prod-title {
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  color: var(--cd-ink);
  margin: 0 0 6px 0;
}
.cd-prod-desc {
  font-size: 13px;
  color: var(--cd-text-2);
  line-height: 1.5;
  margin-bottom: 14px;
  flex: 1;
}
.cd-prod-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--cd-line);
}
.cd-prod-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--cd-orange-text);
  background: var(--cd-soft);
  padding: 4px 10px;
  border-radius: 999px;
}
.cd-prod-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cd-orange-text);
}
.cd-prod-arrow svg { width: 14px; height: 14px; transition: transform .2s ease; }
.cd-prod-card:hover .cd-prod-arrow svg { transform: translateX(3px); }
.cd-prod-popular {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--cd-orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .3px;
}

/* ===== MASCOT HELPER STRIP ===== */
.cd-helper {
  background: #fffaf4;
  border-radius: 20px;
  padding: 32px 36px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  border: 1px solid #ffe0c2;
  box-shadow: var(--cd-shadow-sm);
}
.cd-helper-mascot { width: 118px; height: 118px; object-fit: contain; }
.cd-helper h3 {
  font-family: inherit;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 600;
  color: var(--cd-ink);
  margin: 0 0 6px 0;
}
.cd-helper p { font-size: 14px; color: var(--cd-text-2); margin: 0; }
@media (max-width: 800px) {
  .cd-helper { grid-template-columns: 1fr; text-align: center; padding: 24px; border-radius: 18px; }
  .cd-helper-mascot { width: 92px; height: 92px; margin: 0 auto; }
}

/* ===== WHY US ===== */
.cd-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 36px;
}
@media (max-width: 1000px) { .cd-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .cd-why-grid { grid-template-columns: 1fr; } }

.cd-why-card {
  background: #fff;
  border: 1px solid var(--cd-line);
  border-radius: 16px;
  padding: 24px;
  text-align: left;
  transition: all .2s ease;
}
.cd-why-card:hover { border-color: var(--cd-orange-text); box-shadow: var(--cd-shadow-sm); }
/* Insurer logo inside cd-h1 — overrides Fomantic UI's `ui small image` 150px
   default. Used by lp/main.aspx (and the physical company.aspx pages) where
   the asp:Image carries `class="ui small circular image"`. Added 2026-05-06
   to fix oversized logos on /th/health/company/{slug}, /th/pa/company/{slug},
   etc. */
.cd-h1 img.ui.image,
.cd-h1 img.image,
.cd-h1 img.circular,
.cd-h1 img[class*="circular image"] {
  width: 48px !important;
  height: 48px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 12px;
}

.cd-why-icon,
.cd-why-card > .ic {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--cd-soft);
  color: var(--cd-orange-text);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.cd-why-icon svg,
.cd-why-card > .ic svg { width: 22px; height: 22px; fill: currentColor; }
/* Fallback selector for `<div class="ic">` markup variant inside cd-why-card —
   added 2026-05-06 because several cards (car/company, health via lp/main,
   car/lp/model, etc.) used the floating-card `.ic` class shorthand instead
   of the canonical `.cd-why-icon`. Both now render the 48x48 chip + 22x22 svg. */
.cd-why-h, .cd-why-card h3, .cd-why-card h5 {
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--cd-ink);
  margin: 0 0 8px 0;
}
.cd-why-p, .cd-why-card p, .cd-why-card .desc { font-size: 14px; line-height: 1.55; color: var(--cd-text-2); margin: 0; }

/* ===== PROMOS ===== */
.cd-promos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 800px) { .cd-promos-grid { grid-template-columns: 1fr; } }
.cd-promo-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  transition: transform .25s ease;
}
.cd-promo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.08) 50%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.cd-promo-card:hover { transform: translateY(-4px); color: #fff; }
.cd-promo-card.gift { background: linear-gradient(135deg, #ff7a00 0%, #ffb000 100%); }
.cd-promo-card.refer { background: linear-gradient(135deg, #1A518C 0%, #2980b9 100%); }
.cd-promo-card h3 {
  position: relative;
  z-index: 1;
  font-family: inherit;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px 0;
  line-height: 1.25;
  max-width: calc(100% - 180px);
}
.cd-promo-card p {
  position: relative;
  z-index: 1;
  font-size: 14px;
  color: rgba(255,255,255,.92);
  margin: 0 0 16px 0;
  line-height: 1.5;
  max-width: calc(100% - 180px);
}
.cd-promo-card .cd-promo-cta {
  position: relative;
  z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff;
  color: var(--cd-ink);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  align-self: flex-start;
}
.cd-promo-mascot {
  position: absolute;
  top: 14px;
  right: 12px;
  width: 150px;
  height: 150px;
  object-fit: contain;
  opacity: .86;
  transform: rotate(4deg);
  pointer-events: none;
}
@media (max-width: 800px) {
  .cd-promo-card { min-height: 210px; padding: 26px; }
  .cd-promo-card h3,
  .cd-promo-card p { max-width: calc(100% - 92px); }
  .cd-promo-mascot { top: 14px; right: 8px; width: 108px; height: 108px; opacity: .72; }
}
@media (max-width: 420px) {
  .cd-promo-card h3,
  .cd-promo-card p { max-width: 100%; }
  .cd-promo-mascot { width: 86px; height: 86px; opacity: .34; right: 10px; top: 10px; }
}

/* ===== PARTNERS ===== */
.cd-partners {
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
  border-top: 1px solid var(--cd-line);
  border-bottom: 1px solid var(--cd-line);
}
.cd-partners-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 800px) { .cd-partners-grid { grid-template-columns: 1fr; } }
.cd-partners-img {
  max-width: 100%;
  height: auto;
  display: block;
}
.cd-partners-logo-strip {
  overflow: hidden;
  white-space: nowrap;
}
.cd-partners-logo-track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  animation: cd-partners-marquee 46s linear infinite;
}
.cd-partners-logo-list {
  display: inline-flex;
  align-items: center;
  gap: 2.2em;
  min-width: max-content;
  padding-right: 2.2em;
}
.cd-partners-logo-list img {
  width: auto;
  max-width: 92px;
  max-height: 34px;
  filter: grayscale(1) saturate(0);
  opacity: .62;
}
@keyframes cd-partners-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ===== APP DOWNLOAD ===== */
.cd-app-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 800px) { .cd-app-grid { grid-template-columns: 1fr; } }
.cd-app-list { list-style: none; padding: 0; margin: 18px 0 24px 0; }
.cd-app-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 15px;
  color: var(--cd-text);
}
.cd-app-list li::before {
  content: "";
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--cd-orange);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='white' d='M7 14.17 2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.41L7 14.17z'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  margin-top: 2px;
}
.cd-app-stage { position: relative; text-align: center; }
.cd-app-phone {
  max-width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
}
.cd-app-mascot-side {
  position: absolute;
  bottom: 0;
  right: -20px;
  width: 220px;
  height: auto;
  z-index: 3;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.12));
}
@media (max-width: 800px) { .cd-app-mascot-side { display: none; } }

/* ===== CONTENT BLOCKS (DB-loaded SEO body) ===== */
.cd-content-block {
  max-width: 880px;
  margin: 0 auto;
  line-height: 1.7;
  color: var(--cd-text);
}
.cd-content-block h2,
.cd-content-block h3,
.cd-content-block h4 {
  font-family: inherit;
  font-weight: 600;
  color: var(--cd-ink);
  margin-top: 1.5em;
  margin-bottom: .5em;
}
.cd-content-block h2 { font-size: clamp(20px, 2.4vw, 28px); }
.cd-content-block h3 { font-size: clamp(18px, 2vw, 22px); }
.cd-content-block p { margin: 0 0 1em 0; font-size: 15.5px; }
.cd-content-block ul,
.cd-content-block ol { margin: 0 0 1em 0; padding-left: 1.5em; }
.cd-content-block li { margin-bottom: .4em; font-size: 15.5px; }
.cd-content-block a { color: var(--cd-orange-text); text-decoration: underline; }

/* ===== EN-only deep SEO sections ===== */
.cd-en-seo {
  max-width: 880px;
  margin: 0 auto;
  line-height: 1.7;
  color: var(--cd-text);
}
.cd-en-seo > section { margin-bottom: 2.5em; }
.cd-en-seo h3 {
  font-family: inherit;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  color: var(--cd-ink);
  margin: 0 0 .6em 0;
}
.cd-en-seo p { margin: 0 0 1em 0; font-size: 15.5px; }
.cd-en-seo ul,
.cd-en-seo ol { margin: 0 0 1em 0; padding-left: 1.5em; }
.cd-en-seo li { margin-bottom: .4em; font-size: 15.5px; }
.cd-en-seo a { color: var(--cd-orange-text); text-decoration: underline; }
.cd-en-seo details {
  background: #fff;
  border: 1px solid var(--cd-line);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 10px;
  transition: border-color .15s ease;
}
.cd-en-seo details[open] { border-color: var(--cd-orange-text); }
.cd-en-seo summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--cd-ink);
  font-size: 15px;
  padding: 4px 0;
}
.cd-en-seo details > p,
.cd-en-seo details > ul,
.cd-en-seo details > ol { margin-top: .8em; color: var(--cd-text-2); }

/* ===== BREADCRUMB (style only — uses existing schema.org microdata) ===== */
.cd-breadcrumb {
  padding: 14px 0;
  font-size: 13px;
  color: var(--cd-text-2);
}
.cd-breadcrumb a { color: var(--cd-text-2); text-decoration: none; }
.cd-breadcrumb a:hover { color: var(--cd-orange-text); }
.cd-breadcrumb .sep { display: inline-block; margin: 0 8px; opacity: .5; }

/* ==========================================================================
   FOOTER (cd-foot-*) — used by uc/masterpage/footer.ascx
   ========================================================================== */

.cd-foot {
  background: #fff;
  color: var(--cd-foot-text, #2c2c2c);
  font-family: inherit;
  padding: 56px 0 0;
  border-top: 1px solid #ececec;
}
.cd-foot-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.cd-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.cd-foot-brand-logo { display: block; max-width: 130px; margin-bottom: 16px; }
.cd-foot-tag { font-size: 14px; line-height: 1.55; color: #5a5a5a; margin: 0 0 20px 0; max-width: 320px; }
.cd-foot-contact { margin: 0 0 22px 0; padding: 0; list-style: none; }
.cd-foot-contact li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 13.5px; color: #2c2c2c; }
.cd-foot-contact li svg { width: 16px; height: 16px; flex-shrink: 0; fill: #FF7A00; margin-top: 2px; }
.cd-foot-contact a { color: #2c2c2c; text-decoration: none; }
.cd-foot-contact a:hover { color: var(--cd-orange-text); }
.cd-foot-contact .phone { font-size: 18px; font-weight: 600; }
.cd-foot-social { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.cd-foot-social a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1.5px solid #ececec; border-radius: 999px; color: #2c2c2c; text-decoration: none; font-size: 12px; font-weight: 500; transition: all .18s ease; }
.cd-foot-social a:hover { border-color: #FF7A00; color: var(--cd-orange-text); }
.cd-foot-social a svg { width: 14px; height: 14px; fill: currentColor; }
.cd-foot-col h4 { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--cd-orange-text); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 16px 0; padding: 0; }
.cd-foot-col h4 + h4 { margin-top: 24px; }
.cd-foot-list { list-style: none; margin: 0; padding: 0; }
.cd-foot-list li { padding: 4px 0; }
.cd-foot-list a { color: #2c2c2c; text-decoration: none; font-size: 13.5px; line-height: 1.55; transition: color .15s ease; }
.cd-foot-list a:hover { color: var(--cd-orange-text); }
.cd-foot-app-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; margin-bottom: 18px; }
.cd-foot-app-row a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1.5px solid #ececec; border-radius: 10px; color: #2c2c2c !important; text-decoration: none; font-size: 11.5px; font-weight: 500; background: #fff; transition: all .18s ease; }
.cd-foot-app-row a:hover { border-color: #FF7A00; color: var(--cd-orange-text) !important; }
.cd-foot-app-row a svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.cd-foot-bottom { background: #fafafa; border-top: 1px solid #ececec; padding: 22px 0; }
.cd-foot-bottom-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cd-foot-legal { font-size: 11.5px; color: #6a6a6a; line-height: 1.7; max-width: 900px; }
/* Country/Language footer dropdown — native <details>/<summary>, not a Fomantic .ui.dropdown.
   mainth.master loads no jQuery/Fomantic JS, so a real Fomantic dropdown needs its CSS-only
   ".simple" :hover variant, which was flaky for a 2-level nested menu (no touch support
   either). <details> gives real click-to-open with zero JS. .menu opens UPWARD (bottom:100%)
   since this sits in the last strip of the page. Pill-styled to match .cd-foot-social. */
.cd-foot-lang-select { position: relative; flex-shrink: 0; }
.cd-foot-lang-select > summary { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1.5px solid #ececec; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: #2c2c2c; background: #fff; cursor: pointer; list-style: none; }
.cd-foot-lang-select > summary::-webkit-details-marker { display: none; }
.cd-foot-lang-select > summary::after { content: '\25BE'; font-size: 10px; }
.cd-foot-lang-select:hover > summary, .cd-foot-lang-select[open] > summary { border-color: #FF7A00; color: var(--cd-orange-text); }
.cd-foot-lang-select > .menu { position: absolute; bottom: 100%; left: 0; margin-bottom: 6px; background: #fff; border: 1px solid #ececec; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); padding: 6px 0; min-width: 200px; z-index: 20; }
.cd-foot-lang-select .menu .header { padding: 8px 14px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: #999; }
.cd-foot-lang-select .menu a.item, .cd-foot-lang-select .menu details.nested > summary { display: block; padding: 8px 14px; font-size: 13px; color: #2c2c2c; text-decoration: none; cursor: pointer; list-style: none; }
.cd-foot-lang-select .menu a.item:link, .cd-foot-lang-select .menu a.item:visited { color: #2c2c2c; }
.cd-foot-lang-select .menu details.nested > summary::-webkit-details-marker { display: none; }
.cd-foot-lang-select .menu a.item:hover, .cd-foot-lang-select .menu details.nested > summary:hover { background: #faf6f2; color: var(--cd-orange-text); }
.cd-foot-lang-select .menu details.nested { border-top: 1px solid #f2f2f2; margin-top: 4px; padding-top: 2px; }
.cd-foot-lang-select .menu details.nested .menu { position: static; box-shadow: none; border: none; padding: 0 0 0 10px; margin: 0; }
.cd-foot-mascot-wrap { position: relative; }
.cd-foot-mascot {
  display: block;
  width: 76px;
  height: auto;
  margin: 10px 0 0 auto;
  opacity: .82;
  pointer-events: none;
}
@media (max-width: 1000px) { .cd-foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .cd-foot-mascot { display: none; } }
@media (max-width: 600px) { .cd-foot { padding-top: 36px; } .cd-foot-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 28px; } .cd-foot-bottom-inner { flex-direction: column; align-items: flex-start; } }

/* ===== HERO QUOTE CARD (owner 2026-11-08, conversion) =====
   A landing page opts in with <section class="cd-hero cq-hero"> and <div class="cq-hero-copy"> around the left
   column; the card sits in .cd-hero-cta. Phone: the card comes up into the first screen under the headline, and a
   sticky bar takes over once it scrolls away. Desktop: the card takes the right column beside the headline (whole
   card in the first screen on 1366x768) with a small mascot peeking over its top edge; the big mascot scene is hidden.
   Every rule is scoped to .cq-hero / .cq-*, so a hero without the card is untouched. Page-specific bits (a logo
   sprite's url and size) stay inline on the page. First used on /th/car/main + /th/motorbike/main. */
.cq-peek { display: none; }
/* the hero CTA is a wrapping flex row with a 12px gap: the <picture> and its <source> must not become flex items */
.cq-hero .cd-hero-cta > picture { display: contents; }
.cq-hero .cd-hero-cta source { display: none; }
.cq-card { background: #fff; border-radius: 16px; box-shadow: 0 8px 28px rgba(26,29,35,.10), 0 0 0 1px #eee; padding: 18px 18px 16px; width: 100%; max-width: 460px; }
.cq-card .cq-qt { font-size: 17px; font-weight: 700; color: #1a1d23; margin: 0 0 2px; }
.cq-card .cq-qs { font-size: 13px; color: #6b7280; margin: 0 0 14px; }
.cq-card .cq-lbl { display: block; font-size: 14px; font-weight: 600; color: #1a1d23; margin: 0 0 8px; }
.cq-makes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.cq-makes a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 76px; padding: 0 4px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; text-decoration: none; color: #374151; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-align: center; line-height: 1.25; transition: border-color .15s, box-shadow .15s; }
.cq-makes a:hover, .cq-makes a:focus-visible { border-color: #F97316; box-shadow: 0 2px 10px rgba(249,115,22,.18); }
.cq-makes a.on { border: 2px solid #F97316; background: #FFF7ED; }
.cq-makes a:focus:not(:focus-visible) { outline: none; }   /* a mouse/touch tap shows no focus ring, only the orange pick */
.cq-makes .lg-other { display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 300; line-height: 1; color: #9ca3af; }
.cq-makes a.other { color: #6b7280; font-weight: 600; letter-spacing: 0; }
/* text tiles (a choice with no logo: a destination, an age, a plan type): shorter, the words are the tile */
.cq-makes.cq-tx a { height: 56px; font-size: 14px; font-weight: 600; letter-spacing: 0; color: #1a1d23; }
.cq-makes.cq-tx a small { display: block; font-size: 11.5px; font-weight: 400; color: #6b7280; }
.cq-makes.cq-two { grid-template-columns: repeat(2, 1fr); }
/* a select + chips card (travel: destination + trip type) */
.cq-card .cq-select { width: 100%; height: 50px; border: 1px solid #d4d4d5; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 16px; color: #1a1d23; background: #fff; margin-bottom: 10px; }
.cq-card .cq-select:disabled { background: #f5f5f5; color: #9ca3af; }
.cq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cq-chips button { padding: 7px 14px; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; font: inherit; font-size: 13.5px; color: #374151; cursor: pointer; }
.cq-chips button.on { border: 2px solid #F97316; padding: 6px 13px; background: #FFF7ED; color: #C2410C; font-weight: 600; }
.cq-card .cd-btn { width: 100%; justify-content: center; min-height: 52px; font-size: 17px; }
.cq-card .cd-btn + .cd-btn { margin-top: 10px; }   /* a page with two buttons (compulsory: plans + a calculator) */
.cq-card .cq-trust { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: #6b7280; }
.cq-card .cq-trust span::before { content: "¹3  "; color: #16A34A; font-weight: 700; }
.cq-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: #fff; box-shadow: 0 -4px 14px rgba(0,0,0,.10); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); display: none; align-items: center; gap: 12px; transform: translateY(110%); transition: transform .2s; }
.cq-sticky.show { transform: none; }
.cq-sticky .t { flex: 1; min-width: 0; font-size: 13px; color: #6b7280; line-height: 1.3; }
.cq-sticky .t b { display: block; font-size: 15px; color: #1a1d23; }
.cq-sticky .cd-btn { flex: none; min-height: 46px; padding: 0 18px; width: auto !important; }
@media (max-width: 900px) {
  .cq-sticky { display: flex; }
  /* the card comes up to the first screen; the lead paragraph (keywords) moves under it - never hidden */
  .cq-hero-copy { display: flex; flex-direction: column; }
  .cq-hero-copy > .cd-hero-eyebrow { align-self: flex-start; }
  .cq-hero-copy > .cd-hero-lead { order: 1; margin: 18px 0 0; }
  .cq-hero-copy > .cd-hero-checklist { margin: 10px 0 0; }
  .cq-hero-copy > .cd-hero-cta { margin-top: 16px; }
  .cq-card { max-width: none; padding: 16px 14px 14px; }
  /* no mascot scene on a phone: under a short card it lands on the fold and became the LCP element (4.6-5.4s);
     the image is lazy, so hidden it is never downloaded. The helper strip further down keeps a mascot. */
  .cq-hero .cd-hero-grid > .cd-mascot-stage { display: none; }
}
/* desktop: display:contents puts the copy's children in the hero grid itself, and the two 1fr rows centre the text
   against the taller right column. DOM order is untouched, so the phone stack above is unchanged. */
@media (min-width: 901px) {
  .cd-hero.cq-hero { padding: 2.25rem 0 2.75rem; }
  .cq-hero .cd-hero-grid { grid-template-rows: 1fr auto auto auto auto auto 1fr; row-gap: 0; align-items: start; }
  .cq-hero-copy { display: contents; }
  .cq-hero-copy > * { grid-column: 1; }
  .cq-hero-copy > .cd-hero-eyebrow { grid-row: 2; justify-self: start; }
  .cq-hero-copy > .cd-h1 { grid-row: 3; }
  .cq-hero-copy > .cd-h2-sub { grid-row: 4; }
  .cq-hero-copy > .cd-hero-lead { grid-row: 5; }
  .cq-hero-copy > .cd-hero-checklist { grid-row: 6; }
  .cq-hero-copy > .cd-hero-cta { grid-column: 2; grid-row: 1 / -1; position: relative; margin: 170px 0 0; }
  .cq-hero .cd-hero-grid > .cd-mascot-stage { display: none; }
  /* the mascot peeks over the card's top-right edge, pointing down into the choices; the card covers its cut-off base */
  .cq-peek { display: block; position: absolute; right: 28px; top: -177px; width: 180px; height: auto; z-index: 0; }
  .cq-card { position: relative; z-index: 1; max-width: none; padding: 20px 20px 16px; }
  .cq-makes a { height: 70px; }
  .cq-makes.cq-tx a { height: 54px; }
}