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

:root {
  /* Blue and White Theme Colors (Light Mode) */
  --primary: #0a3d62;          /* Deep Navy Blue */
  --primary-light: #3c6382;    /* Medium Blue */
  --accent: #0088cc;           /* Bright Blue Accent */
  --bg-color: #f1f5f9;         /* Light Soft Grey/White background */
  --card-bg: #ffffff;          /* Pure White for cards/content */
  --text-primary: #1e293b;     /* Slate 800 */
  --text-secondary: #64748b;   /* Slate 600 */
  --border-color: #e2e8f0;     /* Light Grey border */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(10, 61, 98, 0.08), 0 2px 4px -1px rgba(10, 61, 98, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(10, 61, 98, 0.1), 0 4px 6px -4px rgba(10, 61, 98, 0.1);
  --radius: 12px;
  --radius-sm: 6px;
  --header-bg: linear-gradient(135deg, #0a3d62 0%, #1e3a8a 100%);
  --nav-bg: #ffffff;
  --nav-text: #0a3d62;
  --footer-bg: #0a3d62;
  --footer-text: #ffffff;
}

[data-theme="dark"] {
  /* Blue and White Theme (Dark Mode) */
  --primary: #60a5fa;          /* Soft Neon Blue */
  --primary-light: #93c5fd;    /* Lighter Blue */
  --accent: #38bdf8;           /* Cyan Accent */
  --bg-color: #0f172a;         /* Slate 900 (Dark background) */
  --card-bg: #1e293b;          /* Slate 800 (Card/Content background) */
  --text-primary: #f8fafc;     /* Slate 50 */
  --text-secondary: #94a3b8;   /* Slate 400 */
  --border-color: #334155;     /* Dark Border */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
  --header-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  --nav-bg: #1e293b;
  --nav-text: #f8fafc;
  --footer-bg: #1e293b;
  --footer-text: #f8fafc;
}

/* Global Reset & Typography */
body {
  font-family: 'Sarabun', 'Kanit', sans-serif !important;
  background-color: var(--bg-color) !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  padding: 0 !important;
  filter: none !important; /* Override legacy grayscale filters */
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Override legacy font sizes/families from style definitions */
.style5, .style6, .style7, .style12, .style13, .style15, .style18, .style19, .style21, .style23, .style24, .style25, .style131, .style151, .moodu, td, th {
  font-family: 'Sarabun', 'Kanit', sans-serif !important;
  color: var(--text-primary) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

/* Links */
a {
  color: var(--primary) !important;
  transition: color 0.2s ease !important;
  text-decoration: none !important;
}
a:hover {
  color: var(--primary-light) !important;
  text-decoration: underline !important;
}

/* Table-based layout override */
.site-layout-outer {
  display: block !important;
  width: 95% !important;
  max-width: 1000px !important;
  margin: 30px auto !important;
  background-color: var(--card-bg) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border-color) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.site-layout-outer > tbody,
.site-layout-outer > tbody > tr,
.site-layout-outer > tbody > tr > td {
  display: block !important;
  width: 100% !important;
  background-color: transparent !important;
}

.site-layout-inner {
  display: block !important;
  width: 100% !important;
}

.site-layout-inner > tbody {
  display: block !important;
  width: 100% !important;
}

/* Force all inner rows to block by default */
.site-layout-inner > tbody > tr {
  display: block !important;
  width: 100% !important;
}

/* Spacer Cells */
.site-spacer-cell {
  display: none !important;
}

/* main columns layout row — must have HIGHER specificity than the rule above */
.site-layout-inner > tbody > tr.site-row-main,
tr.site-row-main,
.site-row-main {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  gap: 24px !important;
}

.site-sidebar-left {
  display: block !important;
  flex: 0 0 210px !important;
  width: 210px !important;
  max-width: 210px !important;
  order: 1 !important;
}

.site-content-main {
  display: block !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  order: 2 !important;
}

.site-sidebar-right {
  display: block !important;
  flex: 0 0 210px !important;
  width: 210px !important;
  max-width: 210px !important;
  order: 3 !important;
}

/* Responsive sidebars stack under main content on mobile */
@media (max-width: 991px) {
  .site-row-main {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    padding: 16px !important;
    gap: 20px !important;
  }
  .site-sidebar-left,
  .site-content-main,
  .site-sidebar-right {
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }
  .site-content-main {
    order: 1 !important;
  }
  .site-sidebar-left {
    order: 2 !important;
  }
  .site-sidebar-right {
    order: 3 !important;
  }
}

/* Header & Banner custom styling */
.site-layout-inner table[width="100%"]:first-of-type {
  display: block !important;
  width: 100% !important;
  border: none !important;
  background-color: transparent !important;
}

.site-layout-inner table[width="100%"]:first-of-type tbody,
.site-layout-inner table[width="100%"]:first-of-type tr,
.site-layout-inner table[width="100%"]:first-of-type th {
  display: block !important;
  width: 100% !important;
}

.site-layout-inner table[width="100%"]:first-of-type th {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-height: 180px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 20px 40px !important;
  box-sizing: border-box !important;
  border: none !important;
}

/* Header gradient overlay for better text readability */
.site-layout-inner table[width="100%"]:first-of-type th::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(10, 61, 98, 0.9) 0%, rgba(10, 61, 98, 0.5) 60%, rgba(10, 61, 98, 0.2) 100%);
  z-index: 1;
}

[data-theme="dark"] .site-layout-inner table[width="100%"]:first-of-type th::before {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.6) 60%, rgba(15, 23, 42, 0.3) 100%);
}

.site-layout-inner table[width="100%"]:first-of-type th > a,
.site-layout-inner table[width="100%"]:first-of-type th table {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  width: 100% !important;
  border: none !important;
}

.site-layout-inner table[width="100%"]:first-of-type th table td {
  background: transparent !important;
  border: none !important;
}

/* Header Text styling */
.style151 {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  display: block;
}

.style131 {
  font-size: 18px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  display: block;
  margin-top: 5px;
}

/* Top Nav menu styling */
.site-layout-inner tr:has(a[href*="home.php"][class*="btn"]) td,
.layout-row-nav td {
  background-color: var(--nav-bg) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 10px 20px !important;
}

.btn-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  box-shadow: none !important;
}

.btn-group .btn-info,
.btn-group .btn {
  background-color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  color: #ffffff !important;
  padding: 8px 16px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  font-family: 'Sarabun', 'Kanit', sans-serif !important;
  margin: 0 !important;
}

.btn-group .btn-info:hover,
.btn-group .btn:hover {
  background-color: var(--primary-light) !important;
  border-color: var(--primary-light) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}

/* Left Sidebar and Bootstrap List Group */
.list-group {
  margin-bottom: 20px !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--border-color) !important;
}

.list-group-item.active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  text-align: left !important;
  font-size: 15px !important;
}

.list-group-item {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  text-align: left !important;
  display: block !important;
}

a.list-group-item,
.list-group-item-action {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.list-group-item:last-child {
  border-bottom: none !important;
}

.list-group-item img {
  filter: opacity(0.7);
}

[data-theme="dark"] .list-group-item img {
  filter: invert(1) opacity(0.8);
}

.list-group-item a {
  color: var(--text-primary) !important;
  font-weight: 400 !important;
  width: 100% !important;
}

.list-group-item a:hover {
  color: var(--accent) !important;
  text-decoration: none !important;
}

.list-group-item-action:hover {
  background-color: var(--bg-color) !important;
}

/* Sidebar tables and general side cards formatting */
.site-sidebar-left table,
.site-sidebar-right table {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
}

.site-sidebar-left td,
.site-sidebar-right td {
  background: transparent !important;
  border: none !important;
}

/* Executive Cards (manu_person.php styling) */
.site-sidebar-right .list-group-item {
  display: block !important;
  text-align: center !important;
}

.site-sidebar-right .list-group-item img {
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow) !important;
  margin-bottom: 8px !important;
  object-fit: cover !important;
  border: 2px solid var(--border-color) !important;
}

/* Right Sidebar General Quick Links & Counter */
.site-sidebar-right p a img {
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow) !important;
  margin-bottom: 10px !important;
  max-width: 100% !important;
  height: auto !important;
  transition: transform 0.2s ease !important;
}

.site-sidebar-right p a img:hover {
  transform: scale(1.03) !important;
}

/* Main Content Styles & Cards */
.site-content-main table {
  background-color: transparent !important;
  border-collapse: collapse !important;
}

.site-content-main iframe {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow) !important;
  background-color: var(--card-bg) !important;
  margin-bottom: 20px !important;
}

/* Responsive Bootstrap Carousel styling */
.carousel {
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--border-color) !important;
  margin-bottom: 20px !important;
  max-width: 100% !important;
  background-color: var(--card-bg) !important;
  height: auto !important;
}

.carousel-inner .item img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 590 / 300 !important;
  object-fit: contain !important;
  background-color: transparent !important;
}

/* Carousel Controls Custom Styling */
.carousel-control {
  background-image: none !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s ease, background-color 0.2s ease !important;
  width: 50px !important;
}

.carousel-control:hover {
  opacity: 1 !important;
}

.carousel-control .fa-chevron-left,
.carousel-control .fa-chevron-right {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 24px !important;
  color: #ffffff !important;
  background-color: rgba(10, 61, 98, 0.6) !important;
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  border-radius: 50% !important;
  text-align: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .carousel-control .fa-chevron-left,
[data-theme="dark"] .carousel-control .fa-chevron-right {
  background-color: rgba(96, 165, 250, 0.6) !important;
}

.carousel-control .fa-chevron-left {
  left: 10px !important;
  padding-right: 2px !important;
}

.carousel-control .fa-chevron-right {
  right: 10px !important;
  padding-left: 2px !important;
}

.carousel-indicators li {
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
  width: 8px !important;
  height: 8px !important;
  margin: 1px !important;
  transition: all 0.2s ease !important;
}

.carousel-indicators .active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  width: 10px !important;
  height: 10px !important;
}

/* SMIS Header Styling */
.smis-header {
  font-family: 'Sarabun', 'Kanit', sans-serif !important;
  font-size: 18px !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

.smis-subheader {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  display: inline-block !important;
  margin-top: 5px !important;
}

/* EIT lists and other main page content groups */
.list-group-item.active.style13 {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}

.qr-code {
  background-color: #ffffff !important;
  padding: 4px !important;
  border-radius: var(--radius-sm) !important;
}

/* Footer modern styles */
.site-layout-inner tr:last-child td,
.site-layout-inner td[bgcolor="#006699"],
td[bgcolor="#0388A9"],
td[bgcolor="#003366"] {
  background-color: var(--footer-bg) !important;
  color: var(--footer-text) !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 30px 20px !important;
}

.site-layout-inner tr:last-child td a,
.site-layout-inner td[bgcolor="#006699"] a,
td[bgcolor="#0388A9"] a,
td[bgcolor="#003366"] a {
  color: var(--primary-light) !important;
  font-weight: 500 !important;
}

.site-layout-inner tr:last-child td a:hover,
.site-layout-inner td[bgcolor="#006699"] a:hover {
  color: #ffffff !important;
}

/* Floating Dark Mode Toggle Button */
.theme-toggle-btn {
  position: fixed;
  bottom: 40px;
  left: 40px;
  z-index: 10001;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--primary);
  color: #ffffff;
  border: none;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.theme-toggle-btn:hover {
  transform: scale(1.1) translateY(-2px);
  background-color: var(--primary-light);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

@media (max-width: 767px) {
  .theme-toggle-btn {
    bottom: 20px;
    left: 20px;
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}

/* Form inputs & controls for dark mode */
input[type="text"], input[type="password"], select, textarea {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px !important;
}

[data-theme="dark"] input[type="text"], 
[data-theme="dark"] input[type="password"], 
[data-theme="dark"] select, 
[data-theme="dark"] textarea {
  background-color: #1e293b !important;
  border-color: #475569 !important;
}

/* Social Buttons placement fix */
.social-buttons {
  right: 40px !important;
  bottom: 40px !important;
}

.social-button {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  background-color: var(--card-bg) !important;
  transition: all 0.3s ease !important;
}

.social-button img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.social-button:hover {
  background-color: var(--primary-light) !important;
  transform: translateY(-2px) !important;
}

@media (max-width: 767px) {
  .social-buttons {
    right: 20px !important;
    bottom: 20px !important;
  }
  .social-button, .social-button img {
    width: 50px !important;
    height: 50px !important;
  }
}

/* ==========================================================================
   New Premium Modernized Menus Design System
   ========================================================================== */

/* 1. school-navbar (Top Navigation Menu) */
.school-navbar {
  background-color: var(--nav-bg) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--border-color) !important;
  padding: 10px 20px !important;
  margin-bottom: 24px !important;
  transition: all 0.3s ease !important;
}

.navbar-container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}

.navbar-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: auto !important;
}

.navbar-brand {
  font-family: 'Kanit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  color: var(--primary) !important;
  display: none !important; /* Hidden on desktop */
}

.navbar-toggle-btn {
  display: none !important; /* Hidden on desktop */
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 8px !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 36px !important;
  height: 36px !important;
  justify-content: center !important;
  align-items: center !important;
}

.navbar-toggle-btn .icon-bar {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  background-color: var(--primary) !important;
  transition: all 0.3s ease !important;
}

.navbar-menu {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  align-items: center !important;
  width: 100% !important;
  justify-content: center !important;
}

.navbar-menu .nav-link {
  font-family: 'Sarabun', 'Kanit', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  padding: 8px 16px !important;
  border-radius: var(--radius-sm) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.navbar-menu .nav-link i {
  color: var(--primary) !important;
  font-size: 16px !important;
  transition: color 0.2s ease !important;
}

.navbar-menu .nav-link:hover {
  background-color: var(--bg-color) !important;
  color: var(--primary) !important;
  text-decoration: none !important;
}

.navbar-menu .nav-link:hover i {
  color: var(--primary-light) !important;
}

.navbar-menu .nav-link-login {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--primary) !important;
  box-shadow: var(--shadow-sm) !important;
}

.navbar-menu .nav-link-login i {
  color: #ffffff !important;
}

.navbar-menu .nav-link-login:hover {
  background-color: var(--primary-light) !important;
  border-color: var(--primary-light) !important;
  color: #ffffff !important;
}

.navbar-menu .nav-link-active {
  background-color: var(--bg-color) !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  border-bottom: 2px solid var(--primary) !important;
}

/* Navbar responsive mobile view */
@media (max-width: 991px) {
  .navbar-container {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .navbar-header {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
  }
  
  .navbar-brand {
    display: block !important;
  }
  
  .navbar-toggle-btn {
    display: flex !important;
  }
  
  /* Toggle icon animation */
  .navbar-toggle-btn.active .icon-bar:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px) !important;
  }
  .navbar-toggle-btn.active .icon-bar:nth-child(2) {
    opacity: 0 !important;
  }
  .navbar-toggle-btn.active .icon-bar:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -5px) !important;
  }

  .navbar-menu {
    display: none !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-top: 10px !important;
    gap: 4px !important;
    align-items: stretch !important;
    border-top: 1px solid var(--border-color) !important;
    padding-top: 10px !important;
  }
  
  .navbar-menu.active {
    display: flex !important;
  }
  
  .navbar-menu .nav-link {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 16px !important;
  }
}

/* 2. sidebar-left-container */
.sidebar-left-container {
  display: block !important;
  width: 100% !important;
}

.sidebar-left-container .list-group {
  margin-bottom: 20px !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--border-color) !important;
  background-color: var(--card-bg) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
}

.sidebar-left-container .list-group-item.active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
}

.sidebar-left-container .list-group-item-action {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  transition: all 0.2s ease !important;
}

.sidebar-left-container .list-group-item-action:last-child {
  border-bottom: none !important;
}

.sidebar-left-container .list-group-item-action i {
  color: var(--primary) !important;
  font-size: 15px !important;
  width: 18px !important;
  text-align: center !important;
}

.sidebar-left-container .list-group-item-action:hover {
  background-color: var(--bg-color) !important;
  color: var(--primary) !important;
  padding-left: 20px !important; /* Subtle slide-right effect on hover */
}

/* custom menu block detail */
.custom-menu-detail {
  padding: 15px !important;
  font-size: 14px !important;
  color: var(--text-secondary) !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

/* ITA banner styling */
.ita-banner-wrapper {
  margin-bottom: 20px !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  background-color: #ffffff !important;
  padding: 10px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.ita-banner-wrapper:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.ita-logo-img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

/* 3. Executive Card Section (manu_person.php) */
.executive-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  margin-bottom: 20px !important;
}

.executive-card {
  background-color: var(--card-bg) !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.executive-card:hover {
  box-shadow: var(--shadow-lg) !important;
}

.executive-card-header {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.executive-card-body {
  padding: 20px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

.executive-image-container {
  width: 120px !important;
  height: 135px !important;
  overflow: hidden !important;
  border-radius: var(--radius-sm) !important;
  border: 3px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
}

.executive-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.executive-info {
  text-align: center !important;
}

.executive-name {
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--text-primary) !important;
  margin-bottom: 6px !important;
}

.executive-title {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  line-height: 1.5 !important;
}

.badge-warning {
  background-color: #e28743 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  padding: 4px 8px !important;
  border-radius: 20px !important;
  font-weight: 500 !important;
  display: inline-block !important;
  margin: 4px 0 !important;
}

/* Small Sub Items for Assistants and kru */
.executive-sub-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--border-color) !important;
  gap: 6px !important;
}

.executive-sub-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.executive-photo-small {
  width: 85px !important;
  height: 95px !important;
  object-fit: cover !important;
  border-radius: var(--radius-sm) !important;
  border: 2px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.2s ease !important;
}

.executive-photo-small:hover {
  transform: scale(1.04) !important;
}

.executive-name-small {
  font-size: 13px !important;
  color: var(--text-primary) !important;
  text-align: center !important;
}

/* 4. sidebar-right-wrapper (manu_r.php) */
.sidebar-right-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

/* Quick links cards */
.quick-links-card {
  background-color: var(--card-bg) !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
}

.quick-links-header {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.quick-links-body {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

.quick-links-body a {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

.quick-links-body img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border-color) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.quick-links-body img:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow) !important;
}

/* Visitor Counter Card */
.counter-card {
  background-color: var(--card-bg) !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
}

.counter-header {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.counter-body {
  padding: 20px 16px !important;
  text-align: center !important;
}

.counter-number {
  font-family: 'Kanit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  color: var(--primary) !important;
  letter-spacing: 1px !important;
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
}

.counter-sub {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
}

/* Translate Card widget */
.translate-card {
  background-color: var(--card-bg) !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
}

.translate-header {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.translate-body {
  padding: 16px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Customize Google Translate dropdown styling */
.goog-te-gadget-simple {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  padding: 6px 12px !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Sarabun', sans-serif !important;
  color: var(--text-primary) !important;
  display: flex !important;
  align-items: center !important;
}

.goog-te-gadget-simple span {
  color: var(--text-primary) !important;
}

.goog-te-gadget-icon {
  margin-right: 6px !important;
}

/* ==========================================================================
   Modern HTML5 Page Layout System (No tables)
   ========================================================================== */
.site-main-layout {
  width: 95% !important;
  max-width: 1000px !important;
  margin: 30px auto !important;
  background-color: var(--card-bg) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border-color) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.site-header-wrapper {
  display: block !important;
  width: 100% !important;
}

.site-nav-wrapper {
  display: block !important;
  width: 100% !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.site-content-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  gap: 24px !important;
}

.site-column-left {
  display: block !important;
  flex: 0 0 210px !important;
  width: 210px !important;
  max-width: 210px !important;
  order: 1 !important;
}

.site-column-main {
  display: block !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  order: 2 !important;
}

.site-column-right {
  display: block !important;
  flex: 0 0 210px !important;
  width: 210px !important;
  max-width: 210px !important;
  order: 3 !important;
}

.site-footer-wrapper {
  background-color: var(--footer-bg) !important;
  color: var(--footer-text) !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 30px 20px !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.site-footer-wrapper a {
  color: var(--primary-light) !important;
  font-weight: 500 !important;
}

.site-footer-wrapper a:hover {
  color: #ffffff !important;
}

/* Responsive sidebars stack under main content on mobile */
@media (max-width: 991px) {
  .site-content-wrapper {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    padding: 16px !important;
    gap: 20px !important;
  }
  .site-column-left,
  .site-column-main,
  .site-column-right {
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }
  .site-column-main {
    order: 1 !important;
  }
  .site-column-left {
    order: 2 !important;
  }
  .site-column-right {
    order: 3 !important;
  }
}

/* ==========================================================================
   Modernized Styles for Inner Content Pages (Tables, Forms, and Listings)
   ========================================================================== */
.site-content-main table:not(#slider):not(.site-layout-inner) {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 20px 0 !important;
  background-color: var(--card-bg) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--border-color) !important;
}

.site-content-main table:not(#slider):not(.site-layout-inner) tr {
  border-bottom: 1px solid var(--border-color) !important;
  transition: background-color 0.2s ease !important;
  background-color: transparent !important;
}

.site-content-main table:not(#slider):not(.site-layout-inner) tr:hover {
  background-color: rgba(10, 61, 98, 0.02) !important;
}

[data-theme="dark"] .site-content-main table:not(#slider):not(.site-layout-inner) tr:hover {
  background-color: rgba(96, 165, 250, 0.04) !important;
}

.site-content-main table:not(#slider):not(.site-layout-inner) td, 
.site-content-main table:not(#slider):not(.site-layout-inner) th {
  padding: 12px 16px !important;
  vertical-align: middle !important;
  color: var(--text-primary) !important;
  border: none !important;
}

/* Header Cells inside internal content tables */
.site-content-main table:not(#slider):not(.site-layout-inner) tr:first-child th,
.site-content-main table:not(#slider):not(.site-layout-inner) td[bgcolor="#99CCCC"],
.site-content-main table:not(#slider):not(.site-layout-inner) td[bgcolor="#006699"],
.site-content-main table:not(#slider):not(.site-layout-inner) th[bgcolor="#99CCCC"] {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border: none !important;
}

.site-content-main table:not(#slider):not(.site-layout-inner) tr:first-child th *,
.site-content-main table:not(#slider):not(.site-layout-inner) td[bgcolor="#99CCCC"] *,
.site-content-main table:not(#slider):not(.site-layout-inner) td[bgcolor="#006699"] * {
  color: #ffffff !important;
}

/* Profile photos inside internal content tables */
.site-content-main img {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Form block container wrapping */
.site-content-main form {
  background-color: var(--card-bg) !important;
  padding: 18px !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--border-color) !important;
  margin-bottom: 24px !important;
  box-shadow: var(--shadow) !important;
}

.site-content-main form select,
.site-content-main form input[type="text"],
.site-content-main form input[type="button"],
.site-content-main form input[type="submit"] {
  margin: 5px 0 !important;
}

/* Force header banner to be max 1000px and centered globally */
a[href*="home.php"] > table {
  max-width: 1000px !important;
  width: 100% !important;
  margin: 0 auto !important;
  border-collapse: collapse !important;
}

/* Force white table backgrounds to adapt to light/dark themes */
table[bgcolor="#FFFFFF"], 
table[bgcolor="#ffffff"], 
td[bgcolor="#FFFFFF"], 
td[bgcolor="#ffffff"],
tr[bgcolor="#FFFFFF"],
tr[bgcolor="#ffffff"] {
  background-color: var(--card-bg) !important;
}

table[bgcolor="#FAFAFA"], 
table[bgcolor="#fafafa"], 
td[bgcolor="#FAFAFA"], 
td[bgcolor="#fafafa"] {
  background-color: var(--bg-color) !important;
}

/* Force border colors to match the theme */
table[bordercolor="#CCCCCC"], 
table[bordercolor="#cccccc"] {
  border-color: var(--border-color) !important;
}

/* Responsive container fixes for home.php content blocks */
.site-column-main table,
.site-column-main .list-group,
.site-column-main .list-group-item {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Force Facebook page plugin and any embedded iframes to stay within the layout boundary */
.fb-page,
.fb-page span,
.fb-page iframe,
.list-group-item iframe,
.list-group-item embed,
.list-group-item video,
.list-group-item img {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Prevent any user-created custom menus/contents from breaking the layout */
.list-group-item {
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.list-group-item * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Native News Section Hover Styles */
.news-thumbnail-img {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.news-thumbnail-img:hover {
  transform: scale(1.05) !important;
}

tr[style*="dashed"] {
  transition: background-color 0.2s ease;
}

tr[style*="dashed"]:hover {
  background-color: var(--bg-color);
}

/* ==========================================================================
   Modernized Premium Footer Styles
   ========================================================================== */
.modern-footer-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 25px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.modern-footer-container div,
.modern-footer-container span,
.modern-footer-container li {
  color: rgba(255, 255, 255, 0.85) !important;
}

.modern-footer-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 30px !important;
  width: 100% !important;
  text-align: left !important;
}

.modern-footer-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.modern-footer-col-title {
  font-family: 'Kanit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #ffffff !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
  padding-bottom: 8px !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

[data-theme="dark"] .modern-footer-col-title {
  border-bottom: 2px solid var(--border-color) !important;
  color: #ffffff !important;
}

.modern-footer-school-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

.modern-footer-school-area {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin-top: -6px !important;
}

[data-theme="dark"] .modern-footer-school-area {
  color: rgba(255, 255, 255, 0.65) !important;
}

.modern-footer-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.modern-footer-list-item {
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: 1.5 !important;
}

[data-theme="dark"] .modern-footer-list-item {
  color: rgba(255, 255, 255, 0.85) !important;
}

.modern-footer-list-item i {
  color: #38bdf8 !important; /* Bright cyan icon for maximum contrast */
  font-size: 14px !important;
  width: 16px !important;
  text-align: center !important;
}

[data-theme="dark"] .modern-footer-list-item i {
  color: #38bdf8 !important;
}

.modern-footer-buttons-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 5px !important;
}

.footer-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Kanit', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  border-radius: 30px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid transparent !important;
}

.footer-btn i {
  font-size: 15px !important;
}

.footer-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow) !important;
  text-decoration: none !important;
}

.btn-fb {
  background-color: #1877f2 !important;
  color: #ffffff !important;
}

.btn-fb:hover {
  background-color: #166fe5 !important;
  color: #ffffff !important;
}

.btn-line {
  background-color: #06c755 !important;
  color: #ffffff !important;
}

.btn-line:hover {
  background-color: #05b04b !important;
  color: #ffffff !important;
}

.modern-footer-socket {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-top: 15px !important;
  margin-top: 10px !important;
  text-align: center !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .modern-footer-socket {
  border-top: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
}

.modern-footer-socket a {
  color: var(--primary-light) !important;
  font-weight: 600 !important;
}

.modern-footer-socket a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Responsive adjustments for footer grid */
@media (max-width: 767px) {
  .modern-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    text-align: center !important;
  }
  .modern-footer-col {
    align-items: center !important;
  }
  .modern-footer-col-title {
    width: 100% !important;
  }
  .modern-footer-list-item {
    justify-content: center !important;
  }
  .modern-footer-buttons-group {
    justify-content: center !important;
  }
}

/* 3-Row Centered Footer Styles */
.modern-footer-3rows {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
  text-align: center !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
}

.modern-footer-3rows div,
.modern-footer-3rows span,
.modern-footer-3rows a,
.modern-footer-3rows p,
.modern-footer-3rows i,
.modern-footer-3rows strong {
  color: #ffffff !important;
}

.modern-footer-row1 {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

.modern-footer-row2 {
  font-size: 13px !important;
  opacity: 0.95 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.modern-footer-row2 i {
  font-size: 16px !important;
  color: #ffffff !important;
}

.modern-footer-row3 {
  font-size: 12px !important;
  opacity: 0.85 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding-top: 12px !important;
  width: 100% !important;
  max-width: 600px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}

.modern-footer-links {
  display: flex !important;
  gap: 15px !important;
  margin-top: 5px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.modern-footer-link-item {
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.modern-footer-link-item:hover {
  background-color: #ffffff !important;
  color: #0a3d62 !important; /* contrast on hover */
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

.modern-footer-link-item:hover i,
.modern-footer-link-item:hover span {
  color: #0a3d62 !important;
}