@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{--ink:#172d29;--muted:#6c7b77;--green:#087e62;--deep:#064d3e;--line:#e3eae6;--canvas:#f4f7f5;--font:'Manrope','Noto Sans Thai',sans-serif}
[hidden]{display:none!important}
*{box-sizing:border-box}html{background:var(--canvas);scroll-behavior:smooth}body{margin:0;color:var(--ink);font:16px/1.65 var(--font);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{border:0}button:disabled{cursor:wait;opacity:.6}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #24a885;outline-offset:4px}svg.ui-icon{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.hidden{display:none!important}.brand{display:flex;align-items:center;gap:13px}.brand-logo{width:43px;height:49px;object-fit:contain}.brand strong{font-size:19px;font-weight:800;letter-spacing:-.5px;line-height:1.2;display:block}.brand small{font-size:12px;letter-spacing:1.5px;font-weight:700;display:block;color:var(--muted);margin-top:5px}.sidebar{position:fixed;inset:0 auto 0 0;width:242px;display:flex;flex-direction:column;padding:34px 23px 25px;background:#fff;border-right:1px solid var(--line);z-index:20}.sidebar .brand{padding:0 8px 38px}.nav-caption{font-size:12px;letter-spacing:1.4px;color:#7c8e87;margin:12px 14px;font-weight:700}.side-nav{display:grid;gap:7px}.side-nav button,.side-nav a{display:flex;align-items:center;gap:13px;width:100%;padding:15px 16px;border-radius:14px;text-align:left;background:transparent;color:#65746e;font-size:14px;font-weight:600;transition:background .2s,color .2s}.side-nav button:hover,.side-nav a:hover{background:#f2f7f4;color:var(--green)}.side-nav .active{background:#e6f3ed;color:var(--green)}.side-nav .active:after{content:'';margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--green)}.sidebar-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:22px}.school-caption{font-size:12px;color:var(--muted);padding:18px 14px 0;line-height:1.8}.workspace{margin-left:242px;min-height:100svh}.topbar{min-height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 48px;background:rgba(255,255,255,.78)}.breadcrumb{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}.breadcrumb strong{color:var(--ink);font-weight:600}.topbar .mobile-brand{display:none}.top-actions{display:flex;align-items:center;gap:14px}.quiet-label{font-size:12px;color:var(--muted)}.icon-button{height:44px;width:44px;border-radius:14px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:#50675e;position:relative}.icon-button:hover{background:#eaf4ed}.avatar{width:43px;height:43px;display:grid;place-items:center;border-radius:50%;background:#ddeee5;color:var(--green);border:4px solid #fff;box-shadow:0 0 0 1px #dce8df}.content{max-width:1216px;margin:auto;padding:42px 48px 28px}.greeting{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:30px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:2.3px;color:var(--green);margin:0 0 10px}.greeting h1{font-size:clamp(25px,2.5vw,34px);line-height:1.5;font-weight:700;letter-spacing:-1px;margin:0 0 7px}.greeting p{margin:0;color:var(--muted);font-size:14px}.date-label{display:flex;align-items:center;gap:9px;background:white;border:1px solid var(--line);border-radius:12px;padding:10px 13px;font-size:12px;color:#64746d;white-space:nowrap;margin-top:15px}.date-label svg{width:17px;height:17px}.section-toolbar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}.section-title{display:flex;align-items:center;gap:11px}.section-title h2{font-size:19px;margin:0;white-space:nowrap;font-weight:700}.count-pill{min-width:28px;padding:2px 8px;border-radius:9px;background:#e6ede8;color:#587061;font-size:12px;text-align:center;font-weight:700}.search-box{display:flex;align-items:center;gap:11px;padding:11px 15px;border:1px solid #dee7e1;border-radius:14px;background:#fff;color:#8b9c93;width:300px;box-shadow:0 2px 3px #102d1803}.search-box:focus-within{border-color:#6ea98b;box-shadow:0 0 0 3px #087e6210}.search-box input{border:0;background:transparent;outline:none!important;width:100%;min-width:0;font-size:14px;color:var(--ink)}.search-box input::placeholder{color:#83958a}.search-box .ui-icon{width:20px}.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.service-item{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-height:207px;min-width:0;padding:24px;border-radius:23px;border:1px solid #e4ebe5;background:linear-gradient(140deg,#fff,#fcfdfb);color:var(--ink);box-shadow:0 4px 5px #14332603,0 14px 26px -20px #1b483d45,inset 0 1px 0 #fff;transition:transform .2s,box-shadow .2s,border-color .2s;isolation:isolate;overflow:hidden}.service-item:hover{transform:translateY(-4px);box-shadow:0 15px 28px -16px #174d3655;border-color:#a8c9b4}.service-item:active{transform:translateY(-1px) scale(.985)}.service-icon{display:grid;place-items:center;width:62px;height:62px;background:var(--tile-bg,#e9f3ef);border:1px solid #ffffffaa;border-radius:18px;box-shadow:0 6px 10px -7px #183d3a5c,inset 0 1px 0 white;color:var(--tile-color,#177d60);margin-bottom:20px;flex-shrink:0;position:relative}.service-icon img{width:40px;height:40px;object-fit:contain;position:absolute}.service-icon .ui-icon{width:29px;height:29px}.service-icon:has(img:not([hidden]))>.ui-icon{visibility:hidden}.service-title{font-size:16px;font-weight:700;line-height:1.55;overflow-wrap:anywhere;max-width:100%;margin:0 0 6px;letter-spacing:-.2px}.service-subtitle{font-size:12px;color:#89968c;margin-top:auto}.card-arrow{position:absolute;right:20px;top:23px;color:#acbbb1}.card-arrow .ui-icon{width:18px;height:18px}.service-hero{grid-column:span 2;min-height:220px;background:linear-gradient(125deg,#075b48,#064b3e 75%,#125c42);color:#fff;border:1px solid #177b5c;box-shadow:0 12px 25px -12px #064b3e70;justify-content:flex-end;padding:28px}.service-hero:before{content:'';position:absolute;width:260px;height:260px;border:1px solid #ffffff0d;border-radius:50%;right:-108px;top:-129px;box-shadow:0 0 0 32px #ffffff04,0 0 0 64px #ffffff03;z-index:-1}.service-hero:after{content:'';position:absolute;width:155px;height:155px;right:-64px;bottom:-78px;border-radius:50%;background:#bfe27d13;z-index:-1}.service-hero .service-icon{width:56px;height:56px;background:#ffffff15;border:1px solid #ffffff22;box-shadow:inset 0 1px 0 #ffffff25;color:#d0f5b9;margin-bottom:20px}.service-hero .service-icon img{width:37px;height:37px}.service-hero .service-title{font-size:21px}.service-hero .service-subtitle{color:#b6d2c7;font-size:13px;margin-top:1px}.service-hero .card-arrow{top:auto;bottom:29px;right:27px;background:#ffffff13;border:1px solid #ffffff1b;border-radius:50%;width:37px;height:37px;display:grid;place-items:center;color:white}.service-hero .service-title,.service-hero .service-subtitle{padding-right:30px}.service-hero-alt{background:linear-gradient(125deg,#1c3c34,#2b5144);border-color:#446252}.hero-label{position:absolute;right:26px;top:25px;color:#c8decb;border:1px solid #ffffff28;border-radius:99px;font-size:11px;padding:4px 10px;letter-spacing:.2px}.service-state{grid-column:1/-1;text-align:center;padding:58px 20px;background:#fff;border:1px dashed #cddfd1;border-radius:20px;color:var(--muted)}.service-state .ui-icon{margin:0 auto 12px;display:block;width:30px;height:30px}.service-state p{margin:8px 0}.text-button{font-size:14px;background:none;color:var(--green);padding:7px;font-weight:600;text-decoration:underline;text-underline-offset:4px}.spinner{height:26px;width:26px;border:3px solid #dfece3;border-top-color:var(--green);border-radius:50%;display:inline-block;animation:spin 1s linear infinite}.content-footer{margin-top:38px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:#85958c}.content-footer span{display:flex;align-items:center;gap:7px}.content-footer svg{height:15px;width:15px}.mobile-nav{display:none}.notification-dot{position:absolute;right:9px;top:8px;width:7px;height:7px;border:2px solid white;box-sizing:content-box;border-radius:50%;background:#ef9d38}.side-nav .notification-dot{position:static;margin-left:auto;border-color:transparent}.login-body{min-height:100svh;background:#edf3ee;display:flex;align-items:center;justify-content:center;padding:40px;position:relative}.login-body:before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 80% 10%,#d3e6d6 0,transparent 50%),radial-gradient(ellipse at 0 100%,#dbe9df 0,transparent 60%);pointer-events:none}.login-shell{width:min(1040px,100%);display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid #ffffffb3;border-radius:30px;box-shadow:0 30px 80px -30px #0c43263b,0 2px 6px #29453608;overflow:hidden;position:relative;min-height:652px}.login-brand-panel{position:relative;background:linear-gradient(145deg,#0b684f,#064a3c);color:white;padding:43px;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}.login-brand-panel .brand strong{font-size:24px}.login-brand-panel .brand small{color:#aacebb;font-size:11px}.login-brand-panel .brand-logo{background:#fff;border-radius:15px;padding:8px;width:58px;height:63px;box-shadow:0 6px 16px #0525193d}.login-brand-panel h2{font-size:39px;line-height:1.55;letter-spacing:-1px;margin:66px 0 15px;font-weight:600}.login-brand-panel h2 span{color:#c7e7ac}.login-brand-panel p{font-size:14px;max-width:320px;color:#b7d8c7;line-height:1.9}.login-brand-panel:before{content:'';position:absolute;width:460px;height:460px;border:1px solid #b8efbe20;border-radius:50%;left:120px;bottom:-130px;box-shadow:0 0 0 43px #b8efbe06,0 0 0 86px #b8efbe04;z-index:-1}.login-brand-footer{margin-top:auto;padding-top:38px;color:#bfddcf;font-size:12px}.brand-service-art{display:flex;gap:17px;margin:36px 0 18px;align-items:center}.brand-service-art span{width:67px;height:67px;display:grid;place-items:center;background:linear-gradient(130deg,#ffffff25,#ffffff0e);border:1px solid #ffffff26;border-radius:21px;box-shadow:0 12px 20px -12px #00281dbb,inset 0 1px 0 #ffffff22;transform:rotate(-8deg)}.brand-service-art span:nth-child(2){transform:translateY(-10px) rotate(5deg);background:#d5ebb9;color:#175b44}.brand-service-art span:nth-child(3){transform:rotate(-3deg)}.brand-service-art svg{width:29px;height:29px}.login-form-panel{padding:64px 52px 38px;display:flex;flex-direction:column;justify-content:center}.login-form-panel>.brand{display:none}.login-form-panel .eyebrow{font-size:11px;letter-spacing:2px}.login-form-panel h1{font-size:29px;line-height:1.5;letter-spacing:-.8px;margin:8px 0 8px;font-weight:700}.login-intro{font-size:14px;color:var(--muted);margin:0 0 34px}.field{margin:0 0 21px}.field label{font-size:14px;font-weight:600;display:block;margin-bottom:9px}.field-control{position:relative}.field-control>.ui-icon{position:absolute;left:16px;top:18px;color:#93a69b;width:19px;height:19px;pointer-events:none}.field-control input,.field-control select{display:block;width:100%;height:56px;border:1px solid #dfe7e0;border-radius:13px;padding:0 44px;background:#f8faf8;color:var(--ink);font-size:16px;transition:border-color .2s,box-shadow .2s}.field-control input:focus,.field-control select:focus{border-color:#4e9f7c;box-shadow:0 0 0 3px #14764f10;outline:0}.field-control input::placeholder{color:#a2b0a7}.field-control select{appearance:none}.field-control>.chevron{left:auto;right:16px}.submit-button{display:flex;justify-content:center;align-items:center;gap:12px;width:100%;min-height:56px;background:linear-gradient(#118166,#08715a);color:white;border:1px solid #046349;border-radius:14px;box-shadow:0 8px 15px -6px #0a73566b,inset 0 1px 0 #ffffff25;font-size:16px;font-weight:600;margin-top:8px;transition:transform .15s,box-shadow .15s}.submit-button:hover{transform:translateY(-1px);box-shadow:0 12px 19px -8px #0a735680}.submit-button:active{transform:translateY(1px)}.login-bottom{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;color:#8d9c93;margin-top:25px}.login-bottom svg{width:15px;height:15px}.preview-note{position:fixed;bottom:12px;right:12px;background:#172d29;color:white;border:1px solid #ffffff33;padding:8px 13px;border-radius:11px;font-size:12px;z-index:100}.swal2-popup{font-family:var(--font)!important;border-radius:22px!important}.swal2-confirm{border-radius:12px!important}.loadingoverlay_text{font-family:var(--font)!important}.preview-note a{text-decoration:underline} @keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:1500px){.content{padding-top:55px}.service-item{min-height:225px}.service-hero{min-height:235px}}
@media(max-width:1150px){.sidebar{width:212px;padding:28px 16px}.workspace{margin-left:212px}.content{padding:34px 28px}.topbar{padding:18px 28px}.service-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.service-hero{grid-column:span 3;min-height:180px}.service-hero .service-icon{position:absolute;left:26px;top:50%;transform:translateY(-50%);width:75px;height:75px;margin:0}.service-hero .service-title,.service-hero .service-subtitle{margin-left:96px}.service-hero{justify-content:center}.service-hero .hero-label{top:20px}.service-hero .card-arrow{bottom:25px}.service-item{padding:21px}.greeting .date-label{display:none}}
@media(max-width:800px){.sidebar{display:none}.workspace{margin-left:0}.topbar{padding:17px 23px;border:0;background:var(--canvas);min-height:90px}.topbar .breadcrumb,.quiet-label{display:none}.topbar .mobile-brand{display:flex}.mobile-brand .brand-logo{width:33px;height:40px}.mobile-brand strong{font-size:17px}.mobile-brand small{font-size:9px;letter-spacing:1.4px}.top-actions{gap:10px}.top-actions>.icon-button{display:none}.content{padding:17px 23px calc(90px + env(safe-area-inset-bottom))}.greeting{margin-bottom:27px}.greeting h1{font-size:28px;margin-bottom:5px}.greeting .eyebrow{font-size:10px;margin-bottom:6px}.greeting p{font-size:13px}.section-toolbar{display:block;margin-bottom:19px}.section-title{margin-bottom:15px}.search-box{width:100%;padding:13px 15px;border-radius:15px}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.service-hero{grid-column:span 2;min-height:170px}.service-hero .service-icon{left:22px;width:64px;height:64px}.service-hero .service-title,.service-hero .service-subtitle{margin-left:82px}.service-hero .service-title{font-size:19px}.service-hero .service-subtitle{font-size:12px}.service-hero .card-arrow{bottom:25px;right:22px;width:30px;height:30px}.hero-label{right:22px!important;font-size:10px}.service-item:not(.service-hero){min-height:190px;padding:20px}.service-title{font-size:16px}.service-icon{width:57px;height:57px;border-radius:17px;margin-bottom:17px}.service-icon img{width:36px;height:36px}.card-arrow{top:20px;right:16px}.content-footer{display:block;font-size:11px;margin-top:28px}.content-footer>span:last-child{margin-top:8px}.mobile-nav{display:flex;position:fixed;left:18px;right:18px;bottom:calc(6px + env(safe-area-inset-bottom));height:60px;border-radius:19px;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border:1px solid #fff;box-shadow:0 8px 36px #173b3024,0 1px 3px #2243320a;align-items:center;justify-content:space-around;padding:6px}.mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent;color:#819087;min-width:70px;min-height:48px;border-radius:14px;font-size:11px;position:relative}.mobile-nav button.active{background:#e8f3ec;color:var(--green)}.mobile-nav .ui-icon{width:22px;height:22px}.mobile-nav .notification-dot{top:8px;right:23px}.login-body{padding:24px}.login-shell{max-width:460px;display:block;min-height:0;border-radius:26px}.login-brand-panel{display:none}.login-form-panel{padding:34px 30px 30px}.login-form-panel>.brand{display:flex;margin-bottom:40px}.login-form-panel .eyebrow{font-size:10px}.login-form-panel h1{font-size:27px}.login-intro{margin-bottom:26px}.login-bottom{margin-top:28px}}
@media(max-width:370px){.content{padding-left:16px;padding-right:16px}.topbar{padding-left:16px;padding-right:16px}.service-grid{gap:11px}.service-item:not(.service-hero){padding:16px}.service-hero{padding:18px}.service-hero .service-title,.service-hero .service-subtitle{margin-left:65px;padding-right:10px}.service-hero .service-icon{width:51px;height:51px;left:17px}.service-hero .service-title{font-size:17px}.login-body{padding:14px}.login-form-panel{padding:28px 23px}.greeting h1{font-size:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Touch-only zoom restriction; preserve one-finger horizontal/vertical scrolling. */
html,body{touch-action:pan-x pan-y}
@media(max-width:800px){.search-box input{font-size:16px}}