/* =====================================================================
   กองระบาดวิทยา — ระบบหลักสูตรอบรมบุคลากรเผชิญเหตุ
   Shared design system  (CSS variables + components)
   Prototype only — front-end shell, no backend
   ===================================================================== */

:root {
  /* ---- Palette (อิง interfetpthailand.net — navy + orange) ---- */
  --c-navy:      #14365b;   /* deep institutional navy (headings, nav, footer, primary btn) */
  --c-navy-d:    #0e2746;
  --c-primary:   #1c4e80;   /* supporting blue (links, bars, focus) */
  --c-primary-d: #163e66;
  --c-teal:      #1c6e9c;   /* secondary blue */
  --c-teal-l:    #4a90c2;
  --c-mint:      #eaf1f8;   /* light blue tint */
  --c-accent:    #e8983a;   /* signature orange (CTA, icons) */
  --c-accent-d:  #d6852a;
  --c-red:       #d64545;
  --c-green:     #2f9e44;
  --c-amber:     #f08c00;

  --c-bg:        #f3f6fa;
  --c-surface:   #ffffff;
  --c-line:      #e2e8ef;
  --c-ink:       #1f2d3d;
  --c-ink-soft:  #5b6b7b;
  --c-ink-mute:  #93a1b0;

  --radius:   14px;
  --radius-s: 9px;
  --shadow:   0 1px 3px rgba(16,40,64,.06), 0 8px 24px rgba(16,40,64,.06);
  --shadow-h: 0 4px 12px rgba(16,40,64,.10), 0 16px 40px rgba(16,40,64,.10);

  --font-head: 'Prompt', 'Anuphan', sans-serif;   /* ตัวไม่มีหัว */
  --font-body: 'Anuphan', 'Prompt', sans-serif;   /* ตัวไม่มีหัว */
  --sidebar-w: 252px;
  --topbar-h:  64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--c-ink);
  background: var(--c-bg);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.3; margin: 0 0 .4em; color: var(--c-navy); }
h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.18rem; }
p { margin: 0 0 1em; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
small { font-size: .82rem; }

/* ---------- Layout helpers ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 22px; }
.section   { padding: 64px 0; }
.grid { display: grid; gap: 22px; }
.g-2 { grid-template-columns: repeat(2,1fr); }
.g-3 { grid-template-columns: repeat(3,1fr); }
.g-4 { grid-template-columns: repeat(4,1fr); }
.flex { display: flex; gap: 14px; }
.between { justify-content: space-between; align-items: center; }
.center  { align-items: center; }
.wrap { flex-wrap: wrap; }
.muted { color: var(--c-ink-soft); }
.mute2 { color: var(--c-ink-mute); }
.tac { text-align: center; }
.mt0{margin-top:0}.mb0{margin-bottom:0}.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.eyebrow { color: var(--c-teal); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 500; font-size: .95rem;
  padding: 11px 20px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: .18s; text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--c-navy); color: #fff; }
.btn-primary:hover { background: var(--c-navy-d); color:#fff; }
.btn-teal { background: var(--c-teal); color: #fff; }
.btn-accent { background: var(--c-accent); color: #fff; }
.btn-accent:hover { background: var(--c-accent-d); color:#fff; }
.btn-ghost { background: #fff; color: var(--c-navy); border-color: var(--c-line); }
.btn-ghost:hover { border-color: var(--c-navy); }
.btn-sm { padding: 7px 14px; font-size: .85rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Cards ---------- */
.card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 22px; }
.card-link { transition: .2s; display:block; color:inherit; }
.card-link:hover { box-shadow: var(--shadow-h); transform: translateY(-3px); text-decoration:none; }

/* ---------- Badges / pills ---------- */
.badge { display:inline-flex; align-items:center; gap:5px; padding: 3px 11px; border-radius: 999px; font-size: .76rem; font-weight: 600; font-family: var(--font-head); }
.b-blue  { background:#e3f0f7; color:#14668c; }
.b-teal  { background:#dcf5f1; color:#0d7a72; }
.b-green { background:#e3f7e8; color:#1d7a32; }
.b-amber { background:#fff1d6; color:#9a5b00; }
.b-red   { background:#fde5e5; color:#b32424; }
.b-gray  { background:#eef2f6; color:#5b6b7b; }
.dot { width:8px;height:8px;border-radius:50%;display:inline-block; }

/* ---------- Tables ---------- */
.table { width:100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--c-line); }
.table th { font-family: var(--font-head); font-weight:600; color: var(--c-ink-soft); font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; background:#fafcfd; }
.table tbody tr:hover { background: #f7fafc; }
.table-wrap { overflow-x:auto; border-radius: var(--radius); border:1px solid var(--c-line); }

/* ---------- Forms ---------- */
label.fl { display:block; font-family:var(--font-head); font-weight:500; font-size:.88rem; margin-bottom:6px; color:var(--c-ink); }
.input, select.input, textarea.input {
  width:100%; padding:11px 13px; border:1.5px solid var(--c-line); border-radius:var(--radius-s);
  font-family:var(--font-body); font-size:.95rem; background:#fff; color:var(--c-ink); transition:.15s;
}
.input:focus { outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(20,102,140,.12); }
.field { margin-bottom:16px; }
.hint { font-size:.8rem; color:var(--c-ink-mute); margin-top:5px; }

/* =====================================================================
   PUBLIC SITE  — top navigation + hero + footer
   ===================================================================== */
/* wrappers injected by site.js must not form a short containing block,
   otherwise the sticky nav inside them can't stick (sticky-in-short-container bug) */
#sitenav, #sitefoot { display: contents; }
.site-nav {
  position: sticky; top:0; z-index: 50; background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-line);
}
.site-nav .container { display:flex; align-items:center; justify-content:space-between; height: var(--topbar-h); }
.brand { display:flex; align-items:center; gap:11px; font-family:var(--font-head); font-weight:600; color:var(--c-navy); }
.brand:hover{text-decoration:none}
.brand .logo { width:40px;height:40px;border-radius:10px; background:linear-gradient(135deg,var(--c-primary),var(--c-teal)); color:#fff; display:grid;place-items:center; font-size:1.1rem; font-weight:700; }
.brand b { font-size:1.02rem; line-height:1.1; } .brand span { font-size:.72rem; color:var(--c-ink-soft); font-weight:400; }
.nav-links { display:flex; gap:6px; align-items:center; }
.nav-links a { font-family:var(--font-head); font-size:.92rem; color:var(--c-ink); padding:8px 13px; border-radius:8px; }
.nav-links a:hover { background:var(--c-mint); text-decoration:none; }
.nav-links a.active { color:var(--c-primary); font-weight:600; }

.hero { background: linear-gradient(135deg, #0e2746 0%, #14365b 55%, #1c4e80 120%); color:#fff; position:relative; overflow:hidden; }
.hero::after { content:''; position:absolute; right:-120px; top:-120px; width:420px;height:420px; border-radius:50%; background:rgba(255,255,255,.06); }
.hero::before { content:''; position:absolute; left:-80px; bottom:-140px; width:340px;height:340px; border-radius:50%; background:rgba(87,197,182,.18); }
.hero .container { position:relative; z-index:2; padding: 78px 22px; }
.hero h1 { color:#fff; font-size:2.7rem; max-width:760px; }
.hero p { color:rgba(255,255,255,.9); font-size:1.12rem; max-width:620px; }
.hero .badge { background:rgba(255,255,255,.16); color:#fff; }

.footer { background: var(--c-navy); color:rgba(255,255,255,.82); padding: 46px 0 26px; margin-top:40px; }
.footer h4 { color:#fff; font-size:1rem; }
.footer a { color:rgba(255,255,255,.8); }
.footer a:hover{color:#fff}
.footer .bottom { border-top:1px solid rgba(255,255,255,.14); margin-top:28px; padding-top:18px; font-size:.85rem; color:rgba(255,255,255,.6); }

/* course card accent stripe */
.course-card { overflow:hidden; }
.course-card .top { height:7px; }
.course-card .ico { width:54px;height:54px;border-radius:13px; display:grid;place-items:center; font-size:1.5rem; color:#fff; margin-bottom:14px; }

/* stat */
.stat { text-align:center; padding:18px; }
.stat .num { font-family:var(--font-head); font-weight:700; font-size:2rem; color:var(--c-primary); }
.stat .lbl { color:var(--c-ink-soft); font-size:.86rem; }

/* =====================================================================
   ADMIN / LMS  app shell  — sidebar + topbar
   ===================================================================== */
.app { display:flex; min-height:100vh; }
.sidebar {
  width: var(--sidebar-w); background: var(--c-navy); color:#cdd8e4; flex-shrink:0;
  position:fixed; top:0; bottom:0; left:0; overflow-y:auto; padding:18px 14px;
}
.sidebar .brand { color:#fff; margin:6px 8px 22px; }
.sidebar .brand span{ color:rgba(255,255,255,.6); }
.side-group { margin: 16px 0 6px; padding:0 12px; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.45); font-family:var(--font-head); }
.side-link { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px; color:#cdd8e4; font-family:var(--font-head); font-size:.92rem; margin-bottom:2px; cursor:pointer; }
.side-link:hover { background:rgba(255,255,255,.07); color:#fff; text-decoration:none; }
.side-link.active { background:linear-gradient(135deg,var(--c-primary),var(--c-teal)); color:#fff; }
.side-link .i { width:20px; text-align:center; }

.main { margin-left: var(--sidebar-w); flex:1; min-width:0; }
.topbar { height:var(--topbar-h); background:#fff; border-bottom:1px solid var(--c-line); display:flex; align-items:center; justify-content:space-between; padding:0 26px; position:sticky; top:0; z-index:20; }
.topbar .search { flex:1; max-width:380px; }
.topbar .search input { width:100%; padding:9px 14px 9px 38px; border:1.5px solid var(--c-line); border-radius:999px; background:#f6f9fb url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2393a1b0' stroke-width='2'><circle cx='7' cy='7' r='5'/><path d='M11 11l4 4'/></svg>") 13px center no-repeat; }
.topbar .user { display:flex; align-items:center; gap:10px; }
.avatar { width:36px;height:36px;border-radius:50%; background:linear-gradient(135deg,var(--c-teal),var(--c-primary)); color:#fff; display:grid;place-items:center; font-weight:600; font-family:var(--font-head); }
.content { padding: 26px; }
.page-head { margin-bottom:22px; }
.page-head h1 { font-size:1.55rem; margin-bottom:2px; }

/* impersonation banner */
.imp-banner { background:#fff4d6; border:1px solid #f6d265; color:#7a5200; padding:9px 16px; border-radius:10px; font-size:.86rem; display:flex; align-items:center; gap:8px; margin-bottom:18px; }

/* KPI cards */
.kpi { padding:20px; display:flex; flex-direction:column; gap:6px; }
.kpi .k-top { display:flex; align-items:center; justify-content:space-between; }
.kpi .k-ico { width:42px;height:42px;border-radius:11px; display:grid;place-items:center; font-size:1.15rem; }
.kpi .k-num { font-family:var(--font-head); font-weight:700; font-size:1.9rem; color:var(--c-navy); }
.kpi .k-lbl { color:var(--c-ink-soft); font-size:.88rem; }

/* timeline (student) */
.timeline { position:relative; padding-left: 30px; }
.timeline::before { content:''; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--c-line); }
.tl-item { position:relative; padding-bottom:22px; }
.tl-item::before { content:''; position:absolute; left:-26px; top:3px; width:18px;height:18px;border-radius:50%; background:#fff; border:3px solid var(--c-line); }
.tl-item.done::before { background:var(--c-green); border-color:var(--c-green); }
.tl-item.active::before { background:var(--c-primary); border-color:var(--c-primary); box-shadow:0 0 0 4px rgba(20,102,140,.18); }
.tl-item h4 { margin:0 0 2px; font-size:1rem; }

/* progress */
.bar { height:8px; background:var(--c-line); border-radius:999px; overflow:hidden; }
.bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--c-teal),var(--c-primary)); border-radius:999px; }

/* tabs */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--c-line); margin-bottom:20px; flex-wrap:wrap; }
.tab { padding:10px 16px; font-family:var(--font-head); font-size:.92rem; color:var(--c-ink-soft); cursor:pointer; border-bottom:2.5px solid transparent; }
.tab:hover{ color:var(--c-primary); }
.tab.active { color:var(--c-primary); border-color:var(--c-primary); font-weight:600; }

/* simple map (FEMT/FETP dashboard) */
.thmap { position:relative; background:var(--c-mint); border-radius:var(--radius); height:380px; overflow:hidden; border:1px solid var(--c-line); }
.pin { position:absolute; transform:translate(-50%,-100%); cursor:pointer; }
.pin .p-dot { width:16px;height:16px;border-radius:50% 50% 50% 0; background:var(--c-red); transform:rotate(-45deg); border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,.25); }
.pin:hover .p-tip { opacity:1; transform:translate(-50%,-6px); }
.pin .p-tip { position:absolute; bottom:140%; left:50%; transform:translateX(-50%); background:var(--c-navy); color:#fff; padding:5px 10px; border-radius:7px; font-size:.78rem; white-space:nowrap; opacity:0; pointer-events:none; transition:.15s; }

/* radar legend bar (exam result) */
.skill-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.skill-row .nm { width:160px; font-size:.9rem; }
.skill-row .bar { flex:1; }
.skill-row .pc { width:46px; text-align:right; font-family:var(--font-head); font-weight:600; }

/* modal */
.modal-bg { position:fixed; inset:0; background:rgba(13,40,64,.5); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-bg.open { display:flex; }
.modal { background:#fff; border-radius:var(--radius); max-width:560px; width:100%; max-height:90vh; overflow:auto; }
.modal-head { padding:18px 22px; border-bottom:1px solid var(--c-line); display:flex; justify-content:space-between; align-items:center; }
.modal-body { padding:22px; }
.modal-foot { padding:16px 22px; border-top:1px solid var(--c-line); display:flex; justify-content:flex-end; gap:10px; }
.x-close { cursor:pointer; color:var(--c-ink-mute); font-size:1.4rem; line-height:1; background:none;border:none; }

/* certificate */
.cert {
  background:#fff; border:14px double var(--c-teal); border-radius:8px;
  padding:46px 54px; max-width:900px; margin:0 auto; text-align:center; position:relative;
  box-shadow:var(--shadow);
}
.cert .seal { width:96px;height:96px;border-radius:50%; border:3px solid var(--c-accent); display:grid;place-items:center; margin:0 auto 14px; color:var(--c-primary); font-family:var(--font-head); font-weight:700; font-size:.7rem; }
.cert h2 { font-size:1.9rem; color:var(--c-navy); }
.cert .name { font-family:var(--font-head); font-size:2.1rem; color:var(--c-primary); margin:14px 0; border-bottom:2px dotted var(--c-line); display:inline-block; padding:0 30px 6px; }
.cert .qr { position:absolute; bottom:30px; right:34px; width:78px;height:78px; background:repeating-conic-gradient(#0d3b66 0 25%, #fff 0 50%) 50%/16px 16px; border:4px solid #fff; outline:1px solid var(--c-line); }
.cert .sign { display:flex; justify-content:space-around; margin-top:40px; }
.cert .sign .s { font-size:.9rem; } .cert .sign .ln { border-top:1.5px solid var(--c-ink); width:180px; margin:0 auto 6px; }

/* utilities */
.divider { height:1px; background:var(--c-line); margin:22px 0; }
.tag-input { display:flex; flex-wrap:wrap; gap:6px; }
.chip { background:var(--c-mint); color:var(--c-primary); padding:4px 11px; border-radius:999px; font-size:.82rem; }
.print-only { display:none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .g-4{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:2rem}
  .nav-links{display:none}
  .sidebar{transform:translateX(-100%); transition:.25s; z-index:60;}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .menu-toggle{display:inline-flex!important}
}
@media (max-width: 640px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .section{padding:42px 0}
}
.menu-toggle{display:none; background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--c-navy)}

/* print */
@media print {
  .sidebar,.topbar,.site-nav,.util-bar,.footer,.no-print{display:none!important}
  .main{margin-left:0} .content{padding:0}
  .print-only{display:block} body{background:#fff}
  .cert{box-shadow:none; page-break-after:always; margin-bottom:30px;}
}

/* =====================================================================
   FETP-reference chrome — utility bar, hero carousel, news, footer counter
   ===================================================================== */
.util-bar { background: var(--c-navy-d); color: rgba(255,255,255,.85); font-size: .82rem; }
.util-bar .container { display:flex; align-items:center; justify-content:space-between; height: 38px; }
.util-bar a { color: rgba(255,255,255,.85); padding: 4px 9px; display:inline-flex; align-items:center; gap:5px; }
.util-bar a:hover { color:#fff; text-decoration:none; }
.util-bar .ico { color: var(--c-accent); }
.util-bar .sep { color: rgba(255,255,255,.25); }
.util-bar .grp { display:flex; align-items:center; gap:2px; flex-wrap:wrap; }

/* main nav tweaks to match reference */
.site-nav { box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.brand b { color: var(--c-navy); letter-spacing:.01em; }
.nav-links a { color: var(--c-navy); font-weight:500; }
.nav-links a.active { color: var(--c-accent); }
.nav-links a:hover { background: var(--c-mint); }
.nav-cta { background: var(--c-accent)!important; color:#fff!important; }
.nav-cta:hover { background: var(--c-accent-d)!important; }
.caret::after { content:" ▾"; font-size:.7em; opacity:.6; }

/* hero carousel */
.hero-carousel { position:relative; height: 460px; overflow:hidden; background:var(--c-navy); }
.hero-slide { position:absolute; inset:0; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; text-align:center; opacity:0; transition:opacity .6s; }
.hero-slide.on { opacity:1; }
.hero-slide::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,39,70,.55), rgba(14,39,70,.7)); }
.hero-slide .cap { position:relative; z-index:2; color:#fff; padding:20px; }
.hero-slide .cap .sub { font-size:1.1rem; letter-spacing:.05em; }
.hero-slide .cap h1 { color:#fff; font-size:3rem; text-shadow:0 2px 12px rgba(0,0,0,.4); }
.hero-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:5; background:rgba(255,255,255,.15); color:#fff; border:none; width:44px;height:44px;border-radius:50%; font-size:1.4rem; cursor:pointer; }
.hero-arrow:hover{ background:rgba(255,255,255,.3); }
.hero-arrow.l{ left:18px; } .hero-arrow.r{ right:18px; }
.hero-dots { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:8px; }
.hero-dots i { width:10px;height:10px;border-radius:50%; background:rgba(255,255,255,.45); cursor:pointer; display:block; }
.hero-dots i.on { background:#fff; width:26px; border-radius:999px; }

/* centered section heading (reference style) */
.head-c { text-align:center; max-width:760px; margin:0 auto 40px; }
.head-c h2 { font-size:1.9rem; position:relative; display:inline-block; padding-bottom:14px; }
.head-c h2::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:64px; height:3px; background:var(--c-accent); border-radius:2px; }

/* mission checklist */
.mission-list { list-style:none; padding:0; margin:0; }
.mission-list li { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.mission-list li .ck { flex-shrink:0; width:24px;height:24px;border-radius:50%; background:var(--c-accent); color:#fff; display:grid;place-items:center; font-size:.8rem; margin-top:2px; }

/* course card (reference: image top, orange icon, orange detail btn) */
.pcard { background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; transition:.2s; }
.pcard:hover { box-shadow:var(--shadow-h); transform:translateY(-3px); }
.pcard .ph { height:170px; background-size:cover; background-position:center; background-color:var(--c-mint); }
.pcard .pb { padding:22px; display:flex; flex-direction:column; flex:1; }
.pcard .pico { width:58px;height:58px;border-radius:14px; background:var(--c-mint); color:var(--c-accent); display:grid;place-items:center; font-size:1.7rem; margin:-50px 0 14px; border:4px solid #fff; }
.pcard h3 { color:var(--c-navy); }
.pcard .meta { display:flex; gap:16px; font-size:.85rem; color:var(--c-ink-soft); margin-bottom:10px; }
.pcard .meta b { color:var(--c-accent); }

/* news card (reference) */
.ncard { background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:.2s; }
.ncard:hover { box-shadow:var(--shadow-h); transform:translateY(-3px); }
.ncard .nimg { height:180px; background-size:cover; background-position:center; background-color:var(--c-mint); }
.ncard .nb { padding:18px; }
.ncard .ndate { font-size:.82rem; color:var(--c-ink-mute); }
.ncard h3 { font-size:1.05rem; margin:6px 0 12px; }
.ncard .nmore { color:var(--c-accent); font-weight:600; font-family:var(--font-head); font-size:.9rem; }

/* navy page banner (interior pages) — themable */
.banner { background:linear-gradient(135deg,var(--c-navy-d),var(--c-navy)); color:#fff; padding:48px 0 40px; text-align:center; }
.banner h1 { color:#fff; font-size:2.2rem; margin-bottom:6px; }
.banner p { color:rgba(255,255,255,.85); margin:0; }
.crumb { color:#7a8798; font-size:.88rem; margin-top:14px; }
.crumb a { color:var(--c-accent-d); } .crumb a:hover { text-decoration:underline; } .crumb .on { color:#334; }

/* footer social + visitor counter */
.foot-social { display:flex; gap:12px; justify-content:center; margin-bottom:16px; }
.foot-social a { width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.08); display:grid;place-items:center; color:var(--c-accent); font-size:1.05rem; }
.foot-social a:hover{ background:var(--c-accent); color:#fff; }
.visitor { display:flex; align-items:center; gap:10px; justify-content:center; margin-top:10px; font-size:.85rem; color:rgba(255,255,255,.7); }
.visitor .digits { display:flex; gap:3px; }
.visitor .digits b { background:#0b1f38; color:#5fd07a; font-family:monospace; padding:3px 6px; border-radius:4px; font-size:1rem; }

/* announcement / calendar */
.announce { border-left:4px solid var(--c-accent); background:#fff8ee; }
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal .d { aspect-ratio:1; border:1px solid var(--c-line); border-radius:8px; padding:6px; font-size:.8rem; position:relative; }
.cal .d.mute { color:var(--c-ink-mute); background:#fafcfd; }
.cal .d .ev { position:absolute; left:4px; right:4px; bottom:4px; font-size:.62rem; background:var(--c-accent); color:#fff; border-radius:4px; padding:1px 3px; overflow:hidden; white-space:nowrap; }
.cal .d .ev.b2 { background:var(--c-primary); }
.cal-h { font-family:var(--font-head); font-weight:600; font-size:.78rem; color:var(--c-ink-soft); text-align:center; padding:4px 0; }
.cal-list .ci { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--c-line); }
.cal-list .ci .cd { flex-shrink:0; width:54px; text-align:center; background:var(--c-mint); border-radius:9px; padding:6px 0; }
.cal-list .ci .cd b { display:block; font-family:var(--font-head); font-size:1.3rem; color:var(--c-navy); line-height:1; }
.cal-list .ci .cd span { font-size:.72rem; color:var(--c-ink-soft); }

/* Thailand map dashboard */
.map-wrap { position:relative; }
.map-svg { width:100%; height:auto; }
.map-svg .prov { fill:#cfe0f0; stroke:#fff; stroke-width:.8; cursor:pointer; transition:fill .15s; }
.map-svg .prov:hover { fill:var(--c-accent); }
.map-svg .prov.q1 { fill:#dce8f4; } .map-svg .prov.q2 { fill:#9cc0e0; }
.map-svg .prov.q3 { fill:#4a84b8; } .map-svg .prov.q4 { fill:#1c4e80; } .map-svg .prov.q5 { fill:#14365b; }
.map-tip { position:fixed; z-index:80; background:var(--c-navy); color:#fff; padding:10px 13px; border-radius:9px; font-size:.82rem; pointer-events:none; box-shadow:var(--shadow-h); display:none; max-width:230px; }
.map-tip b{ color:var(--c-accent); }
.map-legend { display:flex; align-items:center; gap:4px; font-size:.78rem; color:var(--c-ink-soft); }
.map-legend i { width:22px;height:12px; display:inline-block; }
.drill { display:flex; align-items:center; gap:8px; font-size:.9rem; }
.drill a{ color:var(--c-accent); font-weight:600; }

/* ---- Per-page color themes (override CSS variables) ---- */
body.theme-moph { --c-navy:#0f7a3d; --c-navy-d:#0a5a2c; --c-primary:#1c8a4e; --c-primary-d:#146c3c; --c-teal:#1c9e6a; --c-teal-l:#4fbf8b; --c-mint:#e9f6ee; --c-accent:#f0a020; --c-accent-d:#d68a10; }
body.theme-cdcu { --c-navy:#0b6e6e; --c-navy-d:#084f4f; --c-primary:#138a86; --c-primary-d:#0d6663; --c-teal:#159e95; --c-teal-l:#5cc7bd; --c-mint:#e6f5f3; --c-accent:#e8983a; --c-accent-d:#d6852a; }
body.theme-femt { --c-navy:#14365b; --c-navy-d:#0e2746; --c-primary:#1c4e80; --c-primary-d:#163e66; --c-teal:#1c6e9c; --c-teal-l:#4a90c2; --c-mint:#eaf1f8; --c-accent:#e8983a; --c-accent-d:#d6852a; }
body.theme-fetp { --c-navy:#46307f; --c-navy-d:#2f2058; --c-primary:#5e48a8; --c-primary-d:#473584; --c-teal:#6f59b8; --c-teal-l:#9a87d4; --c-mint:#efecf8; --c-accent:#e0902f; --c-accent-d:#c97e20; }

/* course interior sub-nav sits below the sticky main nav */
.subnav { background:#fff; border-bottom:1px solid var(--c-line); position:sticky; top:var(--topbar-h); z-index:30; }
.subnav .container { display:flex; flex-wrap:wrap; gap:0; }
@keyframes ddcspin { to { transform: rotate(360deg); } }
/* พรีวิวลายเซ็น — พื้นหลังตาราง เพื่อให้เห็นว่าพื้นหลังโปร่งใสหรือยัง */
.sig-preview { height:44px; border:1px solid var(--c-line); border-radius:6px; padding:3px;
  background: conic-gradient(#e2e6ea 90deg, #fff 0 180deg, #e2e6ea 0 270deg, #fff 0) 0 0 / 14px 14px; }