@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

:root{--app-bg:#f2f7f7;--surface:#fff;--surface-soft:#f7fbfa;--navy:#071a2a;--navy-2:#0d2c3b;--mint:#20c7a5;--mint-dark:#12987e;--text:#17313c;--muted:#6f858d;--border:#dfeae8;--shadow:0 12px 34px rgba(7,26,42,.08)}
.cardbtnregis,.cardbtnlogin{height:auto!important;padding:2rem!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:18px!important;color:#fff!important;background:rgba(7,26,42,.88)!important;box-shadow:0 24px 65px rgba(7,26,42,.3)!important;backdrop-filter:blur(18px)}.cardbtnregis form,.cardbtnlogin form{height:auto!important;overflow:visible!important}.bg>.container-fluid{min-height:calc(100vh - 68px);display:flex;align-items:center;justify-content:center;padding-block:2rem}.bg>.container-fluid>br{display:none}.bg>.container-fluid>.row{width:100%}.cardbtnregis .form-control,.cardbtnlogin .form-control{border-color:rgba(255,255,255,.2);color:#fff;background:rgba(255,255,255,.08)}
html,body{min-height:100%;font-family:'Noto Sans Thai',sans-serif!important;font-size:14px!important;background:var(--app-bg);color:var(--text)}
body{margin:0;overflow-x:hidden}a{color:var(--mint-dark);transition:color .2s ease,background .2s ease,transform .2s ease}a:hover{color:#08715e}button,input,select,textarea{font-family:inherit!important}
.topnav{min-height:68px;padding:.65rem 1.2rem!important;position:sticky;top:0;z-index:1030;background:linear-gradient(120deg,var(--navy),var(--navy-2))!important;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 8px 28px rgba(5,20,31,.18)!important}.brand-link{display:flex;align-items:center;gap:.8rem;min-width:0;text-decoration:none!important}.brand-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;color:#06231c;background:linear-gradient(135deg,var(--mint),#7aefd2);box-shadow:0 8px 20px rgba(32,199,165,.2)}.navbar-brand{color:#fff!important;font-size:1rem!important;white-space:normal;line-height:1.35}.navbar .nav-link{color:rgba(255,255,255,.82)!important}.navbar .dropdown-menu{border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.sidebar-toggle,.sidebar-mobile-header,.sidebar-backdrop{display:none}.navside{height:calc(100vh - 68px)!important;position:sticky;top:68px;padding:1rem .75rem!important;gap:.25rem;background:#fff!important;border-right:1px solid var(--border);overflow-y:auto}.sidelink{display:flex;align-items:center;min-height:42px;padding:.65rem .8rem!important;border-radius:10px;color:#49616a!important;font-weight:500}.sidelink .material-icons{color:#789097;transition:.2s}.sidelink:hover,.sidelink.onActive{color:#083e34!important;background:rgba(32,199,165,.12)!important;transform:translateX(2px)}.sidelink:hover .material-icons,.sidelink.onActive .material-icons{color:var(--mint-dark)}#link_logout{margin-top:auto!important;color:#b44545!important;background:#fff5f5}
.content-panel{min-height:calc(100vh - 68px)!important;height:auto!important;padding:1.4rem!important;background:var(--app-bg);overflow:visible!important}.content-panel>.container-fluid{max-width:1600px;margin-inline:auto}.titlebar{margin:0 0 1.25rem;padding:.9rem 1.1rem;border:0;border-left:4px solid var(--mint);border-radius:0 12px 12px 0;color:var(--navy)!important;background:linear-gradient(90deg,rgba(32,199,165,.14),transparent)!important;font-weight:700}
.card,.card-form,.s_table{border:1px solid var(--border)!important;border-radius:16px!important;background:var(--surface)!important;box-shadow:var(--shadow)!important}.card{height:auto;min-height:180px;padding:1.1rem}.card-form{height:auto;padding:1.25rem}.s_table{margin-top:.75rem;padding:1rem;overflow:hidden}.cardbtn{height:auto!important;min-height:145px;padding:1.3rem!important;border:1px solid var(--border)!important;border-radius:16px!important;color:var(--text)!important;background:linear-gradient(145deg,#fff,var(--surface-soft));box-shadow:var(--shadow)!important;transition:.22s}.cardbtn:hover{transform:translateY(-4px);border-color:rgba(32,199,165,.5)!important;box-shadow:0 18px 42px rgba(7,26,42,.12)!important}.cardbtn h1{color:var(--mint-dark);font-weight:700}
.table-responsive{border-radius:12px}.table{margin-bottom:0;background:#fff}.table thead th,.table thead td{border-top:0;border-bottom:1px solid var(--border)!important;color:#49616a;background:#edf7f5;font-weight:700;white-space:nowrap}.table td,.table th{padding:.75rem;vertical-align:middle;border-color:#edf2f1!important}.table-hover tbody tr:hover{background:#f5fbfa}.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dataTables_length select{min-height:36px;border:1px solid var(--border);border-radius:8px;background:#fff}.dataTables_wrapper .dataTables_paginate .paginate_button.current{border-color:var(--mint)!important;border-radius:8px!important;background:var(--mint)!important;color:#06231c!important}
.form-control,.custom-select{min-height:42px;border:1px solid #cfddda;border-radius:10px;background-color:#fff;transition:.2s}.form-control:focus,.custom-select:focus{border-color:var(--mint);box-shadow:0 0 0 .2rem rgba(32,199,165,.14)}textarea.form-control{min-height:110px}.btn{min-height:38px;padding:.48rem .9rem;border-radius:9px;font-weight:600}.btn-pri,.btn-primary{border-color:var(--mint)!important;background:var(--mint)!important;color:#06231c!important}.btn-pri:hover,.btn-primary:hover{border-color:var(--mint-dark)!important;background:var(--mint-dark)!important;color:#fff!important}.modal-content{border:0;border-radius:18px;box-shadow:0 28px 70px rgba(7,26,42,.25);overflow:hidden}.modal-header{border-bottom-color:var(--border);background:var(--surface-soft)}.modal-footer{border-top-color:var(--border)}
.badge{padding:.4em .65em;border-radius:999px}.alert{border:0;border-radius:12px;box-shadow:0 5px 18px rgba(7,26,42,.05)}hr{border-top-color:var(--border)}
@media(max-width:767.98px){body.sidebar-open{overflow:hidden}.topnav{position:sticky;padding:.55rem .7rem!important;flex-wrap:nowrap}.sidebar-toggle{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;margin-right:.55rem;border:1px solid rgba(255,255,255,.15);border-radius:10px;color:#fff;background:rgba(255,255,255,.08);font-size:1.05rem}.sidebar-toggle:hover,.sidebar-toggle:focus-visible{color:#06231c;background:var(--mint);outline:none}.brand-link{flex:1}.brand-icon{width:34px;height:34px}.navbar-brand{font-size:.78rem!important}.topnav>.navbar-nav{flex:0 0 auto;margin-left:.4rem}.topnav>.navbar-nav .nav-link{max-width:42px;overflow:hidden;font-size:0;white-space:nowrap}.topnav>.navbar-nav .badge{font-size:.7rem}.sidebar-column{width:min(84vw,320px)!important;max-width:320px!important;height:100dvh;display:block!important;position:fixed;z-index:1051;inset:0 auto 0 0;transform:translateX(-105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);background:#fff;box-shadow:18px 0 55px rgba(7,26,42,.22)}.sidebar-open .sidebar-column{transform:translateX(0)}.sidebar-column>.container-fulid{height:100%}.navside{height:100dvh!important;position:relative;top:0;display:flex!important;flex-flow:column nowrap!important;padding:.75rem!important;border-right:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.sidebar-mobile-header{min-height:52px;display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;padding:.35rem .45rem .75rem;color:var(--navy);border-bottom:1px solid var(--border);font-weight:700}.sidebar-mobile-header span{display:flex;align-items:center;gap:.6rem}.sidebar-mobile-header span i{color:var(--mint-dark)}.sidebar-mobile-header button{width:38px;height:38px;border:0;border-radius:10px;color:#50676f;background:#edf5f4}.sidebar-mobile-header button:hover,.sidebar-mobile-header button:focus-visible{color:#fff;background:var(--navy);outline:none}.sidebar-backdrop{display:block;position:fixed;z-index:1050;inset:0;width:100%;height:100%;padding:0;border:0;background:rgba(3,15,24,.55);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s;backdrop-filter:blur(2px)}.sidebar-open .sidebar-backdrop{opacity:1;visibility:visible;pointer-events:auto}.sidelink{flex:0 0 auto;white-space:normal}.sidelink:hover,.sidelink.onActive{transform:none}.content-panel{width:100%!important;max-width:100%!important;min-height:calc(100vh - 62px)!important;padding:.8rem!important}.content-panel>.container-fluid{padding-inline:.35rem}.titlebar{font-size:1.2rem}.cardbtn{margin-bottom:.8rem}.s_table{padding:.45rem}.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_length{text-align:left!important}.modal-dialog{margin:.6rem}.form-inline{height:auto!important;overflow:visible!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
@media print{.topnav,.navside{display:none!important}.content-panel{width:100%!important;max-width:100%!important;padding:0!important;background:#fff}.card,.s_table{box-shadow:none!important}}