:root{
    --bg:#F4F8FC;
    --surface:#FFFFFF;
    --surface-alt:#EAF1FA;
    --ink:#0E1B2E;
    --ink-soft:#4C5C70;
    --ink-faint:#7C8CA0;
    --line:#D9E4F1;
    --blue-deep:#0A3D7A;
    --blue:#0060C2;
    --blue-bright:#1E88E5;
    --green:#178A48;
    --orange:#E8811C;
    --red:#DD3327;
    --shadow: 0 1px 2px rgba(10,40,80,.04), 0 8px 24px -12px rgba(10,40,80,.18);
  }

  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"Sarabun","Noto Sans Thai",sans-serif;
    -webkit-font-smoothing:antialiased;
    padding-inline:0;
  }
  h1,h2,h3,.display{
    font-family:"Kanit","Sarabun",sans-serif;
    font-weight:600;
    text-wrap:balance;
    margin:0;
  }
  p{margin:0;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{
    max-width:1180px;
    margin-inline:auto;
    padding-inline:20px;
  }
  @media (min-width:720px){ .wrap{padding-inline:32px;} }

  /* ---------- nav ---------- */
  nav{
    position:sticky;
    top:env(safe-area-inset-top, 0px);
    z-index:40;
    background:color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter:saturate(160%) blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-block:12px;
  }
  .brand{display:flex;align-items:center;gap:11px;min-width:0;}
  .brand-mark{width:42px;height:42px;flex:none;}
  .brand-text{display:flex;flex-direction:column;line-height:1.18;min-width:0;}
  .brand-text .name-th{font-family:"Kanit",sans-serif;font-weight:600;font-size:15.5px;color:var(--blue-deep);white-space:nowrap;}
  .brand-text .name-en{font-size:11.5px;color:var(--ink-faint);letter-spacing:.02em;white-space:nowrap;}

  .navlinks{display:flex;align-items:center;gap:6px;}
  .nav-link{
    display:inline-flex;align-items:center;gap:5px;
    font-family:"Sarabun",sans-serif;
    font-size:14.5px;font-weight:500;color:var(--ink-soft);
    padding:9px 12px;border-bottom:2px solid transparent;
    background:none;border-left:none;border-right:none;border-top:none;
    cursor:pointer;line-height:1.3;white-space:nowrap;
  }
  .nav-link:hover{color:var(--blue);}
  .nav-link.active{color:var(--blue-deep);border-bottom-color:var(--blue);}
  .nav-trigger svg{width:14px;height:14px;flex:none;transition:transform .18s ease;}

  .nav-item{position:relative;}
  .nav-item.open .nav-trigger{color:var(--blue-deep);}
  .nav-item.open .nav-trigger svg{transform:rotate(180deg);}

  .dropdown-panel{
    position:absolute;top:calc(100% + 10px);left:50%;
    transform:translateX(-50%) translateY(-6px);
    width:min(320px,80vw);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:var(--shadow);
    padding:8px;
    display:flex;flex-direction:column;gap:2px;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .15s ease, transform .15s ease;
    z-index:50;
  }
  .nav-item.open .dropdown-panel{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }
  .dropdown-link{
    display:flex;align-items:flex-start;gap:10px;
    padding:9px 10px;border-radius:8px;
    font-size:13.5px;line-height:1.5;color:var(--ink-soft);font-weight:500;
  }
  .dropdown-link svg{width:17px;height:17px;color:var(--blue);flex:none;margin-top:1px;}
  .dropdown-link:hover{background:var(--surface-alt);color:var(--blue-deep);}

  .btn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:"Sarabun",sans-serif;font-weight:600;font-size:14px;
    padding:10px 18px;border-radius:8px;border:1px solid transparent;
    cursor:pointer;white-space:nowrap;
  }
  .btn svg{width:16px;height:16px;flex:none;}
  .btn-primary{background:var(--blue);color:#fff;box-shadow:var(--shadow);}
  .btn-primary:hover{background:var(--blue-deep);}
  .btn-ghost{background:transparent;color:var(--blue-deep);border-color:var(--line);}
  .btn-ghost:hover{border-color:var(--blue);}
  .btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}
  .btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08);}
  .btn-emergency{background:var(--red);color:#fff;box-shadow:0 8px 20px -8px rgba(221,51,39,.55);}
  .btn-emergency:hover{background:#B8281F;}

  .nav-cta{display:flex;align-items:center;gap:10px;}
  .menu-btn{display:none;background:none;border:none;color:var(--blue-deep);padding:6px;cursor:pointer;}
  .menu-btn svg{width:24px;height:24px;}
  .nav-mobile-cta{display:none;}

  @media (max-width:920px){
    .navlinks{
      display:none;
      position:absolute;left:0;right:0;top:100%;
      flex-direction:column;align-items:stretch;gap:2px;
      background:var(--surface);
      border-bottom:1px solid var(--line);
      box-shadow:var(--shadow);
      padding:10px 20px 16px;
      max-height:calc(100vh - 100%);
      overflow-y:auto;
    }
    .navlinks.open{display:flex;}
    .menu-btn{display:inline-flex;}
    .nav-cta .btn-primary{display:none;}
    .nav-link{border-bottom:1px solid var(--line);border-radius:0;padding-block:13px;justify-content:space-between;}
    .nav-item:last-child .nav-link,
    .navlinks > a.nav-link:last-of-type{border-bottom:none;}
    .nav-link.active{border-bottom-color:var(--line);}
    .dropdown-panel{
      position:static;transform:none;
      width:auto;max-height:0;padding:0 4px;
      opacity:1;visibility:visible;pointer-events:auto;
      border:none;box-shadow:none;background:var(--surface-alt);
      border-radius:10px;
      overflow:hidden;
      transition:max-height .2s ease, padding .2s ease;
    }
    .nav-item.open .dropdown-panel{max-height:320px;padding:6px;margin-block:2px 6px;transform:none;}
    .nav-mobile-cta{display:flex;justify-content:center;margin-top:12px;}
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    background:
      linear-gradient(100deg, rgba(5,16,32,.92) 0%, rgba(5,16,32,.72) 42%, rgba(5,16,32,.32) 75%),
      url("/img/bg.png") center/100% auto no-repeat;
    background-color:var(--blue-deep);
    color:#fff;
    overflow:hidden;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:40px;
    align-items:center;
    padding-block:90px 80px;
  }
  @media (max-width:920px){
    .hero-grid{grid-template-columns:1fr;padding-block:36px 32px;}
    .hero{background-size:auto, cover;}
  }
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12.5px;font-weight:600;letter-spacing:.06em;
    color:#CFE3FA;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.22);
    padding:6px 12px;border-radius:100px;
    margin-bottom:18px;
  }
  .eyebrow svg{width:14px;height:14px;}
  .hero h1{
    font-size:clamp(30px,4.4vw,46px);
    line-height:1.16;
    color:#fff;
  }
  .hero h1 em{
    font-style:normal;
    color:#FFD9AE;
  }
  .hero-sub{
    margin-top:16px;
    font-size:16px;
    line-height:1.7;
    color:#DCEAFB;
    max-width:46ch;
  }
  .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}
  .hero-actions .btn{padding:12px 20px;font-size:15px;}

  .hero-slider-wrap{display:flex;flex-direction:column;gap:12px;}
  .hero-slider-row{display:flex;align-items:center;gap:6px;}
  .hero-slider{
    position:relative;
    flex:1;
    min-width:0;
    aspect-ratio:16/9;
    border-radius:16px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(10,32,60,.35);
  }
  .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;}
  .hero-slide.active{opacity:1;}
  .hero-slide img{width:100%;height:100%;object-fit:cover;display:block;}
  .hero-slider-dots{
    display:flex;justify-content:center;gap:8px;
  }
  .hero-slider-dots .dot{
    width:8px;height:8px;border-radius:50%;padding:0;border:none;cursor:pointer;
    background:rgba(255,255,255,.45);
    transition:background .2s ease, transform .2s ease;
  }
  .hero-slider-dots .dot.active{background:#fff;transform:scale(1.25);}
  .hero-slider-arrow{
    flex:none;
    width:28px;height:28px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;border:1px solid rgba(255,255,255,.35);cursor:pointer;
    background:rgba(255,255,255,.12);color:#fff;
    transition:background .15s ease;
  }
  .hero-slider-arrow:hover{background:rgba(255,255,255,.24);}
  .hero-slider-arrow svg{width:14px;height:14px;}
  .hero-slider-arrow.prev svg{transform:rotate(180deg);}

  /* ---------- section shell ---------- */
  section{padding-block:56px;}
  .section-head{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:20px;margin-bottom:28px;flex-wrap:wrap;
  }
  .section-tag{
    display:inline-block;
    font-size:12.5px;font-weight:600;letter-spacing:.05em;
    color:var(--blue);margin-bottom:8px;
  }
  .section-head h2{font-size:clamp(22px,2.6vw,28px);color:var(--ink);}
  .section-more{
    font-size:14px;font-weight:600;color:var(--blue);
    display:inline-flex;align-items:center;gap:5px;
    white-space:nowrap;
  }
  .section-more svg{width:15px;height:15px;}

  /* ---------- news ---------- */
  .news-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
  }
  .news-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    box-shadow:var(--shadow);
    display:flex;flex-direction:column;
  }
  .news-thumb{
    aspect-ratio:16/9;
    background:var(--surface-alt);
    position:relative;
    overflow:hidden;
  }
  .news-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .news-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1;}
  .news-meta{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-faint);}
  .tag{
    font-size:11.5px;font-weight:600;color:var(--blue-deep);
    background:var(--surface-alt);
    padding:3px 9px;border-radius:5px;
  }
  .news-card h3{font-size:16px;line-height:1.45;color:var(--ink);font-family:"Sarabun",sans-serif;font-weight:700;}
  .news-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;}

  /* ---------- about ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
  }
  @media (max-width:860px){.about-grid{grid-template-columns:1fr;}}
  .about-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    padding:24px;
    display:flex;flex-direction:column;gap:12px;
  }
  .about-icon{
    width:46px;height:46px;border-radius:10px;
    background:var(--surface-alt);
    display:flex;align-items:center;justify-content:center;
    color:var(--blue);
  }
  .about-icon svg{width:24px;height:24px;}
  .about-card h3{font-size:17px;color:var(--ink);}
  .about-card p{font-size:14px;color:var(--ink-soft);line-height:1.7;}
  .about-link{font-size:13.5px;font-weight:600;color:var(--blue);display:inline-flex;align-items:center;gap:5px;margin-top:auto;}
  .about-link svg{width:14px;height:14px;}

  /* ---------- services ---------- */
  .services{background:var(--surface-alt);}
  .svc-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
  }
  @media (max-width:920px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.svc-grid{grid-template-columns:1fr;}}
  .svc-item{
    background:var(--surface);
    padding:26px 20px;
    display:flex;flex-direction:column;gap:12px;
  }
  .svc-item svg{width:26px;height:26px;color:var(--blue);}
  .svc-item h4{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.45;}
  .svc-item span{font-size:12.5px;color:var(--ink-faint);}

  /* ---------- sems cta ---------- */
  .sems-cta{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    padding:32px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
    box-shadow:var(--shadow);
  }
  .sems-cta-left{display:flex;align-items:center;gap:18px;min-width:260px;}
  .sems-badge{
    width:56px;height:56px;border-radius:12px;flex:none;
    background:linear-gradient(150deg,var(--blue-deep),var(--blue-bright));
    display:flex;align-items:center;justify-content:center;color:#fff;
  }
  .sems-badge svg{width:28px;height:28px;}
  .sems-badge.badge-red{background:linear-gradient(150deg,#8A1F17,var(--red));}
  .sems-cta h3{font-size:18px;color:var(--ink);}
  .sems-cta p{font-size:13.5px;color:var(--ink-soft);margin-top:4px;}
  .btn-red{background:var(--red);}
  .btn-red:hover{background:#B8281F;}

  .system-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
  @media (max-width:860px){.system-grid{grid-template-columns:1fr;}}

  /* ---------- contact ---------- */
  .contact-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:20px;
  }
  @media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}
  .contact-map{
    background:var(--surface-alt);
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    min-height:280px;
  }
  .contact-map iframe{width:100%;height:100%;min-height:280px;border:0;display:block;}
  .contact-card{
    position:relative;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    padding:24px;
  }
  .contact-info-row{display:flex;gap:14px;padding-block:12px;border-bottom:1px solid var(--line);}
  .contact-info-row:last-child{border-bottom:none;padding-bottom:0;}
  .contact-info-row:first-child{padding-top:0;}
  .contact-info-row svg{width:19px;height:19px;color:var(--blue);flex:none;margin-top:2px;}
  .contact-info-row .lbl{font-size:12.5px;color:var(--ink-faint);}
  .contact-info-row .val{font-size:14.5px;color:var(--ink);font-weight:500;margin-top:2px;line-height:1.55;}
  a.contact-info-row{color:inherit;text-decoration:none;}
  a.contact-info-row .action-arrow{margin-left:auto;align-self:center;width:16px;height:16px;color:var(--ink-faint);flex:none;}
  .contact-info-cta{
    position:relative;
    z-index:0;
    align-items:center;
  }
  .contact-info-cta::after{
    content:"";
    position:absolute;
    z-index:-1;
    left:-24px;right:-24px;top:0;bottom:-24px;
    border-radius:0 0 12px 12px;
    transition:background .15s ease;
  }
  .contact-info-cta:hover::after{background:var(--surface-alt);}
  .contact-info-cta svg:first-child{color:var(--red);}
  .contact-info-cta span{font-size:14.5px;font-weight:700;color:var(--ink);}

  .action-arrow{margin-left:auto;width:16px;height:16px;color:var(--ink-faint);flex:none;}

  /* ---------- footer ---------- */
  footer{background:var(--blue-deep);color:#DCEAFB;}
  .footer-grid{
    display:grid;grid-template-columns:1.4fr 1fr;gap:32px;
    padding-block:44px 28px;
  }
  @media (max-width:760px){.footer-grid{grid-template-columns:1fr;}}
  .footer-brand{display:flex;align-items:flex-start;gap:11px;margin-bottom:14px;}
  .footer-brand .brand-mark{width:38px;height:38px;}
  .footer-brand-text{display:flex;flex-direction:column;gap:0;line-height:1.15;}
  .footer-brand-text .name-th{font-family:"Kanit",sans-serif;font-weight:600;font-size:15px;color:#fff;}
  .footer-brand-text .name-en{font-size:11.5px;color:#9DBCE0;letter-spacing:.02em;}
  footer p{font-size:13.5px;line-height:1.75;color:#B9D2F0;}
  footer h5{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.04em;color:#fff;}
  .footer-contact{display:flex;flex-direction:column;gap:12px;}
  .footer-contact-item{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#C6DBF5;}
  a.footer-contact-item:hover{color:#fff;}
  .footer-contact svg{width:16px;height:16px;flex:none;color:#7EA9DE;}
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.14);
    padding-block:18px;
    display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
    font-size:12.5px;color:#9DBCE0;
  }

  /* ---------- sub-page header ---------- */
  .breadcrumb{
    display:flex;align-items:center;flex-wrap:wrap;gap:6px;
    font-size:13px;color:var(--ink-faint);
    padding-block:16px 0;
  }
  .breadcrumb a{color:var(--blue);font-weight:500;}
  .breadcrumb a:hover{color:var(--blue-deep);}
  .breadcrumb .sep{color:var(--ink-faint);opacity:.6;}
  .breadcrumb .current{color:var(--ink-soft);}

  .page-hero{
    background:var(--surface-alt);
    border-bottom:1px solid var(--line);
    padding-block:20px 40px;
  }
  .page-hero h1{font-size:clamp(26px,3.6vw,36px);color:var(--ink);}
  .page-hero p{margin-top:12px;font-size:15px;line-height:1.7;color:var(--ink-soft);max-width:60ch;}

  /* ---------- org chart placeholder ---------- */
  .org-chart-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    padding:16px;
    box-shadow:var(--shadow);
  }
  .org-chart-card img{width:100%;height:auto;display:block;border-radius:10px;}
  .org-note{
    display:flex;align-items:center;justify-content:center;gap:8px;
    margin-top:18px;
    font-size:13px;color:var(--ink-faint);text-align:center;
  }
  .org-note svg{width:15px;height:15px;flex:none;}