/* ============================================================================
   app.css — สไตล์กลางของเว็บ BIS 12.2
   ทุกหน้าต้องโหลดไฟล์นี้ไฟล์เดียว แล้วหน้าตาจะเหมือนกันหมดโดยไม่ต้องก๊อป CSS
   หน้าใหม่: ดู page-template.html เป็นตัวอย่าง — โหลด app.css + nav.js แล้วเขียน
   เนื้อหาใน <main class="detail"> เท่านั้น
   ============================================================================ */

:root {
  /* สี — ใช้ตัวแปรเสมอ ห้ามใส่ค่าสีดิบในหน้าใด ๆ */
  --navy:#14213d;      /* สีหลัก: ผนังเมนู หัวเรื่อง ตัวอักษรหนัก */
  --navy-2:#223b63;
  --blue:#2d5a8e;      /* สีรอง: ลิงก์ จุดเน้น */
  --gold:#ffc857;      /* สีเน้น: ปุ่มสำคัญ ตัวเลขเด่น */
  --ink:#1c2230;       /* ตัวอักษรปกติ */
  --mute:#6b7688;      /* ตัวอักษรรอง */
  --line:#dfe4ec;      /* เส้นขอบ */
  --bg:#f6f8fb;        /* พื้นหลังหน้า */
  --card:#fff;
  /* สีประจำสายพันธุ์ BOSI — ใช้ร่วมกันทุกหน้า */
  --b:#2d5a8e; --o:#e08b1e; --s:#2e8b57; --i:#8e44ad;

  --rail:274px;        /* ความกว้างผนังเมนูซ้าย */
  --r-sm:8px; --r-md:12px; --r-lg:14px;
  --shadow:0 6px 22px rgba(20,33,61,.08);
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body {
  font-family:'Sarabun','Noto Sans Thai',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.62;
}

/* ---------- โครงหน้า: ผนังเมนูซ้าย + เนื้อหาขวา ---------- */
@media (min-width:1080px) {
  body { padding-left:var(--rail); }
}
.detail { max-width:900px; margin:0 auto; padding:0 18px 90px; }
.detail.wide { max-width:1120px; }

/* ---------- หัวเรื่องของหน้า ---------- */
.pagehead {
  background:linear-gradient(100deg,var(--navy) 0%,var(--navy-2) 45%,var(--blue) 100%);
  color:#fff; padding:30px 0 26px;
}
.pagehead .in { max-width:900px; margin:0 auto; padding:0 18px; }
.pagehead .kicker { font-size:12.5px; letter-spacing:.15em; text-transform:uppercase; color:#8fb6e0; font-weight:600; }
.pagehead h1 { font-size:26px; line-height:1.3; font-weight:700; margin-top:8px; }
.pagehead p { font-size:14.5px; color:#cfe0f2; margin-top:9px; }

/* ---------- ตัวอักษร ---------- */
h2 { font-size:20px; font-weight:700; color:var(--navy); line-height:1.35; }
h3 { font-size:16.5px; font-weight:700; color:var(--navy); }
p { font-size:15px; }
b, strong { font-weight:700; color:var(--navy); }
a { color:var(--blue); }

/* ---------- ส่วนประกอบที่ใช้ซ้ำ ---------- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:18px 18px 14px; margin:14px 0; }
.card h2 { font-size:16.5px; }
.note { font-size:13.6px; color:var(--mute); }

.btn {
  display:inline-block; font-family:inherit; font-size:15px; font-weight:700; border:0;
  border-radius:10px; padding:13px 20px; background:var(--navy); color:#fff; cursor:pointer;
  text-decoration:none; text-align:center;
}
.btn:disabled { background:#aeb7c6; cursor:not-allowed; }
.btn.gold { background:var(--gold); color:#3d2c00; }
.btn.ghost { background:#eef1f6; color:var(--navy); font-weight:600; font-size:14px; padding:10px 15px; }

.quote {
  border-left:4px solid var(--gold); background:#fcfaf4; padding:11px 0 11px 16px; margin:14px 0;
  font-size:16px; line-height:1.55; font-weight:600; color:var(--navy);
}
.quote small { display:block; font-size:12.5px; font-weight:400; color:var(--mute); margin-top:5px; }

/* แถบคะแนน — ใช้ทั้งหน้าผลและหน้าอื่นที่ต้องโชว์สัดส่วน */
.srow { display:flex; align-items:center; gap:11px; margin-bottom:11px; }
.srow .k { flex:none; width:104px; font-size:14.4px; font-weight:700; }
.srow .track { flex:1; height:26px; background:#e8edf4; border-radius:7px; overflow:hidden; }
.srow .fill {
  height:100%; border-radius:7px; display:flex; align-items:center; justify-content:flex-end;
  padding-right:9px; color:#fff; font-size:13px; font-weight:700; min-width:34px;
}
.k-B { color:var(--b); } .f-B { background:var(--b); }
.k-O { color:var(--o); } .f-O { background:var(--o); }
.k-S { color:var(--s); } .f-S { background:var(--s); }
.k-I { color:var(--i); } .f-I { background:var(--i); }

table { width:100%; border-collapse:collapse; font-size:13.6px; }
table th, table td { border:1px solid var(--line); padding:7px 9px; text-align:center; }
table th { background:#eef1f6; font-weight:700; color:var(--navy); }

/* ---------- ผนังเมนูซ้าย (nav.js เป็นคนใส่เนื้อหาให้) ---------- */
#appnav { display:none; }
#appnav .sh { padding:26px 20px 16px; border-bottom:1px solid rgba(255,255,255,.10); }
#appnav .sh .t { font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:#8fb6e0; font-weight:700; }
#appnav .sh .n { font-size:15px; font-weight:700; margin-top:4px; color:#fff; }
#appnav .items { padding:12px 12px 14px; overflow-y:auto; }
#appnav .f { display:block; text-decoration:none; border-radius:9px; padding:11px 12px; margin-bottom:4px; position:relative; }
#appnav .f:hover { background:rgba(255,255,255,.07); }
#appnav .f.on { background:rgba(255,255,255,.11); }
#appnav .f.on::before { content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--gold); }
#appnav .f.soon { opacity:.4; pointer-events:none; }
#appnav .f .l { display:flex; gap:9px; align-items:flex-start; }
#appnav .f .ic { flex:none; font-size:15.5px; line-height:1.35; }
#appnav .f .lb { font-size:14px; font-weight:700; color:#fff; line-height:1.35; }
#appnav .f.on .lb { color:var(--gold); }
#appnav .f .sb { display:block; font-size:12.2px; color:#a9c6e4; line-height:1.45; margin:2px 0 0 25px; }
#appnav .acts { display:flex; gap:6px; margin:2px 0 8px 37px; }
#appnav .acts a { flex:1; text-align:center; text-decoration:none; font-size:12.4px; font-weight:700; padding:7px 6px; border-radius:7px; background:var(--gold); color:#3d2c00; }
#appnav .more { font-size:11.8px; color:#7ea3cc; padding:4px 20px 20px; line-height:1.5; }

@media (min-width:1080px) {
  #appnav {
    display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0;
    width:var(--rail); z-index:15; background:var(--navy);
    border-right:1px solid rgba(255,255,255,.08);
  }
  #appnav .items { flex:1; }
}
@media (max-width:1079px) {
  #appnav { display:block; background:#1b2c4d; }
  #appnav .sh { padding:16px 18px 12px; }
  #appnav .items { padding:8px 10px 12px; }
  #appnav .more { padding:0 18px 14px; }
}
@media print {
  #appnav { display:none !important; }
  body { padding-left:0 !important; }
}

/* ---------- ประวัติกิจกรรมส่วนตัว ---------- */
.history-card { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; }
.history-icon { font-size:28px; line-height:1; }
.history-content h2 { margin:0; }
.history-summary { margin-top:5px; color:var(--ink); }
.history-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.history-empty { display:flex; gap:10px; flex-wrap:wrap; padding:22px 0; }
.history-detail-head { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.history-field { border-top:1px solid var(--line); padding:11px 0; }
.history-field:first-child { margin-top:12px; }
.history-field-label { font-size:12.5px; color:var(--mute); font-weight:700; }
.history-field-value { margin-top:3px; white-space:pre-wrap; overflow-wrap:anywhere; }
@media (max-width:680px) {
  .history-card { grid-template-columns:auto 1fr; }
  .history-actions { grid-column:1 / -1; justify-content:flex-start; }
  .history-detail-head { display:block; }
  .history-detail-head .btn { margin-top:10px; }
}