/* Dr. K — สไตล์ร่วมของหน้ารอง (Playbook · คลังรายงาน · บันทึกการคุย)
   ธีมกรมท่า+ทอง ตามโลโก้ 19 */
:root{
  --navy:#0d2547; --navy-2:#12305C; --navy-3:#1b3862;
  --paper:#f7f1e6; --card:#fffdf8; --ink:#33291f; --ink-soft:#5e5040;
  --line:#e3d6c1; --gold:#b8893b; --gold-lite:#d9ae4f; --teal:#5bbfb0;
  --green:#3f6b4f; --red:#a4482f; --amber:#8c6412;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Sarabun',system-ui,-apple-system,sans-serif;line-height:1.8;font-size:17px}
a{color:var(--gold)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px 90px}

/* แถบเมนู */
.topnav{position:sticky;top:0;z-index:50;background:var(--navy);color:#e8eef7;
  box-shadow:0 2px 18px rgba(10,25,50,.28)}
.topnav .inner{max-width:1180px;margin:0 auto;padding:10px 24px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.topnav .brand{display:flex;align-items:center;gap:11px;font-weight:600;font-size:15px;
  letter-spacing:.5px;color:#fff;text-decoration:none}
.topnav .brand small{display:block;font-size:10.5px;letter-spacing:2.4px;color:var(--gold-lite)}
.topnav nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.topnav a.lnk{color:#cfdcee;text-decoration:none;font-size:15px;padding:7px 14px;border-radius:8px;
  transition:background .15s,color .15s}
.topnav a.lnk:hover{background:var(--navy-3);color:#fff}
.topnav a.lnk[aria-current="page"]{background:var(--gold-lite);color:var(--navy);font-weight:600}
@media(max-width:640px){.topnav nav{margin-left:0;width:100%}.topnav a.lnk{font-size:14px;padding:6px 11px}}

/* หัวปกกรมท่า (แบบเดียวกับหน้า Caption) */
.hero{background:var(--navy-2);color:#fff;padding:52px 0 46px;
  background-image:radial-gradient(circle at 82% 12%,#1d4a8a 0%,transparent 45%)}
.hero .inner{max-width:1120px;margin:0 auto;padding:0 24px}
.hero .eyebrow{font-size:13px;letter-spacing:3.4px;text-transform:uppercase;color:var(--teal);font-weight:600}
.hero h1{font-family:'Trirong',Georgia,serif;font-weight:700;margin:10px 0 12px;
  font-size:clamp(30px,5.4vw,46px);line-height:1.2}
.hero p{margin:0;color:#c3d2e6;font-size:17px;max-width:70ch;font-weight:300}
.hero .meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:9px}
.hero .chip{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  padding:6px 13px;border-radius:30px;font-size:13.5px;color:#dce6f4}
.hero .chip b{color:var(--gold-lite)}

/* บล็อกทั่วไป */
section{margin-top:52px}
.sec-head{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap;
  padding-bottom:11px;border-bottom:2px solid var(--line);margin-bottom:24px}
.sec-head h2{font-family:'Trirong',Georgia,serif;font-weight:700;font-size:27px;color:var(--gold);margin:0}
.sec-head .sub{color:var(--ink-soft);font-size:15px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  box-shadow:0 8px 30px rgba(120,90,50,.06)}
.muted{color:var(--ink-soft);font-size:15px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  background:#efe6d4;padding:1px 6px;border-radius:5px}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#f2e9d8;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
.tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12.5px;font-weight:600;white-space:nowrap}
.t-gold{background:#f4e8cf;color:#8a6420} .t-green{background:#e2efe6;color:var(--green)}
.t-red{background:#f7e5e0;color:var(--red)} .t-navy{background:#e0e8f4;color:#1b3862}
.foot{margin-top:64px;padding-top:22px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:14px}