/* =========================================================
   สำนักงานสาธารณสุขจังหวัดลพบุรี - Main Stylesheet
   Design tokens
   ========================================================= */
:root{
  --blue: #0b5ed7;
  --blue-dark: #084298;
  --blue-deep: #062e63;
  --blue-light: #eaf3fd;
  --blue-pale: #f5f9ff;
  --white: #ffffff;
  --ink: #10202f;
  --gray-600: #55697a;
  --gray-400: #93a3b1;
  --border: #e2e9f2;
  --teal: #12b76a;
  --amber: #f59e0b;
  --red: #e13b3b;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 2px 10px rgba(11,94,215,.08);
  --shadow-md: 0 12px 32px rgba(6,46,99,.12);
  --shadow-lg: 0 24px 60px rgba(6,46,99,.18);

  --header-h: 84px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
/* ===== Aurora Background ===== */

body{
    margin:0;
    font-family:"Kanit","Sarabun",sans-serif;
    color:var(--ink);
    background:#f8fbff;
    font-weight:300;
    line-height:1.2;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
body::after{

    content:"";

    position:fixed;

    inset:0;

    background-image:
    radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);

    background-size:4px 4px;

    opacity:.15;

    z-index:-1;

    pointer-events:none;

}


.animated-bg{
    position:fixed;
    inset:0;
    z-index:-1;
    overflow:hidden;
    background:
        linear-gradient(135deg,#f8fbff 0%,#eef6ff 50%,#f8fbff 100%);
    background-size:300% 300%;
    animation:bgFlow 6s ease-in-out infinite;
}

/* ลูกกลมแบบ Glass แต่เห็นชัดขึ้น */
.animated-bg span{
    position:absolute;
    border-radius:50%;

    background:rgba(59,130,246,.18);
    border:1px solid rgba(255,255,255,.5);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    box-shadow:
        0 20px 50px rgba(59,130,246,.18),
        inset 0 1px 2px rgba(255,255,255,.6);

    animation:float 8s ease-in-out infinite;
    will-change:transform;
}

/* ตำแหน่ง */
.animated-bg span:nth-child(1){
    width:140px;height:140px;
    left:6%;top:14%;
}

.animated-bg span:nth-child(2){
    width:220px;height:220px;
    left:70%;top:8%;
    animation-duration:9s;
    background:rgba(14,165,233,.16);
}

.animated-bg span:nth-child(3){
    width:110px;height:110px;
    left:24%;top:72%;
    animation-duration:7s;
}

.animated-bg span:nth-child(4){
    width:260px;height:260px;
    left:76%;top:56%;
    animation-duration:10s;
    background:rgba(99,102,241,.14);
}

.animated-bg span:nth-child(5){
    width:160px;height:160px;
    left:46%;top:28%;
    animation-duration:8s;
}

.animated-bg span:nth-child(6){
    width:85px;height:85px;
    left:58%;top:78%;
    animation-duration:6.5s;
}

/* พื้นหลังไหลเร็วขึ้น */
@keyframes bgFlow{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

/* ขยับชัดขึ้น */
@keyframes float{
    0%{
        transform:translate3d(0,0,0) scale(1) rotate(0deg);
    }

    20%{
        transform:translate3d(45px,-35px,0) scale(1.12) rotate(8deg);
    }

    40%{
        transform:translate3d(-30px,-70px,0) scale(.92) rotate(16deg);
    }

    60%{
        transform:translate3d(55px,-20px,0) scale(1.08) rotate(10deg);
    }

    80%{
        transform:translate3d(-25px,25px,0) scale(.98) rotate(4deg);
    }

    100%{
        transform:translate3d(0,0,0) scale(1) rotate(0deg);
    }
}
h1,h2,h3,h4,h5,h6{ font-family:"Kanit",sans-serif; font-weight:600; margin:0 0 .5em; color: var(--blue-deep); }
p{ margin:0 0 1em; color: var(--gray-600); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

.container{ width:100%; max-width:1500px; margin:0 auto; padding:0 24px; }
.section{ padding:88px 0; }
.section-sm{ padding:56px 0; }
.bg-pale{ background: var(--blue-pale); }
.bg-blue{ background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%); color:#fff; }
.bg-blue h2, .bg-blue h3, .bg-blue p{ color:#fff; }

/* ---------- Eyebrow / Section head ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:.06em;
  color: var(--blue); background: var(--blue-light);
  padding:6px 16px; border-radius:100px; margin-bottom:14px;
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background: var(--teal); }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(26px,3.2vw,38px); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:13px 28px; border-radius:100px; font-weight:500; font-size:15px;
  border:1.5px solid transparent; cursor:pointer; transition:.25s ease;
  white-space:nowrap;
}
.btn-primary{ background: var(--blue); color:#fff; }
.btn-primary:hover{ background: var(--blue-dark); transform:translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline{ border-color: var(--blue); color: var(--blue); background:transparent; }
.btn-outline:hover{ background: var(--blue); color:#fff; }
.btn-white{ background:#fff; color:var(--blue); }
.btn-white:hover{ background: var(--blue-deep); color:#fff; }
.btn-sm{ padding:9px 18px; font-size:13.5px; }

/* =========================================================
   HEADER / TOP BAR
   ========================================================= */
.topbar{
  background: var(--blue-deep); color:#cfe1fa; font-size:13px;
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; height:38px; }
.topbar a{ color:#cfe1fa; }
.topbar a:hover{ color:#fff; }
.topbar-left{ display:flex; gap:22px; align-items:center; }
.topbar-left span{ display:inline-flex; align-items:center; gap:6px; }
.topbar-right{ display:flex; gap:14px; align-items:center; }
.topbar-right a{ width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:12px; }
.topbar-right a:hover{ background: var(--blue); }

/* ---------- Main nav: transparent glass on load, solid on scroll ---------- */
.site-header{
  position: sticky; top:0; z-index:1000;
}
.navbar{
    position: sticky; /* หรือ fixed */
    top: 0;
    z-index: 1000;

    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* Glass Effect */
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);

    border-bottom: 1px solid rgba(255,255,255,.25);
    box-shadow: 0 8px 32px rgba(0,0,0,.08);

    transition: all .3s ease;
}

.navbar.solid{
    background: rgba(255,255,255,.85);
}

.navbar .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:52px; height:52px; border-radius:14px;
  /* background: linear-gradient(135deg, var(--blue), var(--blue-dark)); */
  color:#fff; display:flex; align-items:center; justify-content:center;
  /* font-size:24px; flex-shrink:0; box-shadow: var(--shadow-sm); */
}
.brand-text strong{ display:block; font-family:"Kanit"; font-weight:600; font-size:17px; color:var(--blue-deep); line-height:1.25; }
.brand-text span{ display:block; font-size:11.5px; color:var(--gray-600); letter-spacing:.03em; }

/* Desktop menu */
.nav-menu{ display:flex; align-items:center; gap:2px; }
.nav-menu > li{ position:relative; }
.nav-menu > li > a{
  display:flex; align-items:center; gap:6px;
  padding:12px 16px; font-size:15px; font-weight:500; color: var(--blue-deep);
  border-radius:10px; transition:.2s;
}
.nav-menu > li > a:hover, .nav-menu > li.active > a{ background: var(--blue-light); color: var(--blue); }
.nav-menu > li > a .chev{ font-size:10px; transition:.2s; }
.nav-menu > li:hover > a .chev{ transform: rotate(180deg); }

.dropdown{
  position:absolute; top:calc(100% + 8px); left:0; min-width:260px;
  background:#fff; border-radius:14px; box-shadow: var(--shadow-lg);
  padding:10px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:.22s ease; border:1px solid var(--border);
}
.nav-menu > li:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown li a{ display:block; padding:11px 14px; border-radius:9px; font-size:14.5px; color:var(--ink); }
.dropdown li a:hover{ background: var(--blue-light); color:var(--blue); padding-left:19px; }

.nav-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--blue-light); color:var(--blue); border:none; cursor:pointer; transition:.2s; font-size:16px;
}
.icon-btn:hover{ background:var(--blue); color:#fff; }

/* Hamburger */
.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; border-radius:12px; border:none; background:var(--blue-light); cursor:pointer;
}
.hamburger span{ width:20px; height:2px; background:var(--blue); margin:0 auto; border-radius:2px; transition:.3s; }
.hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-drawer{
  position:fixed; top:0; right:-100%; width:min(340px,86vw); height:100vh; z-index:1100;
  background:#fff; box-shadow: var(--shadow-lg); transition:right .35s ease; overflow-y:auto;
  padding:22px;
}
.mobile-drawer.open{ right:0; }
.drawer-overlay{
  position:fixed; inset:0; background:rgba(6,46,99,.45); z-index:1090;
  opacity:0; visibility:hidden; transition:.3s;
}
.drawer-overlay.open{ opacity:1; visibility:visible; }
.drawer-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.drawer-close{ width:36px; height:36px; border-radius:50%; border:none; background:var(--blue-light); color:var(--blue); font-size:16px; cursor:pointer; }
.mobile-menu li{ border-bottom:1px solid var(--border); }
.mobile-menu > li > a{ display:flex; justify-content:space-between; align-items:center; padding:15px 6px; font-weight:500; font-size:15.5px; color:var(--blue-deep); }
.mobile-submenu{ display:none; padding-left:12px; background:var(--blue-pale); border-radius:10px; margin-bottom:8px; }
.mobile-submenu.open{ display:block; }
.mobile-submenu li{ border-bottom:none; }
.mobile-submenu a{ display:block; padding:11px 10px; font-size:14px; color:var(--gray-600); }
.mobile-menu .caret{ transition:.2s; font-size:12px; color:var(--gray-400); }
.mobile-menu li.open > a .caret{ transform:rotate(180deg); }

/* =========================================================
   BREADCRUMB / PAGE HERO (inner pages)
   ========================================================= */
.page-hero{
  background: linear-gradient(135deg, var(--blue-deep), var(--blue) 120%);
  color:#fff; padding:64px 0 46px; position:relative; overflow:hidden;
}
.page-hero::after{
  content:""; position:absolute; inset:0; opacity:.12;
  background-image: radial-gradient(circle at 20% 20%, #fff 0, transparent 40%), radial-gradient(circle at 80% 60%, #fff 0, transparent 35%);
}
.page-hero .container{ position:relative; }
.page-hero h1{ color:#fff; font-size:clamp(26px,4vw,40px); margin-bottom:10px; }
.breadcrumb{ display:flex; gap:8px; align-items:center; font-size:13.5px; color:#cfe1fa; flex-wrap:wrap; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb .sep{ opacity:.6; }

/* ---------- pulse divider: signature element ---------- */
.pulse-divider{ width:100%; height:46px; display:block; }
.pulse-divider path{ fill:none; stroke:var(--blue); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; opacity:.5;}

/* =========================================================
   HOME HERO
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  background: radial-gradient(circle at 15% 20%, var(--blue-light) 0%, var(--white) 55%);
  padding: 70px 0 40px;
}
.hero-grid{ display:grid; grid-template-columns: 1.4fr .95fr; gap:48px; align-items:center; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; background:var(--blue-light); color:var(--blue); padding:8px 18px; border-radius:100px; font-size:13.5px; font-weight:500; margin-bottom:20px; }
.hero h1{ font-size:clamp(30px,4.4vw,50px); line-height:1.25; margin-bottom:18px; }
.hero h1 .hl{ color:var(--blue); position:relative; }
.hero p.lead{ font-size:17px; max-width:520px; margin-bottom:28px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
.hero-stats{ display:flex; gap:34px; flex-wrap:wrap; }
.hero-stats div strong{ display:block; font-family:"Kanit"; font-size:26px; color:var(--blue-deep); }
.hero-stats div span{ font-size:13px; color:var(--gray-600); }

.hero-visual{
    position:relative;
    perspective:1000px;
}
.hero-visual .card-float{
  position:absolute; background:#fff; border-radius:16px; box-shadow: var(--shadow-md);
  padding:14px 18px; display:flex; align-items:center; gap:12px; font-size:13.5px; font-weight:500;
  animation: floaty 5s ease-in-out infinite;
}
.hero-visual .card-float .ico{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; color:#fff; flex-shrink:0; }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.hero-visual .main-img{
    border-radius:28px;
    overflow:hidden;
    box-shadow:var(--shadow-lg);
    aspect-ratio:5/3.3;

    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-visual .main-img img{
    width:60%;
    height:auto;
}

.ticker-bar{ background:var(--blue-deep); color:#fff; }
.ticker-bar .container{ display:flex; align-items:center; gap:16px; height:30px; }
.ticker-bar .tag{ background:var(--teal); font-size:12px; font-weight:600; padding:5px 12px; border-radius:100px; flex-shrink:0; }
.ticker-track{ overflow:hidden; flex:1; white-space:nowrap; position:relative; }
.ticker-track ul{ display:inline-flex; gap:60px; padding-right:60px; animation: scrollTicker 28s linear infinite; }
.ticker-track:hover ul{ animation-play-state:paused; }
.ticker-track li a:hover{ color:#fff; text-decoration:underline; }
.ticker-track li a{ font-size:13.5px; color:#e7f0fd; }
@keyframes scrollTicker{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-50%);} }

/* =========================================================
   CARDS: news / services / stats
   ========================================================= */
.grid{ display:grid; gap:26px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }

.news-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.news-tabs button{
  padding:9px 20px; border-radius:100px; border:1.5px solid var(--border); background:#fff; color:var(--gray-600);
  font-size:13.5px; font-weight:500; cursor:pointer; transition:.2s;
}
.news-tabs button.active, .news-tabs button:hover{ background:var(--blue); border-color:var(--blue); color:#fff; }

.card{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius-md); overflow:hidden;
  transition:.25s ease; display:flex; flex-direction:column;
}
.card:hover{ box-shadow: var(--shadow-md); transform:translateY(-5px); border-color:transparent; }
.card-thumb{ aspect-ratio:16/10; overflow:hidden; position:relative; background:var(--blue-light); }
.card-thumb svg{ width:100%; height:100%; }
.card-cat{ position:absolute; top:12px; left:12px; background:var(--blue); color:#fff; font-size:11.5px; font-weight:600; padding:5px 12px; border-radius:100px; }
.card-body{ padding:20px 20px 22px; flex:1; display:flex; flex-direction:column; }
.card-date{ font-size:12px; color:var(--gray-400); display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.card-body h3{ font-size:16.5px; line-height:1.5; margin-bottom:10px; }
.card-body p{ font-size:13.8px; margin-bottom:16px; }
.card-more{ margin-top:auto; font-size:13.5px; font-weight:600; color:var(--blue); display:inline-flex; align-items:center; gap:6px; }

/*ตาราง*/
/* =========================================================
   NEWS TABLE - FIT EXISTING .container
========================================================= */

.news-table-wrap{
  width:100%;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

/* Bootstrap responsive */
.table-responsive{
  width:100%;
  margin:0;
  padding:0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

/* Table */
.news-table{
  width:100%;
  margin:0;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed; /* สำคัญ: บังคับให้พอดีกับ container */
}

/* Header */
.news-table thead th{
  background:#f8fafc;
  border-bottom:1px solid var(--border);
  color:var(--gray-600);
  font-size:13px;
  font-weight:600;
  padding:18px 20px;
  vertical-align:middle;
}

/* Body */
.news-table tbody td{
  padding:18px 20px;
  border-bottom:1px solid #eef2f7;
  vertical-align:middle;
  background:#fff;
}

.news-table tbody tr{
  transition:background .2s ease;
}

.news-table tbody tr:hover{
  background:#f8fbff;
}

.news-table tbody tr:last-child td{
  border-bottom:none;
}

/* Thumbnail */
.table-thumb{
  width:100px;
  height:64px;
  border-radius:14px;
  overflow:hidden;
  background:var(--blue-light);
}

.table-thumb img,
.table-thumb svg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Title */
.news-title{
  font-size:15px;
  font-weight:600;
  line-height:1.5;
  margin-bottom:6px;
  color:var(--ink);
}

.news-title a{
  color:inherit;
  text-decoration:none;
  transition:color .2s ease;
}

.news-title a:hover{
  color:var(--blue);
}

/* Excerpt */
.news-desc{
  font-size:13px;
  color:var(--gray-500);
  line-height:1.6;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Badge */
.table-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 14px;
  border-radius:999px;
  background:#eaf2ff;
  color:var(--blue);
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}

/* Date */
.table-date{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--gray-500);
  white-space:nowrap;
}

/* =========================================================
   RESPONSIVE
========================================================= */

/* Desktop */
@media (min-width:769px){
  .news-table{
    min-width:100%;
  }
}

/* Mobile */
@media (max-width:768px){

  /* ให้เลื่อนเฉพาะตาราง */
  .news-table{
    min-width:720px;
    table-layout:auto;
  }

  .news-table thead th,
  .news-table tbody td{
    padding:14px;
  }

  .table-thumb{
    width:84px;
    height:54px;
  }

  .news-title{
    font-size:13.5px;
  }

  .news-desc{
    font-size:12px;
  }

  .table-badge{
    font-size:11.5px;
    padding:6px 12px;
  }

  .table-date{
    font-size:12px;
  }
}

/* Scrollbar */
.table-responsive::-webkit-scrollbar{
  height:8px;
}

.table-responsive::-webkit-scrollbar-thumb{
  background:#cbd5e1;
  border-radius:999px;
}

/* service icon cards */
.svc-card{ padding:30px 26px; border-radius:var(--radius-md); border:1px solid var(--border); background:#fff; transition:.25s; }
.svc-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:transparent; }
.svc-icon{ width:56px; height:56px; border-radius:16px; background:var(--blue-light); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:18px; }
.svc-card h3{ font-size:17px; margin-bottom:8px; }
.svc-card p{ font-size:13.8px; margin-bottom:0; }

/* stats */
.stat-item{ text-align:center; padding:24px; }
.stat-item strong{ display:block; font-family:"Kanit"; font-size:clamp(28px,3.4vw,42px); color:#fff; }
.stat-item span{ font-size:13.5px; color:#cfe1fa; }

/* personnel */
.person-row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:28px; margin-bottom:72px; }
.person-row:last-child{ margin-bottom:0; }
.person-card{
  display:flex; flex-direction:column; text-align:center; background:#fff;
  border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s, border-color .3s;
}
.person-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:#c9dcf6; }
.person-photo{
  position:relative; width:100%; aspect-ratio:4/5; overflow:hidden;
  background:linear-gradient(160deg,#eaf3fd,#d3e4fa); border-bottom:4px solid var(--blue);
}
.person-photo img, .person-photo svg{
  width:100%; height:100%; display:block; object-fit:cover; object-position:center top; transition:transform .5s;
}
.person-photo svg rect{ fill:transparent; }
.person-card:hover .person-photo img{ transform:scale(1.05); }
.person-card h4{ font-size:16.5px; line-height:1.4; margin:18px 18px 6px; color:var(--ink); }
.person-card span{
  display:block; flex:1; margin:0 18px 22px; font-size:13px; line-height:1.55; font-weight:400; color:var(--gray-600);
}
.person-row .person-card{ width:calc(25% - 21px); min-width:210px; max-width:280px; }
/* นายแพทย์สาธารณสุขจังหวัด: การ์ดเด่นกว่าใบอื่น */
.person-row.is-head .person-card{ width:300px; max-width:100%; border-color:#bcd5f7; box-shadow:var(--shadow-md); }
.person-row.is-head .person-photo{ border-bottom-color:var(--teal); }
.person-row.is-head .person-card h4{ font-size:19px; margin-top:20px; color:var(--blue-deep); }
.person-row.is-head .person-card span{ font-size:14px; color:var(--blue); font-weight:500; }
@media (max-width:600px){
  .person-row{ gap:20px; margin-bottom:52px; }
  .person-row .person-card, .person-row.is-head .person-card{ width:100%; max-width:320px; }
}

/* timeline (about) */
.timeline{ position:relative; padding-left:32px; border-left:2px dashed var(--border); }
.timeline-item{ position:relative; padding-bottom:34px; }
.timeline-item::before{ content:""; position:absolute; left:-39px; top:2px; width:16px; height:16px; border-radius:50%; background:var(--blue); border:3px solid var(--blue-light); }
.timeline-item strong{ display:block; color:var(--blue); font-family:"Kanit"; margin-bottom:4px; }

/* accordion (services/downloads) */
.acc-item{ border:1px solid var(--border); border-radius:14px; margin-bottom:12px; overflow:hidden; }
.acc-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 22px; cursor:pointer; font-weight:500; background:#fff; }
.acc-head:hover{ background:var(--blue-pale); }
.acc-head .plus{ transition:.25s; color:var(--blue); }
.acc-item.open .acc-head .plus{ transform:rotate(45deg); }
.acc-body{ max-height:0; overflow:hidden; transition:.3s ease; background:var(--blue-pale); }
.acc-item.open .acc-body{ max-height:400px; }
.acc-body-inner{ padding:4px 22px 20px; font-size:14px; color:var(--gray-600); }

/* download table */
.doc-table{ width:100%; border-collapse:separate; border-spacing:0 10px; }
.doc-table tr{ background:#fff; }
.doc-table td{ padding:16px 18px; font-size:14px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.doc-table td:first-child{ border-left:1px solid var(--border); border-radius:12px 0 0 12px; }
.doc-table td:last-child{ border-right:1px solid var(--border); border-radius:0 12px 12px 0; text-align:right; }
.doc-icon{ width:38px; height:38px; border-radius:10px; background:var(--blue-light); color:var(--blue); display:inline-flex; align-items:center; justify-content:center; margin-right:12px; font-size:16px; vertical-align:middle; }

/* gallery */
.gallery-grid{ column-count:3; column-gap:20px; }
.gallery-item{ break-inside:avoid; margin-bottom:20px; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); position:relative; cursor:pointer; }
.gallery-item svg{ width:100%; display:block; transition:.4s; }
.gallery-item:hover svg{ transform:scale(1.06); }
.gallery-caption{ position:absolute; bottom:0; left:0; right:0; padding:16px; background:linear-gradient(0deg, rgba(6,46,99,.85), transparent); color:#fff; font-size:13px; opacity:0; transition:.25s; }
.gallery-item:hover .gallery-caption{ opacity:1; }

/* forms */
.form-control-x{ width:100%; padding:13px 16px; border:1.5px solid var(--border); border-radius:12px; font-family:inherit; font-size:14.5px; color:var(--ink); transition:.2s; background:#fff; }
.form-control-x:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-light); }
.form-label-x{ display:block; font-size:13.5px; font-weight:500; margin-bottom:7px; color:var(--blue-deep); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }

/* pagination */
.pagination-x{ display:flex; gap:8px; justify-content:center; align-items:center; margin-top:40px; flex-wrap:wrap; }
.pagination-x a{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--border); font-size:14px; color:var(--gray-600); text-decoration:none; transition:.2s; }
.pagination-x a.active, .pagination-x a:hover{ background:var(--blue); border-color:var(--blue); color:#fff; }
.pagination-x .pg-dots{ color:var(--gray-400); padding:0 4px; }

/* sidebar widgets */
.widget{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); padding:22px; margin-bottom:24px; }
.widget h4{ font-size:15.5px; padding-bottom:14px; margin-bottom:14px; border-bottom:2px solid var(--blue-light); }
.widget-list li{ padding:11px 0; border-bottom:1px dashed var(--border); font-size:13.8px; display:flex; gap:10px; }
.widget-list li:last-child{ border-bottom:none; }
.widget-list a:hover{ color:var(--blue); }
.tag-cloud{ display:flex; flex-wrap:wrap; gap:8px; }
.tag-cloud a{ background:var(--blue-pale); padding:7px 14px; border-radius:100px; font-size:12.5px; color:var(--gray-600); }
.tag-cloud a:hover{ background:var(--blue); color:#fff; }

/* CTA */
.cta-box{ background:linear-gradient(120deg,var(--blue-deep),var(--blue)); border-radius:32px; padding:56px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; position:relative; overflow:hidden;}
.cta-box h2{ color:#fff; font-size:clamp(22px,2.6vw,32px); margin-bottom:8px; }
.cta-box p{ color:#dbe9fc; margin-bottom:0; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: var(--blue-deep); color:#cfe1fa; padding-top:70px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-brand{ display:flex; gap:12px; margin-bottom:16px; }
.footer-brand strong{ color:#fff; font-family:"Kanit"; font-size:16px; }
.footer-brand span{ font-size:12px; color:#9db8de; }
.site-footer h5{ color:#fff; font-size:14.5px; margin-bottom:18px; letter-spacing:.02em; }
.footer-links li{ margin-bottom:11px; font-size:13.8px; }
.footer-links a:hover{ color:#fff; }
.footer-contact li{ display:flex; gap:10px; margin-bottom:14px; font-size:13.5px; align-items:flex-start; }
.footer-contact i{ margin-top:2px; color:#7fb0f2; }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ background:var(--blue); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-size:12.5px; flex-wrap:wrap; gap:10px; color:#9db8de; }
.footer-bottom a{ color:#9db8de; }
.footer-bottom a:hover{ color:#fff; }

/* back to top */
.back-top{
  position:fixed; right:24px; bottom:24px; width:48px; height:48px; border-radius:50%;
  background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); border:none; cursor:pointer; z-index:900; opacity:0; visibility:hidden; transition:.3s;
}
.back-top.show{ opacity:1; visibility:visible; }

/* cookie consent card */
.cookie-bar{
  position:fixed; left:24px; bottom:24px; z-index:1000;
  width:420px; max-width:calc(100% - 32px);
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  padding:26px 26px 22px;
  transform:translateY(30px) scale(.96); opacity:0; transition:.35s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.cookie-bar.show{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
.cookie-bar-icon{
  width:52px; height:52px; border-radius:14px; background:var(--blue-light); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:16px;
}
.cookie-bar h4{ font-size:17px; font-weight:600; color:var(--ink); margin:0 0 8px; }
.cookie-bar p{ margin:0 0 20px; font-size:13.8px; line-height:1.75; color:var(--gray-600); }
.cookie-bar p a{ color:var(--blue); font-weight:500; text-decoration:underline; }
.cookie-bar-actions{ display:flex; gap:10px; }
.cookie-btn{
  flex:1; border:1.5px solid transparent; background:var(--blue); color:#fff;
  font-family:inherit; font-size:14px; font-weight:500; padding:11px 18px;
  border-radius:10px; cursor:pointer; transition:.2s; white-space:nowrap;
}
.cookie-btn:hover{ background:var(--blue-dark); box-shadow:var(--shadow-sm); }
.cookie-btn-outline{ background:#fff; border-color:var(--border); color:var(--gray-600); }
.cookie-btn-outline:hover{ background:var(--blue-pale); border-color:var(--blue); color:var(--blue); }

@media (max-width:600px){
  .cookie-bar{ left:16px; right:16px; bottom:16px; width:auto; padding:22px 20px 20px; }
}

/* =========================================================
   PR IMAGE SLIDER + SIDE PHOTO  (ภาพประชาสัมพันธ์)
   ========================================================= */
.pr-layout{ display:grid; grid-template-columns: 2.2fr 1fr; gap:24px; align-items:stretch; }
.pr-slider{ position:relative; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); background:var(--blue-light); }
.pr-slider{ min-height:380px; }
/* สไลด์ซ้อนกันเต็มกรอบ สลับด้วยการเฟด — ภาพแสดงเต็มภาพ (contain) ทุกสัดส่วน ส่วนที่เหลือเติมด้วยภาพเดียวกันแบบเบลอ */
.pr-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .6s ease, visibility 0s linear .6s; background:#0b2a55; }
.pr-slide.active{ opacity:1; visibility:visible; transition:opacity .6s ease; z-index:1; }
.pr-bg{ position:absolute; inset:-70px; background-size:cover; background-position:center; filter:blur(24px) brightness(.85) saturate(1.1); }
.pr-slide > a{ position:absolute; inset:0; display:block; }
.pr-slide img{ position:relative; display:block; width:100%; height:100%; object-fit:contain; }
.pr-slide svg{ position:relative; display:block; width:100%; height:100%; }
.pr-caption{
  position:absolute; left:0; right:0; bottom:0; padding:46px 20px 38px; z-index:2; pointer-events:none;
  background:linear-gradient(0deg, rgba(6,32,63,.85), rgba(6,32,63,.45) 55%, transparent);
  color:#fff; font-size:13px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
}
.pr-caption strong{ color:#fff; font-size:14.5px; font-weight:500; }
.pr-nav{ position:absolute; top:14px; right:14px; display:flex; gap:8px; z-index:6; }
.pr-nav button{
  width:34px; height:34px; border-radius:50%; border:none; background:rgba(255,255,255,.85); color:var(--blue-deep);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; font-size:14px;
}
.pr-nav button:hover{ background:#fff; box-shadow:var(--shadow-sm); }
.pr-dots{ position:absolute; bottom:14px; left:20px; display:flex; gap:6px; z-index:6; }
.pr-dots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; transition:.2s; }
.pr-dots span.active{ background:#fff; width:20px; border-radius:4px; }
.pr-side{
    position: relative;
    padding-top: 48px;
    background: #fff;
    border: 1px solid #d6dce5;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.pr-side::before{
    content: "ติดตามเราบน Facebook";
    position: absolute;
    inset: 0 0 auto 0;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .3px;

    background: #084298;
}
/* =========================================================
   PR VIDEO GRID  (วีดีโอประชาสัมพันธ์)
   ========================================================= */
.video-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    overflow:hidden;
    transition:.25s;
}

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

.video-thumb{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#000;
}

.video-thumb iframe{
    width:100%;
    height:100%;
    border:0;
}

.video-cat{
    position:absolute;
    top:12px;
    left:12px;
    z-index:2;
    background:rgba(0,0,0,.7);
    color:#fff;
    font-size:11px;
    padding:5px 12px;
    border-radius:30px;
}

.video-body{
    padding:18px;
}

.video-body h3{
    font-size:16px;
    margin-bottom:8px;
}

.video-body p{
    font-size:14px;
    margin-bottom:15px;
}

.video-meta{
    display:flex;
    gap:18px;
    font-size:13px;
    color:#666;
}

.video-meta span{
    display:flex;
    align-items:center;
    gap:5px;
}

.video-meta .heart{
    color:#e74c3c;
}

/* =========================================================
   INTRANET SERVICE TOOLS GRID  (บริการของเรา)
   ========================================================= */
.tools-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
}

.tool-tile{
    position:relative;              /* เพิ่ม */
    overflow:hidden;                /* เพิ่ม */

    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:22px 14px;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:12px;

    cursor:pointer;

    transition:.35s ease;           /* เปลี่ยน */
}

/* เพิ่ม */
.tool-tile::before{
    content:"";
    position:absolute;
    top:-100%;
    left:-100%;
    width:200%;
    height:200%;
    background:radial-gradient(circle, rgba(37,99,235,.08), transparent 60%);
    opacity:0;
    transition:.4s;
}

.tool-tile:hover::before{
    opacity:1;
}

.tool-tile:hover{
    transform:translateY(-8px) scale(1.03);   /* เปลี่ยน */
    box-shadow:
        0 20px 35px rgba(37,99,235,.12),
        0 8px 18px rgba(0,0,0,.08);
    border-color:#c7d2fe;
}

.tool-icon{
    width:52px;
    height:52px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:#fff;
    flex-shrink:0;
    overflow:hidden;

    transition:.35s;              /* เพิ่ม */
}

/* เปลี่ยน */
.tool-tile:hover .tool-icon{
    transform:scale(1.15);
    filter:drop-shadow(0 8px 15px rgba(37,99,235,.35));
}

.tool-tile span{
    font-size:12.8px;
    font-weight:500;
    color:var(--ink);
    line-height:1.45;

    transition:.3s;               /* เพิ่ม */
}

/* เพิ่ม */
.tool-tile:hover span{
    color:var(--blue);
    letter-spacing:.2px;
}

.tool-icon img{
    width:52px;
    height:52px;
    object-fit:contain;

    transition:.35s;              /* เพิ่ม */
}

/* เพิ่ม */
.tool-tile:hover .tool-icon img{
    transform:scale(1.08);
}
/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991px){
  .topbar{ display:none; }
  .nav-menu, .nav-actions .icon-btn.hide-mobile{ display:none; }
  .hamburger{ display:flex; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:420px; margin:0 auto 20px; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ column-count:2; }
  .pr-layout{ grid-template-columns:1fr; }
  .pr-slider{ min-height:0; aspect-ratio:4/3; }
  .pr-side{ display:none; }
  .tools-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 640px){
  .tools-grid{ grid-template-columns:repeat(2,1fr); }
  .section{ padding:56px 0; }
  .grid-4, .grid-3, .grid-2{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .gallery-grid{ column-count:1; }
  .cta-box{ padding:34px; flex-direction:column; text-align:center; }
  .hero-stats{ gap:22px; }
  .brand-text span{ display:none; }
  .doc-table td{ font-size:12.5px; padding:12px; }
}

/* ---- ภาพประชาสัมพันธ์ / วีดีโอ ที่จัดการจากหลังบ้าน ---- */
.pr-slider.pr-single .pr-nav, .pr-slider.pr-single .pr-dots{ display:none; }
.video-body h3 a{ color:inherit; }
.video-body h3 a:hover{ color:var(--blue); }
.video-body p{ display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.video-more{ display:inline-flex; align-items:center; gap:6px; margin:0 0 14px; font-size:13.5px; font-weight:500; color:var(--blue); }
.video-more:hover{ gap:10px; }
.video-missing{ display:grid; place-items:center; height:100%; color:#fff; font-size:14px; }