:root{
    --color-primary: #0c1a4d;
    --color-primary-contrast: #FFF;
    --color-secondary: #15276b;
    --color-secondary-contrast: #FFF;
    --navy-dark:#0c1a4d;
    --navy:#15276b;
    --blue:#1f6feb;
    --gold:#c79a3a;
    --gold-light:#e7c873;
  }
  html{overflow-x:hidden;}
  body{font-family:'IBM Plex Sans Thai',sans-serif;
    /* background:#e7e5df; */
    overflow-x:hidden;
  }
  .eng{font-family:'IBM Plex Sans',sans-serif;}
  a{color:inherit;text-decoration:none;}
  .page{max-width:1280px;margin:0 auto;background:#fff;}
  img{max-width:100%;}
  /* .ph = ภาพ placeholder — แทนที่ด้วย <img> จริงในขั้น production */
  .ph{background-image:repeating-linear-gradient(45deg,#e6eaf4,#e6eaf4 11px,#dee3f1 11px,#dee3f1 22px);display:flex;align-items:center;justify-content:center;color:#9aa6c4;font-family:'IBM Plex Sans',monospace;font-size:11px;letter-spacing:.04em;text-align:center;}
  .bg-navy-dark{background-color:var(--navy-dark)!important;}
  .bg-navy{background-color:var(--navy)!important;}
  .text-navy{color:var(--navy)!important;}
  .text-gold{color:var(--gold)!important;}
  .bg-gold{background-color:var(--gold)!important;}
  .btn-navy{background-color:var(--navy);color:#fff;}
  .btn-navy:hover{background-color:var(--navy-dark);color:#fff;}
  .section-bar{width:5px;height:20px;background:var(--gold);border-radius:2px;display:inline-block;}
  .section-title{font-size:20px;font-weight:700;color:var(--navy);}
  .nav-link-custom{color:#c7d0ea;padding:13px 16px;border-bottom:3px solid transparent;font-size:14px;font-weight:500;transition:color .15s ease,background-color .15s ease;}
  .nav-link-custom.active{color:#fff;background:rgba(255,255,255,.12);border-bottom-color:var(--gold);}
  .nav-link-custom:hover{color:#fff;background:rgba(255,255,255,.08);cursor:pointer;}
  .hero{position:relative;min-height:420px;background:linear-gradient(115deg,#0c1a4d 0%,#15276b 45%,#1f6feb 100%);overflow:hidden;}
  .hero::before{content:"";position:absolute;inset:0;opacity:.5;background-image:radial-gradient(circle at 78% 50%,rgba(255,255,255,.18),transparent 45%);}
  .hero-content{position:relative;z-index:1;max-width:560px;padding:56px 24px 40px;}
  .hero-title{font-size:40px;line-height:1.15;}
  .hero-visual{position:absolute;right:48px;top:54px;width:430px;height:312px;}
  .hero-carousel .carousel-indicators{bottom:18px;margin:0;}
  .hero-carousel .carousel-indicators [data-bs-target]{width:6px;height:6px;border-radius:50%;background-color:rgba(255,255,255,.45);opacity:1;margin:0 4px;transition:width .2s ease,border-radius .2s ease;}
  .hero-carousel .carousel-indicators .active{width:26px;border-radius:3px;background-color:#fff;}
  .hero-carousel .carousel-control-prev,.hero-carousel .carousel-control-next{width:48px;}
  .border-dashed{border-bottom:1px dashed #e7ebf5;}
  .list-group-item-quiet{background:transparent;color:#dbe3f6;border:none;}
  .list-group-item-quiet:hover{background:rgba(255,255,255,.08);}

  .dropdown-menu-navy{background:var(--navy-dark);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px;margin-top:0;box-shadow:0 10px 24px rgba(0,0,0,.25);}
  .dropdown-menu-navy .dropdown-item{color:#c7d0ea;font-size:13.5px;padding:9px 14px;border-radius:6px;}
  .dropdown-menu-navy .dropdown-item:hover,.dropdown-menu-navy .dropdown-item:focus{color:#fff;background:rgba(255,255,255,.1);}
  .nav-link-custom.dropdown-toggle::after{margin-left:6px;vertical-align:1px;}
  @media (max-width:991.98px){
    .dropdown-menu-navy{background:rgba(255,255,255,.06);border:none;box-shadow:none;margin-left:10px;}
  }
  .navbar-toggler{border-color:rgba(255,255,255,.35);}
  .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
  .stat-divider{border-left:none;}
  @media (min-width:768px){ .stat-divider{border-left:1px solid rgba(255,255,255,.25);} }

  /* type-scale utilities — reused across cards, lists and tables instead of repeating font-size inline */
  .fz-10-5{font-size:10.5px;}
  .fz-11{font-size:11px;}
  .fz-11-5{font-size:11.5px;}
  .fz-12{font-size:12px;}
  .fz-12-5{font-size:12.5px;}
  .fz-13{font-size:13px;}
  .fz-13-5{font-size:13.5px;}
  .fz-14{font-size:14px;}
  .fz-14-5{font-size:14.5px;}
  .fz-15{font-size:15px;}
  .fz-16{font-size:16px;}
  .fz-19{font-size:19px;}
  .lh-14{line-height:1.4;}
  .lh-21{line-height:2.1;}
  .text-ink{color:#1a2236;}
  .text-slate{color:#3a4358;}
  .text-navy-soft{color:#aebadd;}
  .thai{font-family:'IBM Plex Sans Thai',sans-serif;}
  /* recurring box/media sizes */
  .h-120{height:120px;}
  .h-150{height:150px;}
  .h-180{height:180px;}
  .sq-40{width:40px;height:40px;}
  .sq-46{width:46px;height:46px;}
  .thumb-74x54{width:74px;height:54px;}
  .icon-tile{width:42px;height:42px;background:#eef2fb;}
  .card-head-soft{background:#eef2fb;font-size:15px;}
  .section-head-mt{margin:30px 0 20px;}
  .bg-soft{background:#fbfcfe;}
  .text-link{color:var(--blue);}
  .text-hero-soft{color:#cfe0ff;}
  @media (max-width:991.98px){
    .nav-link-custom{border-bottom:none;border-left:3px solid transparent;}
    .nav-link-custom.active{border-left-color:var(--gold);}
  }
  @media (max-width:575.98px){
    .hero-title{font-size:28px;}
    .hero-content{padding:40px 20px 32px;}
    .section-title{font-size:17px;}
  }