/* =====================================================================
   OTIM modern skin  -  "Official / clean" overlay for CodeIgniter views
   Loaded AFTER the template stylesheet. Only active when
   <html data-skin="new"> (set by navbar.php when the new skin is on).
   To switch it off: remove ?skin=new cookie (open /?skin=old) or
   set the default back to 'old' in application/helpers/otim_helper.php.
   Font: Sarabun (SIL Open Font License), self-hosted in /assets/fonts/sarabun/
   ===================================================================== */

@font-face{font-family:"Sarabun";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/sarabun/sarabun-thai-400-normal.woff2") format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;}
@font-face{font-family:"Sarabun";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/sarabun/sarabun-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Sarabun";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/sarabun/sarabun-thai-500-normal.woff2") format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;}
@font-face{font-family:"Sarabun";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/sarabun/sarabun-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Sarabun";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/sarabun/sarabun-thai-600-normal.woff2") format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;}
@font-face{font-family:"Sarabun";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/sarabun/sarabun-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Sarabun";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/sarabun/sarabun-thai-700-normal.woff2") format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;}
@font-face{font-family:"Sarabun";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/sarabun/sarabun-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- design tokens ---------- */
html[data-skin="new"] {
  --font: "Sarabun", "Noto Sans Thai", Tahoma, "Segoe UI", system-ui, sans-serif;
  --ink: #243039;
  --ink-strong: #16212b;
  --muted: #5b6770;
  --bg: #ffffff;
  --bg-alt: #f4f1ee;
  --surface: #ffffff;
  --line: #e4dfdb;
  --line-strong: #cfc7c1;
  --brand: #c2410c;          /* buttons, underlines, accents (white text: 5.2:1) */
  --brand-dark: #9a3412;
  --link: #b23a0a;
  --brand-tint: #fdf0e9;
  --footer-bg: #2b211c;
  --footer-deep: #211915;
  --footer-ink: #efe7e2;
  --footer-muted: #b9aca5;
  --focus: #1a56db;
  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(22,33,43,.06), 0 2px 8px rgba(22,33,43,.06);
  --shadow-md: 0 4px 16px rgba(22,33,43,.12);
}
html[data-skin="new"][data-theme="dark"] {
  --ink: #e6dfdb;
  --ink-strong: #ffffff;
  --muted: #b4aca8;
  --bg: #1c1715;
  --bg-alt: #211b18;
  --surface: #262019;
  --line: #3a2f2b;
  --line-strong: #5a4b45;
  --link: #ff9f75;
  --brand-tint: #2b2320;
  --footer-bg: #241c18;
  --footer-deep: #1a1411;
  --focus: #8ab4ff;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.5);
}

/* ---------- base typography ---------- */
html[data-skin="new"] body {
  font-family: var(--font);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
html[data-skin="new"] h1, html[data-skin="new"] h2, html[data-skin="new"] h3,
html[data-skin="new"] h4, html[data-skin="new"] h5, html[data-skin="new"] h6 {
  font-family: var(--font);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-strong);
}
html[data-skin="new"] :where(a:not(.btn)) { color: var(--link); text-decoration: none; }
html[data-skin="new"] :where(a:not(.btn)):hover { color: var(--brand-dark); text-decoration: underline; }
html[data-skin="new"] font[color="red"] { color: var(--brand); }
html[data-skin="new"] :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
html[data-skin="new"] ::selection { background: var(--brand); color: #fff; }

/* ---------- top bar (logo) + header (menu) ---------- */
html[data-skin="new"] #topbar { background: var(--surface); padding: 14px 0; border-bottom: 1px solid var(--line); }
html[data-skin="new"] #topbar img { max-width: 100%; height: auto; }
html[data-skin="new"] #header {
  height: auto; min-height: 52px; padding: 0;
  background: var(--surface);
  border-bottom: 3px solid var(--brand);
  box-shadow: 0 6px 16px -12px rgba(22,33,43,.35) !important;
}
html[data-skin="new"] .navbar a,
html[data-skin="new"] .navbar a:focus {
  font-family: var(--font); font-size: 1rem; font-weight: 500;
  text-transform: none; color: var(--ink);
}
html[data-skin="new"] .navbar a:hover { color: var(--brand); text-decoration: none; }
@media (min-width: 992px) {
  html[data-skin="new"] .navbar > ul > li > a {
    padding: 14px 16px; border-bottom: 3px solid transparent; margin-bottom: -3px;
  }
  html[data-skin="new"] .navbar > ul > li > a.active { color: var(--ink); border-bottom-color: transparent; }
  html[data-skin="new"] .navbar > ul > li:hover > a { color: var(--brand); }
  html[data-skin="new"] .navbar > ul > li.active > a { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
  html[data-skin="new"] .navbar li:not(.langswitch) + li.langswitch { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line-strong); }
}
html[data-skin="new"] .navbar .langswitch a,
html[data-skin="new"] .navbar .themeswitch a { padding-left: 8px; padding-right: 8px; font-size: 0.9375rem; }
html[data-skin="new"] .navbar a .fa-2x { font-size: 1.375rem; }
html[data-skin="new"] .navbar a .fa-facebook { color: #1877f2; }
html[data-skin="new"] .navbar a .fa-line { color: #06c755; }

/* dropdown menus */
html[data-skin="new"] .navbar .dropdown ul {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--brand); border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-md); padding: 6px 0;
}
html[data-skin="new"] .navbar .dropdown ul a {
  font-size: 1rem; font-weight: 400; color: var(--ink); white-space: normal; padding: 9px 20px;
}
html[data-skin="new"] .navbar .dropdown ul li { min-width: 260px; }
html[data-skin="new"] .navbar .dropdown ul a:hover,
html[data-skin="new"] .navbar .dropdown ul li:hover > a,
html[data-skin="new"] .navbar .dropdown ul li.active > a { color: var(--brand-dark); background: var(--brand-tint); }

/* mobile menu */
html[data-skin="new"] .mobile-nav-toggle { color: var(--ink); }
html[data-skin="new"] .navbar-mobile .mobile-nav-toggle,
html[data-skin="new"] .mobile-nav-toggle.bi-x { color: #fff; }
html[data-skin="new"] .navbar-mobile ul { background: var(--surface); border-radius: var(--radius); }
html[data-skin="new"] .navbar-mobile a { padding: 12px 20px; }
html[data-skin="new"] .navbar-mobile .dropdown ul { background: var(--bg-alt); box-shadow: none; border: 0; }

/* ---------- sections ---------- */
html[data-skin="new"] section { padding: 56px 0; }
html[data-skin="new"] .services { background: var(--bg); }
html[data-skin="new"] [style*="F5F5F5" i] { background-color: var(--bg-alt) !important; }
html[data-skin="new"] section h2 { font-size: 1.75rem; margin-bottom: 28px; }
html[data-skin="new"] section h2::after {
  content: ""; display: block; width: 48px; height: 3px; margin: 12px 0 0; background: var(--brand); border-radius: 2px;
}
html[data-skin="new"] center h2::after,
html[data-skin="new"] .text-center h2::after { margin-left: auto; margin-right: auto; }
@media (min-width: 992px) {
  html[data-skin="new"] .text-center.text-lg-left h2::after { margin-left: 0; margin-right: 0; }
}
html[data-skin="new"] center h4 { font-size: 1.5rem; margin-bottom: 18px; }

/* intro paragraph: no justified Thai (causes ugly gaps), readable width */
html[data-skin="new"] .card-body[style*="justify"] {
  text-align: left !important; text-indent: 0 !important;
  max-width: 920px; margin: 0 auto; color: var(--ink);
}
html[data-skin="new"] .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }

/* videos: responsive instead of fixed 640x360 */
html[data-skin="new"] iframe[src*="depart_vdo"] {
  width: 100% !important; max-width: 720px; height: auto !important;
  aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius) !important; box-shadow: var(--shadow-md);
}

/* ---------- service panel (left links + department tiles) ---------- */
html[data-skin="new"] [style*="fed6ca" i] {
  background-color: var(--brand-tint) !important; border-radius: var(--radius); padding-top: 12px; padding-bottom: 12px;
}
html[data-skin="new"] .btn { font-family: var(--font); border-radius: var(--radius); }
html[data-skin="new"] .btn-outline-secondary {
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong);
  font-weight: 500; padding: .6rem .9rem; box-shadow: var(--shadow-sm);
}
html[data-skin="new"] .btn-outline-secondary:hover,
html[data-skin="new"] .btn-outline-secondary:focus { color: #fff; background: var(--brand); border-color: var(--brand); }
html[data-skin="new"] .btn-info {
  color: #fff; background: var(--brand); border-color: var(--brand); font-weight: 500;
}
html[data-skin="new"] .btn-info:hover,
html[data-skin="new"] .btn-info:focus { color: #fff; background: var(--brand-dark); border-color: var(--brand-dark); }

html[data-skin="new"] .services .icon-box {
  border-radius: 10px !important; border: 1px solid var(--line); box-shadow: var(--shadow-sm) !important;
  background-color: var(--surface); transition: transform .2s ease, box-shadow .2s ease;
}
html[data-skin="new"] .services .icon-box:hover { transform: translateY(-3px); box-shadow: var(--shadow-md) !important; }
html[data-skin="new"] .services .icon { background: var(--brand); border-color: var(--surface); }
html[data-skin="new"] .services .icon-box:hover .icon { background: var(--surface); border-color: var(--brand); }
html[data-skin="new"] .services .title {
  display: inline-block; max-width: 100%; padding: 6px 12px; border-radius: 6px;
  background: rgba(255,255,255,.92); color: #16212b; text-shadow: none;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.4;
}
html[data-skin="new"] .services .title a { color: #16212b; }
html[data-skin="new"] .services .icon-box:hover .title a { color: var(--brand-dark); text-decoration: none; }
html[data-skin="new"] .services .description { font-size: 0.9375rem; }

/* ---------- news table ---------- */
html[data-skin="new"] .table {
  --bs-table-bg: transparent; --bs-table-striped-bg: rgba(22,33,43,.035); --bs-table-hover-bg: var(--brand-tint);
  --bs-table-striped-color: var(--ink); --bs-table-hover-color: var(--ink);
  color: var(--ink); border-color: var(--line);
}
html[data-skin="new"] .table > :not(caption) > * > * { border-color: var(--line); padding: .8rem 1rem; }
html[data-skin="new"] .table th { font-weight: 600; color: var(--ink-strong); background-color: var(--brand-tint); }
html[data-skin="new"][data-theme="dark"] .table { --bs-table-striped-bg: rgba(255,255,255,.05); }

/* ---------- gallery ---------- */
html[data-skin="new"] .portfolio .portfolio-item img { border-radius: var(--radius); }
html[data-skin="new"] .portfolio .portfolio-item .portfolio-info { border-radius: 6px; }

/* ---------- modal / forms ---------- */
html[data-skin="new"] .modal-content { border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
html[data-skin="new"] .form-control { border-radius: var(--radius); border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
html[data-skin="new"] .btn-success { background: var(--brand); border-color: var(--brand); }
html[data-skin="new"] .btn-success:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
html[data-skin="new"] .back-to-top { background: var(--brand); border-radius: var(--radius); }
html[data-skin="new"] .back-to-top:hover { background: var(--brand-dark); }

/* ---------- footer ---------- */
html[data-skin="new"] #footer { background: var(--footer-deep); color: var(--footer-muted); font-size: 0.9375rem; }
html[data-skin="new"] #footer .footer-top,
html[data-skin="new"] #footer .footer-top[style*="fed6ca" i] {
  background-color: var(--footer-bg) !important; border-radius: 0; padding: 48px 0 28px;
}
html[data-skin="new"] #footer font[color="red"] { color: var(--footer-ink); }
html[data-skin="new"] #footer h3,
html[data-skin="new"] #footer h4,
html[data-skin="new"] #footer .footer-top p,
html[data-skin="new"] #footer .footer-contact h3 { color: var(--footer-ink); text-transform: none; letter-spacing: 0; line-height: 1.4; }
html[data-skin="new"] #footer .footer-contact h3 { font-size: 1.25rem; font-weight: 600; }
html[data-skin="new"] #footer h4 { font-size: 1.125rem; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: 12px; }
html[data-skin="new"] #footer .footer-newsletter h3 { font-size: 1.125rem; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: 12px; }
html[data-skin="new"] #footer :where(a:not(.btn)) { color: #ffb08a; }
html[data-skin="new"] #footer :where(a:not(.btn)):hover { color: #fff; }
html[data-skin="new"] #footer .footer-contact img { background: #fff; padding: 8px 12px; border-radius: var(--radius); max-width: 100%; height: auto; }
html[data-skin="new"] #footer .table { color: var(--footer-ink); border-color: rgba(255,255,255,.12); }
html[data-skin="new"] #footer .table tr[class*="table-"] { --bs-table-bg: transparent; background: transparent; color: var(--footer-ink); }
html[data-skin="new"] #footer .table > :not(caption) > * > * { border-color: rgba(255,255,255,.12); padding: .45rem .75rem; background-color: transparent; color: var(--footer-ink); }
html[data-skin="new"] #footer .copyright,
html[data-skin="new"] #footer .credits { color: var(--footer-muted); font-size: 0.875rem; }
html[data-skin="new"] #footer .copyright strong { color: var(--footer-ink); }

/* ---------- content pages (history / vision / mission / objective / structure) ---------- */
html[data-skin="new"] section.cta { background: var(--bg); color: var(--ink); padding: 44px 0 56px; }
html[data-skin="new"] .cta h3 { font-size: 1.75rem; font-weight: 600; color: var(--ink-strong); }
html[data-skin="new"] .cta h3::after { content: ""; display: block; width: 48px; height: 3px; margin: 12px auto 0; background: var(--brand); border-radius: 2px; }
html[data-skin="new"] .cta .card-body { max-width: 960px; margin: 0 auto; font-size: 1.0625rem; line-height: 1.8; text-align: left; }
html[data-skin="new"] .cta .card-body p[style*="justify"] { text-align: left !important; }
html[data-skin="new"] .cta .card-body img { max-width: 100%; height: auto; }
html[data-skin="new"] .cta .card-body table { max-width: 100%; }
html[data-skin="new"][data-theme="dark"] .cta .card-body [style*="color"] { color: inherit !important; }
html[data-skin="new"][data-theme="dark"] .cta .card-body [style*="background"] { background: transparent !important; }

/* ---------- small screens ---------- */
@media (max-width: 991px) {
  html[data-skin="new"] section { padding: 36px 0; }
  html[data-skin="new"] section h2 { font-size: 1.5rem; }
  html[data-skin="new"] center h4 { font-size: 1.3125rem; }
  html[data-skin="new"] .services .icon-box { height: auto; min-height: 200px; }
}
@media (max-width: 575px) {
  html[data-skin="new"] body { font-size: 1.0312rem; }
  html[data-skin="new"] #topbar { padding: 10px 0; }
  html[data-skin="new"] #footer .footer-top { padding: 32px 0 16px; }
}

/* ---------- respect reduced-motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="new"] *, html[data-skin="new"] *::before, html[data-skin="new"] *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ===== v3: quick cards, news cards, topbar tools, hero ===== */
html[data-skin="new"] [data-old] { display: none !important; }
html[data-skin="new"] { font-size: 100%; }
html[data-skin="new"] .otim-h { text-align: center; font-size: 1.6rem; margin: 0 0 1.25rem; color: var(--ink); position: relative; padding-bottom: .6rem; }
html[data-skin="new"] .otim-h::after { content: ""; display: block; width: 56px; height: 3px; background: var(--brand); margin: .5rem auto 0; border-radius: 2px; }
html[data-skin="new"] .otim-quick { padding: 2.5rem 0 1.5rem; }
html[data-skin="new"] .otim-qc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
html[data-skin="new"] .otim-qc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; padding: 1.4rem .75rem; min-height: 8.5rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
html[data-skin="new"] .otim-qc i { font-size: 2rem; color: var(--brand); line-height: 1; }
html[data-skin="new"] .otim-qc span { font-size: 1rem; font-weight: 600; line-height: 1.35; }
html[data-skin="new"] .otim-qc:hover, html[data-skin="new"] .otim-qc:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08); border-color: var(--brand); }
html[data-skin="new"] .otim-newscards { padding: 1.5rem 0 2.5rem; }
html[data-skin="new"] .otim-nc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
html[data-skin="new"] .otim-nc { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface, #fff); color: var(--ink); text-decoration: none; transition: box-shadow .15s, transform .15s; }
html[data-skin="new"] .otim-nc:hover { box-shadow: 0 8px 20px rgba(0,0,0,.09); transform: translateY(-3px); }
html[data-skin="new"] .otim-nc-img { display: block; aspect-ratio: 16/9; background: #f3f0ee; overflow: hidden; }
html[data-skin="new"] .otim-nc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-skin="new"] .otim-nc-img.is-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #fff1ea, #fde0d3); }
html[data-skin="new"] .otim-nc-img.is-ph img { width: 55%; height: auto; object-fit: contain; opacity: .85; }
html[data-skin="new"] .otim-nc-body { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem 1.2rem; flex: 1; }
html[data-skin="new"] .otim-nc-date { font-size: .85rem; color: var(--muted); }
html[data-skin="new"] .otim-nc-title { font-size: 1.05rem; font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html[data-skin="new"] .otim-nc-more { margin-top: auto; font-size: .9rem; color: var(--brand); font-weight: 600; }
html[data-skin="new"] .otim-nc-all { text-align: center; margin-top: 1.5rem; }
html[data-skin="new"] .otim-nc-all a { display: inline-block; padding: .55rem 1.5rem; border: 1px solid var(--brand); border-radius: 999px; color: var(--brand); text-decoration: none; font-weight: 600; }
html[data-skin="new"] .otim-nc-all a:hover { background: var(--brand); color: #fff; }
html[data-skin="new"] .otim-search-list { list-style: none; padding: 0; max-width: 820px; margin: 0 auto; }
html[data-skin="new"] .otim-search-list li { padding: .8rem 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: .15rem; }
/* topbar tools */
html[data-skin="new"] .social-links { gap: .75rem; }
html[data-skin="new"] .otim-search { display: flex; border: 1px solid #d6d3d1; border-radius: 999px; overflow: hidden; background: #fff; }
html[data-skin="new"] .otim-search input { border: 0; outline: 0; padding: .35rem .9rem; font-size: .9rem; width: 190px; background: transparent; color: #1f2937; }
html[data-skin="new"] .otim-search button { border: 0; background: var(--brand); color: #fff; padding: 0 .9rem; cursor: pointer; }
html[data-skin="new"] .otim-fs { display: inline-flex; gap: 2px; }
html[data-skin="new"] .otim-fs button { border: 1px solid #d6d3d1; background: #fff; color: #1f2937; border-radius: 6px; padding: .2rem .5rem; font-size: .85rem; cursor: pointer; line-height: 1.2; }
html[data-skin="new"] .otim-fs button:hover { border-color: var(--brand); color: var(--brand); }
@media (max-width: 991px) { html[data-skin="new"] .otim-qc-grid { grid-template-columns: repeat(2, 1fr); } html[data-skin="new"] .otim-nc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { html[data-skin="new"] .otim-nc-grid { grid-template-columns: 1fr; } html[data-skin="new"] .otim-qc { min-height: 7rem; padding: 1rem .5rem; } }

/* hero: fit the slide image (template sets fixed vh height + absolute positioning) */
html[data-skin="new"] #hero { height: auto !important; min-height: 0 !important; overflow: visible; padding: 0; }
html[data-skin="new"] #hero .carousel, html[data-skin="new"] #hero .carousel-inner { position: relative; top: 0; bottom: auto; left: auto; right: auto; height: auto; }
html[data-skin="new"] #hero .carousel-inner .carousel-item { position: relative; top: 0; bottom: auto; float: left; width: 100%; margin-right: -100%; height: auto; }
html[data-skin="new"] #hero .carousel-item img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
html[data-skin="new"] #hero .carousel-control-prev, html[data-skin="new"] #hero .carousel-control-next { display: none; }

/* intro text + video stay visible in the new skin */
html[data-skin="new"] iframe.otim-video { width: 100% !important; max-width: 720px; height: auto !important; aspect-ratio: 16 / 9; border: 0; border-radius: 12px !important; box-shadow: var(--shadow-sm); margin: 1rem auto 0; display: block; }

/* ===== mobile header: one compact sticky bar (logo left, menu button right) ===== */
@media (max-width: 991px) {
  html[data-skin="new"] #topbar { position: sticky; top: 0; z-index: 996; padding: 8px 0; min-height: 64px; border-bottom: 3px solid var(--brand); box-shadow: 0 6px 16px -12px rgba(22,33,43,.35); }
  html[data-skin="new"] #topbar .container { justify-content: flex-start !important; padding-left: 16px; padding-right: 72px; }
  html[data-skin="new"] #topbar .contact-info img { height: 46px; width: auto; max-width: 100%; display: block; }
  html[data-skin="new"] #header { position: fixed; top: 0; right: 0; left: auto; width: 72px; height: 64px; min-height: 0; padding: 0; background: transparent; border: 0; box-shadow: none !important; z-index: 997; }
  html[data-skin="new"] #header .container { padding: 0; justify-content: flex-end !important; height: 100%; }
  html[data-skin="new"] #header .navbar { padding: 0 12px 0 0; }
  html[data-skin="new"] .mobile-nav-toggle { display: flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 1.75rem; line-height: 1; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); -webkit-tap-highlight-color: transparent; outline: none; }
  html[data-skin="new"] .mobile-nav-toggle:active { background: var(--brand-tint); }
  html[data-skin="new"] .mobile-nav-toggle:focus-visible { box-shadow: 0 0 0 3px var(--focus); }
  /* opened menu */
  html[data-skin="new"] .navbar-mobile { background: rgba(22,16,13,.72); }
  html[data-skin="new"] .navbar-mobile .mobile-nav-toggle { top: 10px; right: 12px; background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
  html[data-skin="new"] .navbar-mobile ul { top: 66px; right: 12px; left: 12px; bottom: 12px; padding: 8px 0; border-radius: 14px; }
  html[data-skin="new"] .navbar-mobile > ul > li { border-bottom: 1px solid var(--line); }
  html[data-skin="new"] .navbar-mobile > ul > li:last-child { border-bottom: 0; }
  html[data-skin="new"] .navbar-mobile a { padding: 14px 20px; font-size: 1.0625rem; }
  html[data-skin="new"] .navbar-mobile .dropdown ul { margin: 0; padding: 0 0 6px; border-radius: 0; }
  html[data-skin="new"] .navbar-mobile .dropdown ul a { padding: 11px 20px 11px 34px; font-size: 1rem; }
  html[data-skin="new"] .navbar-mobile .langswitch, html[data-skin="new"] .navbar-mobile .themeswitch { display: inline-block; }
  html[data-skin="new"] .navbar-mobile .langswitch a, html[data-skin="new"] .navbar-mobile .themeswitch a { padding: 12px 14px; }
}
@media (max-width: 991px) {
  html[data-skin="new"] .navbar-mobile > ul > li.langswitch, html[data-skin="new"] .navbar-mobile > ul > li.themeswitch { border-bottom: 0; }
  html[data-skin="new"] .navbar-mobile > ul > li.langswitch:first-of-type, html[data-skin="new"] .navbar-mobile > ul > li.langswitch { margin: 0; }
}

/* ===== carousel indicators: small dots below the image (no bars over the picture) ===== */
html[data-skin="new"] #hero .carousel { padding-bottom: 0; }
html[data-skin="new"] #hero .carousel-indicators { position: static; display: flex; justify-content: center; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 0; list-style: none; }
html[data-skin="new"] #hero .carousel-indicators [data-bs-target],
html[data-skin="new"] #hero .carousel-indicators li { box-sizing: border-box; flex: 0 0 auto; width: 9px; height: 9px; margin: 0; padding: 0; border: 0; border-radius: 50%; background-color: var(--brand, #1f6f5c); opacity: .3; text-indent: -999px; overflow: hidden; background-clip: border-box; transition: opacity .2s, transform .2s; }
html[data-skin="new"] #hero .carousel-indicators .active { opacity: 1; transform: scale(1.25); }
@media (min-width: 992px) { html[data-skin="new"] #hero .carousel-indicators [data-bs-target], html[data-skin="new"] #hero .carousel-indicators li { width: 10px; height: 10px; } }
html[data-skin="new"] #hero .carousel { display: flex; flex-direction: column; }
html[data-skin="new"] #hero .carousel-inner { order: 1; }
html[data-skin="new"] #hero .carousel-indicators { order: 2; }

/* personnel cards: name + position centered under the photo */
html[data-skin="new"] .cta section.section .card-body { max-width: none; margin: 0; text-align: center; font-size: 1rem; line-height: 1.5; padding-left: 0; padding-right: 0; }
html[data-skin="new"] .cta section.section .card-body .card-title { text-align: center; }