/* BT public login/dashboard only. Colors and fonts follow home CMD#431 r5. */
body.nl-page{--nl-blue:#285be7;--nl-text:#18263e;--nl-muted:#66738a;--nl-border:#e3e8f1;background:#f5f7fb;color:var(--nl-text);font:14px/1.6 'IBM Plex Sans Thai',Tahoma,sans-serif;padding:50px 0 0}
.nl-page *{box-sizing:border-box}
.nl-page [hidden]{display:none!important}
.nl-page h1,.nl-page h2,.nl-page h3,.nl-page h4,.nl-page .nl-brand{font-family:Anuphan,sans-serif}
.nl-page button,.nl-page input{font-family:inherit}
.nl-page a:focus-visible,.nl-page button:focus-visible,.nl-page input:focus-visible{outline:3px solid #2b63e8;outline-offset:3px}
.nl-page .navbar-inverse{background:#15253f;border:0;box-shadow:0 1px 0 #ffffff14}
.nl-page .navbar>.container{max-width:1440px;width:100%;padding:0 32px}
.nl-page .navbar .navbar-brand{color:#fff;font:500 16px/20px Anuphan,sans-serif}
.nl-page .navbar-inverse .navbar-nav>li>a{font-size:12px;color:#dee7f4}
.nl-page .navbar-inverse .navbar-nav>.open>a,.nl-page .navbar-inverse .navbar-nav>li>a:hover{background:#243857;color:#fff}
.nl-page .navbar .dropdown-menu{border:1px solid #dce4f2;border-radius:12px;padding:7px;box-shadow:0 12px 28px #18304c1a;max-height:65vh;overflow-y:auto}
.nl-page .navbar .dropdown-menu>li>a{padding:9px 13px;border-radius:7px;font-size:13px}
.nl-page .navbar-toggle{border-color:#50617b;min-width:44px;min-height:40px;margin-right:0}
.nl-page .theme-showcase{max-width:1440px;width:100%;padding:0 36px 28px}
.nl-page .school-header{padding:32px 0 27px;text-align:center}
.nl-page .school-header h3{font-size:26px;line-height:1.5;font-weight:600;letter-spacing:-.4px;color:#18263e;margin:0}
.nl-page .school-header small{display:none}
.nl-page .nl-layout{display:grid;grid-template-columns:328px minmax(0,1fr);gap:28px;margin:0;align-items:start}
.nl-page .nl-layout:before,.nl-page .nl-layout:after,.nl-page .stat-cards-row:before,.nl-page .stat-cards-row:after,.nl-page .charts-row:before,.nl-page .charts-row:after,.nl-page .room-grid:before,.nl-page .room-grid:after{display:none}
.nl-page .nl-layout>.col-md-3,.nl-page .nl-layout>.col-md-9{float:none;width:auto;padding:0;min-width:0}
.nl-page .nl-layout>.row{grid-column:1/-1;margin:0;color:var(--nl-muted);font-size:11px}
.nl-page .nl-layout>.row a{color:#6a7e9d}
.nl-page .login-card{border-radius:18px;border:1px solid #dfe6f1;box-shadow:0 8px 26px #1c36500a;background:#fff;padding:25px 27px 24px;margin-bottom:20px;position:relative;overflow:hidden}
.nl-page .login-card:before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(125deg,#214ed1,#3979f2)}
.nl-page .nl-brand{display:flex;align-items:center;justify-content:center;gap:9px;font-size:22px;font-weight:700;letter-spacing:-.7px;margin-bottom:21px;color:#1b2e4c}
.nl-page .nl-mark{display:flex;align-items:center;justify-content:center;width:34px;height:37px;border-radius:11px;background:#285be7;color:#fff;font:700 29px/1 Anuphan,sans-serif;letter-spacing:-4px;padding-right:5px;box-shadow:0 5px 10px #285be719}
.nl-page .nl-mark span{color:#a8c4ff;font-size:17px;align-self:flex-end;margin-bottom:4px}
.nl-page .nl-school-logo img{width:auto;max-width:82px;height:78px;object-fit:contain;display:block;margin:0 auto 14px!important}
.nl-page .login-card h2{font-size:21px;font-weight:600;line-height:1.5;color:#18263e;margin:0 0 21px}
.nl-page .nl-field-label{display:block;font-size:12px;font-weight:500;color:#445774;margin:0 0 7px}
.nl-page .form-signin .form-control{height:48px;background:#f9fbff;border:1px solid #dce4f1;border-radius:10px;padding:10px 13px;font-size:15px;color:#18263e;box-shadow:none;margin:0 0 16px;transition:border-color .15s,box-shadow .15s}
.nl-page .form-signin .form-control::placeholder{font-size:12px;color:#8b97aa;opacity:1}
.nl-page .form-signin .form-control:focus{background:#fff;border-color:#7097ed;box-shadow:0 0 0 3px #285be711}
.nl-page .nl-password-field{position:relative;margin-bottom:20px}
.nl-page .nl-password-field .form-control{padding-right:46px;margin-bottom:0}
.nl-page .nl-show-password{position:absolute;right:2px;top:2px;border:0;background:transparent;width:44px;height:44px;color:#7c8faa;border-radius:8px;font-size:16px}
.nl-page .nl-show-password:hover{background:#edf2fc;color:#285be7}
.nl-page .nl-submit{display:flex;justify-content:center;align-items:center;gap:12px;min-height:48px;padding:11px 18px;background:linear-gradient(125deg,#214ed1,#3979f2);border:1px solid #285bd8;border-radius:11px;box-shadow:0 5px 12px #285be721;color:#fff;font-size:14px;font-weight:500;text-shadow:none;transition:transform .15s,box-shadow .15s}
.nl-page .nl-submit:hover,.nl-page .nl-submit:focus{background:linear-gradient(125deg,#1944bf,#2c68d7);color:#fff;transform:translateY(-1px);box-shadow:0 8px 18px #285be728}
.nl-page #g-login-btn{margin-top:20px}
.nl-page #g-login-status:empty{display:none}
.nl-page #g-login-status{line-height:1.6;overflow-wrap:anywhere}
.nl-page .login-card .alert{border-radius:10px;border:1px solid #f2cc94;background:#fff3df;color:#875719;box-shadow:none;text-shadow:none;padding:10px 12px!important;font-size:12px!important;line-height:1.65;margin-bottom:18px!important}
.nl-page .nl-leaderboard{padding:8px 15px 4px;border:1px solid var(--nl-border);border-radius:16px;background:#fff;box-shadow:0 3px 10px #132c4c04;margin-bottom:15px}
.nl-page .nl-leaderboard .table{margin:0;font-size:11px}
.nl-page .nl-leaderboard .table>tbody>tr>td{border-color:#edf0f6;padding:9px 6px;vertical-align:middle}
.nl-page .nl-leaderboard .table>tbody>tr:first-child>td{background:#fff;border-top:0;padding:16px 1px 15px;color:#4e3c78;font-size:12px}
.nl-page .nl-leaderboard .table-striped>tbody>tr:nth-of-type(odd){background:#f9faff}
.nl-page .nl-leaderboard .table>tbody>tr:nth-child(2)>td{font-size:10px;color:#7b8da6}
.nl-page .nl-leaderboard a{color:#285bd8}
.nl-page .nl-login-column>.nl-leaderboard+div>a{background:linear-gradient(125deg,#087444,#148354);border-color:#0b7247;border-radius:11px;padding:12px 10px;min-height:44px;font-size:12px;box-shadow:0 5px 12px #13754d16;text-shadow:none}
.nl-page .dash-form{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--nl-border);box-shadow:none;border-radius:14px;padding:20px;margin:0 0 17px}
.nl-page .dash-form .dash-title{font-size:17px;line-height:1.7;font-weight:500;color:#253b5c;margin:0}
.nl-page .dash-form .dash-title i{color:#6483b5;margin-right:7px}
.nl-page .dash-date-row{flex-wrap:nowrap;gap:8px;flex-shrink:0}
.nl-page .dash-date-row .form-control{height:42px;width:155px;background:#f9fbff;border:1px solid #dce4f1;border-radius:9px;box-shadow:none;padding:7px 9px;font-size:12px;color:#38506f}
.nl-page .dash-date-row .btn{height:42px;border:1px solid #cbd9f2;border-radius:9px;background:#edf3ff;color:#315aaa;text-shadow:none;box-shadow:none;font-size:12px;padding:8px 12px;white-space:nowrap}
.nl-page .stat-cards-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin:0 0 15px}
.nl-page .stat-cards-row>[class^="col-"]{width:auto;float:none;min-width:0;padding:0;margin:0}
.nl-page .stat-card{border:0;border-radius:14px;padding:15px 16px;min-height:154px;text-align:left;position:relative;box-shadow:0 5px 12px #285be719}
.nl-page .stat-card:hover{transform:translateY(-2px)}
.nl-page .stat-card .stat-icon{font-size:16px;margin-bottom:12px;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#ffffff24;color:#fff}
.nl-page .stat-card .stat-value{font:600 29px/1.2 Anuphan,sans-serif;color:#fff;margin-bottom:4px}
.nl-page .stat-card .stat-label{font-size:12px;color:#fff;font-weight:500}
.nl-page .stat-card .stat-percent{position:absolute;right:14px;top:21px;margin:0;font-size:11px;color:#fff;opacity:.95}
.nl-page .stat-present{background:linear-gradient(125deg,#087444,#148354)}
.nl-page .stat-absent{background:linear-gradient(125deg,#b82f46,#cb4654)}
.nl-page .stat-leave{background:linear-gradient(125deg,#2050c4,#2d69d9)}
.nl-page .stat-late{background:linear-gradient(125deg,#f0a12f,#ffb947)}
.nl-page .stat-late .stat-icon{background:#ffffff55;color:#825008}
.nl-page .stat-late .stat-value,.nl-page .stat-late .stat-label,.nl-page .stat-late .stat-percent{color:#4a2c04}
.nl-page .dash-total-bar{background:#eaf0fa;border:1px solid #dbe5f5;border-radius:11px;box-shadow:none;color:#466185;padding:11px 14px;margin-bottom:17px;gap:10px;font-size:11px}
.nl-page .charts-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:15px;margin:0 0 17px}
.nl-page .charts-row>[class^="col-"]{float:none;width:auto;padding:0;margin:0;min-width:0}
.nl-page .chart-card{border:1px solid var(--nl-border);border-radius:14px;box-shadow:none;padding:18px;height:100%}
.nl-page .chart-title{font-size:14px;font-weight:500;line-height:1.6;color:#324866;margin:0 0 15px}
.nl-page .chart-title i{color:#7890b3;margin-right:5px}
.nl-page .chart-canvas-wrap{height:240px}
.nl-page .rooms-card{background:#fff;border:1px solid var(--nl-border);border-radius:14px;box-shadow:none;padding:20px;margin-bottom:16px}
.nl-page .rooms-card .chart-title small{font-family:'IBM Plex Sans Thai',Tahoma,sans-serif;font-size:10px;color:#8593a7!important}
.nl-page .rooms-card .room-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.nl-page .room-grid>div{width:auto;float:none;min-width:0;margin:0;padding:0!important;font-size:11px}
.nl-page .room-grid a{padding:11px 8px!important;background:#f7f9fd;border:1px solid #edf1f7;border-radius:8px;min-height:42px;line-height:1.65;white-space:normal;overflow-wrap:anywhere;transition:border-color .15s,background .15s}
.nl-page .room-grid a:hover{background:#edf3ff;border-color:#c9d8f2}
.nl-page .room-grid .label{font-size:10px;border-radius:5px;padding:4px 5px;margin-right:3px;display:inline-block;font-weight:500;line-height:1.2}
.nl-page .room-grid .label-info{background:#e2eaff;color:#385eab}
.nl-page .room-grid .label-warning{background:#ffdfb0;color:#865315}
.nl-page .room-grid .label-danger{background:#fce0e4;color:#a53348}
.nl-page .rooms-help{font-size:10px;line-height:1.8;color:#8290a6;border-color:#e2e9f4;margin-top:16px;padding-top:13px}
.nl-page .col-md-9>div>a.btn-default{border:1px solid #c9d8f2;background:#eef4ff;color:#315fae;border-radius:10px;box-shadow:none;text-shadow:none;padding:11px 16px;font-size:12px;min-height:44px}
@media(max-width:1250px){.nl-page .theme-showcase{padding:0 25px 25px}.nl-page .nl-layout{grid-template-columns:310px minmax(0,1fr);gap:22px}.nl-page .login-card{padding:24px 20px}.nl-page .dash-form{flex-direction:column;align-items:flex-start;gap:12px}.nl-page .dash-form .dash-title{font-size:16px}.nl-page .rooms-card .room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nl-page .stat-card{padding:14px 11px}.nl-page .stat-card .stat-percent{right:10px;font-size:10px}}
@media(max-width:1000px){.nl-page .nl-layout{grid-template-columns:294px minmax(0,1fr);gap:20px}.nl-page .login-card{padding:23px 15px}.nl-page .charts-row{grid-template-columns:1fr}.nl-page .stat-cards-row{grid-template-columns:repeat(2,minmax(0,1fr))}.nl-page .stat-card{min-height:145px;padding:14px 16px}.nl-page .stat-card .stat-percent{right:14px}.nl-page .navbar .navbar-brand{font-size:13px}.nl-page .navbar-inverse .navbar-nav>li>a{padding-left:10px;padding-right:10px;font-size:11px}}
@media(max-width:760px){.nl-page .theme-showcase{padding:0 18px 24px}.nl-page .school-header{padding:23px 0 22px}.nl-page .school-header h3{font-size:23px}.nl-page .nl-layout{display:flex;flex-direction:column;gap:0}.nl-page .nl-login-column{display:contents}.nl-page .login-card{order:0;width:100%;padding:26px 30px;margin-bottom:24px}.nl-page .nl-layout>.col-md-9{order:1;width:100%}.nl-page .nl-leaderboard{order:2;width:100%;margin-top:20px}.nl-page .nl-login-column>.nl-leaderboard+div{order:3;width:100%}.nl-page .nl-layout>.row{order:4;width:100%}.nl-page .nl-brand{margin-bottom:18px}.nl-page .nl-school-logo img{height:65px;max-width:72px}.nl-page .form-signin .form-control{font-size:16px;height:50px}.nl-page .nl-show-password{top:3px;right:3px}.nl-page .nl-submit{min-height:50px}.nl-page .dash-form{padding:17px}.nl-page .charts-row{grid-template-columns:1fr 1fr;gap:12px}.nl-page .chart-card{padding:13px}.nl-page .chart-title{font-size:12px}.nl-page .chart-canvas-wrap{height:220px}.nl-page .rooms-card{padding:17px}.nl-page .room-grid>div{font-size:10px}.nl-page .navbar>.container{padding:0 18px}.nl-page .navbar .navbar-brand{font-size:14px}}
@media(max-width:500px){.nl-page .theme-showcase{padding:0 16px 20px}.nl-page .school-header h3{font-size:21px}.nl-page .school-header{padding:20px 0}.nl-page .login-card{padding:23px 22px}.nl-page .charts-row{grid-template-columns:1fr}.nl-page .chart-canvas-wrap{height:220px}.nl-page .dash-date-row{width:100%}.nl-page .dash-date-row .form-control{flex:1;width:auto;max-width:none}.nl-page .dash-date-row .btn{flex-shrink:0}.nl-page .dash-total-bar{font-size:10px}.nl-page .rooms-card .chart-title small{display:block;margin-top:4px}.nl-page .room-grid>div{font-size:10px}.nl-page .room-grid a{padding:9px 7px!important}.nl-page .room-grid .label{font-size:9px;padding:4px}.nl-page .navbar .navbar-brand{max-width:calc(100vw - 94px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nl-page .nl-layout>.row{margin-top:15px}}
@media(max-width:365px){.nl-page .login-card{padding:22px 12px}.nl-page .school-header h3{font-size:19px}.nl-page .rooms-card .room-grid{grid-template-columns:1fr}.nl-page .dash-form .dash-title{font-size:14px}.nl-page .stat-card .stat-value{font-size:27px}}
@media(prefers-reduced-motion:reduce){.nl-page *{transition:none!important;scroll-behavior:auto!important}}