:root{--palm-bg:#f4edfc;--palm-card:#ffffff;--palm-card2:#f4edfc;--palm-gold:#7555ae;--palm-text:#3a2a5c;--palm-muted:#6b5b8a;--palm-border:#d7c3f4}
body.palm-single-lesson{background:var(--palm-bg)!important}.palm-single-wrap{width:min(1450px,calc(100% - 32px));margin:0 auto;padding:36px 0 56px;color:var(--palm-text);font-family:Kanit,"Noto Sans Thai",sans-serif}.palm-trending{position:relative;width:min(1450px,calc(100% - 32px));margin:0 auto;padding:42px 0 62px;color:#3a2a5c;font-family:Kanit,"Noto Sans Thai",sans-serif;background:#EFE6F7;box-shadow:0 0 0 100vmax #EFE6F7;clip-path:inset(0 -100vmax)}.palm-single-head{margin-bottom:20px}.palm-single-head h1{color:#3a2a5c;font-size:clamp(24px,3vw,38px);line-height:1.35;margin:0 0 12px}.palm-meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--palm-muted);font-size:14px}.palm-badge{display:inline-flex;padding:5px 10px;border:1px solid var(--palm-border);border-radius:7px;color:var(--palm-gold);background:rgba(149,117,205,.10)}.palm-learning-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(360px,1fr);gap:24px;align-items:start}.palm-video-box,.palm-pdf-box,.palm-sections,.palm-html-content{background:var(--palm-card);border:1px solid var(--palm-border);border-radius:12px;overflow:hidden}.palm-video-box iframe,.palm-video-box video{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}.palm-no-video{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;color:var(--palm-muted);background:#ece4f8}.palm-quality{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--palm-muted);font-size:13px}.palm-quality button{border:1px solid var(--palm-border);background:var(--palm-card2);color:#4b3370;border-radius:6px;padding:5px 12px;cursor:pointer}.palm-quality button.active{background:var(--palm-gold);color:#fff}.palm-pdf-box iframe{display:block;width:100%;height:720px;border:0;background:#fff}.palm-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.palm-actions a{display:inline-flex;padding:9px 15px;border:1px solid var(--palm-border);border-radius:7px;color:var(--palm-gold)!important;text-decoration:none;background:rgba(149,117,205,.08)}.palm-sections{padding:18px;margin-top:18px}.palm-sections h2,.palm-html-content h2{color:#3a2a5c;font-size:20px;margin:0 0 12px}.palm-section-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.palm-section-link{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:10px;border-radius:7px;background:var(--palm-card2);color:#3a2a5c!important;text-decoration:none;border:1px solid transparent}.palm-section-link:hover{border-color:var(--palm-border)}.palm-section-num{display:flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:50%;background:var(--palm-gold);color:#fff;font-size:12px;font-weight:700}.palm-section-time{color:var(--palm-gold);font-family:monospace;font-size:12px}.palm-html-content{padding:22px;margin-top:18px;color:#4b3a6b;line-height:1.8}.palm-html-content a{color:var(--palm-gold)}.palm-share{margin-top:20px}.palm-trending-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px}.palm-trending-head h1{margin:0;color:#3a2a5c;font-size:clamp(28px,4vw,46px)}.palm-trending-head span{color:#6b5b8a}.palm-trending-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px}.palm-trending-card{overflow:hidden;border:1px solid #d7c3f4;border-radius:10px;background:#fff;box-shadow:0 5px 18px rgba(117,85,174,.18);transition:transform .18s ease,box-shadow .18s ease}.palm-trending-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(117,85,174,.28)}.palm-trending-thumb{position:relative;display:block;aspect-ratio:16/9;background:#e7dbf7;overflow:hidden}.palm-trending-thumb img{width:100%;height:100%;object-fit:cover;display:block}.palm-no-cover{display:flex;width:100%;height:100%;align-items:center;justify-content:center;color:#9575cd;font-size:34px}.palm-episode{position:absolute;left:8px;top:8px;padding:4px 7px;border-radius:5px;background:#9575cd;color:#fff;font-size:11px;font-weight:700}.palm-trending-body{padding:12px}.palm-card-cat{color:#9575cd;font-size:11px;margin-bottom:5px}.palm-card-button{display:inline-flex;color:#7555ae!important;text-decoration:none;font-size:12px;font-weight:600}.palm-pagination{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:30px}.palm-pagination a,.palm-pagination span{display:inline-flex;min-width:36px;height:36px;align-items:center;justify-content:center;padding:0 11px;border:1px solid #d7c3f4;border-radius:7px;color:#4b3370!important;text-decoration:none;background:#fff}.palm-pagination .current{background:#9575cd;color:#fff!important;border-color:#9575cd}.palm-empty{padding:30px;text-align:center;background:#fff;border:1px solid #d7c3f4;border-radius:10px;color:#6b5b8a;box-shadow:0 5px 18px rgba(117,85,174,.18)}
@media(max-width:1200px){.palm-trending-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.palm-learning-grid{grid-template-columns:1fr}.palm-pdf-box iframe{height:560px}.palm-trending-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.palm-single-wrap,.palm-trending{width:min(100% - 20px,1450px);padding-top:28px}.palm-section-list{grid-template-columns:1fr}.palm-trending-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.palm-trending-body{padding:10px}.palm-pdf-box iframe{height:480px}}
@media(max-width:420px){.palm-trending-grid{grid-template-columns:1fr}}

/* v1.1.0: Google Sarabun and home-style New & Trending cards. */
.palm-single-wrap,.palm-trending,.palm-trending *{font-family:'Sarabun',Arial,sans-serif}
.palm-trending-card.palm-home-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid #e0d4f5;border-radius:12px;background:#fff;box-shadow:0 5px 18px rgba(117,85,174,.14);transition:transform .18s ease,box-shadow .18s ease}
.palm-trending-card.palm-home-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(117,85,174,.26)}
.palm-home-card .palm-trending-thumb{display:block;aspect-ratio:16/9;background:#e7dbf7}
.palm-home-card .palm-trending-body{display:flex;flex:1;flex-direction:column;padding:13px 14px 15px;background:#fff}
.palm-home-card .palm-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px;color:#8574a6;font-size:.78rem;font-weight:500}
.palm-home-card .palm-card-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.palm-home-card .palm-card-open,.palm-home-card .palm-card-action{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 11px;border:1px solid #e0d4f5;border-radius:7px;background:#faf7ff;color:#7555ae!important;font-family:'Sarabun',Arial,sans-serif;font-size:.78rem;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer}
.palm-home-card .palm-card-open{min-width:92px;border-color:#7555ae;background:#7555ae;color:#fff!important}
.palm-home-card .palm-card-action:hover{border-color:#9575cd;background:#f4edfc}
.palm-home-card .palm-card-action.in-wl,.palm-home-card .palm-card-action.is-liked{border-color:#9575cd;background:#ece1fb;color:#4b3370!important}

/* =========================================================
   v1.0.5 — Green canvas + gold frame for every PALM front page.
   Scoped only to PALM output; site header/navigation is untouched.
   ========================================================= */
.palm-trending {
  position: relative !important;
  isolation: isolate;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}
.palm-trending::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  background: #EFE6F7;
  border-top: 0;
  border-bottom: 0;
}
.palm-trending > * { position: relative; z-index: 1; }

body.palm-single-lesson #content,
body.palm-single-lesson .site-content {
  background: #EFE6F7 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
body.palm-single-lesson .palm-single-wrap {
  min-height: 100vh;
  background: transparent !important;
}

/* v1.0.6: Real wrapper, rather than a pseudo-element.
   This guarantees the gold rule is visible on every theme. */
.palm-trending-canvas {
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 0 0 -50vw !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #EFE6F7 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.palm-trending-canvas .palm-trending {
  width: min(1450px, calc(100% - 32px)) !important;
  margin: 0 auto !important;
  padding: 42px 0 62px !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}
.palm-trending-canvas .palm-trending::before { display: none !important; }
.palm-trending-canvas .palm-trending > * { z-index: auto !important; }
@media(max-width:640px) {
  .palm-trending-canvas .palm-trending {
    width: min(100% - 20px, 1450px) !important;
    padding-top: 28px !important;
  }
}

/* =========================================================
   v1.1.9 — [pali_new_trending] inner content width 1200px
   Keep the pale-purple canvas full width; center only its content.
   ========================================================= */
@media (min-width: 1280px) {
  body:not(.wp-admin) .palm-trending-canvas .palm-trending,
  body:not(.wp-admin) .palm-trending {
    width: min(calc(100% - 48px), 1200px) !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* v1.0.7: visible gold separator above and below [pali_new_trending].
   It sits above every theme background and is intentionally not behind content. */
.palm-trending {
  overflow: visible !important;
}
.palm-trending::before,
.palm-trending::after,
.palm-trending-canvas .palm-trending::before,
.palm-trending-canvas .palm-trending::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  z-index: 999 !important;
  display: block !important;
  width: 100vw !important;
  height: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.palm-trending::before { top: 0 !important; }
.palm-trending::after { top: auto !important; bottom: 0 !important; }
/* New & Trending: larger cards, four columns on desktop. */
.palm-trending-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
@media(max-width:1200px){.palm-trending-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.palm-trending-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.palm-trending-grid{grid-template-columns:1fr}}

/* v1.1.6: center New & Trending title and use requested deep purple. */
.palm-trending-canvas .palm-trending-head,
.palm-trending .palm-trending-head {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 22px !important;
  text-align: center !important;
}
.palm-trending-canvas .palm-trending-head h1,
.palm-trending .palm-trending-head h1 {
  grid-column: 2 !important;
  margin: 0 !important;
  color: #580095 !important;
  font-size: clamp(24px, 2.1vw, 34px) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  text-align: center !important;
}
.palm-trending-canvas .palm-trending-head span,
.palm-trending .palm-trending-head span {
  grid-column: 3 !important;
  justify-self: end !important;
}
.palm-episode,
.palm-pagination .current {
  background: #580095 !important;
  border-color: #580095 !important;
  color: #fff !important;
}
.palm-home-card .palm-card-open {
  border-color: #580095 !important;
  background: #580095 !important;
  color: #fff !important;
}
.palm-home-card .palm-card-action {
  color: #580095 !important;
}
.palm-home-card .palm-card-action:hover,
.palm-home-card .palm-card-action.in-wl,
.palm-home-card .palm-card-action.is-liked {
  border-color: #580095 !important;
  color: #580095 !important;
}
@media(max-width:640px) {
  .palm-trending-canvas .palm-trending-head,
  .palm-trending .palm-trending-head {
    grid-template-columns: 1fr !important;
  }
  .palm-trending-canvas .palm-trending-head h1,
  .palm-trending .palm-trending-head h1,
  .palm-trending-canvas .palm-trending-head span,
  .palm-trending .palm-trending-head span {
    grid-column: 1 !important;
    justify-self: center !important;
  }
}

/* =========================================================
   v1.2.0 — Per markup feedback (1200px page)
   1) All three action buttons on ONE row (ดูบทเรียน / ดูภายหลัง / ถูกใจ)
   2) Episode badge removed (belt-and-braces hide for cached HTML)
   3) Header lesson-count removed (hide for cached HTML)
   ========================================================= */
.palm-episode { display: none !important; }
.palm-trending-canvas .palm-trending-head span,
.palm-trending .palm-trending-head span { display: none !important; }

.palm-home-card .palm-card-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  margin-top: auto !important;
}
.palm-home-card .palm-card-open,
.palm-home-card .palm-card-action {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 6px 6px !important;
  font-size: .74rem !important;
  white-space: nowrap !important;
  justify-content: center !important;
}
.palm-home-card .palm-card-open { min-width: 0 !important; }

@media (max-width: 480px) {
  .palm-home-card .palm-card-open,
  .palm-home-card .palm-card-action {
    font-size: .7rem !important;
    padding: 6px 4px !important;
  }
}
