/* qamlo.css — consolidated: Sarabun font + components + former inline styles.
   Link this LAST (after default.css). Supersedes qamlo-fonts.css. */

/* Qamlo — self-hosted Sarabun (Thai + Latin). Link this LAST, after style/newstyle/default.
   Font files live in ../fonts/ relative to this file (static/css/ -> static/fonts/). */

/* ---- weight 400 ---- */
@font-face { font-family:'Sarabun'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/sarabun-latin-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Sarabun'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/sarabun-thai-400.woff2) format('woff2');
  unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC; }

/* ---- weight 600 ---- */
@font-face { font-family:'Sarabun'; font-style:normal; font-weight:600; font-display:swap;
  src:url(../fonts/sarabun-latin-600.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Sarabun'; font-style:normal; font-weight:600; font-display:swap;
  src:url(../fonts/sarabun-thai-600.woff2) format('woff2');
  unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC; }

/* ---- weight 700 ---- */
@font-face { font-family:'Sarabun'; font-style:normal; font-weight:700; font-display:swap;
  src:url(../fonts/sarabun-latin-700.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Sarabun'; font-style:normal; font-weight:700; font-display:swap;
  src:url(../fonts/sarabun-thai-700.woff2) format('woff2');
  unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC; }

/* Apply site-wide. Deliberately does NOT touch icon fonts (.fa / [class*="icon-"]). */
body,
h1,h2,h3,h4,h5,h6,
p, li, a, span, label, blockquote, td, th,
.btn, button, input, textarea, select,
.navbar-nav > li > a, .navbar-brand {
  font-family:'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans Thai', sans-serif;
}


/* ---- shared components (were inline <style> blocks) ---- */
.primary-answer-block { background: #e8f4fd; padding: 20px; border-left: 4px solid #007bff; margin: 20px 0;}
.answer-text { font-size: 18px; font-weight: 600; margin: 0; color: #2c3e50;}
.ai-extraction-section { background: ghostwhite; padding: 25px; border-radius: 10px; margin: 20px 0;}
/* Track routing cards (new) — aligned to theme accent #68A4C4 */
      .track-card { border:1px solid #e2e6ea; border-radius:12px; padding:26px; height:100%; min-height: 280px;background:#fff; transition:box-shadow .18s ease, border-color .18s ease;}
.track-card:hover { border-color:#68A4C4; box-shadow:0 14px 34px -20px rgba(30,60,90,.4);}
.track-card.dark { background:#1f2d3d; border-color:#1f2d3d; color:#eef2f7;}
.track-label { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#68A4C4; margin-bottom:10px;}
.track-card.dark .track-label { color:#a7cbdd;}
.track-card h3 { margin-top:4px;}
.stat-num { font-size:44px; font-weight:700; color:#68A4C4; line-height:1;}
.why-item { padding:18px 0; border-top:1px solid #e2e6ea;}
.why-item h4 { margin:0 0 4px; font-size:17px; color:#1f2d3d;}
.primary-answer-block { background:#e8f4fd; padding:20px; border-left:4px solid #007bff; margin:20px 0;}
.answer-text { font-size:18px; font-weight:600; margin:0; color:#2c3e50;}
.product-card { background:#fff; border:1px solid #e6e8eb; border-radius:12px; padding:26px; margin-bottom:26px; box-shadow:0 4px 12px rgba(0,0,0,.06);}
.product-card .eyebrow { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#68A4C4;}
.product-card h3 { margin:6px 0 8px;}
.product-card ul { padding-left:18px;}
.product-card ul li { margin-bottom:5px;}
.price-badge { display:inline-block; background:#eef4f8; color:#1f2d3d; border-radius:8px; padding:6px 12px; font-weight:600; margin:10px 0;}
.prod-icon { color:#68A4C4; font-weight:700;}
.hilite-box { background:#1f2d3d; color:#fff; border-radius:12px; padding:24px 26px; margin:24px 0;}
.hilite-box h3 { color:#fff; margin-top:0;}
.hilite-box .tag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#a7cbdd; margin-bottom:8px;}
.feat-card { background:#fff; border:1px solid #e6e8eb; border-radius:12px; padding:22px; margin-bottom:20px; box-shadow:0 4px 12px rgba(0,0,0,.05); height:100%;}
.feat-card .k { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#68A4C4;}
.feat-card h4 { margin:6px 0 8px; color:#1f2d3d;}
.feat-card.hl { border-color:#68A4C4; box-shadow:0 6px 18px rgba(104,164,196,.35);}
.deadline { display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-top:1px solid #eceef0;}
.deadline:first-child { border-top:0;}
.deadline .f { font-weight:600; color:#1f2d3d;}
.deadline .d { color:#6b7480; font-size:13px;}
.pill { font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px;}
.pill.ok { background:#dceee3; color:#125c41;}
.pill.due { background:#f6e9d8; color:#8a4e14;}
.price-col { border:1px solid #e6e8eb; border-radius:14px; padding:24px; text-align:center; margin-bottom:20px; background:#fff;}
.price-col.best { border-color:#68A4C4; box-shadow:0 10px 26px -14px rgba(104,164,196,.6);}
.price-col .amt { font-size:32px; font-weight:700; color:#1f2d3d; margin:8px 0 2px;}
.price-col .amt small { font-size:14px; font-weight:400; color:#6b7480;}
.price-col .lim { color:#4b5560; font-size:14px; margin-bottom:14px;}
.sidebar-cta { background:ghostwhite; border:1px solid #d7e3ea; border-radius:12px; padding:20px; text-align:center; margin-top:22px; margin-bottom:22px;}


.svc-row {
  display: flex;
  flex-wrap: wrap;
}

.svc-row > [class*="col-"] {
  display: flex;
}

.svc-card {
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.svc-card .k {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #68A4C4;
}

.svc-card h2,
.svc-card h3,
.svc-card h4 {
  margin: 6px 0 8px;
  color: #1f2d3d;
}

.svc-card a.more {
  font-weight: 600;
  color: #68A4C4;
  text-decoration: none;
}

.svc-card a.more:hover {
  text-decoration: underline;
}




.ben-list { list-style:none; padding-left:0;}
.ben-list li { padding:9px 0; border-top:1px solid #eceef0;}
.ben-list li:first-child { border-top:0;}
.ben-list li b { color:#1f2d3d;}

/* ---- former inline styles, now classes ---- */
.q-hero-img{width:100%;max-width:800px;height:auto;margin:0 auto;display:block;border-radius:15px;}
.q-cta-dark{background:#1f2d3d;color:#fff;padding:34px;border-radius:14px;margin-top:20px;text-align:center;}
.q-cta-grad{background:linear-gradient(135deg,#3a5f7d 0%,#1f2d3d 100%);color:#fff;padding:30px;border-radius:15px;margin:34px 0;}
.q-cta-p{color:#c4cedb;max-width:520px;margin:10px auto 20px;}
.q-crumb{font-size:15px;color:#8a929c;}
.q-lede{font-size:15px;color:#6b7480;margin-top:-6px;}
.q-prod-intro{color:#4b5560;margin-bottom:18px;}
.q-subhead{color:#34495e;margin-top:20px;margin-bottom:10px;}
.q-slate{color:#2c3e50;}
.q-white{color:#fff;}
.q-muted-light{color:#c4cedb;}
.q-hilite-p{color:#d3dbe4;margin-bottom:0;}
.q-hilite-a{color:#a7cbdd;}
.q-side-list{list-style:none;padding-left:0;line-height:1.9;}
.q-side-list-lg{list-style:none;padding-left:0;line-height:2;}
.q-list-plain{list-style-type:none;padding-left:0;}
.q-note{background-color:white;margin-top:4px;padding-top:8px;padding-bottom:8px;border-left:4px solid #68A4C4;}
.q-note-b2{border-left-color:#6c63ff;}
.q-note-b3{border-left-color:#007bff;}
.q-chip{background:rgba(255,255,255,0.2);margin-right:10px;}
.q-chip-plain{background:rgba(255,255,255,0.2);}
.q-founder-img{width:100%;border-radius:50%;max-width:150px;}
.q-bg-soft{background-color:#fdfdfd;}
.q-mh-210{min-height:210px;}
.q-mt0{margin-top:0;}
.q-mt-10{margin-top:10px;}.q-mt-18{margin-top:18px;}.q-mt-22{margin-top:22px;}
.q-mt-24{margin-top:24px;}.q-mt-26{margin-top:26px;}.q-mt-30{margin-top:30px;}
.q-mt-34{margin-top:34px;}.q-mt-36{margin-top:36px;}
.q-mb-12{margin-bottom:12px;}.q-mb-15{margin-bottom:15px;}.q-mb-20{margin-bottom:20px;}

.about-card h2 {
  margin-top: 0;
  color: #1f2d3d;
}

.about-card .k {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #68A4C4;
}

/* Place this AFTER bootstrap.min.css */
.faq-optimized-content {
  margin-top: 2rem;
}

.faq-optimized-content .faq-item {
  margin-bottom: 22px;
  padding: 20px;
  background-color: ghostwhite; /* subtle contrast with Bootstrap white */
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* card effect */
}

.faq-optimized-content .faq-item h3 {
  color: #2c3e50;
  margin-top: 0;
}

.faq-optimized-content .faq-item p {
  margin-bottom: 0;
}

.q-hero-img {
  width: 100%;
  max-width: 800px;
  height: auto;
  margin: 0 auto 16px auto; /* center with spacing below */
  display: block;
  border-radius: 15px;
}

/* ---- Image utility class ---- */
#content .qamlo-img {
  max-width: 600px !important;  /* enforce cap */
  width: 100%;
  height: auto;
  margin: 0 auto 16px auto;
  display: block;
  border-radius: 15px;
}



/* Responsive tweaks */
@media (max-width: 768px) {
  
  .q-hero-img {
    max-width: 100%; /* allow full width on mobile */
  }
  .qamlo-img {
    max-width: 100%; /* allow full width on mobile */
  }
}


@media (min-width: 992px) {
  .q-hero-img { max-width: 600px; }
  
}

@media (min-width: 1200px) {
  .q-hero-img { max-width: 500px; }
  
}