/*
 * Easyweb 2026 — ส่วนที่ใช้ทุกหน้า: ตัวแปรสี ฟอนต์ ปุ่ม ไอคอน ส่วนหัว ส่วนท้าย
 * ทุก class ขึ้นต้นด้วย tsl- เพื่อไม่ชนกับ bootstrap / w3.css / CSS ของธีมแม่
 */
:root{
  --tsl-ink:#0c1f3d;--tsl-text:#27364d;--tsl-muted:#5a6b82;--tsl-line:#dbe4ef;--tsl-soft:#f2f6fc;
  --tsl-brand:#0b63ce;--tsl-brand-d:#083f8c;--tsl-brand-soft:#e6f0fd;
  --tsl-cta:#16a34a;--tsl-cta-d:#128a3e;--tsl-ok:#16a34a;
  --tsl-hero:linear-gradient(135deg,#072f6b 0%,#0b56b8 55%,#1787f0 100%);
  --tsl-f:'Sarabun',system-ui,-apple-system,'Segoe UI',sans-serif;
  --tsl-fh:'Prompt','Sarabun',system-ui,sans-serif;
}

/* ฟอนต์ทั้งเว็บ (แทน Mitr ของธีมแม่) */
body.tsl{font-family:var(--tsl-f)}
body.tsl h1,body.tsl h2,body.tsl h3,body.tsl h4,body.tsl h5,body.tsl h6{font-family:var(--tsl-fh)}

.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:#fff;clip:auto!important;clip-path:none;color:var(--tsl-ink);display:block;font-size:15px;height:auto;left:8px;top:8px;padding:12px 18px;width:auto;z-index:100000;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.2)}

.tsl-hd,.tsl-hd *,.tsl-ft,.tsl-ft *,.tsl-main,.tsl-main *{box-sizing:border-box}
.tsl-wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.tsl-i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block;vertical-align:middle}

/* ปุ่ม */
.tsl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:10px;font:600 16px/1 var(--tsl-fh);border:1px solid transparent;text-decoration:none;transition:.18s;cursor:pointer;white-space:nowrap}
.tsl-btn:hover,.tsl-btn:focus{text-decoration:none}
.tsl-btn.tsl-btn-p,.tsl-btn.tsl-btn-p:visited{background:var(--tsl-cta);color:#fff;box-shadow:0 1px 2px rgba(18,138,62,.35),inset 0 1px 0 rgba(255,255,255,.18)}
.tsl-btn.tsl-btn-p:hover,.tsl-btn.tsl-btn-p:focus{background:var(--tsl-cta-d);color:#fff;transform:translateY(-1px)}
.tsl-btn.tsl-btn-s,.tsl-btn.tsl-btn-s:visited{background:#fff;color:var(--tsl-ink);border-color:#cfd9e6;box-shadow:0 1px 2px rgba(12,31,61,.05)}
.tsl-btn.tsl-btn-s:hover,.tsl-btn.tsl-btn-s:focus{border-color:#a9b8cc;color:var(--tsl-ink)}
.tsl-btn.tsl-btn-g,.tsl-btn.tsl-btn-g:visited{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.tsl-btn.tsl-btn-g:hover,.tsl-btn.tsl-btn-g:focus{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.tsl-btn-sm{height:40px;padding:0 16px;font-size:15px}
.tsl-btn .tsl-i{width:18px;height:18px}

/* ส่วนหัว */
.tsl-hd{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s;font-family:var(--tsl-f);font-size:16px;line-height:1.5;color:var(--tsl-text)}
.tsl-hd.tsl-stuck{border-bottom-color:var(--tsl-line);box-shadow:0 6px 20px -14px rgba(12,31,61,.35)}
.admin-bar .tsl-hd{top:32px}
.tsl-hd-in{display:flex;align-items:center;gap:28px;height:72px}
.tsl-brand,.tsl-brand:visited{display:flex;align-items:center;gap:12px;color:var(--tsl-ink);text-decoration:none;margin-right:auto;min-width:0}
.tsl-brand:hover,.tsl-brand:focus{color:var(--tsl-ink);text-decoration:none}
.tsl-brand .tsl-logo{width:40px;height:40px;border-radius:9px;flex:none;display:block;max-width:none}
.tsl-brand b{display:block;font-family:var(--tsl-fh);font-weight:600;font-size:16px;line-height:1.3}
.tsl-brand small{display:block;font-size:11.5px;letter-spacing:.18em;color:var(--tsl-muted);line-height:1.4}
.tsl-nav ul{display:flex;align-items:center;gap:30px;margin:0;padding:0;list-style:none}
.tsl-nav li{margin:0;padding:0;list-style:none}
.tsl-nav a,.tsl-nav a:visited{font-family:var(--tsl-fh);color:var(--tsl-text);font-weight:500;font-size:15.5px;text-decoration:none;transition:color .15s;display:block;padding:6px 0}
.tsl-nav a:hover,.tsl-nav a:focus,.tsl-nav .current-menu-item>a,.tsl-nav .current_page_item>a,.tsl-nav .current-menu-ancestor>a{color:var(--tsl-brand);text-decoration:none}
.tsl-hd-r{display:flex;align-items:center;gap:18px}
.tsl-nav-t{display:none;background:none;border:0;padding:8px;margin:0;color:var(--tsl-ink);cursor:pointer;line-height:0}

/* ส่วนท้าย */
.tsl-ft{background:#0c1f3d;padding:60px 0 0;font-family:var(--tsl-f);font-size:15.5px;line-height:1.7;color:#c9d6e8;clear:both}
.tsl-ft-in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;padding-bottom:44px}
.tsl-ft p{margin:14px 0 0;padding:0;color:#c9d6e8}
.tsl-ft .tsl-brand,.tsl-ft .tsl-brand:visited,.tsl-ft .tsl-brand:hover{color:#fff}
.tsl-ft .tsl-brand small{color:#9fb1cc}
.tsl-ft .tsl-ft-h{margin:0 0 14px;padding:0;font-family:var(--tsl-fh);font-size:14px;font-weight:600;line-height:1.5;color:#fff;letter-spacing:.03em}
.tsl-ft-in div>a:not(.tsl-brand),.tsl-ft-in div>a:not(.tsl-brand):visited{display:block;color:#c9d6e8;padding:4px 0;text-decoration:none}
.tsl-ft-in div>a:not(.tsl-brand):hover{color:#fff;text-decoration:none}
.tsl-ft-b{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;padding-bottom:24px;font-size:14px;color:#9fb1cc}

@media(max-width:1020px){
  .tsl-nav{display:none;position:absolute;left:0;right:0;top:72px;background:#fff;border-bottom:1px solid var(--tsl-line);padding:8px 28px 18px;box-shadow:0 24px 40px -20px rgba(12,31,61,.25)}
  .tsl-nav.tsl-open{display:block}
  .tsl-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .tsl-nav a{padding:13px 0;border-bottom:1px solid var(--tsl-line)}
  .tsl-nav-t{display:block}
}
@media(max-width:782px){.admin-bar .tsl-hd{top:46px}}
@media(max-width:640px){
  .tsl-wrap{padding:0 20px}
  .tsl-nav{padding-left:20px;padding-right:20px}
  .tsl-brand b{font-size:14.5px}
  .tsl-hd-r{gap:6px}
  .tsl-hd-r .tsl-btn{display:none}
  .tsl-ft-in{grid-template-columns:1fr;gap:30px}
}
@media(max-width:600px){.admin-bar .tsl-hd{top:0}}