/* ===== Cleaned & Consolidated CSS (mobile-first) ===== */

body{
  margin: 0;
  font-family: 'Kanit', sans-serif;
  background: #fff;
  color: #222;
  line-height: 1.6;
}
header{
  position: sticky;
  top: 0;
  background: #fff;
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;
  z-index: 999;
}
nav{
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav a{
  text-decoration: none;
  color: #111;
  font-size: 1rem;
}
.hero{
  background: linear-gradient(135deg, #111 40%, #d00);
  color: white;
  padding: 40px 20px;
  text-align: center;
}
.hero h1{
  font-size: 2.5rem;
  margin: 0 0 10px;
  font-weight: 700;
}
.hero p{
  font-size: 1.2rem;
  margin-bottom: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.hero a{
  background: #fff;
  color: #d00;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: background 0.3s;
}
.hero a:hover{
  background: #f2f2f2;
}
section{
  padding: 60px 20px;
  max-width: 1100px;
  margin: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}
.service-card{
  background: #fafafa;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.contact-options a{
  background: #d00;
  padding: 18px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  text-align: center;
  transition: background 0.3s, transform 0.2s;
  text-decoration: none;
  color: white;
  font-weight: bold;
}
.service-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.contact-options a:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  background: #b00000;
}
.back-home{
  display: block;
  text-align: center;
  margin-top: 40px;
  text-decoration: none;
  color: #d00;
  font-weight: bold;
  font-size: 1.1rem;
}
.button-container{
  text-align: center;
  margin-top: 40px;
}
a.youtube-button{
  display: inline-block;
  background: #d00;
  color: white;
  padding: 14px 24px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  margin-top: 50px;
  transition: background 0.3s;
}
a.youtube-button:hover{
  background: #b00000;
}
footer{
  background: #111;
  color: white;
  text-align: center;
  padding: 30px 20px;
  font-size: 0.95rem;
}
.contact-options{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 50px;
}
.video-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  align-items: stretch;
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 20px;
}
.service-header{
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.service-body{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.service-body .cta{
  margin-top: auto;
}
.service-body .cta a{
  width: 100% !important;
  display: block;
}
.service-extra ul{
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.service-extra li{
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
a:focus-visible{
  outline: 3px solid var(--info);
  outline-offset: 2px;
  border-radius: 8px;
}
:root{
  --primary: #d60000;
  --secondary: #ff1a1a;
  --success: #22c55e;
  --info: #3b82f6;
  --gray: #9aa1ac;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius: 12px;
  --shadow: 0 8px 20px rgba(0,0,0,.05);
}
.service-extra li i{
  flex-shrink: 0;
}
.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
h1{
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 40px);
  letter-spacing: .2px;
}
h2{
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 28px);
}
p{
  font-size: clamp(15px, 1.6vw, 17px);
}
li{
  font-size: clamp(15px, 1.6vw, 17px);
}
.btn{
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
  transition: transform .15s, opacity .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
}
.btn-outline{
  background: #fff;
  color: var(--primary);
  border: 2px solid currentColor;
}
.btn i{
  display: inline-block;
  line-height: 1;
}
.btn-outline i{
  display: inline-block;
  line-height: 1;
}
.btn:hover{
  transform: translateY(-1px);
  opacity: .95;
}
.btn:active{
  transform: translateY(1px);
}
.card{
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #fff;
}
button:focus-visible{
  outline: 3px solid var(--info);
  outline-offset: 2px;
  border-radius: 8px;
}
.hero-home .trust-row{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 14px !important;
  margin-top: 22px;
  opacity: .95;
  font-size: 14px;
}
.hero-home .trust-row .item{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: rgba(255,255,255,.09) !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  line-height: 1.4 !important;
  text-align: center !important;
  word-break: break-word;
}
.hero-home .trust-row .item i{
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
}
.hero-home .trust-row .item svg{
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
}
.hero-home .trust-row .item img{
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
}
.hero-home{
  background: radial-gradient(1200px 600px at 20% -10%, rgba(214,0,0,.22), transparent 60%),
              radial-gradient(1000px 500px at 120% 10%, rgba(255,26,26,.22), transparent 60%),
              linear-gradient(135deg, #111 40%, var(--primary));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 0 20px;
  text-align: center;
}
.hero-inner{
  padding: 64px 0;
}
.hero-kicker{
  font-weight: 700;
  letter-spacing: .6px;
  opacity: .9;
}
.hero-title{
  margin: .25em 0 .35em;
  font-weight: 800;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.1;
}
.hero-sub{
  max-width: 720px;
  opacity: .95;
  font-size: clamp(16px,1.8vw,22px);
}
.hero-cta{
  --cta-gap-x: 20px;
  --cta-gap-y: 10px;
  --btn-w: clamp(140px, 28vw, 220px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 20px;
  row-gap: 10px;
  margin-top: 22px;
}
.hero-cta a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 18px;
  flex: 0 0 var(--btn-w);
  max-width: 100%;
}
.hero-cta button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 18px;
  flex: 0 0 var(--btn-w);
  max-width: 100%;
}
.badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  font-weight: 700;
  font-size: 14px;
}
.section{
  padding: 56px 0;
}
.grid-3{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.grid-4{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  justify-items: center;
}
.service-card-mini{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 14px 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow, 0 2px 10px rgba(0,0,0,.06));
}
.service-card-mini i{
  font-size: 32px;
  line-height: 1;
  display: inline-block;
  color: var(--primary);
}
.service-card-mini h3{
  margin: 10px 0 4px;
  font-size: 18px;
}
.steps{
  counter-reset: step;
}
.step{
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: var(--shadow);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.step:before{
  counter-increment: step;
  content: counter(step);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #111;
  color: #fff;
  font-weight: 700;
  margin-inline-end: 8px;
}
.testi{
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: var(--shadow);
}
.testi .who{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 14px;
  opacity: .8;
}
.cta-band{
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color: #fff;
  padding: 22px;
  border-radius: 12px;
  display: grid;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  grid-template-columns: 1fr;
  justify-items: center;
  place-items: center;
  min-height: 120px;
}
.cta-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  align-items: center;
}
.logos{
  display: grid;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: stretch;
  margin-top: 16px;
}
.logos img, .logos svg, .logos i { opacity:.85; }
.logos span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
  font-size: 14px;
  justify-content: center;
  min-height: 44px;
  text-align: center;
  transition: background-color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.faq details{
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.faq summary{
  cursor: pointer;
  font-weight: 700;
}
.section-title{
  display: block;
  width: 100%;
  text-align: center;
  margin: 0 auto 16px;
}
.mini{
  font-size: 14px;
  opacity: .8;
  line-height: 1.45;
}
iframe{
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
}
.logos i{
  width: 1.25em;
  text-align: center;
  line-height: 1;
}
.trust-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.trust-row .item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
}
.hero-cta a, .hero-cta button{
  flex: 0 0 clamp(140px, 28vw, 220px);
  max-width: 100%;
}

@media (max-width: 768px){
  h1{
    font-size: 1.8rem;
  }
  section{
    padding: 40px 16px;
  }
  .contact-options{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px){
  .service-header{
    min-height: 200px;
    padding: 28px 20px !important;
  }
  .hero-cta a{
    flex-basis: 100%;
  }
  .hero-cta button{
    flex-basis: 100%;
  }
  .hero-home{
    min-height: 60vh;
  }
  .hero-inner{
    padding: 32px 0;
  }
}

@media (max-width: 640px){
  .sticky-cta{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 8px;
    padding: 8px;
    background: #fff;
    box-shadow: 0 -4px 12px rgba(0,0,0,.08);
    z-index: 9999;
  }
  .sticky-cta .btn{
    flex: 1;
  }
}

@media (max-width: 639px){
  .trust-row .item.hidden-sm{
    display: none !important;
  }
}

@media (min-width:768px){
  .cta-band{
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

@media (max-width: 360px){
  .logos{
    grid-template-columns: 1fr;
  }
}

@media (min-width: 640px){
  .logos{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 768px){
  .cta-band{
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}




/* ===== JTP Reviews (themed, no conflicts) ===== */
.jtp-reviews{
  /* Use site's variables if present */
  --jtp-primary: var(--primary, #d60000);
  --jtp-secondary: var(--secondary, #ff1a1a);
  --jtp-text: #222;
  --jtp-muted: color-mix(in oklab, var(--jtp-text) 65%, white);
  --jtp-border: rgba(0,0,0,.08);
  --jtp-shadow: 0 8px 20px rgba(0,0,0,.06);
  background: transparent; /* inherit from .section */
  color: var(--jtp-text);
}
.jtp-reviews .jtp-head{ display:grid; gap:10px; margin-bottom:12px; }
.jtp-reviews .jtp-kicker{ font-weight:700; letter-spacing:.4px; color: var(--jtp-secondary); opacity:.9; text-align:center; }
.jtp-reviews .jtp-title{ margin-top:0; }
.jtp-reviews .jtp-sub{ max-width:780px; margin: 0 auto; text-align:center; }
.jtp-reviews .jtp-rating{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:8px;
  background:#fff; border:1px solid var(--jtp-border); border-radius:12px; padding:8px 12px; width:max-content; margin-left:auto; margin-right:auto; box-shadow: var(--jtp-shadow); }
.jtp-reviews .jtp-rating-big{ font-weight:800; font-size: clamp(22px, 3vw, 30px); }
.jtp-reviews .jtp-rating-note{ color: var(--jtp-muted); }
.jtp-reviews .jtp-tabs{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin: 18px 0 10px; }
.jtp-reviews .jtp-tab{ background:#fff; color:#333; border:1px solid var(--jtp-border); padding:10px 14px; border-radius:999px; cursor:pointer; user-select:none; transition:.15s; }
.jtp-reviews .jtp-tab.is-active, .jtp-reviews .jtp-tab:hover{ color:#000; border-color: color-mix(in oklab, var(--jtp-primary) 45%, black); box-shadow:0 0 0 4px color-mix(in oklab, var(--jtp-primary) 12%, transparent) inset; }

.jtp-reviews .jtp-list{ display:grid; gap:14px; grid-auto-flow:column; grid-auto-columns:88%; overflow-x:auto; padding:8px 2px 6px; scroll-snap-type:x mandatory; }
.jtp-reviews .jtp-card{ scroll-snap-align:start; background:#fff; border:1px solid var(--jtp-border);
  border-radius:14px; padding:16px; box-shadow: var(--jtp-shadow); position:relative; }
.jtp-reviews .jtp-card-hd{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.jtp-reviews .jtp-avatar{ width:42px; height:42px; border-radius:50%; background:#f4f4f6; border:1px solid var(--jtp-border); display:grid; place-items:center; font-weight:800; color: var(--jtp-primary); }
.jtp-reviews .jtp-meta{ display:grid; gap:2px; }
.jtp-reviews .jtp-name{ font-weight:700; }
.jtp-reviews .jtp-source{ font-size:13px; color: var(--jtp-muted); display:flex; align-items:center; gap:6px; }
.jtp-reviews .jtp-badge{ font-size:12px; padding:.2em .6em; border:1px solid var(--jtp-border); border-radius:999px; background:#fff; color: var(--jtp-text); font-weight:600;}
.jtp-reviews .jtp-body{ color:#333; line-height:1.6; }
.jtp-reviews .jtp-card-ft{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; color: var(--jtp-muted); gap:8px; flex-wrap:wrap; }
.jtp-reviews .jtp-link{ color: var(--jtp-primary); text-decoration: none; border-bottom: 1px dotted currentColor; }

/* Stars */
.jtp-stars{ --value: 5; --size:16px; --count:5; --fill: var(--jtp-primary); --bg: #ddd; position:relative; display:inline-block; inline-size: calc(var(--size) * var(--count)); block-size: var(--size); }
.jtp-stars::before{ content:"★★★★★"; letter-spacing: 3px; font-size: var(--size); background: linear-gradient(90deg, var(--fill) calc(var(--value)/5*100%), var(--bg) calc(var(--value)/5*100%)); -webkit-background-clip: text; color: transparent; }
.jtp-stars::after{ content:"★★★★★"; letter-spacing: 3px; font-size: var(--size); color: #ddd; opacity:.65; position:absolute; inset:0; }

/* Desktop grid */
@media (min-width: 768px){
  .jtp-reviews .jtp-list{ grid-auto-flow:unset; grid-auto-columns:unset; grid-template-columns: repeat(3, 1fr); overflow:visible; }
}
@media (min-width: 1100px){
  .jtp-reviews .jtp-list{ grid-template-columns: repeat(4, 1fr); }
}

/* CTA row */
.jtp-reviews .jtp-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; justify-content:center; }


/* ===== Patch 2025-08-18: Fix overflow right + dark footer ===== */
.jtp-reviews .container{ overflow: hidden; position: relative; }

/* keep cards inside rounded wrapper on mobile scroll */
.jtp-reviews .jtp-list{
  padding-inline: 6px;
  scroll-padding-inline: 6px;
  margin-inline: 0;
}

/* force footer background transparent even if global CSS targets footer */
.jtp-reviews footer,
.jtp-reviews .jtp-card-ft{
  background: transparent !important;
  border-top: 1px dashed var(--jtp-border);
  padding-top: 10px;
  color: var(--jtp-muted);
}

/* prevent any generic .card footer rules from bleeding in */
.jtp-reviews .jtp-card footer{ all: unset; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; color: var(--jtp-muted); border-top: 1px dashed var(--jtp-border); padding-top: 10px; }

/* subtle shadow without spilling outside container */
.jtp-reviews .jtp-card{ box-shadow: 0 6px 18px rgba(0,0,0,.05); }


/* ===== JTP Reviews — Compact Mode ===== */
.jtp-reviews.jtp-compact{ padding: 36px 0; }
.jtp-reviews.jtp-compact .jtp-head{ gap:6px; margin-bottom: 10px; }
.jtp-reviews.jtp-compact .jtp-title{ font-size: clamp(22px, 2.8vw, 28px); margin: 2px 0 4px; }
.jtp-reviews.jtp-compact .jtp-sub{ font-size: .98rem; opacity:.9; max-width: 720px; }
.jtp-reviews.jtp-compact .jtp-rating{
  background: transparent; border:0; box-shadow:none;
  gap:8px; padding:0; margin-top: 4px;
}
.jtp-reviews.jtp-compact .jtp-rating-big{ font-size: clamp(20px, 2.4vw, 24px); }
.jtp-reviews.jtp-compact .jtp-stars{ --size:14px; --bg:#e8e8ea; letter-spacing:2px; }
.jtp-reviews.jtp-compact .jtp-rating-note{ font-size: .92rem; }

.jtp-reviews.jtp-compact .jtp-tabs{ margin: 12px 0 6px; gap:6px; }
.jtp-reviews.jtp-compact .jtp-tab{
  padding: 6px 10px; font-size: .95rem; border-radius:999px;
  background: transparent; color:#444;
}
.jtp-reviews.jtp-compact .jtp-tab.is-active{
  background: color-mix(in oklab, var(--jtp-primary) 12%, white);
  border-color: color-mix(in oklab, var(--jtp-primary) 30%, var(--jtp-border));
  color:#111;
}

.jtp-reviews.jtp-compact .jtp-list{ gap:10px; grid-auto-columns:86%; padding-inline: 4px; scroll-padding-inline: 4px; }
.jtp-reviews.jtp-compact .jtp-card{
  padding:14px; border-radius:10px; box-shadow:none; background:#fff;
  border:1px solid var(--jtp-border);
}
.jtp-reviews.jtp-compact .jtp-card-hd{ gap:10px; margin-bottom:8px; }
.jtp-reviews.jtp-compact .jtp-avatar{ width:36px; height:36px; background:#fafbfc; }
.jtp-reviews.jtp-compact .jtp-name{ font-size: 1rem; }
.jtp-reviews.jtp-compact .jtp-source{ font-size:.85rem; }
.jtp-reviews.jtp-compact .jtp-body{ font-size:.98rem; line-height:1.55; margin-top:4px; }
.jtp-reviews.jtp-compact .jtp-card-ft{ margin-top:10px; padding-top:8px; }

/* Desktop density */
@media (min-width: 768px){
  .jtp-reviews.jtp-compact .jtp-list{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px){
  .jtp-reviews.jtp-compact .jtp-list{ grid-template-columns: repeat(4, 1fr); }
}

/* CTA more compact */
.jtp-reviews.jtp-compact .jtp-cta{ gap:8px; margin-top: 12px; }
.jtp-reviews.jtp-compact .btn{ padding: 9px 12px; border-radius: 10px; }


/* ===== Patch: Compact+ — shorter text, colored head, no footer ===== */
.jtp-reviews.jtp-compact .jtp-card{ padding:12px; }
.jtp-reviews.jtp-compact .jtp-card-hd{
  margin:-12px -12px 10px;
  padding:10px 12px;
  border-radius:8px 8px 0 0;
  background: color-mix(in oklab, var(--jtp-primary) 10%, rgb(255, 211, 211));
  border-bottom: 1px solid var(--jtp-border);
}
.jtp-reviews.jtp-compact .jtp-avatar{
  background: #fff;
  border-color: rgba(0,0,0,.08);
  color: var(--jtp-primary);
}
.jtp-reviews.jtp-compact .jtp-name{ font-weight:700; }
.jtp-reviews.jtp-compact .jtp-source{ opacity:.9; }

/* shorten review text */
.jtp-reviews.jtp-compact .jtp-body{
  margin-top:2px;
  display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* small stars */
.jtp-reviews.jtp-compact .jtp-stars{ --size:13px; letter-spacing:2px; }

/* ทำหัวส่วนรีวิว (jtp-head) เป็นพื้นแดง */
.jtp-reviews .jtp-head{
  background: linear-gradient(90deg, var(--primary), var(--secondary));  /* ใช้สีแดงหลักของธีม */
  color: #fff;
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* ข้อความในหัวให้ตัดกับพื้นหลังแดง */
.jtp-reviews .jtp-head .jtp-kicker{ color: rgba(255,255,255,.92); }
.jtp-reviews .jtp-head .jtp-title{ color:#fff; }
.jtp-reviews .jtp-head .jtp-accent{ color:#fff; }
.jtp-reviews .jtp-head .jtp-sub{ color: rgba(255,255,255,.92); }

/* ปรับสรุปคะแนนให้เข้ากับพื้นแดง (โปร่งใส/เส้นขาวบาง) */
.jtp-reviews .jtp-head .jtp-rating{
  background: transparent;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 12px;
  color: #fff;
}
.jtp-reviews .jtp-head .jtp-rating-big{ color:#fff; }
.jtp-reviews .jtp-head .jtp-rating-note{ color: rgba(255,255,255,.85); }
.jtp-reviews .jtp-head .jtp-stars{
  --fill: #fff;                       /* ดาวขาว */
  --bg: rgba(255, 255, 255, 0);        /* แถบหลังดาวจางๆ */
}

/* อวาตาร์ในหัวให้ดูชัดบนพื้นแดง */
.jtp-reviews .jtp-head .jtp-avatar{
  background:#fff; 
  border-color: transparent;
  color: var(--jtp-primary);
}

/* 1) รวมโทนแดงให้ดึงจากตัวแปรธีม */
.hero{
  background: linear-gradient(135deg, #111 40%, var(--primary)); /* เดิมมี #d00 */
}
.hero a{ color: var(--primary); } /* เดิม #d00 */

/* ปุ่มคอนแทค + YouTube ใช้แดงจากตัวแปร + hover คำนวณจาก primary */
.contact-options a,
a.youtube-button{
  background: var(--primary);  /* เดิม #d00 */
  color: #fff;
}
.contact-options a:hover,
a.youtube-button:hover{
  /* แดงเข้มคำนวณจาก primary (ไม่ฟิก #b00000) */
  background: color-mix(in oklab, var(--primary) 85%, black);
}

/* ลิงก์ back-home ให้ใช้แดงธีม */
.back-home{ color: var(--primary); } /* เดิม #d00 */

/* 2) เก็บรายละเอียดส่วนรีวิวให้เนียนธีม */
.jtp-reviews .jtp-tab{ color: #222; }             /* เดิม #333 ให้ตรงกับ body */
.jtp-reviews .jtp-avatar{ background: #fafafa; }  /* ให้ match การ์ดอื่นของเว็บ */
.jtp-reviews .jtp-body{ color: #222; }            /* ให้ตรง body */


/* === Fix: keep sticky header above review panel === */
header{
  position: sticky;
  top: 0;
  z-index: 9999;      /* higher than any section/cards */
  isolation: isolate; /* create a new stacking context */
}

/* Ensure sections don't accidentally stack above header */
section, .section{
  position: relative;
  z-index: 0;
}


/* unified header/nav classes */
.site-header{ position: sticky; top: 0; background:#fff; padding: 10px 20px; border-bottom:1px solid #ddd; z-index:999; }
.site-nav{ max-width:1200px; margin:auto; display:flex; justify-content:space-between; align-items:center; }
.site-brand{ font-weight:700; font-size:1.2rem; color: var(--primary, #d60000); }
.menu{ display:flex; gap:20px; font-size:1rem; }
.menu a{ text-decoration:none; color:#111; }

/* anchor offset to avoid sticky header overlap */
:where(section,h1,h2,h3,[id]){ scroll-margin-top: 80px; }

/* Visually hidden text for accessibility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}