/* ธีมมืดกลาง (แนว Recode) ใช้ทุกหน้า ยกเว้นหน้าแรกที่มีธีมของตัวเอง
 * ผูกไว้ใต้ @media screen → สั่งพิมพ์ยังเป็นกระดาษขาวตามค่าเดิมของแต่ละหน้า */
@media screen {
  :root {
    --navy:#4a8f50; --navy-dark:#0b120c; --gold:#e0233f; --red:#ff6b7d; --green:#7fd38a;
    --ink:#e8eee6; --muted:#97a596; --line:#223026; --bg:#070b08; --white:#0e150f;
    --card:#0e150f; --tint-red:rgba(255,107,125,.10); --tint-gold:rgba(233,196,106,.10); --tint-violet:rgba(160,120,255,.10); --tint-green:rgba(127,211,138,.13); --tint-gray:rgba(255,255,255,.06);
    --gold-light:rgba(255,107,125,.12); --amber:#f2c24f; --red-ink:#ff8a98;
    --acc:#b6f06e; --acc-ink:#0b1607;
    color-scheme: dark;
  }
  html, body { background:#070b08; color:var(--ink) }
  .flagbar { display:none }
  header { background:rgba(9,13,10,.92)!important; border-bottom:1px solid var(--line)!important; backdrop-filter:blur(8px) }
  .brand b { color:#fff!important }
  input, select, textarea { border-color:#2c3b2f!important; background:#0a100b!important; color:var(--ink)!important }
  input[type=password], input[type=number], input[type=date], input[type=time] { padding:10px 12px; border:1px solid; border-radius:8px; font:inherit; font-size:16px }
  input:focus, select:focus, textarea:focus { outline-color:var(--acc)!important; border-color:var(--acc)!important }
  .card, .box, .panel, .modal, dialog { border-color:var(--line) }
  a { color:inherit }
  main a:not([class]) { color:var(--acc) }
  footer { background:#040705!important; border-top:1px solid var(--line); color:var(--muted)!important }
  h1, h2, h3, .page-title, label { color:#fff!important }
  .btn-navy { background:var(--acc)!important; color:var(--acc-ink)!important }
  .btn-navy:hover { filter:brightness(1.08) }
  #langToggle, #siteSearchBtn { background:transparent!important; color:#fff!important; border-color:#2c3b2f!important }
  #langToggle:hover { background:var(--acc)!important; color:var(--acc-ink)!important }
  #siteSearch .box { background:#0e150f!important; border:1px solid var(--line) }
  #siteSearch input { background:transparent!important; border:0!important; border-bottom:1px solid var(--line)!important }
  #siteSearch li a { color:var(--ink)!important } #siteSearch li a b { color:#fff!important } #siteSearch li a small { color:var(--muted)!important }
  ::selection { background:var(--acc); color:var(--acc-ink) }

  /* ธีม HHIS: ทุกหน้าของ tenant hhis ใช้โทนเดียวกับหน้าแรก (พื้นสว่าง หัวขาว ท้ายน้ำเงิน ปุ่ม coral ตาม accent) */
  body[data-tenant="hhis"] {
    --navy:#1e5bd6; --navy-dark:#163f9e; --red:#f43f5e; --green:#1e9e6a;
    --ink:#23272f; --muted:#6b7280; --line:#e3e7ee; --bg:#ffffff; --white:#ffffff;
    --card:#ffffff; --tint-red:rgba(244,63,94,.08); --tint-gold:rgba(255,196,0,.20); --tint-violet:rgba(30,91,214,.08); --tint-green:rgba(30,158,106,.10); --tint-gray:rgba(35,39,47,.05);
    --gold-light:rgba(255,196,0,.22); --amber:#d9a400; --red-ink:#d61f42;
    color-scheme:light;
  }
  body[data-tenant="hhis"] { background:#fff }
  body[data-tenant="hhis"] header { background:#fff!important; border-bottom:1px solid var(--line)!important }
  body[data-tenant="hhis"] .brand b { color:var(--navy)!important }
  body[data-tenant="hhis"] input, body[data-tenant="hhis"] select, body[data-tenant="hhis"] textarea { background:#fff!important; border-color:var(--line)!important }
  body[data-tenant="hhis"] footer { background:var(--navy)!important; color:#fff!important }
  body[data-tenant="hhis"] h1, body[data-tenant="hhis"] h2, body[data-tenant="hhis"] h3, body[data-tenant="hhis"] .page-title { color:var(--navy)!important }
  body[data-tenant="hhis"] label { color:var(--ink)!important }
  body[data-tenant="hhis"] #langToggle, body[data-tenant="hhis"] #siteSearchBtn { color:var(--navy)!important; border-color:var(--line)!important }
  body[data-tenant="hhis"] #siteSearch .box { background:#fff!important }
  body[data-tenant="hhis"] #siteSearch li a { color:var(--ink)!important }
  body[data-tenant="hhis"] #siteSearch li a b { color:var(--navy)!important }
  body[data-tenant="hhis"] #siteSearch li a small { color:var(--muted)!important }
  body[data-tenant="hhis"] .hdr-badge { color:#f9615c }
  body[data-tenant="hhis"] .hdr-badge .badge-core { background:linear-gradient(145deg,#5b8def,#1e5bd6) }

  /* ธีมโนนจาน: พื้นสว่างโทนชมพูตามตราโรงเรียน (หัวขาวขลิบชมพู ท้ายชมพูเข้ม หัวข้อ/ลิงก์/ปุ่มชมพู) */
  body[data-tenant="nonjan"] {
    --navy:#c8102e; --navy-dark:#7a0a1c; --gold:#c8102e; --red:#a51931; --green:#c8102e;
    --ink:#2b1115; --muted:#6f5159; --line:#f0dde1; --bg:#fdf6f7; --white:#ffffff;
    --card:#ffffff; --tint-red:rgba(165,25,49,.07); --tint-gold:rgba(200,16,46,.08); --tint-violet:rgba(200,16,46,.07); --tint-green:rgba(200,16,46,.08); --tint-gray:rgba(58,35,45,.05);
    --gold-light:#fbe3e7; --amber:#d9a400; --red-ink:#a51931;
    --acc:#c8102e; --acc-ink:#fff;
    color-scheme:light;
  }
  body[data-tenant="nonjan"] { background:var(--bg) }
  body[data-tenant="nonjan"] header { background:#fff!important; border-bottom:3px solid #c8102e!important }
  body[data-tenant="nonjan"] .brand b { color:var(--navy)!important }
  body[data-tenant="nonjan"] input, body[data-tenant="nonjan"] select, body[data-tenant="nonjan"] textarea { background:#fff!important; border-color:var(--line)!important }
  body[data-tenant="nonjan"] footer { background:var(--navy-dark)!important; color:#f6d3da!important }
  body[data-tenant="nonjan"] h1, body[data-tenant="nonjan"] h2, body[data-tenant="nonjan"] h3, body[data-tenant="nonjan"] .page-title { color:var(--navy)!important }
  body[data-tenant="nonjan"] label { color:var(--ink)!important }
  body[data-tenant="nonjan"] #langToggle, body[data-tenant="nonjan"] #siteSearchBtn { color:var(--navy)!important; border-color:var(--line)!important }
  body[data-tenant="nonjan"] #siteSearch .box { background:#fff!important }
  body[data-tenant="nonjan"] #siteSearch li a { color:var(--ink)!important }
  body[data-tenant="nonjan"] #siteSearch li a b { color:var(--navy)!important }
  body[data-tenant="nonjan"] #siteSearch li a small { color:var(--muted)!important }
  body[data-tenant="nonjan"] .hdr-badge { color:#c8102e }
  body[data-tenant="nonjan"] .hdr-badge .badge-core { background:linear-gradient(145deg,#e0314f,#c8102e) }

  /* ธีมสวนปอ: พื้นสว่างโทนชมพู-ฟ้าตามสีประจำโรงเรียน (หัวขาวขลิบชมพู ท้ายน้ำเงิน หัวข้อฟ้าเข้ม ปุ่มชมพู) */
  body[data-tenant="suanpor"] {
    --navy:#1e3a8a; --navy-dark:#172c66; --gold:#db2777; --red:#db2777; --green:#2563eb;
    --ink:#1f2a44; --muted:#5b6b8c; --line:#ead7e3; --bg:#fdf4f8; --white:#ffffff;
    --card:#ffffff; --tint-red:rgba(219,39,119,.07); --tint-gold:rgba(219,39,119,.08); --tint-violet:rgba(37,99,235,.07); --tint-green:rgba(37,99,235,.08); --tint-gray:rgba(60,45,70,.05);
    --gold-light:#fbd3e6; --amber:#d9a400; --red-ink:#9d174d;
    --acc:#db2777; --acc-ink:#fff;
    color-scheme:light;
  }
  body[data-tenant="suanpor"] { background:var(--bg) }
  body[data-tenant="suanpor"] header { background:#fff!important; border-bottom:3px solid #db2777!important }
  body[data-tenant="suanpor"] .brand b { color:var(--navy)!important }
  body[data-tenant="suanpor"] input, body[data-tenant="suanpor"] select, body[data-tenant="suanpor"] textarea { background:#fff!important; border-color:var(--line)!important }
  body[data-tenant="suanpor"] footer { background:var(--navy-dark)!important; color:#d7e3fa!important }
  body[data-tenant="suanpor"] h1, body[data-tenant="suanpor"] h2, body[data-tenant="suanpor"] h3, body[data-tenant="suanpor"] .page-title { color:var(--navy)!important }
  body[data-tenant="suanpor"] label { color:var(--ink)!important }
  body[data-tenant="suanpor"] #langToggle, body[data-tenant="suanpor"] #siteSearchBtn { color:var(--navy)!important; border-color:var(--line)!important }
  body[data-tenant="suanpor"] #siteSearch .box { background:#fff!important }
  body[data-tenant="suanpor"] #siteSearch li a { color:var(--ink)!important }
  body[data-tenant="suanpor"] #siteSearch li a b { color:var(--navy)!important }
  body[data-tenant="suanpor"] #siteSearch li a small { color:var(--muted)!important }
  body[data-tenant="suanpor"] .hdr-badge { color:#db2777 }
  body[data-tenant="suanpor"] .hdr-badge .badge-core { background:linear-gradient(145deg,#ec4899,#2563eb) }

  /* ธีมหนองกูโคกเพ็ก: ขาว/เนวี่/เหลืองตามเทมเพลต flat-design (หัวขาวขลิบเหลือง ท้ายเนวี่เข้ม หัวข้อเนวี่ ปุ่ม CTA เหลือง) */
  body[data-tenant="nkkp"] {
    --navy:#0b3c7a; --navy-dark:#072a57; --gold:#f5a623; --red:#d98a0b; --green:#0b3c7a;
    --ink:#1c2f52; --muted:#5a6d94; --line:#dfe7f4; --bg:#f4f7fd; --white:#ffffff;
    --card:#ffffff; --tint-red:rgba(217,138,11,.08); --tint-gold:rgba(245,166,35,.12); --tint-violet:rgba(11,60,122,.07); --tint-green:rgba(11,60,122,.08); --tint-gray:rgba(45,60,95,.05);
    --gold-light:#fde9c4; --amber:#d98a0b; --red-ink:#9a6206;
    --acc:#0b3c7a; --acc-ink:#fff;
    color-scheme:light;
  }
  body[data-tenant="nkkp"] { background:var(--bg) }
  body[data-tenant="nkkp"] header { background:#fff!important; border-bottom:3px solid #f5a623!important }
  body[data-tenant="nkkp"] .brand b { color:var(--navy)!important }
  body[data-tenant="nkkp"] input, body[data-tenant="nkkp"] select, body[data-tenant="nkkp"] textarea { background:#fff!important; border-color:var(--line)!important }
  body[data-tenant="nkkp"] footer { background:var(--navy-dark)!important; color:#c9d9f2!important }
  body[data-tenant="nkkp"] h1, body[data-tenant="nkkp"] h2, body[data-tenant="nkkp"] h3, body[data-tenant="nkkp"] .page-title { color:var(--navy)!important }
  body[data-tenant="nkkp"] label { color:var(--ink)!important }
  body[data-tenant="nkkp"] #langToggle, body[data-tenant="nkkp"] #siteSearchBtn { color:var(--navy)!important; border-color:var(--line)!important }
  body[data-tenant="nkkp"] #siteSearch .box { background:#fff!important }
  body[data-tenant="nkkp"] #siteSearch li a { color:var(--ink)!important }
  body[data-tenant="nkkp"] #siteSearch li a b { color:var(--navy)!important }
  body[data-tenant="nkkp"] #siteSearch li a small { color:var(--muted)!important }
  body[data-tenant="nkkp"] .hdr-badge { color:#d98a0b }
  body[data-tenant="nkkp"] .hdr-badge .badge-core { background:linear-gradient(145deg,#f5a623,#0b3c7a) }
  body[data-tenant="nkkp"] .btn-navy { background:#f5a623!important; color:#0b3c7a!important } /* ปุ่ม CTA เหลืองตัวหนังสือเนวี่ตามเทมเพลต */
}

/* ตราโรงเรียนมุมซ้ายบน: วงแดงตัวอักษรหมุน + หกเหลี่ยม */
.hdr-badge{position:relative;flex:none;width:64px;height:64px;color:#b6f06e;border-radius:50%;background:radial-gradient(circle,#0d160f 62%,transparent 63%)}
.hdr-badge .badge-ring{position:absolute;inset:0;width:100%;height:100%}
.hdr-badge .badge-ring text{font-size:15px}
@media(prefers-reduced-motion:no-preference){.hdr-badge .badge-ring{animation:hdrSpin 22s linear infinite}}
@keyframes hdrSpin{to{transform:rotate(360deg)}}
.hdr-badge .badge-core{position:absolute;inset:14px;display:grid;place-items:center;background:linear-gradient(145deg,#c6f585,#5f9a4e);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.brand .hdr-badge img{width:76%!important;height:auto!important;border:0!important;border-radius:50%}
@media(max-width:480px){.hdr-badge{width:50px;height:50px}.hdr-badge .badge-core{inset:11px}}