@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{--blue:#008ecb;--deep:#153b4a;--green:#11855e;--muted:#607a84;--line:#dce9e9;--cream:#f8fbf8}*{box-sizing:border-box}body{font-family:'Noto Sans Thai',sans-serif;color:var(--deep);background:var(--cream);font-size:16px;line-height:1.7}a{color:#0077a9;text-decoration:none}button,input,select,textarea{font:inherit}.brand-header{background:#fff;text-align:center;padding:18px 16px 15px;position:relative}.brand-header img{object-fit:contain;display:block;margin:auto}.brand-title{font-size:24px;font-weight:700;margin-top:7px}.brand-sub{font-size:11px;letter-spacing:2px;color:var(--muted)}.brand-sub span{color:#70b834;margin:0 10px}.clock{position:absolute;right:4%;bottom:22px;font-size:12px;color:var(--muted)}.main-nav{background:white;border-block:1px solid var(--line);position:sticky;top:0;z-index:20}.nav-inner{max-width:1320px;margin:auto;min-height:76px;display:flex;gap:20px;align-items:center;padding:10px 24px}.wordmark{font-weight:700;color:var(--deep);white-space:nowrap;font-size:21px}.brand-symbol{background:#d6f1a8;color:#137055;border-radius:13px;display:inline-grid;place-items:center;width:42px;height:42px;margin-right:8px}.nav-links{display:flex;gap:3px;align-items:center;flex:1;justify-content:center;flex-wrap:wrap}.nav-links a{font-size:13px;padding:9px 10px;color:#4f6b76;border-radius:12px}.nav-links a.active{background:#e8f5fd;color:#007db4;font-weight:700}.nav-account{display:flex;align-items:center;gap:9px}.logout-btn{border:0;background:none;font-size:12px;color:var(--muted)}.avatar{border-radius:50%;background:#c9f0e1;width:36px;height:36px;display:grid;place-items:center}.menu-toggle{display:none}.page-content{max-width:1240px;min-height:45vh;padding-top:32px;padding-bottom:64px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.8px;color:#24755d;text-transform:uppercase}.pill{display:inline-block;padding:7px 13px;border-radius:30px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:600}.hero{display:grid;grid-template-columns:1.02fr 1fr;background:#e9f5ed;border-radius:30px;overflow:hidden;position:relative;min-height:450px}.hero-copy{padding:46px 12px 46px 42px;z-index:1}.hero h1{font-size:clamp(34px,4vw,52px);font-weight:700;line-height:1.4;letter-spacing:-1.5px;margin:22px 0 16px}.hero h1 span{color:var(--blue)}.hero p{color:#56706f;max-width:420px;font-size:15px;line-height:1.95}.hero-image{position:relative;display:flex;align-items:center}.hero-image>img{width:100%;height:100%;object-fit:cover}.hero-note{position:absolute;bottom:26px;left:20px;right:20px;background:#ffffffed;border:1px solid white;border-radius:18px;padding:15px 20px;font-size:14px;box-shadow:0 10px 40px #25493a0a}.hero-note b{display:block}.hero-note span{font-size:11px;color:var(--muted)}.btn{border-radius:13px;padding:12px 21px;font-weight:600;font-size:14px;box-shadow:none!important}.btn-primary{background:var(--blue);border-color:var(--blue)}.btn-primary:hover{background:#006e9c;border-color:#006e9c}.btn-success{background:var(--green);border-color:var(--green)}.btn-light{background:white;border:1px solid var(--line)}.btn-danger{background:#be354d;border-color:#be354d}.btn-outline-primary{border-color:#92cbdc;color:#006b93}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0}.helper-row{font-size:11px;color:#506c61;display:flex;gap:18px;flex-wrap:wrap}.quick-strip{display:grid;grid-template-columns:repeat(3,1fr);background:white;border:1px solid var(--line);border-radius:20px;margin-top:20px;padding:24px 10px}.quick-item{display:flex;gap:15px;padding:0 26px;border-right:1px solid var(--line)}.quick-item:last-child{border:0}.quick-icon{font-size:24px;background:#edf8d9;border-radius:14px;min-width:48px;height:48px;display:grid;place-items:center}.quick-item b{display:block;font-size:14px}.quick-item small{font-size:12px;color:var(--muted)}.section-heading{display:flex;justify-content:space-between;align-items:end;margin:44px 0 22px;gap:20px}.section-heading h2{font-size:26px;font-weight:700;margin:7px 0}.section-heading p{font-size:13px;color:var(--muted);margin:0}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.feature-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;transition:transform .2s}.feature-card:hover{transform:translateY(-4px)}.feature-card img{width:100%;height:180px;object-fit:cover}.feature-body{padding:20px}.feature-body h3{font-size:18px;font-weight:600}.feature-body p{font-size:12px;color:var(--muted);min-height:45px}.feature-body a{font-size:13px;font-weight:700}.care-banner{display:flex;justify-content:space-between;align-items:center;gap:20px;border-radius:22px;padding:28px 34px;background:#ddf2fd;margin-top:35px}.care-banner h3{font-size:22px;font-weight:700}.care-banner p{font-size:13px;margin:0;color:var(--muted)}footer{text-align:center;background:#fff;border-top:1px solid var(--line);padding:30px 20px;color:var(--muted);font-size:13px}footer img{object-fit:contain;margin:24px auto 12px;max-width:100%}footer small{font-size:11px}.footer-intro{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}.footer-intro strong{color:var(--deep)}.footer-intro>span:last-child{font-size:12px}.page-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:10px 0 28px}.page-head h1{font-size:30px;font-weight:700;margin:5px 0}.page-head p{color:var(--muted);font-size:14px}.panel{padding:28px;border:1px solid var(--line);border-radius:21px;background:white;margin-bottom:24px}.panel h2{font-size:21px;font-weight:700;margin-bottom:20px}.panel h3{font-size:18px;font-weight:600}.auth-shell{max-width:940px;margin:12px auto;display:grid;grid-template-columns:1fr 1fr;border-radius:26px;overflow:hidden;background:#fff;border:1px solid var(--line)}.auth-art{background:#e8f6ef;padding:25px;display:flex;flex-direction:column;justify-content:center}.auth-art img{width:100%;border-radius:20px}.auth-art h2{font-size:25px;font-weight:700;margin-top:20px}.auth-form{padding:36px}.auth-form h1{font-size:27px;font-weight:700}.form-label{font-size:14px;font-weight:500}.form-control,.form-select{padding:12px 14px;border-radius:11px;border-color:#cbdcdd;background:#fcfefd;min-height:48px}.form-control:focus,.form-select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #008ecb1a}textarea{min-height:100px!important}.form-help{font-size:12px;color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px}.stat{padding:23px;border-radius:19px;background:#fff;border:1px solid var(--line)}.stat small{color:var(--muted);font-size:13px}.stat strong{display:block;font-size:32px;margin:8px 0}.stat span{font-size:12px;color:#258461}.table{font-size:14px;vertical-align:middle}.table th{background:#f0f7f6;color:#557077;white-space:nowrap;font-size:12px;padding:13px}.table td{padding:14px 12px}.badge{font-weight:500;padding:8px 11px;border-radius:8px}.status-online{background:#def5e7;color:#157448}.status-offline{background:#edf0f1;color:#536972}.status-pending{background:#fff1ca;color:#816113}.muted{color:var(--muted)}.empty{text-align:center;padding:35px;color:var(--muted)}.empty .empty-icon{font-size:42px}.controls{display:flex;flex-wrap:wrap;gap:10px}.device-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:24px}.direction{border-radius:20px;background:#eef8f2;padding:30px;text-align:center}.direction .arrow{font-size:64px;color:#008e7a}.direction strong{font-size:25px;display:block}.mini-stats{display:flex;gap:14px;margin:24px 0}.mini-stats>div{flex:1;background:#f5f9fa;border-radius:15px;padding:17px}.mini-stats b{font-size:26px;display:block}.mini-stats span{font-size:12px;color:var(--muted)}.alert{border-radius:13px;font-size:14px}.manual-content h2{margin-top:32px}.manual-content p,.manual-content li{line-height:1.9}.print-only{display:none}:focus-visible{outline:3px solid #036c9a;outline-offset:3px}@media(max-width:1100px){.nav-inner{gap:10px}.nav-links a{font-size:12px;padding:8px}.wordmark{font-size:17px}.clock{position:static;margin-top:8px}.feature-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.brand-header{padding:12px}.brand-header img{width:90px;height:90px}.brand-title{font-size:19px}.brand-sub{font-size:9px}.nav-inner{flex-wrap:wrap;padding:12px 16px}.menu-toggle{display:block;margin-left:auto;border:1px solid var(--line);background:white;border-radius:9px;padding:5px 10px}.nav-links{display:none;order:4;flex:0 0 100%;align-items:stretch;flex-direction:column}.nav-links.open{display:flex}.nav-links a{font-size:15px}.nav-account{margin-left:4px}.page-content{padding:20px 16px 36px}.hero{grid-template-columns:1fr}.hero-copy{padding:30px 26px 12px}.hero h1{font-size:37px}.hero-image{height:310px}.hero-note{bottom:16px}.quick-strip{grid-template-columns:1fr;padding:8px 20px}.quick-item{padding:17px 0;border-right:0;border-bottom:1px solid var(--line)}.section-heading{margin-top:30px}.section-heading h2{font-size:23px}.feature-grid{gap:12px}.feature-card img{height:150px}.feature-body{padding:16px}.feature-body h3{font-size:16px}.care-banner{padding:24px;align-items:start;flex-direction:column}.stats{grid-template-columns:repeat(2,1fr);gap:12px}.stat{padding:17px}.stat strong{font-size:27px}.auth-shell{grid-template-columns:1fr}.auth-art{display:none}.auth-form{padding:26px}.page-head{align-items:start;flex-direction:column}.page-head h1{font-size:26px}.panel{padding:20px}.device-layout{grid-template-columns:1fr}.mini-stats{flex-wrap:wrap}.mini-stats>div{min-width:90px}.footer-intro>span:last-child{width:100%}}@media print{@page{size:A4;margin:18mm}body{background:white;font-size:12pt;color:black}.brand-header,.main-nav,footer,.no-print{display:none!important}.page-content{width:100%;max-width:none;padding:0}.panel{border:0;padding:0}.print-only{display:block}.table-responsive{overflow:visible}.panel,tr{break-inside:avoid}a{color:black}.manual-content h2{break-after:avoid}.hero{display:none}}