/*
Theme Name: CLICKPLAY Base
Theme URI: https://click-play.org/
Author: CLICKPLAY
Description: ธีมโครงน้ำหนักเบาของ CLICKPLAY ดูแล Document Shell, Design Tokens, ฟอนต์ในเครื่อง, Base CSS, คอมโพเนนต์หน้า Owner/บทความ และ Breadcrumb ของบทความ ส่วน Header/Footer และ Homepage Sections เป็นของ CLICKPLAY Control
Version: 1.2.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: clickplay-base
*/

html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%}
/* ---------- Fonts (local WOFF2, Thai/Latin split) ---------- */
@font-face{font-family:'CLP Anuphan';font-weight:500;font-display:swap;src:url(assets/fonts/anuphan-thai-500-normal.woff2) format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'CLP Anuphan';font-weight:600;font-display:swap;src:url(assets/fonts/anuphan-thai-600-normal.woff2) format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'CLP Anuphan';font-weight:700;font-display:swap;src:url(assets/fonts/anuphan-thai-700-normal.woff2) format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'CLP Anuphan';font-weight:500;font-display:swap;src:url(assets/fonts/anuphan-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF}
@font-face{font-family:'CLP Anuphan';font-weight:600;font-display:swap;src:url(assets/fonts/anuphan-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF}
@font-face{font-family:'CLP Anuphan';font-weight:700;font-display:swap;src:url(assets/fonts/anuphan-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF}
@font-face{font-family:'CLP Plex Thai';font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-sans-thai-thai-400-normal.woff2) format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'CLP Plex Thai';font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-sans-thai-thai-500-normal.woff2) format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'CLP Plex Thai';font-weight:600;font-display:swap;src:url(assets/fonts/ibm-plex-sans-thai-thai-600-normal.woff2) format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'CLP Plex Thai';font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-sans-thai-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF}
@font-face{font-family:'CLP Plex Thai';font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-sans-thai-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF}
@font-face{font-family:'CLP Plex Thai';font-weight:600;font-display:swap;src:url(assets/fonts/ibm-plex-sans-thai-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF}
@font-face{font-family:'CLP Plex Mono';font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'CLP Plex Mono';font-weight:600;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2')}

/* ---------- Tokens ---------- */
:root{
  /* CLICKPLAY — Premium Chrome Silver & Black · black 60% / silver 30% / gold 10% (accent only) */
  --clp-gold:#B8914F;--clp-gold-dark:#9A7638;--clp-gold-soft:#C9A675;--clp-gold-tint:rgba(201,166,117,.12);--clp-gold-on-dark:#C9A675;--clp-on-gold:#080B0F;
  --clp-ink:#030507;--clp-ink-2:#10151B;--clp-ink-3:#171D24;--clp-footer:#030507;
  --clp-pearl:#F2F4F6;--clp-silver:#C8CDD3;--clp-silver-2:#A7AFB8;--clp-chrome:linear-gradient(180deg,#F2F4F6 0%,#C8CDD3 55%,#8E969F 100%);
  --clp-text:#C8CDD3;--clp-text-2:#A7AFB8;--clp-text-3:#9DA6B0;--clp-text-on-dark:#C8CDD3;--clp-muted:#8B949E;
  --clp-line:#343B43;--clp-line-2:#454D56;--clp-surface:#10151B;--clp-surface-2:#171D24;--clp-card:#171D24;--clp-hover:#222932;--clp-white:#080B0F;
  --clp-font-display:'CLP Anuphan','CLP Plex Thai',sans-serif;
  --clp-font-body:'CLP Plex Thai',sans-serif;
  --clp-font-mono:'CLP Plex Mono','CLP Plex Thai',monospace;
  --clp-container:1200px;--clp-gutter:24px;--clp-section-y:112px;
  --clp-r-btn:12px;--clp-r-card:20px;--clp-r-panel:24px;
  --clp-header-h:72px;--clp-ease:200ms ease;
}
@media (max-width:599px){:root{--clp-gutter:16px;--clp-section-y:56px}}

/* ---------- Scoped base ---------- */
.clp-page{margin:0;background:var(--clp-white);color:var(--clp-text);font-family:var(--clp-font-body);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.clp-page *,.clp-page *::before,.clp-page *::after{box-sizing:border-box}
.clp-page img{max-width:100%;height:auto;display:block}
.clp-page a{color:var(--clp-gold-soft);text-underline-offset:3px}
.clp-page a:hover{color:var(--clp-pearl)}
.clp-nav__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.clp-page h1,.clp-page h2,.clp-page h3,.clp-page p,.clp-page ul,.clp-page ol,.clp-page dl,.clp-page dd,.clp-page figure{margin:0}
.clp-page :focus-visible{outline:2px solid var(--clp-gold-soft);outline-offset:3px;border-radius:4px}
.clp-on-dark :focus-visible,.clp-page .clp-on-dark :focus-visible{outline-color:#fff}
.clp-main{padding-top:var(--clp-header-h)}
.clp-page [id]{scroll-margin-top:calc(var(--clp-header-h) + 16px)}
.clp-skip{position:absolute;left:16px;top:-60px;z-index:200;background:var(--clp-ink);color:#fff!important;padding:10px 16px;border-radius:8px;text-decoration:none}
.clp-skip:focus{top:12px}
.clp-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.clp-lock{overflow:hidden}

/* ---------- Layout ---------- */
.clp-container{max-width:calc(var(--clp-container) + var(--clp-gutter)*2);margin:0 auto;padding:0 var(--clp-gutter)}
.clp-section{padding:var(--clp-section-y) 0}
.clp-section--surface{background:var(--clp-surface)}
.clp-section--line{border-top:1px solid var(--clp-line)}
.clp-section--ink{background:var(--clp-ink);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.clp-section--ink::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 85%);mask-image:linear-gradient(to bottom,#000 0%,transparent 85%)}
.clp-section-heading{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:56px}
.clp-section-heading__text{max-width:860px;display:flex;flex-direction:column;gap:14px}
.clp-section-heading__desc{color:var(--clp-text-2);font-size:17px}
.clp-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--clp-font-mono);font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--clp-gold);text-transform:uppercase}
.clp-eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;background:currentColor;flex-shrink:0}
.clp-eyebrow--line::before{width:32px;height:2px;border-radius:1px}
.clp-h1{font-family:var(--clp-font-display);font-weight:700;font-size:56px;line-height:1.14;letter-spacing:-.012em;color:var(--clp-pearl)}
.clp-h1--page{font-size:48px;line-height:1.18}
.clp-h2{font-family:var(--clp-font-display);font-weight:700;font-size:44px;line-height:1.2;letter-spacing:-.008em;color:var(--clp-pearl)}
.clp-h3{font-family:var(--clp-font-display);font-weight:600;font-size:20px;line-height:1.35;color:var(--clp-pearl)}
.clp-lead{font-size:18px;line-height:1.75;color:var(--clp-text-2);max-width:34em}
.clp-accent{color:var(--clp-gold)}
.clp-on-dark .clp-h1,.clp-on-dark .clp-h2,.clp-on-dark .clp-h3{color:#fff}
.clp-on-dark .clp-accent{color:var(--clp-gold-soft)}
.clp-on-dark .clp-eyebrow{color:var(--clp-gold-on-dark)}
.clp-on-dark .clp-lead,.clp-on-dark .clp-section-heading__desc{color:var(--clp-text-on-dark)}
.clp-page .clp-on-dark a:not(.clp-btn){color:var(--clp-gold-on-dark)}
.clp-page .clp-on-dark a:not(.clp-btn):hover{color:#fff}
@media (max-width:1199px){.clp-h1{font-size:48px}.clp-h1--page{font-size:42px}.clp-h2{font-size:38px}}
@media (max-width:959px){.clp-h1{font-size:40px}.clp-h1--page{font-size:36px}.clp-h2{font-size:32px}}
@media (max-width:599px){.clp-h1{font-size:32px;line-height:1.24}.clp-h1--page{font-size:30px}.clp-h2{font-size:27px}.clp-h3{font-size:18px}.clp-lead{font-size:16px}.clp-section-heading{margin-bottom:32px}.clp-section-heading__desc{font-size:15px}}

/* ---------- Buttons & links ---------- */
.clp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:var(--clp-r-btn);font-family:var(--clp-font-body);font-size:16px;font-weight:600;line-height:1.3;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color var(--clp-ease),color var(--clp-ease),border-color var(--clp-ease),transform var(--clp-ease),box-shadow var(--clp-ease)}
.clp-btn svg{flex-shrink:0}
.clp-page .clp-btn--primary{background:var(--clp-gold);color:var(--clp-on-gold);border-color:var(--clp-gold);box-shadow:0 12px 28px -12px rgba(201,166,117,.35),inset 0 1px 0 rgba(255,255,255,.14)}
.clp-page .clp-btn--primary:hover{background:var(--clp-gold-soft);border-color:var(--clp-gold-soft);color:var(--clp-on-gold);transform:translateY(-1px);box-shadow:0 16px 32px -12px rgba(201,166,117,.45)}
.clp-page .clp-btn--outline{background:var(--clp-card);color:var(--clp-pearl);border-color:var(--clp-silver)}
.clp-page .clp-btn--outline:hover{background:var(--clp-silver);color:var(--clp-on-gold)}
.clp-page .clp-btn--ghost{background:var(--clp-card);color:var(--clp-pearl);border-color:var(--clp-line-2)}
.clp-page .clp-btn--ghost:hover{border-color:var(--clp-silver);color:var(--clp-pearl)}
.clp-page .clp-btn--light{background:var(--clp-chrome);color:var(--clp-on-gold);border-color:var(--clp-silver);box-shadow:0 12px 28px -14px rgba(0,0,0,.6)}
.clp-page .clp-btn--light:hover{background:var(--clp-pearl);color:var(--clp-on-gold);transform:translateY(-1px)}
.clp-page .clp-btn--line-light{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.34)}
.clp-page .clp-btn--line-light:hover{background:var(--clp-pearl);color:var(--clp-on-gold);border-color:var(--clp-pearl)}
.clp-btn--lg{min-height:56px;padding:15px 28px;font-size:17px}
.clp-btn--sm{min-height:44px;padding:10px 16px;font-size:15px}
.clp-link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;min-height:44px}
.clp-link-arrow svg{transition:transform var(--clp-ease)}
.clp-link-arrow:hover svg{transform:translateX(3px)}
.clp-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-family:var(--clp-font-mono);font-size:12px;font-weight:600;letter-spacing:.06em;background:var(--clp-gold-tint);color:var(--clp-gold)}
.clp-pending{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:6px;border:1px dashed var(--clp-silver-2);font-family:var(--clp-font-mono);font-size:11px;letter-spacing:.04em;color:var(--clp-muted);background:var(--clp-card);white-space:nowrap}
.clp-card{background:var(--clp-card);border:1px solid var(--clp-line);border-radius:var(--clp-r-card)}

/* shared helper */
.clp-nowrap{white-space:nowrap}
.clp-page .clp-skip-link{position:absolute;z-index:100000;left:16px;top:-80px;padding:10px 16px;border-radius:0 0 10px 10px;background:var(--clp-gold);color:var(--clp-on-gold);font-weight:700;text-decoration:none}
.clp-page .clp-skip-link:focus{top:0}

/* ---------- Owner page template ---------- */
.clp-page-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--clp-ink);color:#fff;padding:32px 0 72px}
.clp-page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 70% 20%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 70% 20%,#000 20%,transparent 75%)}
.clp-page-hero .clp-breadcrumb ol{color:var(--clp-silver-2)}
.clp-page .clp-page-hero .clp-breadcrumb a{color:var(--clp-silver)!important}
.clp-page-hero .clp-breadcrumb [aria-current]{color:#fff}
.clp-page-hero .clp-summary{color:var(--clp-pearl)}
.clp-page .clp-page-hero .clp-summary a{color:var(--clp-gold)}
.clp-breadcrumb ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px;font-size:14px;color:var(--clp-text-3)}
.clp-breadcrumb li{display:inline-flex;gap:8px}
.clp-breadcrumb li+li::before{content:"/";color:var(--clp-silver-2)}
.clp-breadcrumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--clp-text-3)!important;text-decoration:none}
.clp-breadcrumb li{align-items:center}
.clp-breadcrumb a:hover{text-decoration:underline}
.clp-breadcrumb [aria-current]{color:var(--clp-pearl);font-weight:500}
.clp-page-hero__grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:48px;margin-top:32px;align-items:start}
.clp-page-hero__copy{display:flex;flex-direction:column;gap:20px}
.clp-page-hero__copy .clp-chip{align-self:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:var(--clp-gold-on-dark)}
.clp-summary{padding:24px;display:flex;flex-direction:column;gap:14px}
.clp-summary dl{display:flex;flex-direction:column;gap:14px;font-size:15px}
.clp-summary dt{font-size:13px;color:var(--clp-text-3)}
.clp-summary dd{font-weight:500}
.clp-shot{margin-top:44px;border-radius:26px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:10px;box-shadow:0 50px 90px -50px rgba(0,0,0,.8)}
.clp-shot img{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:18px}
.clp-doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px}
.clp-toc{align-self:start;position:sticky;top:calc(var(--clp-header-h) + 24px)}
.clp-toc details{border:0}
.clp-toc summary{font-family:var(--clp-font-mono);font-size:12px;letter-spacing:.08em;color:var(--clp-text-3);list-style:none;margin-bottom:8px;pointer-events:none}
.clp-toc summary::-webkit-details-marker{display:none}
.clp-toc ol{list-style:none;padding:0;display:flex;flex-direction:column}
.clp-toc a{display:flex;align-items:center;min-height:44px;padding:6px 14px;border-left:2px solid var(--clp-line);color:var(--clp-text-3)!important;text-decoration:none;font-size:15px;line-height:1.4}
.clp-toc a:hover,.clp-toc a.clp-is-current{border-left-color:var(--clp-gold);color:var(--clp-pearl)!important;font-weight:600}
.clp-prose{min-width:0;display:flex;flex-direction:column;gap:56px;max-width:760px}
.clp-prose section{display:flex;flex-direction:column;gap:20px}
.clp-prose h2{font-family:var(--clp-font-display);font-weight:700;font-size:32px;line-height:1.3;color:var(--clp-pearl)}
.clp-prose p{font-size:17px;line-height:1.85;color:var(--clp-text)}
.clp-feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;list-style:none;padding:0}
.clp-feature-grid li{padding:22px;display:flex;flex-direction:column;gap:6px}
.clp-feature-grid .clp-index-row__no{font-size:13px}
.clp-feature-grid b{font-family:var(--clp-font-display);font-weight:600;font-size:18px}
.clp-feature-grid span{font-size:15px;line-height:1.6;color:var(--clp-text-3)}
.clp-table-wrap{overflow-x:auto;border:1px solid var(--clp-line);border-radius:16px}
.clp-table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.6}
.clp-table th,.clp-table td{padding:14px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--clp-line)}
.clp-table thead th{border-top:0;background:var(--clp-surface);font-weight:600}
.clp-table--dark thead th{background:var(--clp-ink);color:#fff}
.clp-table td.clp-table__ph{color:var(--clp-muted)}
.clp-checklist{list-style:none;padding:0;border-top:1px solid var(--clp-line)}
.clp-checklist li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--clp-line);font-size:16px;line-height:1.6}
.clp-checklist li span{font-family:var(--clp-font-mono);font-weight:600;color:var(--clp-gold)}
.clp-qa{display:flex;flex-direction:column;gap:12px}
.clp-qa details{border:1px solid var(--clp-line);border-radius:16px;padding:0 22px;background:var(--clp-card)}
.clp-qa summary{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:64px;font-family:var(--clp-font-display);font-weight:600;font-size:18px;cursor:pointer;list-style:none}
.clp-qa summary::-webkit-details-marker{display:none}
.clp-qa summary::after{content:"+";color:var(--clp-gold);font-size:22px}
.clp-qa details[open] summary::after{content:"−"}
.clp-qa details p{padding-bottom:20px;font-size:16px;line-height:1.75;color:var(--clp-text-2)}
.clp-related__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;padding:0}
.clp-related a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 24px;text-decoration:none;color:var(--clp-pearl)!important;transition:border-color var(--clp-ease)}
.clp-related a:hover{border-color:var(--clp-silver)}
.clp-related small{display:block;font-family:var(--clp-font-mono);font-size:12px;color:var(--clp-gold)}
.clp-related b{font-family:var(--clp-font-display);font-weight:600;font-size:18px}
.clp-cta-band{position:relative;isolation:isolate;overflow:hidden;background:var(--clp-gold);color:var(--clp-on-gold);padding:64px 0}
.clp-cta-band::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000);mask-image:linear-gradient(90deg,transparent 30%,#000)}
.clp-cta-band__inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.clp-cta-band .clp-h2{color:#fff;font-size:30px}
.clp-cta-band p{color:var(--clp-text-on-dark);margin-top:8px}
.clp-cta-band__actions{display:flex;flex-wrap:wrap;gap:10px}
.clp-compare th[scope="col"]{min-width:200px}
.clp-compare .clp-is-featured{background:var(--clp-gold-tint)}
.clp-compare thead .clp-is-featured{background:var(--clp-gold);color:var(--clp-on-gold)}
.clp-compare ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.clp-compare li{display:flex;gap:8px}
.clp-compare li svg{flex-shrink:0;margin-top:4px;color:var(--clp-gold)}
.clp-compare__price{font-family:var(--clp-font-display);font-weight:700;font-size:22px}
.clp-footnote{font-size:13px;color:var(--clp-text-3);line-height:1.6}
@media (max-width:959px){.clp-page-hero__grid{grid-template-columns:minmax(0,1fr);gap:24px}.clp-doc{grid-template-columns:minmax(0,1fr);gap:24px}.clp-toc{position:static;border:1px solid var(--clp-line);border-radius:14px;padding:6px 16px}.clp-toc summary{pointer-events:auto;cursor:pointer;margin:0;min-height:44px;display:flex;align-items:center}.clp-related__grid{grid-template-columns:1fr}}
@media (max-width:599px){.clp-prose h2{font-size:26px}.clp-prose p{font-size:16px}.clp-cta-band__actions .clp-btn{width:100%}.clp-cta-band .clp-h2{font-size:24px}}

/* ---------- Post template ---------- */
.clp-article-head{padding:32px 0 0}
.clp-article-head__text{display:flex;flex-direction:column;gap:18px;max-width:860px;margin-top:28px}
.clp-article-head .clp-h1{font-size:44px;line-height:1.25}
.clp-article-cover{margin-top:28px}
.clp-article-cover img{width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:var(--clp-r-panel)}
.clp-article-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(0,300px);justify-content:space-between;gap:56px;padding:56px 0 var(--clp-section-y)}
.clp-article{min-width:0;display:flex;flex-direction:column;gap:28px;font-size:18px;line-height:1.9;color:var(--clp-text)}
.clp-article h2{font-family:var(--clp-font-display);font-weight:700;font-size:30px;line-height:1.35;color:var(--clp-pearl);margin-top:16px}
.clp-article__first{font-size:19px}
.clp-keybox{background:var(--clp-surface);border-radius:var(--clp-r-card);padding:26px 28px;display:flex;flex-direction:column;gap:12px}
.clp-keybox ul{padding-left:20px;font-size:16px;line-height:1.75;color:var(--clp-text)}
.clp-quote{font-family:var(--clp-font-display);font-weight:600;font-size:26px;line-height:1.5;color:var(--clp-gold);margin:8px 0}
.clp-author{display:flex;gap:16px;align-items:flex-start;padding-top:28px;border-top:1px solid var(--clp-line);font-size:15px;line-height:1.7}
.clp-avatar{width:52px;height:52px;flex-shrink:0;border-radius:50%;background:var(--clp-ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--clp-font-display);font-weight:700;font-size:16px}
.clp-avatar--sm{width:32px;height:32px;font-size:12px}
.clp-rail{display:flex;flex-direction:column;gap:16px;align-self:start;position:sticky;top:calc(var(--clp-header-h) + 24px)}
.clp-rail__cta{background:var(--clp-ink);color:#fff;border-radius:var(--clp-r-card);padding:24px;display:flex;flex-direction:column;gap:14px}
.clp-rail__cta p{font-size:14px;line-height:1.7;color:var(--clp-text-on-dark)}
.clp-rail .clp-toc{align-self:stretch;position:static;border:1px solid var(--clp-line);border-radius:var(--clp-r-card);padding:20px}
@media (max-width:959px){.clp-article-layout{grid-template-columns:minmax(0,1fr);gap:32px}.clp-rail{position:static;order:-1}.clp-rail__cta{display:none}.clp-article-head .clp-h1{font-size:34px}}
@media (max-width:599px){.clp-article-head .clp-h1{font-size:28px}.clp-article{font-size:17px}.clp-article__first{font-size:17px}.clp-article h2{font-size:24px}.clp-quote{font-size:21px}}
.clp-article-end-cta{display:none}
@media (max-width:959px){.clp-article-end-cta{display:flex}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .clp-page *,.clp-page *::before,.clp-page *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .clp-portfolio-card:hover,.clp-index-row:hover svg,.clp-link-arrow:hover svg,.clp-process__step:hover,.clp-faq-card:hover,.clp-game-card:hover{transform:none}
}

/* ---------- Theme fallbacks (search / 404 / archive / breadcrumb) ---------- */
.clp-shell{width:min(880px,100% - 40px);margin:0 auto;padding:56px 0 72px}
.clp-shell h1{margin:0 0 16px;font-family:var(--clp-font-display);font-size:clamp(28px,4vw,40px);font-weight:700;line-height:1.25}
.clp-shell a{color:var(--clp-gold)}
.clp-shell a:hover{color:var(--clp-gold-dark)}

/* =========================================================
   GLOBAL SINGLE POST BREADCRUMB
   Site-level navigation only. Article components remain per-content CSS.
   ========================================================= */

.clp-global-breadcrumb {
  width: min(1110px, calc(100% - 40px));
  margin: 26px auto 22px;
  color: var(--clp-text-3);
  font-size: 13px;
  line-height: 1.6;
}

.clp-global-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clp-global-breadcrumb li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.clp-global-breadcrumb li:not(:last-child)::after {
  content: "›";
  margin-left: 6px;
  color: var(--clp-muted);
}

.clp-global-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.clp-global-breadcrumb a:hover {
  color: var(--clp-gold);
}

.clp-global-breadcrumb [aria-current="page"] {
  overflow: hidden;
  color: var(--clp-pearl);
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .clp-global-breadcrumb {
    width: min(100% - 28px, 1110px);
    margin-top: 18px;
    margin-bottom: 18px;
    font-size: 12px;
  }
}


/* =========================================================
   FALLBACK ARCHIVE / BLOG
   ใช้เฉพาะ index.php เมื่อไม่มี archive controller เฉพาะ
   ไม่ render post_content เต็มก้อน เพื่อไม่ดึง HTML/CSS ของ Single Post มาชนกัน
   ========================================================= */

.clp-archive-fallback {
  width: min(1040px, 100% - 40px);
}

.clp-archive-fallback__header {
  margin-bottom: 28px;
}

.clp-archive-fallback__description {
  max-width: 760px;
  color: var(--clp-muted);
}

.clp-archive-fallback__list {
  display: grid;
  gap: 18px;
}

.clp-archive-fallback__item {
  padding: 24px;
  border: 1px solid #e6e6e3;
  border-radius: 18px;
  background:var(--clp-card);
}

.clp-archive-fallback__item h2 {
  margin: 0 0 10px;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.35;
}

.clp-archive-fallback__item h2 a {
  color:var(--clp-pearl);
  text-decoration: none;
}

.clp-archive-fallback__item h2 a:hover {
  color: var(--clp-gold);
}

.clp-archive-fallback__item p {
  margin: 0;
  color: var(--clp-text-3);
}

.clp-archive-fallback .navigation.pagination {
  margin-top: 30px;
}


/* Control plugin safety fallback — visible only when clp_site_header/footer have no owner. */
.clp-base-fallback-header,
.clp-base-fallback-footer {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0;
  font: 600 14px/1.5 var(--clp-font-body);
}
.clp-base-fallback-header a { color:var(--clp-pearl); text-decoration: none; }
.clp-base-fallback-footer { border-top: 1px solid #ececeb; color: var(--clp-muted); }

/* ---------- WordPress integration (breadcrumb / cover / auto frames) ---------- */
.clp-page .clp-global-breadcrumb{width:auto;max-width:calc(var(--clp-container) + var(--clp-gutter)*2);margin:0 auto;padding:20px var(--clp-gutter) 0;color:var(--clp-text-3);font-size:14px}
.clp-page .clp-global-breadcrumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--clp-text-3)}
.clp-page .clp-global-breadcrumb a:hover{color:var(--clp-gold)}
.clp-page .clp-global-breadcrumb [aria-current="page"]{color:var(--clp-pearl);font-weight:500}
.clp-page .clp-article-cover{margin:0 auto 28px}
.clp-page .clp-article--auto .clp-article-cover{width:100%;margin:0;border:0;border-radius:var(--clp-r-panel);box-shadow:var(--clp-shadow-2,0 24px 48px -28px rgba(0,0,0,.35))}
.clp-page .clp-article--auto .clp-article-cover img{border-radius:0}
.clp-article-head--auto{padding-top:8px}
.clp-article-head--auto .clp-article-head__text{margin-top:8px}
.clp-post-meta{font-size:14px;color:var(--clp-text-3)}
.clp-article-head--auto + .clp-container .clp-article-layout{padding-top:40px}
@media (max-width:959px){.clp-rail--auto{display:none}.clp-article-head--auto + .clp-container .clp-article-layout{padding-top:28px}}
.clp-article--auto h3{font-family:var(--clp-font-display);font-weight:600;font-size:22px;line-height:1.4;color:var(--clp-pearl)}
.clp-article--auto ul,.clp-article--auto ol,.clp-prose ul,.clp-prose ol{padding-left:22px}
.clp-article--auto table,.clp-prose table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.clp-article--auto th,.clp-article--auto td,.clp-prose th,.clp-prose td{border:1px solid var(--clp-line);padding:10px 14px;text-align:left}
.clp-article--auto th,.clp-prose th{background:var(--clp-surface);font-weight:600;color:var(--clp-pearl)}
.clp-prose{display:flex;flex-direction:column;gap:18px;font-size:17px;line-height:1.85}
.clp-page .clp-article-head .clp-article-cover{width:100%;margin:28px 0 0;border:0;box-shadow:none;background:none;border-radius:var(--clp-r-panel)}
.clp-page h1,.clp-page h2,.clp-page h3,.clp-global-breadcrumb li,.clp-post-feature__title,.clp-post-compact__title,.clp-hub__card-title{overflow-wrap:anywhere}
.clp-main:focus{outline:0}
.clp-shell{overflow-wrap:anywhere}
.clp-search__form{margin:8px 0 20px}
.clp-search__form .search-form{display:flex;gap:8px;flex-wrap:wrap}
.clp-search__form .search-field{flex:1;min-width:0;min-height:48px;padding:0 14px;border:1px solid var(--clp-line-2,var(--clp-silver-2));border-radius:12px;font:inherit}
.clp-search__form .search-submit{min-height:48px;padding:0 20px;border:0;border-radius:12px;background:var(--clp-gold);color:var(--clp-on-gold);font:inherit;font-weight:700;cursor:pointer}
.clp-search__count{color:var(--clp-text-3);font-size:14px;margin-bottom:12px}
.clp-search__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.clp-search__item{padding:18px 20px;border:1px solid var(--clp-line);border-radius:var(--clp-r-card);display:flex;flex-direction:column;gap:6px}
.clp-search__type{font-family:var(--clp-font-mono);font-size:12px;letter-spacing:.06em;color:var(--clp-gold)}
.clp-page .clp-search__title{font-family:var(--clp-font-display);font-weight:600;font-size:19px;line-height:1.45;color:var(--clp-pearl);text-decoration:none}
.clp-page .clp-search__title:hover{color:var(--clp-gold)}
.clp-search__item p{font-size:15px;color:var(--clp-text-2)}
.clp-shell .navigation.pagination{margin-top:24px}
.clp-shell .nav-links{display:flex;flex-wrap:wrap;gap:8px}
.clp-page .clp-shell .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--clp-line);border-radius:12px;text-decoration:none;color:var(--clp-pearl)}
.clp-shell .page-numbers.current{background:var(--clp-gold);border-color:var(--clp-gold);color:var(--clp-on-gold)}
.clp-page-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:24px 0;font-weight:600}
.clp-page .clp-page-links a,.clp-page-links .post-page-numbers.current{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--clp-line);border-radius:12px;text-decoration:none;color:var(--clp-pearl)}
.clp-page-links .post-page-numbers.current{background:var(--clp-gold);border-color:var(--clp-gold);color:var(--clp-on-gold)}
.clp-prose h2{font-family:var(--clp-font-display);font-weight:700;font-size:26px;line-height:1.35;color:var(--clp-pearl);margin-top:12px}
/* =========================================================
   v1.0.11 PAGE HERO — กึ่งกลางแบบหน้าแรก + ภาพพื้นหลังแบรนด์ (ไฟล์เดียวกับหน้าแรก)
========================================================= */
.clp-page-hero{background-color:#05070A;background-image:radial-gradient(ellipse 60% 70% at 50% -10%,rgba(200,205,211,.16) 0%,rgba(200,205,211,0) 70%),radial-gradient(ellipse 35% 45% at 90% 100%,rgba(201,166,117,.10) 0%,rgba(201,166,117,0) 70%),linear-gradient(180deg,#0B0F14 0%,#05070A 100%);background-size:cover;background-position:center 35%;background-repeat:no-repeat;padding:36px 0 96px}
@media (max-width:599px){.clp-page-hero{padding:24px 0 72px}}
.clp-page-hero::before{display:none}
.clp-page-hero--center .clp-container{display:flex;flex-direction:column;align-items:center;text-align:center}
.clp-page-hero--center .clp-breadcrumb ol{justify-content:center}
.clp-page-hero--center .clp-page-hero__copy{align-items:center;max-width:880px;margin-top:28px;gap:20px}
.clp-page-hero--center .clp-page-hero__copy .clp-chip{align-self:center}
.clp-page-hero--center .clp-lead{max-width:780px}
.clp-page-hero--center .clp-page-hero__ctas{justify-content:center}
.clp-page-hero .clp-h1,.clp-page-hero .clp-lead{text-shadow:0 2px 16px rgba(0,0,0,.55)}
/* หน้าที่ยังไม่ได้นำเข้า HTML ใหม่: ซ่อนกล่องสรุปเดิม */
.clp-page-hero .clp-summary{display:none}
.clp-page-hero__grid{grid-template-columns:minmax(0,1fr)}
@media (max-width:599px){.clp-page-hero--center .clp-page-hero__copy{margin-top:16px;gap:16px}.clp-page-hero--center .clp-page-hero__ctas{flex-direction:column;width:100%}.clp-page-hero--center .clp-page-hero__ctas .clp-btn{width:100%;justify-content:center}}

/* รูปหน้าปก (Featured Image) ใต้ Hero: เกยขอบล่างของ Hero เหมือนการ์ดตัวเลขหน้าแรก */
.clp-page-hero:has(+ .clp-page-cover){padding-bottom:136px}
.clp-page-cover{position:relative;z-index:2;margin-top:-88px}
.clp-page-cover__fig{margin:0;border-radius:24px;overflow:hidden;background:var(--clp-ink);box-shadow:0 30px 60px -28px rgba(0,0,0,.5)}
.clp-page-cover__img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover}
@media (max-width:599px){.clp-page-hero:has(+ .clp-page-cover){padding-bottom:92px}.clp-page-cover{margin-top:-56px}.clp-page-cover__fig{border-radius:16px}}
/* v1.0.12 หน้ารวมบทความ /article/: Hero แบบเดียวกับหน้าแรกและหน้าย่อย */
.clp-page .clp-hub-hero{background-color:#05070A;background-image:radial-gradient(ellipse 60% 70% at 50% -10%,rgba(200,205,211,.16) 0%,rgba(200,205,211,0) 70%),radial-gradient(ellipse 35% 45% at 90% 100%,rgba(201,166,117,.10) 0%,rgba(201,166,117,0) 70%),linear-gradient(180deg,#0B0F14 0%,#05070A 100%);background-size:cover;background-position:center 35%;background-repeat:no-repeat;padding:72px 0 136px}
@media (max-width:599px){.clp-page .clp-hub-hero{padding:44px 0 112px}}
.clp-page .clp-hub-hero::before,.clp-page .clp-hub-hero::after{display:none}
.clp-page .clp-hub-hero .clp-hub-hero__inner{align-items:center;text-align:center}
.clp-page .clp-hub-hero p{margin:0 auto;max-width:780px}
.clp-page .clp-hub-hero h1,.clp-page .clp-hub-hero p{text-shadow:0 2px 16px rgba(0,0,0,.55)}
.clp-page .clp-hub .clp-hub__meta{justify-content:center}