@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap');
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Prompt,Tahoma,Arial,sans-serif;background:#f4f7fb;color:#17233c}a{color:inherit}.hero-header{min-height:132px;padding:18px 34px;display:flex;justify-content:space-between;align-items:center;color:#fff;background:linear-gradient(120deg,#9c0716 0%,#c7192d 31%,#082b68 68%,#001b46 100%);position:relative;overflow:hidden}.hero-header:after{content:"";position:absolute;inset:auto -5% -80px 45%;height:180px;background:linear-gradient(135deg,transparent 30%,#e91d38 30%,#e91d38 46%,transparent 46%);opacity:.7}.hero-brand,.hero-user{position:relative;z-index:1;display:flex;align-items:center}.brand-logo{width:205px;height:auto;object-fit:contain;filter:drop-shadow(0 5px 12px #0005)}.brand-text{margin-left:18px}.brand-title{font-size:29px;font-weight:700;letter-spacing:.2px}.brand-sub{font-size:19px;color:#ffe17b;font-weight:600}.brand-en{font-size:12px;opacity:.78;letter-spacing:1px}.hero-user{gap:11px;min-width:210px;justify-content:flex-end}.hero-user small{display:block;opacity:.8}.hero-user a{font-size:22px;text-decoration:none;padding:8px}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#ffffff22;border:1px solid #fff5}.bell{position:relative;font-size:21px}.bell span{position:absolute;top:-8px;right:-9px;background:#ffca28;color:#321;padding:1px 6px;border-radius:20px;font-size:10px;font-weight:700}.top-nav{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #e6ebf2;box-shadow:0 5px 18px #112c5a12}.nav-scroll{display:flex;justify-content:center;overflow:auto}.nav-item{padding:16px 18px;text-decoration:none;color:#42516b;font-size:14px;font-weight:600;border-bottom:3px solid transparent;white-space:nowrap}.nav-item span{margin-right:7px}.nav-item:hover{background:#f4f7fb;color:#c5162b}.nav-item.active{color:#c5162b;border-bottom-color:#c5162b;background:linear-gradient(#fff,#fff5f6)}.nav-toggle{display:none}.main-shell{max-width:1540px;margin:0 auto;padding:28px 30px 45px}.page-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.eyebrow{font-size:11px;letter-spacing:1.7px;color:#1f6bc1;font-weight:700}.page-head h1{margin:2px 0;font-size:29px;color:#102a56}.page-head p{margin:0;color:#70809b}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.card,.form{background:#fff;border:1px solid #e7edf5;border-radius:18px;padding:20px;box-shadow:0 8px 28px #17365d0a}.kpi-card{position:relative;overflow:hidden;padding:18px}.kpi-card:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-35px;top:-30px;background:var(--c,#dceaff);opacity:.75}.kpi-label{color:#60708a;font-size:13px}.kpi{font-size:30px;font-weight:700;color:#102a56;margin-top:5px}.kpi-note{font-size:11px;color:#8290a7}.kpi-icon{position:absolute;right:16px;top:16px;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--c,#e8f1ff);font-size:20px;z-index:1}.card-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.card-title h3{margin:0;font-size:17px;color:#193a70}.card-title a{font-size:12px;color:#1976d2;text-decoration:none}.chart-box{min-height:285px}.bars{height:215px;display:flex;align-items:end;gap:12px;padding:10px 8px 28px;border-bottom:1px solid #dfe7f1}.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:end;height:100%}.bar{width:min(34px,70%);border-radius:8px 8px 2px 2px;background:linear-gradient(180deg,#e92b48,#9d0b1b);min-height:5px;box-shadow:0 4px 10px #c5182d22}.bar-col small{font-size:10px;color:#77869d;margin-top:8px}.donut-wrap{display:flex;align-items:center;gap:25px;min-height:220px}.donut{width:175px;height:175px;border-radius:50%;background:conic-gradient(#e62745 0 32%,#2c8eea 32% 54%,#ff9f2d 54% 69%,#19b7a5 69% 81%,#a960e8 81% 89%,#8292aa 89% 100%);position:relative}.donut:after{content:"186\Aรายการ";white-space:pre;text-align:center;position:absolute;inset:39px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:700;font-size:21px;color:#163a70;line-height:1.3}.legend{flex:1}.legend div{display:flex;justify-content:space-between;gap:10px;margin:10px 0;font-size:12px}.dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px}.hbars .hrow{display:grid;grid-template-columns:115px 1fr 35px;gap:8px;align-items:center;margin:13px 0;font-size:11px}.track{height:12px;background:#edf1f7;border-radius:10px;overflow:hidden}.fill{height:100%;border-radius:10px;background:linear-gradient(90deg,#e92b48,#ff6176)}.table-wrap{overflow:auto}.table{width:100%;border-collapse:separate;border-spacing:0;background:#fff}.table th{background:#f4f7fb;color:#54647d;font-size:12px;text-align:left}.table th,.table td{padding:11px 12px;border-bottom:1px solid #edf1f5;white-space:nowrap}.table tr:hover td{background:#fbfcfe}.badge{padding:5px 10px;border-radius:99px;font-size:11px;font-weight:600;display:inline-block}.b-pending{background:#fff3cd;color:#936500}.b-approved{background:#e4f0ff;color:#1762a8}.b-issued{background:#dcf8e9;color:#0b7a43}.b-rejected,.b-cancelled{background:#ffe3e5;color:#a9162a}.low{color:#c51c2f;font-weight:700}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.fullrow{grid-column:1/-1}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.between{justify-content:space-between}.btn{border:0;border-radius:10px;padding:9px 14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;font-size:13px;font-weight:600}.primary{background:linear-gradient(135deg,#c9162c,#8e0819);color:#fff;box-shadow:0 5px 12px #bd142722}.secondary{background:#edf2f7;color:#263750}.success{background:#15955a;color:#fff}.danger{background:#c92339;color:#fff}.warning{background:#ed9d1d;color:#fff}.info{background:#2b83d8;color:#fff}.ghost{background:#fff;border:1px solid #dbe3ee;color:#42516b}.btn:hover{transform:translateY(-1px);filter:brightness(1.02)}input,select,textarea{width:100%;padding:11px 12px;border:1px solid #d8e0eb;border-radius:10px;background:#fff;color:#24334b;font:inherit;outline:none}input:focus,select:focus,textarea:focus{border-color:#2a7bd0;box-shadow:0 0 0 3px #2a7bd014}label{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:#42516b}.alert{padding:12px 15px;border-radius:12px;margin:10px 0;border:1px solid}.alert.success{background:#e7f8ef;color:#0d7541;border-color:#bfe9d0}.alert.danger{background:#fff0f2;color:#a2162b;border-color:#ffd0d7}.alert.warning{background:#fff7e3;color:#91620a;border-color:#ffe3a5}.alert.hide{opacity:0;transition:.4s}.footer{padding:18px 30px;background:#0c2143;color:#b7c5da;text-align:center;font-size:12px}.footer span{margin-left:20px;color:#fff}.empty{padding:30px;text-align:center;color:#8a98ad}.section-gap{margin-top:18px}.muted{color:#78879d}.action-group{display:flex;gap:5px;flex-wrap:wrap}.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#8d0717,#152f67);padding:20px}.login-card{width:min(470px,94vw);background:#fff;padding:35px;border-radius:24px;box-shadow:0 25px 80px #00153e66;text-align:center}.login-card .logo-img{width:230px;max-width:80%;margin-bottom:12px}.login-card h1{font-size:23px;color:#102a56;margin:5px 0}.login-card p{color:#71819a}.login-card label{text-align:left;margin-top:13px}.full{width:100%;margin-top:15px}.small-note{font-size:11px;color:#8895a9;margin-top:14px}.detail-strip{display:flex;gap:14px;flex-wrap:wrap}.mini-stat{background:#f6f9fc;border:1px solid #e7edf4;padding:10px 14px;border-radius:12px}.mini-stat b{display:block;color:#15376b}.nav-open .nav-scroll{display:flex}.modal-backdrop{display:none}
@media(max-width:1150px){.brand-title{font-size:22px}.brand-sub{font-size:15px}.grid{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr}.nav-item{padding:14px 11px}}
@media(max-width:760px){.hero-header{padding:12px 16px;min-height:92px}.brand-logo{width:115px}.brand-text{margin-left:9px}.brand-title{font-size:15px}.brand-sub{font-size:11px}.brand-en{display:none}.hero-user{min-width:auto}.hero-user>div:not(.avatar):not(.bell){display:none}.top-nav{padding:7px 10px}.nav-toggle{display:block;border:0;background:#102a56;color:#fff;border-radius:8px;padding:9px 12px;font-family:inherit}.nav-scroll{display:none;justify-content:flex-start;position:absolute;left:0;right:0;top:50px;background:#fff;box-shadow:0 10px 20px #0002}.nav-item{padding:12px 15px}.main-shell{padding:18px 13px}.page-head{align-items:flex-start;gap:10px}.page-head h1{font-size:23px}.page-actions{display:none}.grid,.grid-2,.form-grid{grid-template-columns:1fr}.card{padding:15px}.donut-wrap{flex-direction:column}.footer span{display:block;margin:4px 0 0}.hbars .hrow{grid-template-columns:95px 1fr 30px}}