/* ================================================================
   BCNSP JOURNAL — MODERN MEDICAL & NURSING THEME
   Clean Blue · Clinical · Academic
   ================================================================ */

/* ===== GOOGLE FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600&family=Sarabun:wght@300;400;600&display=swap');

/* ================================================================
   COLOR VARIABLES
   ================================================================ */
:root {

  --c-deep: #1B4F72;
  --c-primary: #2E86C1;
  --c-mid: #5DADE2;
  --c-accent: #2ECC71;

  /* พื้นหลังฟ้าอ่อนสดใส */
  --c-surface: #EDF7FF;

  --c-card: #FFFFFF;

  --c-text: #2C3E50;
  --c-text-muted: #7F8C8D;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
  --shadow-md: 0 10px 30px rgba(46,134,193,0.12);
  --shadow-lg: 0 20px 40px rgba(27,79,114,0.15);

  --f-heading: 'Kanit', sans-serif;
  --f-body: 'Sarabun', sans-serif;

}

/* ================================================================
   BODY
   ================================================================ */
body {

  font-family: var(--f-body);

  background: linear-gradient(
      180deg,
      #EDF7FF 0%,
      #F8FBFE 100%
  );

  color: var(--c-text);

  line-height: 1.8;

  font-size: 15.5px;

  -webkit-font-smoothing: antialiased;

}


/* ================================================================
   HEADER
   ================================================================ */
.pkp_structure_head {

  background-image: url("https://img1.pic.in.th/images/473b5d18bc07f1651.png");
  border: none;
  border-bottom: 0px solid rgba(255,255,255,0.18);
  height: auto; min-height: 45px;
  box-shadow: 0 4px 24px rgba(13,79,138,0.30);
  margin-bottom: 0; position: sticky; top: 0; z-index: 1000;
  position: static;

}

.pkp_structure_head::before {

  content:'';
  display:block;

  height:4px;

  background:linear-gradient(
    90deg,
    var(--c-deep),
    var(--c-mid),
    var(--c-accent)
  );

}

/* ================================================================
   NAVIGATION
   ================================================================ */

.pkp_navigation_primary_row {
  background: linear-gradient(135deg, #cff3ff 0%, #eafafc 50%, #ffffff 100%);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 8px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

#navigationPrimary a {

  font-family: var(--f-heading);

  color: var(—deep);

  font-weight: 500;

  padding: 8px 25px;

  border-radius: 10px;

  width: 100%;

  transition: all .25s ease;

}

#navigationPrimary a:hover {

  color: var(--c-primary);
  background: rgba(46,134,193,0.1);

}

/* ================================================================
   DROPDOWN MENU
   ================================================================ */

.dropdown-menu {

  background: #ffffff;

  border-radius: 10px;

  border:1px solid rgba(0,0,0,0.05);

  box-shadow: var(--shadow-md);

  padding:6px 0;

}

.dropdown-menu li {

  list-style:none;

}

.dropdown-menu li a {

  display:block;

  padding:10px 18px;

  font-family: var(--f-body);

  color: var(--c-text);

  transition: all .2s ease;

}

.dropdown-menu li a:hover {

  background:#EDF7FF;

  color:var(--c-primary);

}

/* ================================================================
   HEADINGS
   ================================================================ */

.pkp_structure_main h1 h2 h3 h4 h5 h6 {

  font-family: var(--f-heading);

  font-size: 1.9rem;

  font-weight: 700;

  color: var(--c-deep);

  margin-bottom: 25px;

  position: relative;

  padding-bottom: 12px;

}


.pkp_structure_main h1::after {

  content:'';

  position:absolute;

  bottom:0;
  left:0;

  width:60px;
  height:5px;

  background:linear-gradient(
      90deg,
      var(--c-primary),
      var(--c-accent)
  );

  border-radius:10px;

}

.pkp_structure_main h2 {

  font-family: var(--f-heading);

  font-size:1.45rem;

  font-weight:600;

  color:var(--c-deep);

  margin-top:30px;

}
.pkp_structure_main h1 {

  font-family: var(--f-heading);

  font-weight:600;

  color:var(--c-deep);

  margin-top:30px;

}
.pkp_structure_main strong {

  font-family: var(--f-heading);

  font-weight:600;

  color:var(--c-deep);

  margin-top:30px;
}

/* ================================================================
   ARTICLE CARD
   ================================================================ */


.obj_article_summary {

  background: var(--c-card);

  border-radius: 14px;

  padding: 24px;

  margin-bottom: 25px;

  border:1px solid rgba(0,0,0,0.03);

  box-shadow: var(--shadow-md);

  transition: all .3s ease;

}

.obj_article_summary:hover {

  transform: translateY(-5px);

  box-shadow: var(--shadow-lg);

}

/* ================================================================
   PDF BUTTON
   ================================================================ */

.obj_galley_link {

  background: var(--c-primary) !important;

  color:#fff !important;

  border-radius: 6px !important;

  padding: 8px 18px !important;

  font-size: 0.85rem;

  font-weight: 600 !important;

  text-transform: uppercase;

  border:none !important;

  transition: all .25s ease !important;

}

.obj_galley_link:hover {

  background: var(--c-deep) !important;

  transform: scale(1.05);

}

/* ================================================================
   SIDEBAR
   ================================================================ */

.pkp_sidebar .pkp_block {

  background:#fff;

  border-radius:12px;

  box-shadow:var(--shadow-sm);

  margin-bottom:30px;

  overflow:hidden;

}

.pkp_sidebar .pkp_block .title {

  background:#F3F9FF;

  color:var(--c-primary);

  font-family:var(--f-heading);

  font-size:0.9rem;

  padding:14px 20px;

  text-transform:uppercase;

  letter-spacing:1px;

}

.pkp_sidebar .pkp_block .content {

  padding:20px;

}

/* ================================================================
   CTA SUBMIT BUTTON
   ================================================================ */

.pkp_block_make_submission a {

  background:linear-gradient(
      135deg,
      var(--c-primary),
      var(--c-mid)
  ) !important;

  border-radius:40px !important;

  text-align:center;

  padding:12px !important;

  font-weight:500;

}

/* ================================================================
   SCROLLBAR
   ================================================================ */

::-webkit-scrollbar { width:8px }

::-webkit-scrollbar-track { background:#f1f1f1 }

::-webkit-scrollbar-thumb {

  background:#cfd8dc;

  border-radius:10px;

}

::-webkit-scrollbar-thumb:hover {

  background:var(--c-primary);

}
@media (max-width: 767px) {
    .pkp_structure_head {
      background: url("https://img1.pic.in.th/images/473b5d18bc07f1651.png");
      background-size: cover;
      position: static;
      top: 0;
      z-index: 1050;

      height: 125px;
    }

    .pkp_site_name {
      top : 40px;
      left: 5px;
    }
}

/* คลุมส่วน Footer ทั้งหมดเพื่อให้ Gradient ดูต่อเนื่อง */
.pkp_structure_footer_wrapper {
    background: linear-gradient(135deg, #31abda 0%, #a2d9ff 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* ส่วนเนื้อหาหลักของ Footer */
.pkp_footer_content {
    background: rgba(255, 255, 255, 0.85); /* ใช้สีขาวโปร่งแสงเพื่อให้เห็นพื้นหลัง Gradient ลางๆ */
    backdrop-filter: blur(5px); /* เพิ่มเอฟเฟกต์กระจกฝ้าให้ดูพรีเมียม */
    padding: 50px 20px;
    text-align: center;
    font-size: 15px;
    color: #2c3e50;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.03);
}

 .pkp_footer_content {
  background: linear-gradient(120deg, #c7f2ff, #e9fdff, #ffffff);
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 40px 20px;
  text-align: center;
  font-size: 15px;  
  color: #2c3e50;
  box-shadow: 0 -3px 12px rgba(0,0,0,0.04);

}

.pkp_footer_content a {
    color: #007a8a;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dashed transparent;
    transition: all 0.2s ease-in-out;
}

.pkp_footer_content a:hover {
    color: #005a66;
    border-bottom: 1px dashed #007a8a;
    text-decoration: none;
}


.pkp_brand_footer {
    background: rgba(49, 171, 218, 0.9);
    padding: 20px;
    text-align: center;
    font-size: 14px;
    color: #ffffff; 
    letter-spacing: 0.5px;
}

.pkp_footer_content strong {
    color: #31abda;
    font-weight: 700;
}
.pkp_navigation_user {
  position: absolute;
  top: -20px;     
  right: -100px;  
  font-family: var(--f-heading);
  font-size: 14px;
  font-weight: 500;
}

/* ลิงก์ */
.pkp_navigation_user a {
  color: #2c3e50;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

/* เวลาชี้เมาส์ */
.pkp_navigation_user a:hover {
  background: rgba(255,255,255,0.7);
  color: #007c91;
}

/* เส้นคั่น */
.pkp_navigation_user li {
  display: inline-block;
  margin-left: 8px;
}