@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=IBM+Plex+Sans+Thai+Looped:wght@300;400;500;600;700&family=Kanit:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

/* FC Minimal — heading/display font (self-hosted, not on Google Fonts).
   --font-heading already referenced this family name, but no @font-face
   existed for it, so every heading was silently falling back to IBM Plex
   Sans Thai instead. Files provided by the hospital in assets/FC-Minimal/. */
@font-face {
  font-family: 'FC Minimal';
  src: url('assets/FC-Minimal/FC Minimal Regular.otf') format('opentype'),
       url('assets/FC-Minimal/FC Minimal Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FC Minimal';
  src: url('assets/FC-Minimal/FC Minimal Bold.otf') format('opentype'),
       url('assets/FC-Minimal/FC Minimal Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FC Minimal';
  src: url('assets/FC-Minimal/FC Minimal Italic.otf') format('opentype'),
       url('assets/FC-Minimal/FC Minimal Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'FC Minimal';
  src: url('assets/FC-Minimal/FC Minimal Bold Italic.otf') format('opentype'),
       url('assets/FC-Minimal/FC Minimal Bold Italic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* --- Root Variable Declarations --- */
:root {
  /* Colors from palette: #84339c, #ff51a3, #ffffff, #230534, #cec9d0 */
  --primary: #84339c;      /* Royal Purple */
  --primary-dark: #230534; /* Midnight Plum */
  --primary-light: #f5ebf7;/* Soft purple tint */
  --secondary: #ff51a3;    /* Vibrant Pink */
  --secondary-light: #fff0f6; /* Soft pink tint */
  --accent: #ff51a3;       /* Vibrant Pink */
  --accent-light: #fff0f6;
  --bg-base: #f0edf2;      /* Lavender-grey tint for clean base background */
  --bg-surface: #ffffff;
  --text-main: #230534;    /* Midnight Plum for readable high-harmony text */
  --text-muted: #725d7b;   /* Muted purple-grey */
  --border-color: #cec9d0;  /* Lavender grey border */
  
  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.35);
  --glass-shadow: 0 8px 32px 0 rgba(132, 51, 156, 0.08);
  --glass-blur: blur(16px);

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 20px -2px rgba(132, 51, 156, 0.08);
  --shadow-lg: 0 10px 30px -5px rgba(132, 51, 156, 0.12), 0 8px 10px -6px rgba(132, 51, 156, 0.08);
  --shadow-glow: 0 0 20px rgba(255, 81, 163, 0.4);

  /* Typography */
  --font-heading: 'FC Minimal', 'IBM Plex Sans Thai', 'Kanit', sans-serif;
  --font-body: 'IBM Plex Sans Thai Looped', 'Sarabun', sans-serif;
  --font-base-size: 16px;
  
  /* Layout */
  --container-width: 1600px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- High Contrast Theme (Premium Midnight Plum & Neon Pink Accent Dark Mode) --- */
body.high-contrast {
  --primary: #ff51a3;       /* Neon Pink for interactive elements */
  --primary-dark: #f472b6;  /* Light Pink for primary headings */
  --primary-light: rgba(255, 81, 163, 0.15); /* Soft transparent pink */
  --secondary: #ff51a3;     /* Neon Pink */
  --secondary-light: #230534;
  --accent: #ff51a3;        /* Neon Pink */
  --accent-light: rgba(255, 81, 163, 0.15);
  --bg-base: #14021f;       /* Ultra-deep dark purple base */
  --bg-surface: #230534;    /* Midnight Plum card surface */
  --text-main: #cec9d0;     /* Off-white lavender-grey text */
  --text-muted: #a69ba8;    /* Muted grey-purple text */
  --border-color: #4a1c5d;  /* Dark purple border */
  --glass-bg: rgba(35, 5, 52, 0.8);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  --glass-blur: blur(16px);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 15px rgba(255, 81, 163, 0.25);
}


/* --- Base & Reset --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* clear the ~81px sticky .header-main on #anchor navigation so section titles aren't tucked behind it */
  font-size: var(--font-base-size);
}


body {
  font-family: var(--font-body);
  background-color: var(--bg-base);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

input, select, textarea, button {
  font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--primary-dark);
  line-height: 1.3;
}

body.high-contrast h1, 
body.high-contrast h2, 
body.high-contrast h3, 
body.high-contrast h4, 
body.high-contrast h5, 
body.high-contrast h6 {
  color: var(--primary-dark);
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--secondary);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Accessibility Toolbar --- */
.accessibility-bar {
  background-color: var(--primary-dark);
  color: #ffffff;
  font-size: 0.85rem;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.accessibility-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.acc-tools {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* Visitor stats, moved here from the footer */
.visitor-stats-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}
.visitor-stats-bar strong {
  color: #ffffff;
  font-weight: 700;
}
.visitor-stats-bar .visitor-stats-sep {
  opacity: 0.45;
}

.acc-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.acc-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 500;
  transition: var(--transition);
  font-size: 0.8rem;
}

@media (max-width: 600px) {
  .accessibility-bar .container {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 10px;
    row-gap: 4px;
  }
  .hotline {
    font-size: 0.78rem;
  }
  .visitor-stats-bar {
    display: none;
  }
  .acc-tools {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .acc-group {
    gap: 4px;
  }
  .acc-btn {
    padding: 3px 6px;
    font-size: 0.72rem;
  }
  .acc-btn-label {
    display: none;
  }
}

.acc-btn:hover, .acc-btn.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

/* .news-tag ถูกออกแบบให้ลอยทับมุมรูปในการ์ดข่าว (position: absolute) เมื่อ
   นำมาใช้เป็นป้ายหมวดในแถบหัวหน้าต่าง มันจึงหลุดออกจากการจัดแถวแบบ flex
   แล้วไปลอยทับปุ่มข้างๆ -- ปุ่ม ก- / ก+ ถูกป้ายนี้บังจนมองไม่เห็นมาตลอด
   ในแถบหัวหน้าต่างจึงให้มันอยู่ในแถวตามปกติ */
.admin-modal-header .news-tag {
  position: static;
}

/* เนื้อข่าวในหน้าต่างรายละเอียด -- ขนาดเคยเขียนติดไว้ใน HTML ย้ายมาไว้ที่นี่ */
#news-modal-content {
  font-size: 1.05rem;
}

.acc-btn.contrast-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.acc-btn.contrast-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}

.high-contrast .acc-btn.contrast-btn {
  background: var(--primary);
  color: #0b0f19;
  border-color: var(--primary);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.45);
}

/* Font Size Buttons */
.acc-fontsize-group {
  gap: 4px !important;
}
.fontsize-btn {
  min-width: 28px;
  text-align: center;
  font-weight: 700 !important;
  letter-spacing: 0;
}
.fontsize-btn small {
  font-size: 0.7em;
  font-weight: 700;
}
#btn-font-sm { font-size: 0.7rem; }
#btn-font-md { font-size: 0.85rem; }
#btn-font-lg { font-size: 1rem; }

/* Font Size Scale Classes */
body.font-sm {
  font-size: 12px;
}
body.font-md {
  font-size: 16px;
}
body.font-lg {
  font-size: 20px;
}
body.font-lg h1, body.font-lg h2, body.font-lg h3 {
  line-height: 1.3;
}
body.font-lg p, body.font-lg li, body.font-lg span, body.font-lg td {
  line-height: 1.7;
}

.hotline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  animation: pulse 2s infinite;
}

.hotline a {
  color: var(--accent);
}

/* --- Reusable Layout Container --- */
.container {
  width: 90%;
  max-width: var(--container-width);
  margin: 0 auto;
}

.header-main {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: background-color 0.3s ease, border 0.3s ease;
}

@media (min-width: 992px) {
  .header-main .container {
    width: 90%;
    max-width: 1600px;
  }
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
}

.logo-img-wrap {
  position: absolute;
  left: 0;
  top: -10px;
  width: 6.0rem;
  height: 6.0rem;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 10px 25px rgba(35, 5, 52, 0.15);
  border: 2.5px solid #ffffff;
  overflow: hidden;
  transition: var(--transition);
  flex-shrink: 0;
  z-index: 10;
}

.logo-text {
  padding-left: 6.8rem;
  transition: var(--transition);
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.05);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-section:hover .logo-img {
  transform: scale(1.12); /* Premium micro-animation zoom */
}

.logo-text h1 {
  font-size: 1.85rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.logo-text p {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 18px;
}

.nav-links a {
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background-color: var(--secondary);
  transition: var(--transition);
  transform: translateX(-50%);
  border-radius: 3px;
}

.nav-links a:hover::after, 
.nav-links li.active a::after {
  width: 70%;
}

.nav-links a:hover, 
.nav-links li.active a {
  color: var(--primary);
  background-color: var(--primary-light);
}

.high-contrast .nav-links a:hover,
.high-contrast .nav-links li.active a {
  background-color: var(--primary);
  color: var(--bg-base);
}

/* Custom Dropdown Styling for Desktop */
.nav-links li.dropdown {
  position: relative;
}

.nav-links li .nav-arrow {
  font-size: 0.75rem;
  margin-left: 4px;
  transition: transform 0.25s ease;
  vertical-align: middle;
}

.nav-links li.dropdown:hover .nav-arrow {
  transform: rotate(180deg);
}

.dropdown-menu-custom {
  --dropdown-shift: 0px; /* corrected at hover-time by JS if centering would push it off-screen */
  display: block;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(calc(-50% + var(--dropdown-shift))) translateY(10px);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 8px 0;
  min-width: 200px;
  z-index: 1000;
  list-style: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

/* Desktop-only: hover opens the dropdown via this centered/shiftable
   transform. Scoped behind min-width so it can never win-by-specificity
   over the mobile media query's `transform: none` below -- without this
   guard, a mouse cursor hovering the menu on a narrow/mobile-width
   viewport (e.g. a touch-laptop, or a real phone that briefly registers
   :hover on tap) re-applies this translateX(-50%) to the mobile dropdown,
   which is `position: static; width: 100%` there -- shifting it half its
   own width sideways and off the screen. */
@media (min-width: 992px) {
  .nav-links li.dropdown:hover .dropdown-menu-custom {
    visibility: visible;
    opacity: 1;
    transform: translateX(calc(-50% + var(--dropdown-shift))) translateY(0);
  }
}

.dropdown-menu-custom li {
  width: 100%;
  text-align: left;
}

.dropdown-menu-custom li a {
  display: block;
  width: 100%;
  padding: 10px 16px !important;
  color: var(--text-main) !important;
  font-weight: 500 !important;
  font-size: 0.92rem !important;
  background: none !important;
  border-radius: 0 !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  box-sizing: border-box;
}

.dropdown-menu-custom li a::after {
  display: none !important; /* Remove bottom underline bar on dropdown links */
}

.dropdown-menu-custom li a:hover {
  background-color: var(--primary-light) !important;
  color: var(--primary) !important;
}

/* High contrast support */
body.high-contrast .dropdown-menu-custom {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
}

body.high-contrast .dropdown-menu-custom li a:hover {
  background-color: var(--primary) !important;
  color: var(--bg-base) !important;
}

.nav-cta {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #ffffff !important;
  border-radius: 50px !important;
  box-shadow: var(--shadow-md);
  padding: 8px 16px !important;
}

.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.nav-cta::after {
  display: none !important;
}

.menu-toggle {
  display: none;
  font-size: 1.5rem;
  background: none;
  border: none;
  color: var(--primary-dark);
  cursor: pointer;
}

#pm25-card {
  position: relative;
}

/* PM2.5 badge shown in the open space between the hospital name and the nav menu (no card frame) */
.pm25-header-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 28px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  transition: var(--transition);
}
.pm25-header-badge:hover {
  color: var(--primary);
}
.pm25-header-badge .pm25-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #3b82f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
}
#pm25-num {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pm25-header-unit {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}
.pm25-header-hidden {
  display: none;
}

/* Hide the inline PM2.5 badge on narrow screens to avoid overflowing the (nowrap) header name */
@media (max-width: 768px) {
  .pm25-header-badge {
    display: none;
  }
}

/* PM2.5 Custom Tooltip displaying downwards */
.pm25-tooltip {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;                           /* Align to the right edge of the card */
  left: auto;
  transform: translateY(8px);
  width: 300px;
  background-color: rgba(255, 255, 255, 0.85) !important; /* Light translucent white */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-main) !important; /* Dark text color for clear readability */
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 100;
  font-size: 0.72rem;
  line-height: 1.45;
  text-align: left;
  pointer-events: none;
  border: 1px solid var(--primary-light);
  white-space: pre-line;
  opacity: 0;
}

/* Tooltip Arrow pointing upwards */
.pm25-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 20px;                        /* Align arrow near the PM2.5 badge */
  left: auto;
  transform: translateX(50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent rgba(255, 255, 255, 0.85) transparent;
}

#pm25-card:hover .pm25-tooltip {
  display: block;
  animation: tooltipFadeInDown 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


@keyframes tooltipFadeInDown {
  from {
    opacity: 0;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(8px);
  }
}

.badge-official {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--primary-light);
  color: var(--primary);
  padding: 6px 16px;
  border-radius: 50px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 24px;
  border: 1px solid rgba(132, 51, 156, 0.1);
}

.badge-official .dot {
  width: 8px;
  height: 8px;
  background-color: #22c55e;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}
.hero-title {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

.hero-title span {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.high-contrast .hero-title span {
  -webkit-text-fill-color: var(--primary-dark);
  text-decoration: underline;
}

.hero-desc {
  font-size: 1.15rem;
  color: var(--text-muted);
  margin-bottom: 36px;
  max-width: 580px;
}

.search-box-wrap {
  background-color: var(--bg-surface);
  border-radius: 100px;
  padding: 8px 8px 8px 24px;
  display: flex;
  align-items: center;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  max-width: 540px;
  margin-bottom: 10px;
  position: relative; /* Setup absolute context for suggestions dropdown */
}

/* --- Search Suggestions Dropdown Styling --- */
.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  max-height: 380px;
  overflow-y: auto;
  z-index: 1000;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: fadeInSuggestions 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInSuggestions {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.suggestion-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.suggestion-group-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-bottom: 1px solid var(--primary-light);
  font-family: var(--font-heading);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-main);
  text-decoration: none;
}

.suggestion-item:hover,
.suggestion-item.highlighted {
  background-color: var(--primary-light);
  color: var(--primary);
}

.suggestion-item-img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-color);
  background-color: var(--bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
}

.suggestion-item-img i {
  color: var(--text-muted);
  font-size: 1rem;
  margin: 0 !important;
}

.suggestion-item-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.suggestion-item-name {
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-body);
}

.suggestion-item-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-body);
  margin-top: 2px;
}

.suggestion-item:hover .suggestion-item-desc,
.suggestion-item.highlighted .suggestion-item-desc {
  color: var(--primary);
  opacity: 0.8;
}

.suggestion-no-results {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-family: var(--font-body);
}

/* Smart search highlight pulse effect */
.doctor-card-highlighted {
  animation: pulseHighlight 3.0s ease-in-out infinite alternate !important;
  z-index: 10;
}

@keyframes pulseHighlight {
  0% {
    transform: scale(1);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
  }
  50% {
    transform: scale(1.05);
    border-color: var(--secondary);
    box-shadow: 0 0 25px rgba(255, 81, 163, 0.4);
  }
  100% {
    transform: scale(1.02);
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(132, 51, 156, 0.3);
  }
}

.search-box-wrap i {
  color: var(--text-muted);
  margin-right: 12px;
  font-size: 1.2rem;
}

.search-input {
  border: none;
  outline: none;
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  background: transparent;
  color: var(--text-main);
}

.search-btn {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border: none;
  color: #ffffff;
  padding: 12px 28px;
  border-radius: 100px;
  font-family: var(--font-heading);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.search-btn:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-glow);
}

.hero-tags {
  display: flex;
  gap: 8px;                           /* ย่อช่องว่างระหว่างแท็กเพื่อไม่ให้ปัดตกบรรทัด */
  align-items: center;
  flex-wrap: wrap;
}

.tag-label {
  font-size: 0.8rem;                  /* ย่อขนาดตัวหนังสือหัวข้อแท็ก */
  color: var(--text-muted);
  font-family: var(--font-heading);
}

.tag-link {
  font-size: 0.8rem;                  /* ย่อตัวหนังสือแท็ก */
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  padding: 4px 10px;                  /* ย่อความกว้างและสูงของแท็ก */
  border-radius: 50px;
  color: var(--text-main);
}

.tag-link:hover {
  background-color: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

/* Hero Frame/Visual */
.hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
}

.image-frame {
  position: relative;
  width: 100%;
  height: 400px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 4px solid #ffffff;
}

.image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-stats-overlay {
  margin-top: 16px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  padding: 16px 20px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.hero-stat-item h4 {
  font-size: 1.6rem;
  color: var(--primary);
  margin-bottom: 4px;
}

.hero-stat-item p {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-family: var(--font-heading);
}

/* --- Quick Services Section (Grid Layout) --- */
.section-padding {
  padding: 40px 0;
}

.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
}

.section-subtitle {
  font-family: var(--font-heading);
  color: var(--secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.9rem;
  margin-bottom: 12px;
  display: block;
}

/* Language Visibility Rules */
body:not(.lang-en) .section-subtitle {
  display: none !important;
}
body.lang-en .section-subtitle {
  display: block !important;
}

.section-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.section-desc {
  color: var(--text-muted);
  font-size: 1rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.service-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 22px 20px;
  border-radius: var(--radius-md);
  text-align: center;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-icon {
  width: 70px;
  height: 70px;
  background-color: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 16px;
  transition: var(--transition);
}

.service-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 8px;
  transition: var(--transition);
  font-family: var(--font-heading);
}

.service-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  flex-grow: 1;
  line-height: 1.45;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.88rem;
}

/* Card specific backgrounds for online services */
.service-card.card-booking {
  background: linear-gradient(135deg, #f7fdf9 0%, #edf9f1 100%);
  border-color: #c0ebd4;
}
.service-card.card-booking:hover {
  border-color: #06c755;
  box-shadow: 0 10px 20px rgba(6, 199, 85, 0.1);
  background: linear-gradient(135deg, #f7fdf9 0%, #e0f6e7 100%);
}

.service-card.card-schedule {
  background: linear-gradient(135deg, #f4fafd 0%, #e8f5fc 100%);
  border-color: #c6e6f8;
}
.service-card.card-schedule:hover {
  border-color: #0088cc;
  box-shadow: 0 10px 20px rgba(0, 136, 204, 0.1);
  background: linear-gradient(135deg, #f4fafd 0%, #d5eefa 100%);
}
.service-card.card-schedule .service-icon {
  background-color: #e0f2fe;
  color: #0284c7;
}
.service-card.card-schedule:hover .service-icon {
  background-color: #0284c7;
  color: #ffffff;
}

.service-card.card-telemed {
  background: linear-gradient(135deg, #faf7fb 0%, #f1e9f5 100%);
  border-color: #e6daf1;
}
.service-card.card-telemed:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 20px rgba(132, 51, 156, 0.1);
  background: linear-gradient(135deg, #faf7fb 0%, #e6d3f0 100%);
}
.service-card.card-telemed .service-icon {
  background-color: #f3e8ff;
  color: #7c3aed;
}
.service-card.card-telemed:hover .service-icon {
  background-color: #7c3aed;
  color: #ffffff;
}

.service-card.card-ehealth {
  background: linear-gradient(135deg, #fffbf5 0%, #fef3e3 100%);
  border-color: #fce2c4;
}
.service-card.card-ehealth:hover {
  border-color: #f59e0b;
  box-shadow: 0 10px 20px rgba(245, 158, 11, 0.1);
  background: linear-gradient(135deg, #fffbf5 0%, #fde7c9 100%);
}
.service-card.card-ehealth .service-icon {
  background-color: #fef3c7;
  color: #d97706;
}
.service-card.card-ehealth:hover .service-icon {
  background-color: #d97706;
  color: #ffffff;
}

.service-card.card-packages {
  background: linear-gradient(135deg, #fff6f8 0%, #ffebf0 100%);
  border-color: #ffd0dc;
}
.service-card.card-packages:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 20px rgba(255, 81, 163, 0.1);
  background: linear-gradient(135deg, #fff6f8 0%, #ffd4e0 100%);
}
.service-card.card-packages .service-icon {
  background-color: #ffe4e6;
  color: #db2777;
}
.service-card.card-packages:hover .service-icon {
  background-color: #db2777;
  color: #ffffff;
}

.service-card.card-payment {
  background: linear-gradient(135deg, #f5fcfc 0%, #e5f8f8 100%);
  border-color: #ccecec;
}
.service-card.card-payment:hover {
  border-color: #0d9488;
  box-shadow: 0 10px 20px rgba(13, 148, 136, 0.1);
  background: linear-gradient(135deg, #f5fcfc 0%, #d1f1f1 100%);
}
.service-card.card-payment .service-icon {
  background-color: #ccfbf1;
  color: #0d9488;
}
.service-card.card-payment:hover .service-icon {
  background-color: #0d9488;
  color: #ffffff;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.service-card:hover .service-icon {
  transform: scale(1.08);
  box-shadow: var(--shadow-sm);
}

/* Spanned Cards for Accent Layout */
.services-grid .service-card.highlighted {
  grid-column: span 2;
  flex-direction: row;
  text-align: left;
  padding: 22px 28px;
  align-items: center;
  gap: 24px;
}

.services-grid .service-card.highlighted .service-icon {
  margin-bottom: 0;
  flex-shrink: 0;
  width: 90px;
  height: 90px;
}

.services-grid .service-card.highlighted .service-info {
  display: flex;
  flex-direction: column;
}

/* Responsive Arrow directions for QR Code scan badge */
.desktop-only-arrow {
  display: inline-block;
}
.mobile-only-arrow {
  display: none;
}

@media (max-width: 767px) {
  .desktop-only-arrow {
    display: none;
  }
  .mobile-only-arrow {
    display: inline-block;
  }
}

/* QR Code Wrapper inside Services Card */
.qr-code-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(132, 51, 156, 0.05);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--primary);
  width: fit-content;
  transition: var(--transition);
}

.qr-code-wrapper img {
  width: 45px;
  height: 45px;
  border-radius: 4px;
  object-fit: contain;
}

.qr-code-wrapper .qr-text {
  text-align: left;
  line-height: 1.3;
}

.qr-code-wrapper .qr-text .qr-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: block;
  font-weight: 500;
}

.qr-code-wrapper .qr-text .qr-link {
  font-size: 0.78rem;
  color: #06c755;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* High Contrast Override */
body.high-contrast .qr-code-wrapper {
  background: #230534;
  border-color: #ff51a3;
}
body.high-contrast .qr-code-wrapper .qr-text .qr-label {
  color: #ffffff;
}
body.high-contrast .qr-code-wrapper .qr-text .qr-link {
  color: #ff51a3;
}

/* --- News & Announcements Section --- */
.bg-light {
  background-color: var(--bg-surface);
}

#services .section-header {
  max-width: 1100px;
  margin-bottom: 24px;
}

#news .section-header {
  max-width: 1000px;
  margin-bottom: 24px;
}

#awards .section-header {
  max-width: 1100px;
  margin-bottom: 12px;
}


#news .news-filter-bar {
  margin-bottom: 24px;
}

.news-filter-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

/* ── Department Filter – horizontal scroll strip ─────────────────────────── */
.dept-filter-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}

/* Left / right fade edges */
.dept-filter-wrap::before,
.dept-filter-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 2;
}
.dept-filter-wrap::before {
  left: 36px;
  background: linear-gradient(to right, var(--bg-base), transparent);
}
.dept-filter-wrap::after {
  right: 36px;
  background: linear-gradient(to left, var(--bg-base), transparent);
}

/* Scrollable inner track */
.dept-filter-track {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE */
  padding: 6px 4px;
  flex: 1;
}
.dept-filter-track::-webkit-scrollbar { display: none; } /* Chrome */

/* Pills inside track — compact */
.dept-filter-track .filter-btn {
  flex-shrink: 0;
  padding: 7px 16px;
  font-size: 0.82rem;
  border-radius: 50px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dept-filter-track .filter-btn i {
  font-size: 0.78rem;
  opacity: 0.8;
}
.dept-filter-track .filter-btn.active i {
  opacity: 1;
}

/* Scroll arrow buttons */
.dept-scroll-arrow {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  z-index: 3;
  position: relative;
}
.dept-scroll-arrow:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(132,51,156,0.3);
  transform: scale(1.1);
}
.dept-scroll-arrow:disabled,
.dept-scroll-arrow[style*="display:none"],
.dept-scroll-arrow[style*="display: none"] {
  opacity: 0;
  pointer-events: none;
}


.filter-btn {
  background-color: var(--bg-base);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 10px 24px;
  border-radius: 50px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
}

.filter-btn:hover, .filter-btn.active {
  background-color: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 48px;
}

.news-card {
  background-color: var(--bg-base);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.news-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.news-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background-color: var(--secondary);
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-heading);
}

.news-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.news-meta {
  display: flex;
  gap: 16px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.news-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.news-title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 3.2em;
}

.news-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

/* ข่าวสาร has no standfirst under its heading any more, so the 56px the
   shared .section-header reserves for one is a hole. Close it here rather
   than globally -- every other section still carries its description. */
#news .section-header {
  margin-bottom: 26px;
}
#news .news-filter-bar {
  margin-bottom: 22px;
}

/* "NEW" marker on a post published, or an e-GP announcement first
   mirrored, within the last week. Inline ahead of the headline so it
   travels with the text when the line wraps. */
.badge-new {
  display: inline-block;
  background: #dc2626;
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
  margin-right: 7px;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* คลิปหนีบกระดาษท้ายหัวข้อข่าวที่มีเอกสารแนบ ตามด้วยจำนวนไฟล์ถ้ามากกว่าหนึ่ง */
.news-clip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 7px;
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 600;
  vertical-align: middle;
}

/* Marks a row mirrored from e-GP, as opposed to a post staff wrote here. */
.badge-egp {
  display: inline-block;
  background: #ecfeff;
  color: #0e7490;
  border: 1px solid #a5f3fc;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 7px;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* ข่าวสาร as a headline list rather than a grid of photo cards. Announcements
   here -- procurement notices above all -- are scanned for one specific item,
   so full untruncated headlines and more rows per screen beat pictures: the
   old cards cropped every title to two lines and gave a stock photo to any
   item without one. The photo still appears in the detail modal. */
/* Newest at the top of the left column, reading down it and then down the
   right one. --news-rows (half the item count, rounded up) is set by
   renderAnnouncements(); without it the grid would fill row by row. */
.news-grid.news-grid--list {
  /* minmax(0, …): a long one-line headline must not widen its column. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--news-rows, 1), auto);
  grid-auto-flow: column;
  column-gap: 48px;
  row-gap: 0;
}

/* One column once two would leave no room for a headline worth reading. */
@media (max-width: 900px) {
  .news-grid.news-grid--list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}

/* Just the headline -- no box, shadow or fill -- so more rows fit. */
.news-grid--list .news-card {
  flex-direction: row;
  align-items: center;
  padding: 11px 2px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* A grid item sizes to its content unless told otherwise, and then the
     ellipsis never applies and the row spills into the next column. */
  min-width: 0;
  cursor: pointer;
}

.news-grid--list .news-card:hover {
  transform: none;
  box-shadow: none;
}

/* A flex item will not shrink below its content unless told to, and without
   that the title never reaches the width where the ellipsis would apply. */
.news-grid--list .news-content {
  padding: 0;
  min-width: 0;
}

/* One line, cut with an ellipsis at the column edge. The full text is in the
   title attribute and in the detail modal a click away. */
.news-grid--list .news-title {
  display: block;
  height: auto;
  font-size: 1.05rem;
  /* ตัวหนาทั้ง 20 บรรทัดอ่านแล้วแน่นตา รายการให้ไล่อ่านใช้ตัวปกติ */
  font-weight: 400;
  /* สระบน-ล่างและวรรณยุกต์ไทยต้องการที่มากกว่า 1.4 ของ .news-title */
  line-height: 1.55;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The row is the click target, so it needs a visible keyboard focus ring. */
.news-grid--list .news-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ตัวอักษรของ section ข่าวสารใหญ่กว่าปุ่มและป้ายแบบเดียวกันใน section อื่น เพราะ
   ที่นี่เป็นรายการให้ไล่อ่านทีละบรรทัด ขยายเฉพาะใน #news ส่วนอื่นของเว็บคงเดิม
   ป้ายกับไอคอนท้ายหัวข้อขยายตามหัวข้อ ไม่อย่างนั้นจะดูเล็กผิดสัดส่วน */
#news .filter-btn {
  font-size: 1rem;
  padding: 11px 26px;
}

#news .btn-secondary-outline {
  font-size: 1.05rem;
  padding: 13px 34px;
}

.news-grid--list .badge-new,
.news-grid--list .badge-egp {
  font-size: 0.7rem;
  margin-right: 9px;
}

.news-grid--list .badge-new {
  padding: 4px 7px;
}

.news-grid--list .badge-egp {
  padding: 3px 7px;
}

.news-grid--list .news-clip {
  margin-left: 8px;
  font-size: 0.85rem;
}

/* จอมือถือ: ปุ่มหมวดหมู่ 9 ปุ่มเรียงหลายแถวอยู่แล้ว และหัวข้อข่าวมีที่บรรทัดเดียว
   จึงขยายน้อยกว่าจอใหญ่หนึ่งขั้น */
@media (max-width: 600px) {
  #news .filter-btn {
    font-size: 0.95rem;
    padding: 9px 18px;
  }

  .news-grid--list .news-title {
    font-size: 1rem;
  }
}

.news-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(132, 51, 156, 0.15);
}

.news-card:hover .news-image img {
  transform: scale(1.08);
}

.news-card:hover .news-title {
  color: var(--primary);
}

.view-all-wrap {
  text-align: center;
}

.btn-secondary-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  padding: 12px 32px;
  border-radius: 50px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  transition: var(--transition);
}

.btn-secondary-outline:hover {
  background-color: var(--primary);
  color: #ffffff;
  box-shadow: var(--shadow-md);
}

/* ===========================================================================
   Research & Academic Works section (#research) — Modern Academic Showcase
   Two views over one dataset: a compact "showcase" (1 featured + 2 compact)
   and an in-page searchable list (#research-all), toggled by #research-viewall.
   Tokens only: --primary / --primary-light / --accent / --bg-* / --text-* /
   --border-color / --font-heading / --font-body / --radius-* / --shadow-*.
   =========================================================================== */
#research.section-padding {
  padding-top: 52px;
  padding-bottom: 56px;
  background:
    radial-gradient(120% 60% at 85% 0%, var(--primary-light) 0%, transparent 55%),
    var(--bg-base);
}

/* --- Section header --- */
.research-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto 16px;
}
.research-head-text { min-width: 0; }
.research-title.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 0.9rem + 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.18;
  margin: 0;
  color: var(--text-main);
  overflow-wrap: anywhere;
}
.research-lead {
  margin: 4px 0 0;
  max-width: 760px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.research-viewall {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.research-viewall:hover,
.research-viewall:focus-visible {
  border-color: var(--primary);
  background: var(--primary-light);
  outline: none;
}
.research-viewall:focus-visible { box-shadow: 0 0 0 3px rgba(132, 51, 156, 0.22); }
.research-viewall i { transition: transform 0.2s ease; }
.research-viewall:hover i { transform: translateX(3px); }

/* --- Category chips --- */
.research-chips {
  max-width: 1120px;
  margin: 0 auto 18px;
  justify-content: flex-start;
  gap: 8px;
}
.research-chips .filter-btn {
  padding: 7px 15px;
  min-height: 36px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  box-shadow: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.research-chips .filter-btn:hover,
.research-chips .filter-btn:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
  background-color: var(--primary-light);
  outline: none;
  box-shadow: none;
}
.research-chips .filter-btn:focus-visible { box-shadow: 0 0 0 3px rgba(132, 51, 156, 0.22); }
.research-chips .filter-btn.active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: none;
}

/* --- Showcase grid: featured (~60%) + 2 compact (~40%) --- */
.research-showcase {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.research-showcase[hidden] { display: none; }
.research-showcase.research-showcase--solo { grid-template-columns: 1fr; }
.rs-side { display: flex; flex-direction: column; gap: 14px; }

/* --- Card shell --- */
.rs-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.rs-card:hover {
  transform: translateY(-3px);
  border-color: rgba(132, 51, 156, 0.45);
  box-shadow: var(--shadow-md);
}
.rs-card:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(132, 51, 156, 0.22);
}

/* button that carries the title — reset to a text link, it is the tab stop */
.rs-open {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.rs-open:focus { outline: none; }

/* --- Academic placeholder cover --- */
.rs-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--primary);
  background:
    linear-gradient(150deg, var(--primary-light) 0%, var(--bg-surface) 72%);
  border-right: 1px solid var(--border-color);
}
.rs-cover i { font-size: 2.4rem; opacity: 0.9; }
.rs-cover-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
}
.rs-cover-year {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* --- Featured card --- */
.rs-featured { display: flex; }
.rs-featured .rs-cover { flex: 0 0 188px; }
.rs-content {
  flex: 1;
  min-width: 0;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
}
.rs-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 8px;
}
.rs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid rgba(132, 51, 156, 0.18);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rs-badge-sm { font-size: 0.68rem; padding: 2px 8px; letter-spacing: 0.5px; }
.rs-year {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.rs-year i { margin-right: 3px; opacity: 0.8; }
.rs-title {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-main);
  margin: 0;
}
.rs-featured .rs-title {
  font-size: 1.18rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.rs-card:hover .rs-title,
.rs-card:focus-within .rs-title { color: var(--primary); }
.rs-authors,
.rs-dept {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.rs-authors i,
.rs-dept i { margin-right: 5px; opacity: 0.7; }
.rs-abstract {
  margin: 10px 0 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rs-readmore {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
}
.rs-readmore i { transition: transform 0.2s ease; }
.rs-card:hover .rs-readmore i { transform: translateX(4px); }

/* --- Compact card --- */
.rs-compact {
  padding: 15px 16px;
  padding-right: 34px;
  display: flex;
  flex-direction: column;
}
.rs-compact .rs-badges { margin-bottom: 6px; }
.rs-title-sm {
  font-size: 0.94rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.rs-sub {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rs-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.8rem;
  transition: transform 0.2s ease, color 0.2s ease;
}
.rs-compact:hover .rs-arrow,
.rs-compact:focus-within .rs-arrow {
  color: var(--primary);
  transform: translate(3px, -50%);
}

/* --- Skeletons --- */
.rs-skel {
  border-radius: 18px;
  background: linear-gradient(100deg, var(--bg-surface) 30%, var(--primary-light) 50%, var(--bg-surface) 70%);
  background-size: 300% 100%;
  border: 1px solid var(--border-color);
  animation: rsShimmer 1.3s ease-in-out infinite;
}
.rs-skel-featured { min-height: 240px; }
.rs-skel-compact { min-height: 108px; }
.rs-skel-row { height: 68px; border-radius: var(--radius-sm); }
.research-all .rs-skel-row + .rs-skel-row { margin-top: 10px; }
@keyframes rsShimmer {
  0% { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}

/* --- Empty state --- */
.research-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 44px 16px;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.research-empty i { font-size: 2rem; margin-bottom: 12px; display: block; opacity: 0.5; }

/* --- In-page full list (#research-all) --- */
.research-all { max-width: 900px; margin: 22px auto 0; }
.research-all[hidden] { display: none; }
.research-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.research-search-wrap { position: relative; flex: 1 1 260px; min-width: 200px; }
.research-search-wrap > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.9rem;
  pointer-events: none;
}
.research-toolbar #research-search {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 38px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-main);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.research-toolbar select {
  height: 46px;
  padding: 0 34px 0 14px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-main);
  background-color: var(--bg-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23725d7b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.research-toolbar #research-search:focus,
.research-toolbar select:focus,
.research-toolbar #research-search:focus-visible,
.research-toolbar select:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(132, 51, 156, 0.16);
}

.research-list { display: flex; flex-direction: column; gap: 10px; }
.research-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 14px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.research-card .rc-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}
.research-card:hover { transform: translateY(-2px); border-color: rgba(132, 51, 156, 0.45); box-shadow: var(--shadow-md); }
.research-card:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(132, 51, 156, 0.22); }
.research-card .rc-body { flex: 1; min-width: 0; }
.research-card .rc-cat {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 3px;
}
.research-card .rc-cat i { margin-right: 5px; opacity: 0.85; }
.research-card .rc-title {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
}
.research-card .rc-title .rs-open {
  color: var(--text-main);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.research-card:hover .rc-title .rs-open,
.research-card:focus-within .rc-title .rs-open { color: var(--primary); }
.research-card .rc-meta {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 3px 14px;
}
.research-card .rc-meta i { margin-right: 4px; opacity: 0.85; }
.research-card .rc-meta .rl-pdf { color: var(--primary); font-weight: 500; }
.research-card .rc-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  transition: transform 0.18s ease, color 0.18s ease;
}
.research-card:hover .rc-chevron,
.research-card:focus-within .rc-chevron { color: var(--primary); transform: translateX(3px); }

.research-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 22px;
}

/* --- Research detail modal body --- */
.research-detail-body { padding: 22px 24px; max-height: 70vh; overflow-y: auto; }
.research-detail-body h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--text-main);
  margin: 0 0 6px;
}
.research-detail-body .rd-title-en {
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.research-detail-body .rd-field { margin-bottom: 14px; }
.research-detail-body .rd-label {
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 3px;
}
.research-detail-body .rd-value {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-main);
}
.research-detail-body .rd-abstract { white-space: pre-line; }
.research-detail-body .rd-kw {
  display: inline-block;
  font-size: 0.75rem;
  background: var(--primary-light);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 3px 9px;
  border-radius: 6px;
  margin: 3px 5px 0 0;
}

/* --- Research Contact CTA (end of #research) --- */
.research-contact {
  position: relative;
  max-width: 880px;
  margin: 26px auto 0;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 1.7fr auto;
  gap: 20px 24px;
  align-items: start;
  background:
    radial-gradient(120% 80% at 100% 0%, var(--primary-light) 0%, transparent 60%),
    var(--bg-surface);
  border: 1px solid rgba(132, 51, 156, 0.12);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.research-contact::before {
  content: "\f610"; /* fa microscope */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: -14px;
  bottom: -24px;
  font-size: 5.5rem;
  line-height: 1;
  color: var(--primary);
  opacity: 0.05;
  pointer-events: none;
}
.rc-info { min-width: 0; position: relative; }
.rc-org {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-main);
}
.rc-org span { font-size: 0.9em; color: var(--text-muted); font-weight: 400; }
.rc-support {
  margin: 3px 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.rc-items {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rc-item {
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding: 5px 6px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}
.rc-item:hover { background: var(--primary-light); }
.rc-item-ic {
  flex-shrink: 0;
  align-self: flex-start;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 0.74rem;
}
.rc-item-text {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 7px;
  font-size: 0.84rem;
  line-height: 1.4;
}
.rc-item-label { color: var(--text-muted); font-size: 0.78rem; }
.rc-item-value {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--text-main);
  word-break: break-word;
}
.rc-item-sub { color: var(--text-muted); font-size: 0.78rem; }
a.rc-email {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.18s ease;
}
a.rc-email:hover { text-decoration: underline; }
a.rc-email:focus-visible {
  outline: none;
  text-decoration: underline;
  box-shadow: 0 0 0 3px rgba(132, 51, 156, 0.22);
  border-radius: 3px;
}

/* QR panel — always solid white so the code stays scannable */
.rc-qr {
  position: relative;
  z-index: 1;
  justify-self: end;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rc-qr:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.rc-qr-frame {
  width: 116px;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}
.rc-qr-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}
.rc-qr-frame--empty {
  border-style: dashed;
  color: var(--text-muted);
  font-size: 2rem;
  opacity: 0.5;
}
.rc-qr-title {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 2px 0 0;
}
.rc-qr-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}
.rc-qr-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.rc-qr-link:hover { text-decoration: underline; }
.rc-qr-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(132, 51, 156, 0.22);
  border-radius: 4px;
}

/* --- Research: responsive --- */
@media (max-width: 992px) {
  .research-showcase { grid-template-columns: 1fr; }
  .rs-side { flex-direction: row; }
  .rs-side .rs-card { flex: 1 1 0; min-width: 0; }
  .research-contact { grid-template-columns: 1fr; gap: 16px; text-align: left; }
  .rc-qr { justify-self: start; align-self: start; }
}
@media (max-width: 768px) {
  #research.section-padding { padding-top: 32px; padding-bottom: 40px; }
  .research-contact { padding: 18px; margin-top: 22px; }
  .rc-qr-frame { width: 132px; height: 132px; }
  .research-contact::before { font-size: 5rem; bottom: -18px; }
  .research-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .research-viewall { align-self: flex-start; }
  .research-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .research-chips::-webkit-scrollbar { display: none; }
  .research-chips .filter-btn { flex-shrink: 0; }
  .research-toolbar { flex-direction: column; }
  .research-search-wrap { flex-basis: auto; min-width: 0; }
  .research-toolbar select { width: 100%; }
  .rs-featured { flex-direction: column; }
  .rs-featured .rs-cover {
    flex-basis: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border-color);
    aspect-ratio: 16 / 6;
    max-height: 150px;
    flex-direction: row;
    gap: 14px;
  }
  .rs-cover i { font-size: 1.9rem; }
  .rs-content { padding: 16px 16px; }
  .rs-featured .rs-title { font-size: 1.06rem; }
  .research-card { padding: 12px 14px 12px 16px; gap: 10px; }
}
@media (max-width: 560px) {
  .rs-side { flex-direction: column; }
}
@media (max-width: 480px) {
  .research-card .rc-meta { gap: 2px 10px; font-size: 0.75rem; }
}

/* --- Research: reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .rs-card, .research-card, .research-viewall, .research-viewall i,
  .rs-readmore i, .rs-arrow, .research-card .rc-chevron,
  .research-chips .filter-btn, .research-toolbar #research-search,
  .research-toolbar select, .rc-item, .rc-qr, a.rc-email { transition: none; }
  .rs-card:hover, .research-card:hover, .rc-qr:hover { transform: none; }
  .rs-skel { animation: none; }
  .rs-compact:hover .rs-arrow, .rs-compact:focus-within .rs-arrow { transform: translateY(-50%); }
}

/* --- Hospital Statistics Dashboard (Premium & Interactive) --- */
.stats-banner {
  background: linear-gradient(135deg, var(--primary-dark), #1a0327);
  color: #ffffff;
  padding: 40px 0;
  position: relative;
  overflow: hidden;
}

.stats-banner h2 {
  color: #ffffff;
}

.stats-banner::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background-color: var(--secondary);
  opacity: 0.08;
  filter: blur(120px);
  top: -150px;
  right: -100px;
  border-radius: 50%;
  pointer-events: none;
}

.stats-banner::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background-color: var(--primary);
  opacity: 0.1;
  filter: blur(100px);
  bottom: -50px;
  left: -100px;
  border-radius: 50%;
  pointer-events: none;
}

/* Tab Navigation */
.stats-tab-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  margin-bottom: 24px;
  position: relative;
  z-index: 5;
}

.stats-tab-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  padding: 14px 28px;
  border-radius: 50px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.stats-tab-btn i {
  font-size: 1.1rem;
  color: var(--secondary);
}

.stats-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  transform: translateY(-2px);
}

.stats-tab-btn.active {
  background: var(--secondary);
  border-color: var(--secondary);
  color: var(--primary-dark);
  box-shadow: 0 0 20px rgba(250, 204, 21, 0.4);
}

.stats-tab-btn.active i {
  color: var(--primary-dark);
}

/* Tab Content Visibility */
.stats-tab-content {
  display: none;
  animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.stats-tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* KPI Cards Layout */
.stats-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.stats-kpi-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: 24px 30px;
  display: flex;
  align-items: center;
  gap: 24px;
  transition: all 0.3s ease;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.stats-kpi-card:hover {
  transform: translateY(-5px);
  border-color: rgba(250, 204, 21, 0.3);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.kpi-icon {
  font-size: 2.2rem;
  color: var(--secondary);
  background: rgba(250, 204, 21, 0.1);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 10px rgba(250, 204, 21, 0.1);
}

.kpi-info {
  flex-grow: 1;
}

.kpi-val-wrap {
  display: flex;
  align-items: baseline;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.1;
  background: linear-gradient(135deg, #ffffff, #f3d6fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.kpi-unit {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: #f3d6fa;
  margin-left: 4px;
}

.kpi-label {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  margin-top: 4px;
  margin-bottom: 2px;
}

.kpi-sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.3;
}

/* Charts and Details Split Rows */
.stats-charts-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 30px;
}

.stats-card-main {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  padding: 30px;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.stats-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.stats-card-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.stats-card-header h3 i {
  color: var(--secondary);
}

.chart-tag {
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  padding: 4px 10px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.5px;
}

/* Custom CSS Stacked Bar Chart */
.custom-chart-container {
  display: grid;
  grid-template-columns: 50px 1fr;
  height: 280px;
  margin-bottom: 16px;
}

.y-axis-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: right;
  padding-right: 12px;
  font-weight: 500;
}

.chart-bars-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 16px;
  padding-bottom: 8px;
  height: 100%;
}

.chart-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 75px;
  height: 100%;
  justify-content: flex-end;
}

.chart-bar-outer {
  width: 32px;
  height: 90%;
  display: flex;
  align-items: flex-end;
}

.chart-bar {
  width: 100%;
  height: var(--bar-height, 0%);
  display: flex;
  flex-direction: column-reverse;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.1);
  background: rgba(255, 255, 255, 0.05);
}

.chart-bar:hover {
  transform: scaleY(1.03) scaleX(1.08);
  box-shadow: 0 0 25px rgba(250, 204, 21, 0.2);
  z-index: 10;
}

.bar-segment {
  width: 100%;
  position: relative;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.bar-segment:hover {
  opacity: 0.9;
  filter: brightness(1.2);
}

/* Colors for segments */
.segment-thai {
  background: linear-gradient(to top, var(--primary-dark), var(--primary));
}

.segment-foreign {
  background: linear-gradient(to top, #d97706, #fbbf24);
}

/* CSS-Only Tooltips */
.bar-segment::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: rgba(15, 23, 42, 0.95);
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-family: inherit;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 100;
}

.bar-segment::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(15, 23, 42, 0.95) transparent transparent transparent;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
}

.bar-segment:hover::after,
.bar-segment:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-6px);
}

.bar-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 8px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 16px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

/* Insights Content Styling */
.insights-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  height: 100%;
}

.insight-block {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
  padding: 20px;
}

.insight-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.insight-badge {
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(250, 204, 21, 0.15);
  color: var(--secondary);
  padding: 3px 8px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.insight-block h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.insight-block p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  margin-top: 6px;
  margin-bottom: 0;
}

/* Insurance Progress Bar Styles */
.scheme-progress-wrap {
  margin-top: 12px;
}

.scheme-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
}

.progress-bar-light {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--primary), var(--secondary));
  border-radius: 10px;
  width: 0%;
  transition: width 1.2s cubic-bezier(0.1, 0.8, 0.25, 1);
}

.scheme-desc {
  font-size: 0.82rem !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Bed Occupancy Layout */
.occupancy-trend-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.occupancy-trend-container h4 {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 4px 0;
}

.occupancy-bar-group {
  display: flex;
  flex-direction: column;
}

.occupancy-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 6px;
  font-weight: 500;
}

.occupancy-label-row strong {
  color: var(--secondary);
}

/* IPD Schemes Section */
.ipd-schemes-section {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
}

.ipd-schemes-section h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 16px;
}

.ipd-scheme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ipd-scheme-column h5 {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0;
  margin-bottom: 12px;
}

.scheme-progress-mini {
  margin-bottom: 10px;
}

.mini-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.badge-percent {
  font-weight: 700;
  color: #ffffff;
}

.mini-progress {
  height: 5px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

.mini-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  width: 0%;
  transition: width 1s ease-out;
}

.mini-fill.segment-foreign {
  background: #d97706;
}

/* Disease Grid Comparative Columns */
.diseases-layout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.disease-list-card {
  border-radius: var(--radius-md);
  padding: 16px;
}

.general-disease {
  background: rgba(37, 99, 235, 0.05);
  border: 1px solid rgba(37, 99, 235, 0.12);
}

.death-disease {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.12);
}

.disease-list-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.general-disease .disease-list-title {
  color: #ff7bb7;
}

.death-disease .disease-list-title {
  color: #f87171;
}

.disease-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.disease-list li {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.rank {
  width: 18px;
  height: 18px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  flex-shrink: 0;
}

.general-disease .rank {
  background: rgba(37, 99, 235, 0.2);
  color: #f3d6fa;
}

.death-disease .rank {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

/* Clinical alert */
.clinical-insight-alert {
  background: rgba(250, 204, 21, 0.05);
  border: 1px solid rgba(250, 204, 21, 0.12);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.clinical-insight-alert i {
  color: var(--secondary);
  font-size: 1.1rem;
  margin-top: 2px;
}

.clinical-insight-alert p {
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* High Contrast Mode for stats */
.high-contrast .stats-banner {
  background: #000000;
  color: #ffffff;
  border-bottom: 2px solid #ffffff;
}

.high-contrast .stats-banner h2 {
  color: #ffff00;
}

.high-contrast .stats-tab-btn {
  background: #000000;
  border: 2px solid #ffffff;
  color: #ffffff;
}

.high-contrast .stats-tab-btn.active {
  background: #ffff00;
  border-color: #ffff00;
  color: #000000;
}

.high-contrast .stats-kpi-card {
  background: #000000;
  border: 2px solid #ffffff;
}

.high-contrast .stat-number {
  -webkit-text-fill-color: #ffff00 !important;
  color: #ffff00;
}

.high-contrast .kpi-unit, 
.high-contrast .kpi-label {
  color: #ffffff;
}

.high-contrast .stats-card-main {
  background: #000000;
  border: 2px solid #ffffff;
}

.high-contrast .segment-thai {
  background: #ffffff;
  border: 1px solid #000000;
}

.high-contrast .segment-foreign {
  background: #ffff00;
  border: 1px solid #000000;
}

.high-contrast .disease-list-card {
  border: 2px solid #ffffff;
  background: #000000;
}

.high-contrast .general-disease .disease-list-title {
  color: #ffffff;
}

.high-contrast .death-disease .disease-list-title {
  color: #ffff00;
}

.high-contrast .clinical-insight-alert {
  border: 2px solid #ffff00;
  background: #000000;
}

.high-contrast .clinical-insight-alert p {
  color: #ffffff;
}

/* Media Queries for Stats Dashboard */
@media (max-width: 1024px) {
  .stats-kpi-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .stats-charts-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .stats-tab-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .stats-tab-btn {
    justify-content: center;
  }
  
  .custom-chart-container {
    height: 220px;
  }
  
  .chart-bar-group {
    width: 60px;
  }
  
  .ipd-scheme-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .diseases-layout-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.stat-label {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: #f3d6fa;
}

/* Welcome Director Card Section */
.director-section {
  position: relative;
  background-image: linear-gradient(135deg, rgba(132, 51, 156, 0.96), rgba(35, 5, 52, 0.88)), url('assets/hospital_hero.png');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #ffffff;
  overflow: hidden;
  padding: 40px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.high-contrast .director-section {
  background-image: linear-gradient(135deg, rgba(10, 15, 29, 0.98), rgba(17, 24, 39, 0.96)), url('assets/hospital_hero.png');
  background-attachment: fixed;
  color: #ffffff;
}

.director-grid {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 32px;
  align-items: flex-start;
}

.director-img-wrap {
  position: relative;
  transition: var(--transition);
  margin-top: 0;
  max-width: 480px;
  width: 100%;
}

.director-img-wrap::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid var(--accent);
  border-radius: var(--radius-md);
  top: 15px;
  left: -15px;
  z-index: 1;
  transition: var(--transition);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
}

.director-img {
  width: 100%;
  border-radius: var(--radius-md);
  position: relative;
  z-index: 2;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.25);
  transition: var(--transition);
}

.director-img img {
  width: 100%;
  height: 550px;
  object-fit: cover;
  object-position: center 10%;
  transition: var(--transition);
  image-rendering: -webkit-optimize-contrast; /* Optimizes contrast and sharpness */
  filter: contrast(1.04) brightness(1.02) saturate(1.02); /* Enhances micro-contrast and color clarity */
}

.director-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0) 35%, rgba(132, 51, 156, 0.12) 75%, rgba(35, 5, 52, 0.28) 100%);
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: multiply;
  transition: var(--transition);
}

/* Hover effect for 3D depth */
.director-img-wrap:hover {
  transform: translateY(-8px);
}

.director-img-wrap:hover::before {
  top: -10px;
  left: 10px;
  border-color: var(--secondary);
  box-shadow: 0 0 25px rgba(255, 81, 163, 0.5);
}

.director-img-wrap:hover .director-img {
  border-color: #ffffff;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.director-img-wrap:hover .director-img img {
  transform: scale(1.05);
}

.director-signature-overlay {
  position: absolute;
  bottom: 15px;
  left: 15px;
  right: 15px;
  background: rgba(35, 5, 52, 0.75); /* Frosted Midnight Plum */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  text-align: center;
  z-index: 5;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  transition: var(--transition);
}

.director-signature-overlay h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  font-family: var(--font-heading);
  letter-spacing: 0.5px;
}

.director-signature-overlay p {
  font-size: 0.9rem;
  color: #ffccd8;
  font-weight: 500;
  margin-bottom: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  font-family: var(--font-body);
  letter-spacing: 0.3px;
}

.director-img-wrap:hover .director-signature-overlay {
  background: rgba(35, 5, 52, 0.85);
  border-color: rgba(255, 81, 163, 0.3); /* Neon pink border glow */
  box-shadow: 0 12px 35px rgba(255, 81, 163, 0.15), 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  transform: translateY(-4px); /* Hover float up animation */
}

.director-message {
  padding-left: 0;
}

.director-message h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.director-message .section-subtitle {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 1.5px;
  font-size: 0.9rem;
  margin-bottom: 12px;
  display: block;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.director-role {
  color: var(--secondary-light);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.15rem;
  margin-bottom: 24px;
  display: block;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.director-quote {
  font-size: 1.15rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 30px;
  padding-left: 20px;
  border-left: 4px solid var(--accent);
  font-style: italic;
  position: relative;
}

.director-quote::before {
  content: '\201C';
  font-size: 4rem;
  position: absolute;
  left: -10px;
  top: -25px;
  opacity: 0.15;
  font-family: Georgia, serif;
}

.director-signature {
  font-family: var(--font-heading);
}

.director-signature h4 {
  font-size: 1.15rem;
  color: #ffffff;
}

.director-signature p {
  font-size: 0.85rem;
  color: var(--secondary-light);
}

.director-vision-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}

.vision-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.vision-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--accent);
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.25);
}

.vision-icon {
  font-size: 2rem;
  color: var(--accent);
  transition: var(--transition);
}

.vision-card:hover .vision-icon {
  transform: scale(1.1);
  color: #ffffff;
  text-shadow: 0 0 10px var(--accent);
}

.vision-card-content h4 {
  font-size: 1.05rem;
  color: #ffffff;
  margin-bottom: 6px;
  font-weight: 600;
}

.vision-card-content p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.director-stats-bar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  background: rgba(132, 51, 156, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 24px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.director-stat-box {
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.director-stat-box:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.director-stat-box .stat-num {
  font-size: 1.6rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--accent);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.director-stat-box .stat-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-heading);
}

/* --- Interactive Contact & Location Section --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.contact-info-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 24px;
  border-radius: var(--radius-md);
  display: flex;
  gap: 20px;
  box-shadow: var(--shadow-sm);
}

.contact-icon {
  width: 50px;
  height: 50px;
  background-color: var(--primary-light);
  color: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.contact-details h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.contact-details p, .contact-details a {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.map-wrapper {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 4px solid #ffffff;
  height: 100%;
  min-height: 380px;
}

.map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- ITA & Public Badges (Government Standards) --- */
/* --- Government Awards & Accreditations (Government Standards) --- */
.gov-badges {
  background-color: var(--primary-light);
  padding: 60px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

/* --- Interactive Achievement Timeline --- */
.timeline-container {
  position: relative;
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 20px 0;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--primary), var(--secondary), var(--primary-light));
  transform: translateX(-50%);
  border-radius: 2px;
  z-index: 1;
}

.timeline-item {
  position: relative;
  width: 50%;
  padding: 10px 20px;
  box-sizing: border-box;
  z-index: 2;
}

.timeline-item.left {
  left: 0;
}

.timeline-item.right {
  left: 50%;
}

/* Timeline Badge (Year marker) */
.timeline-badge {
  position: absolute;
  top: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 4px solid var(--primary);
  color: var(--primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow-md);
  z-index: 10;
  transition: var(--transition);
}

.timeline-item.left .timeline-badge {
  right: -30px;
}

.timeline-item.right .timeline-badge {
  left: -30px;
}

.timeline-item:hover .timeline-badge {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--secondary);
  box-shadow: var(--shadow-glow);
  transform: scale(1.1);
}

/* Timeline Card (Horizontal Split on Desktop) */
.timeline-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  gap: 20px;
  overflow: hidden;
  max-width: 550px;
  align-items: center;
}

.timeline-item.left .timeline-card {
  margin-left: auto;
  flex-direction: row-reverse; /* Text left, Image right (close to center line) */
}

.timeline-item.right .timeline-card {
  margin-right: auto;
  flex-direction: row; /* Image left, Text right (close to center line) */
}

.timeline-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg), 0 0 15px rgba(132, 51, 156, 0.05);
  border-color: var(--primary);
}

.timeline-img-wrap {
  width: 150px;
  height: 200px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background-color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.timeline-img-wrap img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transition: transform 0.4s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.timeline-card:hover .timeline-img-wrap img {
  transform: scale(1.05);
}

.timeline-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-item.left .timeline-info {
  text-align: right;
  align-items: flex-end;
}

.timeline-item.right .timeline-info {
  text-align: left;
  align-items: flex-start;
}

.ita-logo-wrap {
  background: radial-gradient(circle, rgba(132, 51, 156, 0.05) 0%, rgba(255, 255, 255, 1) 75%);
  padding: 20px;
  box-sizing: border-box;
}

.ita-logo-img {
  width: auto !important;
  height: 85% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 8px rgba(132, 51, 156, 0.15));
}

.timeline-date {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.timeline-info h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary-dark);
  line-height: 1.45;
  margin: 0;
  font-family: var(--font-heading);
}

.high-contrast .timeline-info h4 {
  color: var(--primary);
}

.timeline-info p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* High Contrast Timeline Styling */
.high-contrast .timeline-line {
  background: #ffffff;
}

.high-contrast .timeline-badge {
  background: #000000;
  border: 3px solid #ffffff;
  color: #ffffff;
}

.high-contrast .timeline-card {
  border: 2px solid #ffffff;
  background: #000000;
  color: #ffffff;
}

.high-contrast .timeline-card:hover {
  border-color: var(--accent);
}

.high-contrast .timeline-item:hover .timeline-badge {
  background: var(--accent);
  color: #000000;
  border-color: #ffffff;
}

/* --- Awards Horizontal Marquee Styles --- */
.awards-marquee-container {
  overflow: hidden;
  width: 100%;
  padding: 10px 0 30px;
  position: relative;
}

/* Fading gradients at edges */
.awards-marquee-container::before,
.awards-marquee-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 150px;
  z-index: 2;
  pointer-events: none;
}
.awards-marquee-container::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-base) 0%, rgba(255, 255, 255, 0) 100%);
}
.awards-marquee-container::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-base) 0%, rgba(255, 255, 255, 0) 100%);
}
.dark-mode .awards-marquee-container::before {
  background: linear-gradient(to right, var(--bg-base-dark, #121212) 0%, rgba(18, 18, 18, 0) 100%);
}
.dark-mode .awards-marquee-container::after {
  background: linear-gradient(to left, var(--bg-base-dark, #121212) 0%, rgba(18, 18, 18, 0) 100%);
}

.awards-marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-slide 60s linear infinite;
}

.awards-marquee-track:hover {
  animation-play-state: paused;
}

.award-marquee-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  gap: 20px;
  width: 450px;
  align-items: center;
  flex-shrink: 0;
  white-space: normal;
  text-align: left;
  margin: 10px 12px;
  box-sizing: border-box;
}

.award-marquee-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg), 0 0 15px rgba(132, 51, 156, 0.05);
  border-color: var(--primary);
}

.award-marquee-card .timeline-img-wrap {
  width: 120px;
  height: 160px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background-color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.award-marquee-card .timeline-img-wrap img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transition: transform 0.4s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.award-marquee-card:hover .timeline-img-wrap img {
  transform: scale(1.05);
}

.award-marquee-card .timeline-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.award-marquee-card .award-marquee-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 10px;
  background-color: var(--primary-light);
  color: var(--primary);
  border-radius: 50px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  margin-bottom: 2px;
}

.high-contrast .award-marquee-card {
  border: 2px solid #ffffff;
  background: #000000;
  color: #ffffff;
}

.high-contrast .award-marquee-card:hover {
  border-color: var(--accent);
}

.high-contrast .award-marquee-card .award-marquee-badge {
  background-color: var(--primary);
  color: white;
}

.high-contrast .award-marquee-card .timeline-img-wrap {
  border-color: #ffffff;
  background-color: #000000;
}

@keyframes marquee-slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive Overrides for Marquee */
@media (max-width: 576px) {
  .award-marquee-card {
    width: 310px;
    padding: 12px;
    gap: 12px;
    margin: 8px 8px;
  }
  .award-marquee-card .timeline-img-wrap {
    width: 90px;
    height: 120px;
  }
  .award-marquee-card h4 {
    font-size: 0.95rem;
  }
  .award-marquee-card p {
    font-size: 0.78rem;
    line-height: 1.4;
  }
  .award-marquee-card .timeline-date {
    font-size: 0.72rem;
  }
  .awards-marquee-container::before,
  .awards-marquee-container::after {
    width: 50px;
  }
}

/* --- Hero Banner (Event/PR Slideshow) --- */
/* Two-layer "poster stage": a blurred full-bleed backdrop (layer 1, may be
   cropped — it's decorative only) behind a never-cropped object-fit:contain
   foreground image (layer 2, layout height is driven by viewport height,
   not by container width, so tall poster banners never blow up taller
   than the screen). Slides admin-flagged displayMode "cover" (see
   .hero-banner-slide--cover below) skip the backdrop and crop full-bleed
   instead, for future wide/landscape banners. */
.hero-banner-section {
  width: 100%;
  background-color: var(--bg-base);
}

.hero-banner-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: clamp(560px, calc(100svh - 100px), 860px);
}

.hero-banner-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-banner-slide {
  position: relative;
  min-width: 100%;
  height: 100%;
  flex-shrink: 0;
  display: block;
  overflow: hidden;
  background-color: #111;
}

/* Blurred, scaled-up copy of the same image fills the box so tall/portrait
   banners never get letterboxed or cropped-away on the sides */
.hero-banner-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(25px) brightness(0.7);
  transform: scale(1.15);
}

.hero-banner-slide img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* displayMode: "cover" — full-bleed crop, no backdrop needed since the
   image itself already fills the box edge-to-edge (for wide/landscape
   banners where losing some edge content is acceptable) */
.hero-banner-slide--cover .hero-banner-slide-bg {
  display: none;
}

.hero-banner-slide--cover img {
  object-fit: cover;
}

/* <picture> is only a source-selection wrapper here — it must not add its
   own box to the layout the img/backdrop stacking already relies on */
.hero-banner-slide picture {
  display: contents;
}

/* Banner has BOTH a desktop_image_url and a mobile_image_url: below 992px
   the <picture> swaps in the mobile poster file and this behaves exactly
   like the default poster mode (contain + blurred backdrop, inherited,
   no override needed here). At 992px+ the <picture> has already swapped
   to the desktop-landscape file, which was designed edge-to-edge with a
   safe area (see admin upload panel), so it's shown full-bleed with no
   backdrop needed. */
@media (min-width: 992px) {
  .hero-banner-slide--split .hero-banner-slide-bg {
    display: none;
  }
  .hero-banner-slide--split img {
    object-fit: cover;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner-track {
    transition: none;
  }
}

/* Tablet / small laptop: shorter viewport height budget than desktop */
@media (min-width: 577px) and (max-width: 991px) {
  .hero-banner-slider {
    height: clamp(440px, calc(100svh - 90px), 720px);
  }
}

/* Short landscape viewports (rotated phones) */
@media (max-width: 991px) and (max-height: 560px) and (orientation: landscape) {
  .hero-banner-slider {
    height: calc(100svh - 64px);
    min-height: 320px;
  }
}

/* FullHD and up: keep the existing viewport-height cap */
@media (min-width: 1920px) {
  .hero-banner-slider {
    height: min(calc(100svh - 100px), 900px);
  }
}

.hero-banner-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}

.hero-banner-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: var(--transition);
}

.hero-banner-dot.active {
  background: #ffffff;
  width: 22px;
  border-radius: 5px;
}

.hero-banner-empty {
  display: none;
}

/* Mobile: the poster is already portrait, so don't force a viewport-height
   box — let it render at full width and its own natural (intrinsic) aspect
   ratio, which keeps text in the poster legible without a blurred backdrop
   eating into the limited screen space */
@media (max-width: 576px) {
  .hero-banner-slider,
  .hero-banner-track,
  .hero-banner-slide:not(.hero-banner-slide--cover) {
    height: auto;
  }
  .hero-banner-slide:not(.hero-banner-slide--cover) {
    width: 100%;
    background-color: #ffffff;
  }
  .hero-banner-slide:not(.hero-banner-slide--cover) .hero-banner-slide-bg {
    display: none;
  }
  .hero-banner-slide:not(.hero-banner-slide--cover) img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: initial;
  }

  .hero-banner-dots {
    bottom: 10px;
  }
}

/* --- Admin: Hero Banner desktop/mobile split-image upload panels --- */
.hero-img-panel {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 14px;
  background: #ffffff;
}

.hero-img-panel h5 {
  margin: 0 0 4px;
  color: var(--primary);
  font-size: 0.95rem;
}

.hero-img-panel-desc {
  margin: 0 0 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.hero-img-panel-hints {
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.hero-upload-btn {
  padding: 9px 18px;
  background: #ffffff;
  border: 1.5px solid #d1d5db;
  border-radius: 50px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: #374151;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: var(--transition);
}

.hero-upload-btn:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(109, 40, 217, 0.15);
}

.hero-upload-btn:focus-visible,
.hero-dropzone:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.hero-dropzone {
  border: 1.5px dashed var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  cursor: pointer;
  transition: var(--transition);
}

.hero-dropzone.drag-over {
  border-color: var(--primary);
  background: rgba(109, 40, 217, 0.06);
  color: var(--primary);
}

.hero-img-status {
  font-size: 0.75rem;
  min-height: 1.1em;
  margin-bottom: 6px;
  font-weight: 500;
}

.hero-img-status.status-ok {
  color: #059669;
}

.hero-img-status.status-warn {
  color: #d97706;
}

.hero-img-status.status-error {
  color: #dc2626;
}

.hero-img-preview-wrap {
  margin-top: 6px;
}

.hero-preview-box {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: repeating-conic-gradient(#f3f4f6 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;
}

.hero-preview-desktop {
  aspect-ratio: 1920 / 900;
}

.hero-preview-mobile {
  max-width: 180px;
  aspect-ratio: 1237 / 1750;
}

.hero-preview-img {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
}

.hero-preview-desktop .hero-preview-img {
  background-size: cover;
}

.hero-preview-mobile .hero-preview-img {
  background-size: contain;
}

.hero-safe-area {
  position: absolute;
  inset: 8% 9%;
  border: 1.5px dashed #fbbf24;
  pointer-events: none;
}

.hero-preview-caption {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.hero-preview-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.hero-preview-action-btn {
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.72rem;
  color: var(--text-main);
}

.hero-preview-action-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.hero-preview-action-btn.hero-preview-remove {
  color: #dc2626;
  border-color: #fecaca;
}

.hero-preview-action-btn.hero-preview-remove:hover {
  background: #fee2e2;
}

/* Legacy-banner notice badge in the admin banner list */
.hero-banner-legacy-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.68rem;
  font-weight: 600;
}

/* Narrow admin screens: stack the whole event-banner tab to one column
   (the flex-wrap on .admin-split-layout already handles this, this just
   keeps the two image panels themselves from overflowing) */
@media (max-width: 480px) {
  .hero-img-panel {
    padding: 10px;
  }
}

/* --- Lightbox Modal Styles --- */
.lightbox-modal {
  display: none;
  position: fixed;
  z-index: 2000;
  padding: 40px 16px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(11, 15, 25, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
}

/* Special translucent style for Awards Lightbox */
.lightbox-modal.awards-lightbox {
  background-color: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.lightbox-modal.awards-lightbox .lightbox-content {
  border: 4px solid var(--primary-light) !important;
  box-shadow: 0 20px 40px rgba(132, 51, 156, 0.15) !important;
}

.lightbox-modal.awards-lightbox .lightbox-close {
  color: var(--primary-dark) !important;
}

.lightbox-modal.awards-lightbox .lightbox-close:hover {
  color: var(--secondary) !important;
}

.lightbox-modal.awards-lightbox .lightbox-caption {
  color: var(--primary-dark) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6) !important;
}

/* High contrast / Dark mode support */
body.high-contrast .lightbox-modal.awards-lightbox {
  background-color: rgba(20, 2, 31, 0.65) !important;
}

body.high-contrast .lightbox-modal.awards-lightbox .lightbox-content {
  border: 4px solid var(--border-color) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

body.high-contrast .lightbox-modal.awards-lightbox .lightbox-close {
  color: #ffffff !important;
}

body.high-contrast .lightbox-modal.awards-lightbox .lightbox-close:hover {
  color: var(--primary) !important;
}

body.high-contrast .lightbox-modal.awards-lightbox .lightbox-caption {
  color: #ffffff !important;
  text-shadow: none !important;
}

.lightbox-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 4px solid #ffffff;
  box-shadow: var(--shadow-lg);
  animation: zoomEffect 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes zoomEffect {
  from {transform: scale(0.92); opacity: 0;}
  to {transform: scale(1); opacity: 1;}
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 32px;
  color: #ffffff;
  font-size: 3rem;
  font-weight: 300;
  cursor: pointer;
  transition: var(--transition);
  line-height: 1;
}

.lightbox-close:hover {
  color: var(--secondary);
}

.lightbox-caption {
  margin: 15px auto 0;
  text-align: center;
  color: #f8fafc;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.05rem;
  max-width: 90%;
  line-height: 1.4;
}

/* ปุ่มเลื่อนภาพของ lightbox ตอนเปิดจากแกลเลอรีข่าว (ดู openGalleryLightbox) */
.lightbox-nav {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 1.2rem;
  cursor: pointer;
  transform: translateY(-50%);
  transition: var(--transition);
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-nav[hidden] {
  display: none;
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

@media (max-width: 600px) {
  .lightbox-nav {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .lightbox-prev {
    left: 6px;
  }

  .lightbox-next {
    right: 6px;
  }
}

/* Responsive for Timeline */
@media (max-width: 991px) {
  .timeline-line {
    left: 40px;
  }
  
  .timeline-item {
    width: 100%;
    padding-left: 80px;
    padding-right: 20px;
  }
  
  .timeline-item.left {
    left: 0;
  }
  
  .timeline-item.right {
    left: 0;
  }
  
  .timeline-badge {
    left: 10px !important;
    right: auto !important;
    width: 50px;
    height: 50px;
    font-size: 0.95rem;
    top: 24px;
  }
  
  .timeline-card {
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
}

/* --- Footer --- */
footer {
  background-color: #f6f3f8;
  color: var(--text-main);
  padding: 40px 0 16px;
  font-size: 0.88rem;
  border-top: 1px solid var(--border-color);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  margin-bottom: 28px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo-img-wrap {
  width: 46px;
  height: 46px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
  transition: var(--transition);
}

.footer-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-logo h3 {
  color: var(--primary-dark);
  font-size: 1.1rem;
}

.footer-brand p {
  color: var(--text-muted);
  line-height: 1.55;
  font-size: 0.84rem;
}

.social-links {
  display: flex;
  gap: 12px;
}

.social-btn {
  width: 36px;
  height: 36px;
  background-color: rgba(132, 51, 156, 0.06);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: var(--transition);
}

.social-btn:hover {
  background-color: var(--secondary);
  color: #ffffff;
  transform: translateY(-3px);
}

.footer-links h3, .footer-gallery h3 {
  color: var(--primary-dark);
  font-size: 0.95rem;
  margin-bottom: 12px;
  position: relative;
  padding-bottom: 8px;
  font-family: var(--font-heading);
}

.footer-links h3::after, .footer-gallery h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background-color: var(--secondary);
  border-radius: 3px;
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-nav a {
  color: var(--text-muted);
}

.footer-nav a:hover {
  color: var(--secondary);
  padding-left: 6px;
}

.visitor-stats {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 20px;
}

.visitor-stats h4 {
  color: #ffffff;
  font-size: 0.95rem;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.visitor-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  font-size: 0.85rem;
}

.visitor-stat-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.visitor-stat-row span:last-child {
  font-family: var(--font-heading);
  color: #ffffff;
  font-weight: 500;
}

.footer-bottom {
  border-top: 1px solid rgba(132, 51, 156, 0.1);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 10px;
}

.footer-bottom-links {
  display: flex;
  gap: 20px;
}

.footer-bottom-links a {
  color: var(--text-muted);
}

.footer-bottom-links a:hover {
  color: var(--secondary);
}

/* Developer Credit Styles */
.footer-bottom-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-dev-credit {
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.75;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity var(--transition);
}

.footer-dev-credit:hover {
  opacity: 1;
}

.footer-dev-credit i {
  color: var(--secondary);
  font-size: 0.7rem;
}

.footer-dev-credit .dev-name {
  color: var(--text-main);
  font-weight: 500;
}


/* --- Pulse & Animations Keyframes --- */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Optimize desktop navigation on smaller desktop/laptop screens to prevent wrapping */
@media (min-width: 992px) and (max-width: 1536px) {
  .header-main .container {
    width: 98%;
  }
  .nav-container {
    padding: 8px 0;
  }
  .nav-links {
    gap: 3px;
  }
  .nav-links a {
    padding: 4px 5px;
    font-size: 0.95rem;
    white-space: nowrap;
  }
  .logo-section {
    gap: 10px;
    flex-shrink: 0;
  }
  .logo-img-wrap {
    width: 5.2rem;
    height: 5.2rem;
    top: -8px;
    border-radius: 50%;
    padding: 2px;
    border: 2px solid #ffffff;
  }
  .logo-text {
    padding-left: 6.0rem;
  }
  .logo-text h1 {
    font-size: 1.55rem;
    white-space: nowrap;
  }
  .logo-text p {
    display: block;
    font-size: 0.75rem;
    margin-top: 2px;
  }
  .nav-cta {
    padding: 5px 10px !important;
  }
}

/* Hide redundant logo text on narrow screens (992px - 1200px) to prevent layout wrapping and keep all menus visible */
@media (min-width: 992px) and (max-width: 1200px) {
  .logo-text {
    display: none !important;
  }
  .logo-section {
    width: 10.0rem;
    height: 5.2rem;
  }
}

/* --- Responsive Media Queries --- */
@media (max-width: 991px) {
  .nav-container {
    padding: 10px 0;
  }
  .nav-links {
    display: none; /* Mobile menu logic in JS */
  }
  
  /* Mobile Responsive Navbar styling */
  .nav-links.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    padding: 24px;
    gap: 16px;
    box-shadow: var(--shadow-lg);
  }
  
  /* Mobile Dropdown Overrides */
  .nav-links li.dropdown {
    width: 100%;
  }

  .nav-links li.dropdown .nav-arrow {
    float: right;
    margin-top: 6px;
    transition: transform 0.25s ease;
  }

  .dropdown-menu-custom {
    display: none;
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    box-shadow: none;
    border: none;
    background-color: var(--primary-light);
    border-radius: var(--radius-sm);
    margin-top: 8px;
    padding: 6px 0;
    min-width: 100%;
    width: 100%;
    transition: none;
  }

  /* Show dropdown when active-mobile is toggled */
  .nav-links li.dropdown.active-mobile .dropdown-menu-custom {
    display: block;
  }

  .dropdown-menu-custom li a {
    padding: 10px 20px !important;
    font-size: 0.95rem !important;
  }
  
  .menu-toggle {
    display: block;
  }

  .logo-img-wrap {
    width: 5.2rem;
    height: 5.2rem;
    top: -8px;
    border-radius: 50%;
    padding: 2px;
    border: 2px solid #ffffff;
  }
  .logo-text {
    padding-left: 6.0rem;
  }
  .logo-text h1 {
    font-size: 1.50rem;
    white-space: nowrap;
  }
  .logo-text p {
    font-size: 0.8rem;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .services-grid .service-card.highlighted {
    grid-column: span 2;
  }
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .image-frame {
    height: 450px;
  }
  .director-vision-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-box::after {
    display: none;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .nav-container {
    padding: 8px 0;
  }
  .logo-img-wrap {
    width: 3.8rem;
    height: 3.8rem;
    padding: 0;
    top: -6px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
    flex-shrink: 0;
  }
  .logo-text {
    padding-left: 4.6rem;
  }
  .logo-text h1 {
    font-size: 1.3rem;
    white-space: nowrap;
  }
  .logo-text p {
    font-size: 0.7rem;
  }
  .hero-title {
    font-size: 1.8rem;
  }
  .image-frame {
    height: 360px;
  }
  .services-grid {
    grid-template-columns: 1fr;
  }
  .services-grid .service-card.highlighted {
    grid-column: span 1;
    flex-direction: column;
    text-align: center;
  }
  .news-grid {
    grid-template-columns: 1fr;
  }
  .director-section {
    background-attachment: scroll;
    padding: 40px 0;
  }
  .director-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: stretch;
  }
  .director-img-wrap {
    margin: 0 auto;
  }
  .director-img-wrap::before {
    display: none;
  }
  .director-img img {
    height: 380px;
  }
  .director-vision-grid {
    grid-template-columns: 1fr;
  }
  .director-stats-bar {
    flex-direction: column;
    gap: 16px;
    padding: 20px;
  }
  .director-stat-box:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .badges-flex {
    flex-direction: column;
  }
}


/* --- Doctor Schedule Roster Styles --- */
.doctor-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  text-align: center;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.doctor-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}

.doctor-avatar-wrap {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border: 3px solid var(--border-color);
  overflow: hidden;
  color: var(--primary);
  font-size: 2.5rem;
  position: relative;
}

.doctor-avatar-img {
  position: absolute;
  inset: 0;           /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%; /* default focal point — JS overrides per doctor */
  display: block;
  transform-origin: center 22%; /* default — JS overrides per doctor */
}

/* Handle FontAwesome SVG/i element vs. Image displaying correctly based on .no-image */
.doctor-avatar-wrap .doctor-avatar-img {
  display: block;
}
.doctor-avatar-wrap .fallback-icon,
.doctor-avatar-wrap svg {
  display: none !important;
}
.doctor-avatar-wrap.no-image .doctor-avatar-img {
  display: none !important;
}
.doctor-avatar-wrap.no-image .fallback-icon,
.doctor-avatar-wrap.no-image svg {
  display: block !important;
}

.doctor-name {
  font-size: 1.15rem;
  font-family: var(--font-heading);
  color: var(--text-main);
  margin-bottom: 4px;
  font-weight: 600;
}

.doctor-title {
  font-size: 0.9rem;
  color: var(--primary);
  font-weight: 500;
  margin-bottom: 8px;
}

.doctor-time {
  font-size: 0.85rem;
  color: var(--text-muted);
  background-color: transparent;
  margin-bottom: 10px;
  width: 100%;
}

.status-badge {
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: bold;
}

.status-badge.on-duty {
  background-color: #d1fae5;
  color: #065f46;
}

.status-badge.off-duty {
  background-color: #f3f4f6;
  color: #374151;
}

/* ==========================================================================
   ตารางแพทย์ — ใช้ FC Minimal ทั้งส่วน
   FC Minimal มีไฟล์จริงแค่ 2 น้ำหนัก คือ 400 กับ 700 (สั่ง 500 จะได้ 400
   สั่ง 600 จะได้ 700) จึงกำหนดเฉพาะสองน้ำหนักนี้ ไม่สั่ง 500/600 อีก
   เพื่อให้ผลลัพธ์ตรงกับที่เขียนไว้จริง
   และตัวอักษรไทยของ FC Minimal เตี้ยกว่า IBM Plex Sans Thai Looped ~30%
   (วัดที่ 100px: สูง 43 เทียบ 56) ทุกขนาดในส่วนนี้จึงถูกขยายขึ้นตาม
   เพื่อให้อ่านได้เท่าเดิม
   ========================================================================== */
#doctor-schedule,
#doctor-schedule input,
#doctor-schedule select,
#doctor-schedule button,
#doctor-schedule label {
  font-family: var(--font-heading);
}

#doctor-schedule .doctor-name {
  font-size: 1.2rem;
  font-weight: 700;
}

#doctor-schedule .doctor-title {
  font-size: 1.05rem;
  font-weight: 400;
}

/* ป้ายสถานะออกตรวจ + เวลา ในการ์ดแพทย์ */
#doctor-schedule .duty-badge {
  font-size: 1rem;
  font-weight: 700;
}

#doctor-search-results-count {
  font-size: 0.95rem;
  font-weight: 700;
}

#doctor-schedule label {
  font-size: 1.05rem;
  font-weight: 700;
}

#doctor-schedule .search-input {
  font-size: 1rem;
}

#doctor-schedule .search-btn {
  font-size: 0.95rem;
  font-weight: 700;
}

#doctor-search-dept {
  font-size: 1rem;
  font-weight: 400;
}

#calendar-month-year {
  font-size: 1rem;
  font-weight: 700;
}

#doctor-schedule .calendar-weekdays {
  font-size: 0.85rem;
  font-weight: 700;
}

#doctor-schedule .calendar-day-btn {
  font-size: 0.95rem;
  font-weight: 400;
}

/* วันนี้และวันที่ถูกเลือกใช้ 700 ซึ่งเป็นไฟล์ Bold จริงของ FC Minimal
   แทนตัวหนาที่เบราว์เซอร์สังเคราะห์ขึ้นเองแบบเดิม */
#doctor-schedule .calendar-day-btn.today,
#doctor-schedule .calendar-day-btn.selected {
  font-weight: 700;
}

#selected-date-indicator {
  font-size: 0.9rem;
  font-weight: 700;
}

/* High Contrast adjustments for Doctor Card */
.high-contrast .doctor-card {
  background-color: var(--bg-surface);
  border: 2px solid var(--border-color);
}
.high-contrast .doctor-card:hover {
  background-color: var(--primary-light);
}
.high-contrast .doctor-avatar-wrap {
  background-color: var(--bg-base);
  border: 2px solid var(--border-color);
  color: var(--accent);
}
.high-contrast .doctor-time {
  background-color: var(--bg-surface);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}
.high-contrast .status-badge.on-duty {
  background-color: var(--accent);
  color: var(--bg-base);
}
.high-contrast .status-badge.off-duty {
  background-color: var(--bg-base);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}


/* --- Mock Admin Modal Styles --- */
.admin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: none; /* Controlled by JS */
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.admin-modal-overlay.active {
  display: flex;
}

.admin-modal-container {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  width: 100%;
  max-width: 1150px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  overflow: hidden;
}

.admin-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-base);
}

h2.admin-modal-title-text {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
}

.admin-modal-title {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--primary);
  flex-wrap: wrap;
}

.admin-modal-title i {
  font-size: 1.5rem;
}

.status-badge {
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.status-badge.online {
  background-color: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge.offline {
  background-color: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.admin-modal-title h2 {
  font-size: 1.25rem;
  font-family: var(--font-heading);
  margin: 0;
}

.admin-modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  line-height: 1;
}

.admin-modal-close:hover {
  color: var(--accent);
}

/* Tabs */
.admin-tabs {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  /* Firefox ไม่รองรับ ::-webkit-scrollbar จึงต้องสั่งสีผ่านสองบรรทัดนี้ */
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--primary-light);
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-color);
  padding: 0 12px;
}
/* แถบเลื่อนของแท็บ: มีแท็บมากกว่าที่จอกว้างพอจะแสดงได้เสมอ แถบนี้จึงเป็น
   ตัวบอกว่ายังมีแท็บซ่อนอยู่ ของเดิมสูง 6px สีเทาเท่าเส้นขอบ แทบมองไม่เห็น
   จึงเปลี่ยนเป็นสีหลักของเว็บ หนาขึ้น และมีรางอ่อนๆ ให้เห็นระยะที่เลื่อนได้
   min-width กันไม่ให้แท่งสั้นจนคลิกลากยากเมื่อแท็บเยอะ */
.admin-tabs::-webkit-scrollbar {
  height: 10px;
}
.admin-tabs::-webkit-scrollbar-track {
  background: var(--primary-light);
  border-radius: 999px;
}
.admin-tabs::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 999px;
  min-width: 48px;
}
.admin-tabs::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-dark);
}
.admin-tabs::-webkit-scrollbar-thumb:active {
  background-color: var(--secondary);
}

.admin-tab-btn {
  background: none;
  border: none;
  padding: 14px 20px;
  font-size: 0.95rem;
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.admin-tab-btn:hover {
  color: var(--primary);
  background-color: rgba(30, 64, 175, 0.05);
}

.admin-tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* Tab Content */
.admin-tab-contents {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.admin-tab-pane {
  display: none;
}

.admin-tab-pane.active {
  display: block;
}

/* Split layout for Navbar tab */
.admin-split-layout {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

/* Input Fields styling */
.admin-tab-contents input,
.admin-tab-contents select,
.admin-tab-contents textarea {
  color: var(--text-main);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  transition: var(--transition);
}

.admin-tab-contents input:focus,
.admin-tab-contents select:focus,
.admin-tab-contents textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

/* Item listing inside Admin list */
.admin-item-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9rem;
}

.admin-item-list li:last-child {
  border-bottom: none;
}

.admin-item-list li span {
  font-weight: 500;
}

.admin-item-list li .menu-info {
  display: flex;
  flex-direction: column;
}

.admin-item-list li .menu-info small {
  color: var(--text-muted);
}

.admin-delete-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.admin-delete-btn:hover {
  background-color: #fee2e2;
}

.admin-delete-btn.disabled,
.admin-delete-btn:disabled {
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.5;
}

.admin-delete-btn.disabled:hover,
.admin-delete-btn:disabled:hover {
  background-color: transparent;
}

.admin-edit-btn {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.admin-edit-btn:hover {
  background-color: var(--primary-light);
}

/* Category key is locked while editing (news items reference it) */
#cat-key:disabled {
  background: var(--bg-base);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Pending Badge Notification */
.badge-pending {
  background-color: var(--accent);
  color: white;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: bold;
}

/* Table styling for approvals */
.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  /* 1rem, not the old 0.9rem: FC Minimal's Thai glyphs are ~30% shorter than
     the body face these tables used to be set in. */
  font-size: 1rem;
}

.admin-table tbody tr:hover {
  background-color: var(--primary-light);
}

/* Admin › จัดซื้อจัดจ้าง — same reasoning as the audit pane: these are
   scanned, and .admin-table's 0.9rem is set on the cells, so only a rule at
   cell level can override it. */
#pane-procurement .admin-table th,
#pane-procurement .admin-table td {
  padding: 6px 10px;
  font-size: 0.88rem;
  line-height: 1.45;
  vertical-align: top;
}

/* ==========================================================================
   หน้าจัดการหลังบ้านทั้งหมด — FC Minimal
   ทุกแท็บใช้ฟอนต์หัวเรื่องของเว็บ (FC Minimal) เป็นฟอนต์เดียวกันหมด
   ข้อเท็จจริงสองข้อที่วัดไว้เป็นตัวกำหนดขนาดด้านล่าง: FC Minimal มีไฟล์จริง
   แค่น้ำหนัก 400 กับ 700 (สั่ง 500 จะได้ 400, สั่ง 600 จะได้ 700) และ
   ตัวอักษรไทยของมันเตี้ยกว่า IBM Plex ราว 30% ทุกขนาดจึงถูกขยายขึ้น
   input/select/textarea/button ไม่สืบทอดฟอนต์เองตามมาตรฐานเบราว์เซอร์
   จึงต้องระบุชื่อไว้ในรายการนี้ด้วย
   ========================================================================== */
#admin-dashboard-wrapper,
#admin-dashboard-wrapper input,
#admin-dashboard-wrapper select,
#admin-dashboard-wrapper textarea,
#admin-dashboard-wrapper button,
#admin-dashboard-wrapper label,
#admin-dashboard-wrapper .ql-toolbar,
#admin-dashboard-wrapper .ql-toolbar button,
#admin-dashboard-wrapper .ql-toolbar .ql-picker,
#admin-dashboard-wrapper .ql-editor {
  font-family: var(--font-heading);
}

/* ข้อยกเว้นเดียว: คีย์สิทธิ์ รหัส MFA และ JSON ในประวัติการใช้งาน ต้องอ่าน
   ทีละตัวอักษรและเทียบคอลัมน์ให้ตรงกัน monospace ทำงานนี้ได้ดีกว่า */
#admin-dashboard-wrapper .audit-detail-value {
  font-family: monospace;
}

#admin-dashboard-wrapper h3 { font-size: 1.25rem; font-weight: 700; }
#admin-dashboard-wrapper h4 { font-size: 1.08rem; font-weight: 700; }
#admin-dashboard-wrapper h5 { font-size: 1rem;    font-weight: 700; }

#admin-dashboard-wrapper .pane-help {
  font-size: 0.95rem;
  font-weight: 400;
}

#admin-dashboard-wrapper label {
  font-size: 1.05rem;
  font-weight: 700;
}
/* ปุ่มเลือกไฟล์เขียนเป็น <label> เหมือนกัน แต่เป็นปุ่ม จึงเล็กกว่าชื่อช่อง */
#admin-dashboard-wrapper label[for$="-file"] {
  font-size: 0.95rem;
}

#admin-dashboard-wrapper input,
#admin-dashboard-wrapper select,
#admin-dashboard-wrapper textarea {
  font-size: 1rem;
  font-weight: 400;
}

#admin-dashboard-wrapper .admin-submit-btn {
  font-size: 1.05rem;
  font-weight: 700;
}
#admin-dashboard-wrapper .admin-btn {
  font-size: 0.95rem;
  font-weight: 700;
}
#admin-dashboard-wrapper .admin-tab-btn {
  font-size: 0.98rem;
}

/* ==========================================================================
   Admin › สร้างประกาศข่าวสาร — FC Minimal ทั้งแท็บ
   สองข้อเท็จจริงที่วัดไว้เป็นตัวกำหนดทุกขนาดด้านล่าง: FC Minimal มีไฟล์จริง
   แค่น้ำหนัก 400 กับ 700 (สั่ง 500 ได้ 400, สั่ง 600 ได้ 700) จึงไม่สั่ง
   น้ำหนักอื่นอีก และตัวอักษรไทยของมันเตี้ยกว่า IBM Plex ราว 30% ทุกขนาด
   จึงถูกขยายขึ้นเพื่อให้อ่านได้เท่าเดิม
   ขนาด/น้ำหนักที่เคยเขียนติดไว้ใน index.html ถูกย้ายมารวมที่นี่ เพราะค่า
   inline ทับ CSS เสมอ -- ยกเว้นขนาดของไอคอน ซึ่งเป็นรูปทรงไม่ใช่ตัวอักษร
   ========================================================================== */
#pane-announcement,
#pane-announcement input,
#pane-announcement select,
#pane-announcement textarea,
#pane-announcement button,
#pane-announcement label,
/* แถบเครื่องมือของ Quill มากับฟอนต์ของไลบรารีเอง (Helvetica Neue) ซึ่งไม่ใช่
   ฟอนต์ของเว็บนี้เลย ต้องระบุทับ */
#pane-announcement .ql-toolbar,
#pane-announcement .ql-toolbar button,
#pane-announcement .ql-toolbar .ql-picker,
#pane-announcement .ql-editor {
  font-family: var(--font-heading);
}

#pane-announcement h3 {
  font-size: 1.25rem;
  font-weight: 700;
}
#pane-announcement .pane-help {
  font-size: 0.95rem;
  font-weight: 400;
}

/* ชื่อช่องกรอก: 700 เป็นน้ำหนักเดียวเหนือปกติที่ FC Minimal มี และทำให้
   แยกจากข้อความที่พิมพ์ลงในช่องได้ชัดโดยไม่ต้องพึ่งสี */
#pane-announcement label {
  font-size: 1.05rem;
  font-weight: 700;
}
/* ปุ่มเลือกไฟล์เป็น <label> เหมือนกัน แต่เป็นปุ่ม จึงเล็กกว่าชื่อช่อง */
#pane-announcement label[for="ann-image-file"],
#pane-announcement label[for="ann-attachment-file"] {
  font-size: 0.95rem;
  font-weight: 700;
}

#pane-announcement input,
#pane-announcement select,
#pane-announcement textarea {
  font-size: 1rem;
  font-weight: 400;
}

/* เนื้อหาข่าวฉบับเต็ม -- ช่องนี้คือสิ่งที่ผู้อ่านจะได้เห็น จึงให้ใหญ่กว่า
   ช่องอื่นเล็กน้อยและเว้นบรรทัดกว้างขึ้นเพื่ออ่านง่ายระหว่างพิมพ์ */
#pane-announcement .ql-editor {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.7;
}

#pane-announcement p {
  font-size: 0.88rem;
  font-weight: 400;
}
#pane-announcement .upload-cta,
#pane-announcement #pdf-filename-label {
  font-size: 0.95rem;
  font-weight: 700;
}
#pane-announcement #img-toggle-label {
  font-size: 0.9rem;
  font-weight: 700;
}

#pane-announcement .admin-submit-btn,
#pane-announcement #btn-cancel-ann-edit {
  font-size: 1.05rem;
  font-weight: 700;
}

/* ==========================================================================
   แกลเลอรีภาพประกอบข่าว
   ส่วนแสดงผล (.ann-gallery, .ann-gallery-tile, ...) ใช้ทั้งหน้าข่าวจริงและ
   ช่องตัวอย่างในหลังบ้าน ส่วนจัดการ (.ann-gallery-editor-*, -thumb, -layout-*)
   อยู่ในฟอร์มสร้างประกาศเท่านั้น
   ========================================================================== */

/* --- ส่วนจัดการในฟอร์มสร้างประกาศ --- */
.ann-gallery-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ann-gallery-count {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.88rem;
}

.ann-gallery-editor-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 960px) {
  .ann-gallery-editor-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ann-gallery-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-base);
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}

.ann-gallery-dropzone:hover {
  border-color: var(--primary);
}

.ann-gallery-dropzone-icon {
  font-size: 2rem;
  color: var(--primary);
  opacity: 0.7;
}

/* พอมีภาพแล้ว กรอบวางไฟล์หดเหลือแถบเดียว ให้พื้นที่กับภาพย่อ */
.ann-gallery-dropzone.is-compact {
  flex-direction: row;
  flex-wrap: wrap;
  text-align: left;
  padding: 10px 14px;
}

.ann-gallery-dropzone.is-compact .ann-gallery-dropzone-icon {
  font-size: 1.4rem;
}

.ann-gallery-dropzone.is-compact .ann-gallery-dropzone-text {
  flex: 1 1 220px;
  min-width: 0;
}

.ann-gallery-dropzone.is-full {
  opacity: 0.6;
  cursor: not-allowed;
}

.ann-gallery-dropzone.is-full .ann-gallery-pick-btn {
  display: none;
}

.ann-gallery-dropzone.dragover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.ann-gallery-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 9px 20px;
  background: #ffffff;
  border: 1.5px solid #d1d5db;
  border-radius: 50px;
  color: #374151;
  font-family: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: var(--transition);
}

.ann-gallery-pick-btn i {
  color: var(--primary);
}

.ann-gallery-pick-btn:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(132, 51, 156, 0.15);
}

.ann-gallery-thumbs-editor {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}

.ann-gallery-thumbs-editor:not(:empty) {
  margin-top: 12px;
}

.ann-gallery-thumb {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-base);
  cursor: grab;
  transition: opacity 0.2s, box-shadow 0.2s;
}

.ann-gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ann-gallery-thumb.is-dragging {
  opacity: 0.4;
}

.ann-gallery-thumb.is-drop-target {
  box-shadow: 0 0 0 3px var(--primary);
}

.ann-gallery-thumb.is-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-style: dashed;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: default;
}

.ann-gallery-thumb-no {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  justify-content: center;
  border-radius: 999px;
  background: rgba(35, 5, 52, 0.72);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
}

.ann-gallery-thumb-no.is-cover {
  background: var(--secondary);
}

.ann-gallery-thumb-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 0.8rem;
  cursor: pointer;
}

.ann-gallery-thumb-remove:hover {
  background: #dc2626;
}

.ann-gallery-thumb-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 18px 4px 6px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  opacity: 0;
  transition: opacity 0.2s;
}

.ann-gallery-thumb:hover .ann-gallery-thumb-actions,
.ann-gallery-thumb:focus-within .ann-gallery-thumb-actions {
  opacity: 1;
}

/* จอสัมผัสไม่มี hover ปุ่มจัดลำดับต้องเห็นตลอด (ลากเพื่อสลับบนมือถือไม่ได้) */
@media (hover: none) {
  .ann-gallery-thumb-actions {
    opacity: 1;
  }
}

.ann-gallery-thumb-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary-dark);
  font-size: 0.72rem;
  cursor: pointer;
}

.ann-gallery-thumb-actions button:hover:not(:disabled) {
  background: var(--primary);
  color: #ffffff;
}

.ann-gallery-thumb-actions button:disabled {
  opacity: 0.35;
  cursor: default;
}

#pane-announcement .ann-gallery-tip {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.ann-gallery-tip:empty {
  display: none;
}

.ann-gallery-subhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 18px 0 10px;
  color: var(--text-main);
  font-family: var(--font-heading);
  font-weight: 600;
}

.ann-gallery-subhead span {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
}

.ann-gallery-subhead i {
  color: var(--primary);
}

.ann-gallery-layout-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
  gap: 8px;
}

.ann-gallery-layout-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: #ffffff;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}

.ann-gallery-layout-option:hover {
  border-color: var(--primary);
}

.ann-gallery-layout-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ann-gallery-layout-option:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.ann-gallery-layout-option svg {
  width: 64px;
  height: 44px;
  margin-bottom: 2px;
  color: #b8aebd;
  fill: currentColor;
}

.ann-gallery-layout-option svg .dim {
  opacity: 0.55;
}

.ann-gallery-layout-name {
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 700;
}

.ann-gallery-layout-hint {
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.ann-gallery-layout-option.is-selected {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 1px var(--primary);
}

.ann-gallery-layout-option.is-selected svg {
  color: var(--primary);
}

.ann-gallery-layout-option.is-selected::after {
  content: '\f00c';
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  font-family: 'Font Awesome 6 Free';
  font-size: 0.6rem;
  font-weight: 900;
}

.ann-gallery-preview-panel {
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-base);
}

.ann-gallery-preview-panel .ann-gallery-subhead {
  margin-top: 0;
}

.ann-gallery-preview {
  padding: 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.ann-gallery-preview-title {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.ann-gallery-preview-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.ann-gallery-preview-note i {
  color: var(--primary);
}

/* --- ส่วนแสดงผล (หน้าข่าวจริง + ช่องตัวอย่าง) --- */
.ann-gallery {
  --gallery-gap: 8px;
  --gallery-letterbox: #1d1424;
}

.ann-gallery-tile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-base);
  font: inherit;
  cursor: zoom-in;
}

.ann-gallery-tile img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

button.ann-gallery-tile:hover img {
  transform: scale(1.03);
}

.ann-gallery-tile:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.ann-gallery-tile.is-sample {
  cursor: default;
}

/* ภาพจำลองในช่องตัวอย่าง ไล่สีตามลำดับภาพให้แยกกันออก */
.ann-gallery-sample {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: linear-gradient(135deg,
    hsl(calc(275 + var(--sample-i, 0) * 23) 55% 90%),
    hsl(calc(305 + var(--sample-i, 0) * 23) 50% 80%));
  color: rgba(35, 5, 52, 0.5);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
}

.ann-gallery-sample i {
  font-size: 1.4rem;
}

/* ภาพเดียว / เรียงแนวตั้ง: แสดงเต็มภาพตามสัดส่วนจริง ไม่ครอป */
.ann-gallery--single .ann-gallery-tile,
.ann-gallery--stack .ann-gallery-tile {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.ann-gallery--single .ann-gallery-tile img,
.ann-gallery--stack .ann-gallery-tile img {
  position: static;
  height: auto;
}

.ann-gallery--single .ann-gallery-tile:hover img,
.ann-gallery--stack .ann-gallery-tile:hover img {
  transform: none;
}

.ann-gallery--single .ann-gallery-tile img {
  max-height: 480px;
  object-fit: contain;
}

.ann-gallery--single .is-sample,
.ann-gallery--stack .is-sample {
  aspect-ratio: 16 / 9;
}

.ann-gallery--stack .is-sample:nth-child(even) {
  aspect-ratio: 4 / 3;
}

.ann-gallery--stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ตาราง: 6 คอลัมน์ ภาพปกติกว้าง 2 ช่อง (.is-half กว้าง 3) ดู gridTileClass() */
.ann-gallery--grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gallery-gap);
}

.ann-gallery--grid .ann-gallery-tile {
  grid-column: span 2;
  aspect-ratio: 4 / 3;
}

.ann-gallery--grid .ann-gallery-tile.is-half {
  grid-column: span 3;
}

/* คอลลาจ: ภาพแรกใหญ่ด้านซ้าย จัดช่องตามจำนวนภาพ (สูงสุด 5 ช่อง) */
.ann-gallery--collage {
  display: grid;
  gap: var(--gallery-gap);
  aspect-ratio: 16 / 10;
}

.ann-gallery--collage .ann-gallery-tile {
  height: 100%;
  min-height: 0;
}

.ann-gallery--collage[data-count="2"] {
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 2 / 1;
}

.ann-gallery--collage[data-count="3"] {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.ann-gallery--collage[data-count="4"] {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(3, 1fr);
}

.ann-gallery--collage[data-count="5"] {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.ann-gallery--collage[data-count="3"] > :first-child,
.ann-gallery--collage[data-count="5"] > :first-child {
  grid-row: span 2;
}

.ann-gallery--collage[data-count="4"] > :first-child {
  grid-row: span 3;
}

.ann-gallery-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(35, 5, 52, 0.68);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ภาพหลัก + ภาพย่อ: ภาพหลักไม่ครอป (มีขอบสีเข้มรอบภาพที่สัดส่วนไม่พอดี) */
.ann-gallery-main {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--gallery-letterbox);
}

.ann-gallery-main > .ann-gallery-tile {
  position: absolute;
  inset: 0;
  display: none;
  border-radius: 0;
  background: transparent;
}

.ann-gallery-main > .ann-gallery-tile.is-active {
  display: block;
}

.ann-gallery-main img,
.ann-gallery-track img {
  object-fit: contain;
}

.ann-gallery-main > .ann-gallery-tile:hover img,
.ann-gallery-track > .ann-gallery-tile:hover img {
  transform: none;
}

.ann-gallery-strip {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.ann-gallery-strip-item {
  position: relative;
  flex: 0 0 76px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-base);
  opacity: 0.6;
  cursor: pointer;
  transition: var(--transition);
}

.ann-gallery-strip-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ann-gallery-strip-item:hover {
  opacity: 0.9;
}

.ann-gallery-strip-item.is-active {
  border-color: var(--primary);
  opacity: 1;
}

.ann-gallery-strip-item .ann-gallery-sample {
  font-size: 0.8rem;
}

/* สไลด์โชว์: scroll-snap ของเบราว์เซอร์ ปัดบนมือถือได้โดยไม่ต้องใช้สคริปต์ */
.ann-gallery--carousel {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--gallery-letterbox);
}

.ann-gallery-track {
  display: flex;
  aspect-ratio: 16 / 10;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ann-gallery-track::-webkit-scrollbar {
  display: none;
}

.ann-gallery-track > .ann-gallery-tile {
  flex: 0 0 100%;
  border-radius: 0;
  background: transparent;
  scroll-snap-align: center;
}

.ann-gallery-nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary-dark);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transform: translateY(-50%);
  transition: var(--transition);
}

.ann-gallery-nav:hover {
  background: #ffffff;
  color: var(--primary);
}

.ann-gallery-nav.is-prev {
  left: 10px;
}

.ann-gallery-nav.is-next {
  right: 10px;
}

.ann-gallery-counter {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 0.78rem;
  pointer-events: none;
}

.ann-gallery-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.ann-gallery-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: var(--transition);
}

.ann-gallery-dots button.is-active {
  width: 20px;
  background: #ffffff;
}

@media (max-width: 480px) {
  .ann-gallery-nav {
    width: 32px;
    height: 32px;
  }

  .ann-gallery-more {
    font-size: 1.4rem;
  }
}

/* Admin › อนุมัติประกาศ — an approval queue is scanned, not read. Same
   compact treatment as #pane-audit below: one line per item, icon actions,
   sticky header, so a screen holds ~15 rows instead of 6.

   The whole pane is set in FC Minimal, the site's heading face. Two
   measured facts drive every size below: FC Minimal ships only 400 and
   700 (a declared 500 silently renders as 400, 600 as 700), so nothing
   here asks for anything else; and its Thai glyphs stand ~30% shorter
   than IBM Plex at the same px (43 vs 56 at 100px), so each size is
   raised to keep the same reading size. Row height is set by the 27px
   icon buttons, not the text, so the rows stay as compact as before. */
#pane-approval,
#pane-approval input,
#pane-approval select,
#pane-approval button {
  font-family: var(--font-heading);
}

#pane-approval .admin-table th,
#pane-approval .admin-table td {
  padding: 5px 10px;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.45;
  vertical-align: middle;
  white-space: nowrap;
}

#pane-approval .admin-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--primary-light);
  box-shadow: inset 0 -1px var(--border-color);
}

/* Zebra rows: the eye keeps its place across five columns without needing
   rules between them. The hover tint still wins over the stripe. */
#pane-approval .admin-table tbody tr:nth-child(even) {
  background-color: rgba(17, 12, 20, 0.022);
}
#pane-approval .admin-table tbody tr:hover {
  background-color: var(--primary-light);
}

.approval-table-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 52vh;
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

/* The headline is the one column worth real width; everything else is a tag,
   a date or a control, so they stay at their natural size. */
.ap-title {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Has to out-rank "#pane-approval .admin-table td" above, which sets the
   size and weight for every cell -- a bare .ap-title loses to it.
   700 is the only weight above regular that FC Minimal has, and it is what
   carries this column while every other cell stays at 400. */
#pane-approval .admin-table td.ap-title {
  font-size: 0.95rem;
  font-weight: 700;
}
.ap-cat {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted);
}
.ap-date {
  color: var(--text-muted);
}

/* A coloured dot reads as fast as a filled pill and cannot wrap onto a
   second line the way "เผยแพร่แล้ว" did in a narrow column. */
.ap-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.ap-dot.approved { background-color: #22c55e; }
.ap-dot.pending  { background-color: #f59e0b; }

.ap-actions {
  text-align: center;
}
.ap-icon {
  width: 27px;
  height: 27px;
  margin: 0 2px;
  border: none;
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.78rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.ap-approve { background-color: #22c55e; }
.ap-approve:hover { background-color: #16a34a; }
.ap-edit { background-color: #eab308; }
.ap-edit:hover { background-color: #ca8a04; }
.ap-delete { background-color: #ef4444; }
.ap-delete:hover { background-color: #dc2626; }
.ap-icon:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.ap-none { color: var(--text-muted); }

.approval-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.approval-search {
  position: relative;
  flex: 1;
  min-width: 190px;
}
.approval-search i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.8rem;
  pointer-events: none;
}
.approval-search input {
  width: 100%;
  padding: 7px 10px 7px 30px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}
.approval-toolbar select {
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  background: #ffffff;
  cursor: pointer;
}
.approval-count {
  margin-left: auto;
  font-size: 0.88rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* หัวเรื่องและคำอธิบายของหน้านี้ ขยายขึ้นให้ชดเชยตัวอักษรที่เตี้ยกว่า */
#pane-approval h3 {
  font-size: 1.25rem;
  font-weight: 700;
}
#pane-approval .pane-help {
  font-size: 0.95rem;
  font-weight: 400;
}

/* Admin › ประวัติการใช้งาน (Audit Log) — a log is scanned rather than read,
   so it wants more rows on screen, not bigger type. .admin-table sets 0.9rem
   on the cells themselves, which outranks any font-size put on the <table>,
   so the override has to be at cell level too. */
#pane-audit .admin-table th,
#pane-audit .admin-table td {
  padding: 6px 10px;
  font-size: 0.88rem;
  line-height: 1.45;
  vertical-align: top;
}
#pane-audit .admin-table thead th {
  font-size: 0.85rem;
  white-space: nowrap;
}
/* IDs, IP addresses, user agents and JSON diffs: monospace is the right font
   for them, and it is narrower, so more fits before wrapping. */
.audit-detail-value {
  font-family: monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  margin: 2px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.audit-detail-toggle {
  cursor: pointer;
  color: var(--primary);
  font-size: 0.75rem;
}

/* Admin › ผลงานวิชาการ/วิจัย — dense list so 5+ rows fit without scrolling,
   titles/categories truncate with an ellipsis (full text in the title tooltip). */
#pane-research .research-admin-list { max-height: 320px; }
#pane-research .research-admin-list .admin-table th,
#pane-research .research-admin-list .admin-table td {
  padding: 5px 8px;
  font-size: 0.86rem;
  line-height: 1.35;
  vertical-align: middle;
}
#pane-research .research-admin-list .admin-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-base);
  box-shadow: inset 0 -1px var(--border-color);
}
#pane-research .ra-title,
#pane-research .ra-cat {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pane-research .ra-title { max-width: min(260px, 38vw); }
#pane-research .ra-cat { max-width: min(130px, 22vw); }
#pane-research .research-admin-list .admin-btn {
  padding: 3px 7px;
  font-size: 0.72rem;
}
@media (max-width: 768px) {
  #pane-research .ra-title { max-width: 150px; }
  #pane-research .ra-cat { max-width: 96px; }
}

/* ===== Doctor Search Highlight ===== */
.doctor-search-highlight {
  background: linear-gradient(120deg, #fde68a 0%, #fbbf24 100%);
  border-radius: 2px;
  padding: 0 2px;
  font-weight: 700;
  color: #78350f;
}

/* No-results state in doctor table */
.doctor-no-results-row td {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-muted);
}

/* Filtered row: dim instead of hide for better UX */
.admin-table tbody tr.doctor-row-hidden {
  display: none;
}

/* Search result count badge */
#doctor-search-result-count .count-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
}

#doctor-search-result-count .count-badge.found {
  background: var(--primary-light);
  color: var(--primary);
}

#doctor-search-result-count .count-badge.not-found {
  background: #fee2e2;
  color: #dc2626;
}

/* High contrast overrides for search highlight */
.high-contrast .doctor-search-highlight {
  background: #facc15;
  color: #000;
}

.admin-btn {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: var(--transition);
}

.admin-btn-approve {
  background-color: #22c55e;
  color: white;
  margin-right: 8px;
}

.admin-btn-approve:hover {
  background-color: #16a34a;
}

.admin-btn-reject {
  background-color: #ef4444;
  color: white;
}

.admin-btn-reject:hover {
  background-color: #dc2626;
}

/* Status Pill */
.status-pill {
  font-size: 0.85rem;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 700;
}

.status-pill.pending {
  background-color: #fef3c7;
  color: #d97706;
}

.status-pill.approved {
  background-color: #d1fae5;
  color: #065f46;
}

/* High Contrast mode for Admin Panel */
.high-contrast .admin-modal-container {
  background-color: var(--bg-surface);
  border: 2px solid var(--border-color);
}
.high-contrast .admin-modal-header,
.high-contrast .admin-tabs {
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
}
.high-contrast .admin-tabs::-webkit-scrollbar-thumb {
  background-color: var(--accent);
}
.high-contrast .admin-tab-btn {
  color: var(--text-main);
}
.high-contrast .admin-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.high-contrast .admin-tab-btn:hover {
  background-color: var(--primary-light);
  color: var(--accent);
}
.high-contrast .admin-tab-contents input,
.high-contrast .admin-tab-contents select,
.high-contrast .admin-tab-contents textarea {
  background-color: var(--bg-base);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}
.high-contrast .navbar-items-list-container {
  background-color: var(--bg-base) !important;
  border: 1px solid var(--border-color) !important;
}
.high-contrast .admin-item-list li {
  border-bottom: 1px solid var(--border-color);
}
.high-contrast .admin-delete-btn {
  color: var(--accent);
}
.high-contrast .admin-delete-btn:hover {
  background-color: var(--primary);
  color: var(--bg-base);
}
.high-contrast .admin-table th {
  background-color: var(--bg-surface) !important;
  border-bottom: 2px solid var(--border-color);
}
.high-contrast .admin-table td {
  border-bottom: 1px solid var(--border-color);
}
.high-contrast .admin-table tbody tr:hover {
  background-color: var(--primary-light);
}
.high-contrast .admin-submit-btn {
  background-color: var(--bg-surface) !important;
  color: var(--text-main) !important;
  border: 2px solid var(--border-color) !important;
}
.high-contrast .admin-submit-btn:hover {
  background-color: var(--primary) !important;
  color: var(--bg-base) !important;
  border-color: var(--primary) !important;
}
.high-contrast .status-pill.pending {
  background-color: var(--bg-base);
  color: var(--accent);
  border: 1px solid var(--accent);
}
.high-contrast .status-pill.approved {
  background-color: var(--bg-base);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}
.high-contrast .admin-btn-approve {
  background-color: var(--bg-base);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}
.high-contrast .admin-btn-approve:hover {
  background-color: var(--primary);
  color: var(--bg-base);
  border-color: var(--primary);
}
.high-contrast .admin-btn-reject {
  background-color: var(--bg-base);
  border: 1px solid #ef4444;
  color: #ef4444;
}
.high-contrast .admin-btn-reject:hover {
  background-color: #ef4444;
  color: #ffffff;
}

/* ==========================================================================
   ABOUT US SECTION STYLES
   ========================================================================== */

.about-tab-pane {
  display: none;
  animation: fadeIn 0.4s ease-out;
}

.about-tab-pane.active {
  display: block;
}

/* About History Tab Styles */
.about-history-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: flex-start;
  margin-top: 20px;
}

.history-text {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-main);
}

.history-timeline {
  margin-top: 30px;
  border-left: 2px solid var(--primary-light);
  padding-left: 28px;
  margin-left: 10px;
}

.timeline-item {
  position: relative;
  margin-bottom: 28px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -35px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--primary);
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 3px var(--primary-light);
}

.timeline-year {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--primary);
  margin-bottom: 4px;
}

.timeline-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* About Structure Tab Styles */
.about-structure-wrap {
  margin-top: 10px;
}

.structure-leader-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  max-width: 440px;
  margin: 0 auto 40px auto;
  text-align: center;
  box-shadow: var(--shadow-md);
  position: relative;
}

.structure-leader-card::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 50%;
  width: 2px;
  height: 40px;
  background-color: var(--border-color);
}

.structure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 10px;
}

.structure-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.structure-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.structure-card h4 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--primary-dark);
  margin-bottom: 12px;
  border-bottom: 2px solid var(--primary-light);
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.structure-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.structure-card li {
  font-size: 0.92rem;
  color: var(--text-main);
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-color);
  display: flex;
  align-items: center;
  gap: 6px;
}

.structure-card li:last-child {
  border-bottom: none;
}

.structure-card li::before {
  content: '\f0da';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--secondary);
  font-size: 0.75rem;
}

@media (max-width: 992px) {
  .about-history-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .about-history-grid > * {
    min-width: 0;
  }
  .about-history-grid .hero-visual {
    order: -1;
  }
  .about-history-grid .image-frame {
    height: 300px !important;
  }
}

/* About Us Section High Contrast Mode Overrides */
.high-contrast #about {
  background-color: var(--bg-base) !important;
  border-color: var(--border-color) !important;
}

.high-contrast .about-tab-pane {
  color: var(--text-main);
}

.high-contrast .history-text {
  color: var(--text-main);
}

.high-contrast .history-timeline {
  border-left-color: var(--border-color);
}

.high-contrast .timeline-item::before {
  background-color: var(--accent);
  border-color: var(--bg-base);
  box-shadow: 0 0 0 3px var(--border-color);
}

.high-contrast .timeline-year {
  color: var(--accent);
}

.high-contrast .timeline-desc {
  color: var(--text-main);
}

.high-contrast .structure-leader-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.high-contrast .structure-leader-card h3 {
  color: var(--accent);
}

.high-contrast .structure-leader-card p {
  color: var(--text-main);
}

.high-contrast .structure-leader-card::after {
  background-color: var(--border-color);
}

.high-contrast .structure-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
}

.high-contrast .structure-card h4 {
  color: var(--accent);
  border-bottom-color: var(--border-color);
}

.high-contrast .structure-card li {
  color: var(--text-main);
  border-bottom-color: var(--border-color);
}

.high-contrast .structure-card li::before {
  color: var(--accent);
}

/* ==========================================================================
   POLICIES & GUIDELINES SECTION STYLES
   ========================================================================== */

.policies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 10px;
}

.policy-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.policy-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(132, 51, 156, 0.15);
}

.policy-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.policy-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: bold;
}

.policy-icon-pdpa {
  background-color: rgba(13, 148, 136, 0.1);
  color: #0d9488;
}

.policy-icon-security {
  background-color: rgba(225, 29, 72, 0.1);
  color: #e11d48;
}

.policy-icon-other {
  background-color: rgba(79, 70, 229, 0.1);
  color: #4f46e5;
}

.policy-icon-ita {
  background-color: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.policy-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  font-family: var(--font-heading);
}

.policy-badge-msh {
  background-color: var(--primary-light);
  color: var(--primary);
}

.policy-badge-moph {
  background-color: #fef3c7;
  color: #d97706;
}

.policy-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-main);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 3.1rem;
}

.policy-meta-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  flex-grow: 1;
}

.policy-meta-info span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.policy-card .service-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
}

.policy-card:hover .service-link {
  color: var(--primary-dark);
}

/* Policy Detail Modal Overlay */
.policy-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.policy-modal-overlay.active {
  display: flex;
}

.policy-modal-container {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  width: 100%;
  max-width: 750px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  overflow: hidden;
}

.policy-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-base);
}

.policy-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--primary);
}

.policy-modal-title i {
  font-size: 1.5rem;
}

.policy-modal-title h2 {
  font-size: 1.25rem;
  font-family: var(--font-heading);
  margin: 0;
}

.policy-modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  line-height: 1;
}

.policy-modal-close:hover {
  color: var(--accent);
}

.policy-modal-body {
  padding: 30px;
  overflow-y: auto;
  flex: 1;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-main);
}

.policy-modal-body h3 {
  font-size: 1.2rem;
  color: var(--primary-dark);
  margin-top: 24px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

.policy-modal-body h3:first-of-type {
  margin-top: 0;
}

.policy-modal-body p {
  margin-bottom: 16px;
  text-indent: 2em;
}

.policy-modal-body ul, .policy-modal-body ol {
  margin-bottom: 20px;
  padding-left: 24px;
}

.policy-modal-body li {
  margin-bottom: 8px;
}

.policy-modal-body blockquote {
  background-color: var(--primary-light);
  border-left: 4px solid var(--primary);
  padding: 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  font-style: italic;
}

/* Official Document Header Mock */
.doc-header-mock {
  text-align: center;
  border-bottom: 2px double var(--border-color);
  padding-bottom: 20px;
  margin-bottom: 24px;
}

.doc-header-mock .garuda-logo {
  font-size: 2.5rem;
  color: var(--primary-dark);
  margin-bottom: 12px;
}

.doc-header-mock h4 {
  font-size: 1.1rem;
  color: var(--primary-dark);
  margin-bottom: 4px;
}

.doc-header-mock p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  text-indent: 0;
}

.policy-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-base);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-download-mock {
  background-color: var(--primary);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}

.btn-download-mock:hover {
  background-color: var(--primary-dark);
}

.btn-close-modal {
  background-color: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 500;
  transition: var(--transition);
}

.btn-close-modal:hover {
  background-color: rgba(15, 23, 42, 0.05);
}

/* Responsive Media Queries for Policies */
@media (max-width: 991px) {
  .policies-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .policies-grid {
    grid-template-columns: 1fr;
  }
  .policy-modal-body {
    padding: 20px;
  }
}

/* High Contrast Mode for Policies */
.high-contrast #policies {
  background-color: var(--bg-base) !important;
  border-color: var(--border-color) !important;
}

.high-contrast .policy-card {
  background-color: var(--bg-surface);
  border: 2px solid var(--border-color);
}

.high-contrast .policy-card:hover {
  background-color: var(--primary-light);
  border-color: var(--accent);
}

.high-contrast .policy-icon-wrap {
  background-color: var(--bg-base) !important;
  border: 1px solid var(--border-color);
}

.high-contrast .policy-icon-pdpa { color: var(--accent); }
.high-contrast .policy-icon-security { color: var(--accent); }
.high-contrast .policy-icon-other { color: var(--accent); }
.high-contrast .policy-icon-ita { color: var(--accent); }

.high-contrast .policy-badge-msh {
  background-color: var(--bg-base);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.high-contrast .policy-badge-moph {
  background-color: var(--bg-base);
  border: 1px solid var(--accent);
  color: var(--accent);
}

.high-contrast .policy-card h3 {
  color: var(--text-main);
}

.high-contrast .policy-card h3:hover {
  color: var(--accent);
}

.high-contrast .policy-meta-info {
  color: var(--text-muted);
}

.high-contrast .policy-card .service-link {
  color: var(--accent);
}

.high-contrast .policy-modal-overlay {
  background: rgba(10, 15, 29, 0.8);
}

.high-contrast .policy-modal-container {
  background-color: var(--bg-surface);
  border: 2px solid var(--border-color);
}

.high-contrast .policy-modal-header,
.high-contrast .policy-modal-footer {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
}

.high-contrast .policy-modal-title {
  color: var(--accent);
}

.high-contrast .policy-modal-body {
  color: var(--text-main);
  background-color: var(--bg-base);
}

.high-contrast .policy-modal-body h3 {
  color: var(--accent);
  border-bottom-color: var(--border-color);
}

.high-contrast .policy-modal-body blockquote {
  background-color: var(--bg-surface);
  border-left-color: var(--accent);
  border: 1px solid var(--border-color);
  border-left-width: 4px;
}

.high-contrast .doc-header-mock {
  border-bottom-color: var(--border-color);
}

.high-contrast .doc-header-mock .garuda-logo,
.high-contrast .doc-header-mock h4 {
  color: var(--accent);
}

.high-contrast .btn-download-mock {
  background-color: var(--bg-base);
  border: 2px solid var(--accent);
  color: var(--accent);
}

.high-contrast .btn-download-mock:hover {
  background-color: var(--accent);
  color: var(--bg-base);
}

.high-contrast .btn-close-modal {
  background-color: var(--bg-base);
  border: 2px solid var(--border-color);
  color: var(--text-main);
}

.high-contrast .btn-close-modal:hover {
  background-color: var(--primary);
  color: var(--bg-base);
  border-color: var(--primary);
}

/* --- High Contrast Additional Accessibility Refinements --- */

/* Accessibility Top Bar */
.high-contrast #accessibility-bar {
  background-color: var(--bg-surface);
  color: var(--text-main);
  border-bottom: 1px solid var(--border-color);
}
.high-contrast .acc-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}
.high-contrast .acc-btn:hover,
.high-contrast .acc-btn.active {
  background: var(--primary);
  color: var(--bg-base);
  border-color: var(--primary);
}
.high-contrast .hotline {
  animation: none; /* Reduce motion in high contrast / accessibility mode */
}
.high-contrast .hotline a {
  color: var(--primary);
}

/* Header & Search Button Contrast */
.high-contrast .nav-cta {
  background: var(--accent);
  color: var(--bg-base) !important;
}
.high-contrast .nav-cta:hover {
  background: var(--primary);
  color: var(--bg-base) !important;
}
.high-contrast .search-btn {
  background: var(--accent);
  color: var(--bg-base);
}
.high-contrast .search-btn:hover {
  background: var(--primary);
  color: var(--bg-base);
}

/* Hero Tag Links */
.high-contrast .tag-link {
  background-color: var(--bg-surface);
  color: var(--text-main);
  border-color: var(--border-color);
}
.high-contrast .tag-link:hover {
  background-color: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}

/* E-Services Section Card Hover Contrast */
.high-contrast .service-card:hover {
  background: linear-gradient(to bottom, var(--bg-surface), var(--primary-light));
  border-color: var(--primary);
}
.high-contrast .service-card:hover .service-icon {
  background-color: var(--primary);
  color: var(--bg-base);
}

/* News Filter & Badge Contrast */
.high-contrast .filter-btn:hover,
.high-contrast .filter-btn.active {
  color: var(--bg-base);
}
.high-contrast .news-tag {
  color: var(--bg-base);
}
.high-contrast .btn-secondary-outline:hover {
  color: var(--bg-base);
}

/* Stats Banner & Labels */
.high-contrast .stats-banner {
  background: linear-gradient(135deg, var(--bg-surface), var(--bg-base));
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.high-contrast .stat-label {
  color: var(--text-muted);
}

/* Map Wrapper Border */
.high-contrast .map-wrapper {
  border-color: var(--border-color);
}

/* Footer Contrast & Harmonization */
.high-contrast footer {
  background-color: var(--bg-surface);
  color: var(--text-main);
  border-top: 1px solid var(--border-color);
}
.high-contrast .footer-brand p,
.high-contrast .footer-nav a,
.high-contrast .visitor-stat-row {
  color: var(--text-muted);
}
.high-contrast .footer-nav a:hover {
  color: var(--primary);
}
.high-contrast .footer-bottom {
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
}
.high-contrast .footer-bottom-links a {
  color: var(--text-muted);
}
.high-contrast .footer-bottom-links a:hover {
  color: var(--primary);
}

/* --- About Us History Tab Enhancements --- */
.about-history-subgrid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
}
@media (max-width: 992px) {
  .about-history-subgrid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
.history-timeline-scroll {
  max-height: 600px;
  overflow-y: auto;
  padding-right: 15px;
}
@media (min-width: 993px) {
  .history-timeline-scroll {
    border-right: 1px solid var(--border-color);
  }
}
.history-timeline-scroll::-webkit-scrollbar {
  width: 6px;
}
.history-timeline-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.history-timeline-scroll::-webkit-scrollbar-thumb {
  background-color: var(--primary-light);
  border-radius: 4px;
}
.high-contrast .history-timeline-scroll::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
}

/* High Contrast Logo Overrides (Transparent with white logo text) */
.high-contrast .logo-img-wrap,
.high-contrast .footer-logo-img-wrap {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.high-contrast .logo-img,
.high-contrast .footer-logo-img {
  filter: brightness(0) invert(1);
}

/* --- Donation CTA Section (แบนเนอร์รับบริจาคแบบกระจกใส) --- */
.donation-banner {
  padding: 40px 0;
  background: linear-gradient(135deg, rgba(245, 235, 247, 0.96), rgba(240, 237, 242, 0.97)),
              url('https://images.unsplash.com/photo-1579684389782-64d84b5e901a?w=1600&auto=format&fit=crop') no-repeat center center/cover;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Background overlay grid effect */
.donation-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(rgba(132, 51, 156, 0.06) 1px, transparent 0),
                    radial-gradient(rgba(132, 51, 156, 0.06) 1px, transparent 0);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
  opacity: 0.8;
  z-index: -1;
}

.donation-glass-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(132, 51, 156, 0.08);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: 0 20px 40px rgba(132, 51, 156, 0.05);
  color: var(--text-main);
}

.donation-banner-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: start;
}

.donation-main-card {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.donation-content-header {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.donation-icon-wrap {
  width: 64px;
  height: 64px;
  background: var(--primary-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--primary);
  box-shadow: 0 0 20px rgba(132, 51, 156, 0.1);
  flex-shrink: 0;
}

.donation-text .donation-tag {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 1.5px;
  display: inline-block;
  margin-bottom: 12px;
}

.donation-text h3 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.4;
  color: var(--primary-dark);
}

.donation-text p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #4A5568;
}

.donation-bank-card {
  background: rgba(132, 51, 156, 0.03);
  border: 1px solid rgba(132, 51, 156, 0.06);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  display: flex;
  gap: 20px;
  align-items: center;
}

.bank-logo-wrap {
  background: #ffffff;
  color: var(--primary);
  font-weight: 700;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.bank-details {
  flex-grow: 1;
}

.bank-account-label {
  display: block;
  font-size: 0.85rem;
  color: #64748B;
  margin-bottom: 4px;
}

.bank-account-num-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.bank-account-num {
  font-size: 1.4rem;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--primary-dark);
}

.btn-copy-acc {
  background: rgba(132, 51, 156, 0.05);
  border: 1px solid rgba(132, 51, 156, 0.1);
  color: var(--primary);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-copy-acc:hover {
  background: rgba(132, 51, 156, 0.12);
  border-color: rgba(132, 51, 156, 0.2);
}

.donation-main-buttons {
  display: flex;
  align-items: center;
  gap: 24px;
}

.btn-primary-glow {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border: none;
  color: #ffffff;
  padding: 14px 28px;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 0 0 20px rgba(132, 51, 156, 0.4);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-primary-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(132, 51, 156, 0.6);
  background: linear-gradient(135deg, var(--secondary), var(--primary));
}

.btn-text-link {
  color: var(--primary-dark);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-text-link:hover {
  color: var(--primary);
  padding-left: 4px;
}

/* Animations */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.heart-pulse {
  animation: pulse 1.8s infinite ease-in-out;
}

/* Right Side: Projects Showcase */
.donation-projects-showcase {
  border-left: 1px solid rgba(132, 51, 156, 0.08);
  padding-left: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.showcase-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.showcase-title i {
  color: var(--primary);
}

.projects-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(132, 51, 156, 0.2);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.project-image-wrap {
  width: 100%;
  height: 160px;
  border-radius: calc(var(--radius-md) - 4px);
  overflow: hidden;
  position: relative;
  background-color: rgba(8, 41, 79, 0.03);
}

.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.project-card:hover .project-image {
  transform: scale(1.05);
}

.project-card:hover {
  transform: translateY(-3px);
  background: #ffffff;
  border-color: rgba(132, 51, 156, 0.5);
  box-shadow: 0 10px 24px rgba(132, 51, 156, 0.06);
}

.project-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.project-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(132, 51, 156, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--primary);
  flex-shrink: 0;
  border: 1px solid rgba(132, 51, 156, 0.3);
}

.project-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin: 0;
  line-height: 1.4;
}

.project-desc {
  font-size: 0.9rem;
  color: #4A5568;
  line-height: 1.5;
  margin: 0;
}

.project-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.progress-percent {
  font-weight: 700;
  color: var(--primary);
}

.progress-amount {
  color: #64748B;
}

.progress-bar-bg {
  height: 6px;
  background: rgba(132, 51, 156, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 3px;
  transition: width 1s ease-out;
}

.btn-project-donate {
  background: rgba(132, 51, 156, 0.04);
  border: 1px solid rgba(132, 51, 156, 0.1);
  color: var(--primary);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  align-self: flex-start;
}

.btn-project-donate:hover {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #ffffff;
  border-color: transparent;
  transform: translateX(3px);
  box-shadow: 0 4px 12px rgba(255, 81, 163, 0.3);
}

.btn-project-donate i {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.btn-project-donate:hover i {
  transform: translateX(2px);
}

/* Donation Project Badge inside Modal */
.donation-project-badge {
  display: inline-block;
  background: rgba(223, 183, 87, 0.15);
  border: 1px solid rgba(223, 183, 87, 0.4);
  color: #DFB757;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease;
  text-align: center;
  max-width: 100%;
  word-wrap: break-word;
}

/* --- Donation Modal (ป๊อปอัปช่องทางบริจาค) --- */
.donation-modal-container {
  max-width: 720px;
  width: 90%;
}

.donation-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 30px;
  align-items: start;
}

.donation-modal-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.qr-box {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 240px;
  padding: 16px;
  margin-bottom: 12px;
}

.promptpay-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--primary-dark);
  padding-bottom: 8px;
}

.promptpay-header .pp-thai {
  color: var(--primary-dark);
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}

.promptpay-header .pp-eng {
  color: #c88d11;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.qr-svg-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px;
}

.qr-svg {
  display: block;
}

.promptpay-footer {
  margin-top: 8px;
  border-top: 1px dashed #e0e0e0;
  padding-top: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #555;
}

.qr-help-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.donation-modal-info h4 {
  font-size: 1.15rem;
  color: var(--primary);
  margin-bottom: 16px;
  font-weight: 600;
  border-left: 4px solid var(--primary);
  padding-left: 10px;
}

.modal-bank-info-box {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.modal-bank-info-box .mb-title {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.modal-bank-info-box .mb-name {
  font-size: 0.95rem;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.mb-acc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.mb-number {
  font-size: 1.25rem;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 0.5px;
  color: var(--text-dark);
}

.btn-copy-acc-modal {
  background: var(--primary);
  border: none;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-copy-acc-modal:hover {
  background: var(--primary-dark);
}

.tax-benefits-box h5 {
  font-size: 1rem;
  color: var(--primary-dark);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tax-benefits-box ul {
  padding-left: 18px;
}

.tax-benefits-box li {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.tax-benefits-box li strong {
  color: var(--text-dark);
}

.tax-benefits-box li a {
  color: var(--primary);
  text-decoration: none;
}

.tax-benefits-box li a:hover {
  text-decoration: underline;
}

/* --- Dark Mode & High Contrast overrides --- */
.dark-mode .donation-banner {
  background: linear-gradient(135deg, rgba(35, 5, 52, 0.97), rgba(15, 2, 22, 0.97)),
              url('https://images.unsplash.com/photo-1579684389782-64d84b5e901a?w=1600&auto=format&fit=crop') no-repeat center center/cover;
}

.dark-mode .donation-glass-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .project-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

.dark-mode .project-image {
  filter: brightness(0.85);
}

.dark-mode .project-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 81, 163, 0.3);
}

.dark-mode .project-card:hover .project-image {
  filter: brightness(1);
}

.dark-mode .btn-project-donate {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
}

.dark-mode .btn-project-donate:hover {
  background: linear-gradient(135deg, var(--accent), var(--primary));
  color: var(--bg-base);
}

.dark-mode .donation-modal-info h4 {
  color: var(--accent);
  border-left-color: var(--accent);
}

.dark-mode .modal-bank-info-box {
  background: var(--bg-surface);
}

.dark-mode .modal-bank-info-box .mb-title {
  color: var(--accent);
}

.dark-mode .modal-bank-info-box .mb-name,
.dark-mode .mb-number {
  color: var(--text-light);
}

.dark-mode .btn-copy-acc-modal {
  background: var(--accent);
  color: var(--bg-base);
}

.dark-mode .btn-copy-acc-modal:hover {
  background: #f9d976;
}

.dark-mode .tax-benefits-box h5 {
  color: var(--accent);
}

.dark-mode .tax-benefits-box li strong {
  color: var(--text-light);
}

.dark-mode .tax-benefits-box li a {
  color: var(--accent);
}

/* High Contrast Override for donation */
.high-contrast .donation-banner {
  background: #000000;
}

.high-contrast .donation-glass-card {
  background: #000000;
  border: 2px solid #ffffff;
  color: #ffffff;
}

.high-contrast .donation-banner-grid {
  gap: 30px;
}

.high-contrast .donation-icon-wrap {
  border: 2px solid var(--accent);
  background: #000000;
  color: var(--accent);
}

.high-contrast .donation-tag {
  color: var(--accent);
}

.high-contrast .donation-text h3 {
  color: #ffffff;
}

.high-contrast .donation-text p {
  color: #ffffff;
}

.high-contrast .showcase-title {
  color: #ffffff;
}

.high-contrast .donation-bank-card {
  border: 2px solid #ffffff;
  background: #000000;
}

.high-contrast .bank-account-label {
  color: #94a3b8;
}

.high-contrast .bank-account-num {
  color: #ffffff;
}

.high-contrast .bank-logo-wrap {
  background: #000000;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.high-contrast .btn-copy-acc {
  background: #000000;
  border: 2px solid #ffffff;
  color: #ffffff;
}

.high-contrast .btn-copy-acc:hover {
  background: var(--accent);
  color: #000000;
  border-color: var(--accent);
}

.high-contrast .btn-primary-glow {
  background: #000000;
  border: 2px solid var(--accent);
  color: var(--accent);
  box-shadow: none;
}

.high-contrast .btn-primary-glow:hover {
  background: var(--accent);
  color: #000000;
}

.high-contrast .btn-text-link {
  color: var(--accent);
  text-decoration: underline;
}

.high-contrast .btn-text-link:hover {
  color: #ffffff;
}

.high-contrast .donation-projects-showcase {
  border-left: 2px solid #ffffff;
}

.high-contrast .project-card {
  background: #000000;
  border: 2px solid #ffffff;
  color: #ffffff;
}

.high-contrast .project-image-wrap {
  border: 1px solid #ffffff;
}

.high-contrast .project-card:hover {
  border-color: var(--accent);
  background: #111111;
}

.high-contrast .project-card:hover .project-image-wrap {
  border-color: var(--accent);
}

.high-contrast .project-icon {
  background: #000000;
  border: 1px solid #ffffff;
  color: var(--accent);
}

.high-contrast .project-name {
  color: #ffffff;
}

.high-contrast .project-desc {
  color: #ffffff;
}

.high-contrast .progress-percent {
  color: var(--accent);
}

.high-contrast .progress-amount {
  color: #ffffff;
}

.high-contrast .progress-bar-bg {
  border: 1px solid #ffffff;
  background: #000000;
}

.high-contrast .progress-bar-fill {
  background: var(--accent);
}

.high-contrast .btn-project-donate {
  background: #000000;
  border: 2px solid #ffffff;
  color: #ffffff;
}

.high-contrast .btn-project-donate:hover {
  background: var(--accent);
  color: #000000;
  border-color: var(--accent);
}

.high-contrast .donation-project-badge {
  background: #000000;
  border: 2px solid var(--accent);
  color: var(--accent);
}

.high-contrast .modal-bank-info-box {
  background: #000000;
  border: 2px solid #ffffff;
}

.high-contrast .modal-bank-info-box .mb-title {
  color: var(--accent);
}

.high-contrast .modal-bank-info-box .mb-name,
.high-contrast .mb-number {
  color: #ffffff;
}

.high-contrast .btn-copy-acc-modal {
  background: #000000;
  border: 2px solid var(--accent);
  color: var(--accent);
}

.high-contrast .btn-copy-acc-modal:hover {
  background: var(--accent);
  color: #000000;
}

.high-contrast .tax-benefits-box h5 {
  color: var(--accent);
}

.high-contrast .tax-benefits-box li strong,
.high-contrast .tax-benefits-box li {
  color: #ffffff;
}

.high-contrast .tax-benefits-box li a {
  color: var(--accent);
  text-decoration: underline;
}

/* --- Responsive Layout for donation banner --- */
@media (max-width: 992px) {
  .donation-banner {
    padding: 40px 0;
  }
  .donation-glass-card {
    padding: 30px;
  }
  .donation-banner-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .donation-projects-showcase {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 36px;
  }
  .high-contrast .donation-projects-showcase {
    border-top: 2px solid #ffffff;
  }
  .donation-modal-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .donation-modal-qr-wrap {
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 20px;
  }
  .dark-mode .donation-modal-qr-wrap {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
  .high-contrast .donation-modal-qr-wrap {
    border-bottom-color: #ffffff;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .projects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .project-card {
    height: 100%;
  }
}

@media (max-width: 576px) {
  .donation-content-header {
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
  }
  .donation-icon-wrap {
    width: 56px;
    height: 56px;
    font-size: 1.7rem;
  }
  .donation-text h3 {
    font-size: 1.4rem;
  }
  .donation-text p {
    font-size: 0.95rem;
  }
  .donation-bank-card {
    flex-direction: column;
    text-align: center;
    padding: 16px;
    gap: 12px;
  }
  .bank-logo-wrap {
    align-self: center;
  }
  .bank-account-num-row {
    flex-direction: column;
    gap: 10px;
  }
  .bank-account-num {
    font-size: 1.2rem;
  }
  .donation-main-buttons {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  .btn-primary-glow {
    justify-content: center;
  }
  .btn-text-link {
    justify-content: center;
  }
}

/* ==========================================================================
   SMART PHONE DIRECTORY SECTION STYLES
   ========================================================================== */

/* Tabs Control */
.contact-tabs-container {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.contact-tabs {
  display: inline-flex;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 6px;
  border-radius: 50px;
  box-shadow: var(--shadow-sm);
  gap: 4px;
}

.dark-mode .contact-tabs {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(255, 255, 255, 0.1);
}

.contact-tab-btn {
  background: transparent;
  border: none;
  padding: 12px 28px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-tab-btn i {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.contact-tab-btn:hover {
  color: var(--primary);
  background: rgba(132, 51, 156, 0.05);
}

.dark-mode .contact-tab-btn:hover {
  color: var(--secondary-light);
  background: rgba(255, 255, 255, 0.05);
}

.contact-tab-btn:hover i {
  transform: translateY(-2px);
}

.contact-tab-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(132, 51, 156, 0.3);
}

.dark-mode .contact-tab-btn.active {
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  box-shadow: 0 4px 15px rgba(255, 81, 163, 0.3);
}

/* Tab Panes */
.contact-tab-pane {
  display: none;
}

.contact-tab-pane.active {
  display: block;
}

/* Search Bar Wrapper */
.directory-search-wrapper {
  max-width: 800px;
  margin: 0 auto 35px auto;
  text-align: center;
}

.directory-search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-surface);
  border: 2px solid var(--border-color);
  border-radius: 50px;
  padding: 4px 20px;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

.dark-mode .directory-search-box {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.directory-search-box:focus-within {
  border-color: var(--secondary);
  box-shadow: 0 0 0 4px rgba(255, 81, 163, 0.15), var(--shadow-lg);
  transform: translateY(-2px);
}

.directory-search-box .search-icon {
  color: var(--text-muted);
  font-size: 1.25rem;
  margin-right: 12px;
}

.directory-search-box input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 14px 0;
  font-size: 1.05rem;
  font-family: var(--font-body);
  color: var(--text-color);
  outline: none;
}

.directory-search-box input::placeholder {
  color: var(--text-muted);
}

.search-clear-btn {
  background: rgba(148, 163, 184, 0.2);
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.search-clear-btn:hover {
  background: rgba(148, 163, 184, 0.4);
}

/* Search Tags / Popular */
.directory-search-tags {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.85rem;
}

.directory-search-tags .tag-label {
  color: var(--text-muted);
  font-weight: 500;
}

.search-tag {
  background: var(--primary-light);
  color: var(--primary);
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.dark-mode .search-tag {
  background: rgba(132, 51, 156, 0.2);
  color: var(--secondary-light);
}

.search-tag:hover {
  background: var(--primary);
  color: #ffffff;
  transform: translateY(-1px);
}

.dark-mode .search-tag:hover {
  background: var(--secondary);
  color: #ffffff;
}

/* Building Grid */
.directory-buildings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

/* Building Card */
.building-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dark-mode .building-card {
  background: rgba(30, 41, 59, 0.5);
  border-color: rgba(255, 255, 255, 0.08);
}

.building-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--card-accent-color, var(--primary));
  transition: height 0.3s ease;
}

.building-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--card-accent-color, var(--primary));
}

.building-card:hover::before {
  height: 8px;
}

.building-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.building-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(148, 163, 184, 0.1);
  color: var(--card-accent-color, var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: all 0.3s ease;
}

.building-card:hover .building-icon-wrap {
  background: var(--card-accent-color, var(--primary));
  color: #ffffff;
  transform: scale(1.1) rotate(5deg);
}

.building-title-wrap {
  flex: 1;
}

.building-title-wrap h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-color);
  line-height: 1.4;
  margin-bottom: 4px;
}

.building-card-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.building-stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.building-stat-item i {
  color: var(--card-accent-color, var(--primary));
  opacity: 0.8;
}

.building-card-footer {
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--card-accent-color, var(--primary));
}

.dark-mode .building-card-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.building-card-footer span {
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}

.building-card:hover .building-card-footer span {
  gap: 10px;
}

/* White colorTag Override for High Contrast and Usability */
.building-card.color-white::before {
  background: var(--border-color);
}
.building-card.color-white .building-icon-wrap {
  background: rgba(35, 5, 52, 0.08);
  color: var(--primary-dark);
}
.building-card.color-white:hover {
  border-color: var(--border-color);
  box-shadow: var(--shadow-lg);
}
.building-card.color-white:hover::before {
  background: var(--border-color);
}
.building-card.color-white:hover .building-icon-wrap {
  background: rgba(35, 5, 52, 0.08);
  color: var(--primary-dark);
}
.dark-mode .building-card.color-white .building-icon-wrap {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.dark-mode .building-card.color-white:hover {
  border-color: rgba(255, 255, 255, 0.08);
}
.dark-mode .building-card.color-white:hover .building-icon-wrap {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Accordion Floors inside Directory Modal */
.directory-floor-accordions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.floor-accordion {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.3s ease;
  background: var(--bg-surface);
}

.dark-mode .floor-accordion {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

.floor-accordion.active {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.dark-mode .floor-accordion.active {
  border-color: var(--secondary);
}

.floor-header {
  padding: 16px 20px;
  background: var(--bg-base);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
}

.dark-mode .floor-header {
  background: rgba(30, 41, 59, 0.4);
}

.floor-header:hover {
  background: var(--primary-light);
}

.dark-mode .floor-header:hover {
  background: rgba(132, 51, 156, 0.15);
}

.floor-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-color);
}

.floor-header-title i {
  color: var(--primary);
}

.dark-mode .floor-header-title i {
  color: var(--secondary);
}

.floor-badge {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-color);
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
}

.floor-chevron {
  color: var(--text-muted);
  transition: transform 0.3s ease;
}

.floor-accordion.active .floor-chevron {
  transform: rotate(180deg);
  color: var(--primary);
}

.floor-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.floor-body-content {
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
}

.dark-mode .floor-body-content {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* Department Units List inside Accordion Floor */
.unit-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.unit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(148, 163, 184, 0.04);
  border: 1px dashed transparent;
  transition: all 0.2s ease;
}

.unit-row:hover {
  background: rgba(148, 163, 184, 0.08);
  border-color: var(--border-color);
}

.dark-mode .unit-row:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.unit-name {
  font-weight: 500;
  color: var(--text-color);
  font-size: 0.95rem;
}

.unit-exts-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ext-badge {
  background: var(--bg-base);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-family: monospace;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.dark-mode .ext-badge {
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--secondary-light);
}

.btn-action {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-action:hover {
  background: var(--primary-light);
  color: var(--primary);
}

.dark-mode .btn-action:hover {
  background: rgba(132, 51, 156, 0.3);
  color: var(--secondary-light);
}

/* Tooltip for Copy Feedback */
.toast-tooltip {
  position: absolute;
  background: rgba(15, 23, 42, 0.9);
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: normal;
  pointer-events: none;
  z-index: 1000;
  white-space: nowrap;
  animation: fadeInOut 1.5s forwards;
  box-shadow: var(--shadow-sm);
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(4px); }
  15% { opacity: 1; transform: translateY(-4px); }
  85% { opacity: 1; transform: translateY(-4px); }
  100% { opacity: 0; transform: translateY(-8px); }
}

/* Directory Search Results */
.directory-search-results {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-md);
  margin-top: 20px;
}

.dark-mode .directory-search-results {
  background: rgba(30, 41, 59, 0.4);
  border-color: rgba(255, 255, 255, 0.08);
}

.directory-search-results .results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.dark-mode .directory-search-results .results-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.directory-search-results .results-header h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-color);
}

.btn-back-to-grid {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 50px;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-back-to-grid:hover {
  background: var(--bg-base);
  border-color: var(--text-muted);
}

/* Results Table */
.results-table-wrapper {
  overflow-x: auto;
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.results-table th,
.results-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.95rem;
}

.dark-mode .results-table th,
.dark-mode .results-table td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.results-table th {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-base);
}

.dark-mode .results-table th {
  background: rgba(15, 23, 42, 0.4);
}

.results-table td.cell-exts {
  text-align: center;
}

.results-table tr:hover td {
  background: rgba(148, 163, 184, 0.03);
}

.dark-mode .results-table tr:hover td {
  background: rgba(255, 255, 255, 0.01);
}

.highlight-match {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 2px;
}

.dark-mode .highlight-match {
  background: rgba(251, 191, 36, 0.25);
  color: #fbbf24;
}

/* Custom directory modal size */
.directory-modal-container {
  max-width: 700px;
}

/* High Contrast Adjustments */
.high-contrast .contact-tabs {
  background: #000000;
  border: 2px solid #ffffff;
}

.high-contrast .contact-tab-btn {
  color: #ffffff;
}

.high-contrast .contact-tab-btn.active {
  background: #ffffff;
  color: #000000;
  border: 2px solid #ffffff;
}

.high-contrast .directory-search-box {
  background: #000000;
  border: 2px solid #ffffff;
}

.high-contrast .directory-search-box input {
  color: #ffffff;
}

.high-contrast .directory-search-box input::placeholder {
  color: #ffff00;
}

.high-contrast .search-tag {
  background: #000000;
  color: #ffff00;
  border: 1px solid #ffff00;
}

.high-contrast .search-tag:hover {
  background: #ffff00;
  color: #000000;
}

.high-contrast .building-card {
  background: #000000;
  border: 2px solid #ffffff;
}

.high-contrast .building-card:hover {
  border-color: #ffff00;
}

.high-contrast .building-icon-wrap {
  background: #000000;
  color: #ffffff;
  border: 1px solid #ffffff;
}

.high-contrast .building-card:hover .building-icon-wrap {
  background: #ffffff;
  color: #000000;
}

.high-contrast .floor-accordion {
  border: 2px solid #ffffff;
  background: #000000;
}

.high-contrast .floor-header {
  background: #000000;
}

.high-contrast .floor-header:hover {
  background: #333333;
}

.high-contrast .unit-row {
  background: #000000;
  border: 1px dashed #ffffff;
}

.high-contrast .ext-badge {
  background: #000000;
  border: 1px solid #ffffff;
  color: #ffff00;
}

.high-contrast .btn-action {
  color: #ffffff;
  border: 1px solid #ffffff;
}

.high-contrast .btn-action:hover {
  background: #ffffff;
  color: #000000;
}

.high-contrast .directory-search-results {
  background: #000000;
  border: 2px solid #ffffff;
}

.high-contrast .results-table th {
  background: #333333;
  color: #ffffff;
}

.high-contrast .results-table td {
  border-bottom-color: #ffffff;
}

.high-contrast .highlight-match {
  background: #ffff00;
  color: #000000;
}

/* Media Queries for Directory Grid */
@media (max-width: 768px) {
  .contact-tabs {
    width: 100%;
    flex-direction: column;
    border-radius: 20px;
    padding: 10px;
  }
  .contact-tab-btn {
    width: 100%;
    justify-content: center;
  }
  .directory-search-tags {
    gap: 6px;
  }
  .search-tag {
    padding: 4px 10px;
    font-size: 0.8rem;
  }
  .directory-buildings-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .results-table th:nth-child(2),
  .results-table td:nth-child(2),
  .results-table th:nth-child(3),
  .results-table td:nth-child(3) {
    display: none; /* Hide building & floor on small mobile in results table to prevent overflow */
  }
}

/* ==========================================================================
   MEDICAL SERVICE RATES CENTER SECTION STYLES
   ========================================================================== */
.rates-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 40px;
  align-items: start;
}

.rates-memo-paper {
  position: relative;
  cursor: pointer;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  background: white;
  padding: 6px;
}

.rates-memo-paper:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.rates-memo-paper:hover .memo-paper-overlay-btn {
  opacity: 1 !important;
}

/* Price Lookup Calculator styles */
.calc-cat-btn {
  background: var(--bg-base);
  border: 1px solid var(--border-color);
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.25s ease;
}

.calc-cat-btn:hover, .calc-cat-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(132, 51, 156, 0.2);
}

.dark-mode .calc-cat-btn {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .calc-cat-btn:hover, .dark-mode .calc-cat-btn.active {
  background: var(--secondary);
  color: white;
  border-color: var(--secondary);
}

.calc-table th {
  padding: 12px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-family: var(--font-heading);
  font-weight: 700;
}

.dark-mode .calc-table th {
  background: rgba(15, 23, 42, 0.6);
  color: var(--secondary-light);
}

.calc-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
}

.dark-mode .calc-table td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.calc-table tr:hover td {
  background: rgba(148, 163, 184, 0.03);
}

.btn-download-rate {
  transition: var(--transition);
}

.btn-download-rate:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.thai-btn:hover {
  background: var(--primary-light) !important;
}

.foreign-btn:hover {
  background: #ffedd5 !important;
}

.dark-mode .thai-btn {
  background: rgba(30, 58, 138, 0.3) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #f3d6fa !important;
}

.dark-mode .foreign-btn {
  background: rgba(124, 45, 18, 0.3) !important;
  border-color: rgba(249, 115, 22, 0.3) !important;
  color: #fed7aa !important;
}

.dark-mode .thai-btn:hover {
  background: rgba(30, 58, 138, 0.5) !important;
}

.dark-mode .foreign-btn:hover {
  background: rgba(124, 45, 18, 0.5) !important;
}

/* High Contrast adjustments for Rates */
.high-contrast .rates-memo-paper {
  border: 2px solid #ffffff !important;
  background: #000000 !important;
}

.high-contrast .rates-calculator-card {
  background: #000000 !important;
  border: 2px solid #ffffff !important;
}

.high-contrast .calc-search-box {
  background: #000000 !important;
  border: 2px solid #ffffff !important;
}

.high-contrast .calc-search-box input {
  color: #ffffff !important;
}

.high-contrast .calc-cat-btn {
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
}

.high-contrast .calc-cat-btn.active, .high-contrast .calc-cat-btn:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

.high-contrast .calc-table th {
  background: #333333 !important;
  color: #ffffff !important;
}

.high-contrast .calc-table td {
  border-bottom: 1px solid #ffffff !important;
  color: #ffffff !important;
}

.high-contrast .btn-download-rate {
  background: #000000 !important;
  color: #ffff00 !important;
  border: 2px solid #ffff00 !important;
}

.high-contrast .btn-download-rate:hover {
  background: #ffff00 !important;
  color: #000000 !important;
}

/* Responsive grid for rates */
@media (max-width: 992px) {
  .rates-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .rates-grid > * {
    min-width: 0;
  }
  .rates-memo-column {
    max-width: 500px;
    margin: 0 auto;
  }
}

/* Adjust header spacing in policies section to move filter tabs closer */
#policies .section-header {
  margin-bottom: 10px;
}



/* ==========================================================================
   14. INTERNAL PORTALS HUB SECTION
   ========================================================================== */
#internal-portals {
  padding: 40px 0;
}

.dept-panes-wrapper {
  margin-top: 30px;
}

.dept-tab-pane {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.dept-tab-pane.active {
  display: grid;
  opacity: 1;
  transform: translateY(0);
}

.dept-portal-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  z-index: 1;
}

/* Glassmorphism subtle overlay on hover */
.dept-portal-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
  pointer-events: none;
  z-index: 1;
}

/* Vertical colored accent line on the left */
.dept-portal-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--primary);
  transition: var(--transition);
}

.dept-portal-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--secondary);
}

.dept-portal-card:hover::after {
  background: var(--secondary);
  width: 6px;
}

.dept-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.dept-card-icon {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.dept-card-titles h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 4px;
  line-height: 1.3;
}

.dept-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-heading);
}

.tag-clinical {
  color: var(--primary);
  background: var(--secondary-light);
  border: 1px solid var(--primary-light);
}

.tag-nursing {
  color: #ec4899;
  background: #fdf2f8;
  border: 1px solid #fce7f3;
}

.tag-support {
  color: #f59e0b;
  background: #fef3c7;
  border: 1px solid #fef3c7;
}

.dept-card-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.dept-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition);
}

.dept-portal-card:hover .dept-card-link {
  color: var(--secondary);
}

/* ==========================================================================
   15. MEGA FOOTER PORTAL STYLING OVERRIDES
   ========================================================================== */
footer {
  background-color: #f7f4f9 !important; /* Soft lavender-purple tint light background */
  color: var(--text-main) !important;
  padding: 40px 0 20px !important;
  border-top: 1px solid var(--border-color) !important;
}

.footer-grid {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr !important;
  gap: 32px !important;
  margin-bottom: 24px !important;
}

.footer-brand .footer-logo h3 {
  color: var(--primary-dark) !important;
  font-size: 1.25rem !important;
}

.footer-brand p {
  color: var(--text-muted) !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
}

.footer-links h3 {
  color: var(--primary-dark) !important;
  font-size: 1.05rem !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  margin-bottom: 14px !important;
  position: relative !important;
  padding-bottom: 6px !important;
}

.footer-links h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background-color: var(--secondary);
}

.footer-nav {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.footer-nav a {
  color: var(--text-muted) !important;
  font-size: 0.86rem !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: var(--transition) !important;
  text-decoration: none !important;
}

.footer-nav a:hover {
  color: var(--secondary) !important;
  transform: translateX(4px) !important;
}

/* Dark Mode / High Contrast adjustments for Footer */
body.high-contrast footer {
  background-color: var(--bg-surface) !important;
  color: var(--text-main) !important;
}
body.high-contrast .footer-brand .footer-logo h3,
body.high-contrast .footer-links h3 {
  color: #ffffff !important;
}
body.high-contrast .footer-brand p,
body.high-contrast .footer-nav a {
  color: var(--text-muted) !important;
}
body.high-contrast .footer-nav a:hover {
  color: var(--primary) !important;
}

/* Dark Mode / High Contrast adjustments for new elements */
body.high-contrast .dept-portal-card {
  background: #000000 !important;
  border: 2px solid #ffffff !important;
}

body.high-contrast .dept-portal-card::after {
  display: none !important;
}

body.high-contrast .dept-card-titles h4 {
  color: #ffffff !important;
}

body.high-contrast .dept-card-icon {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
}

body.high-contrast .dept-tag {
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
}

body.high-contrast .dept-card-link {
  color: #ffff00 !important;
}

body.high-contrast .dept-card-link:hover {
  text-decoration: underline !important;
}

/* Responsive queries for grids */
@media (max-width: 1200px) {
  .dept-tab-pane {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr !important;
    gap: 30px !important;
  }
  .hero-title {
    font-size: 2.1rem;
  }
}

@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }
}

@media (max-width: 768px) {
  .dept-tab-pane {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  #internal-portals {
    padding: 40px 0;
  }
}


.tag-external {
  color: #8b5cf6;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
}

body.high-contrast .tag-external {
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
}

/* ==========================================================================
   ORGANIZATIONAL STRUCTURE & EXECUTIVE BOARD STYLES
   ========================================================================== */

/* Sub-Tab Navigation inside About Section */
#org-structure .filter-btn {
  background: var(--bg-surface);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  transition: var(--transition);
}

#org-structure .filter-btn.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(132, 51, 156, 0.25);
}

/* Executive Board Hierarchy Tree */
.executive-board-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  padding: 10px 0;
}

.board-level {
  display: grid;
  gap: 24px;
  width: 100%;
  justify-content: center;
}

.level-director {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

/* Deputies: 3 cards on row 1, 4 on row 2. Each card spans two of eight
   half-width tracks; row 1 starts one track in so it sits centred. */
.level-deputies {
  grid-template-columns: repeat(8, minmax(0, 148px));
}

.level-deputies .executive-card {
  grid-column: span 2;
}

.level-deputies .executive-card:first-child {
  grid-column: 2 / span 2;
}

.level-assistants {
  grid-template-columns: repeat(3, minmax(220px, 280px));
}

.level-title {
  font-size: 1.15rem;
  color: var(--primary-dark);
  font-weight: 700;
  margin: 36px 0 20px;
  text-align: center;
  position: relative;
  font-family: var(--font-heading);
  letter-spacing: 0.5px;
}

.level-title::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background-color: var(--accent);
  border-radius: 2px;
}

/* Tree Connectors (Vertical lines) */
.tree-line {
  width: 2px;
  height: 24px;
  background-color: var(--border-color);
  margin: 16px 0;
}

/* Executive Card Styling */
.executive-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.executive-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

/* Director Theme Frame */
.director-card-theme {
  border: 2px solid var(--primary);
  box-shadow: 0 4px 20px -2px rgba(132, 51, 156, 0.15);
  background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(132, 51, 156, 0.03) 100%);
}

.director-card-theme:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 25px -5px rgba(132, 51, 156, 0.3), var(--shadow-md);
}

/* Avatar Frame */
.executive-avatar {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 16px;
  background-color: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.executive-card:hover .executive-avatar {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.director-card-theme .executive-avatar {
  width: 150px;
  height: 150px;
  border-color: var(--primary);
}

.executive-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%;
  image-rendering: -webkit-optimize-contrast;
  filter: brightness(1.01) contrast(1.02);
}

/* Placeholder avatar style */
.executive-avatar.placeholder {
  color: var(--primary);
  font-size: 2.75rem;
  border-color: var(--border-color);
}

.executive-card h4 {
  font-size: 1.1rem;
  color: var(--text-main);
  font-weight: 700;
  margin-bottom: 6px;
  font-family: var(--font-heading);
  letter-spacing: 0.3px;
}

.executive-card .role {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.4;
}

/* Department Missions Accordion */
.missions-accordion-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1000px;
  margin: 0 auto;
}

.mission-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition);
}

.mission-item:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.mission-header {
  width: 100%;
  padding: 18px 24px;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-main);
  font-size: 1.1rem;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-heading);
}

.mission-header span {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mission-header span i {
  color: var(--primary);
  font-size: 1.35rem;
  width: 28px;
  text-align: center;
  transition: var(--transition);
}

.mission-header .chevron {
  color: var(--text-muted);
  font-size: 0.95rem;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mission-item.active {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.mission-item.active .mission-header {
  background-color: var(--primary-light);
  color: var(--primary-dark);
}

.mission-item.active .mission-header span i {
  color: var(--primary-dark);
  transform: scale(1.1);
}

.mission-item.active .chevron {
  transform: rotate(180deg);
  color: var(--primary-dark);
}

/* Accordion slide animation content */
.mission-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mission-content-inner {
  padding: 8px 24px 24px 64px;
  border-top: 1px solid rgba(132, 51, 156, 0.08);
}

.mission-content-inner ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.mission-content-inner ul li {
  font-size: 0.95rem;
  color: var(--text-main);
  position: relative;
  padding-left: 18px;
  font-family: var(--font-body);
}

.mission-content-inner ul li::before {
  content: '•';
  color: var(--accent);
  font-size: 1.2rem;
  position: absolute;
  left: 0;
  top: -1px;
}

/* Two columns list for long lists */
.two-column-list {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px 30px !important;
}

/* Responsive Overrides */
@media (max-width: 992px) {
  .level-deputies {
    grid-template-columns: repeat(2, 1fr);
  }
  .level-deputies .executive-card,
  .level-deputies .executive-card:first-child {
    grid-column: auto;
  }
  .level-assistants {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .level-deputies, .level-assistants {
    grid-template-columns: 1fr;
    max-width: 300px;
    margin: 0 auto;
  }
  .mission-content-inner {
    padding: 12px 16px 20px 24px;
  }
  .two-column-list {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .mission-header {
    padding: 16px 16px;
    font-size: 0.98rem;
  }
  .mission-header span i {
    font-size: 1.15rem;
  }
}

/* High Contrast theme styles */
body.high-contrast #org-structure .filter-btn {
  background: #000000;
  color: #ffffff;
  border-color: #ffffff;
}

body.high-contrast #org-structure .filter-btn.active {
  background: #ff51a3;
  color: #000000;
  border-color: #ff51a3;
}

body.high-contrast .executive-card {
  background: #230534;
  border-color: #4a1c5d;
}

body.high-contrast .executive-card:hover {
  border-color: #ff51a3;
}

body.high-contrast .director-card-theme {
  border-color: #ff51a3;
  background: #230534;
}

body.high-contrast .director-card-theme .executive-avatar {
  border-color: #ff51a3;
}

body.high-contrast .executive-avatar.placeholder {
  color: #ff51a3;
  border-color: #4a1c5d;
  background-color: #14021f;
}

body.high-contrast .mission-item {
  background: #230534;
  border-color: #4a1c5d;
}

body.high-contrast .mission-item:hover {
  border-color: #ff51a3;
}

body.high-contrast .mission-item.active .mission-header {
  background-color: #ff51a3;
  color: #000000;
}

body.high-contrast .mission-item.active .mission-header span i,
body.high-contrast .mission-item.active .chevron {
  color: #000000;
}

/* ==========================================================================
   STRATEGIC PLAN (house diagram: vision roof, mission/goal body, 5 pillars)
   ========================================================================== */

/* Gradient stops keep white text at >= 4.9:1 contrast. */
.sp-plan {
  --sp-accent: #c2398e;
  --sp-line: rgba(194, 57, 142, 0.35);
  --sp-gradient: linear-gradient(135deg, #84339c 0%, #a7368f 55%, #c2398e 100%);
  --sp-peak: 110px;
  max-width: 1100px;
  margin: 24px auto 0;
}

body.high-contrast .sp-plan {
  --sp-accent: #ff51a3;
  --sp-line: #4a1c5d;
}

/* Roof — clip-path can't cast a shadow, so the wrapper carries it */
.sp-roof-wrap {
  filter: drop-shadow(0 8px 18px rgba(132, 51, 156, 0.22));
}

.sp-roof {
  background: var(--sp-gradient);
  clip-path: polygon(50% 0, 100% var(--sp-peak), 100% 100%, 0 100%, 0 var(--sp-peak));
  border-radius: 0 0 28px 28px;
  padding: 40px 6% 28px;
  text-align: center;
  color: #ffffff;
}

.sp-roof-icon {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--sp-accent);
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.sp-plan .sp-roof h3 {
  color: #ffffff;
  font-size: 2rem;
}

.sp-vision-text {
  max-width: 760px;
  margin: 14px auto 0;
  padding: 14px 22px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: 1.6rem;
  line-height: 1.45;
}

/* Body — inset from the roof so the eaves overhang */
.sp-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 4%;
  padding: 28px 0 24px;
  background: var(--bg-surface);
  border: 2px solid var(--sp-line);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.sp-col {
  padding: 0 28px;
}

.sp-col + .sp-col {
  border-left: 2px solid var(--sp-line);
}

.sp-plan .sp-col h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--sp-accent);
  font-size: 1.75rem;
}

.sp-list {
  list-style: none;
  counter-reset: sp;
  display: grid;
  gap: 12px;
}

.sp-list li {
  counter-increment: sp;
  position: relative;
  padding-left: 40px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-main);
}

.sp-list li::before {
  content: counter(sp);
  position: absolute;
  left: 0;
  top: 1px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sp-accent);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
}

body.high-contrast .sp-list li::before {
  color: #14021f;
}

/* Strategic issue bar */
.sp-plan .sp-issue-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 32px 0 18px;
  padding: 14px 24px;
  background: var(--sp-gradient);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(132, 51, 156, 0.22);
  color: #ffffff;
  font-size: 1.75rem;
  text-align: center;
}

/* Pillars: 5 across; 3 + 2 on tablet (6 tracks, row 2 offset one track) */
.sp-pillars {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.sp-pillar {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.sp-pillar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 24px;
  background: var(--sp-gradient);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
  color: #ffffff;
}

.sp-pillar-no {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.25;
}

.sp-pillar-letter {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
}

/* min-height fits a two-line title, so the กลยุทธ์ labels line up across cards */
.sp-pillar-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 118px;
  padding: 8px 14px 12px;
  text-align: center;
}

.sp-plan .sp-pillar h5 {
  margin-bottom: 4px;
  color: var(--text-main);
  font-size: 1.4rem;
}

.sp-pillar-body p {
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* Keeps each phrase whole so titles wrap between phrases, as in the source diagram */
.sp-nb {
  display: inline-block;
}

.sp-pillar-tactics {
  flex: 1;
  padding: 0 14px 18px;
}

.sp-tactics-label {
  display: block;
  margin-bottom: 12px;
  padding: 3px 12px;
  background: #84339c;
  border-radius: 999px;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  text-align: center;
}

.sp-list-sm {
  gap: 10px;
}

.sp-list-sm li {
  padding-left: 30px;
  font-size: 0.88rem;
  line-height: 1.55;
}

.sp-list-sm li::before {
  width: 22px;
  height: 22px;
  font-size: 0.78rem;
}

/* Core values + focus areas */
.sp-extra {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  margin-top: 28px;
}

.sp-card {
  padding: 24px;
  background: var(--bg-surface);
  border: 2px solid var(--sp-line);
  border-radius: var(--radius-lg);
}

.sp-plan .sp-card h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--sp-accent);
  font-size: 1.6rem;
}

.sp-badge {
  padding: 2px 12px;
  background: #84339c;
  border-radius: var(--radius-sm);
  color: #ffffff;
  font-size: 1.1rem;
}

.sp-values-list {
  list-style: none;
  display: grid;
  gap: 10px;
}

.sp-values-list li {
  display: grid;
  grid-template-columns: 40px 1fr 1fr;
  align-items: center;
  gap: 14px;
  padding: 6px 18px 6px 6px;
  border: 1px solid var(--sp-line);
  border-radius: 999px;
}

.sp-value-letter {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sp-gradient);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
}

.sp-value-en {
  color: var(--text-main);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
}

.sp-value-th {
  padding-left: 14px;
  border-left: 2px solid var(--sp-line);
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* Beside the taller core-values card, centre the list in the leftover height */
.sp-focus {
  display: flex;
  flex-direction: column;
}

.sp-focus-list {
  flex: 1;
  align-content: center;
  gap: 16px;
}

.sp-focus-list li {
  padding-left: 48px;
  font-family: var(--font-heading);
  font-size: 1.45rem;
  line-height: 36px;
}

.sp-focus-list li::before {
  top: 0;
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
}

.sp-signoff {
  margin-top: 28px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.sp-signoff-name {
  color: var(--text-main);
  font-weight: 600;
}

.sp-source {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-color);
  text-align: right;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.sp-source i {
  margin-right: 6px;
  color: var(--secondary);
}

@media (max-width: 992px) {
  .sp-pillars {
    grid-template-columns: repeat(6, 1fr);
  }
  .sp-pillar {
    grid-column: span 2;
  }
  .sp-pillar:nth-child(4) {
    grid-column: 2 / span 2;
  }
  .sp-extra {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .sp-plan {
    --sp-peak: 80px;
  }
  .sp-roof {
    padding: 28px 5% 22px;
  }
  .sp-roof-icon {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
  }
  .sp-plan .sp-roof h3 {
    font-size: 1.65rem;
  }
  .sp-vision-text {
    font-size: 1.3rem;
    padding: 12px 14px;
  }
  .sp-body {
    grid-template-columns: 1fr;
    margin: 0 3%;
    padding: 22px 0 18px;
  }
  .sp-col {
    padding: 0 18px;
  }
  .sp-col + .sp-col {
    border-left: none;
    border-top: 2px solid var(--sp-line);
    margin-top: 22px;
    padding-top: 22px;
  }
  .sp-plan .sp-issue-bar {
    font-size: 1.4rem;
    padding: 12px 18px;
  }
  .sp-card {
    padding: 20px 16px;
  }
  .sp-plan .sp-card h4 {
    font-size: 1.4rem;
  }
}

/* Phones: one pillar per row; core-value rows stack the Thai gloss under the English */
@media (max-width: 600px) {
  .sp-pillars {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .sp-pillar,
  .sp-pillar:nth-child(4) {
    grid-column: auto;
  }
  .sp-pillar-body {
    min-height: 0;
  }
  .sp-values-list li {
    grid-template-columns: 40px 1fr;
    gap: 2px 12px;
    padding: 8px 16px 8px 8px;
    border-radius: var(--radius-md);
  }
  .sp-value-letter {
    grid-row: span 2;
  }
  .sp-value-th {
    padding-left: 0;
    border-left: none;
  }
}

/* Announcement Editor and File Uploader Styles */
.ql-toolbar.ql-snow {
  border-color: var(--border-color) !important;
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  background-color: var(--bg-light);
}

.ql-container.ql-snow {
  border-color: var(--border-color) !important;
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
}

#image-upload-zone.dragover {
  border-color: var(--primary) !important;
  background-color: var(--primary-light) !important;
  color: var(--primary) !important;
}

#issue-attachment-zone:hover {
  border-color: var(--primary);
  background-color: var(--primary-light);
}

/* Print Layout Optimization */
@media print {
  body * {
    visibility: hidden;
  }
  #news-detail-modal,
  #news-detail-modal * {
    visibility: visible;
  }
  #news-detail-modal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    background: white !important;
  }
  .admin-modal-container {
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  .admin-modal-header button,
  .admin-modal-footer {
    display: none !important;
  }
  #news-modal-body {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ===== TOAST NOTIFICATION SYSTEM ===== */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: 440px;
  width: calc(100% - 48px);
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  pointer-events: auto;
  transform: translateX(120%);
  opacity: 0;
  animation: toastSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.toast:hover {
  transform: translateX(0) scale(1.01);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
}

.toast.toast-exit {
  animation: toastSlideOut 0.4s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

@keyframes toastSlideIn {
  0% { transform: translateX(120%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes toastSlideOut {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

/* Toast Progress Bar */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0 0 16px 16px;
  animation: toastProgress linear forwards;
}

@keyframes toastProgress {
  0% { width: 100%; }
  100% { width: 0%; }
}

/* Toast Icon */
.toast-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* Toast Content */
.toast-body {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 4px;
  line-height: 1.3;
}

.toast-message {
  font-size: 0.85rem;
  line-height: 1.5;
  opacity: 0.85;
}

.toast-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  opacity: 0.6;
}

.toast-close:hover {
  background: rgba(255, 255, 255, 0.2);
  opacity: 1;
}

/* Toast Type: SUCCESS */
.toast-success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.92), rgba(5, 150, 105, 0.95));
  color: #fff;
}

.toast-success .toast-icon {
  background: rgba(255, 255, 255, 0.2);
}

.toast-success .toast-progress {
  background: rgba(255, 255, 255, 0.4);
}

/* Toast Type: ERROR */
.toast-error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.92), rgba(220, 38, 38, 0.95));
  color: #fff;
}

.toast-error .toast-icon {
  background: rgba(255, 255, 255, 0.2);
}

.toast-error .toast-progress {
  background: rgba(255, 255, 255, 0.4);
}

/* Toast Type: WARNING */
.toast-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.92), rgba(217, 119, 6, 0.95));
  color: #fff;
}

.toast-warning .toast-icon {
  background: rgba(255, 255, 255, 0.2);
}

.toast-warning .toast-progress {
  background: rgba(255, 255, 255, 0.4);
}

/* Toast Type: INFO */
.toast-info {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.92), rgba(37, 99, 235, 0.95));
  color: #fff;
}

.toast-info .toast-icon {
  background: rgba(255, 255, 255, 0.2);
}

.toast-info .toast-progress {
  background: rgba(255, 255, 255, 0.4);
}

/* ===== CONFIRM DIALOG ===== */
.confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: confirmFadeIn 0.3s ease forwards;
}

.confirm-overlay.confirm-exit {
  animation: confirmFadeOut 0.25s ease forwards;
}

@keyframes confirmFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes confirmFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.confirm-dialog {
  background: #fff;
  border-radius: 20px;
  padding: 36px 32px 28px;
  max-width: 420px;
  width: calc(100% - 48px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.1);
  text-align: center;
  transform: scale(0.85) translateY(20px);
  animation: confirmPopIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.confirm-overlay.confirm-exit .confirm-dialog {
  animation: confirmPopOut 0.2s ease forwards;
}

@keyframes confirmPopIn {
  0% { transform: scale(0.85) translateY(20px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes confirmPopOut {
  0% { transform: scale(1) translateY(0); opacity: 1; }
  100% { transform: scale(0.9) translateY(10px); opacity: 0; }
}

.confirm-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.confirm-icon.confirm-icon-warning {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #d97706;
}

.confirm-icon.confirm-icon-danger {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #dc2626;
}

.confirm-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 10px;
}

.confirm-message {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 28px;
}

.confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.confirm-btn {
  padding: 12px 28px;
  border-radius: 12px;
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
}

.confirm-btn-cancel {
  background: #f1f5f9;
  color: #475569;
}

.confirm-btn-cancel:hover {
  background: #e2e8f0;
}

.confirm-btn-confirm {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.confirm-btn-confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

.confirm-btn-primary {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.confirm-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

@media (max-width: 480px) {
  .toast-container {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: 100%;
  }
  .toast {
    padding: 14px 16px;
    gap: 10px;
  }
  .confirm-dialog {
    padding: 28px 20px 22px;
  }
  .confirm-actions {
    flex-direction: column-reverse;
  }
  .confirm-btn {
    width: 100%;
  }
}

/* ===== HOLIDAY POPUP MODAL ===== */
body.no-scroll {
  overflow: hidden !important;
}

.holiday-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.holiday-modal-container {
  background: #ffffff;
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
  transform: scale(0.9);
  opacity: 0;
  animation: holidayPopupIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.holiday-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  background: var(--bg-light);
}

.holiday-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.holiday-close-circle {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.holiday-close-circle:hover {
  background: #ef4444;
  transform: rotate(90deg);
}

.holiday-modal-actions {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.holiday-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #ffffff;
  padding: 12px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
  transition: var(--transition);
}

.holiday-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.45);
}

.holiday-dismiss-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 12px;
}

.holiday-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.holiday-checkbox-label input {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
  cursor: pointer;
}

.holiday-btn-close {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-main);
  transition: var(--transition);
}

.holiday-btn-close:hover {
  background: var(--border-color);
}

/* Height-based responsive rules to prevent popup overflow/scroll on shorter viewports */
@media (max-height: 820px) {
  .holiday-modal-container {
    max-width: 500px;
  }
  .holiday-modal-actions {
    padding: 16px;
    gap: 12px;
  }
}

@media (max-height: 700px) {
  .holiday-modal-container {
    max-width: 420px;
  }
  .holiday-modal-actions {
    padding: 12px;
    gap: 8px;
  }
}

@media (max-height: 580px) {
  .holiday-modal-container {
    max-width: 320px;
  }
}

@keyframes holidayPopupIn {
  0% { transform: scale(0.9) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@media (max-width: 480px) {
  .holiday-modal-overlay {
    padding: 16px;
  }
  .holiday-modal-container {
    max-width: 100%;
  }
  .holiday-dismiss-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .holiday-btn-close {
    text-align: center;
  }
}

/* Dark Mode / High Contrast adjustments for Holiday Modal */
body.high-contrast .holiday-modal-container {
  background: #000000 !important;
  border: 2px solid #ffffff !important;
}

body.high-contrast .holiday-modal-actions {
  background: #000000 !important;
}

body.high-contrast .holiday-btn-primary {
  background: #ffff00 !important;
  color: #000000 !important;
  box-shadow: none !important;
}

body.high-contrast .holiday-btn-primary:hover {
  text-decoration: underline !important;
}

body.high-contrast .holiday-btn-close {
  background: #000000 !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
}

body.high-contrast .holiday-btn-close:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

body.high-contrast .holiday-checkbox-label {
  color: #ffffff !important;
}

/* Floating Viewport Close Button Styles */
.holiday-close-top-right {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  border-radius: 50%;
  font-size: 1.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100005;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.holiday-close-top-right:hover {
  background: #ef4444;
  color: #ffffff;
  transform: rotate(90deg) scale(1.08);
  border-color: #ef4444;
}

@media (max-width: 768px) {
  .holiday-close-top-right {
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    font-size: 1.5rem;
  }
}

body.high-contrast .holiday-close-top-right {
  background: #000000 !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
}

body.high-contrast .holiday-close-top-right:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
}

/* Calendar Widget Styles */
.mini-calendar {
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.calendar-day-btn {
  background: none;
  border: none;
  padding: 4px 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-main);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}
.calendar-day-btn:hover {
  background-color: var(--primary-light);
  color: var(--primary);
}
.calendar-day-btn.empty {
  cursor: default;
  pointer-events: none;
}
.calendar-day-btn.today {
  border: 1px solid var(--primary);
  font-weight: bold;
}
.calendar-day-btn.selected {
  background-color: var(--primary) !important;
  color: white !important;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(132, 51, 156, 0.3);
}
.calendar-day-btn.has-leaves {
  position: relative;
}
.calendar-day-btn.has-leaves::after {
  content: '';
  position: absolute;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #dc2626;
}

/* Status Badge - On Leave */
.status-badge.on-leave {
  background-color: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

/* Responsive sidebar */
@media (max-width: 768px) {
  .doctor-search-grid {
    grid-template-columns: 1fr !important;
  }
  .doctor-search-sidebar {
    position: static !important;
    max-height: none !important;
    overflow-y: visible !important;
    box-shadow: none !important;
    margin-bottom: 20px;
  }
}

/* Staff Portal Admin -- preset-picker vs. custom-upload icon mode toggle */
.sp-icon-mode-btn.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}

/* Staff Portal Admin -- Icon Picker (curated choices instead of free text) */
.sp-icon-option {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.sp-icon-option:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

.sp-icon-option.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

/* Staff Portal Section Styling */
.staff-portal-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.staff-portal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: none;
  border: none;
  padding: 14px 8px;
  text-decoration: none;
  color: var(--text-main);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.staff-portal-card:hover {
  transform: translateY(-4px);
}

.staff-portal-card:hover .staff-card-icon {
  box-shadow: var(--shadow-glow), 0 8px 24px rgba(132, 51, 156, 0.08);
}

.staff-portal-card:hover h4 {
  color: var(--primary);
}

.staff-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 12px;
  transition: box-shadow 0.3s ease;
}

.staff-portal-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0;
  transition: color 0.3s ease;
  color: var(--text-main);
  font-family: var(--font-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* CSS-only tooltip (shown on mouse hover) -- same convention as .bar-segment
   tooltips: content comes from data-tooltip, no extra DOM element needed. */
.staff-portal-card[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: rgba(15, 23, 42, 0.95);
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  width: max-content;
  max-width: 220px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 100;
}

.staff-portal-card[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(15, 23, 42, 0.95) transparent transparent transparent;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
}

.staff-portal-card[data-tooltip]:hover::after,
.staff-portal-card[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-6px);
}

/* Responsive constraints for Staff Portal Grid.
   Cards are now icon+title only (description moved to a hover tooltip), so
   they're much shorter -- more columns fit comfortably per row than before. */
@media (max-width: 1199px) {
  .staff-portal-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .staff-portal-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

@media (max-width: 479px) {
  .staff-portal-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}


/* ============================================================
   น้องนำทางสุขภาพ – Floating Health Guide Widget Styles
   (Theme: Royal Purple #84339c / Vibrant Pink #ff51a3)
   ============================================================ */

/* ---- FAB (Floating Action Button) ---- */
#hg-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-family: 'Sarabun', 'IBM Plex Sans Thai', sans-serif;
}

.hg-fab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: linear-gradient(135deg, #84339c 0%, #a855f7 100%);
  border: none;
  border-radius: 40px;
  padding: 6px 12px 6px 10px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(132, 51, 156, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: white;
}
.hg-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(132, 51, 156, 0.35);
}
.hg-fab:active { transform: scale(0.97); }

/* Mascot avatar inside FAB */
.hg-fab-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 1.5px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.15);
  display: block;
}
/* Fallback emoji when image not loaded */
.hg-fab-avatar-emoji {
  font-size: 1.6rem;
  line-height: 1;
}

.hg-fab-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0.95;
}

/* Online pulse ring */
.hg-fab-pulse {
  position: absolute;
  top: 4px;
  right: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: hg-pulse 2.5s ease-out infinite;
}
@keyframes hg-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
  70%  { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* ---- Chat Panel ---- */
.hg-panel {
  width: 330px;
  max-width: calc(100vw - 24px);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(132, 51, 156, 0.12), 0 1px 3px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  animation: hg-panel-in 0.25s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  max-height: calc(100vh - 100px);
  border: 1px solid #f1f5f9;
}
.hg-panel[hidden] { display: none !important; }

@keyframes hg-panel-in {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Header with mascot */
.hg-header {
  background: linear-gradient(135deg, #84339c 0%, #a78bfa 100%);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: relative;
}

.hg-header-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hg-header-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 1.5px solid rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}
.hg-header-avatar-emoji {
  font-size: 1.8rem;
  background: rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 3px 5px;
  line-height: 1;
}
.hg-header-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.hg-header-sub {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.9);
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.hg-header-sub::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 1.5px rgba(34,197,94,0.3);
  flex-shrink: 0;
}
.hg-close-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.hg-close-btn:hover { background: rgba(255,255,255,0.25); transform: rotate(90deg); }

/* Messages area */
.hg-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f8fafc;
  min-height: 0;
  max-height: 280px;
  scroll-behavior: smooth;
}
.hg-messages::-webkit-scrollbar { width: 3px; }
.hg-messages::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* Message bubbles */
.hg-msg {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}
.hg-msg.bot { flex-direction: row; }
.hg-msg.user { flex-direction: row-reverse; }

.hg-msg-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(132,51,156,0.15);
  background: #fff;
}
.hg-msg-icon img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hg-msg-icon-emoji {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #84339c, #a78bfa);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.hg-msg-bubble {
  max-width: 82%;
  padding: 7px 11px;
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  word-break: break-word;
}
.hg-msg.bot .hg-msg-bubble {
  background: #fff;
  color: #1e293b;
  border-radius: 2px 12px 12px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  border: 1px solid #f1f5f9;
}
.hg-msg.user .hg-msg-bubble {
  background: #84339c;
  color: #fff;
  border-radius: 12px 2px 12px 12px;
}

/* Emergency result card */
.hg-result-card {
  background: #fffbeb;
  border: 1px solid #fef3c7;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.78rem;
  line-height: 1.5;
}
.hg-result-card.emergency {
  background: #fef2f2;
  border-color: #fee2e2;
}
.hg-result-card.normal {
  background: #f5f3ff;
  border-color: #ede9fe;
}
.hg-result-dept {
  font-weight: 700;
  font-size: 0.85rem;
  color: #1e293b;
  margin-bottom: 2px;
}
.hg-result-urgency {
  display: inline-block;
  border-radius: 99px;
  padding: 1px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.urgency-er    { background: #fee2e2; color: #ef4444; }
.urgency-today { background: #fef3c7; color: #d97706; }
.urgency-appt  { background: #f3e8ff; color: #8b5cf6; }
.hg-result-reason { color: #475569; font-size: 0.76rem; margin-top: 4px; }
.hg-result-note {
  margin-top: 6px;
  font-size: 0.7rem;
  color: #94a3b8;
  border-top: 1px solid #f1f5f9;
  padding-top: 4px;
}

/* Quick chips */
.hg-chips-wrap {
  padding: 4px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  flex-shrink: 0;
}
.hg-chip {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 99px;
  padding: 3px 9px;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  font-family: inherit;
}
.hg-chip:hover {
  background: #84339c;
  color: #fff;
  border-color: #84339c;
}

/* Typing dots */
.hg-typing {
  display: flex; gap: 3px; align-items: center; padding: 2px 0;
}
.hg-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #cbd5e1;
  animation: hg-blink 1.3s infinite ease-in-out both;
}
.hg-typing span:nth-child(2) { animation-delay: 0.2s; }
.hg-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes hg-blink {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Input row */
.hg-input-row {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  background: #fff;
  border-top: 1px solid #f1f5f9;
  flex-shrink: 0;
}
.hg-input {
  flex: 1;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 0.82rem;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  color: #1e293b;
  background: #f8fafc;
}
.hg-input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 2px rgba(168,85,247,0.1);
  background: #fff;
}
.hg-send-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #84339c, #a855f7);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(132,51,156,0.15);
  transition: transform 0.15s, box-shadow 0.15s;
}
.hg-send-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(132,51,156,0.25);
}
.hg-send-btn:active { transform: scale(0.95); }

/* Attach-image button */
.hg-attach-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #84339c;
  border: 1px solid #e2e8f0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.15s;
}
.hg-attach-btn:hover { background: #ede9fe; transform: scale(1.05); }
.hg-attach-btn:active { transform: scale(0.95); }

/* Pending image preview, shown above the input row before sending */
.hg-image-preview-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 0;
  background: #fff;
  flex-shrink: 0;
}
.hg-image-preview {
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.hg-image-preview-remove {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 0.7rem;
  flex-shrink: 0;
}
.hg-image-preview-remove:hover { background: #fee2e2; color: #dc2626; }

/* Image thumbnail shown inside a sent chat bubble */
.hg-msg-image {
  max-width: 160px;
  max-height: 160px;
  border-radius: 10px;
  display: block;
  margin-bottom: 4px;
  object-fit: cover;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  #hg-widget { bottom: 12px; right: 12px; }
  .hg-panel { width: calc(100vw - 24px); border-radius: 12px; }
  .hg-messages { max-height: 220px; }
}