@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap");
/* LPSS App Theme 1.0 — screen UI only; official print layouts are untouched. */
:root{--lpss-navy:#102c55;--lpss-blue:#2563eb;--lpss-teal:#0f9b94;--lpss-canvas:#f3f7fc;--lpss-text:#192f4e;--lpss-muted:#5c708a;--lpss-stroke:#dce6f1;--lpss-elev:0 10px 28px rgba(23,57,99,.08)}
body:has(.p6-app),body:has(.vth-app){color:var(--lpss-text);background:var(--lpss-canvas)}
.p6-app,.vth-app{background:radial-gradient(circle at 83% -10%,#e5efff,transparent 34%),#f3f7fc;color:var(--lpss-text)}
.p6-sidebar,.vth-sidebar{background:linear-gradient(180deg,#102f57 0%,#0d2749 55%,#0b203e 100%);box-shadow:10px 0 30px rgba(15,45,79,.12)}
.p6-sidebar:before,.vth-sidebar:before{background:radial-gradient(circle at 15% 0,rgba(82,176,244,.17),transparent 34%)}
.p6-brand,.vth-brand{border-bottom:1px solid rgba(255,255,255,.11);margin-bottom:14px}
.p6-brand b,.vth-brand b{letter-spacing:0;line-height:1.1}
.p6-logo,.vth-logo{transform:none;border-radius:15px;background:linear-gradient(145deg,#4fa4ff,#4bd8bf);color:#083056;box-shadow:0 8px 20px rgba(31,150,210,.24)}
.vth-logo img{width:100%;height:100%;object-fit:contain;background:#fff;border-radius:13px;padding:3px}
.p6-nav a,.vth-nav a{transition:background .15s,color .15s,border-color .15s;transform:none!important}
.p6-nav a{border-radius:12px;min-height:47px}.vth-nav a{border-radius:11px;min-height:39px}
.p6-nav a:hover,.vth-nav a:hover{background:rgba(255,255,255,.12)}
.p6-nav a.active,.vth-nav a.active{background:#eaf5ff;color:#133b6d;border-color:#eaf5ff;box-shadow:0 5px 16px rgba(0,0,0,.09)}
.p6-nav a.active .p6-nav-ico{color:#155baf;background:#d5e9ff;box-shadow:none}
.vth-nav a.active .vth-nav-icon{color:#1762bd}
.vth-nav a.active:after{background:#0f9b94;box-shadow:none}
.vth-nav a.active .vth-nav-color{box-shadow:none}
.vth-nav-group{border-radius:13px}
.vth-nav-toggle{border-radius:11px}
.p6-sidebar-foot,.vth-profile-mini{border-radius:15px;background:rgba(255,255,255,.08);box-shadow:none}
.p6-topbar,.vth-top{height:auto;min-height:76px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--lpss-stroke);box-shadow:0 3px 16px rgba(30,65,103,.04)}
.p6-topbar h1,.vth-top h1{color:#14355e;font-size:clamp(22px,2vw,28px);line-height:1.15}
.p6-topbar p,.vth-top p{color:var(--lpss-muted);font-size:15px}
.vth-title-dot{background:linear-gradient(#3085f6,#19b69b);box-shadow:none}
.p6-content,.vth-content{max-width:1600px;padding:clamp(16px,2vw,30px)}
.p6-hero,.vth-hero{border-radius:22px;background:linear-gradient(115deg,#164a91 0%,#2367bf 57%,#168caa 100%);box-shadow:0 15px 34px rgba(25,80,146,.15);padding:clamp(23px,3vw,36px)}
.p6-hero h2,.vth-hero h2{font-size:clamp(26px,2.5vw,38px);line-height:1.2}
.p6-card,.vth-panel,.vth-stat-card,.vth-module-card,.p6-quick{background:#fff;border:1px solid var(--lpss-stroke);border-radius:18px;box-shadow:var(--lpss-elev);backdrop-filter:none}
.p6-card,.vth-panel{padding:clamp(16px,1.7vw,24px)}
.p6-card-head h3,.vth-section-head h3{color:#163b69}
.p6-kpi{border-radius:18px;box-shadow:var(--lpss-elev);min-height:123px}
.p6-kpi:nth-child(1){background:linear-gradient(125deg,#2063b6,#3286d7)}
.p6-kpi:nth-child(2){background:linear-gradient(125deg,#5854b8,#8a76d6)}
.p6-kpi:nth-child(3){background:linear-gradient(125deg,#b7751d,#e6a53d)}
.p6-kpi:nth-child(4){background:linear-gradient(125deg,#167c72,#2bb9a5)}
.p6-btn,.vth-btn,.vth-lpss,.p6-top-btn,.vth-icon-btn{border-radius:11px;box-shadow:none;transition:background .15s,border-color .15s,box-shadow .15s}
.p6-btn:hover,.vth-btn:hover,.p6-top-btn:hover{transform:none;box-shadow:0 5px 14px rgba(32,85,150,.12)}
.p6-btn.primary,.vth-lpss{background:#2468bf;color:#fff}
.p6-btn.soft{background:#eaf3ff;color:#1759a5;border-color:#cadff7}
.p6-table-wrap,.vth-table-wrap{border:1px solid var(--lpss-stroke);border-radius:13px;overflow:auto;background:#fff}
.p6-table th,.vth-table th{background:#edf4fc;color:#24456d;font-weight:800}
.p6-table td,.vth-table td{border-bottom-color:#e7eef5}
.p6-table tr:hover td,.vth-table tr:hover td{background:#f5f9ff}
.p6-input,.p6-select,.p6-textarea,.vth-field input,.vth-field select,.vth-field textarea{background:#fff;border:1px solid #cbd9e8;border-radius:11px;color:#183654}
.p6-input:focus,.p6-select:focus,.p6-textarea:focus,.vth-field input:focus,.vth-field select:focus,.vth-field textarea:focus{outline:2px solid #b5d7ff;outline-offset:1px;border-color:#317bce}
.p6-quick{background:#fff}.p6-quick:hover,.vth-module-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(23,57,99,.12)}
.p6-quick .p6-qicon{border-radius:13px;background:#2468bf;box-shadow:none}
.p6-quick:nth-child(2) .p6-qicon{background:#0d9a9a}.p6-quick:nth-child(3) .p6-qicon{background:#7361c0}
.p6-alert,.vth-alert{border-radius:12px;box-shadow:none}
.p6-app :is(button,a,input,select,textarea):focus-visible,.vth-app :is(button,a,input,select,textarea):focus-visible{outline:3px solid #66b9f1;outline-offset:2px}
/* Login: app-inspired split composition with a clear sign-in card. */
body.vnnk-login-page{background:#eaf2fb}
.vnnk-login-stage{background:#eaf2fb}
.vnnk-login-bg{background-position:center center}
.vnnk-login-tint{background:linear-gradient(90deg,rgba(10,43,88,.11),rgba(18,66,121,.05) 58%,rgba(234,243,252,.14) 100%)}
.vnnk-live-card{border:1px solid #d9e6f5;border-radius:24px;background:#fff;box-shadow:0 24px 65px rgba(13,48,93,.18)}
.vnnk-live-title{color:#164681;letter-spacing:-.035em}
.vnnk-login-submit{background:#2468bf;border-radius:11px;box-shadow:0 9px 20px rgba(33,98,180,.2)}
.vnnk-login-submit:hover{background:#18599f;box-shadow:0 11px 22px rgba(33,98,180,.22)}
.vnnk-input-wrap input,.vnnk-contact-button{border-radius:10px}
.vnnk-input-wrap input:focus{outline:2px solid #a9d2fc;outline-offset:1px}
@media(max-width:980px){.p6-sidebar{box-shadow:12px 0 30px rgba(8,35,75,.24)}.vth-content,.p6-content{padding:18px}}
@media(max-width:720px){.p6-topbar,.vth-top{min-height:68px}.p6-content,.vth-content{padding:14px}.p6-hero,.vth-hero{border-radius:17px}.p6-card,.vth-panel{border-radius:14px}.vth-top-actions{gap:5px}.vth-lpss{padding:8px 10px}}
@media(max-width:420px){.vth-top p{display:none}.vth-lpss{font-size:0}.vth-lpss span{font-size:11px;margin:0}.p6-content,.vth-content{padding:11px}}
@media print{.p6-app,.vth-app{background:#fff!important}.p6-hero,.vth-hero{box-shadow:none}.p6-card,.vth-panel,.vth-stat-card{box-shadow:none}}


/* LPSS Web App 2.0 — UI type and navigation; print templates keep their own fonts. */
@media screen{
  :is(.p6-app,.vth-app,.vnnk-login-page){font-family:"Noto Sans Thai",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;font-size:16px;line-height:1.6}
  :is(.p6-app,.vth-app,.vnnk-login-page) :where(*){font-family:"Noto Sans Thai",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif!important}
  :is(.p6-app,.vth-app,.vnnk-login-page) :is(input,select,textarea,button){font:inherit}
  .p6-app,.vth-app{background:#f4f7fb;color:#193455}
  .p6-app .p6-sidebar{width:300px;padding:18px 13px;background:linear-gradient(180deg,#12345e,#0d294e 62%,#0b2444)}
  .p6-app{grid-template-columns:300px minmax(0,1fr)}
  .p6-app .p6-nav a{grid-template-columns:32px minmax(0,1fr) 12px;gap:8px;padding:8px 10px;min-height:44px;font-size:15px;white-space:nowrap}
  .p6-app .p6-nav a>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .p6-app .p6-nav-ico{width:32px;height:32px;border-radius:10px}
  .p6-app .p6-brand b,.vth-app .vth-brand b{font-size:18px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .p6-app .p6-brand small,.vth-app .vth-brand small{font-size:12px;line-height:1.3}
  .vth-app .vth-sidebar{width:330px;padding:17px 12px;background:linear-gradient(180deg,#12345e,#0d294e 62%,#0b2444)}
  .vth-app .vth-main{margin-left:330px;width:calc(100% - 330px)}
  .vth-app .vth-brand{gap:10px;padding:5px 7px 13px}
  .vth-app .vth-brand>div{flex:1;min-width:0}
  .vth-app .vth-profile-mini{margin:2px 3px 12px}
  .vth-app .vth-nav-groups{gap:5px}
  .vth-app .vth-nav-toggle{min-height:47px;grid-template-columns:25px 28px minmax(0,1fr) 17px;gap:8px;padding:7px 9px;border-radius:11px}
  .vth-app .vth-nav-group-no{width:24px;height:24px;font-size:10px}
  .vth-app .vth-nav-group-icon{width:28px;height:28px;border-radius:8px}
  .vth-app .vth-nav-group-copy{min-width:0}
  .vth-app .vth-nav-group-copy b{font-size:15px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vth-app .vth-nav-group-copy small{display:none}
  .vth-app .vth-nav-panel .vth-nav{padding:3px 0 6px}
  .vth-app .vth-nav-panel .vth-nav a{min-height:38px;padding:7px 9px;gap:8px;font-size:14px;line-height:1.3;white-space:nowrap;transform:none}
  .vth-app .vth-nav-panel .vth-nav a>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vth-app .vth-nav-group.is-open .vth-nav-panel{max-height:1600px}
  .p6-app .p6-topbar,.vth-app .vth-top{min-height:72px;background:#fff;border-bottom:1px solid #dee8f2;box-shadow:0 2px 14px rgba(19,57,100,.04)}
  .vth-app .vth-title,.p6-app .p6-top-left{min-width:0}
  .vth-app .vth-title{flex:1}
  .vth-app .vth-title>div,.p6-app .p6-top-left>div{min-width:0}
  .vth-app .vth-top h1,.p6-app .p6-topbar h1{margin:0;color:#153e6e;font-size:clamp(18px,1.5vw,23px);font-weight:700;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vth-app .vth-top p,.p6-app .p6-topbar p{font-size:12px;line-height:1.3}
  .vth-app .vth-content,.p6-app .p6-content{padding:clamp(14px,2vw,26px);max-width:1640px}
  .vth-app .vth-hero,.p6-app .p6-hero{border-radius:20px;padding:clamp(20px,2.3vw,32px)}
  .vth-app .vth-hero h2,.p6-app .p6-hero h2{font-size:clamp(24px,2.3vw,34px);line-height:1.3}
  .vth-app :is(.vth-panel,.vth-stat-card,.vth-module-card),.p6-app :is(.p6-card,.p6-quick){border-radius:16px;border-color:#dee8f2;box-shadow:0 8px 25px rgba(17,60,108,.065)}
  .vth-app :is(input,select,textarea),.p6-app :is(input,select,textarea){font-size:15px;line-height:1.5}
  .vth-app :is(button,.vth-btn,.vth-lpss),.p6-app :is(button,.p6-btn){font-size:14px;line-height:1.4}
  .vth-app :is(.vth-table,.bc-table,.ap-table,.brq-table),.p6-app .p6-table{font-size:14px}
  .vnnk-login-page{font-size:16px}
  .vnnk-login-page .vnnk-live-title{font-size:clamp(29px,2.35vw,39px);letter-spacing:-.025em}
  .vnnk-login-page .vnnk-field label,.vnnk-login-page .vnnk-input-wrap input{font-size:15px}
  .vnnk-login-page .vnnk-login-submit{font-size:17px}
  .vnnk-login-page .vnnk-live-head p{font-size:16px;line-height:1.4}
  @media(max-width:980px){.p6-app{grid-template-columns:1fr}.p6-app .p6-sidebar{position:fixed;left:-320px;width:min(89vw,300px)}.p6-app .p6-sidebar.open{left:0}}
  @media(max-width:780px){.vth-app .vth-sidebar{width:min(92vw,360px)}.vth-app .vth-main{margin-left:0;width:100%}.vth-app .vth-top{gap:8px;padding:0 12px}.vth-app .vth-title-dot{height:29px}.vth-app .vth-top h1{max-width:40vw}.vth-app .vth-icon-btn{width:36px;height:36px}.vth-app .vth-nav-panel .vth-nav a{font-size:14px}}
  @media(max-width:560px){.vth-app .vth-top h1{max-width:35vw;font-size:17px}.vth-app .vth-top p{display:none}.vth-app .vth-top-actions{gap:5px}.vth-app .vth-lpss{padding:7px}.vth-app .vth-lpss span{margin:0}.vth-app .vth-content,.p6-app .p6-content{padding:12px}.p6-app .p6-topbar h1{font-size:18px}.vnnk-login-page .vnnk-live-card{padding:21px 17px}}
  @media(prefers-reduced-motion:reduce){.vth-app *, .p6-app *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
}