:root {
  --pm-navy: #0b2a5b;
  --pm-navy-dark: #071c3d;
  --pm-gold: #f2b705;
  --pm-red: #c8102e;
  --pm-touch: 46px;            /* ขนาดเป้าแตะขั้นต่ำสำหรับแท็บเล็ตและมือถือ */
  --pm-radius: .9rem;
  --pm-shell-pad: 1rem;
}

html { -webkit-text-size-adjust: 100%; }

/* ปรับสเกลทั้งระบบ (rem) ให้อ่านง่ายบนแท็บเล็ตและมือถือ */
@media (min-width: 768px) {
  :root { --pm-shell-pad: 1.5rem; }
  html { font-size: 17px; }
}
@media (min-width: 1400px) {
  html { font-size: 16px; }
}

body {
  font-family: "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #f4f6fa;
  color: #1c2434;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.form-check-input { width: 1.25em; height: 1.25em; margin-top: .2em; }
.dropdown-item { padding-top: .55rem; padding-bottom: .55rem; }
.page-link { min-width: var(--pm-touch); min-height: var(--pm-touch); display: grid; place-items: center; }

/* ---------------------------------------------------------- public site -- */
.site-header {
  background: linear-gradient(120deg, var(--pm-navy-dark), var(--pm-navy));
  color: #fff;
  padding-top: env(safe-area-inset-top);
}
.site-header .brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: #fff; }
.brand-logo { width: auto; height: 95px; max-height: 95px; object-fit: contain; flex: 0 0 auto; }
.brand-text strong { display: block; line-height: 1.1; font-size: 1.1rem; letter-spacing: .3px; }
.brand-text small { color: var(--pm-gold); letter-spacing: 2px; text-transform: uppercase; font-size: .7rem; }
.org-line { max-width: 46ch; line-height: 1.35; }

.site-nav { background: rgba(0, 0, 0, .22); padding: 0; position: sticky; top: 0; z-index: 1030; }
.site-nav .nav-link {
  color: rgba(255, 255, 255, .82); padding: .7rem 1rem;
  min-height: var(--pm-touch); display: flex; align-items: center; gap: .35rem;
  white-space: nowrap;
}
.site-nav .nav-link:hover { color: #fff; }
.site-nav .nav-link.active { color: var(--pm-gold); box-shadow: inset 0 -3px 0 var(--pm-gold); }
.site-nav .navbar-toggler { border-color: rgba(255, 255, 255, .35); min-height: var(--pm-touch); }

/* แท็บเล็ต: เมนูเรียงแนวนอนเลื่อนได้ แทนการยุบเป็นแฮมเบอร์เกอร์ */
@media (min-width: 768px) {
  .site-nav .navbar-nav {
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

.footer-credit { background: #fff; padding: 1rem 0; text-align: center; }
.footer-credit .container,
.footer-credit .container-fluid { display: flex; justify-content: center; }
.footer-credit img { display: block; width: min(100%, 450px); max-width: 100%; height: auto; }
.site-footer { background: var(--pm-navy-dark); color: #fff; padding-bottom: env(safe-area-inset-bottom); }

.home-landing { padding: .5rem 0 1rem; }
.home-slide { display: block; width: 100%; height: auto; max-height: min(68vh, 680px); object-fit: contain; margin: 0 auto; }
.home-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.home-actions .btn { min-width: 190px; }

.hero {
  background: linear-gradient(120deg, rgba(11, 42, 91, .93), rgba(11, 42, 91, .78)),
              radial-gradient(circle at 80% 20%, rgba(242, 183, 5, .35), transparent 55%);
  color: #fff; border-radius: 1rem; padding: clamp(1.5rem, 4vw, 3rem);
}
.hero h1 { font-size: clamp(1.45rem, 3.4vw, 2.4rem); line-height: 1.25; }
.hero .btn { flex: 1 1 auto; }
@media (min-width: 576px) { .hero .btn { flex: 0 0 auto; } }

.card { border: 0; border-radius: var(--pm-radius); box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }
.card-header {
  background: #fff; border-bottom: 1px solid #eef1f6; font-weight: 600;
  border-radius: var(--pm-radius) var(--pm-radius) 0 0 !important; padding: .85rem 1rem;
}
.stat-card .display-6 { font-weight: 700; color: var(--pm-navy); font-size: clamp(1.7rem, 4.5vw, 2.4rem); }

.table > :not(caption) > * > * { padding: .7rem .65rem; }
.table thead th { background: #eef2f8; color: var(--pm-navy); font-weight: 600; white-space: nowrap; }
.table-responsive { -webkit-overflow-scrolling: touch; }

.panel-body { background: #f4f6fa; }
.panel-topbar { background: var(--pm-navy); padding-top: env(safe-area-inset-top); position: sticky; top: 0; z-index: 1040; }
.panel-topbar .dropdown-menu { z-index: 1050; }
.panel-topbar .navbar-brand { font-size: 1rem; }
.panel-topbar .brand-logo { width: 72px; height: 42px; }
.panel-shell { display: flex; min-height: calc(100vh - 56px); position: relative; z-index: 1; }
.panel-sidebar { width: max-content; flex: 0 0 auto; background: #fff; border-right: 1px solid #e6e9f0; }
.panel-sidebar .nav-link {
  color: #43506b; border-radius: 0; padding: .75rem 1rem; font-size: .95rem;
  min-height: var(--pm-touch); display: flex; align-items: center; gap: .55rem; white-space: nowrap;
}
.panel-sidebar .nav-link i { width: 1.4rem; text-align: center; }
.panel-sidebar .nav-link:hover { background: #f1f4fa; }
.panel-sidebar .nav-link.active { background: #eaf0fb; color: var(--pm-navy); font-weight: 600; box-shadow: inset 3px 0 0 var(--pm-navy); }
.panel-content { flex: 1 1 auto; padding: var(--pm-shell-pad); min-width: 0; }

@media (max-width: 991.98px) {
  .panel-shell { display: block; }
  .panel-sidebar { width: min(88vw, 320px); flex: none; }
}

.check-ok { color: #198754; }
.check-fail { color: #dc3545; }
.doc-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: .5rem; border: 1px solid #dee2e6; }
.required::after { content: " *"; color: #dc3545; }

@media (max-width: 767.98px) {
  .btn-stack .btn { width: 100%; }
}

/* Custom Navy Buttons */
.btn-navy { background-color: var(--pm-navy); color: #fff; border-color: var(--pm-navy); }
.btn-navy:hover, .btn-navy:focus, .btn-navy.active { background-color: var(--pm-navy-dark); color: #fff; border-color: var(--pm-navy-dark); }
.btn-outline-navy { color: var(--pm-navy); border-color: var(--pm-navy); background-color: transparent; }
.btn-outline-navy:hover, .btn-outline-navy:focus, .btn-outline-navy.active { background-color: var(--pm-navy); color: #fff; border-color: var(--pm-navy); }

/* ระเบียบการแข่งขัน */
.rule-doc { line-height: 1.8; }
.rule-intro { text-indent: 2.5rem; }
.rule-heading { font-size: 1.05rem; font-weight: 700; color: #0b2a5b; margin: 1.4rem 0 .5rem; scroll-margin-top: 1rem; }
.rule-heading span { font-weight: 600; }
.rule-para { margin: 0 0 .5rem 1.5rem; }
.rule-highlight { margin: .25rem 0 .5rem 2.5rem; font-weight: 700; color: #c1121f; }
.rule-items { margin-left: 1.5rem; }
.rule-sub { margin-left: 1.5rem; }
.rule-item { display: flex; gap: .6rem; margin-bottom: .45rem; }
.rule-no { flex: 0 0 auto; font-weight: 700; color: #0b2a5b; min-width: 2.6rem; }
.rule-note { margin-left: 1.5rem; font-size: .8rem; color: #6c757d; }
.rule-toc { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }