:root{
  --blue:#0b6ea8; --blue-2:#0f88c7; --navy:#123b5d; --bg:#f3f7fa; --card:#fff;
  --text:#1e2b35; --muted:#667784; --line:#dce6ed; --green:#248c5a; --amber:#c98313; --red:#c84c4c;
  --shadow:0 10px 30px rgba(18,59,93,.10); --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:"Times New Roman", Times, serif;font-size:17px}
button,input,select,textarea,table{font-family:"Times New Roman", Times, serif;font-size:1rem}
.hidden{display:none!important}.muted{color:var(--muted)}.small{font-size:.9rem}.stack{display:grid;gap:14px}
.login-view{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(145deg,#eaf7ff,#f8fbfd 46%,#d9effb)}
.login-card{width:min(470px,100%);background:#fff;padding:34px;border-radius:24px;box-shadow:var(--shadow);text-align:center;border:1px solid #e3edf3}
.brand-mark{width:76px;height:76px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--blue),var(--blue-2));font-size:44px;font-weight:700;box-shadow:0 8px 20px rgba(11,110,168,.26)}
.login-card h1{font-size:1.55rem;line-height:1.25;margin:10px 0}.demo-note{background:#fff8e7;border:1px solid #f2d99a;padding:10px 12px;border-radius:12px;font-size:.9rem;text-align:left;margin:18px 0}
label{display:grid;gap:7px;text-align:left;font-weight:700}input,select,textarea{width:100%;border:1px solid #cfdde6;border-radius:10px;padding:10px 12px;background:#fff;color:var(--text)}textarea{min-height:92px;resize:vertical}input:focus,select:focus,textarea:focus{outline:2px solid rgba(15,136,199,.17);border-color:var(--blue-2)}
.btn{border:0;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer}.btn.primary{background:var(--blue);color:#fff}.btn.secondary{background:#e8f4fb;color:var(--blue)}.btn.danger{background:#fbecec;color:var(--red)}.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--text)}.btn:disabled{opacity:.5;cursor:not-allowed}
.app-shell{display:grid;grid-template-columns:270px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#0d5e91,#0b6ea8);color:#fff;padding:18px 14px;display:flex;flex-direction:column;z-index:20}.brand-row{display:flex;align-items:center;gap:10px;padding:4px 4px 20px;border-bottom:1px solid rgba(255,255,255,.18)}.brand-row strong{display:block;font-size:1rem}.brand-row span{font-size:.87rem;opacity:.82}.small-mark{width:45px;height:45px;margin:0;font-size:26px;box-shadow:none}
.nav-menu{display:grid;gap:5px;margin-top:18px}.nav-menu button{border:0;background:transparent;color:#eaf7ff;text-align:left;padding:11px 12px;border-radius:10px;cursor:pointer;font-weight:700}.nav-menu button:hover,.nav-menu button.active{background:rgba(255,255,255,.16);color:#fff}.nav-menu button span{margin-left:8px}.sidebar-footer{margin-top:auto;border-top:1px solid rgba(255,255,255,.18);padding:15px 8px 0;display:grid;gap:8px}.link-btn{border:0;background:transparent;color:#fff;text-align:left;padding:0;text-decoration:underline;cursor:pointer}
.main{min-width:0}.topbar{height:86px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:12px 24px;position:sticky;top:0;z-index:10}.topbar h2{margin:0;font-size:1.45rem}.topbar p{margin:3px 0 0;color:var(--muted);font-size:.9rem}.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.9rem}.icon-btn{display:none;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 10px;cursor:pointer}.page-content{padding:24px;max-width:1500px;margin:0 auto;width:100%}
.grid{display:grid;gap:16px}.grid.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:var(--card);border:1px solid #e3ebf0;border-radius:var(--radius);box-shadow:0 4px 18px rgba(18,59,93,.055);padding:18px}.kpi .label{color:var(--muted);font-size:.92rem}.kpi .value{font-size:2rem;font-weight:700;color:var(--navy);margin-top:4px}.kpi .hint{font-size:.84rem;margin-top:6px;color:var(--green)}
.section-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.section-head h3{margin:0;font-size:1.15rem}.section-head .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-top:16px}.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}.table{width:100%;border-collapse:collapse;min-width:720px;background:#fff}.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}.table th{background:#edf6fb;text-align:left;color:#29485e;white-space:nowrap}.table tr:last-child td{border-bottom:0}.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:.82rem;font-weight:700;background:#edf3f6}.badge.green{background:#e5f6ec;color:#247649}.badge.amber{background:#fff4db;color:#9a650d}.badge.red{background:#fde9e9;color:#ad3838}.badge.blue{background:#e7f3fb;color:#0b6ea8}.progress{height:9px;background:#eaf0f3;border-radius:99px;overflow:hidden}.progress>i{display:block;height:100%;background:var(--blue);border-radius:99px}.empty{padding:28px;text-align:center;color:var(--muted);border:1px dashed #cdd9e0;border-radius:12px;background:#fafcfd}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.toolbar .grow{flex:1;min-width:220px}.filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.mini-list{display:grid;gap:9px}.mini-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line)}.mini-item:last-child{border-bottom:0}.mini-item .grow{flex:1}.mini-item strong{display:block}.mini-item small{color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid .full{grid-column:1/-1}.modal{border:0;border-radius:18px;padding:0;width:min(760px,calc(100vw - 28px));max-height:88vh;box-shadow:var(--shadow)}.modal::backdrop{background:rgba(13,39,56,.48)}#modalBody{padding:22px;max-height:88vh;overflow:auto}.modal-head{display:flex;gap:10px;align-items:center;margin-bottom:16px}.modal-head h3{margin:0}.modal-head button{margin-left:auto}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.criteria{display:grid;gap:10px}.criterion{display:grid;grid-template-columns:1fr 90px;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:10px}.criterion small{display:block;color:var(--muted);margin-top:3px}.score-total{font-size:1.7rem;font-weight:700;color:var(--navy)}.rank{font-size:1.1rem;font-weight:700}.qr-box{display:grid;place-items:center;padding:18px;background:#fff;border:1px solid var(--line);border-radius:12px;width:max-content;max-width:100%}.toast{position:fixed;right:18px;bottom:18px;z-index:100;background:#17384f;color:#fff;padding:11px 15px;border-radius:10px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1100px){.grid.cards{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}.filters{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-290px;width:270px;transition:.2s}.sidebar.open{left:0}.icon-btn{display:inline-block}.topbar{height:auto;min-height:78px;padding:12px 14px}.top-actions #todayText{display:none}.page-content{padding:14px}.form-grid,.filters{grid-template-columns:1fr}.grid.cards,.three-col{grid-template-columns:1fr}.criterion{grid-template-columns:1fr}.table{min-width:650px}}
/* MINH DAI WEB 2.0 — typographic/system redesign. Times New Roman everywhere. */
:root{--blue:#075c96;--blue-2:#0c84c0;--navy:#0c3153;--bg:#f5f8fc;--card:#fff;--text:#1b3144;--muted:#687e90;--line:#e2eaf1;--green:#197e63;--amber:#b57b24;--red:#bd4451;--shadow:0 16px 44px rgba(15,51,87,.09);--radius:16px}
*,*::before,*::after{box-sizing:border-box}
html,body{font-family:"Times New Roman",Times,serif!important;font-size:17px;line-height:1.4;letter-spacing:.05px;background:var(--bg)}
button,input,select,textarea,table,option{font-family:"Times New Roman",Times,serif!important}
button{transition:background .15s ease,transform .12s ease,box-shadow .15s ease}
.btn:hover:not(:disabled){filter:brightness(.965);transform:translateY(-1px)}.btn:focus-visible,.nav-menu button:focus-visible{outline:3px solid #54adea;outline-offset:2px}
.btn{border-radius:9px;padding:11px 15px;font-size:1rem}.btn.primary{background:linear-gradient(100deg,#075b96,#0c79af);color:#fff;box-shadow:0 5px 12px rgba(7,92,150,.13)}
.btn.white{background:white;color:#0a5890}.btn.hero-outline{background:transparent;border:1px solid rgba(255,255,255,.36);color:white}
.btn.secondary{background:#eaf3fa;color:#075f99}.btn.ghost{background:#fff;color:#244059}
input,select,textarea{border:1px solid #d3e0e8;border-radius:9px;min-height:43px;padding:10px 12px}label{color:#223c54;font-size:.98rem}
textarea{line-height:1.4;min-height:102px}input:focus,select:focus,textarea:focus{outline:3px solid #dbedf8;border-color:#0e80bd}
.login-view{display:grid;grid-template-columns:1fr 1fr;padding:0;background:#fff;min-height:100vh;place-items:stretch}
.login-art{background:linear-gradient(133deg,#043b67,#08679f 65%,#088fb6);color:#fff;position:relative;min-height:100vh;overflow:hidden;padding:48px 54px;display:flex;flex-direction:column;justify-content:space-between}
.login-art::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 67% 65%,rgba(95,201,245,.2),transparent 34%),repeating-linear-gradient(130deg,transparent 0,transparent 40px,rgba(255,255,255,.018) 41px,transparent 42px)}
.login-flag{position:relative;display:inline-block;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);padding:9px 14px;border-radius:40px;font-weight:700;letter-spacing:2px;font-size:.86rem;align-self:flex-start}.flag-star{font-size:1.18rem;color:#e7bd6c}
.login-art-content{position:relative;z-index:2;padding-top:75px;max-width:600px}
.eyebrow{font-size:.81rem;letter-spacing:2.3px;font-weight:700}
.login-art h2{font-size:clamp(3rem,5vw,5.7rem);line-height:1.05;letter-spacing:-1.5px;margin:20px 0 28px}.login-art h2 em{font-style:normal;color:#b3e6fa}
.login-art-content>p{font-size:1.23rem;line-height:1.68;opacity:.87;max-width:550px}
.login-art-features{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}.login-art-features span{padding:10px 15px;border:1px solid rgba(255,255,255,.25);border-radius:8px;background:rgba(255,255,255,.075)}
.login-art-footer{font-size:.81rem;letter-spacing:1.8px;z-index:2;color:#c8eaff}
.login-deco{border:1px solid rgba(255,255,255,.16);position:absolute;border-radius:50%;right:-135px;bottom:-155px}.login-deco.one{height:670px;width:670px}.login-deco.two{height:500px;width:500px;right:-47px;bottom:-70px}.login-deco.three{height:320px;width:320px;right:45px;bottom:17px}
.login-form-wrap{display:grid;place-items:center;padding:48px 22px;background:linear-gradient(160deg,#fff,#f6fafd)}
.login-card{box-shadow:none;background:none;border:0;width:min(420px,100%);padding:12px 0;text-align:left}
.login-card .brand-mark{margin:0 0 22px}
.brand-mark{width:66px;height:66px;border-radius:17px;background:linear-gradient(155deg,#116fb0,#07508b);box-shadow:0 8px 25px rgba(8,80,143,.2);display:grid;place-items:center;color:#fff;font-weight:700;font-size:2.1rem}
.login-card h1{font-size:1.95rem;line-height:1.25;letter-spacing:-.2px;margin:10px 0 8px;color:#102f4a}
.login-card>p{font-size:1.08rem;margin:12px 0 30px}.login-card .stack{gap:18px}.login-submit{width:100%;height:50px;display:flex;align-items:center;justify-content:space-between;font-size:1.08rem;margin-top:4px}
.login-legal{text-align:center;margin-top:23px!important}.demo-note{background:#fffbf0;border:1px solid #f1e2bb;border-left:4px solid #d7a345;border-radius:10px;padding:13px 15px;margin:16px 0 0;font-size:.93rem;color:#5d4b2e}
.app-shell{grid-template-columns:260px minmax(0,1fr)}.sidebar{background:linear-gradient(190deg,#0b5b96,#053d6f);box-shadow:3px 0 18px rgba(8,42,71,.08);padding:25px 13px 15px}
.brand-row{padding:3px 8px 27px;border-color:rgba(255,255,255,.16)}.brand-row strong{font-size:1.01rem;letter-spacing:.3px}.brand-row span{display:block;margin-top:5px;font-size:.78rem}.small-mark{width:42px;height:42px;border-radius:12px;font-size:1.7rem;background:#fff;color:#0a65a0;flex-shrink:0}
.side-section-label{font-size:.71rem;color:#9dcce9;letter-spacing:1.6px;padding:25px 14px 8px;font-weight:700}.side-section-label.inner{padding:16px 11px 7px}
.nav-menu{margin-top:0;gap:4px}.nav-menu button{display:flex;align-items:center;min-height:45px;padding:11px 14px 11px 12px;font-size:1rem;border-radius:8px;font-weight:500;color:#d9edfb}
.nav-menu button span{margin:0}.nav-menu button .nav-icon{width:27px;font-size:1.35rem;line-height:1;color:#afdaf6;text-align:center;margin-right:10px}
.nav-menu button.active{background:#fff!important;color:#075b96!important;box-shadow:0 3px 14px rgba(5,41,81,.14);font-weight:700}.nav-menu button.active .nav-icon{color:#075b96}
.nav-menu button:hover:not(.active){background:rgba(255,255,255,.12)}.sidebar-footer{padding:17px 14px 10px;gap:6px;font-size:.91rem}.sidebar-bottom{font-size:.69rem;text-align:center;letter-spacing:2.4px;opacity:.4;margin:8px 0}
.topbar{height:99px;padding:14px 30px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid #e2edf4}
.topbar h2{font-size:1.68rem;letter-spacing:-.3px;color:#13354f;margin:2px 0}.topbar p{font-size:.88rem;margin:0;color:#718398}
.breadcrumb{font-size:.67rem;letter-spacing:1.15px;font-weight:700;color:#7c96a9}.breadcrumb span{color:#0f85bc;margin:0 7px}
.top-actions{font-size:.83rem;color:#6e8597;gap:17px}.device-status{display:inline-flex;align-items:center;gap:7px;background:#f1f7fb;border:1px solid #e2eff6;padding:7px 11px;border-radius:50px;color:#34576e}.online-dot{height:7px;width:7px;border-radius:50%;background:#db9d25}
.main{display:flex;flex-direction:column;min-height:100vh;min-width:0}.page-content{padding:28px 30px 32px;max-width:1550px;flex:1}.app-footer{color:#95a7b5;text-align:center;border-top:1px solid var(--line);font-size:.74rem;letter-spacing:1px;padding:16px}.app-footer span{margin-left:8px}
.hero{background:linear-gradient(115deg,#075388,#0a79b1);color:#fff;border-radius:17px;padding:30px 36px;display:flex;position:relative;overflow:hidden;min-height:246px;box-shadow:0 15px 25px rgba(6,78,134,.15);justify-content:space-between;gap:12px}
.hero::before{content:"";position:absolute;width:560px;height:560px;border:1px solid rgba(255,255,255,.13);border-radius:50%;right:-120px;top:-145px}.hero::after{content:"";position:absolute;width:380px;height:380px;border:1px solid rgba(255,255,255,.17);border-radius:50%;right:-26px;top:-60px}
.hero-copy{position:relative;z-index:2}.hero h2{font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1.19;margin:11px 0 10px;letter-spacing:-.35px}.hero h2 span{color:#d5f2ff}.hero p{opacity:.85;max-width:700px;font-size:1.02rem;margin:0 0 19px}.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.hero-ornament{position:relative;min-width:220px;display:grid;place-items:center;font-weight:700;letter-spacing:2px;text-align:center;z-index:1;opacity:.92}.hero-symbol{width:102px;height:102px;border-radius:50%;border:2px solid rgba(255,255,255,.55);display:grid;place-items:center;font-size:3.1rem;color:#d7eaf7;transform:rotate(-12deg)}.hero-ornament>span{font-size:.67rem;line-height:1.35;position:absolute;bottom:12px}.hero-ornament .ring{position:absolute;border:1px solid rgba(255,255,255,.15);border-radius:50%}.ring-one{width:205px;height:205px}.ring-two{width:160px;height:160px}
.note-info{background:#eaf3fa;border-left:3px solid #3a92c2;color:#385c76;font-size:.94rem;border-radius:6px;padding:11px 14px;margin:16px 0}.section-banner{background:#e9f3fb;border:1px solid #d9e9f4;padding:20px;border-radius:13px;margin:0 0 17px;display:flex;align-items:center;justify-content:space-between;gap:10px}.section-banner h3{font-size:1.4rem;margin:0;color:#124e7d}.section-banner p{margin:5px 0 0;color:#57778e}
.grid.cards{margin-top:17px;gap:14px}.card{border-radius:13px;border:1px solid #e5edf3;box-shadow:0 5px 14px rgba(31,74,109,.035);padding:20px}
.kpi{position:relative;overflow:hidden}.kpi:before{content:"";position:absolute;height:3px;width:58px;left:20px;top:0;background:#2283bd;border-radius:0 0 5px 5px}.kpi .label{font-size:.91rem;color:#6d8596}.kpi .value{font-size:2.2rem;letter-spacing:-1px;color:#11436f;margin:7px 0 3px}.kpi .hint{color:#8296a5;font-size:.85rem}
.section-head{margin-bottom:15px}.section-head h3{font-size:1.2rem;color:#173d58}.two-col{grid-template-columns:1.1fr .9fr;gap:15px}.mini-item{padding:12px 0;gap:11px}.mini-item small{line-height:1.5;display:block;margin-top:4px}.list-icon{display:grid;place-items:center;color:#1785bf;background:#e8f4fc;width:35px;height:35px;border-radius:9px;font-size:1.15rem;flex-shrink:0}.rank-box{width:29px;height:29px;border-radius:8px;background:#e6f3fd;display:grid;place-items:center;color:#0867a2;font-weight:700;flex-shrink:0}
.monthly-chart{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));height:168px;align-items:end;gap:10px;padding:10px 5px 0}.month{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:3px}.bar-track{height:118px;width:100%;max-width:38px;background:#edf5fa;border-radius:7px 7px 1px 1px;display:flex;align-items:flex-end;overflow:hidden}.bar-fill{background:linear-gradient(#55add3,#0a74ac);width:100%;border-radius:6px 6px 1px 1px}.month>b{height:17px;font-size:.78rem;color:#357399}.month>small{color:#637e91}.chart-caption{text-align:center;margin-top:12px;font-size:.85rem;color:#96a8b6}
.tag-soft{background:#eef6fb;border:1px solid #e0eef6;border-radius:6px;color:#2672a2;padding:4px 9px;font-size:.8rem}
.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.quick-grid button{background:#f8fbfe;text-align:left;border:1px solid #e5edf3;border-radius:10px;padding:14px;display:grid;gap:3px;color:#214762;cursor:pointer}.quick-grid button:hover{background:#edf6fd}.quick-grid span{color:#0b7caf;font-size:1.8rem}.quick-grid small{color:#8296a5}
.empty{background:#f9fcfe;border:1px dashed #c5dbea;padding:28px 15px;color:#6f8798}.empty p{margin:8px auto 13px;max-width:380px}.empty-icon{font-size:2.5rem;color:#87b9d8;margin-bottom:4px}
.table-wrap{border:1px solid #e1eaf1;box-shadow:0 2px 9px rgba(20,45,65,.02)}.table th{background:#ecf4fa;color:#24506c;text-transform:none;font-weight:700}.table th,.table td{padding:13px 14px}.table td .badge{margin:2px 1px}.badge{border-radius:5px;font-size:.85rem;padding:5px 8px}.table tr:nth-child(even) td{background:#fbfdfe}
.toolbar{gap:9px;margin-bottom:17px;align-items:center}.toolbar .grow{min-width:200px}.filters{margin-bottom:18px}.filters label{font-size:.9rem}
.modal{width:min(830px,calc(100vw - 26px));border-radius:18px;border:1px solid #e1eaf1;max-height:90dvh}#modalBody{padding:26px;max-height:90dvh}.modal-head{padding-bottom:13px;border-bottom:1px solid #e6ecf2;margin-bottom:20px}.modal-head h3{font-size:1.45rem;color:#103f67}.criteria h3{font-size:1.1rem;background:#eef6fb;padding:10px 12px;border-radius:8px;color:#135e8d}.criterion{border-color:#e5edf2}.criteria input{min-width:70px}
.soft-rule{border:0;border-top:1px solid var(--line);margin:22px 0}.backup-upload{background:#eef6fb;border:1px dashed #9bc3de;color:#075b96;padding:10px 15px;border-radius:9px;cursor:pointer;display:block;font-weight:700;text-align:center}.backup-upload input{display:none}
@media(max-width:1170px){.device-status{display:none}.hero-ornament{min-width:155px}.top-actions #todayText{display:none}}
@media(max-width:920px){.login-art{padding:32px}.login-art h2{font-size:3.35rem}.login-art-features{gap:7px}.login-art-features span{padding:7px 10px}.two-col{grid-template-columns:1fr}}
@media(max-width:800px){.login-view{grid-template-columns:1fr}.login-art{min-height:280px;padding:26px}.login-art-content{padding:12px 0}.login-art h2{font-size:2rem;margin:8px 0}.login-art-content>p,.login-art-features,.login-art-footer{display:none}.login-form-wrap{padding:18px 22px 40px}.login-card h1{font-size:1.6rem}.app-shell{grid-template-columns:minmax(0,1fr)}.sidebar{left:-280px;width:260px}.sidebar.open{left:0}.topbar{height:80px;padding:10px 16px}.breadcrumb{display:none}.topbar h2{font-size:1.3rem}.page-content{padding:15px}.hero{padding:20px;min-height:206px}.hero h2{font-size:1.75rem}.hero-ornament{display:none}.grid.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi{padding:16px}.kpi .value{font-size:1.75rem}.quick-grid{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:repeat(2,minmax(0,1fr))}.modal .grid.cards{grid-template-columns:repeat(2,1fr)!important}.app-footer span{display:block}}
@media(max-width:480px){.hero h2{font-size:1.5rem}.hero .eyebrow{font-size:.7rem}.hero-actions .btn{width:100%;text-align:center}.grid.cards{gap:9px}.kpi{padding:12px}.kpi .label{font-size:.81rem}.kpi .value{font-size:1.5rem}.monthly-chart{gap:5px}.month>small{font-size:.7rem}.filters,.form-grid{grid-template-columns:1fr}.section-banner{align-items:flex-start;flex-direction:column}.page-content{padding:10px}.table{min-width:650px}.modal .grid.cards{grid-template-columns:1fr!important}}
@media print{.sidebar,.topbar,.app-footer,.toolbar,.btn,.sidebar-footer,.note-info,.hero-actions{display:none!important}.app-shell{display:block}.page-content{padding:0}.card{box-shadow:none}.page-content .two-col{grid-template-columns:1fr 1fr}}

.demo-login-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}.demo-login-actions .btn{font-size:.88rem;flex:1 1 160px}.two-col .card{min-width:0}
/* Bản 3.0 · logo được thay bằng tệp chính chủ do người dùng cung cấp. */
:root{--blue:#087bb7;--navy:#123c62}
.brand-logo{display:block;width:116px;height:116px;object-fit:contain;margin:0 auto 12px;background:#fff;border-radius:18px;padding:5px;box-shadow:0 9px 25px rgba(13,74,121,.12)}
.brand-icon{height:51px;width:51px;border-radius:8px;object-fit:contain;background:#fff;padding:3px;flex-shrink:0}
.login-emblem{width:155px;height:155px;object-fit:contain;background:#fff;border-radius:22px;padding:7px;margin:0 0 21px;position:relative;box-shadow:0 10px 34px rgba(0,0,0,.13)}
.blue-text{color:#1473af}.password-center{grid-column:1/-1;min-height:100vh}.password-center .login-card{text-align:left}
.nav-menu button{display:flex;align-items:center;gap:8px}.nav-menu button span{margin:0!important;min-width:20px;font-size:1.1rem}
.nav-menu .side-section-label{margin-top:15px}.sidebar{background:linear-gradient(160deg,#075586,#0a80b7 92%)}
.sync-status{display:inline-flex;align-items:center;font-size:.85rem;background:#eef7f2;border:1px solid #d5ebdf;padding:7px 10px;border-radius:8px;color:#237751;white-space:nowrap}.sync-status.off{background:#fff3e3;border-color:#f3d9a4;color:#975f17}
.login-art .login-art-content{z-index:1}.login-art-content h2{line-height:1.05}
.app-footer{padding-bottom:22px}
.kpi-link{cursor:pointer}.btn.tiny{padding:7px 9px;font-size:.87rem}.btn.orange{background:#fff2dc;color:#8f6417}
.hero-logo{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:20px;width:155px;height:155px;box-shadow:0 9px 31px rgba(0,0,0,.12)}.hero-logo img{width:95%;height:95%;object-fit:contain}
.stacked{display:grid;gap:12px}.field-note{font-size:.85rem;color:#718699;font-weight:400;line-height:1.5}
.empty-card{padding:23px;background:#f7fbfd;border-radius:11px;border:1px dashed #bdd5e8;color:#536c7d}
.profile-table{width:100%}.profile-table td{padding:8px 0}.profile-table td:first-child{color:#60788a;width:160px}
.tag-row{display:flex;gap:7px;flex-wrap:wrap}.switcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.switcher input{min-height:auto;width:auto}.mini-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.filter-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}
.code-once{background:#102d43;border-radius:13px;color:#fff;padding:18px;margin:13px 0;font-size:1.18rem;word-break:break-all;font-weight:700;user-select:all}
.privacy-tip{background:#fff8e9;border:1px solid #f2dbaf;border-radius:10px;padding:12px 14px;color:#7c5a1e;font-size:.93rem}
.info-strip{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.data-insight{font-size:.88rem;color:#6b8598}.mini-label{font-size:.85rem;color:#68849b;text-transform:uppercase;letter-spacing:.5px}
.card h3{margin-top:0}.tight-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.full{grid-column:1/-1}
.action-row{display:flex;gap:8px;flex-wrap:wrap}.table tr:hover td{background:#f4faff}.form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}
@media(max-width:900px){.hero-logo{display:none}.filter-bar{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.mini-cards,.filter-bar,.tight-grid{grid-template-columns:1fr}.desktop-only{display:none}.login-emblem{width:86px;height:86px;margin-bottom:8px}.login-art{min-height:270px}.top-actions .btn{font-size:.86rem}.nav-menu{gap:3px}.app-footer span{font-size:.8rem}}
/* Mobile header: avoid squashing the title when the sync indicator is visible. */
@media(max-width:600px){
 .topbar{height:auto;min-height:72px;align-items:center;gap:9px;padding:10px 12px}
 .topbar-titles{flex:1;min-width:0}.topbar h2{font-size:1.25rem;line-height:1.15;white-space:normal}.topbar p{display:none}
 .top-actions{margin-left:0;flex-shrink:0;gap:6px}
 .sync-status{width:14px;height:14px;padding:0;font-size:0;color:transparent;background:#2b9976;border:0;border-radius:50%;overflow:hidden}
 .sync-status.off{background:#c18b35}
 .top-actions .btn{padding:8px 10px;font-size:1.1rem}
}

/* V5.2: themes and typography */
:root{--app-font:Arial, sans-serif;--theme-accent:#087bb7}
html,body,button,input,select,textarea,table{font-family:var(--app-font)!important}
.sidebar{background:linear-gradient(160deg,var(--theme-accent),#064d74 110%)}
.btn.primary{background:var(--theme-accent)}.btn.secondary{color:var(--theme-accent)}
#liveClock{font-variant-numeric:tabular-nums;font-size:.78rem;line-height:1.4;color:#eaf6ff;font-weight:600}
.nav-menu .hidden{display:none!important}
.flag-strip{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;z-index:4;pointer-events:none}
.flag-strip img{width:112px;height:72px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.22))}
.login-flags{position:absolute;left:22px;right:22px;top:15px}
.home-flags{position:absolute;top:12px;left:16px;right:16px}
.hero:has(.home-flags){padding-top:80px;min-height:265px}
.login-art-content{padding-top:120px}
.login-art h2{font-size:clamp(2.2rem,4.3vw,4.4rem);line-height:1.14}
.rubric-sheet-title{margin:22px 0 8px;font-size:1.08rem}
.rubric-table{max-height:55vh;overflow:auto}.rubric-table .table{min-width:650px}
.rubric-table th{position:sticky;top:0;z-index:2;white-space:nowrap}
.rubric-table td{min-width:160px;max-width:360px;vertical-align:top;white-space:pre-wrap;overflow-wrap:anywhere}
.rubric-table td:last-child{min-width:120px;max-width:145px}
.rubric-score{width:96px;min-width:76px}
[data-theme="minimal"]{--bg:#f8f9fb;--card:#fff;--text:#27313c;--line:#dce1e5;--navy:#233b4b;--radius:8px}
[data-theme="minimal"] .sidebar{background:#263a4c}
[data-theme="minimal"] .hero{background:linear-gradient(112deg,#415766,#5e798b)}
[data-theme="minimal"] .card{box-shadow:none;border-radius:8px}
[data-theme="minimal"] .login-art{background:linear-gradient(135deg,#344d5f,#687f91)}
[data-theme="minimal"] .section-banner{background:#f1f3f4;border-color:#dee4e8}
[data-theme="night"]{--bg:#101f30;--card:#203347;--text:#eef6ff;--muted:#b3c7dc;--line:#3a5266;--navy:#f1f7fc;--radius:18px}
[data-theme="night"] .sidebar{background:linear-gradient(160deg,#10192a,#234e68)}
[data-theme="night"] .main{background:var(--bg)}
[data-theme="night"] .card{background:#203347;color:#edf6ff;border-color:#35556e}
[data-theme="night"] .card h3,[data-theme="night"] .kpi .value,[data-theme="night"] .topbar h2{color:#eef7ff}
[data-theme="night"] .topbar{background:#1c3147;border-color:#35556e}
[data-theme="night"] .section-banner{background:#253e55;border-color:#35556e}
[data-theme="night"] .section-banner h3,[data-theme="night"] .section-banner p{color:#e3f1ff}
[data-theme="night"] .table th{background:#36516a;color:#fff}
[data-theme="night"] .table td{background:#203347;color:#fff;border-color:#456078}
[data-theme="night"] .note-info{background:#28485a;color:#eef7ff}
[data-theme="night"] .login-form-wrap{background:#162b42}
[data-theme="night"] .login-art{background:linear-gradient(145deg,#081d33,#194b62)}
[data-theme="night"] .app-footer{color:#c5d8e8}
@media(max-width:800px){.flag-strip img{width:78px;height:52px}.login-flags{left:12px;right:12px;top:7px}.login-art-content{padding-top:65px}.login-art{min-height:205px!important}.hero:has(.home-flags){padding-top:66px}.rubric-table{max-height:55vh}}

.doc-tabs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:16px}.doc-tabs .btn{flex:1 1 200px;text-align:center;white-space:normal}
/* V5.2 accessibility: keep labels and form controls readable on the dark theme. */
html[data-theme="night"] label,
html[data-theme="night"] .profile-table td:first-child,
html[data-theme="night"] .section-head h3,
html[data-theme="night"] .card small{color:#d9e8f6}
html[data-theme="night"] input:not([type="color"]),
html[data-theme="night"] select,
html[data-theme="night"] textarea{background:#14283b;color:#f2f9ff;border-color:#557187}
html[data-theme="night"] input::placeholder,
html[data-theme="night"] textarea::placeholder{color:#b9cddc}
html[data-theme="night"] option{background:#14283b;color:#f2f9ff}
html[data-theme="night"] .btn.ghost{background:#304a60;color:#f2f9ff;border-color:#537186}
html[data-theme="night"] .table td .badge{color:#19344e}


/* === PHIEN BAN 1.6.8 - giu giao dien, bo anh chim, can giua dang nhap === */
.brand-row{align-items:flex-start;padding-bottom:16px}
.brand-icon,.brand-logo,.login-emblem{background:transparent!important;border-radius:0!important;box-shadow:none!important;padding:0!important}
.brand-icon{width:49px;height:49px}
#liveClock{display:block;font-size:.72rem;line-height:1.5;color:#ddf4ff;margin-top:5px;letter-spacing:.1px;font-weight:600}
.sidebar-version{opacity:.8;font-size:.75rem}
.remember-choice{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;font-size:.9rem;cursor:pointer}
.remember-choice input{width:17px!important;height:17px;flex:0 0 17px;accent-color:#087bb7}
.notification-bell{position:relative;font-size:1.22rem;flex:0 0 auto}
.bell-count:not(:empty){position:absolute;top:0;right:0;display:grid;place-items:center;background:#c72a3e;border-radius:30px;padding:1px 5px;color:#fff;font-size:.6rem;min-width:16px;line-height:1.3}
.flag-strip img:last-child{background:#cf192d;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
/* Digital motion: nhieu lop nen nhe, khong lay chuyen dong lam anh huong viec nhap lieu */
.login-art::before{background:radial-gradient(circle at 70% 62%,rgba(122,211,255,.18),transparent 38%),repeating-linear-gradient(0deg,transparent 0,transparent 33px,rgba(213,245,255,.04) 34px,transparent 35px),repeating-linear-gradient(90deg,transparent 0,transparent 43px,rgba(213,245,255,.04) 44px,transparent 45px);background-size:100% 100%,540px 540px,540px 540px;animation:md-digital-drift 42s linear infinite}
.hero::before,.hero::after{animation:md-orbit 22s ease-in-out infinite alternate}
@keyframes md-digital-drift{from{background-position:0 0,0 0,0 0}to{background-position:0 0,54px 27px,-43px 28px}}
@keyframes md-orbit{from{transform:translate(0,0) rotate(0)}to{transform:translate(-30px,15px) rotate(7deg)}}
/* Khong hien thi anh chim toan giao dien; anh nen Trang chu van duoc giu lai. */
.login-art{isolation:isolate}
.login-art-content,.login-art-footer,.login-flags{position:relative;z-index:2}
.login-flags{position:absolute}
/* Full-width rubric review/editor. Wrap cells in place of horizontal scroll. */
.modal:has(.rubric-editor),.modal:has(.rubric-preview){width:97vw;max-width:none;max-height:96dvh}
.modal:has(.rubric-editor) #modalBody,.modal:has(.rubric-preview) #modalBody{padding:clamp(10px,1.5vw,22px);max-height:95dvh;overflow-y:auto}
.rubric-table{width:100%;overflow:visible;max-height:none}
.rubric-table .table{width:100%;min-width:0;table-layout:fixed}
.rubric-table th,.rubric-table td{min-width:0!important;max-width:none!important;overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap;line-height:1.3;padding:7px 5px;font-size:clamp(10px,.85vw,13px)}
.rubric-table th{position:static;white-space:normal}
.rubric-table td:last-child{width:94px;min-width:0!important;max-width:none!important}
.rubric-score{box-sizing:border-box;width:100%;min-width:0!important;padding:5px 3px}
.modal:has(.rubric-preview) .table-wrap{overflow:visible}
.modal:has(.rubric-preview) .table{width:100%;min-width:0;table-layout:fixed}
.modal:has(.rubric-preview) th,.modal:has(.rubric-preview) td{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;font-size:clamp(10px,.85vw,13px);padding:7px 5px}
@media(max-width:800px){.main::before{inset:0}.modal:has(.rubric-editor),.modal:has(.rubric-preview){width:98vw;margin:auto}.rubric-table th,.rubric-table td{padding:5px 3px;font-size:10px}.rubric-score{padding:4px 1px}}
@media(prefers-reduced-motion:reduce){.login-art::before,.hero::before,.hero::after{animation:none!important}}
#bellBtn{display:inline-flex!important;align-items:center;justify-content:center;padding:8px 10px;background:#f2f8fc;border:1px solid var(--line);border-radius:10px;min-width:38px;min-height:37px}
#bellBtn:hover{background:#e5f3fa}

/* === 1.6.8: Can doi noi dung 2 ben trang dang nhap === */
#loginView .login-art-content{
  width:100%; max-width:100%; margin:auto 0;
  padding-top:0; display:flex; flex-direction:column;
  align-items:center; text-align:center;
}
#loginView .login-emblem{display:block;margin:0 auto 23px;flex-shrink:0}
#loginView .login-art h2{
  width:100%; margin:0 auto; text-align:center;
  font-size:clamp(2.0rem,3.5vw,3.55rem);
  letter-spacing:-.6px; line-height:1.16;
}
#loginView .login-art-footer{text-align:center}
#loginView .login-card > h1,
#loginView .login-card > p.muted{text-align:center}
/* Cac nhan/du lieu bieu mau van can trai de de nhap. */
#loginView .login-card #loginForm label{text-align:left}
.password-input-wrap{position:relative; width:100%;}
.password-input-wrap input{display:block; width:100%; padding-right:54px;}
.password-visibility-toggle{
  position:absolute;top:50%;right:4px;transform:translateY(-50%);
  width:44px;height:44px;display:grid;place-items:center;
  border:0;background:transparent;color:#486a81;cursor:pointer;
  border-radius:9px;padding:0;
}
.password-visibility-toggle:hover{background:#eaf3fa;color:#126da6}
.password-visibility-toggle:focus-visible{outline:3px solid #54adea;outline-offset:1px}
@media(max-width:800px){
 #loginView .login-art-content{padding-top:52px}
 #loginView .login-art h2{font-size:clamp(1.75rem,4.9vw,2.6rem)}
 #loginView .login-emblem{margin-bottom:12px}
}
@media(max-width:600px){
 #loginView .login-art{padding:55px 18px 18px}
 #loginView .login-art h2{font-size:clamp(1.65rem,6.3vw,2.1rem)}
 #loginView .login-art-footer{font-size:.64rem;letter-spacing:.6px}
 #loginView .login-art-content{padding-top:22px}
}