/* ============================================================
 * FILE: assets/css/custom.css
 * ROLE: CSS override เฉพาะโปรเจกต์ (โหลดหลัง main.css)
 * ============================================================ */

/* ===== Web font: Sarabun (เวอร์ชันเว็บของ TH Sarabun) ===== */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&display=swap');

:root {
   --it-ff-body: 'Sarabun', sans-serif;
   --it-ff-heading: 'Sarabun', sans-serif;
   --it-ff-poppins: 'Sarabun', sans-serif;
   --it-ff-monserat: 'Sarabun', sans-serif;   /* เผื่อ element ที่อ้างตัวแปรนี้ */
   --it-ff-space: 'Sarabun', sans-serif;
   --it-ff-inter: 'Sarabun', sans-serif;

   /* ===== โทนสีองค์กร: ฟ้า–ขาว (แทนเขียวเดิมของ template) ===== */
   --it-theme-1: #22A3D1;   /* ฟ้าหลัก (เดิม #0AB99D) — ถูกใช้ 117 จุดทั่วเว็บ */
   --it-theme-2: #17718F;   /* ฟ้าเข้ม ใช้กับ hover / ลิงก์รอง (เดิม #116E63) */
}

/* ===== Logo sizing (ย้ายจาก inline style มาเป็น class) ===== */
.site-logo {
   width: auto;               /* คงสัดส่วน ไม่บิดเบี้ยว */
}
.it-header-2-logo .site-logo,  /* header หน้า home (โปร่งใส) */
.it-header-5-logo .site-logo { /* header หน้าย่อย (inner) */
   height: 80px;
}
.it-footer-logo .site-logo {   /* โลโก้ footer (ใหญ่กว่าเล็กน้อย) */
   height: 90px;
}

/* ===== footer: คอลัมน์ติดต่อ (แทน Gallery) ===== */
.it-footer-contact ul li {
   margin-bottom: 14px;
}
.it-footer-contact ul li > i {          /* ไอคอนของบรรทัดที่ไม่ใช่ลิงก์ (ที่อยู่) */
   position: absolute;
   top: 6px;
   left: 0;
   color: var(--it-theme-1);
}
.it-footer-contact ul li a i {          /* ไอคอนในลิงก์ (โทร/อีเมล) */
   color: var(--it-theme-1);
}
.it-footer-contact ul li,
.it-footer-contact ul li span {
   color: var(--it-common-white);   /* ไม่งั้นสืบทอดสีตัวอักษร body (เทาเข้ม) มองแทบไม่เห็นบนพื้นดำ */
}
.it-footer-contact ul li span {
   display: block;
}

/* ===== footer: บล็อก Line OA (ป้าย + รูป QR) ===== */
.it-footer-lineoa-label {
   display: block;
   margin-bottom: 12px;
   color: var(--it-common-white);   /* พื้น footer สีดำ ต้องบังคับสีขาว */
   font-weight: 600;
}
.it-footer-lineoa-label i {
   color: #06C755;   /* เขียว Line */
}
.it-footer-lineoa-qr {
   display: block;
   width: 140px;
   height: 140px;
   border-radius: 10px;
   background: #fff;
   padding: 6px;
}

/* ===== offcanvas (เมนูมือถือ): ต้องอยู่เหนือ header sticky =====
   template ตั้ง .header-sticky z-index 99999 แต่ .itoffcanvas แค่ 9999
   → พอเลื่อนหน้าลงแล้วกดเปิดเมนู header จะลอยทับปุ่มปิด (×) กดไม่ได้ */
.body-overlay {
   z-index: 100000;   /* เหนือ header → ฉากหลังคลุม header ด้วย */
}
.itoffcanvas {
   z-index: 100001;   /* แผงเมนูอยู่บนสุด ปุ่มปิดกดได้เสมอ */
}

/* lightbox (magnific-popup) ต้องอยู่เหนือ sticky header (z-index 99999) — ไม่งั้น nav โผล่ทับตอนเปิดดูรูปแกลเลอรี */
.mfp-bg {
   z-index: 100010;
}
.mfp-wrap {
   z-index: 100011;
}

/* ===== Hero (home): กันรูปบี้บนมือถือ =====
   รูปมี attribute width/height ตายตัว (635x807) พอ CSS ย่อความกว้าง
   ความสูงยังถูกบังคับ → รูปยืดผิดสัดส่วน ต้องปล่อยความสูงอัตโนมัติ */
.it-hero-2-thumb > img {
   width: auto;
   height: auto;          /* คงสัดส่วนจริง (1024x1536) ไม่ให้บี้บนมือถือ */
   max-height: 807px;     /* เดสก์ท็อป: จำกัดความสูง ไม่ให้รูปดันขึ้นไปทะลุ nav */
}

/* หน้าแรก โซนนวัตกรรม: meta มี 3 รายการ (วันที่/ผู้พัฒนา/ยอดชม) → ให้ตกบรรทัดได้ ไม่อัดจนล้นการ์ด
   (เอา .justify-content-between ของ template ออกจาก markup แล้ว จัดระยะด้วย gap แทน) */
.it-course-area .it-course-info {
   gap: 2px 16px;
}

/* การ์ดในแถวสูงเท่ากัน (ก้นการ์ดตรงกันแม้ meta ยาวไม่เท่ากัน) — ชื่อผู้พัฒนายาวตกบรรทัดได้ไม่ทำให้ใบอื่นเตี้ยตาม */
.it-course-area .it-course-item {
   height: 100%;
   display: flex;
   flex-direction: column;
}
.it-course-area .it-course-item .it-course-content {
   flex: 1 1 auto;
}

/* ===== Innovation thumbnail: กล่องคงที่ 376 x 256 ===== */
.it-course-area .it-course-thumb img {
   width: 376px;
   height: 256px;
   max-width: 100%;     /* กันรูปล้น column บนจอเล็ก */
   object-fit: cover;   /* crop ให้พอดี ไม่ยืดผิดสัดส่วน */
}

/* ===== Blog thumbnail: กล่องคงที่ 356 x 202 ===== */
.it-blog-area .it-blog-thumb img {
   width: 356px;
   height: 202px;
   max-width: 100%;     /* กันรูปล้น column บนจอเล็ก */
   object-fit: cover;   /* crop ให้พอดี ไม่ยืดผิดสัดส่วน */
}

/* ===== Team thumbnail (about-us): กล่องคงที่ 303 x 350 ===== */
.it-team-3-area .it-team-3-thumb img {
   width: 303px;
   height: 350px;
   max-width: 100%;     /* กันรูปล้น column บนจอเล็ก */
   object-fit: cover;   /* crop ให้พอดี ไม่ยืดผิดสัดส่วน */
}

/* ===== Team card: การ์ดสูงเท่ากันทั้งแถว (กันก้นการ์ดเหลื่อมเวลาข้อความยาวไม่เท่ากัน) ===== */
.it-team-3-area .it-team-3-item {
   display: flex;
   flex-direction: column;
   height: 100%;              /* เต็มความสูง column ที่ bootstrap ยืดให้ */
   max-width: 303px;          /* ล็อกความกว้างการ์ด = รูป (กล่องข้อความไม่กว้างเกินรูป) */
   margin-left: auto;         /* จัดการ์ดกึ่งกลาง column */
   margin-right: auto;
}
.it-team-3-area .it-team-3-item .it-team-3-thumb {
   flex: 0 0 auto;            /* รูปคงขนาด ไม่ยุบ */
}
.it-team-3-area .it-team-3-content {
   flex: 1 1 auto;            /* กล่องข้อความยืดเต็มที่เหลือ → ก้นการ์ดตรงกัน */
}

/* ===== Team card: มุมโค้งมน ===== */
.it-team-3-area .it-team-3-thumb,
.it-team-3-area .it-team-3-thumb img {
   border-radius: 20px 20px 0 0;   /* มุมบนโค้ง (รูป) */
}
.it-team-3-area .it-team-3-content {
   border-radius: 0 0 20px 20px;   /* มุมล่างโค้ง (กล่องข้อความ) */
}

/* ===== Team card: ปิดแผ่นดำ overlay ตอน hover =====
   template ตั้ง .it-team-3-thumb::after (พื้นดำ rgba(48,55,63,.7)) โผล่ตอน hover
   ไว้เป็นฉากหลังไอคอนโซเชียล — แต่การ์ดนี้ไม่มีไอคอน overlay จึงไม่จำเป็น เอาออก */
.it-team-3-area .it-team-3-thumb::after {
   display: none;
}

/* ============================================================
 * หน้า innovation.php (ตัวอย่าง) — สไตล์เฉพาะที่ template ไม่มี
 * ============================================================ */
/* ปุ่มกรอง (filter pills) */
.inno-filter-btn {
   border: 1px solid #d9e0df;
   background: #fff;
   color: var(--it-common-black);
   border-radius: 30px;
   padding: 8px 22px;
   margin: 4px 5px;
   font-size: 15px;
   font-weight: 500;
   transition: 0.3s;
}
.inno-filter-btn:hover,
.inno-filter-btn.active {
   background: var(--it-theme-1);
   border-color: var(--it-theme-1);
   color: #fff;
}
/* ป้ายกำกับบนรูปผลงาน (ประเภท · ปี) */
.it-course-thumb .inno-tag,
.research-row-thumb .inno-tag {
   position: absolute;
   left: 15px;
   top: 15px;
   background: var(--it-theme-1);
   color: #fff;
   font-size: 13px;
   font-weight: 500;
   padding: 4px 12px;
   border-radius: 4px;
}
/* เลขลำดับขั้นตอนการพัฒนา */
.inno-step-no {
   display: inline-block;
   color: var(--it-theme-1);
   font-weight: 700;
   font-size: 15px;
   letter-spacing: 1px;
   margin-bottom: 4px;
}
/* แถบ CTA ปิดท้าย */
.it-cta-area {
   background-color: var(--it-theme-1);   /* กันเผื่อ theme-bg ไม่ทำงาน */
}
.inno-cta-text h3 {
   color: #fff;
   margin-bottom: 8px;
}
.inno-cta-text p {
   color: rgba(255, 255, 255, .9);
   margin: 0;
}
/* ผลงานล่าสุด (sidebar): คุมขนาดรูป thumbnail ให้เล็ก (template ตั้งใจใช้รูปเล็ก) */
.it-sv-details-sidebar .rc__post-thumb img {
   width: 80px;
   height: 80px;
   object-fit: cover;
   border-radius: 6px;
}

/* header: จัดเมนูชิดขวา หลังเอาปุ่มตะกร้า/Contact Us ออก (ทั้ง home และหน้าย่อย) */
.it-header-5-area .it-header-2-main-menu ul,
.it-header-2-area .it-header-2-main-menu ul {
   text-align: right;
}

/* header: บีบระยะเมนูให้อยู่แถวเดียว (เมนูไทยชื่อยาว + หลายรายการ) */
.it-header-2-main-menu ul {
   padding-left: 0;
}
.it-header-2-main-menu ul li {
   margin: 0 11px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
   .it-header-2-main-menu ul li {
      margin: 0 7px;
   }
}

/* dropdown เมนู: กันข้อความไทยยาวตกบรรทัด เช่น "การประกวด/เวทีนำเสนอ" (ยกเว้น megamenu) */
.it-header-2-main-menu ul li > .submenu:not(.has-megamenu) {
   width: 290px;
}
.it-header-2-main-menu ul li > .submenu > li > a {
   white-space: nowrap;
}

/* ===== หน้าแรก: nav พื้นสีฟ้า #22A3D1 + ตัวอักษรขาว (ลูกค้าขอ) =====
   scope ด้วย .it-header-transparent → กระทบเฉพาะ header หน้าแรก (หน้าย่อยใช้ .it-header-5-area) */
.it-header-transparent .it-header-2-plr {
   background-color: var(--it-theme-1);
   box-shadow: 0 8px 24px rgba(14, 42, 70, .15);
}
/* ตัวอักษรเมนู + ลูกศร dropdown เป็นขาว (ทั้ง normal + hover) */
.it-header-transparent .it-header-2-main-menu > nav > ul > li > a,
.it-header-transparent .it-header-2-main-menu > nav > ul > li:hover > a {
   color: var(--it-common-white);
}
.it-header-transparent .it-header-2-main-menu ul li.has-dropdown::after,
.it-header-transparent .it-header-2-main-menu ul li:hover.has-dropdown::after {
   color: var(--it-common-white);
}
/* active = ขีดเส้นใต้ขาว (ตัวอักษรคงขาว) */
.it-header-transparent .it-header-2-main-menu > nav > ul > li.active > a {
   color: var(--it-common-white);
   position: relative;
}
.it-header-transparent .it-header-2-main-menu > nav > ul > li.active > a::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 16px;
   height: 3px;
   border-radius: 2px;
   background-color: var(--it-common-white);
}
/* ===== ตอน sticky (เลื่อนลง): ทำแถบ nav เต็มความกว้างเป็นสีฟ้า =====
   เดิมสีฟ้าอยู่บน .it-header-2-plr (กล่องในกรอบ container 1380px) → พอ fixed เต็มจอ
   เลยเห็นแค่กล่องกลางจอ ขอบขาว · แก้เฉพาะ .header-sticky (บนสุดยังเป็นกล่องลอยเดิม) */
.it-header-transparent .header-sticky {
   background-color: var(--it-theme-1);
   box-shadow: 0 6px 20px rgba(14, 42, 70, .15);
}
/* กล่องด้านในกลืนกับแถบเต็ม — เอาพื้น/มุมโค้ง/เงาของกล่องออก เฉพาะตอน sticky */
.it-header-transparent .header-sticky .it-header-2-plr {
   background-color: transparent;
   border-radius: 0;
   box-shadow: none;
}
/* ===== top bar: ลิงก์ด่วนฝั่งขวา (ทำเนียบนักวิจัย / KPI Dashboard) =====
   ใช้คลาส .it-header-2-top-left ซ้ำ → สีตัวอักษร/ไอคอน/hover ตามพื้นแต่ละ header เอง
   (home = พื้นสว่างตัวอักษรเข้ม · หน้าย่อย = พื้นดำตัวอักษรขาว) */
.it-top-quicklinks {
   margin-right: 28px;   /* เว้นระยะจากไอคอนโซเชียล */
}
/* เส้นคั่นก่อนไอคอนโซเชียล (template left:-23) ชิด "KPI Dashboard" — ดันเข้ากลางช่องว่าง (~14/14) */
.it-header-2-top-social::after {
   left: -14px;
}
.it-top-quicklinks ul li a:hover {
   color: var(--it-theme-1);
}
/* ===== top bar (ทั้ง 2 header): ชื่อหน่วยงานเต็มให้อยู่บรรทัดเดียว (ไม่ตัด 2 บรรทัด) =====
   ชื่อยาว + แถบบาง → เลิก col แข็ง ให้คอลัมน์ยืดตามเนื้อหา + nowrap ที่ชื่อ + บีบระยะลิงก์ด่วน
   จำกัด ≥992px (จอใหญ่) — จอเล็กปล่อยตัดบรรทัดตามเดิม กันชื่อยาวล้นขอบมือถือ
   (home ขยาย container เป็น container-1380 · หน้าย่อยใช้ container ปกติ ก็พอ 761<1140) */
@media (min-width: 992px) {
   .it-header-2-top-area .row {
      flex-wrap: nowrap;
   }
   .it-header-2-top-area .row > [class*="col-"] {
      flex: 0 0 auto;      /* คอลัมน์กว้างตามเนื้อหา (ยกเลิกความกว้าง col แข็ง) */
      width: auto;
      max-width: 100%;
   }
   .it-header-2-top-area .row > [class*="col-"]:last-child {
      flex: 1 1 auto;      /* คอลัมน์ขวายืดเต็มที่เหลือ → ลิงก์/โซเชียลชิดขวา */
      min-width: 0;
   }
   .it-header-2-top-area .it-header-2-top-left ul li a {
      white-space: nowrap; /* ชื่อหน่วยงาน (และลิงก์ด่วน) ไม่ตัดบรรทัด */
   }
   /* บีบระยะลิงก์ด่วนให้ประหยัดที่ (เดิม pl 30 / pr 45 กว้างไป) */
   .it-header-2-top-area .it-top-quicklinks ul li {
      padding-left: 24px;
   }
   .it-header-2-top-area .it-top-quicklinks ul li:not(:last-child) {
      padding-right: 34px;
   }
   /* header หน้าย่อย (top-style) มีเส้นคั่นระหว่างลิงก์ด่วน — เดิม right:20 ชนข้อความ "ทำเนียบนักวิจัย"
      ดันเส้นเข้ากลางช่องว่าง (ซ้าย ~18 / ขวา ~16) */
   .it-header-2-top-style .it-top-quicklinks ul li:not(:last-child)::after {
      right: 16px;
   }
}

/* หน้า /research + /km-r2r: คุมขนาดรูปการ์ด (กล่องคงที่) */
.kmr2r-item .it-course-thumb img {
   width: 100%;
   height: 300px;
   object-fit: cover;   /* crop พอดี ไม่ยืดผิดสัดส่วน */
}

/* การ์ด km-r2r: สูงเท่ากันทั้งแถว (ก้นการ์ดตรงกันแม้ข้อความยาวไม่เท่ากัน) */
.kmr2r-item .it-course-item {
   display: flex;
   flex-direction: column;
   height: 100%;
}
.kmr2r-item .it-course-thumb {
   flex: 0 0 auto;              /* รูปคงขนาด ไม่ยุบ */
}
.kmr2r-item .it-course-content {
   flex: 1 1 auto;             /* เนื้อหายืดเต็ม → ก้นการ์ดตรงกัน */
}

/* ===== /research: ลิสต์แนวนอน (รูปซ้าย + ข้อความขวา) — ต่างจากการ์ดกริด ===== */
.research-row {
   display: flex;
   align-items: stretch;
   min-height: 240px;   /* เดิมตรึง 180px ทำให้อึดอัด → min + โตตามเนื้อหาได้ (keyword/บทคัดย่อ) */
   background: #fff;
   border: 1px solid #e7ecec;
   border-radius: 14px;
   overflow: hidden;
   transition: 0.3s;
}
.research-row:hover {
   border-color: var(--it-theme-1);
   box-shadow: 0 14px 34px rgba(14, 42, 70, .08);
   transform: translateY(-2px);
}
.research-row-thumb {
   position: relative;   /* img วาง absolute เต็มคอลัมน์ → รูปไม่ดันความสูงแถว */
   flex: 0 0 240px;
   max-width: 240px;
   background: #f4f7f8;
   overflow: hidden;
}
.research-row-thumb img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.research-row-body {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   padding: 26px 34px;
}
.research-row-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 6px 16px;
   color: var(--it-theme-1);
   font-size: 15px;
   margin-bottom: 12px;
}
.research-row-meta span {
   display: inline-flex;
   align-items: center;
   gap: 6px;
}
.research-row-title {
   font-size: 19px;
   line-height: 1.55;
   font-weight: 700;
   color: var(--it-theme-2);
   margin-bottom: 12px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
.research-row-keys {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
   margin-bottom: 14px;
}
.research-row-key {
   font-size: 13px;
   font-weight: 500;
   padding: 4px 13px;
   border-radius: 20px;
   background: #e9f5fc;
   color: var(--it-theme-2);
}
.research-row-desc {
   color: #6a7581;
   margin-bottom: 16px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
.research-row-more {
   margin-top: auto;   /* ดันปุ่มไปชิดล่างการ์ด */
   color: var(--it-theme-2);
   font-weight: 600;
   font-size: 15px;
}
@media (min-width: 768px) and (max-width: 991px) {
   .research-row-thumb {
      flex: 0 0 200px;
      max-width: 200px;
   }
   .research-row-body {
      padding: 22px 24px;
   }
}

/* ต่ำกว่า 768px เรียงบน-ล่าง */
@media (max-width: 767px) {
   .research-row {
      flex-direction: column;
      min-height: 0;
   }
   .research-row-thumb {
      flex-basis: auto;
      max-width: 100%;
      height: 200px;
   }
   .research-row-title {
      -webkit-line-clamp: 3;
   }
}

/* ===== research-detail: back link + keyword tags + ปุ่มลิงก์ ===== */
.research-back {
   color: var(--it-theme-2);
   font-weight: 600;
}
.research-back:hover {
   color: var(--it-theme-1);
}
.research-detail-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 18px;
   color: var(--it-theme-1);
}
.research-detail-meta span {
   display: inline-flex;
   align-items: center;
   gap: 6px;
}
.research-detail-thumb img {
   max-width: 100%;
   height: auto;
   border-radius: 10px;
}
.research-detail-keys {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}
.research-key-tag {
   display: inline-block;
   padding: 4px 12px;
   border-radius: 20px;
   background: rgba(34, 163, 209, 0.12);
   color: var(--it-theme-2);
}
.research-detail-links {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}

/* research-detail: hero หัวบทความ (รูปซ้าย + ข้อมูลขวา) — เว้นระยะให้หายใจ */
.research-detail-hero {
   display: flex;
   flex-wrap: wrap;
   gap: 40px;
   align-items: flex-start;
   margin-bottom: 45px;
   padding-bottom: 40px;
   border-bottom: 1px solid #e7ecec;
}
.research-detail-hero .rd-cover {
   flex: 0 0 280px;
   max-width: 280px;
}
.research-detail-hero .rd-cover img {
   width: 100%;
   height: auto;
   border-radius: 12px;
   border: 1px solid #e7ecec;
   box-shadow: 0 12px 30px rgba(23, 113, 143, 0.1);
}
.research-detail-hero .rd-info {
   flex: 1 1 360px;
}
.rd-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 8px 22px;
   color: var(--it-theme-1);
   margin-bottom: 16px;
}
.rd-meta span {
   display: inline-flex;
   align-items: center;
   gap: 7px;
}
.rd-title {
   font-size: 28px;
   line-height: 1.5;
   font-weight: 700;
   color: var(--it-theme-2);
   margin-bottom: 22px;
}
.rd-keys {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 24px;
}
.rd-abstract {
   color: #555;
   line-height: 2;
}
@media (max-width: 767px) {
   .research-detail-hero {
      gap: 24px;
   }
   .research-detail-hero .rd-cover {
      flex-basis: 100%;
      max-width: 240px;
   }
   .rd-title {
      font-size: 23px;
   }
}

/* ===== /academic-resources: การ์ด it-feature-3 สูงเท่ากันทั้งแถว ===== */
.it-feature-3-area .it-feature-3-item {
   display: flex;
   flex-direction: column;
   height: 100%;
}
.it-feature-3-area .it-feature-3-content {
   flex: 1 1 auto;   /* เนื้อหายืดเต็ม → ปุ่มอยู่ระดับเดียวกันทุกใบ */
}

/* ===== /downloads: กลุ่มแบบฟอร์ม + รายการเอกสาร ===== */
.download-group-head {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 20px;
}
.download-group-icon {
   width: 46px;
   height: 46px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--it-theme-1);
   color: #fff;
   border-radius: 10px;
   font-size: 20px;
   flex: 0 0 auto;
}
.download-group-title {
   margin: 0;
}
.download-row {
   display: flex;
   align-items: center;
   gap: 16px;
   background: #fff;
   border: 1px solid #e7ecec;
   border-radius: 10px;
   padding: 18px 24px;
   margin-bottom: 12px;
   transition: 0.3s;
}
.download-row:hover {
   border-color: var(--it-theme-1);
   box-shadow: 0 10px 24px rgba(14, 42, 70, .06);
}
.download-row-icon {
   color: var(--it-theme-1);
   font-size: 20px;
   flex: 0 0 auto;
}
.download-row-name {
   flex: 1 1 auto;
   color: var(--it-common-black);
   font-weight: 600;
}
.download-row-action {
   flex: 0 0 auto;
   color: var(--it-theme-2);
   font-weight: 600;
   font-size: 15px;
}
@media (max-width: 575px) {
   .download-row {
      flex-wrap: wrap;
   }
   .download-row-action {
      width: 100%;
   }
}

/* /downloads: accordion กลุ่มแบบฟอร์ม (กาง/พับด้วย grid 0fr→1fr) */
.download-panel {
   background: #fff;
   border: 1px solid #e7ecec;
   border-radius: 10px;
   margin-bottom: 16px;
   overflow: hidden;
}
.download-panel-head {
   display: flex;
   align-items: center;
   gap: 14px;
   width: 100%;
   padding: 18px 24px;
   background: transparent;
   border: 0;
   text-align: start;
   cursor: pointer;
}
.download-panel-title {
   flex: 1 1 auto;
   font-weight: 600;
   color: var(--it-common-black);
}
.download-panel-count {
   flex: 0 0 auto;
   color: #7b8483;
   font-size: 14px;
}
.download-panel-arrow {
   flex: 0 0 auto;
   color: var(--it-theme-1);
   transition: transform 0.3s;
}
.download-panel.open .download-panel-arrow {
   transform: rotate(180deg);
}
.download-panel-body {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 0.3s ease;
}
.download-panel.open .download-panel-body {
   grid-template-rows: 1fr;
}
.download-panel-inner {
   overflow: hidden;
   min-height: 0;
   /* padding แนวนอนเท่านั้น — padding บน/ล่างจะรั่วเป็นแถบค้างตอนพับ (grid track = 0)
      ระยะบนได้จาก padding-bottom ของหัว · ระยะล่างได้จาก margin-bottom ของ .download-row */
   padding: 0 24px;
}

/* /downloads: สีประจำกรุ๊ป (isGroupExtra1) — downloads.php ส่ง --dl-group-rgb มาที่ .download-panel
   แล้วไล่สีทั้ง accordion จากตัวแปรเดียว (กรอบ/แถบซ้าย/หัว/ไอคอน/รายการข้างใน)
   กรุ๊ปที่ไม่ตั้งสี = ไม่มีคลาส .has-color → ใช้สีธีมเดิมทั้งหมด */
.download-panel.has-color {
   border-color: rgba(var(--dl-group-rgb), .35);
   border-left: 4px solid rgb(var(--dl-group-rgb));   /* แถบสีตลอดความสูงกล่อง */
}
/* หัว accordion = แถบสีเต็มทั้งแถบ · ตัวหนังสือ/ไอคอนเป็นสีขาว */
.download-panel.has-color .download-panel-head {
   background: rgb(var(--dl-group-rgb));
}
.download-panel.has-color .download-panel-title,
.download-panel.has-color .download-panel-arrow {
   color: #fff;
}
.download-panel.has-color .download-panel-count {
   color: rgba(255, 255, 255, .85);   /* ข้อความรอง — จางกว่าชื่อกรุ๊ปนิดหน่อย */
}
.download-panel.has-color .download-group-icon {
   background: rgba(255, 255, 255, .22);   /* กล่องไอคอนโปร่งบนแถบสี (สีทึบจะจมหายไปกับพื้น) */
   color: #fff;
}
/* พื้นหลังส่วนเนื้อหา = สีกรุ๊ปจาง ๆ (การ์ดเอกสารสีขาวจะลอยเด่นขึ้นมา)
   วางที่ .download-panel-body (grid 0fr ตอนพับ → สูง 0 → สีไม่รั่วออกมาเป็นแถบค้าง) */
.download-panel.has-color .download-panel-body {
   background: rgba(var(--dl-group-rgb), .07);
}
/* เว้นระยะบนให้การ์ดใบแรกไม่ชนแถบสี — ผูกกับ .open เท่านั้น
   (ถ้าใส่ padding-top ที่ .download-panel-inner ตรง ๆ จะรั่วเป็นแถบค้างตอนพับ) */
.download-panel.open.has-color .download-panel-inner {
   padding-top: 16px;
}
/* 🔴 ตัวการ์ดเอกสาร (.download-row) ไม่ทาสีกรุ๊ป — พื้นขาว + ไอคอน/ปุ่มสีธีมเดิม ตามที่สั่ง */

/* /news-detail: แกลเลอรีรูปแนบ (isAttachFile) — grid + คลิกซูม (.popup-image ของ template) */
.news-gallery {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   gap: 12px;
   margin: 30px 0 10px;
}
.news-gallery-item {
   display: block;
   position: relative;
   border-radius: 8px;
   overflow: hidden;
}
.news-gallery .news-gallery-item img {
   width: 100%;
   height: 160px !important;   /* ต้อง !important + specificity สูง เพื่อชนะกฎ CKEditor .postbox__content-box img { height:auto !important } */
   object-fit: cover;
   display: block;
   transition: transform 0.4s;
}
.news-gallery-item:hover img {
   transform: scale(1.06);
}
/* caption ลอยทับมุมล่างของรูป (ไม่ดันความสูง → ทุกใบเท่ากัน 160px) */
.news-gallery-cap {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 20px 10px 7px;
   font-size: 13px;
   line-height: 1.35;
   color: #fff;
   background: linear-gradient(transparent, rgba(0, 0, 0, .7));
   text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

/* /news-detail: รายการไฟล์แนบที่ไม่ใช่รูป (pdf/doc/…) */
.news-file-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin: 24px 0 10px;
}
.news-file-item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 18px;
   border: 1px solid #e7ecec;
   border-radius: 8px;
   color: var(--it-common-black);
   transition: 0.3s;
}
.news-file-item:hover {
   border-color: var(--it-theme-1);
   box-shadow: 0 8px 20px rgba(14, 42, 70, .06);
}
.news-file-item > i {
   color: var(--it-theme-1);
   font-size: 20px;
   flex: 0 0 auto;
}
.news-file-name {
   flex: 1 1 auto;
   font-weight: 600;
}
.news-file-info {
   flex: 0 0 auto;
   color: #7b8483;
   font-size: 13px;
}

/* /downloads: แถบค้นหา */
.download-tools {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
}
.download-search {
   position: relative;
   flex: 1 1 260px;
   max-width: 400px;
}
.download-search input {
   width: 100%;
   height: 52px;
   padding: 0 48px 0 22px;
   border: 1px solid #e7ecec;
   border-radius: 30px;
   background: #fff;
   outline: none;
}
.download-search input:focus {
   border-color: var(--it-theme-1);
}
.download-search i {
   position: absolute;
   right: 22px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--it-theme-1);
}
#download-empty {
   display: none;
   text-align: center;
   padding: 40px 0;
}

/* /news: การ์ดข่าวสูงเท่ากันทั้งแถว (ปุ่ม "อ่านต่อ" อยู่ระดับเดียวกัน) */
.it-blog-area .it-blog-item-box {
   height: 100%;
}
.it-blog-area .it-blog-item {
   display: flex;
   flex-direction: column;
   height: 100%;
}
.news-card-text {
   flex: 1 1 auto;   /* เกริ่นนำยืดเต็ม → ดันปุ่มลงล่างเสมอกัน */
}

/* /news-detail: รูปหัวข่าว (กล่องคงที่ ไม่ให้ใหญ่เกิน) */
.news-detail-thumb img {
   width: 100%;
   height: 420px;
   object-fit: cover;
   border-radius: 10px;
}

/* กล่องดู PDF ในหน้า (ใช้ร่วม: km-r2r-detail, innovation-detail) */
.pdf-viewer {
   border: 1px solid #e7ecec;
   border-radius: 10px;
   overflow: hidden;
}
.pdf-viewer iframe {
   display: block;
   width: 100%;
   height: 800px;
   border: 0;
}

/* breadcrumb: เพิ่มระยะบรรทัด กันหัวข้อไทยยาว 2 บรรทัดทับกัน */
.it-breadcrumb-title {
   line-height: 1.4;
}

/* /about-us แถบสถิติ (funfact): พื้นหลังฟ้ายืดเต็มจอซ้าย-ขวา
   แต่ตัวเลขยังตรงแนวกับเนื้อหาส่วนอื่นของหน้า
   ค่า max-width ล้อตาม .container จริงที่หน้านี้ใช้ = bootstrap (540/720/960/1140)
   ยกเว้น breakpoint 1400px ที่ main.css override เป็น 1350px */
.it-funfact-area>.container {
   max-width: 100%;
   padding-left: 0;
   padding-right: 0;
}

.it-funfact-area .it-funfact-bg-wrap {
   padding-left: 0;
   padding-right: 0;
}

.it-funfact-area .it-funfact-bg-wrap>.row {
   margin-left: auto;
   margin-right: auto;
   padding-left: 12px;
   padding-right: 12px;
}

@media (min-width: 576px) {
   .it-funfact-area .it-funfact-bg-wrap>.row {
      max-width: 540px;
   }
}

@media (min-width: 768px) {
   .it-funfact-area .it-funfact-bg-wrap>.row {
      max-width: 720px;
   }
}

@media (min-width: 992px) {
   .it-funfact-area .it-funfact-bg-wrap>.row {
      max-width: 960px;
   }
}

@media (min-width: 1200px) {
   .it-funfact-area .it-funfact-bg-wrap>.row {
      max-width: 1140px;
   }
}

@media (min-width: 1400px) {
   .it-funfact-area .it-funfact-bg-wrap>.row {
      max-width: 1350px;
   }
}

/* ============================================================
 * /search + แถบค้นหาหน้าแรก (สไตล์คล้าย tci-thaijo.org)
 * ============================================================ */

/* ----- หน้าแรก: แถบค้นหา (ส่ง GET ไป /search) ----- */
.home-search-area {
   margin-top: 50px;
   margin-bottom: 10px;
}
.home-search-form {
   display: flex;
   gap: 12px;
   background: #fff;
   border: 1px solid #e7ecec;
   border-radius: 14px;
   box-shadow: 0 18px 40px rgba(14, 42, 70, .10);
   padding: 14px;
}
.home-search-input {
   position: relative;
   flex: 1 1 auto;
   display: flex;
   align-items: center;
}
.home-search-input i {
   position: absolute;
   left: 18px;
   color: var(--it-theme-1);
}
.home-search-input input {
   width: 100%;
   height: 54px;
   border: 1px solid #e7ecec;
   border-radius: 10px;
   padding: 0 18px 0 46px;
   background: #fff;
   outline: none;
}
.home-search-input input:focus,
.home-search-select:focus {
   border-color: var(--it-theme-1);
}
.home-search-select {
   position: relative;   /* 🔴 สำคัญ: กัน dropdown ของ nice-select กางเต็มหน้า (base .nice-select position หลุดเป็น static) */
   flex: 0 0 190px;
   height: 54px;
   line-height: 52px;   /* จัดข้อความกึ่งกลางแนวตั้ง (template แปลงเป็น nice-select ที่ copy class นี้ไป) */
   border: 1px solid #e7ecec;
   border-radius: 10px;
   padding: 0 34px 0 18px;   /* เว้นขวาให้ลูกศร nice-select */
   background: #fff;
   outline: none;
   cursor: pointer;
}
.home-search-btn {
   flex: 0 0 auto;
   height: 54px;
   padding: 0 34px;
   border: 0;
   border-radius: 10px;
   background: var(--it-theme-1);
   color: #fff;
   font-weight: 600;
   cursor: pointer;
   transition: 0.3s;
}
.home-search-btn:hover {
   background: var(--it-theme-2);
}
@media (max-width: 767px) {
   .home-search-form {
      flex-wrap: wrap;
   }
   .home-search-input,
   .home-search-select,
   .home-search-btn {
      flex: 1 1 100%;
   }
}

/* ----- /search: แถบค้นหาหลัก ----- */
.search-form {
   max-width: 820px;
   margin: 0 auto;
}
.search-form-main {
   display: flex;
   gap: 12px;
}
.search-form-main input {
   flex: 1 1 auto;
   height: 56px;
   border: 1px solid #e7ecec;
   border-radius: 10px;
   padding: 0 20px;
   outline: none;
}
.search-form-main input:focus {
   border-color: var(--it-theme-1);
}
.search-form-main button {
   flex: 0 0 auto;
   height: 56px;
   padding: 0 34px;
   border: 0;
   border-radius: 10px;
   background: var(--it-theme-1);
   color: #fff;
   font-weight: 600;
   cursor: pointer;
   transition: 0.3s;
}
.search-form-main button:hover {
   background: var(--it-theme-2);
}
.search-form-filters {
   display: flex;
   gap: 12px;
   margin-top: 14px;
}
.search-form-filters .search-select {
   position: relative;   /* กัน dropdown nice-select กางเต็มหน้า */
   flex: 1 1 0;
   height: 50px;
   line-height: 48px;   /* จัดข้อความกึ่งกลาง (nice-select copy class นี้ไปที่ div) */
   border: 1px solid #e7ecec;
   border-radius: 10px;
   padding: 0 34px 0 18px;   /* เว้นขวาให้ลูกศร */
   background: #fff;
   outline: none;
   cursor: pointer;
}
.search-form-filters .search-select:focus {
   border-color: var(--it-theme-1);
}

/* dropdown ของ nice-select (หน้าค้นหา): ให้กว้างเท่ากล่อง select + ชิดซ้ายอ่านง่าย */
.home-search-select .list,
.search-select .list {
   width: 100%;
   left: 0;
   right: auto;
   margin: 0;
   text-align: left;
}
.home-search-select .list .option,
.search-select .list .option {
   text-align: left;
}

/* ----- /search: ผลลัพธ์ ----- */
.search-note {
   color: #9aa2a2;
   font-size: 14px;
}
.search-result-item {
   display: flex;
   gap: 22px;
   background: #fff;
   border: 1px solid #e7ecec;
   border-radius: 12px;
   padding: 24px 28px;
   margin-bottom: 18px;
   transition: 0.3s;
}
.search-result-item:hover {
   border-color: var(--it-theme-1);
   box-shadow: 0 12px 30px rgba(14, 42, 70, .06);
}
/* รูปปก (แนวตั้งแบบปกหนังสือ อ้างอิง ThaiJO) */
.search-result-thumb {
   flex: 0 0 122px;
   max-width: 122px;
   align-self: flex-start;
}
.search-result-thumb img {
   display: block;
   width: 122px;
   height: 165px;
   object-fit: cover;
   border-radius: 8px;
   border: 1px solid #eef2f2;
}
.search-result-body {
   flex: 1 1 auto;
   min-width: 0;   /* กันข้อความยาวดัน flex ล้น */
}
@media (max-width: 575px) {
   .search-result-item {
      flex-direction: column;
   }
   .search-result-thumb {
      flex-basis: auto;
      max-width: 100%;
      align-self: stretch;   /* จอเล็ก: รูปเต็มกว้าง (desktop เป็น flex-start ให้ปกชิดบน) */
   }
   .search-result-thumb img {
      width: 100%;
      height: 200px;
   }
}
.search-result-type {
   display: inline-block;
   margin-bottom: 10px;
   padding: 3px 12px;
   border-radius: 4px;
   font-size: 13px;
   font-weight: 500;
   color: #fff;
   background: var(--it-theme-1);
}
.search-result-type.type-research {
   background: var(--it-theme-2);
}
.search-result-type.type-km {
   background: #4a90a4;
}
.search-result-title {
   margin-bottom: 12px;
}
.search-result-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 8px 22px;
   margin-bottom: 12px;
   color: #6b7574;
   font-size: 15px;
}
.search-result-meta i {
   color: var(--it-theme-1);
   margin-right: 4px;
}
.search-result-snippet {
   margin-bottom: 14px;
}
.search-result-more {
   color: var(--it-theme-2);
   font-weight: 600;
   font-size: 15px;
}
@media (max-width: 575px) {
   .search-form-main {
      flex-wrap: wrap;
   }
   .search-form-main input,
   .search-form-main button {
      flex: 1 1 100%;
   }
   .search-form-filters {
      flex-wrap: wrap;
   }
}

/* ============================================================
 * /researchers (ทำเนียบนักวิจัย) + /kpi-dashboard
 * reuse: it-team-3 (การ์ดคน), it-funfact (ตัวเลข), it-progress-bar, it-feature-3
 * ============================================================ */

/* ----- /researchers: แถบค้นหา + กรองสาขา ----- */
.researcher-tools {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
}
/* แถบค้นหา (select หัวข้อ + ช่องพิมพ์ + ปุ่ม) — reuse แนว .search-form */
.researcher-searchbar {
   display: flex;
   gap: 12px;
   width: 100%;
   max-width: 820px;
}
.researcher-searchbar .search-select {
   position: relative;   /* กัน dropdown nice-select กางเต็มหน้า */
   flex: 0 0 190px;
   height: 56px;
   line-height: 54px;   /* จัดข้อความกึ่งกลาง (nice-select copy class ไป div) */
   border: 1px solid #e7ecec;
   border-radius: 10px;
   padding: 0 34px 0 18px;
   background: #fff;
   outline: none;
   cursor: pointer;
}
.researcher-searchbar input {
   flex: 1 1 auto;
   height: 56px;
   border: 1px solid #e7ecec;
   border-radius: 10px;
   padding: 0 20px;
   outline: none;
}
.researcher-searchbar input:focus,
.researcher-searchbar .search-select:focus {
   border-color: var(--it-theme-1);
}
.researcher-searchbar button {
   flex: 0 0 auto;
   height: 56px;
   padding: 0 30px;
   border: 0;
   border-radius: 10px;
   background: var(--it-theme-1);
   color: #fff;
   font-weight: 600;
   cursor: pointer;
   transition: 0.3s;
}
.researcher-searchbar button:hover {
   background: var(--it-theme-2);
}
@media (max-width: 575px) {
   .researcher-searchbar { flex-wrap: wrap; }
   .researcher-searchbar .search-select,
   .researcher-searchbar input,
   .researcher-searchbar button { flex: 1 1 100%; }
}
/* บรรทัดสาขาในการ์ดคน (พื้นการ์ดน้ำเงินเข้ม → ใช้ฟ้า accent) */
.researcher-field {
   display: block;
   margin-top: 6px;
   color: var(--it-theme-1);
   font-size: 14px;
}
.researcher-field i {
   margin-right: 4px;
}
#researcher-empty {
   display: none;
   text-align: center;
   padding: 40px 0;
}

/* ----- /kpi-dashboard (การ์ดตัวเลข + การ์ดกราฟ Chart.js) ----- */
.mb-24 {
   margin-bottom: 24px;
}
.kpi-stat-card {
   display: flex;
   align-items: center;
   gap: 18px;
   background: #fff;
   border: 1px solid #e7ecec;
   border-radius: 12px;
   padding: 24px 26px;
   height: 100%;
}
.kpi-stat-icon {
   flex: 0 0 auto;
   width: 60px;
   height: 60px;
   border-radius: 12px;
   background: var(--it-theme-1);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 26px;
}
.kpi-stat-num {
   color: var(--it-common-black);
   font-weight: 700;
   font-size: 30px;
   line-height: 1.1;
}
.kpi-stat-label {
   color: #6b7574;
}
.kpi-chart-card {
   background: #fff;
   border: 1px solid #e7ecec;
   border-radius: 12px;
   padding: 24px 28px;
   height: 100%;
}
.kpi-chart-title {
   margin-bottom: 18px;
   font-weight: 600;
   color: var(--it-common-black);
}
.kpi-chart-wrap {
   position: relative;
   height: 300px;   /* Chart.js maintainAspectRatio:false อิงความสูงนี้ */
}

/* ===== หน้าแรก hero: ปุ่ม Quick link "แบบฟอร์มขอรับการพิจารณาจริยธรรมวิจัย พร."
   สีฟ้าเข้ม (theme-2) ให้เด่นต่างจากปุ่มหลัก (theme-1) · ปลายทางยังเป็น # รอไฟล์ฟอร์มจริง ===== */
.it-hero-2-btn-box {
   flex-wrap: wrap;        /* ปุ่ม 2 อันตกลงบรรทัดใหม่ได้ ไม่ล้นขอบจอเล็ก */
   row-gap: 15px;
}
.it-btn.it-btn-ethics {
   background-color: #F5821F;
   white-space: nowrap;    /* ข้อความยาว: คงพิลล์บรรทัดเดียวบนจอปกติ */
}
.it-btn.it-btn-ethics:hover {
   background-color: #d96f10;
}
@media (max-width: 767px) {
   /* จอเล็ก: ยอมให้ตัดบรรทัดในปุ่ม กันข้อความยาวล้นขอบ */
   .it-btn.it-btn-ethics {
      height: auto;
      line-height: 1.5;
      padding-top: 10px;
      padding-bottom: 10px;
      white-space: normal;
   }
}

/* ===== KPI Dashboard (ฝัง HTML ผ่าน iframe) ===== */
.kpi-embed-frame {
	width: 100%;
	min-height: 640px;
	border: 0;
	display: block;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(23, 113, 143, .08);
}
.kpi-empty {
	text-align: center;
	padding: 80px 20px;
	background: #fff;
	border-radius: 10px;
	border: 1px dashed #c7d6dc;
	color: #6b7574;
}
.kpi-empty h4 { color: #17718f; margin-bottom: 10px; }

/* /downloads: รูปย่อ + วันที่ในแถว (ดึงจาก DB) */
.download-row-thumb {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 8px;
	overflow: hidden;
}
.download-row-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.download-row-body {
	flex: 1 1 auto;
	min-width: 0;
}
.download-row-body .download-row-name {
	display: block;
}
.download-row-date {
	display: block;
	margin-top: 2px;
	color: #7b8483;
	font-size: 13px;
	font-weight: 400;
}
/* /downloads: ยอดเข้าชมต่อท้ายวันที่ในบรรทัดเดียวกัน (.download-row-date เป็น block) */
.download-row-views {
	margin-left: 14px;
}
.download-row-views:first-child {
	margin-left: 0;
}
.download-empty-box {
	background: #fff;
	border: 1px dashed #c7d6dc;
	border-radius: 10px;
	padding: 60px 20px;
	color: #6b7574;
}

/* การ์ดไม่มีรูป: กล่อง text (ชื่อเรื่อง) แทนรูป — research/km-r2r/innovation + search */
.research-row-thumb-text,
.search-result-thumb-text {
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 16px;
   background: linear-gradient(135deg, var(--it-theme-1), var(--it-theme-2));
}
.search-result-thumb-text {
   width: 100%;
   height: 165px;
   border-radius: 8px;
   border: 1px solid #eef2f2;
}
.research-row-thumb-text span,
.search-result-thumb-text span {
   color: #fff;
   font-weight: 600;
   line-height: 1.5;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
.research-row-thumb-text span { font-size: 17px; }
.search-result-thumb-text span { font-size: 13px; -webkit-line-clamp: 4; }

/* หน้าแรก โซนนวัตกรรม: การ์ดไม่มีรูป → กล่อง text (ชื่อผลงาน) ขนาดเท่ารูป 376 x 256
   🔴 ห้ามใช้ชื่อ .it-course-thumb-text — main.css จองไว้แล้ว (badge ลอยมุมบนซ้าย position:absolute) */
.home-inno-thumb-text a {
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   width: 376px;
   max-width: 100%;
   height: 256px;
   padding: 20px;
   background: linear-gradient(135deg, var(--it-theme-1), var(--it-theme-2));
   border-radius: 5px;
}
.home-inno-thumb-text a span {
   color: #fff;
   font-weight: 600;
   font-size: 18px;
   line-height: 1.5;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* /news: การ์ดข่าวไม่มีรูป → กล่อง text (ชื่อข่าว) */
.it-blog-thumb-text a {
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   width: 100%;
   height: 202px;
   padding: 20px;
   background: linear-gradient(135deg, var(--it-theme-1), var(--it-theme-2));
   border-radius: 10px;
}
.it-blog-thumb-text a span {
   color: #fff;
   font-weight: 600;
   font-size: 18px;
   line-height: 1.5;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* CKEditor5: รูปในเนื้อหาไม่ให้ height ตายตัว (กันรูปบี้เมื่อ responsive) */
figure.image img,
.research-detail-content img,
.postbox__content-box img,
.postbox__content-text img {
   height: auto !important;
   max-width: 100%;
}

/* /researchers + /about-us (it-team-3): template ตั้ง padding-top:0 (เผื่อ avatar/social overlap) → ชื่อชิดขอบบน · เพิ่มระยะบน */
.it-team-3-area .it-team-3-content {
   padding-top: 25px;
}

/* /researchers: การ์ดเป็นลิงก์ + การ์ดไม่มีรูป → กล่อง text (ชื่อ) */
.it-team-3-area a.it-team-3-item {
   display: block;
   text-decoration: none;
}
.it-team-3-thumb-text {
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   height: 350px;
   padding: 20px;
   background: linear-gradient(135deg, var(--it-theme-1), var(--it-theme-2));
   border-radius: 20px 20px 0 0;
}
.it-team-3-thumb-text span {
   color: #fff;
   font-weight: 600;
   font-size: 18px;
   line-height: 1.5;
}

/* /researchers: การ์ดนักวิจัยแบบ info-card (ดีไซน์ตามที่ลูกค้าขอ — ไม่มีรูป) */
.it-team-3-area a.rc-card {
   display: flex;
   flex-direction: column;
   height: 100%;
   text-align: left;
   text-decoration: none;
   background: #fff;
   border: 1px solid #e7ecec;
   border-radius: 16px;
   padding: 28px 26px;
   transition: box-shadow .3s, border-color .3s, transform .3s;
}
.it-team-3-area a.rc-card:hover {
   border-color: var(--it-theme-1);
   box-shadow: 0 12px 30px rgba(34, 163, 209, .15);
   transform: translateY(-4px);
}
.rc-name {
   margin: 0 0 4px;
   color: var(--it-common-black);
   font-weight: 700;
   line-height: 1.4;
}
.rc-name-en {
   margin-bottom: 8px;
   color: #8a9391;
   font-size: 15px;
}
.rc-role {
   margin-bottom: 16px;
   color: #6b7574;
   line-height: 1.5;
}
.rc-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 18px;
}
.rc-tag {
   padding: 5px 14px;
   border-radius: 20px;
   background: rgba(34, 163, 209, .1);
   color: var(--it-theme-2);
   font-size: 13px;
   line-height: 1.5;
}
.rc-info {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 20px;
}
.rc-info-line {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   color: #6b7574;
   font-size: 14px;
   line-height: 1.5;
}
.rc-info-line i {
   flex: 0 0 auto;
   margin-top: 3px;
   color: var(--it-theme-1);
}
.rc-more {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-top: auto;
   color: var(--it-theme-1);
   font-weight: 600;
}
.rc-more i {
   transition: transform .3s;
}
.it-team-3-area a.rc-card:hover .rc-more i {
   transform: translateX(4px);
}

/* ===== /researchers: modal รายละเอียดนักวิจัย ===== */
.researcher-card { cursor: pointer; }
body.rm-open { overflow: hidden; }   /* ล็อกสกอลล์พื้นหลังตอนเปิด modal */

.researcher-modal {
   position: fixed;
   inset: 0;
   z-index: 100020;   /* เหนือ sticky header (99999) — บทเรียนเดิม */
   display: flex;
   align-items: flex-start;
   justify-content: center;
   padding: 40px 16px;
   overflow-y: auto;
}
.rm-overlay {
   position: fixed;
   inset: 0;
   background: rgba(10, 25, 40, .6);
}
.rm-dialog {
   position: relative;
   z-index: 1;
   width: 100%;
   max-width: 880px;
   background: #fff;
   border-radius: 14px;
   overflow: hidden;
   box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
   animation: rmIn .25s ease;
}
@keyframes rmIn {
   from { opacity: 0; transform: translateY(20px); }
   to   { opacity: 1; transform: translateY(0); }
}
.rm-close {
   position: absolute;
   top: 16px;
   right: 16px;
   z-index: 2;
   width: 40px;
   height: 40px;
   border: 0;
   border-radius: 50%;
   background: rgba(255, 255, 255, .18);
   color: #fff;
   font-size: 18px;
   cursor: pointer;
   transition: .2s;
}
.rm-close:hover { background: rgba(255, 255, 255, .32); }

/* หัว modal — แถบไล่เฉดสีธีม */
.rm-head {
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 32px 60px 28px 40px;
   background: linear-gradient(120deg, var(--it-theme-2), var(--it-theme-1));
   color: #fff;
}
.rm-avatar {
   flex: 0 0 auto;
   width: 84px;
   height: 84px;
   border-radius: 50%;
   overflow: hidden;
   border: 3px solid rgba(255, 255, 255, .5);
}
.rm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rm-name { color: #fff; font-size: 24px; font-weight: 700; margin: 0 0 2px; }
.rm-name-en { color: rgba(255, 255, 255, .85); font-size: 15px; }
.rm-role { color: #fff; font-size: 15px; font-weight: 600; margin-top: 8px; }

/* เนื้อหา modal — เลื่อนภายใน */
.rm-scroll {
   max-height: calc(100vh - 260px);
   overflow-y: auto;
   padding: 10px 40px 34px;
}
.rm-section { padding-top: 22px; }
.rm-section-title {
   font-size: 18px;
   font-weight: 700;
   color: var(--it-theme-2);
   padding-bottom: 10px;
   margin-bottom: 14px;
   border-bottom: 2px solid #eaf2f5;
}
.rm-info { width: 100%; border-collapse: collapse; }
.rm-info th {
   width: 160px;
   text-align: left;
   vertical-align: top;
   font-weight: 400;
   color: #7b8483;
   padding: 7px 16px 7px 0;
}
.rm-info td { padding: 7px 0; color: var(--it-common-black); }
.rm-info tr + tr th, .rm-info tr + tr td { border-top: 1px solid #f0f4f5; }

/* rich content (การศึกษา/อบรม/ปฏิบัติงาน/ผลงาน) ที่แอดมินจัดใน CKEditor */
.rm-content { line-height: 1.7; color: var(--it-common-black); }
.rm-content h1, .rm-content h2, .rm-content h3, .rm-content h4 {
   font-size: 18px;
   font-weight: 700;
   color: var(--it-theme-2);
   padding-bottom: 10px;
   margin: 22px 0 14px;
   border-bottom: 2px solid #eaf2f5;
}
.rm-content table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.rm-content td, .rm-content th { padding: 7px 10px 7px 0; vertical-align: top; }
.rm-content img { max-width: 100%; height: auto; }

/* ผลงานในระบบ — ปี + ลิงก์ */
.rm-works { list-style: none; margin: 0; padding: 0; }
.rm-works li {
   display: flex;
   gap: 12px;
   padding: 9px 0;
   border-bottom: 1px solid #f0f4f5;
}
.rm-work-year { flex: 0 0 auto; color: var(--it-theme-1); font-weight: 700; min-width: 44px; }
.rm-works a { color: var(--it-common-black); }
.rm-works a:hover { color: var(--it-theme-1); }

.rm-contact { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.rm-contact-item { display: inline-flex; align-items: center; gap: 8px; color: var(--it-theme-2); }
.rm-contact-item i { color: var(--it-theme-1); }

.rm-actions { padding-top: 26px; }

@media (max-width: 575px) {
   .researcher-modal { padding: 0; }
   .rm-dialog { max-width: 100%; min-height: 100vh; border-radius: 0; }
   .rm-head { padding: 28px 56px 24px 20px; flex-direction: column; text-align: center; }
   .rm-scroll { max-height: none; padding: 10px 20px 30px; }
   .rm-info th { width: 120px; }
}

/* /researcher-detail (หน้าเต็ม): ชื่ออังกฤษ + ตารางข้อมูลทั่วไป (ให้สอดคล้อง modal) */
.rd-name-en { color: #7b8483; font-size: 16px; margin: -6px 0 12px; }
.rd-infotable { width: 100%; border-collapse: collapse; margin: 4px 0 20px; }
.rd-infotable th {
   width: 170px;
   text-align: left;
   vertical-align: top;
   font-weight: 400;
   color: #7b8483;
   padding: 8px 16px 8px 0;
}
.rd-infotable td { padding: 8px 0; color: var(--it-common-black); }
.rd-infotable tr + tr th, .rd-infotable tr + tr td { border-top: 1px solid #f0f4f5; }