/* ============================================================
   newdrugs — App theme (light navy + mint), restyled to match the
   institution's PCM MedXplore product (clean white surfaces, soft
   blue-tinted shadows, pill badges, calm confident navy + a mint
   accent instead of the earlier purple+gold). Built on Bootstrap 5,
   server-rendered (CodeIgniter 3).
   ============================================================ */
:root{
  --brand-900:#0c2540;
  --brand-800:#123456;
  --brand-700:#1a4570;
  --brand-600:#2c5c8f;
  --brand-500:#4778ab;
  --accent-500:#1c9c81;
  --accent-400:#2fb595;
  --accent-300:#7cd9c1;
  --ink:#1f2733;
  --muted:#6b7785;
  --line:#e3e8f0;
  --bg:#f4f8fc;
  --card:#ffffff;
  --radius:16px;
  --shadow:0 4px 20px rgba(12,37,64,.08);
  --shadow-lg:0 16px 40px rgba(12,37,64,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Sarabun",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Thai",sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:15px;
  line-height:1.65;
}
a{color:var(--brand-600);text-decoration:none}
a:hover{color:var(--brand-800)}
h1,h2,h3,h4,h5{font-weight:600;color:var(--brand-900);letter-spacing:.2px}
/* Headings default to the brand colour; force LIGHT on dark surfaces so they don't "sink" into the background.
   .nd-pagehead itself is light now (see Hero section below) — only its
   --cover variant still sits on a dark photo overlay, so only THAT one forces white. */
.bg-brand h1,.bg-brand h2,.bg-brand h3,.bg-brand h4,.bg-brand h5,.bg-brand h6,
.modal-header.bg-brand .modal-title,.modal-header.bg-brand h1,.modal-header.bg-brand h2,.modal-header.bg-brand h3,.modal-header.bg-brand h4,.modal-header.bg-brand h5,
.nd-pagehead--cover h1,.nd-pagehead--cover h2,.nd-pagehead--cover h3,.nd-pagehead--cover h4,
.nd-mission h1,.nd-mission h2,.nd-mission h3,
.nd-footer h1,.nd-footer h2,.nd-footer h3,.nd-footer h4,.nd-footer h5,.nd-footer h6{color:#fff}
.badge.bg-brand{color:#fff}

/* ---------- Top bar + Navbar ---------- */
.nd-topbar{
  background:var(--brand-900);
  color:#cdd7e6;
  font-size:13px;
}
.nd-topbar a{color:#cdd7e6}
.nd-topbar a:hover{color:#fff}

.nd-navbar{
  background:#fff;
  box-shadow:var(--shadow);
  border-bottom:1px solid var(--line);
}
.nd-navbar .navbar-brand{display:flex;align-items:center;gap:.7rem;color:var(--brand-900);font-weight:600}
.nd-navbar .navbar-brand img{height:46px;width:auto}
.nd-navbar .brand-text small{display:block;font-size:11px;color:var(--muted);font-weight:400;letter-spacing:.5px}
.nd-navbar .navbar-nav .nav-link{
  color:var(--brand-800);font-weight:500;padding:.55rem 1rem;border-radius:8px;transition:.15s;
}
.nd-navbar .navbar-nav .nav-link:hover,
.nd-navbar .navbar-nav .nav-link:focus{color:var(--brand-900);background:rgba(26,69,112,.06)}
.nd-navbar .navbar-nav .nav-link.active{color:var(--brand-700);background:transparent;position:relative}
.nd-navbar .navbar-nav .nav-link.active::after{
  content:"";position:absolute;left:1rem;right:1rem;bottom:.15rem;height:2px;background:var(--accent-500);border-radius:2px;
}
.nd-navbar .dropdown-menu{border:0;box-shadow:var(--shadow-lg);border-radius:12px;padding:.4rem}
.nd-navbar .dropdown-item{border-radius:8px;padding:.55rem .9rem;font-weight:500}
.nd-navbar .dropdown-item:active{background:var(--brand-600)}
.nd-navbar .navbar-toggler{border-color:var(--line)}
.nd-navbar .navbar-toggler-icon{filter:none}
/* Pill CTA on the far right (เข้าสู่ระบบ / ลงทะเบียน-style nav action) */
.nd-navbar .nd-nav-cta{
  display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1.3rem;border-radius:50px;
  border:1.5px solid var(--brand-700);color:var(--brand-700);font-weight:600;font-size:.92rem;
  transition:background .15s,color .15s;
}
.nd-navbar .nd-nav-cta:hover{background:var(--brand-700);color:#fff}
.nd-navbar .nd-nav-cta.active{background:var(--brand-700);color:#fff}
.nd-navbar .nd-nav-cta i{font-size:.85rem}
@media(max-width:991.98px){
  .nd-navbar .nd-nav-cta{margin-top:.75rem;justify-content:center}
}

/* ---------- Hero / page header ---------- */
/* Light, product-style header (was a dark navy gradient banner) — white/soft-
   blue ground with a faint radial tint, navy headings instead of white-on-dark. */
.nd-pagehead{
  background:linear-gradient(160deg,#eef5fb 0%,var(--bg) 55%,var(--bg) 100%);
  color:var(--ink);padding:2.4rem 0 2.6rem;position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.nd-pagehead::after{
  content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(28,156,129,.12),transparent 70%);
}
/* หัวเรื่องแบบมีภาพหน้าปก — ส่งภาพเข้ามาทาง --nd-cover (ดู guidebook.php)
   ทับด้วยไล่สีกรมท่าเพื่อให้ตัวหนังสือสีขาวยังอ่านออกทุกจอ — cover variant keeps
   the dark-on-photo treatment since it overlays a real image, unlike the plain
   pagehead above which is now light. */
.nd-pagehead--cover{
  background-image:linear-gradient(100deg,rgba(12,37,64,.94) 0%,rgba(12,37,64,.82) 42%,rgba(12,37,64,.45) 100%),var(--nd-cover);
  background-size:cover;background-position:center right;padding:3.2rem 0 3.4rem;
  color:#fff;border-bottom:0;
}
.nd-pagehead--cover::after{display:none}
.nd-pagehead--cover h1,.nd-pagehead--cover .crumb,.nd-pagehead--cover .crumb a{color:#fff}
/* ภาพที่จุดสนใจอยู่ช่วงกลางค่อนล่าง (เช่น แถวครูฝึกในภาพพิธีปิดการฝึก) */
.nd-pagehead--cover-top{background-position:center 62%}
@media (max-width:767px){
  .nd-pagehead--cover{background-image:linear-gradient(100deg,rgba(12,37,64,.95),rgba(12,37,64,.86)),var(--nd-cover);padding:2.4rem 0 2.6rem}
}
.nd-pagehead h1{color:var(--brand-900);margin:0;font-size:1.7rem;font-weight:700}
.nd-pagehead .crumb{color:var(--muted);font-size:.85rem}
.nd-pagehead .crumb a{color:var(--brand-600)}
.nd-pagehead .crumb a:hover{color:var(--brand-800)}
.nd-pagehead .breadcrumb-item.active{color:var(--muted)}
.nd-pagehead .breadcrumb-item+.breadcrumb-item::before{color:#b7c3d3}

/* ---------- Cards ---------- */
.nd-card{
  display:block;  /* cards are sometimes <a> (inline by default) — force block so the border wraps the whole card */
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;height:100%;transition:transform .18s,box-shadow .18s;
}
.nd-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.nd-card .nd-card-media{height:160px;background:var(--brand-700);position:relative;overflow:hidden}
.nd-card .nd-card-media img{width:100%;height:100%;object-fit:cover;object-position:center top}
/* ภาพที่จุดสนใจอยู่กลางค่อนล่าง (เช่น แถวครูฝึกในภาพพิธีปิดการฝึก) */
.nd-card .nd-card-media img.nd-media--mid{object-position:center 62%}

/* person card — show the FULL photo (no crop), portrait-friendly area */
.nd-person-media{aspect-ratio:3/4;background:#eef4fa;position:relative;overflow:hidden;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}
.nd-person-media img{width:100%;height:100%;object-fit:contain;display:block}
.nd-person-media .nd-avatar{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:2.8rem;letter-spacing:1px;text-shadow:0 2px 6px rgba(0,0,0,.35);text-transform:uppercase}
.nd-card .nd-card-media .nd-ico{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:3rem;color:#fff;background:linear-gradient(135deg,var(--brand-700),var(--brand-500));
}
.nd-card .nd-card-body{padding:1.1rem 1.2rem}
.nd-card h3{font-size:1.05rem;margin:0 0 .35rem}
.nd-card p{color:var(--muted);font-size:.9rem;margin:0}

/* pill badges above a card's title (format + registration status) */
.nd-pill-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.7rem}
.nd-pill{
  display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .75rem;border-radius:50px;
  font-size:.76rem;font-weight:600;line-height:1.2;white-space:nowrap;
}
.nd-pill-format{background:rgba(26,69,112,.08);color:var(--brand-700)}
.nd-pill-open{background:rgba(28,156,129,.12);color:var(--accent-500)}
.nd-pill-closed{background:#eef0f3;color:var(--muted)}
/* icon-labelled meta rows (date / time / venue) under a card or panel */
.nd-meta-row{display:flex;align-items:center;gap:.55rem;font-size:.86rem;color:#3a4656;margin:.35rem 0}
.nd-meta-row .nd-meta-ico{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(26,69,112,.08);color:var(--brand-700);font-size:.82rem;
}

/* menu tiles on landing — photo background + brand-colour gradient overlay */
.nd-tile{
  display:block;border-radius:var(--radius);overflow:hidden;position:relative;
  box-shadow:var(--shadow);min-height:230px;color:#fff;
  background:linear-gradient(135deg,var(--brand-800),var(--brand-600));
  transition:transform .2s,box-shadow .2s;
}
.nd-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);color:#fff}
.nd-tile .nd-tile-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:.6;transition:transform .4s,opacity .2s}
.nd-tile:hover .nd-tile-bg{transform:scale(1.06);opacity:.7}
.nd-tile::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(12,37,64,.25) 0%,rgba(12,37,64,.78) 70%,rgba(12,37,64,.95) 100%)}
.nd-tile .nd-tile-inner{position:relative;z-index:3;padding:1.4rem;display:flex;flex-direction:column;height:100%;min-height:230px}
.nd-tile .nd-tile-ico{font-size:2.4rem;color:var(--accent-300);margin-bottom:.4rem;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.nd-tile h3{color:#fff;font-size:1.18rem;margin:0;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.nd-tile p{color:#e8eef7;font-size:.85rem;margin:.25rem 0 0;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.nd-tile .nd-tile-go{margin-top:auto;padding-top:.6rem;color:var(--accent-300);font-weight:600;font-size:.9rem}

/* menu cards — image on top, text below (clear & legible) */
.nd-menu-card{
  display:block;height:100%;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative;
  transition:transform .2s,box-shadow .2s;color:inherit;
}
.nd-menu-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);color:inherit}
.nd-menu-card .nd-menu-media{height:150px;position:relative;background:var(--brand-700);z-index:2;overflow:hidden;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}
.nd-menu-card .nd-menu-media img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .4s;filter:saturate(.92) contrast(1.02)}
.nd-menu-card:hover .nd-menu-media img{transform:scale(1.07)}
/* unifying brand-colour tint so the assorted photos read as one cohesive set + blend into the card */
.nd-menu-card .nd-menu-media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,37,64,.30) 0%,rgba(12,37,64,.10) 45%,rgba(12,37,64,.55) 100%);
}
.nd-menu-card .nd-menu-ico{
  position:absolute;left:1rem;top:126px;width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:1.45rem;color:#1f2733;
  background:var(--accent-400);box-shadow:0 5px 14px rgba(0,0,0,.3);z-index:10;
}
.nd-menu-card .nd-menu-body{padding:1.9rem 1.15rem 1.15rem;position:relative;z-index:1}
.nd-menu-card h3{font-size:1.08rem;margin:0 0 .1rem;color:var(--brand-900)}
.nd-menu-card .nd-menu-en{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--accent-500);margin-bottom:.4rem}
.nd-menu-card p{color:var(--muted);font-size:.85rem;margin:0 0 .6rem;min-height:2.4em}
.nd-menu-card .nd-menu-go{color:var(--brand-600);font-weight:600;font-size:.88rem}
.nd-menu-card:hover .nd-menu-go{color:var(--accent-500)}

/* rich HTML pasted into case fields (e.g. a rubric <table>) — make it responsive */
.nd-rich{overflow-x:auto;-webkit-overflow-scrolling:touch}
.nd-rich > table,.nd-rich table{width:100%!important;border-collapse:collapse;font-size:.92rem;margin:.4rem 0;background:#fff}
.nd-rich{color:#3a4656}
.nd-rich td,.nd-rich th{border:1px solid #cdd6e2;padding:.7rem .9rem;vertical-align:top;word-break:break-word;line-height:1.55;color:#3a4656}
.nd-rich b,.nd-rich strong{color:#2b3a4d}
.nd-rich tr:first-child td,.nd-rich tr:first-child th{background:#eef2f8;font-weight:600;color:var(--brand-800);text-align:center;vertical-align:middle;white-space:nowrap}
.nd-rich p{margin:0 0 .4rem}
.nd-rich p:last-child{margin-bottom:0}
.nd-rich img{max-width:100%;height:auto}

/* evaluation form tabs */
.nd-eval-tabs{border-bottom:2px solid var(--brand-700);gap:.25rem;flex-wrap:wrap}
.nd-eval-tabs .nav-link{color:var(--brand-700);font-weight:500;border:0;border-radius:10px 10px 0 0;padding:.7rem 1.15rem}
.nd-eval-tabs .nav-link:hover{background:rgba(44,92,143,.08);color:var(--brand-800)}
.nd-eval-tabs .nav-link.active{background:var(--brand-700);color:#fff}

/* evaluation criteria / scoring table */
.nd-eval-table{table-layout:fixed;font-size:.92rem;color:#3a4656}
.nd-eval-table tbody td{color:#3a4656}
/* bigger, easy-to-tap radio choices */
.nd-eval-table td.nd-choice{cursor:pointer}
.nd-eval-table .form-check{justify-content:center;margin:0;min-height:auto;padding:0}
.nd-eval-table .form-check-input{width:1.55rem;height:1.55rem;margin:0;cursor:pointer;float:none}
.nd-eval-table td.nd-choice span{font-weight:600;font-size:.95rem}
.nd-eval-table td.nd-choice:hover{background:rgba(28,156,129,.12)}
.nd-eval-table > :not(caption) > * > *{vertical-align:top}
.nd-eval-table thead th{vertical-align:middle;text-align:center;background:var(--brand-700);color:#fff;border-color:rgba(255,255,255,.22);white-space:normal;font-size:.82rem;line-height:1.3;font-weight:600}
.nd-eval-table td,.nd-eval-table th{padding:.55rem .6rem;word-wrap:break-word;overflow-wrap:break-word}
.nd-eval-table .col-no{width:42px;text-align:center}
.nd-eval-table .col-choice{width:120px;text-align:center;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.nd-eval-table .col-total{width:90px;text-align:center;white-space:nowrap}
.nd-eval-table td img,.nd-eval-table td iframe,.nd-eval-table td video{max-width:100%;height:auto}

/* ── แบบประเมินบนมือถือ ──────────────────────────────────────────────────
   ตารางให้คะแนนใช้ table-layout:fixed พอจอแคบคอลัมน์ "หัวข้อที่ประเมิน" จะถูกบีบ
   จนอ่านไม่ออก จึงเปลี่ยนเป็นการ์ดเรียงลงมา 1 ข้อ = 1 การ์ด และให้ตัวเลือกคะแนน
   กลายเป็นปุ่มกดเต็มความกว้าง (แตะง่ายกว่าเดิม) ─ จอ ≥768px ยังเป็นตารางเหมือนเดิม */
@media (max-width:767.98px){
  .nd-eval-table{table-layout:auto;font-size:1rem;border:0}
  .nd-eval-table thead{display:none}                 /* หัวตารางย้ายไปอยู่บนปุ่มแต่ละอันแทน */
  .nd-eval-table,.nd-eval-table tbody,.nd-eval-table tr,.nd-eval-table td{display:block;width:auto}
  .nd-eval-table tr{
    border:1px solid #d8dfe9;border-radius:10px;background:#fff;
    padding:.6rem .7rem;margin-bottom:.75rem;box-shadow:0 1px 2px rgba(12,37,64,.06)
  }
  .nd-eval-table td{border:0;padding:.2rem 0}
  .nd-eval-table td.col-no,.nd-eval-table .nd-cell-blank{display:none}
  /* ชื่อหัวข้อ = หัวการ์ด */
  .nd-eval-table tr > td:not(.nd-choice):not(.nd-cell-total):first-child,
  .nd-eval-table tr > td:nth-child(2):not(.nd-choice):not(.nd-cell-total){
    font-weight:600;color:var(--brand-900);line-height:1.5;padding-bottom:.5rem
  }
  /* ตัวเลือกคะแนน = ปุ่มเต็มแถว มีชื่อคอลัมน์กำกับ */
  .nd-eval-table td.nd-choice{
    border:1px solid #e2e8f0;border-radius:8px;margin:.3rem 0;padding:.55rem .7rem;
    display:flex;align-items:center;justify-content:space-between;gap:.6rem;text-align:left
  }
  .nd-eval-table td.nd-choice::before{
    content:attr(data-label);flex:1;font-size:.95rem;color:#3a4656;font-weight:500
  }
  .nd-eval-table td.nd-choice .form-check{justify-content:flex-end;flex:0 0 auto}
  .nd-eval-table td.nd-choice span{min-width:2ch;text-align:right}
  .nd-eval-table td.nd-choice:has(input:checked){border-color:var(--accent-500);background:rgba(28,156,129,.12)}
  /* ช่องคะแนนรวมของข้อนั้น */
  .nd-eval-table td.nd-cell-total{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;
    border-top:1px dashed #e2e8f0;padding-top:.5rem}
  .nd-eval-table td.nd-cell-total::before{content:attr(data-label);font-size:.9rem;color:#6b7a90}
  .nd-eval-table td.nd-cell-total .form-control{width:80px !important}
  /* แถวสรุป "รวมคะแนน" */
  .nd-eval-table tr.table-active{display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:#f3f6fb}
  .nd-eval-table tr.table-active td{padding:0}
  .nd-eval-table tr.table-active td[colspan]{flex:1}
}

/* mission section */
.nd-mission{background:linear-gradient(120deg,var(--brand-900),var(--brand-700));color:#fff;border-radius:var(--radius);overflow:hidden;position:relative;box-shadow:var(--shadow)}
.nd-mission::before{content:"";position:absolute;left:-40px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(28,156,129,.25),transparent 70%)}
.nd-mission .nd-mission-label{font-size:clamp(2.4rem,6vw,5rem);font-weight:700;line-height:1;color:rgba(255,255,255,0.75);letter-spacing:1px;white-space:nowrap}
.nd-mission .nd-mission-body{position:relative;z-index:2}
.nd-mission .nd-mission-body p{color:#dfe7f2}
.nd-mission blockquote{border-left:4px solid var(--accent-500);padding:.4rem 0 .4rem 1rem;margin:1rem 0 0;color:#fff}
.nd-mission blockquote cite{color:var(--accent-300)}

/* ---------- Buttons ---------- */
/* .nd-btn-brand/.nd-btn-outline are the class names actually used across every
   view (~40 places, front + admin) — kept as aliases of .btn-brand/.btn-outline-brand
   here rather than renamed in every view, so either name always renders styled. */
.btn{border-radius:10px}
.btn-brand,.nd-btn-brand{background:var(--brand-700);border-color:var(--brand-700);color:#fff}
.btn-brand:hover,.nd-btn-brand:hover{background:var(--brand-800);border-color:var(--brand-800);color:#fff}
.btn-accent{background:var(--accent-500);border-color:var(--accent-500);color:#fff;font-weight:600}
.btn-accent:hover{background:var(--accent-400);border-color:var(--accent-400);color:#fff}
.btn-outline-brand,.nd-btn-outline{border-color:var(--brand-600);color:var(--brand-700)}
.btn-outline-brand:hover,.nd-btn-outline:hover{background:var(--brand-700);color:#fff}

/* ---------- Sections / tables / forms ---------- */
.nd-section{padding:2.2rem 0}
.nd-section-title{position:relative;margin-bottom:1.4rem;padding-left:.9rem}
.nd-section-title::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:5px;border-radius:3px;background:var(--accent-500)}
.nd-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.4rem}
.table thead th{background:var(--brand-700);color:#fff;border-color:rgba(255,255,255,.25);font-weight:500;white-space:nowrap}
.table.table-striped>tbody>tr:nth-of-type(odd)>*{background-color:rgba(44,92,143,.04)}
.table td,.table th{vertical-align:middle}
.badge-accent{background:var(--accent-500);color:#fff}

/* ── Team / group signature colours (single source of truth) ───────────────
   Use anywhere a team is referenced: <span class="nd-team nd-team--alpha">ALPHA</span>
   Keep these in sync with the team cards on the About page. */
.nd-team{display:inline-block;padding:.18em .6em;border-radius:.4rem;font-weight:700;
  font-size:.82em;line-height:1.35;letter-spacing:.02em;white-space:nowrap;color:#fff}
.nd-team--alpha{background:#3f9c4f}
.nd-team--bravo{background:#efc220;color:#ffffff}
.nd-team--charlie{background:#e85aa0}
.nd-team--delta{background:#33b0c0}
.nd-team--echo{background:#d22030}
.nd-team--foxtrot{background:#2d2d8a}
/* small colour dot for inline references (e.g. dropdowns, legends) */
.nd-team-dot{display:inline-block;width:.7em;height:.7em;border-radius:50%;
  margin-right:.35em;vertical-align:baseline}
.nd-team-dot--alpha{background:#3f9c4f}.nd-team-dot--bravo{background:#efc220}
.nd-team-dot--charlie{background:#e85aa0}.nd-team-dot--delta{background:#33b0c0}
.nd-team-dot--echo{background:#d22030}.nd-team-dot--foxtrot{background:#2d2d8a}
.nd-team--staff{background:#1f3a5f}.nd-team-dot--staff{background:#1f3a5f}

/* Team switcher tabs (About detail) */
.nd-team-tabs .nd-team-tab{border:1px solid rgba(44,92,143,.18);color:var(--brand-900);background:#fff;
  font-weight:600;border-radius:.55rem;padding:.42rem .9rem;line-height:1.2}
.nd-team-tabs .nd-team-tab:hover:not(.active){border-color:var(--brand-500);background:rgba(92,77,196,.08);color:var(--brand-900)}
.nd-team-tabs .nd-team-tab.active:hover{filter:brightness(.94)}
.nd-team-tabs .nd-team-tab.active{color:#fff}
.nd-team-tabs .nd-team-tab.active .nd-team-dot{display:none}
.nd-team-tab--alpha.active{background:#3f9c4f;border-color:#3f9c4f}
.nd-team-tab--bravo.active{background:#efc220;border-color:#efc220;color:#ffffff}
.nd-team-tab--charlie.active{background:#e85aa0;border-color:#e85aa0}
.nd-team-tab--delta.active{background:#33b0c0;border-color:#33b0c0}
.nd-team-tab--echo.active{background:#d22030;border-color:#d22030}
.nd-team-tab--foxtrot.active{background:#2d2d8a;border-color:#2d2d8a}
.nd-team-tab--staff.active{background:#1f3a5f;border-color:#1f3a5f}
.form-label{font-weight:500;color:var(--brand-800)}
.form-control:focus,.form-select:focus{border-color:var(--brand-500);box-shadow:0 0 0 .2rem rgba(92,77,196,.15)}

/* ---------- Footer ---------- */
.nd-footer{background:var(--brand-900);color:#a9b6c9;padding:2rem 0 1.2rem;margin-top:2.5rem}
.nd-footer a{color:#cdd7e6}
.nd-footer a:hover{color:#fff}
.nd-footer .nd-footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:1.2rem;padding-top:1rem;font-size:.85rem;color:#7f8ea3}

/* ---------- utilities ---------- */
.text-accent{color:var(--accent-500)!important}
.bg-brand{background:var(--brand-800)!important}
.shadow-soft{box-shadow:var(--shadow)!important}
.rounded-xl{border-radius:var(--radius)!important}

/* ── Sign-in modal (branded, blurred backdrop) ─────────────────────────── */
/* Keep the backdrop fully opaque (rgba tints it) — backdrop-filter is dropped by
   browsers when the element's own opacity < 1, which is why a half-opacity
   backdrop showed a sharp page behind it. */
.modal-backdrop{background:rgba(10,8,28,.62);-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px)}
.modal-backdrop.show{opacity:1}
.nd-auth-card{border:0;border-radius:1rem;overflow:hidden;box-shadow:0 24px 60px rgba(12,37,64,.45)}
.nd-auth-head{position:relative;text-align:center;padding:1.9rem 1.5rem 1.5rem;
  background:linear-gradient(135deg,var(--brand-900),var(--brand-700) 70%,var(--brand-600));color:#fff}
.nd-auth-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--accent-500),var(--accent-300),var(--accent-500))}
.nd-auth-logo{width:74px;height:74px;object-fit:contain;margin-bottom:.55rem;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.nd-auth-head .nd-auth-title{color:#fff;font-weight:700;margin:0;letter-spacing:.3px;font-size:1.15rem}
.nd-auth-sub{color:var(--accent-300);font-size:.85rem;margin:.15rem 0 0}
.nd-auth-close{position:absolute;top:.85rem;right:.95rem;z-index:3;
  filter:invert(1) grayscale(1) brightness(2);opacity:.85}
.nd-auth-close:hover{opacity:1}
.nd-auth-body{padding:1.6rem 1.5rem}
.nd-auth-body .form-label{font-size:.82rem;font-weight:600;color:var(--brand-800);margin-bottom:.25rem}
.nd-auth-body .input-group-text{background:#f1f5fa;border-right:0;color:var(--brand-600)}
.nd-auth-body .input-group .form-control{border-left:0;padding-left:.25rem}
.nd-auth-body .input-group .form-control:focus{box-shadow:none;border-color:#ced4da}
.nd-auth-body .input-group:focus-within{box-shadow:0 0 0 .2rem rgba(92,77,196,.15);border-radius:.45rem}
.nd-pwtoggle{cursor:pointer;background:#f1f5fa;border-left:0;color:var(--brand-600)}
.nd-pwtoggle:hover{color:var(--brand-800)}
.nd-auth-submit{background:linear-gradient(135deg,var(--brand-800),var(--brand-600));border:0;color:#fff;
  font-weight:600;padding:.62rem;border-radius:.55rem;letter-spacing:.3px;transition:filter .15s}
.nd-auth-submit:hover{filter:brightness(1.12);color:#fff}
.nd-auth-switch{color:var(--brand-600);font-weight:600;text-decoration:none}
.nd-auth-switch:hover{color:var(--brand-800);text-decoration:underline}

/* ── About: team tiles (pure-CSS gradient cards + faint icon + CTA) ─────── */
.nd-team-tile{position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  min-height:180px;text-decoration:none;box-shadow:var(--shadow);
  transition:transform .18s,box-shadow .18s}
.nd-team-tile:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(12,37,64,.3)}
.nd-team-tile__icon{position:absolute;right:-12px;bottom:-18px;font-size:5.6rem;
  color:rgba(255,255,255,.18);z-index:1;line-height:1}
.nd-team-tile__body{position:relative;z-index:2;min-height:180px;display:flex;flex-direction:column;
  justify-content:flex-end;padding:1rem 1.05rem;color:#fff}
.nd-team-tile__label{font-size:.74rem;font-weight:600;letter-spacing:1.5px;opacity:.9;text-transform:uppercase}
.nd-team-tile__name{font-size:1.55rem;font-weight:800;line-height:1;letter-spacing:.5px;
  text-shadow:0 2px 8px rgba(0,0,0,.3)}
.nd-team-tile__go{margin-top:.55rem;font-size:.8rem;font-weight:600;opacity:.85;transform:translateY(4px);
  transition:opacity .18s,transform .18s}
.nd-team-tile:hover .nd-team-tile__go{opacity:1;transform:none}
.nd-team-tile--alpha  {background:linear-gradient(150deg,#46a356,#2f7340)}
.nd-team-tile--bravo  {background:linear-gradient(150deg,#d9a81e,#a87d10)}
.nd-team-tile--charlie{background:linear-gradient(150deg,#e85aa0,#c23b7e)}
.nd-team-tile--delta  {background:linear-gradient(150deg,#2ea7b8,#1f7e8c)}
.nd-team-tile--echo   {background:linear-gradient(150deg,#d22030,#a3141f)}
.nd-team-tile--foxtrot{background:linear-gradient(150deg,#34348f,#1f1f63)}

/* About: feature cards (Guidebook / Staff) — clearer card frame + badge overlay */
.nd-feature{border:1.5px solid #b3c0d4;box-shadow:0 10px 28px rgba(12,37,64,.14)}
.nd-feature:hover{border-color:var(--accent-500)}
.nd-feature .nd-card-body{border-top:1px solid #e3e8f0}
.nd-feature .nd-card-media{height:200px}
.nd-feature .nd-card-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,37,64,0) 55%,rgba(12,37,64,.4) 100%)}
.nd-feature__badge{position:absolute;top:.7rem;left:.7rem;z-index:3;background:var(--accent-500);
  color:#1f2733;font-weight:600;font-size:.8rem;padding:.28rem .65rem;border-radius:.45rem;
  box-shadow:0 2px 8px rgba(0,0,0,.28)}
.nd-feature .nd-card-body{display:flex;align-items:center;gap:.75rem}
.nd-feature__go{margin-left:auto;font-size:1.5rem;color:var(--accent-500);transition:transform .18s}
.nd-feature:hover .nd-feature__go{transform:translateX(5px)}

/* ── Guidebook file list (PDF icon + file name) ────────────────────────── */
.nd-file{display:flex;align-items:center;gap:.9rem;height:100%;background:#fff;border:1px solid #d8dfe9;
  border-radius:12px;padding:.85rem .95rem;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.nd-file:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.nd-file__icon{flex:0 0 auto;width:56px;height:64px;border-radius:9px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.1rem;color:#fff;background:linear-gradient(135deg,#c0392b,#8e1f14)}
.nd-file__icon .bi{font-size:1.7rem;line-height:1}
.nd-file__icon span{font-size:.6rem;font-weight:700;letter-spacing:.6px}
.nd-file__logo{position:relative;flex:0 0 auto;width:64px;height:64px;border-radius:9px;background:#fff;
  border:1px solid #e3e8f0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.nd-file__logo img{max-width:100%;max-height:100%;object-fit:contain}
.nd-file__logo-tag{position:absolute;right:-1px;bottom:-1px;background:#c0392b;color:#fff;font-size:.55rem;
  font-weight:700;letter-spacing:.4px;padding:.05rem .25rem;border-radius:6px 0 8px 0}
.nd-file__body{min-width:0;flex:1}
.nd-file__title{font-size:.95rem;font-weight:600;color:var(--brand-900);line-height:1.35;margin:0 0 .15rem}
.nd-file__name{font-size:.78rem;color:#5a6a82;margin:0;word-break:break-all;overflow-wrap:anywhere}
.nd-file__meta{font-size:.74rem;color:#8794a8;margin:.1rem 0 0}
.nd-file__btn{flex:0 0 auto;white-space:nowrap}
.nd-file--missing{opacity:.75;border-style:dashed}
.nd-file--missing .nd-file__icon{background:linear-gradient(135deg,#9aa5b5,#6c7889)}
@media (max-width:991px){
  .nd-navbar .navbar-nav .nav-link{padding:.5rem .8rem}
  .nd-pagehead h1{font-size:1.4rem}
}

/* editable CKEditor content (About/Contact) surfaced on the OP front-end — make the
   legacy HTML (tables, images, headings) responsive and on-theme */
.nd-richtext{color:#33415a;line-height:1.7;overflow-x:auto}
.nd-richtext img{max-width:100%;height:auto;border-radius:8px}
.nd-richtext h1,.nd-richtext h2,.nd-richtext h3,.nd-richtext h4,.nd-richtext h5{color:var(--brand-900);font-weight:700;margin:.2rem 0 .6rem}
.nd-richtext h1{font-size:1.5rem}.nd-richtext h2{font-size:1.3rem}.nd-richtext h3,.nd-richtext h4{font-size:1.1rem}
.nd-richtext table{width:100%;border-collapse:collapse;margin:.4rem 0}
.nd-richtext td,.nd-richtext th{padding:.55rem .65rem;vertical-align:top;border-bottom:1px solid #eef4fa}
.nd-richtext a{color:var(--brand-600);font-weight:500}
.nd-richtext p{margin-bottom:.6rem}
/* professor card image (About page) — full portrait, on-theme */
.nd-prof-img{width:100%;max-width:150px;aspect-ratio:190/240;object-fit:cover;border-radius:10px;border:1px solid #e6eaf1;background:#f4f7fb}

/* ── ฉบับร่างอัตโนมัติในหน้าประเมิน ───────────────────────────────────────── */
.nd-draft-bar{display:flex;flex-direction:column;gap:.5rem}
.nd-draft-note{background:#eef4fc;border:1px solid #cfe0f5;color:#1e4078;border-radius:8px;padding:.6rem .9rem;font-size:.92rem}
.nd-draft-note-warn{background:#fff8e6;border-color:#f0dCa8;color:#7a5a00}
.nd-draft-status{font-size:.85rem;color:#6b7a8d}
.nd-draft-status.nd-draft-ok{color:#2f7340}
.nd-draft-status.nd-draft-warn{color:#b3202c}
.nd-draft-status.nd-draft-busy{color:#6b7a8d}
@media (max-width:575.98px){
  .nd-draft-note{font-size:.86rem;padding:.5rem .7rem}
  .nd-draft-note .btn{display:block;width:100%;margin:.5rem 0 0!important}
}

/* ── Shared form pattern (public-facing forms: registration, contact, etc.) ──
   Same class names/behaviour as the admin .nd-form (assets/admin/css/admin.css)
   so both sides of the app read as one system. */
.nd-form .nd-row{margin-bottom:1rem}
.nd-form label.nd-label{font-weight:600;color:var(--brand-800);font-size:.88rem;margin-bottom:.3rem;display:inline-block}
.nd-form label.nd-label .req{color:#d22030;margin-left:2px}
.nd-form .form-control,.nd-form .form-select{border:1px solid #cdd7e6;border-radius:9px;padding:.5rem .75rem;font-size:.92rem;color:#3a4a5e}
.nd-form .form-control:focus,.nd-form .form-select:focus{border-color:var(--accent-400);box-shadow:0 0 0 3px rgba(28,156,129,.12)}
.nd-form .form-control.is-invalid{border-color:#d22030}
.nd-form .nd-hint{font-size:.78rem;color:var(--muted);margin-top:.2rem}
.nd-form .nd-actions{border-top:1px solid var(--line);padding-top:1.1rem;margin-top:.4rem}

/* ── Form action row — submit + cancel grouped together on one line,
   sized/weighted so the primary action reads as the obvious next step
   instead of two plain equal-looking buttons. ── */
.nd-form .nd-actions-row{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem}
.nd-form .nd-actions-row .btn{padding:.8rem 2.1rem;font-size:1rem;font-weight:700;border-radius:11px;display:inline-flex;align-items:center;gap:.55rem}
.nd-form .nd-actions-row .nd-btn-brand{box-shadow:0 10px 22px rgba(45,35,128,.28);transition:transform .16s,box-shadow .16s}
.nd-form .nd-actions-row .nd-btn-brand:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(45,35,128,.34);color:#fff}
.nd-form .nd-actions-row .nd-btn-outline{background:#fff}
@media(max-width:575.98px){
  .nd-form .nd-actions-row{flex-direction:column;align-items:stretch}
  .nd-form .nd-actions-row .btn{width:100%;justify-content:center}
}

/* ── Field grouping inside a long form (registration section 2) — related
   inputs are visually clustered under a small caption, and an "other"
   text box nests INSIDE its select's own column (not a sibling grid cell)
   so revealing it only grows that one column instead of shoving every
   field after it sideways. ── */
.nd-form .nd-fieldgroup{margin-bottom:1.75rem}
.nd-form .nd-fieldgroup:last-of-type{margin-bottom:0}
.nd-form .nd-subhead{font-size:.82rem;font-weight:700;color:var(--brand-700);margin:0 0 .85rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.nd-form .nd-subhead small{font-weight:400;font-size:.78rem}
.nd-form .nd-otherwrap{margin-top:.6rem}
.nd-imgbox{width:190px;max-width:100%}
.nd-imgbox .nd-imgprev{width:190px;height:240px;border:1px solid var(--line);border-radius:10px;object-fit:cover;background:#f4f7fb;display:block}

/* ── Hero CTA — the one action that must never blend into a busy poster.
   Solid navy, no pulsing animation — matches the calmer "product" feel of
   the MedXplore reference (a confident solid button, not a flashy one). ── */
.nd-btn-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1rem 2.6rem;font-size:1.15rem;font-weight:700;border-radius:12px;
  background:var(--brand-700);
  color:#fff;border:0;box-shadow:0 10px 26px rgba(12,37,64,.28);
  text-decoration:none;transition:transform .18s,box-shadow .18s,background .18s;
}
.nd-btn-cta:hover,.nd-btn-cta:focus{
  color:#fff;transform:translateY(-3px);background:var(--brand-800);
  box-shadow:0 14px 32px rgba(12,37,64,.34);
}
.nd-btn-cta i{font-size:1.3rem}
.nd-hero-cta-wrap{text-align:center;padding:.5rem 0 .25rem}
.nd-hero-cta-wrap .nd-link-quiet{display:inline-block;margin-top:.9rem;color:var(--muted);font-size:.88rem;text-decoration:underline;text-underline-offset:3px}
.nd-hero-cta-wrap .nd-link-quiet:hover{color:var(--brand-700)}
@media(max-width:575.98px){
  .nd-btn-cta{width:100%;padding:.9rem 1rem;font-size:1.05rem}
}