/* =====================================================================
   RBRU MOU Management System - ธีมหลัก
   สีและโครงหน้าอ้างอิงจากแบบที่อนุมัติ (public/image/ปรับปรุงระบบฐานข้อมูล MOU.png)
   เขียนแบบไม่พึ่ง Bootstrap เพื่อให้ควบคุมหน้าตาได้ทั้งหมด
   ===================================================================== */

:root{
  /* กลางสีเอนไปทางเขียวเล็กน้อย ให้กลืนกับสีหลักแทนที่จะเป็นเทากลางแบบไม่ได้เลือก */
  --ground:#F1F6F2;
  --surface:#FFFFFF;
  --surface-2:#F8FBF9;
  --surface-3:#EAF3EC;
  --line:#D8E7DC;
  --line-soft:#E8F1EA;

  --ink:#12241A;
  --ink-2:#38513F;
  --ink-3:#647A6B;

  --brand:#15803D;
  --brand-dark:#0C4A26;
  --brand-light:#34A853;
  --brand-soft:#E7F4EB;
  --brand-line:#BFE0C9;
  --gold:#F5C542;

  /* สีบอกสถานะแยกจากสีแบรนด์ ใช้เขียวคนละระดับกันไม่ให้สับสนกับสีตกแต่ง */
  --good:#166534;  --good-soft:#E3F3E8;  --good-line:#B4DCC0;
  --warn:#B45309;  --warn-soft:#FDF2E0;  --warn-line:#F2D8AE;
  --crit:#B91C1C;  --crit-soft:#FCEBEA;  --crit-line:#F2C6C4;
  --info:#1D4ED8;  --info-soft:#E9EEFD;  --info-line:#C6D3F8;

  /* ชุดสีกราฟ ตรวจการมองเห็นสีบกพร่องผ่านทุกคู่ที่อยู่ติดกันแล้ว อย่าสลับลำดับ */
  --s1:#1baf7a; --s2:#eb6834; --s3:#4a3aa7; --s4:#2a78d6; --s5:#eda100; --s6:#e87ba4;

  --shadow:0 1px 2px rgba(12,36,22,.05), 0 8px 24px -12px rgba(12,36,22,.18);
  --shadow-lg:0 2px 4px rgba(12,36,22,.06), 0 24px 48px -20px rgba(12,36,22,.3);
  --radius:12px;

  /* ความกว้างเนื้อหาและระยะขอบซ้าย-ขวา
     กว้างขึ้นบนจอคอมเพื่อไม่ให้เหลือพื้นที่ว่างสองข้างมากเกินไป
     และหดลงอัตโนมัติจนพอดีจอมือถือ */
  --wrap-max:1560px;
  --wrap-pad:clamp(14px, 2vw, 28px);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"IBM Plex Sans Thai","Noto Sans Thai",-apple-system,"Segoe UI",Tahoma,sans-serif;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;

  /* ดันท้ายหน้าลงไปติดขอบล่างเสมอ ไม่ให้ลอยขึ้นมากลางจอเมื่อเนื้อหาสั้น */
  min-height:100vh;
  display:flex;
  flex-direction:column;

  /* กันเนื้อหาล้นออกนอกจอแนวนอน clip ไม่สร้าง scroll container จึง sticky ยังทำงานปกติ */
  overflow-x:clip;
}
body > main{flex:1 0 auto; min-width:0;}
body > .foot{flex-shrink:0;}

h1,h2,h3,h4,h5,.kanit{
  font-family:"Kanit","IBM Plex Sans Thai",-apple-system,"Segoe UI",Tahoma,sans-serif;
  font-weight:500;
  margin:0;
  text-wrap:balance;
}

a{color:var(--brand); text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px; border-radius:4px;
}

.wrap{width:100%; max-width:var(--wrap-max); margin:0 auto; padding:0 var(--wrap-pad);}
/* หน้าที่เป็นเนื้อความยาวหรือฟอร์ม ไม่ควรยืดเต็มจอกว้าง เพราะบรรทัดยาวเกินจะอ่านยาก
   และช่องกรอกที่กว้างเป็นพันพิกเซลไม่ได้ช่วยให้กรอกง่ายขึ้น */
.wrap.narrow{max-width:1040px;}
.wrap.mid{max-width:1280px;}
.tabular{font-variant-numeric:tabular-nums;}
.muted{color:var(--ink-3);}
.small{font-size:12.5px;}
.center{text-align:center;}
.right{text-align:right;}
.nowrap{white-space:nowrap;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.stack-sm{display:flex; flex-direction:column; gap:8px;}
.row-gap{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.spacer{margin-left:auto;}

/* ------------------------------------------------------------------ nav */
.nav{
  background:linear-gradient(100deg,#0B3D20 0%,#14682F 55%,#15803D 100%);
  color:#fff;
  position:sticky; top:0; z-index:50;
  box-shadow:0 2px 14px -4px rgba(9,45,24,.45);
}
.nav-inner{display:flex; align-items:center; gap:22px; height:62px;}
.nav-logo{display:flex; align-items:center; gap:11px; flex:none; color:#fff;}
.nav-logo:hover{text-decoration:none;}
.nav-logo img{width:36px; height:36px; border-radius:50%; background:#fff; object-fit:contain;}
.nav-logo .t1{font-family:"Kanit",sans-serif; font-weight:600; font-size:16px; line-height:1.15; display:block;}
.nav-logo .t2{font-size:10.5px; color:#A9D9B8; letter-spacing:.03em; display:block;}
.nav-menu{display:flex; gap:3px; flex:1; font-size:13px; min-width:0;}
.nav-menu a{
  color:#C6E6D0; padding:7px 13px; border-radius:8px; white-space:nowrap;
  display:flex; align-items:center; gap:6px;
}
.nav-menu a:hover{background:rgba(255,255,255,.1); color:#fff; text-decoration:none;}
.nav-menu a.on{background:rgba(255,255,255,.16); color:#fff; font-weight:600;}

/* เมนูย่อยแบบกดเปิด ใช้ details/summary จึงทำงานได้แม้ปิด JavaScript */
.nav-group{position:relative;}
.nav-group > summary{
  color:#C6E6D0; padding:7px 13px; border-radius:8px; white-space:nowrap; cursor:pointer;
  display:flex; align-items:center; gap:6px; list-style:none; font-size:13px;
}
.nav-group > summary::-webkit-details-marker{display:none;}
.nav-group > summary::after{content:"▾"; font-size:9px; opacity:.8;}
.nav-group > summary:hover{background:rgba(255,255,255,.1); color:#fff;}
.nav-group[open] > summary{background:rgba(255,255,255,.16); color:#fff;}
.nav-group.has-current > summary{background:rgba(255,255,255,.16); color:#fff; font-weight:600;}
.nav-drop{
  position:absolute; top:calc(100% + 6px); left:0; z-index:60;
  background:var(--surface); border:1px solid var(--line); border-radius:11px;
  box-shadow:var(--shadow-lg); padding:6px; min-width:210px;
  display:flex; flex-direction:column; gap:2px;
}
.nav-drop a{
  color:var(--ink-2); padding:8px 11px; border-radius:7px; font-size:13px; white-space:nowrap;
}
.nav-drop a:hover{background:var(--brand-soft); color:var(--brand); text-decoration:none;}
.nav-drop a.on{background:var(--brand-soft); color:var(--brand); font-weight:600;}
.nav-drop hr{border:0; border-top:1px solid var(--line-soft); margin:4px 2px;}
.nav-drop .group-label{
  font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  padding:6px 11px 3px;
}
.nav-right{display:flex; align-items:center; gap:14px; flex:none;}
.nav-bell{position:relative; color:#C6E6D0; font-size:16px; line-height:1;}
.nav-bell b{
  position:absolute; top:-6px; right:-8px; background:#DC2626; color:#fff; font-size:9px;
  min-width:16px; height:16px; border-radius:100px; display:flex; align-items:center;
  justify-content:center; font-weight:700; padding:0 4px;
}
.nav-user{
  display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.14);
  padding:6px 13px 6px 7px; border-radius:100px; font-size:12.5px; color:#fff;
}
.nav-user .av{
  width:26px; height:26px; border-radius:50%; background:var(--gold); color:var(--brand-dark);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex:none;
}
.nav-user .role{font-size:10px; color:#A9D9B8; display:block; line-height:1.1;}
.btn-login{
  background:#fff; color:var(--brand-dark); font-weight:600; font-size:12.5px;
  padding:8px 18px; border-radius:9px; font-family:"Kanit",sans-serif;
}
.btn-login:hover{text-decoration:none; background:#E7F4EB;}
.nav-toggle{display:none; background:none; border:0; color:#fff; font-size:20px; cursor:pointer; padding:4px 8px;}

/* จอกลาง ย่อชื่อเมนูให้สั้นลงก่อน แล้วค่อยยุบเป็นปุ่มเมื่อจอเล็กจริง */
@media (max-width:1180px){
  .nav-inner{gap:14px;}
  .nav-menu a, .nav-group > summary{padding:7px 9px; font-size:12.5px;}
  .nav-user .full{display:none;}
}

@media (max-width:1024px){
  .nav-inner{height:auto; flex-wrap:wrap; padding:10px 0; gap:12px;}
  .nav-toggle{display:block; order:2; margin-left:auto;}
  .nav-menu{
    order:4; flex-basis:100%; display:none; flex-direction:column; gap:2px;
    padding-top:8px; border-top:1px solid rgba(255,255,255,.16);
  }
  .nav-menu.open{display:flex;}
  .nav-right{order:3;}
  /* ในโหมดยุบ เมนูย่อยกางอยู่กับที่ ไม่ลอยทับเนื้อหา */
  .nav-group{width:100%;}
  .nav-drop{
    position:static; background:rgba(255,255,255,.08); border:0; box-shadow:none;
    margin:2px 0 4px 14px; min-width:0; padding:4px;
  }
  .nav-drop a{color:#C6E6D0;}
  .nav-drop a:hover, .nav-drop a.on{background:rgba(255,255,255,.14); color:#fff;}
  .nav-drop .group-label{color:rgba(255,255,255,.55);}
  .nav-drop hr{border-top-color:rgba(255,255,255,.16);}
}

/* ---------------------------------------------------------------- hero */
.hero{
  background:
    radial-gradient(90% 130% at 80% 0%, rgba(110,231,155,.30) 0%, rgba(110,231,155,0) 60%),
    linear-gradient(112deg,#0B3D20 0%,#14682F 52%,#1E9950 100%);
  color:#fff; padding:38px 0 44px;
}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:36px; align-items:start;}
@media (max-width:1000px){ .hero-grid{grid-template-columns:1fr; gap:24px;} }
.hero h1{font-size:clamp(22px,3vw,30px); line-height:1.28; margin-bottom:4px; color:#fff;}
.hero .sub{font-family:"Kanit",sans-serif; font-size:clamp(17px,2.2vw,22px); color:var(--gold); margin-bottom:14px;}
.hero p{font-size:14px; color:#CDE8D6; max-width:48ch; margin:0; line-height:1.75;}

/* -------------------------------------------------------------- search */
.search-card{background:var(--surface); border-radius:14px; padding:18px; box-shadow:0 18px 44px -18px rgba(6,32,17,.55);}
.search-card h2{font-size:15px; margin-bottom:12px;}
.search-grid{display:grid; gap:9px; margin-bottom:9px;}
.search-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr));}
.search-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:560px){ .search-grid.c3,.search-grid.c2{grid-template-columns:1fr;} }
.search-actions{display:grid; grid-template-columns:1.7fr 1fr; gap:9px; margin-top:12px;}

/* --------------------------------------------------------------- forms */
.field{display:block;}
.field > label{
  display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:5px;
}
.field > label .req{color:var(--crit); margin-left:2px;}
.field > label .tag-new{
  font-size:9px; background:var(--brand-soft); color:var(--brand); padding:1px 6px;
  border-radius:100px; margin-left:5px; font-weight:700; border:1px solid var(--brand-line);
}
.input, .select, .textarea{
  width:100%; border:1px solid var(--line); border-radius:9px; padding:9px 12px;
  font-size:13.5px; font-family:inherit; color:var(--ink); background:var(--surface);
  transition:border-color .15s, box-shadow .15s;
}
.input::placeholder, .textarea::placeholder{color:var(--ink-3);}
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(21,128,61,.15);
}
.textarea{min-height:88px; resize:vertical; line-height:1.65;}
.select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23647A6B' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; padding-right:30px;
}
.input.is-missing,.select.is-missing,.textarea.is-missing{
  border-color:#E8A33D; background:rgba(245,158,11,.06);
}
.input.is-error,.select.is-error,.textarea.is-error{border-color:var(--crit); background:var(--crit-soft);}
.hint{font-size:11px; color:var(--ink-3); margin-top:4px; line-height:1.5;}
.hint.warn{color:var(--warn);}
.hint.err{color:var(--crit); font-weight:600;}
.field-row{display:grid; gap:14px; margin-bottom:14px;}
.field-row.c2{grid-template-columns:repeat(2,minmax(0,1fr));}
.field-row.c3{grid-template-columns:repeat(3,minmax(0,1fr));}
.field-row.c4{grid-template-columns:repeat(4,minmax(0,1fr));}
.field-row.c21{grid-template-columns:2fr 1fr;}
@media (max-width:760px){
  .field-row.c2,.field-row.c3,.field-row.c4,.field-row.c21{grid-template-columns:1fr;}
}

.check{display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--ink-2); cursor:pointer; padding:6px 0;}
.check input{width:16px; height:16px; accent-color:var(--brand); margin:2px 0 0; flex:none; cursor:pointer;}

.choice-set{display:flex; gap:7px; flex-wrap:wrap;}
.choice{position:relative;}
.choice input{position:absolute; opacity:0; width:0; height:0;}
.choice span{
  display:inline-block; font-size:12.5px; padding:6px 13px; border-radius:100px;
  border:1px solid var(--line); color:var(--ink-2); background:var(--surface); cursor:pointer;
  transition:all .15s;
}
.choice span:hover{border-color:var(--brand-line); background:var(--brand-soft);}
.choice input:checked + span{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600;}
.choice input:focus-visible + span{outline:2px solid var(--brand); outline-offset:2px;}

/* ------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:"Kanit",sans-serif; font-weight:500; font-size:13.5px;
  padding:9px 20px; border-radius:9px; border:1px solid transparent; cursor:pointer;
  background:var(--brand); color:#fff; transition:background .15s, box-shadow .15s;
}
.btn:hover{background:var(--brand-dark); text-decoration:none; color:#fff;}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--ink-2);}
.btn.ghost:hover{background:var(--surface-3); color:var(--ink);}
.btn.soft{background:var(--brand-soft); color:var(--brand); border-color:var(--brand-line);}
.btn.soft:hover{background:var(--brand-line); color:var(--brand-dark);}
.btn.danger{background:var(--crit);}
.btn.danger:hover{background:#8F1414;}
.btn.sm{font-size:12px; padding:6px 13px; border-radius:7px;}
.btn.block{width:100%;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

/* --------------------------------------------------------------- cards */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}
.card-pad{padding:18px 20px;}
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 20px; border-bottom:1px solid var(--line);
}
.card-head h2,.card-head h3{font-size:15px;}
.card-head .more{font-size:12px; color:var(--brand);}

.section{padding:22px 0;}
.grid{display:grid; gap:16px;}
.grid.k5{grid-template-columns:repeat(5,minmax(0,1fr));}
.grid.k4{grid-template-columns:repeat(4,minmax(0,1fr));}
.grid.k3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid.k2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid.split{grid-template-columns:1.05fr 1fr;}
@media (max-width:1100px){ .grid.k5{grid-template-columns:repeat(3,1fr);} .grid.split{grid-template-columns:1fr;} }
@media (max-width:820px){ .grid.k5,.grid.k4,.grid.k3{grid-template-columns:repeat(2,1fr);} .grid.k2{grid-template-columns:1fr;} }
@media (max-width:520px){ .grid.k5,.grid.k4,.grid.k3{grid-template-columns:1fr;} }

/* ----------------------------------------------------------------- kpi */
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px; display:flex; gap:12px; align-items:flex-start;
}
.kpi:hover{box-shadow:var(--shadow); text-decoration:none;}
.kpi .ico{
  width:42px; height:42px; border-radius:11px; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  background:var(--brand-soft); color:var(--brand);
}
.kpi .lbl{display:block; font-size:12px; color:var(--ink-2); line-height:1.35; margin-bottom:2px;}
.kpi .val{
  display:block; font-family:"Kanit",sans-serif; font-size:27px; font-weight:500;
  line-height:1.1; font-variant-numeric:tabular-nums; color:var(--ink);
}
.kpi .val small{font-size:11.5px; color:var(--ink-3); font-weight:400; margin-left:4px; font-family:inherit;}
.kpi .lnk{display:block; font-size:11px; color:var(--brand); margin-top:5px;}
.kpi.good .ico{background:var(--good-soft); color:var(--good);}
.kpi.warn .ico{background:var(--warn-soft); color:var(--warn);}
.kpi.crit .ico{background:var(--crit-soft); color:var(--crit);}
.kpi.info .ico{background:var(--info-soft); color:var(--info);}
.kpi.attention{border-color:var(--warn-line); background:rgba(245,158,11,.05);}
.kpi.attention .val,.kpi.attention .lnk{color:var(--warn);}

/* -------------------------------------------------------------- tables */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
table.data{width:100%; border-collapse:collapse; font-size:13px;}
table.data th{
  text-align:left; font-size:11.5px; font-weight:600; color:var(--ink-3);
  padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface-2);
  white-space:nowrap; position:sticky; top:0;
}
table.data td{
  padding:11px 14px; border-bottom:1px solid var(--line-soft);
  color:var(--ink-2); vertical-align:middle; line-height:1.5;
}
table.data tr:last-child td{border-bottom:0;}
table.data tbody tr:hover{background:var(--surface-2);}
table.data td.name{color:var(--ink); font-weight:500;}
table.data td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}

/* ------------------------------------------------- รายการไฟล์แนบในตาราง */
.file-list{display:inline-block; position:relative;}
.file-list > summary{
  cursor:pointer; list-style:none; color:var(--brand); font-size:12.5px;
  padding:2px 9px; border-radius:100px; border:1px solid var(--brand-line);
  background:var(--brand-soft); white-space:nowrap;
}
.file-list > summary::-webkit-details-marker{display:none;}
.file-list > summary::after{content:" ▾"; font-size:9px;}
.file-list > summary:hover{background:var(--brand-line);}
.file-list-drop{
  position:absolute; right:0; top:calc(100% + 5px); z-index:40;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-lg); padding:6px; min-width:250px; max-width:340px;
  display:flex; flex-direction:column; gap:2px; text-align:left;
}
.file-list-drop a{
  display:flex; align-items:baseline; gap:8px; padding:7px 10px; border-radius:7px;
  color:var(--ink-2); font-size:12.5px;
}
.file-list-drop a:hover{background:var(--brand-soft); color:var(--brand); text-decoration:none;}
.file-list-drop .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.file-list-drop .cat{font-size:10.5px; color:var(--ink-3); flex:none;}

/* ------------------------------------------------------ ป้ายหลายประเภท */
.type-tags{display:flex; gap:4px; flex-wrap:wrap;}
.type-tag{
  font-size:11px; padding:2px 8px; border-radius:100px;
  background:var(--surface-3); color:var(--ink-2); border:1px solid var(--line);
  white-space:nowrap;
}
.type-tag.primary{background:var(--brand-soft); color:var(--brand); border-color:var(--brand-line); font-weight:600;}

/* --------------------------------------------------------------- pills */
.pill{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600;
  padding:3px 10px; border-radius:100px; white-space:nowrap; border:1px solid transparent;
}
.pill.active{color:var(--good); background:var(--good-soft); border-color:var(--good-line);}
.pill.expiring{color:var(--warn); background:var(--warn-soft); border-color:var(--warn-line);}
.pill.expired{color:var(--crit); background:var(--crit-soft); border-color:var(--crit-line);}
.pill.unknown{color:var(--brand); background:var(--brand-soft); border-color:var(--brand-line);}
.pill.no_expire{color:var(--info); background:var(--info-soft); border-color:var(--info-line);}
.pill.neutral{color:var(--ink-3); background:var(--surface-3); border-color:var(--line);}
.pill.draft{color:var(--ink-3); background:var(--surface-3); border-color:var(--line);}

/* -------------------------------------------------------------- alerts */
.alert{
  display:flex; gap:12px; align-items:flex-start; padding:13px 16px; border-radius:11px;
  border:1px solid var(--line); background:var(--surface); font-size:13.5px;
  margin-bottom:16px; box-shadow:var(--shadow);
}
.alert .ic{font-size:16px; flex:none; line-height:1.4;}
.alert .t{font-family:"Kanit",sans-serif; font-weight:500; margin-bottom:2px;}
.alert.ok{background:var(--good-soft); border-color:var(--good-line); color:#14532D;}
.alert.warn{background:var(--warn-soft); border-color:var(--warn-line); color:#7C4A0A;}
.alert.err{background:var(--crit-soft); border-color:var(--crit-line); color:#7F1D1D;}
.alert.info{background:var(--info-soft); border-color:var(--info-line); color:#1E3A8A;}
.alert ul{margin:6px 0 0; padding-left:18px;}
.alert li{margin-bottom:2px;}

/* --------------------------------------------------------------- charts */
.donut-wrap{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.donut-legend{font-size:11.5px; color:var(--ink-2); display:flex; flex-direction:column; gap:6px; min-width:0; flex:1;}
.donut-legend div{display:flex; align-items:center; gap:7px; min-width:0;}
.donut-legend i{width:9px; height:9px; border-radius:2px; flex:none;}
.donut-legend .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.donut-legend b{margin-left:auto; font-variant-numeric:tabular-nums; padding-left:8px; color:var(--ink);}

.vbars{display:flex; align-items:flex-end; gap:10px; height:150px; padding-left:30px; position:relative;}
.vbars .yaxis{
  position:absolute; left:0; top:0; bottom:20px; width:26px;
  display:flex; flex-direction:column; justify-content:space-between;
  font-size:9.5px; color:var(--ink-3); text-align:right; font-variant-numeric:tabular-nums;
}
.vbar{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end;}
.vbar .b{width:100%; max-width:38px; border-radius:4px 4px 0 0; background:var(--brand); min-height:2px;}
.vbar .b.now{background:var(--brand-light);}
.vbar .n{font-size:10.5px; font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600;}
.vbar .x{font-size:10px; color:var(--ink-3); font-variant-numeric:tabular-nums;}

/* -------------------------------------------------------------- ranking */
.rank{display:flex; flex-direction:column; gap:10px;}
.rank .item{display:flex; align-items:center; gap:11px; font-size:12.5px; color:var(--ink-2);}
.rank .no{
  width:20px; height:20px; border-radius:50%; background:var(--brand); color:#fff;
  font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none;
}
.rank .no.dim{background:var(--surface-3); color:var(--brand);}
.rank .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rank b{margin-left:auto; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; padding-left:8px;}

/* ----------------------------------------------------------------- news */
.news-item{display:flex; gap:11px; margin-bottom:13px;}
.news-item:last-child{margin-bottom:0;}
.news-item .thumb{
  width:70px; height:48px; border-radius:8px; flex:none; object-fit:cover;
  background:linear-gradient(135deg,var(--brand-light),var(--brand-dark));
}
.news-item .dt{font-size:10.5px; color:var(--ink-3);}
.news-item .tt{font-size:12.5px; color:var(--ink); line-height:1.45; display:block;}

.doc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
@media (max-width:640px){ .doc-grid{grid-template-columns:repeat(2,1fr);} }
.doc{border:1px solid var(--line); border-radius:10px; padding:12px 9px; text-align:center; display:block; color:inherit;}
.doc:hover{border-color:var(--brand-line); background:var(--brand-soft); text-decoration:none;}
.doc .fi{
  width:32px; height:36px; border-radius:6px; margin:0 auto 9px; display:flex;
  align-items:center; justify-content:center; font-size:14px; color:#fff; background:var(--brand);
}
.doc .nm{font-size:11px; color:var(--ink-2); line-height:1.4; margin-bottom:7px; min-height:31px;}
.doc .ex{font-size:9px; font-weight:700; padding:2px 7px; border-radius:4px; color:#fff; background:var(--crit);}

/* ------------------------------------------------------------ form page */
.form-layout{display:grid; grid-template-columns:250px minmax(0,1fr); gap:20px; align-items:start;}
@media (max-width:980px){ .form-layout{grid-template-columns:1fr;} }
.rail{position:sticky; top:78px;}
@media (max-width:980px){ .rail{position:static;} }

.steps{display:flex; flex-direction:column; gap:2px; margin-bottom:14px;}
.step{
  display:flex; gap:11px; align-items:flex-start; padding:10px 11px;
  border-radius:9px; font-size:12.5px; color:var(--ink-2); cursor:pointer; border:0;
  background:none; width:100%; text-align:left; font-family:inherit;
}
.step:hover{background:var(--surface-3); text-decoration:none;}
.step.on{background:var(--brand); color:#fff;}
.step.on:hover{background:var(--brand-dark);}
.step .n{
  width:21px; height:21px; border-radius:50%; flex:none; display:flex; align-items:center;
  justify-content:center; font-size:10.5px; font-weight:700;
  background:var(--surface-3); color:var(--ink-2);
}
.step.on .n{background:rgba(255,255,255,.28); color:#fff;}
.step.done .n{background:var(--good); color:#fff;}
.step .st{font-size:10.5px; opacity:.82; display:block; line-height:1.35;}

.meter{background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:14px;}
.meter .top{display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:var(--ink-2); margin-bottom:8px;}
.meter .top b{font-family:"Kanit",sans-serif; color:var(--ink); font-size:15px;}
.meter .track{height:8px; border-radius:100px; background:var(--surface-3); overflow:hidden;}
.meter .fill{height:100%; background:linear-gradient(90deg,var(--brand-light),var(--brand)); border-radius:100px;}
.meter .hint{font-size:10.5px; color:var(--ink-3); margin-top:9px; line-height:1.55;}

.fieldset{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:16px; box-shadow:var(--shadow);}
.fieldset > .fh{display:flex; align-items:center; gap:10px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line);}
.fieldset .fh .num{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; color:var(--brand);
  background:var(--brand-soft); padding:3px 8px; border-radius:6px; font-weight:600; flex:none;
  border:1px solid var(--brand-line);
}
.fieldset .fh h3{font-size:15px; flex:1;}
.fieldset .fh .cnt{font-size:11px; color:var(--ink-3); flex:none;}

.partner-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  border:1px solid var(--line); border-radius:9px; padding:9px 11px; margin-bottom:8px;
}
.partner-row .av{
  width:28px; height:28px; border-radius:7px; background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-size:13px; flex:none;
}
.partner-row .input{border:0; padding:4px 0; font-size:13px;}
.partner-row .input:focus{box-shadow:none;}
.icon-btn{
  background:none; border:0; color:var(--ink-3); font-size:15px; cursor:pointer;
  padding:4px 8px; border-radius:6px; line-height:1;
}
.icon-btn:hover{background:var(--crit-soft); color:var(--crit);}
.add-row{
  width:100%; border:1.5px dashed var(--line); border-radius:9px; padding:10px;
  text-align:center; font-size:12.5px; color:var(--brand); font-weight:600;
  background:none; cursor:pointer; font-family:inherit;
}
.add-row:hover{border-color:var(--brand); background:var(--brand-soft);}

.file-drop{border:1.5px dashed var(--line); border-radius:11px; padding:20px; text-align:center; cursor:pointer; display:block;}
.file-drop:hover{border-color:var(--brand); background:var(--brand-soft);}
.file-drop .ic{font-size:22px; margin-bottom:8px;}
.file-drop .t{font-size:13px; color:var(--ink); font-weight:600; margin-bottom:3px;}
.file-drop .d{font-size:11px; color:var(--ink-3); line-height:1.5;}

.form-actions{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  position:sticky; bottom:0; background:var(--ground); padding:14px 0;
  border-top:1px solid var(--line); margin-top:4px;
}

/* --------------------------------------------------------- pagination */
.pager{display:flex; gap:5px; align-items:center; justify-content:center; padding:18px 0; flex-wrap:wrap;}
.pager a,.pager span{
  min-width:34px; height:34px; padding:0 11px; border-radius:8px; border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center; font-size:12.5px;
  color:var(--ink-2); background:var(--surface); font-variant-numeric:tabular-nums;
}
.pager a:hover{border-color:var(--brand); color:var(--brand); text-decoration:none;}
.pager .cur{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600;}
.pager .off{opacity:.4;}

/* -------------------------------------------------------------- footer */
.foot{background:linear-gradient(100deg,#0C4A26,#15803D); color:#fff; margin-top:36px; padding:24px 0;}
.foot-grid{display:grid; grid-template-columns:1.7fr 1fr; gap:26px;}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr;} }
.values{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:820px){ .values{grid-template-columns:repeat(2,1fr);} }
.value{display:flex; gap:10px; align-items:flex-start;}
.value .ic{width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; font-size:14px; flex:none;}
.value .t{font-family:"Kanit",sans-serif; font-size:13px; font-weight:500; margin-bottom:2px;}
.value .d{font-size:10.5px; color:#B9DEC6; line-height:1.5;}
.contact{font-size:12.5px; color:#CDE8D6;}
.contact .t{font-family:"Kanit",sans-serif; font-size:14px; color:#fff; margin-bottom:9px; font-weight:500;}
.contact div{margin-bottom:6px; display:flex; gap:9px; align-items:center;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.16); margin-top:20px; padding-top:14px; font-size:11.5px; color:#A9D3B8; text-align:center;}

/* --------------------------------------------------------------- login */
.login-page{display:flex; align-items:center; justify-content:center; padding:44px var(--wrap-pad);}
.login-card{width:100%; max-width:430px;}
.login-head{text-align:center; padding:30px 26px 20px;}
.login-head img{margin-bottom:12px;}
.login-head h1{font-size:21px; margin-bottom:5px;}
.login-head p{font-size:12.5px; color:var(--ink-3); margin:0; line-height:1.6;}

/* ปุ่ม SSO อยู่ใต้ฟอร์ม เป็นทางเลือกรอง จึงไม่ทึบ ไม่ให้แย่งน้ำหนักปุ่มหลัก */
.btn-sso{
  background:var(--brand-soft); color:var(--brand); border-color:var(--brand-line);
  padding:11px 20px;
}
.btn-sso:hover{background:var(--brand-line); color:var(--brand-dark);}
.sso-mark{
  background:var(--brand); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  padding:3px 7px; border-radius:5px; font-family:"IBM Plex Sans Thai",sans-serif;
}

.or-divider{display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--ink-3); font-size:11.5px;}
.or-divider::before,.or-divider::after{content:""; flex:1; height:1px; background:var(--line);}

.login-notes{
  margin-top:18px; padding:16px 18px; border-radius:11px;
  background:var(--surface-3); border:1px solid var(--line);
  font-size:12px; color:var(--ink-2); line-height:1.7;
}
.login-notes p{margin:0 0 10px; max-width:none;}
.hint.center{text-align:center;}

/* --------------------------------------------------------------- empty */
.empty{text-align:center; padding:52px 20px; color:var(--ink-3);}
.empty .ic{font-size:34px; margin-bottom:12px; opacity:.45;}
.empty .t{font-family:"Kanit",sans-serif; font-size:16px; color:var(--ink-2); margin-bottom:6px;}
.empty .d{font-size:13px; max-width:44ch; margin:0 auto 18px;}

/* ---------------------------------------------- ย่อระยะให้พอดีจอเล็ก
   จอคอมใช้ระยะเต็มตาม --wrap-pad ส่วนจอแคบลดช่องไฟรอบกล่องลง
   เพื่อให้เนื้อหาได้ความกว้างคืนมาแทนที่จะถูกขอบกินไป */
@media (max-width:820px){
  .section{padding:18px 0;}
  .grid{gap:12px;}
  .card-pad{padding:15px 16px;}
  .card-head{padding:13px 16px;}
  .fieldset{padding:16px;}
  .hero{padding:30px 0 34px;}
  .foot{margin-top:26px; padding:20px 0;}
}

@media (max-width:560px){
  body{font-size:14.5px;}
  .section{padding:14px 0;}
  .card-pad{padding:13px 14px;}
  .card-head{padding:12px 14px; gap:8px;}
  .fieldset{padding:14px; margin-bottom:12px;}
  .fieldset > .fh{margin-bottom:13px; padding-bottom:10px;}
  .search-card{padding:15px;}
  .search-actions{grid-template-columns:1fr;}
  .hero{padding:24px 0 28px;}
  .hero p{max-width:none;}

  /* ตารางยังเลื่อนแนวนอนได้ในกรอบของตัวเอง แค่บีบช่องไฟให้เห็นคอลัมน์มากขึ้น */
  table.data{font-size:12.5px;}
  table.data th,table.data td{padding:9px 10px;}

  .vbars{gap:5px; padding-left:24px;}
  .vbars .yaxis{width:20px;}
  .doc-grid{grid-template-columns:repeat(2,1fr);}

  /* แถบปุ่มท้ายฟอร์มติดขอบล่าง ให้ปุ่มเต็มความกว้างจะกดง่ายกว่าเรียงแออัด */
  .form-actions{padding:12px 0;}
  .form-actions .btn{flex:1 1 100%; justify-content:center;}
  .form-actions .spacer{display:none;}

  .login-page{padding:26px var(--wrap-pad);}
  .foot{margin-top:22px;}
  .foot-bottom{margin-top:16px;}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
}

@media print{
  .nav,.foot,.form-actions,.pager,.rail{display:none !important;}
  body{background:#fff;}
  .card,.fieldset{box-shadow:none; border-color:#ccc;}
}