/* CPDHO: retain the original green identity and familiar Bootstrap layout. */
:root{--cp-green:#086b46;--cp-green-dark:#064c35;--cp-mint:#eaf5ef;--cp-ink:#183c31;--cp-muted:#637a70;--cp-line:#dfeae4;--cp-shadow:0 8px 30px rgba(24,60,49,.07)}
html{scroll-behavior:smooth;scroll-padding-top:150px}
body{font-family:'Bai Jamjuree',Tahoma,sans-serif!important;color:var(--cp-ink);background:#f7faf8;line-height:1.75}
h1,h2,h3,h4,h5,h6{line-height:1.5;font-weight:600}
a{color:var(--cp-green);text-underline-offset:4px}
a:hover{color:var(--cp-green-dark)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #d0a34e!important;outline-offset:4px}
img{max-width:100%}
#header{height:auto;min-height:120px;padding:0;background:#fff;border-top:4px solid var(--cp-green);border-bottom:1px solid var(--cp-line);box-shadow:0 3px 20px #183c3108}
.grid-menu-bar{margin:0}
#logoname{display:block;width:100%!important;max-width:1140px;max-height:105px;object-fit:contain;margin:8px auto}
#menu-bar{justify-content:center;border-top:1px solid var(--cp-line);padding-top:4px;padding-bottom:4px}
.navbar{width:100%;justify-content:center}
.navbar>ul{gap:5px;justify-content:center;flex-wrap:wrap}
.navbar a,.navbar a:focus{padding:11px 16px;font-size:14px;border-radius:8px;transition:background .2s,color .2s}
.navbar>ul>li>a:hover,.navbar>ul>li>a.active{background:var(--cp-mint);color:var(--cp-green)}
.navbar .getstarted,.navbar .getstarted:focus{background:var(--cp-green);border-radius:8px;color:#fff;padding:9px 22px;margin-left:16px}
.navbar .dropdown ul{border:1px solid var(--cp-line);border-radius:12px;box-shadow:var(--cp-shadow)}
#carouselCpdho{max-width:1320px;margin:24px auto 0;border-radius:18px;overflow:hidden;box-shadow:var(--cp-shadow);background:var(--cp-mint)}
#carouselCpdho .carousel-item img{width:100%;height:auto;max-height:500px;object-fit:contain}
.site-intro{max-width:1140px;margin:24px auto;padding:0 12px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-intro .eyebrow{font-size:12px;letter-spacing:2px;color:var(--cp-green);font-weight:600;margin-bottom:6px}
.site-intro h1{font-size:clamp(23px,3vw,34px);margin:0;color:var(--cp-ink)}
.site-intro p{font-size:14px;color:var(--cp-muted);margin:7px 0 0}
.office-badge{display:flex;gap:10px;align-items:center;border:1px solid var(--cp-line);background:#fff;border-radius:12px;padding:12px 18px;font-size:13px;white-space:nowrap}
.office-badge i{font-size:25px;color:var(--cp-green)}
section{padding:56px 0;overflow:visible}
.section-bg{background:#edf5f0}
.section-title{padding-bottom:30px}
.section-title h2{color:var(--cp-ink);font-size:28px;letter-spacing:0;font-weight:600}
.section-title h2::after{background:var(--cp-green);width:44px;height:3px;border-radius:3px}
.featured-services{padding:26px 0;background:transparent}
.featured-services .row{row-gap:16px}
.featured-services .icon-box{height:100%;margin:0 8px;padding:26px 18px;border:1px solid var(--cp-line);border-radius:14px;background:#fff;box-shadow:0 3px 16px #183c3104;transition:transform .2s,box-shadow .2s}
.featured-services .icon-box:hover{transform:translateY(-4px);box-shadow:var(--cp-shadow);border-color:#b5d2c2}
.featured-services .icon{margin:0 auto 14px;display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:14px;background:var(--cp-mint)}
.featured-services .icon i{font-size:28px;color:var(--cp-green)}
.featured-services .title{font-size:17px;margin:0;color:var(--cp-ink)}
.content-item{background:#fff;border:1px solid var(--cp-line)!important;border-radius:14px;padding:26px!important;box-shadow:0 3px 16px #183c3104}
.why-us .row,.about .row{row-gap:20px}
.content-item>span{font-size:21px!important;color:var(--cp-green)!important;font-weight:600}
.content-item p{overflow-wrap:anywhere}
.content-item li{font-size:12px!important;color:var(--cp-muted)}
.content-item a{font-size:13px}
.content-item hr{border-color:var(--cp-line);opacity:.85;margin:20px 0}
.clients .swiper-slide{padding:20px;background:#fff;border-radius:12px;border:1px solid var(--cp-line)}
.clients .swiper-slide h5{font-size:16px;margin:0}
.breadcrumbs{padding:25px 0;background:var(--cp-mint);border-bottom:1px solid var(--cp-line)}
.breadcrumbs h2{font-size:24px;font-weight:600;margin-bottom:0;color:var(--cp-ink)}
.breadcrumbs h5{font-size:16px;margin:0;color:var(--cp-muted)}
.inner-page{min-height:55vh}
.card,.modal-content{border:1px solid var(--cp-line);border-radius:14px;box-shadow:var(--cp-shadow)}
.card-header,.modal-header{background:#fff;border-bottom:1px solid var(--cp-line);padding:18px 24px}
.card-header:first-child{border-radius:14px 14px 0 0}
.card-body{padding:24px}
.table-responsive{border:1px solid var(--cp-line);border-radius:12px;background:#fff}
.table{margin-bottom:0;color:var(--cp-ink);font-size:14px!important}
.table th{background:#edf5f0;color:var(--cp-green-dark);font-size:13px;font-weight:600;border-bottom:1px solid var(--cp-line)!important;padding:15px 18px;white-space:nowrap}
.table td{vertical-align:middle;padding:14px 18px;border-color:#edf2ef;line-height:1.7}
.table-hover tbody tr:hover{background:#f4faf6}
.form-control,.form-select{min-height:44px;border:1px solid #ceded4;border-radius:8px;color:var(--cp-ink);background-color:#fff;font-size:15px}
.form-control:focus,.form-select:focus{border-color:#4d9c77;box-shadow:0 0 0 3px #086b4614}
label{font-size:14px;color:var(--cp-ink);margin-bottom:7px}
.btn{border-radius:8px;font-weight:500;padding:9px 17px;font-size:14px}
.btn-primary,.btn-success,.contact .php-email-form button[type=submit]{background:var(--cp-green);border-color:var(--cp-green);color:#fff}
.btn-primary:hover,.btn-success:hover{background:var(--cp-green-dark);border-color:var(--cp-green-dark)}
.btn-info{background:#176d83;border-color:#176d83}
.text-primary{color:var(--cp-green)!important}
.bg-gradient-primary{background:linear-gradient(165deg,#086b46,#064c35)!important}
#accordionSidebar{border-right:1px solid #ffffff20}
.sidebar .nav-item .nav-link{padding:14px 20px;line-height:1.6}
.sidebar .sidebar-brand{min-height:88px;line-height:1.5;font-size:13px;letter-spacing:0}
.sidebar-brand-icon{font-size:12px}
.sidebar .sidebar-heading{color:#c9e7d7;font-size:11px;letter-spacing:1px}
.sidebar .collapse-inner{box-shadow:var(--cp-shadow)}
.topbar{border-bottom:1px solid var(--cp-line);box-shadow:none!important}
#content-wrapper{background:#f5f8f6!important}
#content-wrapper .container-fluid{padding-top:12px}
.bg-gradient-success{background:radial-gradient(ellipse at 10% 0%,#dceee3,transparent 55%),linear-gradient(150deg,#f5f9f6,#edf5f0)!important;min-height:100vh}
.login-brand{width:70px;height:70px;object-fit:contain;margin-bottom:15px}
.login-title{font-size:26px!important;font-weight:600;color:var(--cp-ink)!important;margin-bottom:6px!important}
.login-subtitle{color:var(--cp-muted);font-size:14px;margin-bottom:28px}
.login-back{display:block;text-align:center;font-size:14px;margin-top:22px}
form.user .form-control-user{border-radius:8px;padding:14px 16px;font-size:15px;height:50px}
form.user .btn-user{border-radius:8px;font-size:15px;padding:12px}
.contact .info{border-radius:14px;border:1px solid var(--cp-line);padding:24px;background:white}
#footer{background:var(--cp-green-dark);color:#e1eee6;margin-top:24px;border-radius:0}
.back-to-top{background:var(--cp-green);border-radius:12px;box-shadow:var(--cp-shadow)}
@media(min-width:992px){.why-us .content-item{width:calc(50% - 16px);margin:8px}.navbar-mobile{display:none}}
@media(max-width:991px){#header{min-height:95px}#logoname{max-height:75px}#menu-bar{justify-content:flex-end}.navbar{justify-content:flex-end;min-height:38px}.navbar-mobile{position:fixed;inset:0;background:#183c31e6;display:block}.navbar-mobile ul{background:#fff;padding:25px;border-radius:12px;display:block}.mobile-nav-toggle{font-size:28px;padding:8px}#carouselCpdho{margin:16px 12px 0;border-radius:12px}.site-intro{margin-top:22px}.office-badge{display:none}section{padding:36px 0}.breadcrumbs .d-flex{flex-wrap:wrap;gap:12px}.breadcrumbs ol{font-size:13px}.section-title h2{font-size:25px}.content-item{margin-bottom:16px}.sidebar .nav-item .nav-link{padding:12px 8px}.table td,.table th{padding:12px}.card-body{padding:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}