@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

/* ==========================================================================
   JOURNAL OF PUBLIC HEALTH AND DEVELOPMENT (AIHD-MU) — ThaiJO
   override.css  ·  ไฟล์ CSS เดียวของโปรเจกต์นี้
   --------------------------------------------------------------------------
   OJS 3.3.0.8 + theme bootstrap3   |   ไม่แก้ HTML แม้แต่ตัวอักษรเดียว
   โหลดท้ายสุด → ชนะด้วยลำดับ cascade ไม่ใช่ด้วยการลบของเดิม

   สารบัญ (ค้นด้วยรหัสในวงเล็บเหลี่ยม)
     [0]  TOKENS            ตัวแปรสี ฟอนต์ ระยะ
     [1]  BASE              reset, typography, media
     [2]  LAYOUT            container alignment, grid, breakpoints
     [3]  HEADER            masthead ส้ม + เมนู responsive
     [4]  COMPONENTS        page-header, breadcrumb, block, panel, btn, media
     [5]  SIDEBAR
     [6]  FOOTER
     [7]  PAGES             รายหน้า (body.pkp_page_*)
     [8]  RESPONSIVE FIXES  ตาราง/รูป fixed-width ที่ทำให้ล้นจอ
     [9]  A11Y
     [10] IMPORTANT ESCAPES กฎที่ต้องใช้ !important สู้ของเดิม

   BREAKPOINTS (ตรงกับ Bootstrap 3 เป๊ะ ๆ)
     mobile  < 768px  |  tablet 768–991px  |  desktop ≥ 992px
   ========================================================================== */


/* ==========================================================================
   [0] TOKENS
   ========================================================================== */
:root {
  /* --- accent --- */
  --c-accent:        #FF5B0A;
  --c-accent-hover:  #E04D00;
  --c-accent-text:   #C24400;   /* ส้มที่อ่านได้บนขาว 5.10:1 */
  --c-accent-tint:   #FFF4EC;
  --c-accent-line:   #FFD9C2;
  --c-on-accent:     #111111;   /* ตัวหนังสือบนพื้นส้ม 6.07:1 (ขาวได้แค่ 3.11:1) */

  /* --- neutral --- */
  --c-ink:           #111111;
  --c-ink-2:         #3D3D3D;
  --c-ink-3:         #6B6B6B;
  --c-line:          #E5E5E5;
  --c-line-soft:     #F0F0F0;
  --c-surface:       #FFFFFF;
  --c-surface-2:     #FAFAFA;
  --c-surface-3:     #F4F4F4;
  --c-white:         #FFFFFF;

  /* --- semantic: แก้ที่นี่ที่เดียว เปลี่ยนทั้งเว็บ --- */
  --c-body-bg:       var(--c-surface);
  --c-text:          var(--c-ink-2);
  --c-heading:       var(--c-ink);
  --c-link:          var(--c-accent-text);
  --c-link-hover:    var(--c-accent);
  --c-border:        var(--c-line);

  --c-header-bg:     var(--c-accent);
  --c-header-text:   var(--c-on-accent);
  --c-header-hover:  #FFFFFF;

  --c-footer-bg:     var(--c-ink);
  --c-footer-text:   #D8D8D8;
  --c-footer-link:   #FFFFFF;

  /* --- fonts --- */
  --font-sans: 'Inter', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-thai: 'Noto Sans Thai', 'Inter', sans-serif;
  --font-head: var(--font-sans);

  /* หน่วยเป็น px ตั้งใจ — Bootstrap 3 ตั้ง html{font-size:10px} ไว้
     ถ้าใช้ rem ตัวหนังสือจะเล็กลงเหลือ 62.5% ของที่ควรเป็น */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-lg:   18px;
  --fs-xl:   clamp(19px, 17px + .5vw, 22px);
  --fs-2xl:  clamp(23px, 18px + 1.1vw, 30px);
  --fs-3xl:  clamp(26px, 20px + 1.8vw, 36px);
  --fs-nav:  15px;

  --lh-tight: 1.25;
  --lh-base:  1.65;
  --lh-loose: 1.8;

  /* --- spacing / shape --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow:    0 2px 10px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.10);

  --container-max: 1200px;
  --gutter: var(--sp-4);
  --transition: 160ms ease;
  --tap: 44px;               /* ขนาดขั้นต่ำที่นิ้วแตะได้ */
  --logo-h: 104px;           /* ความสูงโลโก้ desktop */
}

/* --------------------------------------------------------------------------
   สวิตช์: แถบ .page-header  (หัวข้อ "Announcements" / ชื่อบทความ / ชื่อ issue)
   ค่าเริ่มต้น = ขาว + เส้นซ้ายส้ม (สะอาด รองรับหัวข้อยาว)
   ถ้าอยากกลับไปเป็นแถบส้มทึบแบบเดิม → เปลี่ยน 2 บรรทัดนี้เป็น
       --page-header-bg: var(--c-accent);
       --page-header-fg: var(--c-on-accent);
   -------------------------------------------------------------------------- */
:root {
  --page-header-bg: transparent;
  --page-header-fg: var(--c-heading);
}


/* ==========================================================================
   [1] BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  background-color: var(--c-body-bg);
  color: var(--c-text);
}

/* รูป/สื่อทุกชนิดห้ามล้นกรอบ — แก้ img width="200"/"300" ทั้งเว็บในกฎเดียว */
img, svg, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* หัวข้อ */
h1, h2, h3, h4, h5, h6,
.page-header h1, .page-header h2, .media .page-header h2 {
  color: var(--c-heading);
  font-family: var(--font-head);
  line-height: var(--lh-tight);
  letter-spacing: -.01em;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--sp-4); }

a {
  color: var(--c-link);
  text-decoration: none;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}
a:hover, a:focus { color: var(--c-link-hover); text-decoration: underline; }

hr { border-color: var(--c-border); }

::selection { background: var(--c-accent); color: var(--c-white); }

/* ตารางทั่วไป (ที่ไม่ใช่ตาราง layout) */
table { border-collapse: collapse; }


/* ==========================================================================
   [2] LAYOUT — จัดสัดส่วนให้ header / content / footer ตรงแนวเดียวกัน
   --------------------------------------------------------------------------
   ปัญหาเดิม: header ใช้ .container-fluid (เต็มจอ 100%)
              แต่เนื้อหาใช้ .container (สูงสุด 1170px)
   → บนจอ 1920px โลโก้ชิดขอบซ้ายสุด ช่องค้นหาชิดขอบขวาสุด
     แต่เนื้อหาข้างล่างอยู่กลางจอ = ไม่ตรงแนวกันเลย
   วิธีแก้: บังคับทั้งสามส่วนใช้ความกว้างและจุดกึ่งกลางเดียวกัน
   -------------------------------------------------------------------------- */
.container,
#headerNavigationContainer > .container-fluid,
footer[role="contentinfo"] > .container {
  width: 100%;
  max-width: var(--container-max);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--gutter);
  padding-left: var(--gutter);
}

.pkp_structure_page { overflow-x: clip; }

.pkp_structure_content {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-8);
}
@media (max-width: 767px) {
  .pkp_structure_content { padding-top: var(--sp-4); padding-bottom: var(--sp-6); }
}

/* ---- สัดส่วนคอลัมน์ ---- */

/* mobile: เรียงลงเป็นแถวเดียว */
@media (max-width: 767px) {
  .pkp_structure_main,
  .pkp_structure_sidebar { width: 100%; float: none; padding-left: 0; padding-right: 0; }
  .pkp_structure_sidebar { margin-top: var(--sp-7); }
}

/* tablet: ของเดิม sidebar = col-sm-2 (16.7% ≈ 128px) แคบจนรูป badge ล้น
   → ให้เนื้อหาเต็มความกว้าง แล้ววาง sidebar เป็นการ์ด 2 คอลัมน์ข้างล่าง */
@media (min-width: 768px) and (max-width: 991px) {
  .pkp_structure_main   { width: 100%; float: none; }
  .pkp_structure_sidebar {
    width: 100%; float: none;
    margin-top: var(--sp-7);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    align-items: start;
  }
  .pkp_structure_sidebar > a { grid-column: 1 / -1; }
}

/* desktop: คืนพื้นที่ให้เนื้อหา (เดิม 66.7/33.3 → 72/28) */
@media (min-width: 992px) {
  .pkp_structure_main    { width: 72%; }
  .pkp_structure_sidebar { width: 28%; }
}


/* ==========================================================================
   [3] HEADER — masthead พื้นส้ม (คงไว้ เพราะโลโก้เป็น PNG สีขาว)
   --------------------------------------------------------------------------
   ของเดิมที่ต้องปลด:
     .navbar-default              { height: 221.1px }        ← hardcode
     #main-navigation > li a      { padding: 81px 10px 10px } ← ดันเมนูลงมา
     .navbar-brand-logo img       { height: 150px }
     .navbar-form                 { margin-top: 58px }
   ทั้งสี่ค่าจูนมือให้พอดีกันที่จอ desktop เท่านั้น พอย่อจอเมนูจะทับโลโก้
   -------------------------------------------------------------------------- */
#headerNavigationContainer.navbar-default {
  background: url('../assets/img/header-bg.png') center/cover no-repeat var(--c-header-bg);
  border: 0;
  border-radius: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  box-shadow: var(--shadow-sm);
}

/* ---- แถวบน: Register / Login ---- */
#headerNavigationContainer > .container-fluid:first-child { padding-top: var(--sp-2); }
#headerNavigationContainer > .container-fluid:first-child .row { margin: 0; }

#navigationUser { float: right; margin: 0; display: flex; gap: var(--sp-1); }
#navigationUser > li { float: none; }

.navbar-default #navigationUser > li a {
  color: var(--c-header-text);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: transparent;
}
.navbar-default #navigationUser > li a:hover,
.navbar-default #navigationUser > li a:focus {
  color: var(--c-header-hover);
  background: rgba(0,0,0,.10);
  text-decoration: none;
}

/* ---- แถวหลัก: โลโก้ + เมนู + ช่องค้นหา ---- */
#headerNavigationContainer > .container-fluid:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}

.navbar-header { float: none; flex: 0 0 auto; margin: 0; display: flex; align-items: center; }

.site-name { margin: 0; font-size: 0; line-height: 0; }

.navbar-brand.navbar-brand-logo {
  float: none;
  height: auto;
  padding: 0;
  margin: 0;
  display: block;
}
.navbar-brand-logo img {
  height: auto;
  width: auto;
  max-height: var(--logo-h);
  display: block;
}

/* กล่องเมนู: กินพื้นที่ที่เหลือ แล้วดันช่องค้นหาไปขวาสุด */
#nav-menu {
  flex: 1 1 480px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2) var(--sp-4);
}

#main-navigation {
  float: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}
#main-navigation > li { float: none; }

/* ปลด padding 81px */
.navbar-default #main-navigation > li a,
.navbar-default .navbar-nav > .open > a {
  color: var(--c-header-text);
  font-family: var(--font-sans);
  font-size: var(--fs-nav);
  font-weight: 500;
  line-height: 1.3;
  padding: var(--sp-3) var(--sp-3);
  background: transparent;
  border-radius: var(--radius-sm);
  position: relative;
}
.navbar-default #main-navigation > li a:hover,
.navbar-default #main-navigation > li a:focus,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: var(--c-header-hover);
  background: rgba(0,0,0,.10);
  text-decoration: none;
}
/* ขีดใต้เมนูที่กำลังเปิดอยู่ */
.navbar-default #main-navigation > .active > a::after,
.navbar-default #main-navigation > li > a:hover::after {
  content: "";
  position: absolute;
  left: var(--sp-3); right: var(--sp-3); bottom: 4px;
  height: 2px;
  background: var(--c-header-hover);
  border-radius: 2px;
}

/* ---- dropdown "Other" ---- */
.navbar-default #main-navigation .dropdown-menu {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
  margin-top: var(--sp-1);
  min-width: 260px;
}
.navbar-default .dropdown-menu li > a {
  color: var(--c-ink-2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.4;
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  white-space: normal;
}
.navbar-default .dropdown-menu li > a:hover,
.navbar-default .dropdown-menu li > a:focus {
  background-color: var(--c-accent-tint);
  color: var(--c-accent-text);
}

/* ---- ช่องค้นหา ---- */
.pull-md-right { float: none; margin-left: auto; }

.navbar-form {
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  float: none;
  display: flex;
  gap: var(--sp-2);
}
.navbar-form .form-group { margin: 0; }

.navbar-form .form-control {
  height: auto;
  min-height: 38px;
  width: 100%;
  min-width: 160px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255,255,255,.94);
  color: var(--c-ink);
  box-shadow: none;
}
.navbar-form .form-control:focus {
  background: var(--c-white);
  border-color: var(--c-ink);
  box-shadow: 0 0 0 3px rgba(0,0,0,.12);
}
.pull-md-right form button {
  min-height: 38px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-on-accent);
  background-color: var(--c-white);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-4);
}
.pull-md-right form button:hover,
.pull-md-right form button:focus {
  background-color: var(--c-ink);
  color: var(--c-white);
}

/* ---- ปุ่ม hamburger ---- */
.navbar-toggle {
  float: right;
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  min-width: var(--tap);
  min-height: var(--tap);
  border: 1px solid rgba(0,0,0,.25);
  border-radius: var(--radius-sm);
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: rgba(0,0,0,.12); }
.navbar-default .navbar-toggle .icon-bar {
  background-color: var(--c-on-accent);
  width: 22px; height: 2px; border-radius: 2px; margin: 0;
}

/* --------------------------------------------------------------------------
   HEADER RESPONSIVE
   Bootstrap เปิดเมนูเต็มแถวตั้งแต่ 768px ซึ่งเมนู 9 รายการ + ช่องค้นหา
   ยัดไม่ลงจอ 768px → เลื่อนจุดสลับไปเป็น 992px
   (ต้องใช้ !important เพราะ bootstrap เขียน display:block!important ไว้)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #headerNavigationContainer > .container-fluid:last-child {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0;
  }
  .navbar-header {
    flex: 1 1 100%;
    justify-content: space-between;
    align-items: center;
  }
  .navbar-toggle { display: block !important; order: 2; }
  .site-name { order: 1; }

  /* ซ่อน/แสดงตามสถานะ .in ของ Bootstrap collapse */
  #nav-menu.navbar-collapse.collapse:not(.in) {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  #nav-menu.navbar-collapse.collapse.in {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  #nav-menu {
    flex: 1 1 100%;
    max-height: none;
    border-top: 1px solid rgba(0,0,0,.15);
    margin-top: var(--sp-3);
    padding: var(--sp-2) 0 var(--sp-3);
  }
  #main-navigation { display: block; width: 100%; }
  #main-navigation > li { display: block; width: 100%; }
  .navbar-default #main-navigation > li a {
    display: block;
    width: 100%;
    padding: var(--sp-3) var(--sp-2);
    min-height: var(--tap);
    border-radius: var(--radius-sm);
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .navbar-default #main-navigation > .active > a::after,
  .navbar-default #main-navigation > li > a:hover::after { display: none; }

  /* dropdown บนมือถือ = list ซ้อนเข้าไป ไม่ลอย */
  .navbar-default #main-navigation .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    box-shadow: none;
    border: 0;
    background: rgba(0,0,0,.06);
    margin: 0 0 var(--sp-2);
  }
  .navbar-default .dropdown-menu li > a { color: var(--c-on-accent); }

  .pull-md-right { width: 100%; margin: var(--sp-5) 0 0; }
  .navbar-form { width: 100%; }
  .navbar-form .form-group { flex: 1 1 auto; }
  .navbar-form .form-control { min-width: 0; }
}

@media (max-width: 767px) {
  :root { --logo-h: 76px; }
  #headerNavigationContainer > .container-fluid:first-child { padding-top: var(--sp-1); }
  .navbar-default #navigationUser > li a { font-size: var(--fs-xs); padding: var(--sp-2); }
}

@media (min-width: 992px) {
  .navbar-toggle { display: none !important; }
  #nav-menu.navbar-collapse.collapse { display: flex !important; height: auto !important; }
}

/* mourning ribbon ของ ThaiJO ทับโลโก้ — ขยับให้พ้น */
.mourning-ribbon { width: 40px; }
@media (max-width: 767px) { .mourning-ribbon { width: 26px; } }
/* เว้นที่ให้ริบบิ้นเฉพาะตอนที่กรอบเนื้อหาชิดขอบจอ (≥1280px กรอบลอยกลางแล้ว ไม่ต้องเว้น) */
@media (max-width: 1279px) { .navbar-header { padding-left: 34px; } }
@media (max-width: 767px)  { .navbar-header { padding-left: 26px; } }


/* ==========================================================================
   [4] COMPONENTS
   ========================================================================== */

/* ---- .page-header  ("Announcements" / ชื่อบทความ / ชื่อ issue) ----
   เดิมพื้นส้มทึบ + padding 1px → ชื่อบทความยาวกลายเป็นก้อนส้มเต็มจอ
   ใหม่: เส้นซ้ายส้มหนา (ดูสะอาด รองรับข้อความยาว) — สลับกลับได้ที่ [0] */
.page-header {
  background-color: var(--page-header-bg);
  border: 0;
  border-left: 4px solid var(--c-accent);
  border-radius: 0;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);
  margin: 0 0 var(--sp-5);
}
.page-header h1,
.page-header h2,
.media .page-header h2 {
  color: var(--page-header-fg);
  margin: 0;
  font-weight: 700;
}
.page-header small { color: var(--c-ink-3); display: block; margin-top: var(--sp-2); }

/* ---- breadcrumb ---- */
.breadcrumb {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm);
}
.breadcrumb > li + li::before { content: "/"; color: var(--c-line); padding: 0 var(--sp-2); }
.breadcrumb a { color: var(--c-ink-3); }
.breadcrumb a:hover { color: var(--c-accent-text); }
.breadcrumb .active { color: var(--c-ink); font-weight: 500; }

/* ---- ปุ่ม ---- */
.btn {
  font-family: var(--font-sans);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.btn-group .btn-primary,
.current_issue .btn-primary,
.download .btn-primary,
.btn-primary {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
  padding: var(--sp-3) var(--sp-5);
  min-height: var(--tap);
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.btn-group .btn-primary:hover,  .btn-primary:hover,
.btn-group .btn-primary:focus,  .btn-primary:focus,
.current_issue .btn-primary:hover, .current_issue .btn-primary:focus,
.download .btn-primary:hover,   .download .btn-primary:focus {
  background-color: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
  color: var(--c-white);
}
.btn-default {
  background-color: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-ink-2);
}
.btn-default:hover, .btn-default:focus {
  background-color: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-white);
}

/* ---- form ---- */
.form-control {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  color: var(--c-ink-2);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
}
.form-control:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-tint);
}

/* ---- media list (รายการบทความ / ประกาศ / issue) ---- */
.media-list { margin: 0; padding: 0; list-style: none; }

.media,
.article-summary,
.issue-summary,
.announcement-summary {
  margin: 0 0 var(--sp-4);
}
.media-body { width: auto; }

.media-heading {
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-2);
}
.media-heading a, .issue a, .page_about a, .pkp_block a {
  color: var(--c-ink);
}
.media-heading a:hover, .media-heading a:focus { color: var(--c-accent-text); }

.authors { color: var(--c-ink-3); font-size: var(--fs-sm); }
.date, .media-body .date, .published, .pages {
  color: var(--c-ink-3);
  font-size: var(--fs-xs);
}

/* ---- thumbnail / ปก ---- */
.thumbnail, .cover-image, .media-left, .heading .thumbnail {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--sp-1);
  box-shadow: none;
  overflow: hidden;
}
.thumbnail img, .cover-image img, .media-left img { border-radius: var(--radius-sm); display: block; }

/* ---- panel (ใช้ในหน้า article) ---- */
.panel {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: none;
  margin-bottom: var(--sp-4);
}
.panel-default > .panel-heading {
  background-color: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--c-heading);
  font-weight: 500;
  padding: var(--sp-3) var(--sp-4);
}
.panel-body { padding: var(--sp-4); }

/* ---- list-group ---- */
.list-group { border-radius: var(--radius); overflow: hidden; }
.list-group-item {
  border-color: var(--c-border);
  padding: var(--sp-3) var(--sp-4);
  color: var(--c-text);
}


/* ==========================================================================
   [5] SIDEBAR
   ========================================================================== */
.pkp_structure_sidebar { padding-left: var(--sp-5); }
@media (max-width: 991px) { .pkp_structure_sidebar { padding-left: 0; } }

aside .pkp_block {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: none;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4);
  overflow: hidden;
}
.pkp_block .title {
  background-color: transparent;
  color: var(--c-heading);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.3;
  border: 0;
  border-bottom: 2px solid var(--c-accent);
  border-radius: 0;
  margin: 0 0 var(--sp-3);
  padding: 0 0 var(--sp-2);
  display: block;
}
.pkp_block .content { padding: 0; font-size: var(--fs-sm); }
.pkp_block .content > .content, .block_information .content { padding: 0; border-radius: 0; }
.pkp_block ul { padding-left: 0; list-style: none; margin: 0; }
.pkp_block ul li,
.pkp_block ul li:last-child {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-line-soft);
  padding: var(--sp-2) 0;
}
.pkp_block ul li:last-child { border-bottom: 0; }
.pkp_block a { color: var(--c-ink-2); }
.pkp_block a:hover { color: var(--c-accent-text); }

/* ปุ่ม Make a Submission */
.block_make_submission .content { padding: 0; }
/* theme เขียน .pkp_block.block_make_submission a (0,3,1) ไว้ — ต้อง specificity สูงกว่า */
.pkp_block.block_make_submission a.block_make_submission_link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  background-color: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.3;
  padding: var(--sp-3) var(--sp-4);
  min-height: var(--tap);
  border-radius: var(--radius-sm);
}
.pkp_block.block_make_submission a.block_make_submission_link:hover,
.pkp_block.block_make_submission a.block_make_submission_link:focus {
  background-color: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
  color: var(--c-white);
  text-decoration: none;
}

/* โลโก้ index (Scopus / ACI / TCI / Crossref / Google Scholar …)
   เดิมเรียงลงเป็นแถวยาวมาก → จัดเป็นตาราง auto-fit */
#customblock-indexed .content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--sp-3);
  align-items: center;
  justify-items: center;
}
#customblock-indexed .content p { margin: 0; }
#customblock-indexed .content p.title { grid-column: 1 / -1; justify-self: stretch; }
#customblock-indexed img { max-height: 44px; width: auto; object-fit: contain; }


/* ==========================================================================
   [6] FOOTER
   ========================================================================== */
footer[role="contentinfo"] {
  background-color: var(--c-footer-bg);
  color: var(--c-footer-text);
  border: 0;
  border-radius: 0;
  margin: var(--sp-8) 0 0;
  padding: var(--sp-7) 0;
}
footer[role="contentinfo"] p { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); line-height: var(--lh-base); }
footer[role="contentinfo"] a { color: var(--c-footer-link); text-decoration: underline; }
footer[role="contentinfo"] a:hover { color: var(--c-accent); }
footer[role="contentinfo"] img { max-height: 40px; width: auto; }
@media (max-width: 767px) {
  footer[role="contentinfo"] .col-md-2 { margin-top: var(--sp-5); }
}


/* ==========================================================================
   [7] PAGES — scope ด้วย body class ที่มีอยู่จริง
   ========================================================================== */

/* ---------- [7.1] HOME  body.pkp_page_index ---------- */
.page_index_journal .journal-description {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-7);
}
.page_index_journal .journal-description > p { margin: 0 0 var(--sp-3); }
.page_index_journal .journal-description > p:last-child { margin-bottom: 0; }

.cmp_announcements { margin-bottom: var(--sp-7); }
.cmp_announcements .media-list { display: grid; gap: var(--sp-4); }
.cmp_announcements .announcement-summary {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  background: var(--c-surface);
}
.cmp_announcements .announcement-summary:hover { border-color: var(--c-accent-line); box-shadow: var(--shadow); }

.current_issue .current_issue_title {
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--c-heading);
  margin: 0 0 var(--sp-4);
}
.current_issue .read-more { display: inline-block; margin-top: var(--sp-4); }

/* ---------- [7.2] ISSUE / TOC  body.pkp_page_issue ---------- */
.issue-toc .section { margin-bottom: var(--sp-6); }
.issue-toc .section > h2 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-heading);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--c-accent);
  margin: 0 0 var(--sp-4);
}
.issue-toc .article-summary {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.issue-toc .article-summary:last-child { border-bottom: 0; }
.issue-details .description { color: var(--c-text); }
.issue-details .cover img { border-radius: var(--radius); }

.galley-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--c-accent-tint);
  color: var(--c-accent-text);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  min-height: 32px;
}
.galley-link:hover, .galley-link:focus {
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-color: var(--c-accent);
  text-decoration: none;
}

/* ---------- [7.3] ARCHIVE  body.pkp_op_archive ---------- */
.pkp_op_archive .issues {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
.pkp_op_archive .issue-summary {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
}
.pkp_op_archive .issue-summary .media-left {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.pkp_op_archive .issue-summary .media-object { width: 100%; height: auto; display: block; }
.pkp_op_archive .issue-summary .media-body { display: block; width: auto; }
.pkp_op_archive .issue-summary .media-heading { font-size: var(--fs-base); }
.pkp_op_archive .issue-summary .current {
  display: inline-block;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: 999px;
  padding: 2px var(--sp-2);
  margin-left: var(--sp-2);
}
.pager, .cmp_pagination {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: var(--sp-7) 0 0;
}
.pager li > a, .cmp_pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-ink-2);
}
.pager li > a:hover, .cmp_pagination a:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
  text-decoration: none;
}

/* ---------- [7.4] ARTICLE  body.pkp_page_article ---------- */
.page_article .article-details { margin: 0; }

.page_article .page-header .doi,
.page_article .page-header small,
.page_article .page-header a {
  color: var(--c-ink-3);
  font-size: var(--fs-sm);
  font-weight: 400;
}

.article-main { min-width: 0; }
.article-sidebar { min-width: 0; }

.article-abstract {
  max-width: 72ch;
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-6);
}
.article-abstract h2, .article-references h2, .author-bios h2 {
  font-size: var(--fs-xl);
  font-weight: 700;
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--c-accent);
  margin: 0 0 var(--sp-4);
}

.article-author-affilitation, .authors .author { margin-bottom: var(--sp-3); }
.article-author-affilitation .author { font-weight: 700; color: var(--c-heading); }
.affiliation { color: var(--c-ink-3); font-size: var(--fs-sm); }

/* ปุ่มดาวน์โหลด PDF */
.article-sidebar .galley-link,
.download .galley-link {
  display: flex;
  justify-content: center;
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-color: var(--c-accent);
  font-size: var(--fs-base);
  font-weight: 700;
  min-height: var(--tap);
  width: 100%;
}
.article-sidebar .galley-link:hover, .download .galley-link:hover {
  background: var(--c-accent-hover);
  color: var(--c-white);
}

.article-more-details .list-group-item { font-size: var(--fs-sm); }
.article-more-details .label,
.article-more-details .item > .label { color: var(--c-ink-3); }

.keywords .value { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.keywords .value > * {
  background: var(--c-surface-3);
  border-radius: 999px;
  padding: 2px var(--sp-3);
  font-size: var(--fs-xs);
}

.article-references .csl-entry,
.article-references-content p {
  padding-left: var(--sp-5);
  text-indent: calc(var(--sp-5) * -1);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  word-break: break-word;
}

.citations-container { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.citations-count, .badge_total {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
}
.how-to-cite .panel-body { font-size: var(--fs-sm); word-break: break-word; }

/* mobile: ปก + ปุ่ม pdf ขึ้นก่อนบทคัดย่อ */
@media (max-width: 767px) {
  .article-details { display: flex; flex-direction: column; }
  .article-sidebar { order: -1; margin-bottom: var(--sp-5); }
  .article-sidebar .cover-image { max-width: 220px; margin: 0 auto var(--sp-4); }
}

/* ---------- [7.5] ARTICLE GALLEY (PDF viewer) ---------- */
.pkp_page_article.pkp_op_download iframe,
body > iframe,
.galley_view iframe {
  width: 100%;
  height: calc(100vh - 120px);
  min-height: 480px;
  border: 0;
  display: block;
}

/* ---------- [7.6] SEARCH  body.pkp_page_search ---------- */
.search-form, .page_search .search-advanced {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.page_search .input-group { width: 100%; display: flex; }
.page_search .input-group .form-control { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.page_search .input-group-btn .btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; min-height: var(--tap); }
.search-results .article-summary {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-line-soft);
}
@media (max-width: 767px) {
  .page_search .input-group { flex-direction: column; gap: var(--sp-2); }
  .page_search .input-group .form-control,
  .page_search .input-group-btn .btn { border-radius: var(--radius-sm); width: 100%; }
}

/* ---------- [7.7] หน้าเนื้อหา  body.pkp_page_about ---------- */
.page_about #main-content,
.page_announcement #main-content {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
.page_about #main-content > p,
.page_about #main-content > ul,
.page_about #main-content > ol { max-width: 78ch; }
.page_about #main-content ul,
.page_about #main-content ol { padding-left: var(--sp-5); }
.page_about #main-content li { margin-bottom: var(--sp-2); }
.page_about #main-content h2,
.page_about #main-content h3 { margin: var(--sp-6) 0 var(--sp-3); }
.page_about #main-content img { border-radius: var(--radius); }


/* ==========================================================================
   [8] RESPONSIVE FIXES — ต้นเหตุที่ทำให้จอมือถือล้นขอบ
   --------------------------------------------------------------------------
   HTML มี fixed width ฝังอยู่ (แก้ไม่ได้ ต้อง neutralize ด้วย CSS):
     index          <table width="1035">  + <td width="132"/"491">
     editorial-team <table width="704">   + <td width="300"> x86, <td width="104"> x43
     ทุกหน้า        <img width="200"> x6, <img width="300">, <img width="199">
   -------------------------------------------------------------------------- */

/* ตาราง layout ทุกตัวห้ามกว้างเกินกรอบ */
#main-content table,
.journal-description table,
.page_about table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
  height: auto !important;
}
#main-content table td,
#main-content table th {
  width: auto !important;
  height: auto !important;
  word-break: break-word;
  vertical-align: top;
  padding: var(--sp-2);
}
#main-content table img { max-width: 100%; height: auto; }

/* มือถือ: ตาราง layout แตกเป็นบล็อกเรียงลง */
@media (max-width: 767px) {
  #main-content table,
  #main-content thead,
  #main-content tbody,
  #main-content tr,
  #main-content td,
  #main-content th {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #main-content tr { margin-bottom: var(--sp-4); }
  #main-content td { padding: var(--sp-1) 0; }
  #main-content td:empty { display: none !important; }
}

/* tablet: ตารางที่ยังกว้างเกิน ให้เลื่อนแนวนอนในกรอบตัวเอง ไม่ดันทั้งหน้า */
@media (min-width: 768px) and (max-width: 991px) {
  .page_about #main-content > table,
  #main-content > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* กันข้อความยาว/URL ดันกรอบ */
.pkp_structure_main, .pkp_structure_sidebar,
.media-body, .article-abstract, .article-references,
#main-content { min-width: 0; overflow-wrap: break-word; }

/* กันเหนียวชั้นสุดท้าย — แก้ที่ต้นเหตุด้านบนไปแล้วทั้งหมด */
html, body { max-width: 100%; overflow-x: hidden; }


/* ==========================================================================
   [9] ACCESSIBILITY
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
#headerNavigationContainer :focus-visible { outline-color: var(--c-white); }

/* ขนาดขั้นต่ำที่นิ้วแตะได้ */
@media (max-width: 991px) {
  #main-navigation > li > a,
  #navigationUser > li > a,
  .pager li > a,
  .cmp_pagination a,
  .btn { min-height: var(--tap); }
}

.pkp_screen_reader, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
#accessibility-nav a:focus {
  position: static !important;
  width: auto !important; height: auto !important;
  clip: auto !important;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-ink); color: var(--c-white);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  #headerNavigationContainer, .pkp_structure_sidebar,
  footer[role="contentinfo"], .mourning-ribbon, .breadcrumb { display: none !important; }
  .pkp_structure_main { width: 100% !important; }
  body { background: var(--c-white); }
}


/* ==========================================================================
   [10] IMPORTANT ESCAPES
   --------------------------------------------------------------------------
   ทุกกฎในบล็อกนี้ต้องใช้ !important เพราะสู้กับ:
     (ก) styleSheet.css เดิม ที่เขียน !important ไว้ 23 จุด
     (ข) style="" ที่ฝังในเนื้อหา CMS (about 49 จุด, index 13, article 4)
   ถ้าวันหนึ่งของเดิมถูกลบ บล็อกนี้จะเอา !important ออกได้ทั้งหมด
   ========================================================================== */

/* (ก1) ฟอนต์ + line-height — ของเดิมล็อกไว้ด้วย font: ... !important
        และ font-family เดิมพัง (วาง sans-serif ไว้หน้าสุด ตัวหลังไม่ถูกใช้เลย) */
body,
.media-body p, .media-body .authors, .media-body .lea, .media-body .lead,
.page_about p, .journal-description > p,
.form-control, .pull-md-right form button,
.media-heading a, .issue a, .page_about a, .pkp_block a,
.date, .media-body .date,
footer[role="contentinfo"] {
  font-family: var(--font-sans) !important;
}
body, .page_about p, .journal-description > p, .media-body p {
  font-size: var(--fs-base) !important;
  line-height: var(--lh-base) !important;
  color: var(--c-text) !important;
}
.media-body .authors { font-size: var(--fs-sm) !important; line-height: var(--lh-base) !important; }
.date, .media-body .date { font-size: var(--fs-xs) !important; line-height: var(--lh-base) !important; color: var(--c-ink-3) !important; }
.current_issue .lead { font-size: var(--fs-xl) !important; line-height: var(--lh-tight) !important; color: var(--c-heading) !important; }
footer[role="contentinfo"] { font-size: var(--fs-sm) !important; line-height: var(--lh-base) !important; color: var(--c-footer-text) !important; }

/* (ก2) หัวข้อ — เดิมล็อก 30px/1 กับทุก h2,h3 */
.media .page-header h2, .page-header h1, .page-header h2, .page-header,
h2, h3 {
  font-family: var(--font-head) !important;
  line-height: var(--lh-tight) !important;
}
.page-header h1 { font-size: var(--fs-2xl) !important; }
.page-header h2, .media .page-header h2 { font-size: var(--fs-xl) !important; }
h2 { font-size: var(--fs-2xl) !important; }
h3 { font-size: var(--fs-xl) !important; }
.page-header, .page-header h1, .page-header h2 { color: var(--page-header-fg) !important; }

/* (ก3) เมนู — เดิมล็อก padding 81px + สี #120552 ด้วย !important */
.navbar-default #main-navigation > li a,
.navbar-default .navbar-nav > .open > a,
.navbar-default .dropdown-menu li > a {
  font: 500 var(--fs-nav)/1.3 var(--font-sans) !important;
}
.navbar-default #main-navigation > li a,
.navbar-default .navbar-nav > .open > a {
  color: var(--c-header-text) !important;
  padding: var(--sp-3) var(--sp-3) !important;
}
.navbar-default #main-navigation > li a:hover,
.navbar-default #main-navigation > li a:focus { color: var(--c-header-hover) !important; }
.navbar-default .dropdown-menu li > a { color: var(--c-ink-2) !important; padding: var(--sp-3) !important; }
.navbar-default .dropdown-menu li > a:hover,
.navbar-default .dropdown-menu li > a:focus { background-color: var(--c-accent-tint) !important; color: var(--c-accent-text) !important; }
.navbar-form { margin-top: 0 !important; }
@media (max-width: 991px) {
  .navbar-default #main-navigation > li a,
  .navbar-default .navbar-nav > .open > a { padding: var(--sp-3) var(--sp-2) !important; }
  .navbar-default .dropdown-menu li > a { color: var(--c-on-accent) !important; }
}

/* (ก4) ลิงก์ — เดิมล็อก color #070808 + font 14px/1 */
.media-heading a, .issue a, .page_about a, .pkp_block a {
  font-size: inherit !important;
  line-height: inherit !important;
  color: var(--c-ink) !important;
}
.media-heading a:hover, .issue a:hover, .page_about a:hover, .pkp_block a:hover,
.media-heading a:focus, .issue a:focus, .page_about a:focus, .pkp_block a:focus {
  color: var(--c-accent-text) !important;
}
.pkp_block .title { font: 700 var(--fs-base)/1.3 var(--font-sans) !important; color: var(--c-heading) !important; }
.breadcrumb .active { font: 500 var(--fs-sm)/1.4 var(--font-sans) !important; color: var(--c-ink) !important; }

/* (ก5) ปุ่ม primary — เดิมล็อก font */
.btn-group .btn-primary, .current_issue .btn-primary, .download .btn-primary {
  font: 500 var(--fs-base)/1.2 var(--font-sans) !important;
  color: var(--c-on-accent) !important;
  background-color: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
}
.btn-group .btn-primary:hover, .current_issue .btn-primary:hover, .download .btn-primary:hover,
.btn-group .btn-primary:focus, .current_issue .btn-primary:focus, .download .btn-primary:focus {
  background-color: var(--c-accent-hover) !important;
  color: var(--c-white) !important;
}

/* (ข) style="" ที่ฝังในเนื้อหา CMS
       เจอ: text-align:justify (11), text-indent:30px (11),
            font-size:130% (11), color:midnightblue (11), font-family:Arial (11) */
.page_about #main-content [style],
.page_announcement #main-content [style],
.page_index_journal .journal-description [style] {
  font-family: var(--font-sans) !important;
  text-align: left !important;      /* justify ทำให้เกิดช่องว่างเป็นแถบกลางบรรทัด */
  text-indent: 0 !important;
}
.page_about #main-content p[style],
.page_announcement #main-content p[style] {
  color: var(--c-text) !important;
  font-size: var(--fs-base) !important;
  line-height: var(--lh-base) !important;
}
/* คงการจัดกึ่งกลางของรูปไว้ */
.page_about #main-content [style*="margin: 1.2em auto"],
.page_about #main-content [style*="margin: 1em 0"] { text-align: center !important; }

/* (ค) html{filter:saturate(80%)} ที่ ThaiJO ยัดมาใน <style> ของทุกหน้า
       ทำให้สีทั้งเว็บซีดลง 20% — เป็นการไว้อาลัยระดับแพลตฟอร์ม
       ปลดได้ แต่ควรถามเจ้าของวารสารก่อน → เปิดบรรทัดล่างนี้เมื่อพร้อม   */
/* html { filter: none !important; } */


/* ==========================================================================
   [11] FINE-TUNING — จากผลทดสอบ render จริง
   ========================================================================== */

/* ตารางป้าย/ค่า ในหน้าแรก (Language / ISSN / Editor-in-Chief / E-mail)
   ของเดิม <table height="50px"> + <td width="132"/"491">
   ใช้ auto layout ให้คอลัมน์ป้ายแคบตามเนื้อหา ไม่ใช่แบ่งครึ่ง */
.journal-description table { table-layout: auto; }
.journal-description table td { padding: var(--sp-1) var(--sp-3) var(--sp-1) 0; }
.journal-description table td:first-child { width: 1% !important; white-space: nowrap; font-weight: 500; color: var(--c-heading); }
.journal-description table td p,
.journal-description table td strong { margin: 0; }

@media (max-width: 767px) {
  .journal-description table tr { margin-bottom: var(--sp-3); }
  .journal-description table td { padding: 0; }
  .journal-description table td:first-child { white-space: normal; margin-bottom: 2px; }
}

/* สีตัวหนังสือในเนื้อหา CMS ให้เข้าธีมขาว-ดำ-ส้ม
   (ของเดิมฝัง style="color: midnightblue" ไว้ 11 จุด) */
.page_index_journal .journal-description [style*="color"],
.page_about #main-content [style*="color"],
.page_announcement #main-content [style*="color"] {
  color: var(--c-heading) !important;
}
.page_index_journal .journal-description p[style*="color"],
.page_about #main-content p[style*="color"] { color: var(--c-text) !important; }

/* หัวข้อใหญ่ในเนื้อหา CMS ที่ใช้ font-size:130% */
.page_index_journal .journal-description [style*="font-size: 130%"],
.page_about #main-content [style*="font-size: 130%"] {
  font-size: var(--fs-2xl) !important;
  font-weight: 700 !important;
  line-height: var(--lh-tight) !important;
  color: var(--c-heading) !important;
  display: block;
  margin-bottom: var(--sp-4);
}

/* กล่องแนะนำวารสารบนมือถือ ไม่ต้องมีขอบหนา */
@media (max-width: 767px) {
  .page_index_journal .journal-description { padding: var(--sp-4); border-radius: var(--radius); }
}

/* บล็อกใน sidebar ที่ไม่มีเนื้อหา (รูปโหลดไม่ขึ้น) ไม่ต้องกินที่ */
aside .pkp_block:empty,
aside .pkp_block .content:empty { display: none; }

/* แถวบนของ header ให้ชิดขอบเดียวกับเนื้อหา */
#headerNavigationContainer > .container-fluid:first-child .row { margin-left: 0; margin-right: 0; }

/* ระยะห่างหัวข้อ Announcements ในหน้าแรก */
.cmp_announcements .page-header { margin-bottom: var(--sp-4); }
.cmp_announcements .announcement-summary .media-heading { font-size: var(--fs-xl); }

/* header desktop: จัดเป็น 2 แถวให้อ่านง่าย
   แถว 1 = โลโก้ + ช่องค้นหา (ขวา)   แถว 2 = เมนูเต็มความกว้าง */
@media (min-width: 992px) {
  :root { --logo-h: 118px; }
  #nav-menu { align-content: center; row-gap: var(--sp-2); }
  #nav-menu .pull-md-right { order: -1; margin-left: auto; }
  #main-navigation { flex: 1 1 100%; justify-content: flex-start; }
  .navbar-default #main-navigation > li a { padding: var(--sp-2) var(--sp-3) !important; }
}

/* ลำดับหัวข้อ: "Announcements" ต้องใหญ่กว่าชื่อประกาศ */
.cmp_announcements .announcement-summary .media-heading { font-size: var(--fs-lg); }
.cmp_announcements .page-header h2,
.cmp_announcements .page-header h1 { font-size: var(--fs-2xl) !important; }

/* --- แก้จากผลวัดจริง: ปุ่ม hamburger และตำแหน่งโลโก้บนจอเล็ก --- */
@media (max-width: 991px) {
  /* ต้องเป็น flex (ก่อนหน้านี้ทับด้วย display:block ทำให้ขีด 3 เส้นซ้อนกันเป็นเส้นเดียว) */
  .navbar-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    margin-left: auto !important;
  }
  .navbar-default .navbar-toggle .icon-bar { margin: 0 !important; }

  /* จัดชิดซ้าย/ขวาแบบชัดเจน ไม่พึ่ง space-between */
  .navbar-header { justify-content: flex-start; gap: 0; }
  .site-name { margin-right: auto; flex: 0 0 auto; }
}

/* บทคัดย่อ/เนื้อหาบทความ: ยกเลิก justify (ทำให้เกิดช่องว่างเป็นแถบกลางบรรทัด) */
.article-abstract, .article-abstract p,
.article-summary p, .announcement-summary p {
  text-align: left;
}


/* ==========================================================================
   [12] PROFESSIONAL PASS — ระบบสี ไอคอน และความลึก
   --------------------------------------------------------------------------
   แก้ปัญหาที่พบตอนรีวิว:
     · ปุ่มส้ม + ตัวหนังสือดำ = จม ไม่เด่น
     · ทั้งเว็บแบนราบ ไม่มีมิติ ไม่มีไอคอน
   วิธีแก้:
     · สร้าง "ramp" ของสีแบรนด์ 10 ระดับ แทนสีเดียวโดดๆ
       → ปุ่มใช้เฉดเข้ม (700/800) + ตัวหนังสือขาว = 5.17:1 ผ่าน AA และดูมีน้ำหนัก
       → เฉดสด (500) เก็บไว้ใช้เป็นตัวเน้น เส้น และ header
     · ไอคอนทำจาก SVG data-URI + CSS mask → เปลี่ยนสีตาม currentColor
       ไม่ต้องโหลดไฟล์ ไม่ต้องแตะ HTML
   ========================================================================== */

:root {
  /* --- brand ramp --- */
  --c-brand-50:  #FFF3EC;
  --c-brand-100: #FFE2D2;
  --c-brand-200: #FFC4A5;
  --c-brand-300: #FF9E6B;
  --c-brand-400: #FF7C38;
  --c-brand-500: #FF5B0A;   /* สีแบรนด์ */
  --c-brand-600: #E84C00;
  --c-brand-700: #C43F00;   /* พื้นปุ่ม — ตัวขาวได้ 5.17:1 */
  --c-brand-800: #992F00;   /* hover — 7.61:1 */
  --c-brand-900: #6B2100;

  /* --- neutral ramp --- */
  --c-n-0:   #FFFFFF;
  --c-n-25:  #FCFCFD;
  --c-n-50:  #F8F9FA;
  --c-n-100: #F1F3F5;
  --c-n-200: #E7EAEE;
  --c-n-300: #D5DAE1;
  --c-n-500: #8A929C;
  --c-n-600: #6B7280;
  --c-n-700: #3F454D;
  --c-n-900: #14171A;

  /* --- ผูกกับ semantic เดิม --- */
  --c-accent:       var(--c-brand-500);
  --c-accent-hover: var(--c-brand-600);
  --c-accent-text:  var(--c-brand-700);
  --c-accent-tint:  var(--c-brand-50);
  --c-accent-line:  var(--c-brand-200);
  --c-ink:          var(--c-n-900);
  --c-ink-2:        var(--c-n-700);
  --c-ink-3:        var(--c-n-600);
  --c-line:         var(--c-n-200);
  --c-line-soft:    var(--c-n-100);
  --c-surface-2:    var(--c-n-50);
  --c-surface-3:    var(--c-n-100);

  /* --- ปุ่ม --- */
  --btn-bg:        linear-gradient(180deg, var(--c-brand-600) 0%, var(--c-brand-700) 100%);
  --btn-bg-hover:  linear-gradient(180deg, var(--c-brand-700) 0%, var(--c-brand-800) 100%);
  --btn-fg:        var(--c-n-0);
  --btn-ring:      0 1px 0 rgba(255,255,255,.22) inset, 0 1px 2px rgba(107,33,0,.28), 0 4px 12px rgba(196,63,0,.22);
  --btn-ring-hover:0 1px 0 rgba(255,255,255,.18) inset, 0 2px 4px rgba(107,33,0,.32), 0 8px 20px rgba(153,47,0,.26);

  /* --- ความลึก --- */
  --shadow-sm: 0 1px 2px rgba(20,23,26,.06);
  --shadow:    0 1px 2px rgba(20,23,26,.05), 0 4px 14px rgba(20,23,26,.06);
  --shadow-lg: 0 2px 4px rgba(20,23,26,.05), 0 12px 32px rgba(20,23,26,.10);
  --shadow-brand: 0 6px 22px rgba(196,63,0,.16);

  --ease: cubic-bezier(.22,.61,.36,1);
  --transition: 200ms var(--ease);
}
/* --- ไอคอน: SVG data-URI ใช้กับ mask → เปลี่ยนสีตาม currentColor ได้ --- */
:root {
  --ico-download: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v12%22%2F%3E%3Cpath%20d%3D%22m7%2011%205%205%205-5%22%2F%3E%3Cpath%20d%3D%22M4%2019h16%22%2F%3E%3C%2Fsvg%3E");
  --ico-file-text: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H7a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpath%20d%3D%22M14%203v5h5%22%2F%3E%3Cpath%20d%3D%22M9%2013h6%22%2F%3E%3Cpath%20d%3D%22M9%2017h4%22%2F%3E%3C%2Fsvg%3E");
  --ico-search: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22m20%2020-3.5-3.5%22%2F%3E%3C%2Fsvg%3E");
  --ico-calendar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%203v4M16%203v4M3%2010h18%22%2F%3E%3C%2Fsvg%3E");
  --ico-tag: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.6%2013.4%2012%2022l-9-9V4h9l8.6%208.6a2%202%200%200%201%200%202.8z%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%227.5%22%20r%3D%221.2%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  --ico-link: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2013a5%205%200%200%200%207%200l3-3a5%205%200%200%200-7-7l-1.5%201.5%22%2F%3E%3Cpath%20d%3D%22M14%2011a5%205%200%200%200-7%200l-3%203a5%205%200%200%200%207%207l1.5-1.5%22%2F%3E%3C%2Fsvg%3E");
  --ico-mail: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m3%207%209%206%209-6%22%2F%3E%3C%2Fsvg%3E");
  --ico-chevron-right: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%205%207%207-7%207%22%2F%3E%3C%2Fsvg%3E");
  --ico-chevron-left: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%205-7%207%207%207%22%2F%3E%3C%2Fsvg%3E");
  --ico-chevron-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  --ico-arrow-right: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012h16%22%2F%3E%3Cpath%20d%3D%22m14%206%206%206-6%206%22%2F%3E%3C%2Fsvg%3E");
  --ico-external: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%204h6v6%22%2F%3E%3Cpath%20d%3D%22M20%204%2011%2013%22%2F%3E%3Cpath%20d%3D%22M18%2014v5a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1V7a1%201%200%200%201%201-1h5%22%2F%3E%3C%2Fsvg%3E");
  --ico-book: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205a2%202%200%200%201%202-2h13v18H6a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22M8%203v18%22%2F%3E%3C%2Fsvg%3E");
  --ico-users: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.2%22%2F%3E%3Cpath%20d%3D%22M2.5%2020a6.5%206.5%200%200%201%2013%200%22%2F%3E%3Cpath%20d%3D%22M16.5%205.2a3.2%203.2%200%200%201%200%205.6%22%2F%3E%3Cpath%20d%3D%22M18%2014.4A6.5%206.5%200%200%201%2021.5%2020%22%2F%3E%3C%2Fsvg%3E");
  --ico-info: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%2011v5%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227.8%22%20r%3D%221%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  --ico-send: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%203%203%2010.5l7%203%203%207z%22%2F%3E%3Cpath%20d%3D%22M10%2013.5%2021%203%22%2F%3E%3C%2Fsvg%3E");
  --ico-quote: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%206C5.5%207.5%204%2010%204%2013v5h6v-6H7c0-2%20.6-3.5%202-4.5z%22%2F%3E%3Cpath%20d%3D%22M18%206c-2.5%201.5-4%204-4%207v5h6v-6h-3c0-2%20.6-3.5%202-4.5z%22%2F%3E%3C%2Fsvg%3E");
  --ico-award: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%225.5%22%2F%3E%3Cpath%20d%3D%22m8.5%2013.5-1.5%207%205-2.5%205%202.5-1.5-7%22%2F%3E%3C%2Fsvg%3E");
  --ico-menu: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16M4%2012h16M4%2017h16%22%2F%3E%3C%2Fsvg%3E");
  --ico-x: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M18%206%206%2018%22%2F%3E%3C%2Fsvg%3E");
  --ico-home: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2010%209-7%209%207v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22M9%2021v-7h6v7%22%2F%3E%3C%2Fsvg%3E");
  --ico-clock: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3.5%202%22%2F%3E%3C%2Fsvg%3E");
  --ico-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m4%2012%205%205%2011-11%22%2F%3E%3C%2Fsvg%3E");
}

/* --------------------------------------------------------------------------
   [12.1] เครื่องมือไอคอน — ใช้ mask จึงเปลี่ยนสีตามตัวหนังสือได้
   -------------------------------------------------------------------------- */
.galley-link::before, .pager li > a::after, .cmp_pagination a::after,
.pkp_block .title::before, .breadcrumb > li:first-child > a::before,
.block_make_submission a.block_make_submission_link::before,
.media-body .date::before, .keywords .value > *::before,
.article-more-details .doi a::before, .navbar-form button::before,
#main-navigation .dropdown-toggle .caret::before,
.page_about a[href^="mailto"]::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain;    mask-size: contain;
  -webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;
  flex: 0 0 auto;
  vertical-align: -.14em;
}

/* --------------------------------------------------------------------------
   [12.2] HEADER — เพิ่มมิติ ไม่ให้เป็นบล็อกสีแบนๆ
   -------------------------------------------------------------------------- */
#headerNavigationContainer.navbar-default {
  background-color: var(--c-brand-500);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, var(--c-brand-500) 0%, var(--c-brand-600) 100%);
  border-bottom: 1px solid rgba(107,33,0,.28);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, var(--shadow-sm);
}
/* แถบบนสุด (Register/Login) เข้มลงนิดหนึ่งเพื่อแยกชั้น */
#headerNavigationContainer > .container-fluid:first-child {
  position: relative;
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}
#headerNavigationContainer > .container-fluid:first-child::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: rgba(107,33,0,.16);
  border-bottom: 1px solid rgba(107,33,0,.18);
  z-index: 0;
}
#headerNavigationContainer > .container-fluid:first-child > * { position: relative; z-index: 1; }

/* header ติดบนเวลาเลื่อน */
@supports (position: sticky) {
  #headerNavigationContainer.navbar-default { position: sticky; top: 0; z-index: 1030; }
  html { scroll-behavior: smooth; }
  :target, .pkp_structure_main [id] { scroll-margin-top: 180px; }
}
@media (max-width: 991px) {
  #headerNavigationContainer.navbar-default { position: relative; }
}

/* เส้นใต้เมนูแบบสไลด์เข้า แทนการเปลี่ยนสีพื้นทั้งก้อน */
.navbar-default #main-navigation > li > a::after {
  content: "";
  position: absolute;
  left: var(--sp-3); right: var(--sp-3); bottom: 5px;
  height: 2px; border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition);
  display: block;
}
.navbar-default #main-navigation > li > a:hover::after,
.navbar-default #main-navigation > li > a:focus::after,
.navbar-default #main-navigation > .active > a::after,
.navbar-default #main-navigation > .open > a::after { transform: scaleX(1); }
@media (max-width: 991px) {
  .navbar-default #main-navigation > li > a::after { display: none; }
}

/* caret ของเมนู Other → chevron จริง */
#main-navigation .dropdown-toggle .caret {
  border: 0; width: .8em; height: .8em; margin-left: 4px; vertical-align: middle;
}
#main-navigation .dropdown-toggle .caret::before {
  -webkit-mask-image: var(--ico-chevron-down); mask-image: var(--ico-chevron-down);
  width: .8em; height: .8em;
}
#main-navigation .dropdown-toggle .caret::before { transition: transform var(--transition); }
#main-navigation .open > .dropdown-toggle .caret::before { transform: rotate(180deg); }

/* ปุ่มค้นหา → ไอคอนแว่นขยาย */
.navbar-form button {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.96);
  color: var(--c-brand-800);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(107,33,0,.18);
}
.navbar-form button::before {
  -webkit-mask-image: var(--ico-search); mask-image: var(--ico-search);
}
.navbar-form button:hover, .navbar-form button:focus {
  background: var(--c-n-900); color: var(--c-n-0);
}
.navbar-form .form-control {
  box-shadow: 0 1px 2px rgba(107,33,0,.12) inset;
}

/* hamburger เป็นแอนิเมชันกากบาท */
.navbar-toggle { transition: background-color var(--transition); }
.navbar-default .navbar-toggle .icon-bar { transition: transform var(--transition), opacity var(--transition); }
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) { opacity: 0; }
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

/* เมนูมือถือ: สไลด์ลงนุ่มๆ */
@media (max-width: 991px) {
  #nav-menu.navbar-collapse.collapse.in { animation: navIn 260ms var(--ease) both; }
  @keyframes navIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .navbar-default #main-navigation > li a {
    display: flex; align-items: center; justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   [12.3] ปุ่ม — มีน้ำหนัก มีไอคอน กดแล้วรู้สึกได้
   -------------------------------------------------------------------------- */
.btn-group .btn-primary, .current_issue .btn-primary,
.download .btn-primary, .btn-primary,
.pkp_block.block_make_submission a.block_make_submission_link {
  background: var(--btn-bg) !important;
  border: 1px solid var(--c-brand-800) !important;
  color: var(--btn-fg) !important;
  box-shadow: var(--btn-ring);
  text-shadow: 0 1px 1px rgba(107,33,0,.35);
  letter-spacing: .01em;
  transition: background var(--transition), box-shadow var(--transition), transform 120ms var(--ease);
}
.btn-group .btn-primary:hover, .current_issue .btn-primary:hover, .download .btn-primary:hover,
.btn-primary:hover, .btn-group .btn-primary:focus, .current_issue .btn-primary:focus,
.download .btn-primary:focus, .btn-primary:focus,
.pkp_block.block_make_submission a.block_make_submission_link:hover,
.pkp_block.block_make_submission a.block_make_submission_link:focus {
  background: var(--btn-bg-hover) !important;
  color: var(--btn-fg) !important;
  box-shadow: var(--btn-ring-hover);
  transform: translateY(-1px);
}
.btn-primary:active,
.pkp_block.block_make_submission a.block_make_submission_link:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(107,33,0,.3) inset;
}

/* Make a Submission → ไอคอนส่ง + ลูกศร */
.pkp_block.block_make_submission a.block_make_submission_link {
  gap: var(--sp-2);
  letter-spacing: .02em;
}
.pkp_block.block_make_submission a.block_make_submission_link::before {
  -webkit-mask-image: var(--ico-send); mask-image: var(--ico-send);
}

/* ปุ่ม pdf / galley */
.galley-link {
  gap: 6px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.galley-link::before {
  -webkit-mask-image: var(--ico-file-text); mask-image: var(--ico-file-text);
}
.article-sidebar .galley-link, .download .galley-link {
  background: var(--btn-bg) !important;
  border: 1px solid var(--c-brand-800) !important;
  color: var(--btn-fg) !important;
  box-shadow: var(--btn-ring);
  text-shadow: 0 1px 1px rgba(107,33,0,.35);
}
.article-sidebar .galley-link::before, .download .galley-link::before {
  -webkit-mask-image: var(--ico-download); mask-image: var(--ico-download);
}
.article-sidebar .galley-link:hover, .download .galley-link:hover {
  background: var(--btn-bg-hover) !important;
  box-shadow: var(--btn-ring-hover);
  transform: translateY(-1px);
}
.galley-link:not(.article-sidebar .galley-link) { transition: all var(--transition); }

/* --------------------------------------------------------------------------
   [12.4] หัวข้อ + ตัวคั่น — ให้ลำดับชั้นชัด
   -------------------------------------------------------------------------- */
h1, h2, h3, .media-heading, .page-header h1, .page-header h2 { text-wrap: balance; }

.page-header {
  border-left: 0;
  padding-left: 0;
  position: relative;
  padding-bottom: var(--sp-3);
}
.page-header::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 56px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--c-brand-500), var(--c-brand-700));
}
.page-header h1, .page-header h2 { letter-spacing: -.015em; }

/* หัวข้อ section ในบทความ/issue */
.article-abstract h2, .article-references h2, .author-bios h2, .issue-toc .section > h2 {
  border-bottom: 0;
  position: relative;
  padding-bottom: var(--sp-3);
  letter-spacing: -.01em;
}
.article-abstract h2::after, .article-references h2::after,
.author-bios h2::after, .issue-toc .section > h2::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 44px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--c-brand-500), var(--c-brand-700));
}

/* breadcrumb: บ้าน + chevron */
.breadcrumb > li:first-child > a { display: inline-flex; align-items: center; gap: 5px; }
.breadcrumb > li:first-child > a::before {
  -webkit-mask-image: var(--ico-home); mask-image: var(--ico-home);
  width: .95em; height: .95em;
}
.breadcrumb > li + li::before {
  content: "›";
  color: var(--c-n-300);
  padding: 0 var(--sp-2);
  font-size: 1.15em;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   [12.5] การ์ด — ยกตัวตอน hover
   -------------------------------------------------------------------------- */
aside .pkp_block,
.cmp_announcements .announcement-summary,
.page_index_journal .journal-description,
.search-form, .panel {
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.cmp_announcements .announcement-summary:hover {
  border-color: var(--c-brand-200);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* หัวกล่อง sidebar: ไอคอน + เส้นไล่สี */
.pkp_block .title {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 0;
  position: relative;
  padding-bottom: var(--sp-3);
  letter-spacing: -.005em;
}
.pkp_block .title::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 32px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--c-brand-500), var(--c-brand-300));
}
.pkp_block .title::before {
  -webkit-mask-image: var(--ico-info); mask-image: var(--ico-info);
  color: var(--c-brand-600);
  width: .95em; height: .95em;
}
.block_information .title::before { -webkit-mask-image: var(--ico-info); mask-image: var(--ico-info); }
#customblock-indexed .title::before { -webkit-mask-image: var(--ico-award); mask-image: var(--ico-award); }
#customblock-journalinfo .title::before { -webkit-mask-image: var(--ico-book); mask-image: var(--ico-book); }
#customblock-thaijo .title::before { -webkit-mask-image: var(--ico-file-text); mask-image: var(--ico-file-text); }
#customblock-visitor .title::before { -webkit-mask-image: var(--ico-users); mask-image: var(--ico-users); }

/* รายการลิงก์ใน sidebar → มีลูกศร */
.pkp_block ul li a { display: inline-flex; align-items: center; gap: 6px; }
.pkp_block ul li a::after {
  content: "";
  width: .8em; height: .8em;
  background-color: currentColor;
  -webkit-mask: var(--ico-chevron-right) center/contain no-repeat;
  mask: var(--ico-chevron-right) center/contain no-repeat;
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--transition), transform var(--transition);
}
.pkp_block ul li a:hover::after { opacity: .7; transform: translateX(0); }

/* --------------------------------------------------------------------------
   [12.6] รายการบทความ / issue / ประกาศ
   -------------------------------------------------------------------------- */
.media-body .date, .date {
  display: inline-flex; align-items: center; gap: 5px;
  letter-spacing: .02em;
}
.media-body .date::before, .date::before {
  -webkit-mask-image: var(--ico-calendar); mask-image: var(--ico-calendar);
  width: .95em; height: .95em;
  opacity: .75;
}
/* ของเดิมมี <span class="glyphicon glyphicon-calendar"> อยู่แล้ว — ซ่อนอันซ้ำ */
.date .glyphicon-calendar { display: none; }

.issue-toc .article-summary,
.search-results .article-summary {
  padding: var(--sp-4);
  margin: 0 0 var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.issue-toc .article-summary:hover,
.search-results .article-summary:hover {
  background: var(--c-brand-50);
  border-color: var(--c-brand-100);
  box-shadow: var(--shadow-sm);
}
.article-summary .media-heading a { letter-spacing: -.005em; }

/* หัวข้อหมวดใน TOC มีเลขลำดับ */
.issue-toc { counter-reset: sec; }
.issue-toc .section > h2 { counter-increment: sec; display: flex; align-items: baseline; gap: 10px; }
.issue-toc .section > h2::before {
  content: counter(sec, decimal-leading-zero);
  font-size: .62em;
  font-weight: 700;
  color: var(--c-brand-600);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   [12.7] ARCHIVE — ปกหนังสือแบบ grid มีเงาและซูมตอน hover
   -------------------------------------------------------------------------- */
.pkp_op_archive .issue-summary .media-left {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition);
}
.pkp_op_archive .issue-summary .media-object {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--ease);
}
.pkp_op_archive .issue-summary:hover .media-left {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.pkp_op_archive .issue-summary:hover .media-object { transform: scale(1.04); }
.pkp_op_archive .issue-summary .media-left::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(20,23,26,.08);
  background: linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(0,0,0,.28) 100%);
  opacity: 0; transition: opacity var(--transition);
  pointer-events: none;
}
.pkp_op_archive .issue-summary:hover .media-left::after { opacity: 1; }
.pkp_op_archive .issue-summary .current {
  background: var(--btn-bg);
  color: var(--c-n-0);
  box-shadow: var(--shadow-brand);
  padding: 3px 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* pagination → chevron */
.pager li > a, .cmp_pagination a {
  gap: 6px; font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.pager li > a:hover, .cmp_pagination a:hover {
  background: var(--btn-bg);
  border-color: var(--c-brand-800);
  color: var(--c-n-0);
  box-shadow: var(--shadow-brand);
  transform: translateY(-1px);
}
.pager .next a::after, .cmp_pagination a::after {
  -webkit-mask-image: var(--ico-chevron-right); mask-image: var(--ico-chevron-right);
  width: .9em; height: .9em;
}
.pager .previous a::after { -webkit-mask-image: var(--ico-chevron-left); mask-image: var(--ico-chevron-left); }

/* --------------------------------------------------------------------------
   [12.8] ARTICLE
   -------------------------------------------------------------------------- */
.page_article .page-header { padding-bottom: var(--sp-4); }
.page_article .page-header h1 { font-size: var(--fs-3xl) !important; line-height: 1.2; }

/* DOI เป็นชิปเล็กๆ มีไอคอนลิงก์ */
.article-more-details .doi a, .page_article .doi a {
  display: inline-flex; align-items: center; gap: 6px;
  word-break: break-all;
}
.article-more-details .doi a::before {
  -webkit-mask-image: var(--ico-link); mask-image: var(--ico-link);
  width: .9em; height: .9em; opacity: .7;
}

/* keyword เป็น chip มีไอคอนแท็ก */
.keywords .value > * {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--c-brand-50);
  border: 1px solid var(--c-brand-100);
  color: var(--c-brand-800);
  font-weight: 500;
  padding: 3px 10px;
  transition: all var(--transition);
}
.keywords .value > *::before {
  -webkit-mask-image: var(--ico-tag); mask-image: var(--ico-tag);
  width: .85em; height: .85em;
}
.keywords .value > *:hover { background: var(--c-brand-100); border-color: var(--c-brand-200); }

/* กล่องข้อมูลบทความ */
.article-more-details .list-group-item {
  border-color: var(--c-line);
  background: var(--c-n-0);
}
.article-more-details .list-group-item:hover { background: var(--c-n-25); }
.article-more-details .label { display: block; font-weight: 700; color: var(--c-ink); margin-bottom: 2px; }

/* how to cite = บล็อกอ้างอิง มีเครื่องหมายคำพูด */
.how-to-cite .panel-heading { display: flex; align-items: center; gap: 8px; }
.how-to-cite .panel-heading::before {
  content: ""; width: 1em; height: 1em;
  background-color: var(--c-brand-600);
  -webkit-mask: var(--ico-quote) center/contain no-repeat;
  mask: var(--ico-quote) center/contain no-repeat;
}
.how-to-cite .panel-body {
  background: var(--c-n-50);
  border-left: 3px solid var(--c-brand-400);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-sans);
}

/* citation badges */
.citations-count, .badge_total {
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.citations-count:hover { border-color: var(--c-brand-200); background: var(--c-brand-50); }

/* ปกบทความ */
.cover-image, .article-sidebar .cover-image {
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition);
}
.cover-image:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* รายการอ้างอิง อ่านง่ายขึ้น */
.article-references .csl-entry, .article-references-content p {
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-6);
  text-indent: 0;
  border-left: 2px solid var(--c-line);
  margin-bottom: 2px;
  transition: border-color var(--transition), background-color var(--transition);
}
.article-references .csl-entry:hover, .article-references-content p:hover {
  border-left-color: var(--c-brand-400);
  background: var(--c-n-25);
}

/* --------------------------------------------------------------------------
   [12.9] หน้าแรก — hero มีน้ำหนัก
   -------------------------------------------------------------------------- */
.page_index_journal .journal-description {
  background:
    radial-gradient(120% 140% at 100% 0%, var(--c-brand-50) 0%, rgba(255,243,236,0) 58%),
    var(--c-n-0);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.page_index_journal .journal-description::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--c-brand-500), var(--c-brand-700));
}
.journal-description table td:first-child { color: var(--c-ink); letter-spacing: .01em; }
.journal-description table tr { border-bottom: 1px solid var(--c-line-soft); }
.journal-description table tr:last-child { border-bottom: 0; }
.journal-description table td { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }

.current_issue .current_issue_title {
  display: flex; align-items: center; gap: 8px;
}
.current_issue .current_issue_title::before {
  content: ""; width: 1em; height: 1em; flex: 0 0 auto;
  background-color: var(--c-brand-600);
  -webkit-mask: var(--ico-book) center/contain no-repeat;
  mask: var(--ico-book) center/contain no-repeat;
}
.current_issue .read-more { display: inline-flex; align-items: center; gap: 8px; }
.current_issue .read-more .glyphicon { display: none; }
.current_issue .read-more::after {
  content: ""; width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--ico-arrow-right) center/contain no-repeat;
  mask: var(--ico-arrow-right) center/contain no-repeat;
  transition: transform var(--transition);
}
.current_issue .read-more:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   [12.10] เนื้อหา CMS — ลิสต์และลิงก์
   -------------------------------------------------------------------------- */
.page_about #main-content ul { list-style: none; padding-left: 0; }
.page_about #main-content ul > li {
  position: relative;
  padding-left: var(--sp-5);
}
.page_about #main-content ul > li::before {
  content: "";
  position: absolute; left: 2px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-brand-500);
}
.page_about #main-content ol > li::marker { color: var(--c-brand-700); font-weight: 700; }

/* ลิงก์ในเนื้อหา: ขีดใต้บาง ๆ ที่ขยับตอน hover */
#main-content p a:not(.btn):not(.galley-link),
.page_about #main-content li a {
  background-image: linear-gradient(var(--c-brand-400), var(--c-brand-400));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--transition), color var(--transition);
  text-decoration: none !important;
}
#main-content p a:not(.btn):not(.galley-link):hover,
.page_about #main-content li a:hover { background-size: 100% 1.5px; }

/* ลิงก์ที่ออกนอกเว็บ มีไอคอนบอก */
#main-content a[href^="http"]:not([href*="tci-thaijo.org"])::after {
  content: ""; display: inline-block;
  width: .72em; height: .72em; margin-left: 4px;
  background-color: currentColor;
  opacity: .55;
  -webkit-mask: var(--ico-external) center/contain no-repeat;
  mask: var(--ico-external) center/contain no-repeat;
}
.page_about a[href^="mailto"] { display: inline-flex; align-items: center; gap: 5px; }
.page_about a[href^="mailto"]::before {
  -webkit-mask-image: var(--ico-mail); mask-image: var(--ico-mail);
  width: .9em; height: .9em; opacity: .7;
}

/* --------------------------------------------------------------------------
   [12.11] ตาราง (Editorial Team) — ให้อ่านเป็นตารางจริง
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .page_about #main-content table tr:nth-child(even) { background: var(--c-n-25); }
  .page_about #main-content table td { border-bottom: 1px solid var(--c-line-soft); padding: var(--sp-3); }
}
@media (max-width: 767px) {
  .page_about #main-content table tr {
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    padding: var(--sp-3);
    background: var(--c-n-0);
    box-shadow: var(--shadow-sm);
  }
}

/* --------------------------------------------------------------------------
   [12.12] FOOTER — มีชั้น มีเส้นแบรนด์
   -------------------------------------------------------------------------- */
footer[role="contentinfo"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 30%),
    var(--c-n-900);
  position: relative;
}
footer[role="contentinfo"]::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--c-brand-500), var(--c-brand-700), var(--c-brand-500));
}
footer[role="contentinfo"] a {
  text-decoration: none;
  background-image: linear-gradient(var(--c-brand-400), var(--c-brand-400));
  background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--transition), color var(--transition);
}
footer[role="contentinfo"] a:hover { background-size: 100% 1.5px; color: var(--c-brand-300); }
footer[role="contentinfo"] img { opacity: .9; transition: opacity var(--transition); }
footer[role="contentinfo"] img:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   [12.13] รายละเอียดเล็กๆ ที่ทำให้ดูตั้งใจ
   -------------------------------------------------------------------------- */
::selection { background: var(--c-brand-500); color: var(--c-n-0); }

/* scrollbar (WebKit) */
* { scrollbar-color: var(--c-n-300) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--c-n-50); }
::-webkit-scrollbar-thumb {
  background: var(--c-n-300); border-radius: 8px; border: 3px solid var(--c-n-50);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-n-500); }

/* โลโก้ index ใน sidebar: เทาก่อน สีตอน hover */
#customblock-indexed img {
  filter: grayscale(1);
  opacity: .72;
  transition: filter var(--transition), opacity var(--transition), transform var(--transition);
}
#customblock-indexed img:hover { filter: none; opacity: 1; transform: scale(1.06); }

/* focus ring แบบสองชั้น มองเห็นชัดบนทุกพื้นหลัง */
:focus-visible {
  outline: 2px solid var(--c-n-0);
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--c-brand-500);
  border-radius: 3px;
}
#headerNavigationContainer :focus-visible {
  outline-color: var(--c-brand-900);
  box-shadow: 0 0 0 4px var(--c-n-0);
}

/* ภาพในเนื้อหาให้มีกรอบนุ่ม */
.page_about #main-content img,
.page_announcement #main-content img,
.cmp_announcements img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ตัวเลขให้เรียงตรงคอลัมน์ */
.date, .pages, .citations-count, .badge_total { font-variant-numeric: tabular-nums; }

/* เคารพผู้ใช้ที่ปิดแอนิเมชัน */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .pkp_op_archive .issue-summary:hover .media-left,
  .cmp_announcements .announcement-summary:hover,
  .btn-primary:hover { transform: none !important; }
}

/* --------------------------------------------------------------------------
   [12.14] แก้จากการตรวจ render รอบสอง
   -------------------------------------------------------------------------- */

/* (1) .media-heading เป็น <h2> จึงโดนกฎ h2{font-size:...!important} ใน [10] ทับ
       ต้องกำหนดขนาดของมันเองด้วย !important เช่นกัน */
.media-heading, h2.media-heading { font-size: var(--fs-lg) !important; font-weight: 600 !important; }
.cmp_announcements .announcement-summary .media-heading { font-size: var(--fs-xl) !important; }
.pkp_op_archive .issue-summary .media-heading { font-size: var(--fs-base) !important; }
.issue-toc .article-summary .media-heading,
.search-results .article-summary .media-heading { font-size: var(--fs-lg) !important; }

/* (2) ปกวารสารห้ามถูก crop — ใช้ contain บนพื้นขาว */
.pkp_op_archive .issue-summary .media-left {
  background: var(--c-n-0);
  padding: var(--sp-2);
}
.pkp_op_archive .issue-summary .media-object {
  object-fit: contain;
  object-position: center;
}

/* (3) keyword: ใน HTML เป็น text node เดียวคั่นด้วย tab (ไม่มี element ให้จับ)
       ใช้ pre-wrap เพื่อคง tab ไว้ → มองเห็นเป็นคำแยกกัน */
.keywords .value {
  display: block;
  white-space: pre-wrap;
  color: var(--c-brand-800);
  font-weight: 500;
  margin-top: 4px;
}
.keywords > strong { display: inline-flex; align-items: center; gap: 6px; color: var(--c-ink); }
.keywords > strong::before {
  content: ""; width: .95em; height: .95em;
  background-color: var(--c-brand-600);
  -webkit-mask: var(--ico-tag) center/contain no-repeat;
  mask: var(--ico-tag) center/contain no-repeat;
}

/* (4) โลโก้ index: ให้เห็นสีจริง (เป็นตรารับรอง ไม่ควรซีด) แค่หรี่นิดเดียว */
#customblock-indexed img { filter: none; opacity: .9; }
#customblock-indexed img:hover { opacity: 1; transform: scale(1.05); }

/* (5) หัวข้อกล่อง sidebar ก็เป็น h2 เช่นกัน */
.pkp_block .title, h2.title { font-size: var(--fs-base) !important; }

/* (6) ป้าย Published/DOI/Keywords ในกล่องข้อมูลบทความ */
.article-more-details .list-group-item > strong,
.list-group-item > strong { color: var(--c-ink); font-weight: 700; }


/* ==========================================================================
   [13] REDESIGN — ธีมขาว-ดำ + เส้นกรอบ  (ทับส่วน header ใน [3] และ [12.2])
   --------------------------------------------------------------------------
   จากรีวิว: แถบส้มเต็มความกว้างดูโบราณ · header ซ้อนกันหลายชั้น ·
             ช่องค้นหาไม่เป็นระเบียบ · Register/Login สัดส่วนไม่ได้ · ไอคอนเล็ก

   ทิศทางใหม่
     พื้นขาว → ตัวหนังสือดำ → แบ่งส่วนด้วย "เส้นกรอบ" ไม่ใช่แบ่งด้วยสีพื้น
     ส้มใช้เป็น accent เท่านั้น: เส้นบนสุด, เส้นใต้เมนูที่ active, ปุ่มหลัก
     โลโก้ (PNG ขาว) วางบนบล็อกสีดำ → อ่านได้ชัดและดูตั้งใจ

   โครงสร้าง header 3 ชั้น
     ┌ เส้นส้ม 3px ────────────────────────────────┐
     │ แถบดำ: Register · Login              (ขวา) │
     ├─────────────────────────────────────────────┤
     │ [โลโก้บนบล็อกดำ]              ช่องค้นหา (ขวา)│
     ├─────────────────────────────────────────────┤
     │ เมนูหลัก แถวเดียว                            │
     └─────────────────────────────────────────────┘
   ========================================================================== */

:root {
  --c-header-bg:    var(--c-n-0);
  --c-header-text:  var(--c-n-900);
  --c-header-hover: var(--c-brand-700);
  --header-logo-row: 128px;
  --ico-size: 1.15em;
}

/* ---- ตัวไอคอนใหญ่ขึ้นทั้งระบบ ---- */
.galley-link::before, .pager li > a::after, .cmp_pagination a::after,
.pkp_block .title::before, .breadcrumb > li:first-child > a::before,
.block_make_submission a.block_make_submission_link::before,
.media-body .date::before, .date::before,
.article-more-details .doi a::before, .navbar-form button::before,
.keywords > strong::before, .current_issue .current_issue_title::before,
.how-to-cite .panel-heading::before, .current_issue .read-more::after,
.pkp_block ul li a::after {
  width: var(--ico-size);
  height: var(--ico-size);
}
.pkp_block .title::before { width: 1.25em; height: 1.25em; }
.galley-link::before, .article-sidebar .galley-link::before,
.download .galley-link::before { width: 1.25em; height: 1.25em; }
.navbar-form button::before { width: 1.2em; height: 1.2em; }

/* ---- โครง header ---- */
#headerNavigationContainer.navbar-default {
  background: var(--c-n-0);
  background-image: none;
  border: 0;
  border-bottom: 1px solid var(--c-n-200);
  box-shadow: none;
  position: relative;
}
/* เส้นแบรนด์บนสุด */
#headerNavigationContainer.navbar-default::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--c-brand-500);
  z-index: 2;
}

/* ---- ชั้น 1: แถบดำ Register / Login ---- */
#headerNavigationContainer > .container-fluid:first-child {
  padding-top: 0;
  padding-bottom: 0;
}
#headerNavigationContainer > .container-fluid:first-child::before {
  inset: 0 calc(50% - 50vw);
  background: var(--c-n-900);
  border-bottom: 0;
  top: 3px;
}
#navigationUser {
  gap: 0;
  align-items: stretch;
  min-height: 40px;
  margin-top: 3px;
}
#navigationUser > li { display: flex; align-items: center; }
#navigationUser > li + li { border-left: 1px solid rgba(255,255,255,.16); }
.navbar-default #navigationUser > li a {
  color: rgba(255,255,255,.86) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 0 18px !important;
  height: 40px;
  display: flex; align-items: center;
  border-radius: 0;
  background: transparent;
}
.navbar-default #navigationUser > li a:hover,
.navbar-default #navigationUser > li a:focus {
  color: var(--c-n-0) !important;
  background: var(--c-brand-600);
}

/* ---- ชั้น 2: โลโก้ + ช่องค้นหา ---- */
#headerNavigationContainer > .container-fluid:last-child {
  position: relative;
  display: block;
  padding-top: 0;
  padding-bottom: 0;
}
.navbar-header {
  display: flex;
  align-items: center;
  min-height: var(--header-logo-row);
  padding: 18px 0;
  float: none;
}
.navbar-brand.navbar-brand-logo {
  background: var(--c-n-900);
  padding: 16px 22px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  transition: background-color var(--transition), transform var(--transition);
}
.navbar-brand.navbar-brand-logo:hover { background: var(--c-brand-700); }
.navbar-brand-logo img { max-height: 76px; }

/* ช่องค้นหา ลอยชิดขวาในแถวเดียวกับโลโก้ */
.pull-md-right {
  position: absolute;
  right: var(--gutter);
  top: 0;
  height: var(--header-logo-row);
  display: flex;
  align-items: center;
  margin: 0;
  width: auto;
}
.navbar-form {
  display: flex;
  gap: 0;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 8px;
  overflow: hidden;
  background: var(--c-n-0);
  box-shadow: 0 0 30px 10px rgba(255,255,255,.6), 0 0 60px 20px rgba(255,255,255,.35), 0 0 100px 40px rgba(255,255,255,.15);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.navbar-form:focus-within {
  border-color: var(--c-n-900);
  box-shadow: 0 0 35px 12px rgba(255,255,255,.7), 0 0 70px 25px rgba(255,255,255,.4), 0 0 110px 50px rgba(255,255,255,.2);
}
.navbar-form .form-group { flex: 1 1 auto; margin: 0; }
.navbar-form .form-control {
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-width: 220px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 14px !important;
  color: var(--c-n-900);
}
.navbar-form .form-control:focus { box-shadow: none; border: 0 !important; }
.navbar-form .form-control::placeholder { color: var(--c-n-500); }
.pull-md-right form button {
  border: 0;
  border-left: 1px solid var(--c-n-200);
  border-radius: 0;
  background: var(--c-n-900);
  color: var(--c-n-0);
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.pull-md-right form button:hover,
.pull-md-right form button:focus {
  background: var(--c-brand-700);
  color: var(--c-n-0);
}

/* ---- ชั้น 3: เมนูหลัก ---- */
#nav-menu {
  width: 100%;
  flex: 1 1 100%;
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--c-n-200);
  padding: 0;
  margin: 0;
  gap: 0;
}
#main-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin: 0;
  flex: 1 1 auto;
}
#main-navigation > li { display: flex; }
.navbar-default #main-navigation > li a,
.navbar-default .navbar-nav > .open > a {
  display: flex;
  align-items: center;
  color: var(--c-n-900) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .005em;
  padding: 16px 14px !important;
  border-radius: 0;
  background: transparent;
  white-space: nowrap;
}
.navbar-default #main-navigation > li a:hover,
.navbar-default #main-navigation > li a:focus,
.navbar-default .navbar-nav > .open > a {
  color: var(--c-brand-700) !important;
  background: var(--c-n-25);
}
/* เส้นใต้เมนู */
.navbar-default #main-navigation > li > a::after {
  left: 14px; right: 14px; bottom: 0;
  height: 3px;
  background: var(--c-brand-500);
  border-radius: 0;
}

/* dropdown "Other" */
.navbar-default #main-navigation .dropdown-menu {
  border: 1px solid var(--c-n-200);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  margin-top: 0;
}
.navbar-default .dropdown-menu li > a {
  color: var(--c-n-700) !important;
  font-size: 14px !important;
  padding: 11px 14px !important;
  border-radius: 6px;
}
.navbar-default .dropdown-menu li > a:hover,
.navbar-default .dropdown-menu li > a:focus {
  background: var(--c-n-50) !important;
  color: var(--c-brand-700) !important;
}
#main-navigation .dropdown-toggle .caret::before { width: .85em; height: .85em; }

/* hamburger */
.navbar-toggle {
  border: 1px solid var(--c-n-300);
  border-radius: 8px;
  background: var(--c-n-0);
  width: 46px; height: 46px;
  padding: 0;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background: var(--c-n-50); border-color: var(--c-n-900); }
.navbar-default .navbar-toggle .icon-bar { background-color: var(--c-accent); width: 20px; }

/* ริบบิ้นไว้อาลัยไม่ทับโลโก้ */
@media (max-width: 1279px) { .navbar-header { padding-left: 40px; } }
@media (max-width: 767px)  { .navbar-header { padding-left: 32px; } }

/* --------------------------------------------------------------------------
   [13.1] HEADER — จอเล็ก
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  :root { --header-logo-row: auto; }
  #headerNavigationContainer > .container-fluid:last-child { display: block; }
  .navbar-header {
    min-height: 0;
    padding: 14px 0 14px 40px;
    justify-content: space-between;
  }
  .navbar-brand-logo { padding: 12px 16px; }
  .navbar-brand-logo img { max-height: 56px; }

  .pull-md-right {
    position: static;
    height: auto;
    width: 100%;
    padding: 0 0 var(--sp-4);
  }
  .navbar-form { width: 100%; }
  .navbar-form .form-control { min-width: 0; }

  #nav-menu {
    display: block;
    border-top: 1px solid var(--c-n-200);
    padding: var(--sp-2) 0 var(--sp-3);
  }
  #main-navigation { display: block; }
  #main-navigation > li { display: block; }
  .navbar-default #main-navigation > li a {
    padding: 14px 4px !important;
    border-bottom: 1px solid var(--c-n-100);
    justify-content: space-between;
  }
  .navbar-default #main-navigation > li a:hover { background: transparent; }
  .navbar-default .dropdown-menu li > a { color: var(--c-n-700) !important; }
  .navbar-default #main-navigation .dropdown-menu {
    background: var(--c-n-50);
    border: 0; border-radius: 8px;
    box-shadow: none;
    margin: 0 0 var(--sp-2);
  }
  #navigationUser { min-height: 38px; }
  .navbar-default #navigationUser > li a { height: 38px; padding: 0 14px !important; font-size: 12px !important; }
}
@media (max-width: 767px) {
  .navbar-brand-logo img { max-height: 46px; }
}

/* --------------------------------------------------------------------------
   [13.2] ทั้งเว็บ — แบ่งส่วนด้วยเส้นกรอบ ไม่ใช่สีพื้น
   -------------------------------------------------------------------------- */
body { background: var(--c-n-0); }

/* การ์ดทุกใบ: กรอบบาง มุมคม เงาน้อย */
aside .pkp_block,
.cmp_announcements .announcement-summary,
.page_index_journal .journal-description,
.search-form, .panel, .list-group, .thumbnail,
.pkp_op_archive .issue-summary .media-left {
  border-radius: 10px;
  border: 1px solid var(--c-n-200);
  box-shadow: none;
}
aside .pkp_block:hover,
.cmp_announcements .announcement-summary:hover { box-shadow: var(--shadow); }

/* hero หน้าแรก: ขาวล้วน กรอบบาง เส้นบนสีส้ม */
.page_index_journal .journal-description {
  background: var(--c-n-0);
  padding: var(--sp-6);
}
@media (max-width: 767px) {
  .page_index_journal .journal-description { padding: var(--sp-3) var(--sp-4); }
}
.page_index_journal .journal-description::before {
  left: 0; right: 0; top: 0; bottom: auto;
  width: auto; height: 3px;
  background: var(--c-brand-500);
}

/* ปุ่มหลัก: ดำ = ปุ่มทั่วไป, ส้ม = call to action */
.btn-default {
  border: 1px solid var(--c-n-300);
  background: var(--c-n-0);
  color: var(--c-n-900);
  border-radius: 8px;
}
.btn-default:hover, .btn-default:focus { background: var(--c-n-900); border-color: var(--c-n-900); color: var(--c-n-0); }

.btn-group .btn-primary, .current_issue .btn-primary, .download .btn-primary, .btn-primary,
.pkp_block.block_make_submission a.block_make_submission_link,
.article-sidebar .galley-link, .download .galley-link {
  border-radius: 8px !important;
  text-shadow: none;
  box-shadow: none;
}
.btn-group .btn-primary:hover, .current_issue .btn-primary:hover, .download .btn-primary:hover,
.btn-primary:hover, .pkp_block.block_make_submission a.block_make_submission_link:hover,
.article-sidebar .galley-link:hover, .download .galley-link:hover {
  box-shadow: 0 4px 14px rgba(196,63,0,.24);
}

/* หัวข้อหน้า: เส้นใต้เต็มความกว้าง + ขีดส้มสั้น */
.page-header {
  border-bottom: 1px solid var(--c-n-200);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.page-header::after { height: 3px; bottom: -2px; width: 48px; background: var(--c-brand-500); }

/* หัวข้อ section */
.article-abstract h2, .article-references h2, .author-bios h2, .issue-toc .section > h2 {
  border-bottom: 1px solid var(--c-n-200);
  padding-bottom: var(--sp-3);
}
.article-abstract h2::after, .article-references h2::after,
.author-bios h2::after, .issue-toc .section > h2::after {
  bottom: -1px; height: 2px; background: var(--c-brand-500);
}

/* sidebar: หัวกล่องคั่นด้วยเส้น ไม่ใช่พื้นสี */
aside .pkp_block { padding: var(--sp-4) var(--sp-4) var(--sp-4); }
.pkp_block .title {
  border-bottom: 1px solid var(--c-n-200);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.pkp_block .title::after { bottom: -1px; height: 2px; width: 28px; background: var(--c-brand-500); }
.pkp_block .title::before { color: var(--c-n-900); }

/* ตารางหน้าแรก: เส้นคั่นบาง */
.journal-description table tr { border-bottom: 1px solid var(--c-n-100); }

/* ปกใน archive: กรอบบาง ไม่ต้องมีเงาลอย */
.pkp_op_archive .issue-summary .media-left { box-shadow: none; }
.pkp_op_archive .issue-summary:hover .media-left {
  box-shadow: none;
  border-color: var(--c-n-900);
  transform: none;
}
.pkp_op_archive .issue-summary .current {
  background: var(--c-n-900);
  box-shadow: none;
  border-radius: 4px;
}

/* footer: ดำล้วน เส้นส้มบาง */
footer[role="contentinfo"] { background: var(--c-n-900); }
footer[role="contentinfo"]::before { height: 3px; background: var(--c-brand-500); }

/* breadcrumb / รายการ hover: ใช้เทาอ่อน ไม่ใช่ส้มอ่อน */
.issue-toc .article-summary:hover,
.search-results .article-summary:hover {
  background: var(--c-n-25);
  border-color: var(--c-n-200);
  box-shadow: none;
}
.keywords .value { color: var(--c-n-700); }

/* --------------------------------------------------------------------------
   [13.3] แก้จากการตรวจ render
   (1) แถบดำบนสุดหาย เพราะ #navigationUser ยัง float:right อยู่
       → พ่อแม่สูง 0 แถบดำจึงไม่มีความสูง และตัวหนังสือขาวไปอยู่บนพื้นขาว
   -------------------------------------------------------------------------- */
#headerNavigationContainer > .container-fluid:first-child .row {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  min-height: 42px;
  margin: 0;
}
#headerNavigationContainer > .container-fluid:first-child nav {
  display: flex;
  align-items: stretch;
}
#navigationUser {
  float: none !important;
  display: flex;
  align-items: stretch;
  min-height: 42px;
  margin: 0;
  padding: 0;
}
#navigationUser.pull-right { float: none !important; }
.navbar-default #navigationUser > li a { height: 42px; }

/* (2) โลโก้ใหญ่ขึ้น บล็อกดำหายใจได้ */
:root { --header-logo-row: 200px; }
.navbar-brand.navbar-brand-logo { padding: 18px 26px; border-radius: 12px; }
.navbar-brand-logo img { max-height: 150px; }
@media (max-width: 991px) {
  :root { --header-logo-row: auto; }
  .navbar-brand-logo img { max-height: 62px; }
}
@media (max-width: 767px) {
  .navbar-brand.navbar-brand-logo { padding: 12px 16px; border-radius: 10px; }
  .navbar-brand-logo img { max-height: 48px; }
}

/* (3) ช่องค้นหาให้สมส่วนกับ header ที่สูงขึ้น */
.navbar-form .form-control { min-height: 46px; min-width: 240px; }
.pull-md-right form button { min-height: 46px; padding: 0 20px; }

/* (4) แถบเมนูให้ตัวหนังสือไม่ชิดขอบซ้ายเกิน */
#main-navigation > li:first-child > a { padding-left: 0 !important; }
.navbar-default #main-navigation > li:first-child > a::after { left: 0; }

/* (5) ThaiJO cookie banner — ให้เข้ากับธีม */
#thaijo-cookie-banner .thaijo-cb-card {
  border: 1px solid var(--c-n-200) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: var(--font-sans) !important;
}
#thaijo-cookie-banner .thaijo-cb-header {
  font-weight: 700 !important;
  color: var(--c-n-900) !important;
  border-bottom: 1px solid var(--c-n-100) !important;
}
#thaijo-cookie-banner .thaijo-cb-link { color: var(--c-brand-700) !important; }
#thaijo-cookie-banner button {
  border-radius: 8px !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  min-height: 40px !important;
}

/* --------------------------------------------------------------------------
   [13.4] แถบดำบนสุด — เปลี่ยนวิธีทำ
   เดิมใช้ ::before ยืดเต็มจอ แต่ absolute + top/bottom ทำให้ความสูงเป็น 0
   ใหม่: วาดด้วย gradient บนตัว header เอง → เต็มความกว้างจอแน่นอน ไม่ต้องพึ่ง pseudo
   ชั้น: 0-3px = เส้นส้ม | 3-45px = แถบดำ | 45px ลงไป = ขาว
   -------------------------------------------------------------------------- */
#headerNavigationContainer.navbar-default {
  background-image: linear-gradient(
    180deg,
    var(--c-brand-500) 0,   var(--c-brand-500) 3px,
    var(--c-n-900)     3px, var(--c-n-900)     45px,
    var(--c-n-0)       45px, var(--c-n-0)      100%
  );
  background-repeat: no-repeat;
}
#headerNavigationContainer.navbar-default::before { display: none; }
#headerNavigationContainer > .container-fluid:first-child::before { display: none; }
#headerNavigationContainer > .container-fluid:first-child { padding-top: 3px; }

@media (max-width: 991px) {
  #headerNavigationContainer.navbar-default {
    background-image: linear-gradient(
      180deg,
      var(--c-brand-500) 0,   var(--c-brand-500) 3px,
      var(--c-n-900)     3px, var(--c-n-900)     41px,
      var(--c-n-0)       41px, var(--c-n-0)      100%
    );
  }
  #headerNavigationContainer > .container-fluid:first-child .row,
  #navigationUser { min-height: 38px; }
  .navbar-default #navigationUser > li a { height: 38px; }
}

/* --------------------------------------------------------------------------
   [13.5] หน้า Archives — ปกเต็มกรอบ
   สาเหตุที่ปกเล็ก: ระหว่าง .media-left กับ <img> มี <a class="cover"> คั่นอยู่
   ตัว <a> เป็น inline → ไม่มีความกว้าง → img{width:100%} จึงอ้างอิงไม่ได้ เหลือ 128px
   แก้: ทำ <a class="cover"> ให้เป็น block เต็มกรอบก่อน แล้ว img จึงเต็มตาม
   -------------------------------------------------------------------------- */
.pkp_op_archive .issue-summary .media-left {
  aspect-ratio: 500 / 707;      /* สัดส่วนจริงของไฟล์ปก */
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
  background: var(--c-n-100);
}
.pkp_op_archive .issue-summary .media-left > .cover,
.pkp_op_archive .issue-summary .media-left > a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}
.pkp_op_archive .issue-summary .media-object {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ปกฉบับปัจจุบัน / หน้า issue ก็เต็มกรอบเหมือนกัน */
.issue-details .cover,
.current_issue .cover,
.article-sidebar .cover-image,
.page_article .cover-image {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  line-height: 0;
}
.issue-details .cover img,
.current_issue .cover img,
.article-sidebar .cover-image img,
.page_article .cover-image img {
  width: 100%;
  height: auto;
  display: block;
  max-width: none;
}

/* การ์ดในตาราง Archives: ข้อความมีที่หายใจ */
.pkp_op_archive .issues { gap: var(--sp-6) var(--sp-5); }
.pkp_op_archive .issue-summary .media-body { padding: 0 2px; }
.pkp_op_archive .issue-summary .media-heading { margin-bottom: 2px; }
.pkp_op_archive .issue-summary .series {
  font-size: var(--fs-sm);
  color: var(--c-n-600);
  font-weight: 400;
  margin: 0;
}
.pkp_op_archive .issue-summary:hover .media-left { border-color: var(--c-n-900); }
.pkp_op_archive .issue-summary .media-heading a { color: var(--c-n-900); }
.pkp_op_archive .issue-summary:hover .media-heading a { color: var(--c-brand-700); }

/* --------------------------------------------------------------------------
   [13.6] โลโก้ — ทำไมมันจม และวิธีแก้
   --------------------------------------------------------------------------
   ตรวจไฟล์ pageHeaderLogoImage_en_US.png (500×314, greyscale 100%) พบว่า
   พิกเซลทึบแบ่งเป็น 2 กลุ่ม:
     · 58% เป็นสีดำ  → ตัวพิมพ์เล็ก "ournal of / ublic ealth and / evelopment"
     · 42% เป็นสีขาว → ตัวใหญ่ J P H D และบรรทัด ISSN ทั้งสอง
   แปลว่าไฟล์นี้ถูกออกแบบมาให้วางบน "พื้นส้ม" เท่านั้น เพราะทั้งดำและขาวอ่านออก
     วางบนขาว → ตัว J P H D กับ ISSN หายไป
     วางบนดำ  → ตัวพิมพ์เล็กหายไป  ← อาการที่เห็น
   วิธีแก้ (CSS ล้วน ไม่แตะไฟล์รูป):
     filter: brightness(0) บังคับทุกพิกเซลทึบให้เป็นดำสนิท โดยคง alpha ไว้
     → ได้ wordmark สีดำล้วนคมชัดบนพื้นขาว ไม่ต้องมีบล็อกดำรองอีกต่อไป
   -------------------------------------------------------------------------- */
.navbar-brand.navbar-brand-logo {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.navbar-brand.navbar-brand-logo:hover { background: transparent; }

.navbar-brand-logo img {
  filter: none;
  max-height: 150px;
  max-width: 600px;
  transition: opacity var(--transition);
}
.navbar-brand.navbar-brand-logo:hover img { opacity: .62; }

/* เส้นแบ่งบางๆ ทางขวาของโลโก้ ให้บล็อกโลโก้มีขอบเขตชัดโดยไม่ต้องใช้พื้นสี */
.navbar-header { gap: 0; }

/* [13.8] Polygon Particles — removed เพราะ overflow:hidden ตัด submenu dropdown */

@media (max-width: 991px) {
  .navbar-brand-logo img { max-height: 56px; max-width: 400px; }
  .navbar-brand.navbar-brand-logo { padding: 0; }
}
@media (max-width: 767px) {
  .navbar-brand-logo img { max-height: 44px; max-width: 280px; }
  .navbar-brand.navbar-brand-logo { padding: 0; border-radius: 0; }
}

/* --------------------------------------------------------------------------
   [13.7] Inter — เปิดฟีเจอร์ของฟอนต์ให้เต็มที่
   Inter มี OpenType feature ที่ช่วยงานวิชาการ:
     cv05 = ตัว l มีหาง (แยก l กับ 1 กับ I ออกจากกันชัด — สำคัญกับ ISSN/DOI)
     ss03 = เครื่องหมายวรรคตอนกลมขึ้น
     tnum = ตัวเลขความกว้างเท่ากัน ใช้กับตาราง/เลขหน้า
   -------------------------------------------------------------------------- */
:root {
  --font-sans: 'Inter', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
body {
  font-feature-settings: "cv05" 1, "ss03" 1;
  font-optical-sizing: auto;
  letter-spacing: -0.006em;   /* Inter แน่นกว่า Inter นิดหน่อยจึงชดเชยเล็กน้อย */
}
h1, h2, h3, h4,
.page-header h1, .page-header h2, .media-heading {
  letter-spacing: -0.021em;   /* หัวข้อ Inter ควรบีบมากกว่าตัวเนื้อหา */
  font-weight: 700;
}
.date, .pages, .citations-count, .badge_total,
.journal-description table td, .article-more-details .list-group-item {
  font-feature-settings: "tnum" 1, "cv05" 1;
}
/* เมนู/ปุ่ม: Inter ที่ 600 อ่านคมกว่า 500 */
.navbar-default #main-navigation > li a,
.navbar-default #navigationUser > li a,
.btn, .galley-link,
.pkp_block.block_make_submission a.block_make_submission_link {
  font-weight: 600 !important;
  letter-spacing: -0.005em;
}
.navbar-default #navigationUser > li a { letter-spacing: .04em; }

/* ==========================================================================
   [14] แก้จากการวัดจริง — breadcrumb / การจัดแนวซ้าย / line-height / การ์ด
   ========================================================================== */

/* --------------------------------------------------------------------------
   [14.1] BREADCRUMB สูงไม่เท่ากัน
   วัดได้: Home  top 269.2 h 23.1 (inline-flex เพราะมีไอคอน)
           Archives top 275.8 h 16   (inline)
           ตัวปัจจุบัน top 274.8 h 19.6 (inline-block)
   → สาม display คนละแบบ = คนละ baseline เหลื่อมกัน 6.6px
   แก้: บังคับทุกชิ้นเป็น flex แถวเดียว align-items:center
   -------------------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  line-height: 1.4;
}
.breadcrumb > li,
.breadcrumb > li > a,
.breadcrumb > li.active {
  display: inline-flex !important;
  align-items: center;
  line-height: 1.4 !important;
  vertical-align: middle;
  min-height: 22px;
}
.breadcrumb > li + li::before {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: 1.1em;
  padding: 0 10px;
  color: var(--c-n-300);
}
.breadcrumb > li:first-child > a::before { margin-right: 6px; }

/* --------------------------------------------------------------------------
   [14.2] ขอบซ้ายไม่ตรงแนว
   วัดได้ (เทียบขอบเนื้อหา = 0):
     .breadcrumb / .page-header / .issue-toc  →   0px
     .article-summary                          → +16px (จาก padding)
     .article-summary .media-body              → +17px (table-cell)
     .thumbnail.col-md-4 (ปกฉบับ)              → -15px (จาก .row margin ติดลบ)
   → ปกล้ำออกไปทางซ้าย 15px ส่วนรายการบทความเยื้องเข้ามา 16px
   -------------------------------------------------------------------------- */

/* ยกเลิก margin ติดลบของ .row ในพื้นที่เนื้อหา (ไม่แตะ footer) */
#main-content .row { margin-left: 0; margin-right: 0; }
#main-content .row > [class*="col-"] { padding-left: 0; padding-right: 0; }

/* ปกฉบับ: ชิดซ้ายตรงแนว และเว้นช่องให้คอลัมน์ขวา */
.issue-toc .heading .thumbnail {
  padding: 0;
  border: 1px solid var(--c-n-200);
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-n-100);
}
.issue-toc .heading .thumbnail > .cover { display: block; line-height: 0; }
.issue-toc .heading .thumbnail img { width: 100%; height: auto; display: block; }
@media (min-width: 992px) {
  .issue-toc .heading .issue-details { padding-left: var(--sp-6) !important; }
}
@media (max-width: 991px) {
  .issue-toc .heading .thumbnail { max-width: 280px; margin-bottom: var(--sp-5); }
}

/* media-body ของ bootstrap เป็น table-cell ทำให้เยื้อง — บังคับเป็น block */
.article-summary .media-body,
.issue-summary .media-body,
.announcement-summary .media-body { display: block; width: auto; }

/* --------------------------------------------------------------------------
   [14.3] เอาสไตล์ hover มาเป็นสถานะปกติ (ตามที่ขอ)
   การ์ดมีกรอบตั้งแต่แรก → ขอบซ้ายของการ์ดอยู่ที่ 0 พอดี
   ปัญหา padding 16px ที่ทำให้ดูเยื้องจึงหมดไปเอง เพราะมีกรอบบอกขอบเขตแล้ว
   hover จึงยกระดับเป็นเส้นเข้ม + เงา แทนที่จะเป็นแค่เปลี่ยนพื้น
   -------------------------------------------------------------------------- */
.issue-toc .article-summary,
.search-results .article-summary,
.page_search .article-summary {
  background: var(--c-n-0);
  border: 1px solid var(--c-n-200);
  border-radius: 10px;
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-3);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.issue-toc .article-summary:hover,
.search-results .article-summary:hover,
.page_search .article-summary:hover {
  background: var(--c-n-0);
  border-color: var(--c-n-900);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.issue-toc .article-summary:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   [14.4] LINE-HEIGHT — แยก "ตัวเนื้อหา" ออกจาก "ตัว UI"
   วัดได้: ทุกอย่างใช้ 1.65 เหมือนกันหมด รวมทั้งชื่อผู้แต่ง วันที่ เลขหน้า
           ทำให้ข้อมูลสั้น ๆ ลอยห่างกันจนดูโหวง
   หลักการ: ย่อหน้ายาว = หลวมเพื่ออ่านง่าย · ข้อมูลสั้น = แน่นเพื่อจับกลุ่ม
   -------------------------------------------------------------------------- */
:root {
  --lh-base:  1.6;    /* ย่อหน้า */
  --lh-ui:    1.45;   /* ข้อมูลสั้น ๆ */
  --lh-tight: 1.25;   /* หัวข้อ */
}

/* ข้อมูลสั้น: ชื่อผู้แต่ง วันที่ เลขหน้า คำอธิบาย สังกัด */
.authors, .published, .pages, .date, .media-body .date,
.affiliation, .series, .description,
.article-summary .authors, .issue-summary .series,
.pkp_block .content, .pkp_block ul li,
.breadcrumb, .list-group-item, .article-more-details,
.keywords .value, .citations-count, .badge_total,
.galley-link, .btn, .navbar-form .form-control,
footer[role="contentinfo"] p {
  line-height: var(--lh-ui) !important;
}

/* ระยะห่างภายในการ์ดบทความให้กระชับ */
.article-summary .media-heading { margin: 0 0 6px !important; }
.article-summary .authors { margin: 0 0 6px !important; }
.article-summary .published,
.article-summary .pages { margin: 0 !important; }
.article-summary .meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.article-summary .galley-link { margin-top: 10px; }

/* หัวข้อฉบับ: จัดกลุ่มให้ชิดกัน */
.issue-toc .heading .issue-details .description p { margin: 0 0 6px; }
.issue-toc .heading .issue-details .published { margin: 0 !important; }
.issue-toc .heading .issue-details .description p:first-child {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--c-ink);
  line-height: var(--lh-tight) !important;
  letter-spacing: -0.021em;
}

/* ย่อหน้าเนื้อหายาว ๆ ยังหลวมเท่าเดิมเพื่ออ่านง่าย */
#main-content p, .page_about #main-content li, .article-abstract, .article-abstract p {
  line-height: var(--lh-base) !important;
}

/* ระยะห่างระหว่าง section ให้เป็นจังหวะเดียวกันทั้งเว็บ */
.issue-toc .section { margin-bottom: var(--sp-7); }
.issue-toc .section:last-child { margin-bottom: 0; }
.issue-toc .section > .page-header { margin-bottom: var(--sp-4); }
.issue-toc .heading { margin-bottom: var(--sp-7); }
.breadcrumb { margin-bottom: var(--sp-5); }

/* หัวข้อ section ที่ห่อด้วย <small> (OJS ใช้ใน issue TOC) */
.issue-toc .page-header h2 > small,
.page-header h2 > small {
  display: block;
  font-size: var(--fs-xl) !important;
  color: var(--c-ink) !important;
  font-weight: 700;
  line-height: var(--lh-tight) !important;
  margin: 0;
}

/* --------------------------------------------------------------------------
   [14.5] หน้า Search — ผลการค้นหาอยู่ "ข้างใน" <form class="search-form">
   โครงจริง: form.search-form > input + .form-group + fieldset.search-advanced
                                + .search-results + .cmp_pagination
   ก่อนหน้านี้ผมทำ .search-form เป็นการ์ด → กรอบเลยครอบผลการค้นหาไปด้วย
   และ padding 24px ดันทุกอย่างเยื้องขวา ไม่ตรงแนวกับหัวข้อ "Search"
   แก้: ยกการ์ดออกจาก form แล้วไปใส่เฉพาะ "แถวค้นหา" กับ "ตัวกรอง"
   -------------------------------------------------------------------------- */
.page_search .search-form,
form.search-form {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

/* แถวช่องค้นหา */
.search-form > .form-group {
  margin: 0 0 var(--sp-4);
}
.page_search .input-group {
  border: 1px solid var(--c-n-300);
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-n-0);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.page_search .input-group:focus-within {
  border-color: var(--c-n-900);
  box-shadow: 0 0 0 3px var(--c-n-100);
}
.page_search .input-group .form-control {
  border: 0 !important;
  border-radius: 0;
  min-height: 52px;
  font-size: var(--fs-lg) !important;
  padding: 0 var(--sp-4);
  box-shadow: none;
}
.page_search .input-group-btn .btn {
  border: 0;
  border-radius: 0;
  min-height: 52px;
  padding: 0 var(--sp-5);
  background: var(--c-n-900);
  color: var(--c-n-0);
  font-weight: 600;
}
.page_search .input-group-btn .btn:hover { background: var(--c-brand-700); color: var(--c-n-0); }

/* ตัวกรองขั้นสูง */
.search-advanced {
  background: var(--c-n-25);
  border: 1px solid var(--c-n-200);
  border-radius: 10px;
  padding: var(--sp-5);
  margin: 0 0 var(--sp-7);
}
.search-advanced > legend {
  font-size: var(--fs-base) !important;
  font-weight: 700;
  color: var(--c-ink);
  border: 0;
  width: auto;
  padding: 0 var(--sp-2);
  margin: 0 0 0 -8px;
}
.search-advanced label { font-weight: 600; color: var(--c-ink); font-size: var(--fs-sm); }
.search-advanced select,
.search-advanced input {
  border: 1px solid var(--c-n-300);
  border-radius: 8px;
  min-height: 42px;
  padding: 0 var(--sp-3);
  background: var(--c-n-0);
}
.search-advanced select:focus,
.search-advanced input:focus { border-color: var(--c-n-900); box-shadow: 0 0 0 3px var(--c-n-100); outline: none; }

/* ผลการค้นหา — ชิดซ้ายตรงแนวกับหัวข้อหน้า */
.search-results {
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
}
.search-results > h2, .search-results > h3 {
  font-size: var(--fs-xl) !important;
  font-weight: 700;
  position: relative;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-n-200);
  margin: 0 0 var(--sp-4);
}
.search-results > h2::after, .search-results > h3::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 44px; height: 2px;
  background: var(--c-brand-500);
}
.cmp_pagination { margin-top: var(--sp-6); }

/* ปุ่ม Search ถูกตัดขอบ: .input-group-btn ของ bootstrap เป็น table-cell
   พอ .input-group เป็น flex + overflow:hidden ปุ่มจึงล้นออกไปแล้วโดนตัด */
.page_search .input-group { display: flex; align-items: stretch; width: 100%; }
.page_search .input-group > .form-group,
.page_search .input-group > .form-control { flex: 1 1 auto; min-width: 0; }
.page_search .input-group-btn {
  display: flex;
  flex: 0 0 auto;
  width: auto;
  font-size: inherit;
  white-space: nowrap;
}
.page_search .input-group-btn .btn { white-space: nowrap; }

/* ==========================================================================
   [15] แนวซ้ายเดียวทั้งเว็บ  (header = เนื้อหา = sidebar = footer)
   --------------------------------------------------------------------------
   วัดที่จอ 1920px ก่อนแก้ — container อยู่ที่ 360px, padding 16px → แนวควรเป็น 376
     โลโก้            361  ← เกินมาซ้าย 15px
     เมนู             376  ← ถูกต้อง
     #main-content    391  ← เกินมาขวา 15px
     การ์ดหน้าแรก      391  ← ตามเนื้อหา
   สาเหตุคนละตัวกัน:
     · โลโก้ — Bootstrap ตั้ง .navbar>.container-fluid .navbar-brand{margin-left:-15px}
               (specificity 0,2,1 ชนะกฎเดิมของเราที่ 0,2,0)
     · เนื้อหา — .pkp_structure_main มี class col-xs-12 ซึ่งมี padding-left:15px
   แก้: ปลดทั้งสองตัว แล้วสร้างช่องว่างระหว่างคอลัมน์ด้วย padding-right ของ main แทน
        ผลลัพธ์ทุกอย่างอยู่ที่ 376 ตรงแนวเดียวกันหมด
   ========================================================================== */

/* 1) โลโก้ — ต้อง !important เพราะสู้กับกฎ media query ของ Bootstrap */
.navbar-default .navbar-header .navbar-brand.navbar-brand-logo,
.navbar > .container-fluid .navbar-brand.navbar-brand-logo {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2) คอลัมน์เนื้อหา — ปลด padding ของ grid ออก ใช้ช่องว่างที่กำหนดเองแทน */
.pkp_structure_main,
.pkp_structure_sidebar {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 992px) {
  .pkp_structure_main    { width: 72%; padding-right: var(--sp-7); }
  .pkp_structure_sidebar { width: 28%; padding-left: 0; }
}

/* tablet / mobile: เรียงลงล่าง ไม่ต้องมีช่องว่างด้านข้าง */
@media (max-width: 991px) {
  .pkp_structure_main    { padding-right: 0; }
  .pkp_structure_sidebar { padding-left: 0; padding-right: 0; }
}

/* 3) กันไม่ให้ .row ของ Bootstrap ในเนื้อหาสร้าง margin ติดลบซ้ำอีก */
.pkp_structure_content > .row,
#main-content .row { margin-left: 0; margin-right: 0; }

/* --------------------------------------------------------------------------
   [15.1] จอ < 1280px — ริบบิ้นไว้อาลัยทับโลโก้
   เดิมแก้ด้วย .navbar-header{padding-left:40px} แต่นั่นทำให้ "โลโก้" หลุดแนว
   ไปจากเนื้อหา 40px (วัดได้ที่ 1024px: โลโก้ 56 / เนื้อหา 16)
   ใหม่: ขยาย --gutter ของทั้งหน้าเท่ากันหมด แล้วย่อริบบิ้นลง
        → หลบริบบิ้นได้ และทุกอย่างยังอยู่แนวเดียวกัน
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  :root { --gutter: 36px; }
  .navbar-header { padding-left: 0 !important; }
  .mourning-ribbon { width: 28px; }
}
@media (max-width: 767px) {
  :root { --gutter: 16px; }
  .mourning-ribbon { width: 22px; }
}

/* ให้ทุก container ใช้ --gutter ตัวเดียวกันจริง ๆ */
.container,
#headerNavigationContainer > .container-fluid,
footer[role="contentinfo"] > .container,
.pkp_structure_content.container {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.pull-md-right { right: var(--gutter); }

/* --------------------------------------------------------------------------
   [15.2] footer ยังหลุดแนว — .row ของ Bootstrap มี margin ติดลบ 15px
          (วัดที่ 1920px: footer col = 361 ส่วนที่เหลือ = 376)
   -------------------------------------------------------------------------- */
footer[role="contentinfo"] .row { margin-left: 0; margin-right: 0; }
footer[role="contentinfo"] .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
@media (min-width: 992px) {
  footer[role="contentinfo"] .col-md-10 { padding-right: var(--sp-7); }
}

/* ==========================================================================
   [16] ACCENT สีเดียว — #FF5B0A แบบเรียบ ไม่ไล่เฉด
   --------------------------------------------------------------------------
   ตามที่สั่ง: ปุ่มและแถบบนสุดใช้ #FF5B0A ตรง ๆ ไม่ต้อง gradient
   ค่า contrast ที่ต้องรู้ (คำนวณแล้ว):
     ตัวหนังสือดำ #14171A บนส้ม = 6.07:1  → ผ่าน AA ทุกขนาด
     ตัวหนังสือขาว        บนส้ม = 3.11:1  → ผ่านเฉพาะ "ตัวใหญ่" (≥18.66px ตัวหนา)
   จึงใช้:  แถบบน (ตัวเล็ก 13px) = ตัวดำ   ·  ปุ่ม (ตัวหนา 19px) = ตัวขาว
   ถ้าอยากให้ปุ่มผ่าน AA ทุกขนาด เปลี่ยน --btn-fg เป็น var(--c-on-accent) บรรทัดเดียว
   ========================================================================== */
:root {
  --btn-bg:       var(--c-accent);
  --btn-bg-hover: #E84C00;
  --btn-fg:       var(--c-n-0);
  --btn-ring:       none;
  --btn-ring-hover: 0 4px 14px rgba(255,91,10,.34);
}

/* แถบบนสุดเป็นส้ม แทนที่จะเป็นดำ (0–45px = ส้ม, ต่ำกว่านั้น = ขาว) */
#headerNavigationContainer.navbar-default {
  background-image: linear-gradient(
    180deg,
    var(--c-accent) 0,   var(--c-accent) 45px,
    var(--c-n-0)    45px, var(--c-n-0)   100%
  );
}
@media (max-width: 991px) {
  #headerNavigationContainer.navbar-default {
    background-image: linear-gradient(
      180deg,
      var(--c-accent) 0,   var(--c-accent) 41px,
      var(--c-n-0)    41px, var(--c-n-0)   100%
    );
  }
}
.navbar-default #navigationUser > li a {
  color: var(--c-on-accent) !important;   /* ดำบนส้ม 6.07:1 */
  font-weight: 700 !important;
}
.navbar-default #navigationUser > li a:hover,
.navbar-default #navigationUser > li a:focus {
  color: var(--c-on-accent) !important;
  background: rgba(0,0,0,.13);
}
#navigationUser > li + li { border-left: 1px solid rgba(0,0,0,.22); }
#headerNavigationContainer :focus-visible {
  outline-color: var(--c-on-accent);
  box-shadow: 0 0 0 4px rgba(255,255,255,.85);
}

/* ปุ่มทั้งหมด — สีเรียบตัวเดียว ไม่มี gradient ไม่มี text-shadow */
.btn-group .btn-primary, .current_issue .btn-primary,
.download .btn-primary, .btn-primary,
.pkp_block.block_make_submission a.block_make_submission_link,
.article-sidebar .galley-link, .download .galley-link {
  background: var(--c-accent) !important;
  background-image: none !important;
  border: 1px solid var(--c-accent) !important;
  color: var(--btn-fg) !important;
  text-shadow: none !important;
  box-shadow: none;
  font-size: 17px !important;
  font-weight: 700 !important;
}
.btn-group .btn-primary:hover, .current_issue .btn-primary:hover,
.download .btn-primary:hover, .btn-primary:hover,
.btn-group .btn-primary:focus, .current_issue .btn-primary:focus,
.download .btn-primary:focus, .btn-primary:focus,
.pkp_block.block_make_submission a.block_make_submission_link:hover,
.pkp_block.block_make_submission a.block_make_submission_link:focus,
.article-sidebar .galley-link:hover, .download .galley-link:hover {
  background: var(--btn-bg-hover) !important;
  border-color: var(--btn-bg-hover) !important;
  color: var(--btn-fg) !important;
  box-shadow: var(--btn-ring-hover);
}
/* ปุ่มหลัก (Make a Submission / PDF) ตัวใหญ่พอให้ผ่าน AA ระดับ large text */
.pkp_block.block_make_submission a.block_make_submission_link,
.article-sidebar .galley-link, .download .galley-link {
  font-size: 19px !important;
  letter-spacing: 0;
}

/* ป้าย "ฉบับปัจจุบัน" และ pagination ก็ใช้ส้มเรียบ */
.pkp_op_archive .issue-summary .current { background: var(--c-accent); color: var(--c-on-accent); }
.pager li > a:hover, .cmp_pagination a:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
  box-shadow: none;
}
/* เส้นเน้นทุกจุดใช้สีเดียวกันหมด ไม่ไล่เฉด */
.page-header::after,
.article-abstract h2::after, .article-references h2::after,
.author-bios h2::after, .issue-toc .section > h2::after,
.pkp_block .title::after, .search-results > h2::after, .search-results > h3::after,
footer[role="contentinfo"]::before,
.page_index_journal .journal-description::before {
  background: var(--c-accent) !important;
}

/* [15.3] จอ < 768px: Bootstrap ตั้ง .navbar > .container-fluid .navbar-header
   { margin: 0 -15px } → โลโก้หลุดออกซ้าย 15px และปุ่มเมนูล้นขวา 15px
   (วัดที่ 390px: โลโก้ L=15 / เนื้อหา L=30 · ปุ่ม R=375 / เนื้อหา R=360) */
.navbar > .container-fluid .navbar-header,
#headerNavigationContainer .navbar-header {
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ==========================================================================
   [17] EDITORIAL TEAM — จัดตารางดิบให้เป็นทำเนียบกองบรรณาธิการ
   --------------------------------------------------------------------------
   HTML เป็น <table width="704"> 43 แถว 3 คอลัมน์ (แก้ไม่ได้) มี 2 รูปแบบ:
     แถวคน   : [ชื่อ <strong>] [มหาวิทยาลัย] [ประเทศ]      — 20 แถว
     แถวอีเมล: [อีเมล]         [ว่าง]        [ว่าง]         — 23 แถว
     แถวหัวข้อ: ใช้ <span style="color: midnightblue"> ครอบ  — ปนอยู่ในนั้น
   แยกแต่ละแบบด้วย :has() จาก "โครงสร้างจริง" ที่มีอยู่ (ไม่แตะ HTML):
     หัวข้อ  = tr:has(span[style*="midnightblue"])
     คน      = tr:has(strong) แต่ไม่ใช่หัวข้อ
     อีเมล   = tr ที่ไม่มี strong เลย
   แล้วเปลี่ยน table เป็น CSS Grid เพื่อคุมคอลัมน์ได้เต็มที่
   หมายเหตุ: table[width="704"] เป็นตัวชี้เฉพาะหน้านี้ (หน้าแรกใช้ width="1035")
   ========================================================================== */
:root {
  --ico-user: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%223.6%22%2F%3E%3Cpath%20d%3D%22M4.5%2020a7.5%207.5%200%200%201%2015%200%22%2F%3E%3C%2Fsvg%3E");
  --ico-building: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021V5a1%201%200%200%201%201-1h9a1%201%200%200%201%201%201v16%22%2F%3E%3Cpath%20d%3D%22M15%209h4a1%201%200%200%201%201%201v11%22%2F%3E%3Cpath%20d%3D%22M2%2021h20%22%2F%3E%3Cpath%20d%3D%22M7.5%208h4M7.5%2012h4M7.5%2016h4%22%2F%3E%3C%2Fsvg%3E");
  --ico-pin: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s7-5.6%207-11a7%207%200%201%200-14%200c0%205.4%207%2011%207%2011z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.6%22%2F%3E%3C%2Fsvg%3E");
}

#main-content table[width="704"] {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  border: 1px solid var(--c-n-200);
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-n-0);
  margin: 0 0 var(--sp-6);
}
#main-content table[width="704"] tbody { display: block; width: 100%; }

#main-content table[width="704"] tr {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.15fr) minmax(0, .6fr);
  column-gap: var(--sp-5);
  align-items: center;
  padding: 0 var(--sp-5);
  margin: 0;
  width: 100%;
  transition: background-color var(--transition);
}
#main-content table[width="704"] td {
  display: block;
  width: auto !important;
  padding: 0;
  border: 0;
  vertical-align: middle;
}
#main-content table[width="704"] td p { margin: 0; }

/* ---------- แถวหัวข้อกลุ่ม (Editor-in-Chief / Associated Editors / ...) ---------- */
#main-content table[width="704"] tr:has(td:first-child span[style*="midnightblue"]) {
  grid-template-columns: 1fr;
  background: var(--c-n-50);
  border-top: 1px solid var(--c-n-200);
  border-bottom: 1px solid var(--c-n-200);
  padding: var(--sp-3) var(--sp-5);
}
#main-content table[width="704"] tr:first-child:has(td:first-child span[style*="midnightblue"]) {
  border-top: 0;
}
#main-content table[width="704"] tr:has(td:first-child span[style*="midnightblue"]) td:nth-child(n+2) {
  display: none;
}
#main-content table[width="704"] tr:has(td:first-child span[style*="midnightblue"]) p {
  display: flex;
  align-items: center;
  gap: 9px;
}
#main-content table[width="704"] tr:has(td:first-child span[style*="midnightblue"]) p::before {
  content: "";
  width: 1.15em; height: 1.15em; flex: 0 0 auto;
  background-color: var(--c-accent);
  -webkit-mask: var(--ico-users) center/contain no-repeat;
  mask: var(--ico-users) center/contain no-repeat;
}
#main-content table[width="704"] tr:has(td:first-child span[style*="midnightblue"]) span {
  color: var(--c-ink) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: var(--font-sans) !important;
}

/* ---------- แถวคน ---------- */
#main-content table[width="704"] tr:has(td:first-child strong):not(:has(td:first-child span[style*="midnightblue"])) {
  padding-top: var(--sp-4);
}
#main-content table[width="704"] tr:has(td:first-child strong):not(:has(td:first-child span[style*="midnightblue"])):hover,
#main-content table[width="704"] tr:not(:has(td:first-child strong)):hover {
  background: var(--c-n-25);
}
/* ชื่อ */
#main-content table[width="704"] tr:has(td:first-child strong):not(:has(span[style*="midnightblue"])) td:first-child p {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px;
  line-height: var(--lh-ui);
}
#main-content table[width="704"] tr:has(td:first-child strong):not(:has(span[style*="midnightblue"])) td:first-child p::before {
  content: "";
  width: 1.1em; height: 1.1em; flex: 0 0 auto;
  background-color: var(--c-n-500);
  -webkit-mask: var(--ico-user) center/contain no-repeat;
  mask: var(--ico-user) center/contain no-repeat;
}
#main-content table[width="704"] tr td:first-child strong { color: var(--c-ink); font-weight: 700; }
/* มหาวิทยาลัย */
#main-content table[width="704"] td:nth-child(2) p {
  display: flex; align-items: center; gap: 8px;
  color: var(--c-n-700);
  font-size: 14px;
  line-height: var(--lh-ui);
}
#main-content table[width="704"] td:nth-child(2) p::before {
  content: "";
  width: 1em; height: 1em; flex: 0 0 auto;
  background-color: var(--c-n-500);
  -webkit-mask: var(--ico-building) center/contain no-repeat;
  mask: var(--ico-building) center/contain no-repeat;
}
#main-content table[width="704"] td:nth-child(2) strong { font-weight: 500; }
/* ประเทศ */
#main-content table[width="704"] td:nth-child(3) p {
  display: flex; align-items: center; gap: 7px;
  color: var(--c-n-600);
  font-size: 13px;
  line-height: var(--lh-ui);
  white-space: nowrap;
}
#main-content table[width="704"] td:nth-child(3) p::before {
  content: "";
  width: .95em; height: .95em; flex: 0 0 auto;
  background-color: var(--c-n-500);
  -webkit-mask: var(--ico-pin) center/contain no-repeat;
  mask: var(--ico-pin) center/contain no-repeat;
}
#main-content table[width="704"] td:nth-child(3) strong { font-weight: 400; }

/* ---------- แถวอีเมล ---------- */
#main-content table[width="704"] tr:not(:has(td:first-child strong)) {
  grid-template-columns: 1fr;
  padding-top: 2px;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-n-100);
}
#main-content table[width="704"] tr:not(:has(td:first-child strong)) td:nth-child(n+2) { display: none; }
#main-content table[width="704"] tr:not(:has(td:first-child strong)) p {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--c-n-600);
  line-height: var(--lh-ui);
  padding-left: calc(1.1em + 9px);   /* เยื้องให้ตรงกับชื่อด้านบน */
}
#main-content table[width="704"] tr:not(:has(td:first-child strong)) p::before {
  content: "";
  width: .95em; height: .95em; flex: 0 0 auto;
  background-color: var(--c-accent);
  -webkit-mask: var(--ico-mail) center/contain no-repeat;
  mask: var(--ico-mail) center/contain no-repeat;
}
#main-content table[width="704"] tr:last-child { border-bottom: 0; }

/* ---------- จอเล็ก: เรียงลงเป็นการ์ด ---------- */
@media (max-width: 767px) {
  #main-content table[width="704"] tr,
  #main-content table[width="704"] tr:has(td:first-child span[style*="midnightblue"]),
  #main-content table[width="704"] tr:not(:has(td:first-child strong)) {
    display: block !important;
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
  #main-content table[width="704"] td { display: block !important; }
  #main-content table[width="704"] tr:has(td:first-child span[style*="midnightblue"]) td:nth-child(n+2),
  #main-content table[width="704"] tr:not(:has(td:first-child strong)) td:nth-child(n+2) { display: none !important; }
  #main-content table[width="704"] td:nth-child(2) p,
  #main-content table[width="704"] td:nth-child(3) p { margin-top: 4px; }
  #main-content table[width="704"] td:nth-child(2) p,
  #main-content table[width="704"] td:nth-child(3) p { padding-left: calc(1.1em + 9px); }
}

/* เผื่อเบราว์เซอร์ที่ไม่รองรับ :has() — ยังอ่านได้ ไม่พัง */
@supports not selector(:has(*)) {
  #main-content table[width="704"] tr { display: grid; }
  #main-content table[width="704"] td:first-child p { font-weight: 500; }
}

/* ==========================================================================
   [18] TOP BAR + NAV + แถบความคืบหน้าการเลื่อน
   ========================================================================== */

/* --------------------------------------------------------------------------
   [18.1] แถบบนสุด — พื้นหลัง hover ไม่เต็มความสูง
   สาเหตุ: แถบส้มสูง 45px แต่ container มี padding-top 3px (ตกค้างจากตอนที่
   ยังมีเส้นส้ม 3px อยู่ด้านบน) ลิงก์จึงสูงแค่ 42px เหลือช่องว่าง 3px ด้านบน
   -------------------------------------------------------------------------- */
#headerNavigationContainer > .container-fluid:first-child {
  padding-top: 0;
  padding-bottom: 0;
}
#headerNavigationContainer > .container-fluid:first-child .row,
#navigationUser { min-height: 45px; margin-top: 0; }
.navbar-default #navigationUser > li a {
  height: 45px;
  color: var(--c-n-0) !important;          /* ตัวขาวตามที่ขอ */
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .06em;
}
.navbar-default #navigationUser > li a:hover,
.navbar-default #navigationUser > li a:focus {
  color: var(--c-n-0) !important;
  background: rgba(0,0,0,.18);
}
#navigationUser > li + li { border-left: 1px solid rgba(255,255,255,.28); }
@media (max-width: 991px) {
  #headerNavigationContainer > .container-fluid:first-child .row,
  #navigationUser { min-height: 41px; }
  .navbar-default #navigationUser > li a { height: 41px; }
}

/* --------------------------------------------------------------------------
   [18.2] แถบความคืบหน้าการเลื่อนหน้า (scroll progress)
   ทำด้วย CSS ล้วนผ่าน scroll-driven animation — ไม่ต้องใช้ JavaScript
   ครอบด้วย @supports ถ้าเบราว์เซอร์ไม่รองรับก็แค่ไม่มีแถบ ไม่พังอย่างอื่น
   -------------------------------------------------------------------------- */
@supports (animation-timeline: scroll()) {
  #headerNavigationContainer.navbar-default::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 3px;
    background: var(--c-accent);
    transform: scaleX(0);
    transform-origin: left center;
    animation: jphd-scroll-progress linear both;
    animation-timeline: scroll(root block);
    z-index: 3;
    pointer-events: none;
    display: block;
  }
  @keyframes jphd-scroll-progress { to { transform: scaleX(1); } }
  @media (prefers-reduced-motion: reduce) {
    #headerNavigationContainer.navbar-default::after { display: none; }
  }
}

/* --------------------------------------------------------------------------
   [18.3] เมนูหลัก — กล่องกรอบเทา มุมมน มีเส้นคั่นระหว่างเมนู
          hover = พื้นส้ม ตัวขาว
   -------------------------------------------------------------------------- */
#nav-menu {
  border-top: 0;
  padding: 0 0 var(--sp-5);
}
#main-navigation {
  border: 1px solid var(--c-n-200);
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-n-0);
  flex: 1 1 100%;
}
#main-navigation > li { border: 0; }
#main-navigation > li + li { border-left: 1px solid var(--c-n-200); }

.navbar-default #main-navigation > li a,
.navbar-default .navbar-nav > .open > a {
  border-radius: 0;
  padding: 14px 18px !important;
  color: var(--c-n-900) !important;
  background: transparent;
}
.navbar-default #main-navigation > li a:hover,
.navbar-default #main-navigation > li a:focus,
.navbar-default #main-navigation > .open > a,
.navbar-default #main-navigation > .active > a {
  background: var(--c-accent) !important;
  color: var(--c-n-0) !important;
}
/* ไม่ต้องมีขีดใต้แล้ว เพราะใช้พื้นสีบอกสถานะ */
.navbar-default #main-navigation > li > a::after { display: none !important; }
#main-navigation > li:first-child > a { padding-left: 18px !important; }

/* dropdown ให้ลอยพ้นกรอบ */
#main-navigation { overflow: visible; }
#main-navigation > li:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; overflow: hidden; }
#main-navigation > li:last-child  { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.navbar-default #main-navigation .dropdown-menu { margin-top: 1px; }

@media (max-width: 991px) {
  #main-navigation { border: 0; border-radius: 0; overflow: visible; }
  #main-navigation > li + li { border-left: 0; }
  #nav-menu { padding-bottom: var(--sp-3); }
  .navbar-default #main-navigation > li a { padding: 14px 4px !important; }
  .navbar-default #main-navigation > li a:hover { background: var(--c-accent) !important; color: var(--c-n-0) !important; padding-left: 12px !important; }
}

/* --------------------------------------------------------------------------
   [18.4] แถบเปลี่ยนหน้า (pager) — เลขหน้าสูงกว่าปุ่ม
   HTML จริง: <ul class="pager">
                <li class="current">1-12 of 53</li>
                <li class="next"><a>Next <span aria-hidden="true">→</span></a></li>
              </ul>
   ปัญหา 2 อย่าง:
     1) ul เป็น flex แต่ไม่ได้ตั้ง align-items → default stretch
        li.current จึงสูงเท่าปุ่ม แต่ข้อความเกาะขอบบน ดูลอยสูงกว่า
     2) มีลูกศรซ้อนกัน 2 ตัว — "→" ที่มากับ HTML + ไอคอน chevron ที่ผมใส่เพิ่ม
   -------------------------------------------------------------------------- */
.pager, .cmp_pagination {
  display: flex;
  align-items: center;          /* ← ตัวที่ขาดไป */
  justify-content: center;
  gap: var(--sp-4);
  margin: var(--sp-7) 0 0;
  padding: 0;
  list-style: none;
}
.pager > li { display: flex; align-items: center; float: none; }
.pager > li.current,
.pager > li.previous.disabled,
.pager > li.next.disabled {
  color: var(--c-n-600);
  font-size: 14px;
  line-height: var(--lh-ui);
  font-variant-numeric: tabular-nums;
  min-height: var(--tap);
  align-items: center;
}
.pager li > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 var(--sp-5);
  border: 1px solid var(--c-n-300);
  border-radius: 10px;
  background: var(--c-n-0);
  color: var(--c-n-900);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  box-shadow: none;
}
.pager li > a:hover, .pager li > a:focus {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-n-0);
  text-decoration: none;
}
/* HTML มีลูกศรมาแล้ว จึงปิดไอคอนที่เราเติม ไม่ให้ซ้อนกัน 2 ตัว */
.pager li > a::after,
.pager .next a::after,
.pager .previous a::after { display: none !important; }
.pager li > a span[aria-hidden] {
  font-size: 1.05em;
  line-height: 1;
  transition: transform var(--transition);
}
.pager li > a:hover span[aria-hidden] { transform: translateX(3px); }
.pager .previous a:hover span[aria-hidden] { transform: translateX(-3px); }

/* --------------------------------------------------------------------------
   [18.5] แถบความคืบหน้า — ย้ายมาเป็น fixed ที่ขอบบนจอ
   เหตุผล: ใน [13] ผมตั้ง header เป็น position:relative ไปทับ sticky ที่ตั้งไว้
   ใน [12.2] เอง แถบที่เกาะอยู่กับ header จึงเลื่อนหายไปพร้อมกัน
   header สูง ~245px ถ้าทำ sticky จะกินจอมากเกินไป จึงแยกแถบออกมา fixed แทน
   → เห็นตลอดเวลาที่เลื่อน บอกได้ว่าอ่านไปถึงไหนแล้ว
   -------------------------------------------------------------------------- */
#headerNavigationContainer.navbar-default::after { display: none !important; }

@supports (animation-timeline: scroll()) {
  body::after {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    background: var(--c-accent);
    transform: scaleX(0);
    transform-origin: left center;
    animation: jphd-scroll-progress linear both;
    animation-timeline: scroll(root block);
    z-index: 2147483646;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) { body::after { display: none; } }
}

/* --------------------------------------------------------------------------
   [18.6] บั๊กที่เจอตอนทดสอบแถบความคืบหน้า
   ผมเคยใส่ `html, body { overflow-x: hidden }` ไว้เป็นตาข่ายกันเนื้อหาล้นจอ
   ผลข้างเคียง: body กลายเป็น scroll container ซ้อนอีกชั้น
     · window.scrollTo เลื่อนได้แค่ 1006 จาก 1611 (เลื่อนไม่สุด)
     · แถบความคืบหน้าวิ่งได้แค่ 86% ไม่ถึงปลาย
     · position:sticky ทำงานผิดเพี้ยน
   ตอนนี้ทุกหน้าไม่มีเนื้อหาล้นแนวนอนแล้ว (ตรวจ 22 หน้า × 3 จอ) จึงเหลือ
   ตาข่ายไว้ที่ html ตัวเดียว ซึ่งเป็น scroller หลักอยู่แล้ว
   -------------------------------------------------------------------------- */
html { overflow-x: hidden; max-width: 100%; }
body { overflow-x: visible; max-width: none; }

/* --------------------------------------------------------------------------
   [18.7] มุมโค้งของ hover ในเมนู + แยก dropdown ออกจากเมนูหลัก
   --------------------------------------------------------------------------
   เจอ 2 อย่างตอนดูภาพ:
   (1) กรอบเมนูโค้ง 10px แต่พื้นสีตอน hover อยู่บน <a> ซึ่งเป็นสี่เหลี่ยม
       มุมส้มจึงล้นออกนอกมุมโค้งของกรอบ (ชัดที่เมนูตัวแรกกับตัวสุดท้าย)
       ปิด overflow:hidden ที่กรอบไม่ได้ เพราะจะไปตัด dropdown ทิ้ง
       → ใส่ radius ที่ตัว <a> ของเมนูหัวท้ายแทน
   (2) selector เดิมเขียน `#main-navigation > li a` (descendant)
       จึงเผลอไปโดนลิงก์ใน dropdown ด้วย ทำให้ padding 14/18 และ radius 0
       ทับสไตล์ dropdown ที่ตั้งไว้ → เปลี่ยนเป็น `> li > a` (direct child)
   -------------------------------------------------------------------------- */

/* (1) มุมโค้งให้ตรงกับกรอบ (กรอบ 10px ลบเส้นขอบ 1px = 9px) */
#main-navigation > li:first-child > a { border-radius: 9px 0 0 9px !important; }
#main-navigation > li:last-child  > a { border-radius: 0 9px 9px 0 !important; }
#main-navigation > li:first-child:last-child > a { border-radius: 9px !important; }
/* เมนูตัวสุดท้ายที่เปิด dropdown อยู่ ให้มุมล่างขวาตรง เพื่อรับกับเมนูที่กางลงมา */
#main-navigation > li:last-child.open > a { border-radius: 0 9px 0 0 !important; }
#main-navigation > li { overflow: visible; }
#main-navigation > li:first-child { overflow: visible; }

/* (2) สไตล์เมนูหลัก — จำกัดเฉพาะลูกโดยตรง ไม่ให้ตกไปโดน dropdown */
.navbar-default #main-navigation > li > a {
  padding: 14px 18px !important;
  border-radius: 0;
}

/* dropdown กลับมามีสไตล์ของตัวเอง */
.navbar-default #main-navigation .dropdown-menu {
  padding: 6px !important;
  border-radius: 10px !important;
  border: 1px solid var(--c-n-200) !important;
  box-shadow: var(--shadow-lg) !important;
  min-width: 268px;
}
.navbar-default #main-navigation .dropdown-menu > li > a {
  padding: 11px 14px !important;
  border-radius: 7px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--c-n-700) !important;
  background: transparent !important;
  white-space: normal;
  line-height: var(--lh-ui) !important;
}
.navbar-default #main-navigation .dropdown-menu > li > a:hover,
.navbar-default #main-navigation .dropdown-menu > li > a:focus {
  background: var(--c-accent) !important;
  color: var(--c-n-0) !important;
}

@media (max-width: 991px) {
  #main-navigation > li:first-child > a,
  #main-navigation > li:last-child > a,
  #main-navigation > li:last-child.open > a { border-radius: 7px !important; }
  .navbar-default #main-navigation > li > a { padding: 14px 12px !important; }
  .navbar-default #main-navigation .dropdown-menu { min-width: 0; box-shadow: none !important; }
}

/* --------------------------------------------------------------------------
   [19] ปรับตามรีวิว: Editorial Team ระยะ + หัวข้อไม่ต้องมีไอคอน
                     · ปุ่ม Search ใช้สี accent เป็นสีหลัก
   -------------------------------------------------------------------------- */

/* [19.1] หัวข้อกลุ่มใน Editorial Team — เอาไอคอนออก เหลือแค่ตัวอักษร */
#main-content table[width="704"] tr:has(td:first-child span[style*="midnightblue"]) p::before {
  content: none !important;
  display: none !important;
}
#main-content table[width="704"] tr:has(td:first-child span[style*="midnightblue"]) {
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}
#main-content table[width="704"] tr:has(td:first-child span[style*="midnightblue"]) span {
  letter-spacing: .1em;
}

/* [19.2] ชื่อกับอีเมลของคนเดียวกันให้ชิดกัน แล้วเว้นระหว่าง "คน" ให้ชัดขึ้นแทน */
#main-content table[width="704"] tr:has(td:first-child strong):not(:has(td:first-child span[style*="midnightblue"])) {
  padding-top: var(--sp-4);
  padding-bottom: 0;
  align-items: start;
}
#main-content table[width="704"] tr:not(:has(td:first-child strong)) {
  padding-top: 1px;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-n-100);
}
/* ชื่อ: ไม่ต้องมีระยะใต้ */
#main-content table[width="704"] tr:has(td:first-child strong):not(:has(span[style*="midnightblue"])) td:first-child p {
  line-height: 1.35;
}
/* อีเมล: ตัวเล็กลงนิด ชิดกับชื่อ */
#main-content table[width="704"] tr:not(:has(td:first-child strong)) p {
  font-size: 12.5px;
  line-height: 1.35;
}
/* คอลัมน์ 2-3 ให้อยู่แนวเดียวกับชื่อ (บรรทัดแรก) */
#main-content table[width="704"] td:nth-child(2) p,
#main-content table[width="704"] td:nth-child(3) p { line-height: 1.35; padding-top: 1px; }

/* [19.3] ปุ่ม Search ใน header — ใช้สี accent เป็นสีหลัก ตัวพิมพ์ใหญ่ */
.pull-md-right form button {
  background: var(--c-accent);
  color: var(--c-n-0);
  border: 0;
  border-left: 0;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  font-size: 13px !important;
  padding: 0 22px;
}
.pull-md-right form button:hover,
.pull-md-right form button:focus {
  background: var(--c-n-900);
  color: var(--c-n-0);
}
.navbar-form { border-color: var(--c-n-300); }
.navbar-form:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-brand-50); }

/* --------------------------------------------------------------------------
   [20] MOBILE — แถบบนสุดสูงไม่พอ + จัดเมนูใหม่
   --------------------------------------------------------------------------
   [20.1] วัดที่ 390px: ลิงก์ใน topbar สูง 44px (มาจากกฎ a11y ที่ตั้ง
          min-height:44px ให้แตะง่าย) แต่แถบสีส้มที่วาดด้วย gradient
          หยุดที่ 41px → พื้น hover จึงทะลุออกนอกแถบ 3px
          แก้ด้วยการผูกความสูงแถบกับตัวแปรตัวเดียว ใช้ทั้ง gradient และ element
   -------------------------------------------------------------------------- */
:root { --topbar-h: 45px; }
@media (max-width: 991px) { :root { --topbar-h: 44px; } }

#headerNavigationContainer.navbar-default {
  background:
    linear-gradient(180deg,
      var(--c-accent) 0, var(--c-accent) var(--topbar-h),
      transparent var(--topbar-h), transparent 100%),
    url('../assets/img/header-bg.png') center/cover no-repeat !important;
}
#headerNavigationContainer > .container-fluid:first-child .row,
#navigationUser { min-height: var(--topbar-h) !important; }
.navbar-default #navigationUser > li a {
  height: var(--topbar-h) !important;
  min-height: var(--topbar-h) !important;
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   [20.2] เมนูมือถือ — กล่องกรอบเดียว เส้นคั่นบาง hover เป็นแคปซูลมุมมน
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #nav-menu {
    padding: var(--sp-3) 0 var(--sp-4);
    border-top: 0;
  }
  #main-navigation {
    border: 1px solid var(--c-n-200) !important;
    border-radius: 12px !important;
    padding: 6px;
    background: var(--c-n-0);
    overflow: hidden;
  }
  #main-navigation > li { border: 0; }
  #main-navigation > li + li { border-top: 1px solid var(--c-n-100); }

  .navbar-default #main-navigation > li > a {
    border: 0 !important;
    border-radius: 9px !important;
    padding: 13px 14px !important;
    font-size: 15px !important;
    min-height: var(--tap);
    justify-content: space-between;
  }
  .navbar-default #main-navigation > li > a:hover,
  .navbar-default #main-navigation > li > a:focus,
  .navbar-default #main-navigation > .open > a,
  .navbar-default #main-navigation > .active > a {
    background: var(--c-accent) !important;
    color: var(--c-n-0) !important;
    border-radius: 9px !important;
  }

  /* dropdown ซ้อนเข้าไปข้างใน ไม่เต็มขอบ */
  .navbar-default #main-navigation .dropdown-menu {
    position: static !important;
    float: none;
    width: auto;
    background: var(--c-n-50) !important;
    border: 0 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    padding: 5px !important;
    margin: 4px 0 6px !important;
  }
  .navbar-default #main-navigation .dropdown-menu > li > a {
    padding: 11px 12px !important;
    border-radius: 7px !important;
    font-size: 14px !important;
    color: var(--c-n-700) !important;
  }
  .navbar-default #main-navigation .dropdown-menu > li > a:hover,
  .navbar-default #main-navigation .dropdown-menu > li > a:focus {
    background: var(--c-accent) !important;
    color: var(--c-n-0) !important;
  }
  .navbar-default #main-navigation .dropdown-menu > li + li {
    border-top: 1px solid var(--c-n-200);
  }

  /* [20.3] ช่องค้นหาในเมนูมือถือ — ปุ่มล้นออกนอกกรอบ */
  .pull-md-right {
    position: static;
    width: 100%;
    max-width: 100%;
    margin: var(--sp-5) 0 0;
    padding: 0;
    height: auto;
  }
  .navbar-form {
    width: 100%;
    max-width: 100%;
    display: flex;
    border-radius: 10px;
  }
  .navbar-form .form-group { flex: 1 1 auto; min-width: 0; }
  .navbar-form .form-control { min-width: 0 !important; width: 100%; }
  .pull-md-right form button { flex: 0 0 auto; white-space: nowrap; padding: 0 18px; }
}

/* --------------------------------------------------------------------------
   [21] ปุ่มเลื่อนขึ้นบนสุด (scroll to top) — มุมขวาล่าง
   --------------------------------------------------------------------------
   ข้อจำกัด: แก้ HTML ไม่ได้ และไม่ใช้ JavaScript จึงต้องหา element ที่คลิกได้
   ซึ่งมีอยู่แล้วในหน้า → ใช้ลิงก์ข้ามไปเมนู (#main-navigation) ใน
   <nav id="accessibility-nav"> ที่ OJS ใส่มาให้ screen reader
   ลิงก์นี้พาไปบนสุดของหน้าอยู่แล้ว จึงทำหน้าที่ "กลับขึ้นบน" ได้ตรงตัว
   และยังคงเป็น skip-link ให้คนใช้คีย์บอร์ดเหมือนเดิม (โฟกัสแล้วยังใช้ได้)
   ปุ่มจะค่อย ๆ ปรากฏหลังเลื่อนลงมาแล้ว ด้วย scroll-driven animation
   -------------------------------------------------------------------------- */
:root {
  --ico-arrow-up: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020V5%22%2F%3E%3Cpath%20d%3D%22m5%2012%207-7%207%207%22%2F%3E%3C%2Fsvg%3E");
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ปลด nav ออกจากการซ่อน แล้วซ่อนเป็นราย <li> แทน เพื่อให้ลูกตัวแรกลอยได้ */
#accessibility-nav {
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}
#accessibility-nav ul { list-style: none; margin: 0; padding: 0; }
#accessibility-nav li {
  position: absolute;
  left: -9999px;
  top: auto;
}
/* skip-link เดิมยังใช้ได้ พอโฟกัสด้วยคีย์บอร์ดจะเด้งมามุมซ้ายบน */
#accessibility-nav li:focus-within {
  left: 10px; top: 10px; z-index: 2000;
}
#accessibility-nav li:focus-within a {
  background: var(--c-n-900); color: var(--c-n-0);
  padding: 10px 16px; border-radius: 8px;
  display: inline-block; text-indent: 0;
}

/* ลิงก์ตัวแรก = ปุ่มกลับขึ้นบน */
#accessibility-nav li:first-child {
  position: fixed;
  left: auto;
  right: 24px;
  bottom: 24px;
  z-index: 1040;
}
#accessibility-nav li:first-child > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-n-0);
  border: 1px solid var(--c-accent);
  box-shadow: 0 6px 20px rgba(255,91,10,.34), 0 2px 6px rgba(20,23,26,.16);
  overflow: hidden;
  text-indent: -999em;   /* ซ่อนข้อความ เหลือแต่ไอคอน */
  transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
#accessibility-nav li:first-child > a::before {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--ico-arrow-up) center/contain no-repeat;
  mask: var(--ico-arrow-up) center/contain no-repeat;
}
#accessibility-nav li:first-child > a:hover,
#accessibility-nav li:first-child > a:focus {
  background: var(--c-n-900);
  border-color: var(--c-n-900);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(20,23,26,.28);
  text-decoration: none;
}

/* ค่อยปรากฏหลังเลื่อนลงมาแล้ว — ถ้าเบราว์เซอร์ไม่รองรับก็แสดงตลอด ยังกดได้ */
@supports (animation-timeline: scroll()) {
  #accessibility-nav li:first-child {
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.9);
    animation: jphd-to-top linear both;
    animation-timeline: scroll(root block);
    animation-range: 240px 480px;
  }
  @keyframes jphd-to-top {
    to { opacity: 1; visibility: visible; transform: none; }
  }
}
@media (max-width: 767px) {
  #accessibility-nav li:first-child { right: 16px; bottom: 16px; }
  #accessibility-nav li:first-child > a { width: 46px; height: 46px; }
}
@media print { #accessibility-nav li:first-child { display: none; } }

/* ==========================================================================
   [22] ไอคอน caret / sidebar / กล่องคุกกี้
   ========================================================================== */

/* --------------------------------------------------------------------------
   [22.1] ลูกศรลงในเมนู "Other" ไม่ตรงกลางบรรทัด
   สาเหตุ: ::before ของ .caret เป็น inline-block + vertical-align: -.14em
   ซึ่งอิงกับ metric ของฟอนต์ พอเปลี่ยนมาใช้ Inter ตำแหน่งเลยเพี้ยน
   แก้: ทำ .caret เป็น flex แล้วจัดกึ่งกลางจริง ๆ ไม่พึ่ง vertical-align
   -------------------------------------------------------------------------- */
.navbar-default #main-navigation > li > a.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
}
#main-navigation .dropdown-toggle .caret {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  margin: 0 !important;
  border: 0;
  vertical-align: middle;
  flex: 0 0 auto;
  position: relative;
  top: 0;
}
#main-navigation .dropdown-toggle .caret::before {
  display: block;
  width: 15px; height: 15px;
  vertical-align: 0 !important;
  margin: 0;
}

/* --------------------------------------------------------------------------
   [22.2] แถบข้าง — จัดรูปให้เต็มความกว้างและเป็นระเบียบ
   -------------------------------------------------------------------------- */

/* ตรา TCI ด้านบน (เดิมเป็น <a><img> ลอย ๆ ไม่มีกรอบ) → ใส่กรอบเป็นการ์ดเหมือนบล็อกอื่น */
.pkp_structure_sidebar > a {
  display: block;
  border: 1px solid var(--c-n-200);
  border-radius: 10px;
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--c-n-0);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.pkp_structure_sidebar > a:hover { border-color: var(--c-n-300); box-shadow: var(--shadow); }
.pkp_structure_sidebar > a > img {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto;
}

/* รูปเดี่ยวในบล็อกกำหนดเอง (ThaiES / SJR / Flag counter) → เต็มความกว้างบล็อก */
#customblock-thaies .content img,
#customblock-citescore-and-sjr-ranking .content img,
#customblock-visitor .content img,
.pkp_block.block_custom .content > p > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
}
#customblock-thaies .content p,
#customblock-citescore-and-sjr-ranking .content p,
#customblock-visitor .content p { margin: 0; }
/* widget ที่ฝังมา (flagcounter / scimago) กันล้นกรอบ */
#customblock-visitor .content,
#customblock-citescore-and-sjr-ranking .content { overflow: hidden; }
#customblock-visitor .content img { max-width: 100%; width: auto; margin: 0; }

/* โลโก้ฐานข้อมูล — ตารางเท่ากันทุกช่อง ไม่หลุดจังหวะ */
#customblock-indexed .content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  align-items: center;
  justify-items: center;
}
#customblock-indexed .content p {
  margin: 0;
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 1px solid var(--c-n-100);
  border-radius: 8px;
  background: var(--c-n-0);
  transition: border-color var(--transition);
}
#customblock-indexed .content p:hover { border-color: var(--c-n-300); }
#customblock-indexed .content p.title {
  grid-column: 1 / -1;
  height: auto;
  border: 0;
  padding: 0;
  justify-content: flex-start;
}
#customblock-indexed img {
  max-width: 100%;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
  opacity: 1;
}
#customblock-indexed img:hover { transform: none; }

/* ระยะห่างระหว่างบล็อกให้เท่ากันทุกใบ */
aside .pkp_block { margin-bottom: var(--sp-4); }
aside .pkp_block:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   [22.3] กล่องตั้งค่าคุกกี้ของ ThaiJO — ปรับให้เข้าธีมและอ่านออก
   โครงจริง (ดึงจากหน้าเว็บจริง เพราะ JS ตัวนี้โหลดจาก www.tci-thaijo.org):
     #thaijo-cookie-banner.thaijo-cb-wrapper
       .thaijo-cb-card
         .thaijo-cb-header
         .thaijo-cb-body  > a.thaijo-cb-link
         .thaijo-cb-options > label.thaijo-cb-option > input + span
         .thaijo-cb-actions > button#thaijo-cb-btn-selected.thaijo-cb-btn-sec
                            > button#thaijo-cb-btn-all.thaijo-cb-btn-pri
   ปัญหาเดิม: ตัวหนังสือเล็กมากจนอ่านไม่ออก ปุ่มเป็นสีเขียวไม่เข้ากับธีม
   -------------------------------------------------------------------------- */
#thaijo-cookie-banner.thaijo-cb-wrapper {
  z-index: 2147483645;
  padding: var(--sp-4) !important;
}
#thaijo-cookie-banner .thaijo-cb-card {
  font-family: var(--font-sans) !important;
  background: var(--c-n-0) !important;
  border: 1px solid var(--c-n-200) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(20,23,26,.18) !important;
  padding: var(--sp-5) !important;
  max-width: 640px !important;
  color: var(--c-n-700) !important;
  overflow: hidden;
  position: relative;
}
/* เส้น accent บนสุดของกล่อง */
#thaijo-cookie-banner .thaijo-cb-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--c-accent);
}

#thaijo-cookie-banner .thaijo-cb-header {
  font-family: var(--font-sans) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--c-ink) !important;
  border: 0 !important;
  padding: 0 0 var(--sp-2) !important;
  margin: 0 0 var(--sp-2) !important;
}
#thaijo-cookie-banner .thaijo-cb-body {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--c-n-700) !important;
  margin: 0 0 var(--sp-4) !important;
  padding: 0 !important;
}
#thaijo-cookie-banner .thaijo-cb-link {
  color: var(--c-accent-text) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
#thaijo-cookie-banner .thaijo-cb-link:hover { color: var(--c-accent) !important; }

/* ตัวเลือก */
#thaijo-cookie-banner .thaijo-cb-options {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5) !important;
  background: var(--c-n-25) !important;
  border: 1px solid var(--c-n-200) !important;
  border-radius: 10px !important;
  padding: var(--sp-3) var(--sp-4) !important;
  margin: 0 0 var(--sp-4) !important;
}
#thaijo-cookie-banner .thaijo-cb-option {
  display: inline-flex !important;
  align-items: center;
  gap: 9px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--c-ink) !important;
  margin: 0 !important;
  cursor: pointer;
  min-height: 32px;
}
#thaijo-cookie-banner .thaijo-cb-option input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--c-accent);
  margin: 0 !important;
  cursor: pointer;
}
#thaijo-cookie-banner .thaijo-cb-option input[disabled] { cursor: default; opacity: .65; }
#thaijo-cookie-banner .thaijo-cb-option span { font-size: 15px !important; }

/* ปุ่ม */
#thaijo-cookie-banner .thaijo-cb-actions {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-3) !important;
  margin: 0 !important;
}
#thaijo-cookie-banner .thaijo-cb-btn {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  min-height: 46px !important;
  padding: 0 22px !important;
  border-radius: 10px !important;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
  box-shadow: none !important;
}
/* ปุ่มรอง: บันทึกตัวเลือก */
#thaijo-cookie-banner .thaijo-cb-btn-sec {
  background: var(--c-n-0) !important;
  color: var(--c-n-900) !important;
  border: 1px solid var(--c-n-300) !important;
}
#thaijo-cookie-banner .thaijo-cb-btn-sec:hover {
  background: var(--c-n-900) !important;
  border-color: var(--c-n-900) !important;
  color: var(--c-n-0) !important;
}
/* ปุ่มหลัก: ยอมรับทั้งหมด — สี accent */
#thaijo-cookie-banner .thaijo-cb-btn-pri {
  background: var(--c-accent) !important;
  border: 1px solid var(--c-accent) !important;
  color: var(--c-n-0) !important;
}
#thaijo-cookie-banner .thaijo-cb-btn-pri:hover {
  background: var(--c-n-900) !important;
  border-color: var(--c-n-900) !important;
  color: var(--c-n-0) !important;
}
#thaijo-cookie-banner .thaijo-cb-btn:focus-visible {
  outline: 2px solid var(--c-n-0);
  box-shadow: 0 0 0 4px var(--c-accent) !important;
}

@media (max-width: 575px) {
  #thaijo-cookie-banner .thaijo-cb-card { padding: var(--sp-4) !important; border-radius: 12px !important; }
  #thaijo-cookie-banner .thaijo-cb-actions { flex-direction: column-reverse; align-items: stretch; }
  #thaijo-cookie-banner .thaijo-cb-btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   [23] ปุ่มกลับขึ้นบนเลื่อนไม่สุด + ย้ายริบบิ้นไว้อาลัยไปมุมขวาบน
   --------------------------------------------------------------------------
   [23.1] ปุ่มนี้คือลิงก์ href="#main-navigation" ซึ่งอยู่ต่ำจากขอบบน ~185px
          เบราว์เซอร์จึงเลื่อนไปหยุดตรงเมนู ไม่ใช่บนสุด (ต้องกดซ้ำถึงจะถึง)
          แก้ด้วย scroll-margin-top: 100vh — สั่งให้เบราว์เซอร์วางเป้าหมายไว้
          ต่ำกว่าขอบบนจอ 1 หน้าจอเต็ม ค่าที่คำนวณได้จึงติดลบและถูกหนีบเป็น 0
          → เลื่อนถึงบนสุดจริงตั้งแต่คลิกแรก
   -------------------------------------------------------------------------- */
#main-navigation,
#nav-menu,
#headerNavigationContainer { scroll-margin-top: 100vh; }

/* [23.2] ริบบิ้นไว้อาลัย — ย้ายจากมุมซ้ายบนไปมุมขวาบน พร้อมเว้นระยะ */
.mourning-ribbon {
  left: auto !important;
  right: 18px !important;
  top: 10px !important;
  width: 34px !important;
}
@media (max-width: 991px) {
  .mourning-ribbon { right: 12px !important; top: 8px !important; width: 26px !important; }
}
@media (max-width: 767px) {
  .mourning-ribbon { right: 6px !important; top: 6px !important; width: 20px !important; }
}
/* ริบบิ้นย้ายไปขวาแล้ว ฝั่งซ้ายจึงไม่ต้องเว้นที่ให้อีก */
.navbar-header { padding-left: 0 !important; }

/* [23.3] ต้นเหตุจริงของ "ต้องกด 2 ครั้ง"
   กฎ #accessibility-nav li:focus-within { left:10px; top:10px } มี specificity
   เท่ากับ li:first-child แต่เขียนไว้ก่อน → พอคลิก (เกิด focus) ตัวปุ่มได้ทั้ง
   top:10px และ bottom:24px พร้อมกัน กล่องเลยยืดสูงเต็มจอ ปุ่มขยับหนีตอนกด
   คลิกแรกจึงไม่ทำงาน ต้องกดซ้ำ → กันไม่ให้กฎ focus-within ไปโดนปุ่มนี้ */
#accessibility-nav li:first-child,
#accessibility-nav li:first-child:focus-within {
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  right: 24px !important;
  bottom: 24px !important;
  width: auto !important;
  height: auto !important;
}
#accessibility-nav li:first-child:focus-within > a {
  background: var(--c-n-900);
  border-color: var(--c-n-900);
  padding: 0;
  border-radius: 50%;
  display: flex;
}
@media (max-width: 767px) {
  #accessibility-nav li:first-child,
  #accessibility-nav li:first-child:focus-within { right: 16px !important; bottom: 16px !important; }
}

/* [23.4] เจอต้นเหตุจริงแล้ว — ไล่ event ดูพบว่า
     mousedown ลงที่ <a> ถูกต้อง แต่ click event ไปเกิดที่ .pkp_structure_page
     แปลว่าปุ่ม "เปลี่ยนขนาด" ระหว่าง mousedown → mouseup เบราว์เซอร์เลยไม่ถือว่าคลิก
     ตัวการคือกฎ skip-link: #accessibility-nav li:focus-within a { display:inline-block;
     padding:10px 16px; text-indent:0 } ซึ่งพอกดแล้วเกิด focus ปุ่มกลมขนาด 50px
     จะกลายเป็นกล่องข้อความ "Main Navigation" ทันที mouseup จึงหลุดออกนอกปุ่ม
     แก้: กันกฎ skip-link ไม่ให้แตะลิงก์ตัวแรก และล็อกขนาดปุ่มไว้ทุกสถานะ */
#accessibility-nav li:first-child > a,
#accessibility-nav li:first-child > a:focus,
#accessibility-nav li:first-child > a:focus-visible,
#accessibility-nav li:first-child > a:active,
#accessibility-nav li:first-child:focus-within > a {
  display: flex !important;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  text-indent: -999em !important;
  line-height: 1 !important;
  font-size: 0 !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (max-width: 767px) {
  #accessibility-nav li:first-child > a,
  #accessibility-nav li:first-child > a:focus,
  #accessibility-nav li:first-child:focus-within > a {
    width: 46px !important; height: 46px !important;
    min-width: 46px !important; min-height: 46px !important;
  }
}
/* ปิด transform ตอน hover ของปุ่มนี้ เพื่อไม่ให้ขยับระหว่างกด */
#accessibility-nav li:first-child > a:hover { transform: none !important; }

/* --------------------------------------------------------------------------
   [23.5] ปุ่มกลับขึ้นบนไม่ทำงานที่จอ ≤991px — เจอต้นเหตุจากการไล่ event
   ที่ 900/768px: mousedown → mouseup → click → doc:A ครบทุกตัว
   แปลว่า "คลิกติด" แต่หน้าไม่เลื่อน
   เหตุผล: ปุ่มชี้ไปที่ #main-navigation ซึ่งอยู่ข้างใน #nav-menu
           และที่จอเล็กเมนูถูกพับด้วย display:none
           element ที่ display:none ไม่มีกล่องในหน้า เบราว์เซอร์จึงหาเป้าหมาย
           ให้เลื่อนไปไม่เจอ → คลิกแล้วเงียบ
   แก้: ตอนพับ ไม่ใช้ display:none แต่ใช้ height:0 + visibility:hidden แทน
        เมนูยังถูกซ่อนสนิท (กดไม่ได้ / screen reader ข้าม) แต่ยังมีกล่องอยู่
        เบราว์เซอร์จึงเลื่อนไปหาได้ตามปกติ
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #nav-menu.navbar-collapse.collapse:not(.in):not(.collapsing) {
    display: block !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  #nav-menu.navbar-collapse.collapsing {
    display: block !important;
    max-height: none !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  #nav-menu.navbar-collapse.collapse.in {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* [23.6] ยังเลื่อนไม่สุด (หยุดที่ y=138) เพราะ overflow:hidden ทำให้ #nav-menu
   กลายเป็น scroll container การเลื่อนไปหา fragment จึงคำนวณเทียบกับกล่องนั้น
   แทนที่จะเทียบกับทั้งหน้า → scroll-margin-top ที่ตั้งไว้เลยไม่มีผล
   ใช้ overflow: clip แทน — ตัดภาพเหมือนกันแต่ไม่สร้าง scroll container */
@media (max-width: 991px) {
  #nav-menu.navbar-collapse.collapse:not(.in):not(.collapsing) {
    overflow: clip !important;
  }
  #nav-menu.navbar-collapse.collapsing { overflow: clip !important; }
}

/* --------------------------------------------------------------------------
   [24] DROPDOWN ทั้งเว็บ — ไม่ใช่แค่ในเมนู
   --------------------------------------------------------------------------
   styleSheet เดิมของวารสารตั้งไว้กับ .dropdown-menu "ทุกตัว" ในเว็บ:
       .dropdown-menu        { background-color: #FF5B0A }
       .dropdown-menu li > a { color: #120552 !important }
       :hover                { background:#cc4300 !important; color:#270bb2 !important }
   ก่อนหน้านี้ผม override เฉพาะ dropdown ในเมนูหลัก (#main-navigation)
   ตัวอื่นจึงยังเป็นพื้นส้ม + ตัวหนังสือน้ำเงินเข้ม อ่านยาก
   เช่น "More Citation Formats" กับ "Download Citation" ในหน้าบทความ
   -------------------------------------------------------------------------- */
.dropdown-menu {
  background-color: var(--c-n-0) !important;
  border: 1px solid var(--c-n-200) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 6px !important;
  margin-top: 4px !important;
  min-width: 220px;
}
.dropdown-menu > li > a,
.dropdown-menu li > a {
  color: var(--c-n-700) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: var(--lh-ui) !important;
  padding: 10px 14px !important;
  border-radius: 7px !important;
  background: transparent !important;
  white-space: normal;
  display: flex;
  align-items: center;
  gap: 9px;
  text-shadow: none !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
  background-color: var(--c-accent) !important;
  color: var(--c-n-0) !important;
  text-decoration: none;
}
.dropdown-menu .divider { background-color: var(--c-n-200) !important; margin: 4px 0 !important; }
.dropdown-menu > li + li { border-top: 1px solid var(--c-n-100); }
.dropdown-menu > li + li:has(> a:hover) { border-top-color: transparent; }

/* ปุ่มที่เปิด dropdown */
.btn-group .dropdown-toggle,
.btn-default.dropdown-toggle {
  border: 1px solid var(--c-n-300) !important;
  background: var(--c-n-0) !important;
  color: var(--c-n-900) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-group.open > .dropdown-toggle,
.btn-default.dropdown-toggle:hover,
.btn-default.dropdown-toggle:focus {
  background: var(--c-n-900) !important;
  border-color: var(--c-n-900) !important;
  color: var(--c-n-0) !important;
  box-shadow: none !important;
}
.btn-group .dropdown-toggle .caret {
  border: 0;
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0;
}
.btn-group .dropdown-toggle .caret::before {
  content: "";
  width: 14px; height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--ico-chevron-down) center/contain no-repeat;
  mask: var(--ico-chevron-down) center/contain no-repeat;
  display: block;
}

/* HTML มี class ของ Font Awesome แต่เว็บไม่ได้โหลด FA มา — เติมไอคอนให้เอง */
.fa-download::before {
  content: "";
  display: inline-block;
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--ico-download) center/contain no-repeat;
  mask: var(--ico-download) center/contain no-repeat;
  vertical-align: -.12em;
}
.dropdown-menu .fa { flex: 0 0 auto; }

/* ==========================================================================
   [25] PAGINATION — ออกแบบใหม่ให้กระชับ ใช้ร่วมกันทั้งหน้า Search และ Archives
   --------------------------------------------------------------------------
   โครง HTML ของหน้า Search (.cmp_pagination) เป็น div แบน ๆ:
     ข้อความ "1 - 12 of 500 items" (text node เปล่า ๆ ไม่มี tag ครอบ)
     <strong>1</strong>  = หน้าปัจจุบัน
     <a>2</a> … <a>12</a>  <a>&gt;</a>  <a>&gt;&gt;</a>
   ปัญหาเดิม: text node ถูกบีบจนขึ้นบรรทัดละคำ · ทุกปุ่มมี chevron ที่ผมเติม
   ไว้ตอนแรกติดมาด้วยเลยกลายเป็น "2 >" · เรียงกระจายเต็มความกว้าง
   ========================================================================== */
:root {
  --ico-chevrons-right: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m7%206%206%206-6%206%22%2F%3E%3Cpath%20d%3D%22m14%206%206%206-6%206%22%2F%3E%3C%2Fsvg%3E");
}

.cmp_pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  white-space: nowrap;            /* กัน text node ขึ้นบรรทัดละคำ */
  margin: var(--sp-7) 0 0;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--c-n-200);
  font-size: 14px;
  color: var(--c-n-600);
  line-height: var(--lh-ui);
}
/* ดันชุดปุ่มไปชิดขวา เหลือข้อความนับจำนวนไว้ซ้าย */
.cmp_pagination > strong { margin-left: auto; }

.cmp_pagination > strong,
.cmp_pagination > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--c-n-200);
  border-radius: 8px;
  font-size: 14px !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.cmp_pagination > strong {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-n-0);
}
.cmp_pagination > a {
  background: var(--c-n-0);
  color: var(--c-n-900) !important;
}
.cmp_pagination > a:hover,
.cmp_pagination > a:focus {
  background: var(--c-n-900);
  border-color: var(--c-n-900);
  color: var(--c-n-0) !important;
}
/* ปิด chevron ที่เคยเติมให้ทุกลิงก์ (ทำให้กลายเป็น "2 >") */
.cmp_pagination > a::after { display: none !important; content: none !important; }

/* ปุ่ม ">" และ ">>" → เปลี่ยนเป็นไอคอน */
.cmp_pagination > a:nth-last-child(2),
.cmp_pagination > a:last-child {
  font-size: 0 !important;
  min-width: 40px;
  padding: 0;
}
.cmp_pagination > a:nth-last-child(2)::before,
.cmp_pagination > a:last-child::before {
  content: "";
  width: 17px; height: 17px;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain;    mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.cmp_pagination > a:nth-last-child(2)::before {
  -webkit-mask-image: var(--ico-chevron-right); mask-image: var(--ico-chevron-right);
}
.cmp_pagination > a:last-child::before {
  -webkit-mask-image: var(--ico-chevrons-right); mask-image: var(--ico-chevrons-right);
}

/* จอเล็ก: เหลือเฉพาะหน้าปัจจุบัน + ปุ่มถัดไป/หน้าสุดท้าย */
@media (max-width: 767px) {
  .cmp_pagination { justify-content: space-between; }
  .cmp_pagination > strong { margin-left: 0; }
  .cmp_pagination > a:not(:nth-last-child(-n+2)) { display: none; }
}

/* --- ให้ .pager (หน้า Archives) หน้าตาเหมือนกัน --- */
.pager {
  margin: var(--sp-7) 0 0;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--c-n-200);
  justify-content: space-between;
}
.pager > li.current { color: var(--c-n-600); font-size: 14px; }
.pager li > a {
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0 var(--sp-4);
  border-radius: 8px;
  border-color: var(--c-n-200);
  font-size: 14px;
}
.pager li > a:hover, .pager li > a:focus {
  background: var(--c-n-900);
  border-color: var(--c-n-900);
  color: var(--c-n-0);
}

/* กระชับอีกนิดให้พอดีแถวเดียวที่ความกว้างเนื้อหาปกติ (12 เลข + 2 ปุ่ม) */
.cmp_pagination { gap: 5px; row-gap: 8px; }
.cmp_pagination > strong,
.cmp_pagination > a { min-width: 36px; height: 36px; padding: 0 8px; }
.cmp_pagination > a:nth-last-child(2),
.cmp_pagination > a:last-child { min-width: 36px; }
.pager li > a { height: 36px; min-height: 36px; }

/* margin-left:auto บน <strong> ดันตัวเองไปชิดขวาของ "บรรทัดแรก"
   เลขหน้าที่เหลือเลยถูกดันตกบรรทัด — เปลี่ยนเป็นเว้นระยะคงที่แทน */
.cmp_pagination > strong { margin-left: var(--sp-5); }

/* white-space: nowrap ทำให้ "ช่องว่างระหว่าง <a>" ในซอร์ส กลายเป็น flex item
   จริง ๆ ตัวละ ~4px (วัดได้: ระยะห่างจริง 50px แทนที่จะเป็น 36+5=41)
   รวมแล้วเกินความกว้าง 4px พอดี ปุ่ม > กับ >> จึงตกบรรทัด
   → ใช้ white-space: normal เพื่อให้เบราว์เซอร์ตัดช่องว่างพวกนั้นทิ้งตามปกติ
     ตอนนี้ทุกอย่างพอดีแถวเดียวแล้ว ข้อความนับจำนวนจึงไม่ถูกบีบให้ขึ้นบรรทัดอีก */
.cmp_pagination { white-space: normal; }
.cmp_pagination > strong,
.cmp_pagination > a { white-space: nowrap; }

/* ช่องว่างระหว่าง <a> ในซอร์สเป็น &nbsp; (ไม่ใช่ space ธรรมดา) เบราว์เซอร์จึง
   นับเป็น flex item จริง ๆ ลบทิ้งด้วย CSS ไม่ได้ → ย่อขนาดปุ่มให้พอดีแถวเดียวแทน */
.cmp_pagination { gap: 4px; row-gap: 8px; }
.cmp_pagination > strong { margin-left: var(--sp-3); }
.cmp_pagination > strong,
.cmp_pagination > a { min-width: 32px; height: 32px; padding: 0 7px; }
.cmp_pagination > a:nth-last-child(2),
.cmp_pagination > a:last-child { min-width: 32px; }
.cmp_pagination > a:nth-last-child(2)::before,
.cmp_pagination > a:last-child::before { width: 15px; height: 15px; }
@media (max-width: 767px) {
  .cmp_pagination > strong,
  .cmp_pagination > a { min-width: 40px; height: 40px; }
}

/* ==========================================================================
   [26] เมนูลอยติดบนเวลาเลื่อน (CSS ล้วน ไม่ใช้ JavaScript)
   --------------------------------------------------------------------------
   ใช้ scroll-driven animation: คุณสมบัติที่เปลี่ยนค่าแบบ "ไม่ต่อเนื่อง"
   อย่าง position จะสลับค่าเมื่อเลื่อนถึงครึ่งช่วงที่กำหนด
   → พอเลื่อนพ้นแถบเมนู (~240px) #nav-menu จะกลายเป็น fixed ลอยห่างขอบบน 10px

   สำคัญ: พอเมนูกลายเป็น fixed มันจะหลุดออกจาก flow ทำให้หน้าสั้นลง 72px
   เนื้อหาจะกระตุกขึ้น จึงชดเชยด้วยการเพิ่ม padding-top ให้ .pkp_structure_content
   เท่ากันพอดีในช่วงเดียวกัน → ความสูงรวมคงที่ ไม่กระตุก

   ข้อจำกัดที่ต้องบอกตรง ๆ: "เลื่อนลงซ่อน / เลื่อนขึ้นแสดง" ทำด้วย CSS ล้วนไม่ได้
   เพราะ CSS ไม่มีทางรู้ "ทิศทาง" การเลื่อน (รู้แค่ตำแหน่ง) ต้องใช้ JavaScript
   ตัวนี้จึงเป็นแบบ "เลื่อนพ้นแล้วลอยค้างไว้ตลอด" ซึ่งกดใช้ได้ตลอดเวลาเหมือนกัน
   ========================================================================== */
:root { --nav-h: 72px; }

@supports (animation-timeline: scroll()) {
  @media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    #nav-menu {
      animation: jphd-nav-float linear both;
      animation-timeline: scroll(root block);
      animation-range: 200px 280px;
      will-change: position;
    }
    @keyframes jphd-nav-float {
      to {
        position: fixed;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: min(calc(var(--container-max) - var(--gutter) * 2), calc(100vw - var(--gutter) * 2));
        padding-bottom: 0;
        z-index: 1035;
      }
    }
    /* ชดเชยความสูงที่หายไป ไม่ให้เนื้อหากระตุก */
    .pkp_structure_content {
      animation: jphd-nav-float-pad linear both;
      animation-timeline: scroll(root block);
      animation-range: 200px 280px;
    }
    @keyframes jphd-nav-float-pad {
      to { padding-top: calc(var(--sp-6) + var(--nav-h)); }
    }
    /* ตอนลอยแล้วให้มีพื้นและเงา อ่านทับเนื้อหาได้ */
    #main-navigation {
      animation: jphd-nav-float-box linear both;
      animation-timeline: scroll(root block);
      animation-range: 200px 280px;
    }
    @keyframes jphd-nav-float-box {
      to {
        box-shadow: 0 8px 28px rgba(20,23,26,.16);
        border-color: var(--c-n-300);
      }
    }
  }
}

/* ช่องค้นหาอยู่ "ข้างใน" #nav-menu และถูกวางแบบ absolute อิงกับ header
   พอ #nav-menu กลายเป็น fixed มันเลยกลายเป็นกรอบอ้างอิงตัวใหม่
   ช่องค้นหาจึงลอยตามมาทับเนื้อหา → ซ่อนไว้ระหว่างที่เมนูลอย
   (เลื่อนขึ้นไปบนสุดก็เจอช่องค้นหาตามปกติ) */
@supports (animation-timeline: scroll()) {
  @media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    .pull-md-right {
      animation: jphd-search-hide linear both;
      animation-timeline: scroll(root block);
      animation-range: 200px 280px;
    }
    @keyframes jphd-search-hide {
      to { visibility: hidden; opacity: 0; pointer-events: none; }
    }
    /* เมนูตอนลอย: กระชับขึ้นนิดหนึ่ง */
    #main-navigation { background: var(--c-n-0); }
  }
}

/* --------------------------------------------------------------------------
   [25.1] ปุ่มเลขหน้าไม่เท่ากัน
   ใช้ min-width ทำให้ปุ่มเลขหลักเดียว = 32px (ตาม min-width)
   แต่เลขสองหลัก (10/11/12) กว้างตามเนื้อหา = 34px → ระยะห่างเพี้ยน 2px
   วัดจากภาพ: ระยะระหว่างปุ่ม 44px ทั่วไป แต่ช่วง 10→11→12 เป็น 46px
   แก้: ล็อกความกว้างตายตัวเท่ากันทุกปุ่ม ไม่ให้ยืดตามจำนวนหลัก
   -------------------------------------------------------------------------- */
.cmp_pagination > strong,
.cmp_pagination > a,
.cmp_pagination > a:nth-last-child(2),
.cmp_pagination > a:last-child {
  flex: 0 0 auto;
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  height: 34px;
  padding: 0;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .cmp_pagination > strong,
  .cmp_pagination > a,
  .cmp_pagination > a:nth-last-child(2),
  .cmp_pagination > a:last-child {
    width: 40px; min-width: 40px; max-width: 40px; height: 40px;
  }
}

/* ยังสูงไม่เท่ากัน (34 กับ 44) เพราะกฎเก่า .cmp_pagination a { min-height: 44px }
   ที่ใส่ไว้ตอนทำ touch target ยังค้างอยู่ — ล็อก min-height ให้ตรงกันด้วย */
.cmp_pagination > strong,
.cmp_pagination > a {
  min-height: 34px !important;
  max-height: 34px;
  line-height: 34px;
}
@media (max-width: 767px) {
  .cmp_pagination > strong,
  .cmp_pagination > a { min-height: 40px !important; max-height: 40px; line-height: 40px; }
}

/* --------------------------------------------------------------------------
   [26.1] ช่องค้นหาหลุดไปอยู่ใต้เมนู "ตั้งแต่ยังไม่เลื่อน" — เป็นความผิดพลาดของผมเอง
   --------------------------------------------------------------------------
   keyframes ของเมนูลอยมี transform: translateX(-50%) อยู่
   element ที่มี transform animation "ทำงานอยู่" จะกลายเป็น containing block
   ของลูกที่เป็น position:absolute ทันที ตั้งแต่เฟรมแรก (ไม่ต้องรอถึง 50%)
   .pull-md-right (ช่องค้นหา) เป็น absolute ที่เคยอิงกับ header
   จึงเปลี่ยนไปอิงกับ #nav-menu แทน → ตกไปอยู่ใต้แถบเมนู

   แก้: เลิกใช้ transform จัดกึ่งกลาง เปลี่ยนไปใช้ left/right + padding แทน
        #nav-menu จึงไม่เป็น containing block อีก ช่องค้นหากลับไปที่เดิม
   -------------------------------------------------------------------------- */
@supports (animation-timeline: scroll()) {
  @media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    #nav-menu { will-change: auto; }
    @keyframes jphd-nav-float {
      to {
        position: fixed;
        top: 10px;
        left: 0;
        right: 0;
        width: auto;
        transform: none;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: max(var(--gutter), calc((100% - var(--container-max)) / 2 + var(--gutter)));
        padding-right: max(var(--gutter), calc((100% - var(--container-max)) / 2 + var(--gutter)));
        z-index: 1035;
      }
    }
  }
}

/* ยังไม่หาย เพราะ keyframes ยังมีบรรทัด transform: none อยู่
   การ "animate transform" ไม่ว่าค่าปลายทางจะเป็น none หรือไม่ ก็ทำให้ element
   เป็น containing block อยู่ดี → ต้องเอา property transform ออกจาก keyframes ทั้งหมด */
@supports (animation-timeline: scroll()) {
  @media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    @keyframes jphd-nav-float {
      to {
        position: fixed;
        top: 10px;
        left: 0;
        right: 0;
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: max(var(--gutter), calc((100% - var(--container-max)) / 2 + var(--gutter)));
        padding-right: max(var(--gutter), calc((100% - var(--container-max)) / 2 + var(--gutter)));
        z-index: 1035;
      }
    }
  }
}

/* ==========================================================================
   [27] เปลี่ยนวิธีทำเมนูติดบน — เลิกใช้ fixed มาใช้ sticky แทน
   --------------------------------------------------------------------------
   ปัญหาของวิธีเดิม (ทำ #nav-menu เป็น position:fixed):
     · ปุ่มกลับขึ้นบนชี้ไปที่ #main-navigation ซึ่งอยู่ใน #nav-menu
       พอ #nav-menu กลายเป็น fixed มันก็ไม่มีตำแหน่งในหน้าอีกต่อไป
       เบราว์เซอร์เลยไม่มีอะไรให้เลื่อนไปหา → ปุ่มกลับขึ้นบนตาย
     · ช่องค้นหาที่เป็น absolute ก็เคยหลุดตามไปด้วย

   วิธีใหม่: ทำ "ทั้ง header" เป็น sticky แล้วดันขึ้นไปด้วย top ติดลบ
   เหลือให้เห็นแค่แถบเมนู + ช่องว่างด้านบน 10px
     · #main-navigation ยังอยู่ใน flow ปกติ → ปุ่มกลับขึ้นบนทำงานเหมือนเดิม
     · ช่องค้นหายังอยู่ที่เดิม เลื่อนหายไปพร้อม header ตามธรรมชาติ
     · ไม่มีการกระโดดของ layout เพราะ sticky ไม่หลุดออกจาก flow

   ค่าที่ใช้: header สูง 258px · แถบเมนู 72px · เว้นบน 10px
              top = -(258 - 72 - 10) = -176px
   ========================================================================== */

/* ปิดวิธีเดิมทั้งหมด */
@supports (animation-timeline: scroll()) {
  @media (min-width: 992px) {
    #nav-menu,
    .pkp_structure_content,
    .pull-md-right,
    #main-navigation { animation: none !important; }
    .pkp_structure_content { padding-top: var(--sp-6) !important; }
    .pull-md-right { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
  }
}

@media (min-width: 992px) {
  #headerNavigationContainer.navbar-default {
    position: sticky;
    top: calc(-1 * (300px - 60px - 10px));   /* logo 150px ทำให้ header สูงขึ้น */
    z-index: 1035;
  }
  /* กันไม่ให้หัวข้อที่ลิงก์ไปถูกแถบเมนูบัง */
  .pkp_structure_main [id],
  :target { scroll-margin-top: 110px; }
}

/* --------------------------------------------------------------------------
   [27.1] sticky + ปุ่มกลับขึ้นบน ชนกันเอง — ต้องเปลี่ยนเป้าหมายของปุ่ม
   --------------------------------------------------------------------------
   พอ header เป็น sticky แล้ว #main-navigation จะ "ลอยตามจอ" ตลอด
   เวลาเบราว์เซอร์คำนวณว่าต้องเลื่อนไปที่ไหน มันอ่านตำแหน่งปัจจุบัน (ที่ติดขอบบน)
   ไม่ใช่ตำแหน่งจริงในหน้า เกิดเป็นวงวนคำนวณ → เลื่อนไปหยุดที่ y=609 แทนที่จะเป็น 0

   ทางออก: ย้ายปุ่มไปใช้ลิงก์ข้ามตัวที่ 2 คือ #main-content แทน
   ซึ่งอยู่นอก header (ไม่ sticky) จึงไม่มีวงวน และใส่ scroll-margin-top: 100vh
   ให้เลื่อนทะลุขึ้นไปถึงบนสุดเหมือนเดิม
   -------------------------------------------------------------------------- */

/* คืนลิงก์ตัวที่ 1 ให้เป็น skip-link ธรรมดา */
#accessibility-nav li:first-child,
#accessibility-nav li:first-child:focus-within {
  position: absolute !important;
  left: -9999px !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
}
#accessibility-nav li:first-child:focus-within { left: 10px !important; top: 10px !important; z-index: 2000; }
#accessibility-nav li:first-child > a,
#accessibility-nav li:first-child:focus-within > a {
  display: inline-block !important;
  width: auto !important; height: auto !important;
  min-width: 0 !important; min-height: 0 !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  text-indent: 0 !important;
  font-size: 14px !important;
  background: var(--c-n-900);
  color: var(--c-n-0);
  box-shadow: none;
}
#accessibility-nav li:first-child > a::before { content: none !important; }

/* ลิงก์ตัวที่ 2 (#main-content) = ปุ่มกลับขึ้นบน */
#main-content { scroll-margin-top: 100vh; }

#accessibility-nav li:nth-child(2),
#accessibility-nav li:nth-child(2):focus-within {
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  right: 24px !important;
  bottom: 24px !important;
  width: auto !important;
  height: auto !important;
  z-index: 1040;
}
#accessibility-nav li:nth-child(2) > a,
#accessibility-nav li:nth-child(2) > a:focus,
#accessibility-nav li:nth-child(2) > a:focus-visible,
#accessibility-nav li:nth-child(2) > a:active,
#accessibility-nav li:nth-child(2):focus-within > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 50px !important; height: 50px !important;
  min-width: 50px !important; min-height: 50px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--c-accent);
  color: var(--c-n-0);
  border: 1px solid var(--c-accent);
  box-shadow: 0 6px 20px rgba(255,91,10,.34), 0 2px 6px rgba(20,23,26,.16);
  overflow: hidden;
  text-indent: -999em !important;
  font-size: 0 !important;
  line-height: 1 !important;
  position: relative;
  transition: background-color var(--transition), box-shadow var(--transition);
}
#accessibility-nav li:nth-child(2) > a::before {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--ico-arrow-up) center/contain no-repeat;
  mask: var(--ico-arrow-up) center/contain no-repeat;
}
#accessibility-nav li:nth-child(2) > a:hover,
#accessibility-nav li:nth-child(2) > a:focus {
  background: var(--c-n-900);
  border-color: var(--c-n-900);
  box-shadow: 0 10px 26px rgba(20,23,26,.28);
  text-decoration: none;
  transform: none !important;
}
@supports (animation-timeline: scroll()) {
  #accessibility-nav li:nth-child(2) {
    opacity: 0; visibility: hidden;
    animation: jphd-to-top linear both;
    animation-timeline: scroll(root block);
    animation-range: 240px 480px;
  }
  @media (prefers-reduced-motion: reduce) { #accessibility-nav li:nth-child(2) { display: none; } }
}
@media (max-width: 767px) {
  #accessibility-nav li:nth-child(2),
  #accessibility-nav li:nth-child(2):focus-within { right: 16px !important; bottom: 16px !important; }
  #accessibility-nav li:nth-child(2) > a,
  #accessibility-nav li:nth-child(2):focus-within > a {
    width: 46px !important; height: 46px !important;
    min-width: 46px !important; min-height: 46px !important;
  }
}
@media print { #accessibility-nav li:nth-child(2) { display: none; } }

/* ==========================================================================
   [28] เมนู — เอาพื้นสีตอน hover ออก กลับไปใช้ "ขีดใต้เลื่อนเข้า" แบบเดิม
   --------------------------------------------------------------------------
   เก็บกล่องกรอบเทา + เส้นคั่นระหว่างเมนูไว้เหมือนเดิม
   เปลี่ยนเฉพาะ "ตัวเมนู": ไม่มีพื้นสีแล้ว เหลือตัวหนังสือเปลี่ยนสี
   + ขีดส้ม 3px เลื่อนเข้าจากซ้าย
   ========================================================================== */
@media (min-width: 992px) {
  .navbar-default #main-navigation > li > a,
  .navbar-default #main-navigation > li > a:hover,
  .navbar-default #main-navigation > li > a:focus,
  .navbar-default #main-navigation > .open > a,
  .navbar-default #main-navigation > .open > a:hover,
  .navbar-default #main-navigation > .open > a:focus,
  .navbar-default #main-navigation > .active > a {
    background: transparent !important;
    background-color: transparent !important;
    position: relative;
  }
  .navbar-default #main-navigation > li > a { color: var(--c-n-900) !important; }
  .navbar-default #main-navigation > li > a:hover,
  .navbar-default #main-navigation > li > a:focus,
  .navbar-default #main-navigation > .open > a,
  .navbar-default #main-navigation > .active > a {
    color: var(--c-accent-text) !important;   /* ส้มเข้ม อ่านบนขาวได้ 5.10:1 */
  }

  /* ขีดใต้ */
  .navbar-default #main-navigation > li > a::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 14px; right: 14px; bottom: 0;
    height: 3px;
    background: var(--c-accent);
    border-radius: 2px 2px 0 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 220ms var(--ease);
    pointer-events: none;
  }
  .navbar-default #main-navigation > li > a:hover::after,
  .navbar-default #main-navigation > li > a:focus::after,
  .navbar-default #main-navigation > .open > a::after,
  .navbar-default #main-navigation > .active > a::after {
    transform: scaleX(1);
  }
  /* เมนูตัวแรก/ตัวสุดท้ายไม่ต้องมีมุมโค้งของพื้นสีแล้ว */
  #main-navigation > li:first-child > a,
  #main-navigation > li:last-child > a,
  #main-navigation > li:last-child.open > a { border-radius: 0 !important; }
}

/* จอเล็ก: ในรายการแนวตั้ง ขีดใต้ดูแปลก ใช้แถบส้มด้านซ้ายแทน (ยังไม่มีพื้นสี) */
@media (max-width: 991px) {
  .navbar-default #main-navigation > li > a,
  .navbar-default #main-navigation > li > a:hover,
  .navbar-default #main-navigation > li > a:focus,
  .navbar-default #main-navigation > .open > a,
  .navbar-default #main-navigation > .active > a {
    background: transparent !important;
    background-color: transparent !important;
    position: relative;
    padding-left: 16px !important;
  }
  .navbar-default #main-navigation > li > a:hover,
  .navbar-default #main-navigation > li > a:focus,
  .navbar-default #main-navigation > .open > a,
  .navbar-default #main-navigation > .active > a { color: var(--c-accent-text) !important; }
  .navbar-default #main-navigation > li > a::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 4px; top: 8px; bottom: 8px; right: auto;
    width: 3px; height: auto;
    background: var(--c-accent);
    border-radius: 2px;
    transform: scaleY(0);
    transform-origin: center top;
    transition: transform 200ms var(--ease);
  }
  .navbar-default #main-navigation > li > a:hover::after,
  .navbar-default #main-navigation > .open > a::after,
  .navbar-default #main-navigation > .active > a::after { transform: scaleY(1); }
}

/* --------------------------------------------------------------------------
   ถ้าอยากเอา "กล่องกรอบเทา" รอบเมนูออกด้วย (ให้เหลือแค่ตัวหนังสือลอย ๆ)
   เปิด 3 บรรทัดนี้:
     #main-navigation { border: 0 !important; border-radius: 0 !important; }
     #main-navigation > li + li { border-left: 0 !important; }
     #nav-menu { border-top: 1px solid var(--c-n-200); }
   -------------------------------------------------------------------------- */

/* ==========================================================================
   [29] เอาพื้นขาวของ header ออก
   --------------------------------------------------------------------------
   เหตุผลที่เคยใส่ไว้: header เป็น sticky พอเลื่อนแล้วมันลอยทับเนื้อหา
   ถ้าพื้นโปร่งใส ตัวหนังสือของบทความจะทะลุขึ้นมาซ้อนกับเมนู อ่านไม่ออก
   (ตอนอยู่บนสุดพื้นขาวไม่มีผลอะไร เพราะพื้นหน้าเว็บก็ขาวอยู่แล้ว)

   วิธีใหม่: ให้ "ตัวกล่องเมนู" เป็นตัวทึบแทน header ทั้งแถบ
     · header โปร่งใส เห็นเนื้อหาไหลผ่านด้านหลังในช่องว่าง 10px
     · #main-navigation มีพื้นขาว + กรอบ + เงา อยู่แล้ว จึงอ่านได้ชัด
     · ได้ลุคแถบเมนูลอยเหนือเนื้อหา แทนที่จะเป็นแผ่นขาวเต็มความกว้าง
   แถบส้มบนสุดยังอยู่เหมือนเดิม (ไล่เป็นโปร่งใสหลังพ้น --topbar-h)
   ========================================================================== */
#headerNavigationContainer.navbar-default {
  background:
    linear-gradient(180deg,
      var(--c-accent) 0, var(--c-accent) var(--topbar-h),
      transparent var(--topbar-h), transparent 100%),
    url('../assets/img/header-bg.png') center/cover no-repeat !important;
  border-bottom: 0;
  box-shadow: none;
}

@media (min-width: 992px) {
  /* กล่องเมนูเป็นตัวทึบแทน */
  #main-navigation {
    background: var(--c-n-0);
    box-shadow: 0 6px 20px rgba(20,23,26,.10);
  }
  /* ไม่ต้องเว้นช่องว่างโปร่งใสใต้กล่องเมนูมากนัก */
  #nav-menu { padding-bottom: var(--sp-3); }
  /* ปรับจุดหยุดของ sticky ตามความสูงที่เปลี่ยนไป (แถบเมนู 60px + เว้นบน 10px) */
  #headerNavigationContainer.navbar-default { top: calc(-1 * (300px - 60px - 10px)); }
}

/* พอ header โปร่งใส เนื้อหาที่ไหลอยู่ข้างหลังจะโผล่ครึ่งบรรทัดในช่องว่าง 10px
   ดูรกตา → เบลอพื้นหลังตรงนั้นแทน (เนื้อหายังเห็นว่ามีอยู่ แต่ไม่แย่งสายตา) */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  @media (min-width: 992px) {
    #headerNavigationContainer.navbar-default {
      -webkit-backdrop-filter: blur(10px) saturate(1.15);
      backdrop-filter: blur(10px) saturate(1.15);
    }
  }
}
/* ฝ้าขาวบาง ๆ — ไม่ต้องแล้วเพราะใช้ภาพ bg แทน */

/* ==========================================================================
   [30] คืนค่า hover ของเมนูกลับเป็น "พื้นสี accent + ตัวหนังสือขาว"
   --------------------------------------------------------------------------
   ผมตีความข้อความ "ไม่ชอบที่ menu item มี background" ผิดไปเอง
   ที่คุณหมายถึงคือพื้นขาวของ .navbar-default ไม่ใช่พื้นสีตอน hover ของเมนู
   บล็อก [28] ที่เปลี่ยนไปเป็นขีดใต้จึงเป็นการแก้ผิดจุด — ยกเลิกทั้งหมด
   ========================================================================== */
@media (min-width: 992px) {
  .navbar-default #main-navigation > li > a,
  .navbar-default #main-navigation > li > a:link {
    background: transparent !important;
    color: var(--c-n-900) !important;
  }
  .navbar-default #main-navigation > li > a:hover,
  .navbar-default #main-navigation > li > a:focus,
  .navbar-default #main-navigation > .open > a,
  .navbar-default #main-navigation > .open > a:hover,
  .navbar-default #main-navigation > .open > a:focus,
  .navbar-default #main-navigation > .active > a {
    background: var(--c-accent) !important;
    background-color: var(--c-accent) !important;
    color: var(--c-n-0) !important;
  }
  /* ปิดขีดใต้ที่เพิ่มไปตอน [28] */
  .navbar-default #main-navigation > li > a::after {
    display: none !important;
    content: none !important;
  }
  /* คืนมุมโค้งให้พื้นสีตรงกับกรอบเมนู */
  #main-navigation > li:first-child > a { border-radius: 9px 0 0 9px !important; }
  #main-navigation > li:last-child  > a { border-radius: 0 9px 9px 0 !important; }
  #main-navigation > li:last-child.open > a { border-radius: 0 9px 0 0 !important; }
}

@media (max-width: 991px) {
  .navbar-default #main-navigation > li > a {
    background: transparent !important;
    color: var(--c-n-900) !important;
    padding-left: 14px !important;
  }
  .navbar-default #main-navigation > li > a:hover,
  .navbar-default #main-navigation > li > a:focus,
  .navbar-default #main-navigation > .open > a,
  .navbar-default #main-navigation > .active > a {
    background: var(--c-accent) !important;
    background-color: var(--c-accent) !important;
    color: var(--c-n-0) !important;
    border-radius: 9px !important;
  }
  .navbar-default #main-navigation > li > a::after {
    display: none !important;
    content: none !important;
  }
}

/* ==========================================================================
   [31] ปุ่มกลับขึ้นบนใช้ไม่ได้บาง 8 หน้า — เพราะเป้าหมายไม่มีอยู่จริง
   --------------------------------------------------------------------------
   ตรวจทั้ง 22 หน้าพบว่า OJS ใส่ id="main-content" มาให้ไม่ครบทุก template
     มี    : index, about, editorial-team, submissions, author-guidelines,
             ethics-copyright, peer-review-process, issue-*, search*
     ไม่มี : article-view, announcement, announcement-view, contact,
             about-site, information-readers/authors/librarians  ← 8 หน้าที่พัง
   ลิงก์ข้ามชี้ไปที่ #main-content เบราว์เซอร์หาไม่เจอ จึงไม่เลื่อนไปไหน

   ทางแก้: เปลี่ยนไปใช้ลิงก์ข้ามตัวที่ 3 (#sidebar) ซึ่งตรวจแล้วมีครบทุกหน้า
   (ยกเว้น article-galley ที่เป็นหน้า PDF ล้วน ไม่มีอะไรให้เลื่อนอยู่แล้ว)

   และเปลี่ยน scroll-margin-top จาก 100vh เป็นค่าใหญ่มาก
   เพราะบนจอเล็ก sidebar ไปอยู่ท้ายหน้า (ห่างจากบนสุดหลายพัน px)
   ถ้าใช้แค่ 100vh จะหักลบไม่พอ เลื่อนไปไม่ถึงบนสุด
   ========================================================================== */
#sidebar,
#main-content { scroll-margin-top: 100000px; }

/* ลิงก์ตัวที่ 2 กลับไปเป็น skip-link ธรรมดา */
#accessibility-nav li:nth-child(2),
#accessibility-nav li:nth-child(2):focus-within {
  position: absolute !important;
  left: -9999px !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#accessibility-nav li:nth-child(2):focus-within { left: 10px !important; top: 10px !important; z-index: 2000; }
#accessibility-nav li:nth-child(2) > a,
#accessibility-nav li:nth-child(2):focus-within > a {
  display: inline-block !important;
  width: auto !important; height: auto !important;
  min-width: 0 !important; min-height: 0 !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  text-indent: 0 !important;
  font-size: 14px !important;
  background: var(--c-n-900) !important;
  color: var(--c-n-0) !important;
  box-shadow: none !important;
  border: 0 !important;
}
#accessibility-nav li:nth-child(2) > a::before { content: none !important; }

/* ลิงก์ตัวที่ 3 (#sidebar) = ปุ่มกลับขึ้นบนตัวจริง */
#accessibility-nav li:nth-child(3),
#accessibility-nav li:nth-child(3):focus-within {
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  right: 24px !important;
  bottom: 24px !important;
  width: auto !important;
  height: auto !important;
  z-index: 1040;
}
#accessibility-nav li:nth-child(3) > a,
#accessibility-nav li:nth-child(3) > a:focus,
#accessibility-nav li:nth-child(3) > a:focus-visible,
#accessibility-nav li:nth-child(3) > a:active,
#accessibility-nav li:nth-child(3):focus-within > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 50px !important; height: 50px !important;
  min-width: 50px !important; min-height: 50px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--c-accent) !important;
  color: var(--c-n-0) !important;
  border: 1px solid var(--c-accent) !important;
  box-shadow: 0 6px 20px rgba(255,91,10,.34), 0 2px 6px rgba(20,23,26,.16) !important;
  overflow: hidden;
  text-indent: -999em !important;
  font-size: 0 !important;
  line-height: 1 !important;
  position: relative;
  transition: background-color var(--transition), box-shadow var(--transition);
}
#accessibility-nav li:nth-child(3) > a::before {
  content: "" !important;
  position: absolute;
  width: 22px; height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--ico-arrow-up) center/contain no-repeat;
  mask: var(--ico-arrow-up) center/contain no-repeat;
}
#accessibility-nav li:nth-child(3) > a:hover,
#accessibility-nav li:nth-child(3) > a:focus {
  background: var(--c-n-900) !important;
  border-color: var(--c-n-900) !important;
  box-shadow: 0 10px 26px rgba(20,23,26,.28) !important;
  text-decoration: none;
  transform: none !important;
}
@supports (animation-timeline: scroll()) {
  #accessibility-nav li:nth-child(3) {
    opacity: 0; visibility: hidden;
    animation: jphd-to-top linear both;
    animation-timeline: scroll(root block);
    animation-range: 240px 480px;
  }
  @media (prefers-reduced-motion: reduce) { #accessibility-nav li:nth-child(3) { display: none; } }
}
@media (max-width: 767px) {
  #accessibility-nav li:nth-child(3),
  #accessibility-nav li:nth-child(3):focus-within { right: 16px !important; bottom: 16px !important; }
  #accessibility-nav li:nth-child(3) > a,
  #accessibility-nav li:nth-child(3):focus-within > a {
    width: 46px !important; height: 46px !important;
    min-width: 46px !important; min-height: 46px !important;
  }
}
@media print { #accessibility-nav li:nth-child(3) { display: none; } }