/* V3.30: giao diện thống nhất; không thay đổi hợp đồng API, tính điểm hoặc đọc nét. */
:root{
  --bg:#f5f9fd;--nav:#fafdff;--primary:#207bd6;--blue:#eaf5ff;
  --ink:#19334f;--muted:#7e92a7;--line:#e2ebf5;--card:#fff;
  --warn:#b9802a;--danger:#cb5668;--green:#119473;--teal:#0da8b7;
  --shadow:0 14px 40px rgba(42,78,114,.065);
}
body{background:radial-gradient(850px 460px at 100% -6%,#e3f7fb,transparent 70%),#f5f9fd;font-family:Inter,"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}
body,button,input,select,textarea{letter-spacing:0}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #64bfdc;outline-offset:2px}
::selection{background:#b9ecf4;color:#16466d}

/* Trang chào dùng lại đúng tinh thần bản V6 đã chốt. */
.loginwrap.landing-home{position:relative;min-height:100svh;display:block;overflow:hidden;padding:0;background:radial-gradient(50% 35% at 87% 23%,rgba(178,238,253,.75),transparent),radial-gradient(42% 38% at 5% 5%,rgba(205,246,241,.78),transparent),linear-gradient(127deg,#f9fffe,#f6faff 72%,#eef5ff)}
.landing-home:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;background-image:radial-gradient(#b6cce7 1px,transparent 1px);background-size:25px 25px;mask-image:linear-gradient(to bottom,transparent,#000 12%,transparent 78%)}
.landing-wrap{width:min(1270px,100%);margin:auto;padding:0 38px;min-height:100svh;position:relative;display:grid;grid-template-columns:48% 52%;align-items:center;gap:10px}
.landing-copy{position:relative;z-index:2}.landing-eyebrow{display:inline-flex;align-items:center;gap:9px;border:1px solid #b7e8ef;background:#eafafa;color:#09758b;border-radius:30px;padding:10px 15px;font-size:12px;font-weight:850}
.landing-eyebrow:before{content:"";width:8px;height:8px;flex:none;background:#0bbac4;box-shadow:0 0 0 4px #c9f4f5;border-radius:50%}
.landing-copy h1{font-size:clamp(47px,5vw,76px);line-height:1.1;letter-spacing:-3px;font-weight:950;margin:23px 0 17px}.landing-copy h1 em{font-style:normal;color:#0b95bf;background:linear-gradient(100deg,#1587db,#06b4bc);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.landing-slogan{color:#586a84;font-size:17px;line-height:1.5;font-weight:570;margin:0 0 27px}.landing-slogan .slogan-line{display:block;white-space:nowrap}.landing-slogan .slogan-line:nth-child(2){color:#297cac;font-weight:700}
.landing-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.landing-actions .btn{border-radius:15px;padding:16px 24px;font-size:14px}.landing-actions .btn.primary{box-shadow:0 13px 28px #168dd63a}
.landing-art{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-width:0}.landing-art:before{content:"";position:absolute;inset:9% 0 15%;border-radius:50%;background:radial-gradient(circle,#d6faffb8 0%,#e3eeff9b 49%,transparent 72%);z-index:-1;filter:blur(9px)}
.landing-art img{display:block;width:113%;max-width:none;height:auto;object-fit:contain;transform:translateX(-2%);filter:drop-shadow(0 25px 30px #4987be20)}
.landing-overlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:#111e36ab;backdrop-filter:blur(8px);padding:20px}
.landing-overlay.open{display:flex}.landing-overlay>.login{margin:0;position:relative;width:min(460px,100%);max-height:calc(100svh - 40px);overflow:auto;padding:29px;border-radius:25px;border:1px solid #e2ecf5;box-shadow:0 30px 85px #111d3352}
.landing-overlay .login h1{font-size:24px;letter-spacing:-.7px;margin:6px 0}.landing-overlay .login>p{font-size:12px;margin:0 0 17px}.landing-overlay .login>.row:first-of-type{justify-content:center;text-align:center;gap:10px}
.landing-overlay .login .logoicon{width:45px;height:45px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#247bda,#13abb9);border-radius:14px}
.landing-overlay .login .login-title{font-size:13px;font-weight:900;letter-spacing:.1px}.landing-overlay .login .rolebar{margin:17px 0 20px;background:#f0f5fa}
.landing-overlay .login .btn.primary.full{min-height:48px}.landing-close{position:absolute;top:12px;right:12px;border:0;border-radius:10px;background:#f0f6fa;color:#63819b;height:33px;width:33px;font-size:22px;display:grid;place-items:center;line-height:1}
.landing-how{width:min(430px,100%);background:#fff;border-radius:24px;padding:29px;box-shadow:0 30px 80px #122c4459;position:relative}.landing-how h2{margin:0 0 18px;font-size:24px;letter-spacing:-.5px}.how-kicker{font-size:11px;color:#1596b2;font-weight:900;letter-spacing:1.5px;margin-bottom:7px}
.how-step{display:flex;gap:12px;align-items:flex-start;border:1px solid #e6edf5;background:#fbfdff;border-radius:13px;padding:13px;margin:9px 0}.how-index{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#e6f5ff;color:#237eb8;font-size:13px;font-weight:900;flex:none}.how-step:nth-of-type(3) .how-index{background:#e5f8f0;color:#0c9a78}.how-step:nth-of-type(4) .how-index{background:#f1ebfb;color:#8866b6}.how-step b{font-size:13px}.how-step p{margin:4px 0 0;color:#8aa1b1;font-size:11px;line-height:1.5}.landing-note{font-size:11px;color:#92a8b9;text-align:center;margin:18px 0 0}

/* Bố cục dùng chung của giáo viên, ban cán sự và học sinh. */
.shell{background:transparent}.sidebar{background:linear-gradient(180deg,#fff 0%,#f9fcff 100%);color:var(--ink);width:254px;min-width:254px;padding:23px 13px 18px;border-right:1px solid #e0eaf3;box-shadow:4px 0 24px #234e7b05;gap:17px;position:sticky;top:0;height:100dvh;overflow-y:auto}
.logo{gap:11px;padding:4px 9px 17px;margin:0;border-bottom:1px solid #edf2f7;font-size:15px;line-height:1.2;font-weight:900;color:#1a3f65;letter-spacing:-.25px}
.logo strong{display:block}.logo small{display:block;font-size:9px;letter-spacing:1.2px;font-weight:900;text-transform:uppercase;color:#7ba0b5;margin-top:5px}
.logoicon{height:44px;width:44px;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,#207bd8,#13b6bc);color:#fff;box-shadow:0 10px 18px #1682bd30;border-radius:14px;padding:0}
.nav{gap:4px}.nav button,.nav-group>summary{color:#698198;background:transparent;border:0;border-radius:12px;padding:12px 13px;font-weight:740;font-size:12px;min-height:42px;display:flex;align-items:center;gap:11px;transition:background .15s,color .15s}
.nav button .ui-icon,.nav-group>summary .ui-icon{width:19px;height:19px;color:#6f94ad;stroke-width:1.9}
.nav button:not(.active):hover,.nav-group>summary:hover{background:#edf7fc;color:#176a9e;transform:none}.nav button.active{color:white;background:linear-gradient(105deg,#237bda,#16a1b4);border:0;box-shadow:0 9px 18px #237ccc2e}
.nav button.active .ui-icon{color:white}.nav-group{border:0}.nav-group>summary{font-weight:830;list-style:none}.nav-group[open]>summary{color:#1b79aa;background:#f0f9fd}.nav-group:has(.active)>summary{color:#1b79aa;background:#edf7fd}.nav-group>summary::after{content:"⌄";color:#8ba4b6;font-size:15px}.nav-group[open]>summary::after{content:"⌃"}.nav-children{padding:4px 0 7px 28px;gap:2px}.nav-children button{min-height:36px;font-size:11px;padding:9px 11px;border-radius:9px}.nav-children button.active{background:#e3f3ff;color:#1b70a7;box-shadow:none}.nav-children button.active:hover{color:#16649a}
.sidefoot{color:#7891a5;border-top:1px solid #e9f1f6;font-size:11px;padding:16px 7px 0}.sidefoot .foot-actions .btn{background:#f5faff;color:#477696;border-color:#dae9f3;font-size:10px}.sidefoot .foot-actions .btn:hover{background:#e9f5ff}
.top{height:72px;position:sticky;top:0;z-index:30;padding:13px 32px;background:#ffffffed;backdrop-filter:blur(14px);border-bottom:1px solid #e2ebf5;box-shadow:none}.top h2{font-size:16px;font-weight:850;color:#2d5579}.top select{width:205px;border:1px solid #dbe8f3;border-radius:10px;font-size:12px;font-weight:750;background:#f9fcff;color:#3c6285}
.top .btn.small{font-size:11px;border-radius:10px;color:#416b8d}.top .navback{border-radius:10px;width:37px;height:37px}
.content{max-width:1450px;margin:auto;padding:30px 33px 60px;overflow-wrap:break-word}.heading{font-size:30px;font-weight:900;letter-spacing:-.9px;line-height:1.2;color:#1a3554;gap:10px;margin-bottom:12px}.heading .ui-icon{color:#168eaf}
.sub{font-size:12px;line-height:1.65;color:#849aad;margin:-5px 0 20px;max-width:900px}.card{border-radius:20px;padding:22px;border:1px solid #e3edf5;box-shadow:var(--shadow);background:white;margin-bottom:18px}.card h3{font-size:16px;letter-spacing:-.25px;color:#234565}.card h3 .ui-icon{color:#1590ad}
.grid{gap:15px}.two{gap:18px}.stat{min-height:120px;display:flex;flex-direction:column;justify-content:space-between;gap:15px}.stat .val{font-size:31px;font-weight:900;letter-spacing:-1px;color:#1c517b}.stat .tiny{color:#899eb1;font-size:11px;font-weight:800}.tag{padding:6px 10px;border-radius:999px;font-size:11px;font-weight:850;background:#eaf3fc;color:#416d91}.tag.good{background:#e2f8ee;color:#119374}.tag.wait{background:#fff2dc;color:#b07a28}.tag.bad{background:#fff0f1;color:#bd4d60}
.btn{min-height:39px;border:1px solid #d8e7f2;background:white;color:#43708f;border-radius:12px;padding:10px 15px;font-size:12px;font-weight:850;box-shadow:none}.btn.primary{color:white;background:linear-gradient(110deg,#2278d9,#13a8b7);box-shadow:0 9px 18px #168ed02c;border-color:transparent}.btn.primary:not(:disabled):hover{background:linear-gradient(110deg,#176dc5,#0b98a9);box-shadow:0 11px 22px #1589c43f}.btn.small{min-height:34px;padding:7px 11px;font-size:11px}.btn.danger{color:#c45a6a;border-color:#f0d8df;background:#fff9fa}.btn.warn{color:#b0792b;background:#fff9ed}
.field{margin-bottom:15px;gap:7px}.field label{font-size:11px;font-weight:850;color:#4d708d}.field input,.field select,.field textarea,select,input[type=date],input[type=search]{border:1px solid #d8e7f2;background:#fafcff;border-radius:11px;padding:11px 12px;color:#244d70;min-height:44px;font-size:12px}.field input:focus,.field textarea:focus,.field select:focus{background:#fff;border-color:#54a8d8;outline:0;box-shadow:0 0 0 3px #65b7e128}
.tablewrap{border:1px solid #e3ecf3;border-radius:12px;overflow:auto}.table{font-size:12px}.table th{background:#f3f8fc;color:#587891;font-size:11px;padding:12px;font-weight:870}.table td{padding:11px 12px;border-bottom-color:#e9f0f7}.table tr:hover td{background:#f9fcff}
.notice{background:#f0f8ff;color:#426b86;border-color:#d7e8f4;border-radius:13px;font-size:12px}.rank{gap:11px;padding:13px 0}.rank span{font-size:12px}.rank b{color:#284c6e}.choice{background:#fbfdff;border-color:#e0edf5}.choice:nth-child(2){background:#f9fdfc;border-color:#dbefe9}.choice h3{font-size:16px}.choice p{font-size:12px}
.modal{border-radius:22px;padding:24px;background:white;box-shadow:0 25px 75px #122e5052}.overlay{backdrop-filter:blur(4px);background:#152a427d}
.toast{border-radius:13px;background:#1c4261;font-size:12px;font-weight:760;padding:14px 18px;box-shadow:0 13px 33px #183c5d42}.operation-status{top:max(13px,env(safe-area-inset-top));border-radius:14px;background:#1c4261;box-shadow:0 13px 32px #15355248}.operation-status.done{background:#0c906c}.operation-status.failed{background:#b94b60}
.week-pick{background:#fff;border-color:#e1edf5;border-radius:15px;box-shadow:0 8px 25px #23628a0c}.week-pick label{font-size:12px;font-weight:850;color:#668098}.week-pick select{font-size:12px}
.day-rollup{background:linear-gradient(120deg,#f0fbfc,#fff 62%);border-color:#cbeaf0}.day-rollup h3{color:#1c668c}.day-rollup-numbers>div{background:#fff;border-color:#ddebf3;border-radius:13px}.day-rollup-numbers b{font-size:27px}
.book-filter-grid{gap:10px}.book-filter-grid label{font-size:11px;color:#698398}.book-filter-grid select{background:#fafcff;border-color:#dce9f3;font-size:12px}.book-overview{gap:7px}.book-overview .tag{font-size:11px;padding:8px 11px}
.review-block{border-color:#e2edf5;border-radius:14px;box-shadow:none}.review-block>summary{background:#fbfdff;color:#345f80;font-size:12px;line-height:1.5}.review-fold{border-radius:18px}.review-fold>summary{font-size:14px;font-weight:900;padding:18px 20px;background:#fff}.review-fold[open]>summary{background:#f5faff}.review-fold>.review-body{padding:15px 20px 21px}.book-review-summary{gap:10px}.book-review-summary b{font-size:12px}.book-review-summary .book-review-date{font-size:11px}.book-review-list>details[open]{border-color:#b6dbea}
.review-alert{background:#fff7e9;border:1px solid #f1ddbd;color:#936b31;border-radius:13px}.review-success{background:#e9faf2;border-color:#baead7;color:#127c60;border-radius:13px}
.review-alert-prominent{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:0 0 17px;padding:14px 17px;box-shadow:0 9px 20px #ad8a4220}
.review-alert-prominent b{font-size:13px}.review-alert-prominent span{font-size:11px;color:#ae8d54}.review-alert-prominent .btn{margin-left:auto;border-color:#ecd6ad;color:#916827;background:#fffefb}
.entry-behaviors{gap:8px}.entry-behavior{font-size:12px}.entry-totals{background:#edf7ff;border-radius:10px;padding:10px}.conduct-tiles>div{border-radius:13px;background:#f9fcff}.conduct-tiles b{font-size:25px}

/* Thao tác ban cán sự: rõ phần chọn ngày/sổ, ảnh scan rộng và nút lưu nổi bật. */
.role-officer .content-upload>.two{grid-template-columns:minmax(300px,.97fr) minmax(0,1.03fr);align-items:start;gap:20px}
.content-upload .scan-card{background:linear-gradient(180deg,#fafdff,#fff 47%);border:1px solid #dbeaf4}.content-upload .scan-card>.field{margin-bottom:16px}
.content-upload .scan-actions .btn{min-height:50px;font-size:12px;border-radius:12px}.content-upload .scan-actions .btn:first-child{box-shadow:0 9px 19px #168ed024}
.content-upload #scanPanel{background:linear-gradient(150deg,#f0fbfd,#f8fbff);border-color:#bde6ea;border-radius:14px;padding:14px}
.content-upload #scanPanel>.mini:first-child{color:#267a9a}.content-upload #scanPanel .picpreview{max-height:380px;border-radius:12px;border-color:#c7dfea;background:#dce8ef}
.content-upload #saveBookButton{min-height:50px;margin-top:7px;border-radius:13px;font-size:13px;letter-spacing:.1px}.content-upload #bookPageHint,.content-upload #bookTemplateHint{font-size:11px;line-height:1.5}
.content-upload .review-block>summary{padding:13px}.content-upload .scan-card+div{min-width:0}
.content-drafts .card{border-radius:17px}.content-drafts>.card:last-child{border-color:#cfe5f2}
.ai-result-stats{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:17px}.ai-result-stats .card{min-height:113px;margin:0}
.ai-result-stats .card:nth-child(1){background:#fff}.ai-result-stats .card:nth-child(2){background:linear-gradient(155deg,#fff,#f2fdf8);border-color:#d8efe5}.ai-result-stats .card:nth-child(3){background:linear-gradient(155deg,#fff,#fff7f8);border-color:#f1e4e7}
.ai-result-stats .stat .val.score-green{color:#0e9e79}.ai-result-stats .stat .val.score-red{color:#cb5c70}
.content-books .book-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.content-books .review-block>summary:hover{background:#eff8fe}.content-books .review-fold>summary{color:#2b6586}.content-books .review-fold[open]>summary{border-bottom:1px solid #e9f1f6}
.content-mine .day-rollup,.content-home .day-rollup{margin-bottom:18px}
.role-student .content .stat .val{color:#13759b}
.class-hub-tabs{background:#edf5fc;border-color:#dce9f4}.class-hub-tab{color:#618099;border-radius:11px;font-size:12px}.class-hub-tab.selected{color:#176d9e;border-color:#cde3f1}.teacher-desk{font-size:11px}

@media(max-width:1100px){
 .content{padding:25px 22px 45px}.sidebar{width:226px;min-width:226px}.logo{font-size:14px}
 .content-upload>.two{grid-template-columns:1fr 1fr}
}
@media(max-width:850px){
 .landing-wrap{grid-template-columns:1fr;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:25px 22px;gap:10px}
 .landing-eyebrow{margin:auto}.landing-copy h1{font-size:clamp(40px,7.4vw,61px);margin:17px 0 10px}
 .landing-slogan{font-size:15px;margin-bottom:20px}.landing-actions{justify-content:center}.landing-art{width:min(100%,530px)}.landing-art img{width:100%;transform:none;max-height:39svh}
 .sidebar{display:none}.top{height:62px;padding:11px 13px;gap:7px}.top select{width:145px;max-width:37vw}
 .content{padding:22px 14px calc(106px + env(safe-area-inset-bottom))}.heading{font-size:24px;letter-spacing:-.6px}.sub{font-size:12px}.card{border-radius:17px;padding:17px;margin-bottom:14px}.card h3{font-size:15px}
 .stat{min-height:106px;padding:14px}.stat .val{font-size:27px}.grid{gap:10px}.two{gap:13px;grid-template-columns:1fr}
 .role-officer .content-upload>.two{grid-template-columns:1fr}
 .ai-result-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
 .mobilebar{background:#ffffffed;backdrop-filter:blur(12px);border-top:1px solid #dbe8f3;box-shadow:0 -8px 29px #193d5914;padding:8px 8px max(8px,env(safe-area-inset-bottom));gap:5px;overflow-x:hidden;justify-content:space-around}
 .mobilebar button{min-width:0;flex:1;background:transparent;border:0;box-shadow:none;border-radius:11px;padding:8px 2px;color:#7d92a5;font-size:10px;font-weight:780}
 .mobilebar button .ui-icon{width:19px;height:19px}.mobilebar button.active{background:#e7f5ff;color:#1874b3;box-shadow:none;border:0}.back-fab{z-index:18;background:linear-gradient(135deg,#fff,#eaf8fb);border-color:#c3dfe9;box-shadow:0 6px 19px #174e711e;color:#1d769b}
 .top-password{display:inline-flex}.teacher-desk{font-size:10px}
 .book-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:600px){
 .landing-wrap{padding:13px 16px;gap:0}.landing-copy h1{font-size:clamp(37px,10.4vw,48px);line-height:1.05;letter-spacing:-1.7px;margin:14px 0 12px}
 .landing-eyebrow{font-size:9px;padding:8px 11px}.landing-slogan{font-size:13px;line-height:1.5;margin-bottom:15px}.landing-actions{gap:8px}
 .landing-actions .btn{font-size:12px;padding:12px 14px;border-radius:12px}.landing-art{width:100%;margin-top:5px}.landing-art img{max-height:36svh}
 .landing-overlay>.login{padding:25px 20px;border-radius:21px}.landing-how{padding:25px 20px}.landing-overlay .login .login-title{font-size:12px}
 .top{justify-content:flex-end}.content{padding:19px 12px calc(108px + env(safe-area-inset-bottom))}.heading{font-size:21px}.sub{font-size:11px}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card{padding:14px}.stat .val{font-size:25px}.stat .tiny{font-size:10px}
 .ai-result-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.ai-result-stats .card{padding:11px 9px;min-height:105px}.ai-result-stats .stat .val{font-size:22px}
 .book-filter-grid{grid-template-columns:1fr!important}
 .review-fold>summary{font-size:13px;padding:14px}.review-fold>.review-body{padding:12px}
 .rank{flex-wrap:wrap}.rank>.actions{width:100%;justify-content:flex-start}
 .content-upload .scan-actions .btn{padding:11px 6px}.content-upload #saveBookButton{font-size:12px}
 .day-rollup-numbers{gap:6px}.day-rollup-numbers>div{padding:9px 7px}.day-rollup-numbers b{font-size:20px}
}
@media(max-width:370px){
 .landing-slogan{font-size:12px}.landing-copy h1{font-size:36px}
 .top select{max-width:41vw}.mobilebar button{font-size:9px}.mobilebar button .ui-icon{width:18px;height:18px}
 .field input,.field select{font-size:11px}.table{font-size:11px}
}
@media print{
 .landing-home{display:none!important}.sidebar,.top,.mobilebar,.back-fab{display:none!important}
 .content{padding:0}.card{box-shadow:none;border:1px solid #ddd}
}