@font-face{font-family:'TH Sarabun New';src:url('fonts/THSarabunNew.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:'TH Sarabun New';src:url('fonts/THSarabunNew-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
:root{--bs-body-font-family:'TH Sarabun New',Tahoma,sans-serif;--bs-body-font-size:1.375rem;--bs-body-line-height:1.35;--bs-body-color:#273b50;--bs-body-bg:#f3f6fa;--bs-primary:#153b64;--bs-primary-rgb:21,59,100;--bs-secondary-color:#687b8c;--bs-border-color:#dde5ed;--bs-border-radius:.6rem;--navy:#153b64;--gold:#c5a667;--water:#187b99}body{min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}a{text-decoration:none}h1,h2,h3,h4{font-weight:700;color:#1f3853}h1{font-size:2.75rem;line-height:1.12;margin:8px 0 12px}h2{font-size:1.75rem;line-height:1.15}h3{font-size:1.7rem;line-height:1.2;margin:0}small,.small{font-size:1.125rem}.ui-icon{width:22px;height:22px;display:inline-block;flex-shrink:0;vertical-align:-4px}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.institution-strip{background:var(--navy);color:#d9e6f2;font-size:1rem;padding:7px 0;letter-spacing:.2px}.site-header{background:#fff;border-bottom:1px solid var(--bs-border-color)}.brand{font-size:1.65rem;font-weight:700;color:var(--navy);line-height:1.1;white-space:normal}.brand small{display:block;font-weight:400;color:#6e8092;font-size:1.15rem;margin-top:6px}.brand-mark{background:#f0f4fa;border:1px solid #dce5ef;box-shadow:inset 0 -3px var(--gold);display:grid;place-items:center;width:56px;height:60px;border-radius:13px;flex-shrink:0;color:var(--navy)}.brand-mark .ui-icon{width:31px;height:31px}.account{background:#f0f4f8;border-radius:30px;padding:7px 15px;color:var(--navy);font-size:1.15rem}.account .ui-icon{width:17px;height:17px}.workspace-nav{border-top:1px solid #edf1f5}.workspace-nav .nav{gap:28px;overflow-x:auto;white-space:nowrap}.workspace-nav .nav-link{padding:13px 3px 12px;color:#6b7b8c;border-bottom-width:3px;font-weight:400;font-size:1.3rem}.workspace-nav .nav-link.active{color:var(--navy);font-weight:700}.workspace-nav .ui-icon{width:18px;height:18px;margin-right:5px}.main-content{padding-top:32px;padding-bottom:48px;flex:1}.page-heading{margin:0 0 26px}.section-kicker{font-size:1.15rem;color:#6c8194;font-weight:700;letter-spacing:.3px}.page-heading p{font-size:1.3rem}.month-label{padding:9px 16px;background:white;border:1px solid var(--bs-border-color);border-radius:8px;color:#6b7c8e;font-size:1.2rem;white-space:nowrap}.month-label strong{color:var(--navy);margin-left:9px}.card{border-color:var(--bs-border-color);box-shadow:0 2px 8px #173b6412;border-radius:12px;overflow:hidden}.card-header{background:white;padding:20px 24px;border-bottom:1px solid #e7edf3;line-height:1.15}.card-header h2 .ui-icon{margin-right:5px;color:#6b849b}.card-header>span{font-size:1.15rem}.card-body{padding:24px}.summary-card .card-body{padding:24px 26px}.summary-caption{color:#6b7e90;font-size:1.2rem;font-weight:700}.summary-caption .ui-icon{width:19px;height:19px;margin-right:5px;color:#7a91a7}.summary-value{font-size:2.6rem;font-weight:700;color:var(--navy);line-height:1.15;margin-top:12px;font-variant-numeric:tabular-nums;white-space:nowrap}.summary-value span{font-size:1.15rem;font-weight:400;color:#7a8b99}.primary-summary{background:var(--navy);border:0;color:#fff;box-shadow:0 5px 15px #153b6420;position:relative}.primary-summary:after{content:'';position:absolute;right:0;bottom:0;height:4px;width:100%;background:var(--gold)}.primary-summary .summary-value{color:#fff;font-size:3.2rem}.primary-summary .summary-caption,.primary-summary .summary-value span{color:#d4e0ee}.primary-summary small{color:#abc3d9;font-size:1.05rem}.summary-icon{background:#ffffff0e;border:1px solid #ffffff1c;border-radius:15px;width:64px;height:70px;display:grid;place-items:center;margin-left:10px;color:#e2d0a9}.summary-icon .ui-icon{width:34px;height:34px}.water-summary .summary-value,.water-summary .summary-caption .ui-icon,.water-text{color:var(--water)}.form-label{font-size:1.25rem;font-weight:700;color:#435c73;margin-bottom:7px}.form-control,.form-select{font-family:var(--bs-body-font-family);font-size:1.35rem;line-height:1.35;min-height:48px;border-color:#d6e0e9;border-radius:8px;padding:9px 14px;color:#273b50;background-color:white}.form-control:focus,.form-select:focus{border-color:#779cbf;box-shadow:0 0 0 .2rem #153b6410}.form-control::placeholder{color:#95a2ae}.form-control[type=month]{font-size:1.25rem;min-width:0}.input-group-text{background:#f6f8fb;color:#8b9fb0;border-color:#d6e0e9;padding:10px 13px}.input-group-text .ui-icon{width:19px;height:19px}.form-text{font-size:1.08rem;color:#6b8194;line-height:1.4}.btn{font-family:var(--bs-body-font-family);font-size:1.3rem;font-weight:700;padding:8px 18px;border-radius:8px;line-height:1.4;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:background .15s,box-shadow .15s}.btn .ui-icon{width:19px;height:19px}.btn-primary{--bs-btn-bg:#153b64;--bs-btn-border-color:#153b64;--bs-btn-hover-bg:#0d2d50;--bs-btn-hover-border-color:#0d2d50;--bs-btn-active-bg:#0d2d50;--bs-btn-disabled-bg:#153b64;--bs-btn-disabled-border-color:#153b64}.btn-outline-primary{--bs-btn-color:#153b64;--bs-btn-border-color:#c6d5e4;--bs-btn-hover-bg:#153b64;--bs-btn-hover-border-color:#153b64;--bs-btn-active-bg:#153b64;--bs-btn-active-border-color:#153b64;background:white}.btn-outline-secondary{--bs-btn-border-color:#dce4eb;--bs-btn-color:#6b7b8c;--bs-btn-hover-bg:#eaf0f6;--bs-btn-hover-color:#153b64;--bs-btn-hover-border-color:#dce4eb}.btn-water{background:#187b99;border-color:#187b99;color:white}.btn-water:hover{background:#126580;color:white}.badge{font-size:1rem;font-weight:700;padding:6px 11px;line-height:1.1}.status-done{background:#e7f3ed;color:#337755}.status-pending{background:#fff4df;color:#a27b30}.bill-table thead th{background:#f6f8fb;color:#6c8093;font-size:1.15rem;font-weight:700;border-bottom:1px solid #e3ebf2;padding:15px 24px;white-space:nowrap}.bill-table tbody td{background:white;border-color:#edf1f5;padding:19px 24px}.bill-table tbody tr:last-child td{border-bottom:0}.bill-table tbody tr:hover td{background:#fcfdfe}.bill-table .amount-cell{font-size:1.75rem;color:var(--navy)}.bill-table td>.fw-bold{font-size:1.4rem}.bill-table small{font-size:1.02rem}.bill-table .badge{font-size:.95rem;margin-left:6px}.numeric{font-variant-numeric:tabular-nums}.empty-state{display:flex;flex-direction:column;text-align:center;padding:48px 24px;align-items:center}.empty-icon{display:grid;place-items:center;width:64px;height:64px;border:1px solid #e1e8ef;background:#f2f6fa;color:#839bb2;border-radius:50%;margin-bottom:18px}.empty-icon .ui-icon{width:30px;height:30px}.empty-state h3{font-size:1.65rem}.empty-state p{font-size:1.2rem;color:#8293a3;margin:10px 0 20px}.info-note{display:flex;align-items:start;gap:10px;margin:20px 0;color:#7f91a1;font-size:1.1rem;line-height:1.4}.info-note .ui-icon{width:17px;height:17px;margin-top:3px}.site-footer{border-top:1px solid #dde6ef;padding:21px 0;color:#7d8e9e;font-size:1.05rem;background:#edf2f7}.utility-tabs{display:inline-flex;background:#e6edf5;padding:5px;border-radius:10px;gap:5px}.utility-tabs .nav-link{color:#657f97;padding:10px 24px;border-radius:7px;line-height:1.2;font-size:1.3rem;font-weight:700}.utility-tabs .nav-link.active{background:white;color:var(--navy);box-shadow:0 2px 5px #153b6412}.utility-tabs .nav-link.water-tab{color:var(--water)}.utility-tabs .ui-icon{width:19px;height:19px;margin-right:6px}.meter-card .card-body{padding:24px}.house-symbol{display:inline-grid;place-items:center;width:43px;height:43px;background:#edf3f9;border-radius:10px;color:#537a9e}.house-symbol .ui-icon{width:25px;height:25px}.meter-card h3{font-size:1.85rem}.meter-card p{font-size:1.2rem}.reading-amount{font-size:2.8rem;font-weight:700;margin:18px 0 12px;color:var(--navy);line-height:1.2}.reading-amount small{font-size:1.2rem;color:#8092a3;font-weight:400}.back-link{display:inline-flex;align-items:center;gap:8px;font-size:1.18rem;margin-bottom:22px;color:#64819a}.back-link .ui-icon{width:17px;height:17px}.utility-label{background:#e6eef7;color:#406b91;border-radius:30px;padding:7px 15px;font-weight:700;font-size:1.1rem}.utility-label .ui-icon{width:18px;height:18px}.previous-reading{background:#edf3f9;padding:18px 20px;border-radius:9px;margin-bottom:25px}.previous-reading span{font-size:1.2rem;color:#53738f}.previous-reading small{display:block;color:#8298ab;font-size:1rem;margin-top:4px}.previous-reading strong{font-size:2.3rem;color:var(--navy);line-height:1}.big-input{min-height:78px;font-size:2.7rem;font-weight:700;color:var(--navy);letter-spacing:.4px}.big-input::placeholder{font-size:1.5rem;font-weight:400;letter-spacing:0}.calculation{background:#f1f6fa;padding:18px 14px 20px;margin-left:0;margin-right:0;border-radius:9px;--bs-gutter-x:14px}.calculation span{color:#728ba1;font-size:1.1rem;display:block}.calculation strong{display:block;font-size:2.6rem;color:var(--navy);line-height:1.2;margin-top:5px}.upload-panel{background:#f9fbfd;border:1px dashed #c5d5e2;border-radius:9px;padding:18px}.upload-panel .form-control{font-size:1.05rem}fieldset[disabled]{opacity:.7}.saved-result{padding:22px 0 0;margin-top:25px;border-top:1px solid #e5edf4}.saved-result>span{color:#6c8398;font-size:1.2rem;display:block}.saved-result strong{font-size:2.8rem;color:var(--navy);line-height:1.2}.saved-result strong small{font-size:1.2rem}.saved-result p{color:#8194a6;font-size:1rem;margin:8px 0 0}.meter-photo{width:100%;max-height:330px;object-fit:contain;background:#edf2f7;border-radius:9px;margin-top:23px}.history-list .list-group-item{padding:17px 0;border-color:#e8eef4}.history-list small{display:block;color:#8296a8;font-size:1.04rem}.history-amount strong{color:var(--navy);font-size:1.6rem}.directory-item{padding:20px 0;border-bottom:1px solid #e8eef4}.directory-item:first-child{padding-top:0}.directory-item:last-child{padding-bottom:0;border:0}.directory-item h3{font-size:1.75rem}.meter-detail{display:flex;gap:20px;font-size:1.15rem;margin-top:13px;color:#52728d}.meter-detail>span{min-width:72px;font-weight:700}.meter-detail .ui-icon{width:17px;height:17px;margin-right:5px}.meter-detail small{display:block;font-size:1rem;color:#8397a9}.login-shell{max-width:990px;margin:24px auto 45px;box-shadow:0 8px 35px #153b6414;border:1px solid #dde6ef;border-radius:16px;overflow:hidden;background:white}.login-aside{background:var(--navy);color:#fff;padding:45px 40px;position:relative;border-bottom:5px solid var(--gold)}.login-aside .section-kicker{color:#9eb7cf}.login-aside h1{color:#fff;font-size:3.1rem;line-height:1.12;margin-top:17px;margin-bottom:20px}.login-aside p{color:#b5cadc;font-size:1.3rem;line-height:1.5;margin-bottom:35px}.aside-logo{width:64px;height:64px;display:grid;place-items:center;background:#ffffff0e;border:1px solid #ffffff20;color:#e0cb9f;border-radius:14px;margin-bottom:32px}.aside-logo .ui-icon{width:32px;height:32px}.aside-feature{display:flex;align-items:center;gap:10px;font-size:1.2rem;color:#c5d7e6;margin:13px 0}.aside-feature .ui-icon{color:#c7b482;width:17px;height:17px}.login-main{padding:45px 42px}.login-lock{display:grid;place-items:center;background:#eef3f8;border-radius:12px;color:#597d9f;width:48px;height:48px;margin-bottom:20px}.login-main h2{font-size:2.15rem;margin-bottom:8px}.login-main p{font-size:1.2rem}.login-back{display:flex;gap:8px;justify-content:center;align-items:center;color:#7890a4;font-size:1.15rem;margin-top:25px}.login-back .ui-icon{width:17px;height:17px}.mobile-bill{padding:22px;border-bottom:1px solid #e6edf4}.mobile-bill:last-child{border:0}.mobile-bill h3{font-size:1.9rem}.utility-caption{color:#617e97;font-size:1.15rem;font-weight:700}.utility-caption .ui-icon{width:17px;height:17px;margin-right:3px}.utility-amount{font-size:2rem;font-weight:700;line-height:1.25;color:var(--navy);margin-top:7px}.utility-amount small{font-size:1.1rem;font-weight:400;color:#8a9ead}.mobile-total{margin-top:20px;padding-top:15px;border-top:1px solid #e6edf4;color:#687f92;font-size:1.15rem}.mobile-total strong{font-size:2rem;color:var(--navy)}.mobile-total small{font-weight:400;font-size:1.1rem}.alert{font-size:1.2rem;line-height:1.4;border-radius:9px}.alert .ui-icon{margin-top:2px}
@media(min-width:1200px){.container-xl{max-width:1220px}}@media(max-width:991.98px){.summary-value{font-size:2.5rem}.login-aside{padding:30px}.login-aside h1{font-size:2.6rem}.login-aside p{margin:0}.aside-logo,.aside-feature{display:none}.login-aside .section-kicker{font-size:1.1rem}.login-main{padding:32px}.login-shell{max-width:640px}.bill-table thead th,.bill-table tbody td{padding:15px}.bill-table .badge{display:block;margin:5px 0 0;float:right}}
@media(max-width:575.98px){:root{--bs-body-font-size:1.3rem}.container-xl{padding-left:18px;padding-right:18px}.institution-strip{font-size:.97rem;padding:5px 0}.brand{font-size:1.3rem;gap:9px!important}.brand small{font-size:.97rem;margin-top:5px}.brand-mark{width:41px;height:47px;border-radius:10px}.brand-mark .ui-icon{width:25px;height:25px}.site-header .navbar>.container-xl{padding-top:14px!important;padding-bottom:14px!important}.logout-btn{width:38px;min-height:40px;padding:7px}.login-nav{font-size:1.05rem;min-height:40px;padding:7px 10px;gap:6px}.login-nav .ui-icon{width:15px;height:15px}.workspace-nav .nav{gap:20px}.workspace-nav .nav-link{font-size:1.12rem;padding:12px 1px}.workspace-nav .ui-icon{width:15px;height:15px;margin-right:2px}.main-content{padding-top:23px;padding-bottom:32px}.page-heading{margin-bottom:22px}.page-heading h1{font-size:2.2rem;line-height:1.15;margin:7px 0 9px}.page-heading p{font-size:1.17rem}.section-kicker{font-size:1.05rem}.month-label{font-size:1.1rem;padding:6px 12px}.summary-card .card-body{padding:18px}.summary-caption{font-size:1.08rem}.summary-caption .ui-icon{width:16px;height:16px}.summary-value{font-size:2.3rem;margin-top:8px}.summary-value span{font-size:1rem}.primary-summary .summary-value{font-size:3.05rem}.primary-summary small{font-size:1rem}.summary-icon{width:54px;height:61px}.summary-icon .ui-icon{width:29px;height:29px}.card{border-radius:10px}.card-header{padding:18px 20px}.card-header h2{font-size:1.6rem}.card-header>span{font-size:1.05rem}.card-body{padding:20px}.filter-panel .card-body{padding:20px}.filter-panel .row{--bs-gutter-y:14px}.form-control,.form-select{font-size:1.3rem;min-height:49px}.form-label{font-size:1.18rem}.btn{font-size:1.25rem;min-height:48px}.utility-tabs{display:flex;width:100%;padding:4px}.utility-tabs .nav-link{flex:1;text-align:center;padding:12px 8px;font-size:1.2rem}.utility-tabs .ui-icon{width:17px;height:17px;margin-right:4px}.empty-state{padding:34px 22px}.empty-state h3{font-size:1.55rem}.empty-state p{font-size:1.1rem;line-height:1.5}.info-note{font-size:1.02rem;line-height:1.45;margin-top:18px}.site-footer{font-size:.97rem;padding:18px 0}.site-footer .container-xl{display:block!important}.site-footer span{display:block}.login-shell{margin-top:6px;margin-bottom:10px}.login-aside{padding:23px}.login-aside h1{font-size:2.5rem;margin:10px 0}.login-aside p{font-size:1.15rem}.login-main{padding:28px 23px}.login-main h2{font-size:2.1rem}.login-lock{margin-bottom:16px}.big-input{font-size:2.55rem;min-height:76px}.big-input::placeholder{font-size:1.32rem}.previous-reading{padding:17px}.previous-reading strong{font-size:2.2rem}.previous-reading span{font-size:1.1rem}.previous-reading small{font-size:.94rem}.calculation{padding:16px 8px}.calculation span{font-size:1.02rem}.calculation strong{font-size:2.35rem}.meter-card .card-body{padding:23px}.meter-detail{gap:13px}.meter-detail>span{min-width:62px}.history-list small{font-size:.97rem}.history-amount strong{font-size:1.55rem}}
@media print{.institution-strip,.site-header,.filter-panel,.site-footer,.btn,.utility-tabs{display:none!important}body{background:white}.main-content{padding:0}.d-none.d-md-block{display:block!important}.d-md-none{display:none!important}.card{box-shadow:none;break-inside:avoid}.summary-value,.primary-summary .summary-value{font-size:2rem}.primary-summary{background:white;color:#000;border:1px solid #ccc}.primary-summary .summary-caption,.primary-summary .summary-value,.primary-summary small{color:#000}}