/* TheMostHub Exam Archive — Ocean Blue (scoped) */
#tmh-ea{--page:        #F4F9FF;
  --card:        #FFFFFF;
  --row:         #F1F8FF;
  --row-hover:   #E4F1FF;

  --navy:        #0B3A72;
  --navy-deep:   #082B56;
  --blue:        #1B84C7;
  --blue-dark:   #1069AB;
  --cyan:        #19B2E8;
  --sky:         #E8F4FF;
  --sky-2:       #D4E9FB;

  --ink:         #0E2B4A;
  --ink-2:       #3D5A7A;
  --ink-3:       #6F87A3;

  --line:        #E1ECF8;
  --line-2:      #CFE1F3;

  --ok:          #0E9F6E;
  --ok-bg:       #E3F8F0;
  --warn:        #D97706;
  --warn-bg:     #FEF3E2;
  --danger:      #DC3545;
  --danger-bg:   #FDECEE;
  --todo:        #5B7391;
  --todo-bg:     #EEF3F9;

  --r-sm: 9px;
  --r:    14px;
  --r-lg: 20px;

  --shadow:      0 20px 50px rgba(11,58,114,.18);
  --shadow-card: 0 4px 22px rgba(13,60,110,.07);
  --shadow-btn:  0 3px 10px rgba(27,132,199,.32);
  --ease: cubic-bezier(.22,.9,.28,1);}
#tmh-ea,#tmh-ea *,#tmh-ea *::before,#tmh-ea *::after{box-sizing:border-box;}
#tmh-ea{margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:'IBM Plex Sans Thai','Prompt',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;}
#tmh-ea ::selection{background:#BFE2FA; color:var(--navy);}
#tmh-ea .wrap{max-width:1180px; margin:0 auto; padding:22px 0 70px;}
#tmh-ea .hero{background:linear-gradient(100deg,#19B2E8 0%,#1176C4 46%,#0B3A72 100%);
  border-radius:var(--r-lg);
  padding:26px 28px;
  box-shadow:0 12px 34px rgba(11,58,114,.22);
  margin-bottom:22px;}
#tmh-ea .hero-top{display:flex; align-items:center; gap:14px; margin-bottom:20px; flex-wrap:wrap;}
#tmh-ea .hero-logo{width:50px; height:50px; flex:0 0 50px; border-radius:14px;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3);
  display:grid; place-items:center; font-size:24px; color:#fff;}
#tmh-ea .hero-title{font-size:25px; font-weight:700; color:#fff; line-height:1.25; margin:0;}
#tmh-ea .hero-sub{font-size:12.5px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.72);}
#tmh-ea .hero-spacer{flex:1;}
#tmh-ea .hero-bar{display:flex; gap:12px; flex-wrap:wrap;}
#tmh-ea .search{position:relative; flex:1 1 320px;}
#tmh-ea .search input{width:100%; padding:14px 18px 14px 46px;
  border:none; border-radius:99px;
  background:#fff; color:var(--ink);
  font-family:inherit; font-size:15px; outline:none;
  box-shadow:0 3px 12px rgba(0,0,0,.12);}
#tmh-ea .search input::placeholder{color:#93A9C0;}
#tmh-ea .search input:focus{box-shadow:0 0 0 4px rgba(255,255,255,.28), 0 3px 12px rgba(0,0,0,.12);}
#tmh-ea .search .s-ico{position:absolute; left:18px; top:50%; transform:translateY(-50%);
  color:var(--blue); font-size:17px; pointer-events:none;}
#tmh-ea .hero-btn{display:inline-flex; align-items:center; gap:8px;
  padding:14px 24px; border-radius:99px; border:none;
  background:var(--navy-deep); color:#fff;
  font-family:inherit; font-size:15px; font-weight:600;
  cursor:pointer; transition:.22s var(--ease); white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.2);}
#tmh-ea .hero-btn:hover{background:#06203F; transform:translateY(-1px);}
#tmh-ea .hero-btn.ghost{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.34);}
#tmh-ea .hero-btn.ghost:hover{background:rgba(255,255,255,.26);}
#tmh-ea .hero-stats{display:flex; gap:22px; flex-wrap:wrap; margin-top:16px; padding-left:4px;}
#tmh-ea .hero-stats .hs{color:rgba(255,255,255,.88); font-size:13.5px;}
#tmh-ea .hero-stats .hs b{font-size:20px; font-weight:700; color:#fff; margin-right:6px;}
#tmh-ea .layout{display:flex; gap:22px; align-items:flex-start;}
#tmh-ea .col-main{flex:1; min-width:0;}
#tmh-ea .sidenav{width:264px; flex:0 0 264px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); padding:18px 14px;
  position:sticky; top:18px; max-height:calc(100vh - 36px); overflow-y:auto;}
#tmh-ea .sidenav h3{font-size:12.5px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 12px; padding:0 8px; font-weight:600;}
#tmh-ea .sn-item{display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--r-sm); cursor:pointer;
  color:var(--ink); font-size:15px; font-weight:500;
  border:1px solid transparent; transition:.18s var(--ease); user-select:none;}
#tmh-ea .sn-item:hover{background:var(--row);}
#tmh-ea .sn-item.active{background:linear-gradient(135deg,#2FA3E0,#1069AB);
  color:#fff; box-shadow:var(--shadow-btn);}
#tmh-ea .sn-item .sn-ico{width:28px; height:28px; flex:0 0 28px; border-radius:8px;
  display:grid; place-items:center; font-size:14px;}
#tmh-ea .sn-item .sn-txt{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#tmh-ea .sn-item .sn-num{font-size:12px; padding:1px 8px; border-radius:99px;
  background:var(--sky); color:var(--blue-dark);}
#tmh-ea .sn-item.active .sn-num{background:rgba(255,255,255,.26); color:#fff;}
#tmh-ea .sn-item .sn-caret{font-size:11px; color:var(--ink-3); transition:transform .2s; padding:0 2px;}
#tmh-ea .sn-item.active .sn-caret{color:rgba(255,255,255,.8);}
#tmh-ea .sn-item.open .sn-caret{transform:rotate(90deg);}
#tmh-ea .sn-levels{margin:2px 0 6px 20px; padding-left:12px; border-left:2px solid var(--line-2);}
#tmh-ea .sn-level{display:flex; align-items:center; gap:8px;
  padding:7px 11px; border-radius:8px; cursor:pointer;
  font-size:14px; color:var(--ink-2); transition:.16s; user-select:none;}
#tmh-ea .sn-level:hover{background:var(--row); color:var(--blue-dark);}
#tmh-ea .sn-level.active{background:var(--sky); color:var(--blue-dark); font-weight:600;}
#tmh-ea .sn-level .sn-txt{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#tmh-ea .sn-level .sn-num{font-size:11.5px; color:var(--ink-3);}
#tmh-ea .sn-empty{font-size:13px; color:var(--ink-3); padding:6px 11px;}
#tmh-ea .sn-divider{height:1px; background:var(--line); margin:12px 4px;}
#tmh-ea .yearbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  margin-bottom:22px; padding:12px 16px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-card);}
#tmh-ea .yearbar .lbl{font-size:13.5px; font-weight:600; color:var(--ink-3); margin-right:4px;}
#tmh-ea .ypill{padding:6px 16px; border-radius:99px; cursor:pointer;
  font-size:14.5px; font-weight:500; color:var(--ink-2);
  background:var(--row); border:1px solid var(--line); transition:.18s;
  user-select:none;}
#tmh-ea .ypill:hover{border-color:var(--blue); color:var(--blue-dark);}
#tmh-ea .ypill.active{background:var(--navy); border-color:var(--navy); color:#fff; font-weight:600;}
#tmh-ea .section{background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  padding:24px 26px 20px; margin-bottom:22px;}
#tmh-ea .section-head{display:flex; align-items:center; gap:14px;
  padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:18px;}
#tmh-ea .section-ico{width:46px; height:46px; flex:0 0 46px; border-radius:50%;
  display:grid; place-items:center; font-size:20px;
  background:var(--sky); color:var(--blue);}
#tmh-ea .section-title{font-size:21px; font-weight:700; color:var(--ink); margin:0; line-height:1.3;}
#tmh-ea .section-count{margin-left:auto; font-size:13.5px; color:var(--ink-3);
  background:var(--row); padding:5px 14px; border-radius:99px; white-space:nowrap;}
#tmh-ea .band{display:flex; align-items:center; gap:10px;
  background:var(--navy); color:#fff;
  padding:12px 18px; border-radius:var(--r-sm) var(--r-sm) 0 0;
  font-size:16px; font-weight:600;}
#tmh-ea .band .b-count{margin-left:auto; font-size:13px; font-weight:500;
  background:rgba(255,255,255,.18); padding:3px 12px; border-radius:99px;}
#tmh-ea .yearblock{margin-bottom:16px;}
#tmh-ea .yearblock:last-child{margin-bottom:0;}
#tmh-ea .yearblock .rows{border-radius:0 0 var(--r-sm) var(--r-sm); border-top:none;}
#tmh-ea .batch-row{display:grid; grid-template-columns:1fr 1.4fr 36px; gap:9px; margin-bottom:9px;}
#tmh-ea .batch-row input{width:100%; padding:10px 13px;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--ink); font-family:inherit; font-size:14.5px; outline:none; transition:.2s;}
#tmh-ea .batch-row input:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(27,132,199,.14);}
#tmh-ea .batch-row input::placeholder{color:#9FB3C8;}
#tmh-ea .batch-row .rm{border:1px solid var(--line-2); background:#fff; border-radius:var(--r-sm);
  color:var(--ink-3); cursor:pointer; font-size:15px; transition:.2s;}
#tmh-ea .batch-row .rm:hover{background:var(--danger-bg); border-color:#F3B9BE; color:var(--danger);}
@media (max-width:760px){#tmh-ea .batch-row{grid-template-columns:1fr 36px;}
 }
#tmh-ea .rows{border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;}
#tmh-ea .row{display:flex; align-items:center; gap:14px;
  padding:13px 18px; background:#fff;
  border-bottom:1px solid var(--line);
  transition:background .18s;}
#tmh-ea .row:nth-child(odd){background:var(--row);}
#tmh-ea .row:last-child{border-bottom:none;}
#tmh-ea .row:hover{background:var(--row-hover);}
#tmh-ea .row.dragging{opacity:.4;}
#tmh-ea .row.drop-target{box-shadow:inset 0 3px 0 var(--blue);}
#tmh-ea .row-main{flex:1; min-width:0;}
#tmh-ea .row-title{font-size:15.5px; font-weight:500; color:var(--ink); margin:0;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
#tmh-ea .row-title .star{color:#F0A500; font-size:14px;}
#tmh-ea .row-note{font-size:13.5px; color:var(--ink-3); margin:2px 0 0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#tmh-ea .row-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
#tmh-ea .pill{font-size:12.5px; font-weight:600; padding:3px 12px; border-radius:99px;
  white-space:nowrap; border:1px solid transparent;}
#tmh-ea .pill-todo{background:var(--todo-bg); color:var(--todo); border-color:#DDE6F0;}
#tmh-ea .pill-doing{background:var(--warn-bg); color:var(--warn); border-color:#F7DFB8;}
#tmh-ea .pill-done{background:var(--ok-bg);   color:var(--ok);   border-color:#BFE9D8;}
#tmh-ea .pill.click{cursor:pointer;}
#tmh-ea .pill.click:hover{filter:brightness(.96);}
#tmh-ea .due{font-size:12.5px; color:var(--ink-3); white-space:nowrap;}
#tmh-ea .due.soon{color:var(--warn); font-weight:600;}
#tmh-ea .due.over{color:var(--danger); font-weight:600;}
#tmh-ea .open-btn{display:inline-flex; align-items:center; gap:7px;
  padding:8px 18px; border-radius:var(--r-sm); text-decoration:none;
  background:linear-gradient(135deg,#4FB9EE,#2288D0);
  color:#fff; font-size:14px; font-weight:600;
  box-shadow:var(--shadow-btn); transition:.2s var(--ease); white-space:nowrap;}
#tmh-ea .open-btn:hover{filter:brightness(1.07); transform:translateY(-1px);}
#tmh-ea .row-actions{display:flex; gap:6px;}
#tmh-ea .icon-btn{width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center;
  background:#fff; border:1px solid var(--line-2); border-radius:8px;
  color:var(--ink-2); cursor:pointer; font-size:14px; transition:.2s;}
#tmh-ea .icon-btn:hover{background:var(--sky); border-color:var(--blue); color:var(--blue-dark);}
#tmh-ea .icon-btn.del:hover{background:var(--danger-bg); border-color:#F3B9BE; color:var(--danger);}
#tmh-ea .icon-btn.star.on{color:#F0A500; border-color:#F5D58C; background:#FFF8E6;}
#tmh-ea .drag-handle{cursor:grab;}
#tmh-ea .drag-handle:active{cursor:grabbing;}
#tmh-ea .empty{text-align:center; padding:60px 20px; color:var(--ink-3);
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-card);}
#tmh-ea .empty .e-mark{font-size:46px; color:var(--sky-2); margin-bottom:6px;}
#tmh-ea .empty h3{font-size:19px; color:var(--ink); margin:0 0 6px; font-weight:600;}
#tmh-ea .empty p{margin:0; font-size:14.5px;}
#tmh-ea .adminbar{display:none; align-items:center; gap:12px; flex-wrap:wrap;
  background:linear-gradient(100deg,#0B3A72,#12508F);
  color:#fff; border-radius:var(--r); padding:13px 20px; margin-bottom:18px;
  box-shadow:0 6px 18px rgba(11,58,114,.2);}
#tmh-ea .adminbar.show{display:flex;}
#tmh-ea .adminbar .a-badge{display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3);
  padding:5px 14px; border-radius:99px; font-size:13.5px; font-weight:600;}
#tmh-ea .adminbar .a-spacer{flex:1;}
#tmh-ea .abtn{display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.14); color:#fff;
  font-family:inherit; font-size:14px; font-weight:500; cursor:pointer; transition:.2s;}
#tmh-ea .abtn:hover{background:rgba(255,255,255,.26);}
#tmh-ea .abtn.primary{background:#fff; color:var(--navy); border-color:#fff; font-weight:600;}
#tmh-ea .abtn.primary:hover{background:#EAF4FF;}
#tmh-ea .overlay{position:fixed; inset:0; z-index:50;
  background:rgba(11,42,74,.5); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .22s var(--ease);}
#tmh-ea .overlay.show{opacity:1; pointer-events:auto;}
#tmh-ea .modal{width:100%; max-width:540px; max-height:88vh; overflow-y:auto;
  background:#fff; border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:0;
  transform:translateY(14px) scale(.98); transition:transform .28s var(--ease);}
#tmh-ea .overlay.show .modal{transform:none;}
#tmh-ea .modal-head{background:linear-gradient(100deg,#19B2E8,#1069AB 60%,#0B3A72);
  color:#fff; padding:20px 26px; border-radius:var(--r-lg) var(--r-lg) 0 0;}
#tmh-ea .modal-head h2{font-size:21px; font-weight:700; margin:0;}
#tmh-ea .modal-head .m-sub{font-size:12.5px; letter-spacing:1.4px; text-transform:uppercase; opacity:.8;}
#tmh-ea .modal-body{padding:24px 26px 22px;}
#tmh-ea .field{margin-bottom:16px;}
#tmh-ea .field label{display:block; font-size:13.5px; font-weight:600; color:var(--ink-2); margin-bottom:7px;}
#tmh-ea .field input[type=text],#tmh-ea .field input[type=password],#tmh-ea .field input[type=date],#tmh-ea .field select,#tmh-ea .field textarea{width:100%; padding:11px 14px;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--ink); font-family:inherit; font-size:15px; outline:none;
  transition:.2s var(--ease);}
#tmh-ea .field input::placeholder,#tmh-ea .field textarea::placeholder{color:#9FB3C8;}
#tmh-ea .field textarea{resize:vertical; min-height:80px; line-height:1.6;}
#tmh-ea .field input:focus,#tmh-ea .field select:focus,#tmh-ea .field textarea:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(27,132,199,.14);}
#tmh-ea .field-row{display:grid; grid-template-columns:1fr 1fr; gap:13px;}
#tmh-ea .field .hint{font-size:12.5px; color:var(--ink-3); margin-top:6px;}
#tmh-ea .seg{display:flex; gap:8px;}
#tmh-ea .seg button{flex:1; padding:10px; border-radius:var(--r-sm); cursor:pointer;
  background:#fff; border:1px solid var(--line-2);
  color:var(--ink-2); font-family:inherit; font-size:14px; transition:.2s var(--ease);}
#tmh-ea .seg button:hover{border-color:var(--blue);}
#tmh-ea .seg button.on{background:linear-gradient(135deg,#2FA3E0,#1069AB); border-color:transparent;
  color:#fff; font-weight:600; box-shadow:var(--shadow-btn);}
#tmh-ea .swatches{display:flex; gap:9px; flex-wrap:wrap;}
#tmh-ea .swatch{width:34px; height:34px; border-radius:10px; cursor:pointer;
  border:2px solid transparent; transition:.2s;}
#tmh-ea .swatch:hover{transform:scale(1.1);}
#tmh-ea .swatch.on{border-color:var(--ink); box-shadow:0 0 0 3px rgba(14,43,74,.12);}
#tmh-ea .icon-picker{display:flex; gap:8px; flex-wrap:wrap;}
#tmh-ea .icon-opt{width:38px; height:38px; display:grid; place-items:center; cursor:pointer;
  border-radius:10px; background:#fff; border:1px solid var(--line-2);
  color:var(--ink-2); font-size:16px; transition:.2s;}
#tmh-ea .icon-opt:hover{border-color:var(--blue);}
#tmh-ea .icon-opt.on{border-color:var(--blue); color:#fff; background:var(--blue);}
#tmh-ea .btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 20px; border-radius:var(--r-sm); border:1px solid var(--line-2);
  background:#fff; color:var(--ink-2);
  font-family:inherit; font-size:15px; font-weight:500; cursor:pointer;
  transition:.2s var(--ease);}
#tmh-ea .btn:hover{background:var(--row); border-color:var(--blue); color:var(--blue-dark);}
#tmh-ea .btn-primary{background:linear-gradient(135deg,#2FA3E0,#1069AB); color:#fff;
  border-color:transparent; font-weight:600; box-shadow:var(--shadow-btn);}
#tmh-ea .btn-primary:hover{filter:brightness(1.07); color:#fff;}
#tmh-ea .btn-danger{background:var(--danger); color:#fff; border-color:transparent; font-weight:600;}
#tmh-ea .btn-danger:hover{background:#C42B3A; color:#fff;}
#tmh-ea .modal-foot{display:flex; gap:10px; margin-top:22px;}
#tmh-ea .modal-foot .btn{flex:1;}
#tmh-ea .cat-row{display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:var(--r-sm);
  background:var(--row); border:1px solid var(--line); margin-bottom:9px;}
#tmh-ea .cat-row .cico{width:36px; height:36px; flex:0 0 36px; border-radius:10px;
  display:grid; place-items:center; font-size:16px; color:#fff;}
#tmh-ea .cat-row .cname{flex:1; font-size:15px; font-weight:500;}
#tmh-ea .cat-row .ccount{font-size:12.5px; color:var(--ink-3);}
#tmh-ea .toasts{position:fixed; right:22px; bottom:22px; z-index:80; display:flex; flex-direction:column; gap:10px;}
#tmh-ea .toast{display:flex; align-items:center; gap:11px;
  padding:13px 20px; border-radius:var(--r-sm);
  background:#fff; border:1px solid var(--line-2);
  box-shadow:0 10px 30px rgba(11,58,114,.18);
  font-size:14.5px; color:var(--ink);
  animation:slideIn .3s var(--ease);
  border-left:4px solid var(--blue);}
#tmh-ea .toast.err{border-left-color:var(--danger);}
#tmh-ea .toast .t-ico{color:var(--blue); font-size:16px;}
#tmh-ea .toast.err .t-ico{color:var(--danger);}
@keyframes slideIn{ from{ transform:translateX(40px); opacity:0; } to{ transform:none; opacity:1; } }
#tmh-ea .loader{position:fixed; inset:0; z-index:90; background:var(--page);
  display:grid; place-items:center; transition:opacity .35s;}
#tmh-ea .loader.hide{opacity:0; pointer-events:none;}
#tmh-ea .loader .ring{width:46px; height:46px; border-radius:50%;
  border:3px solid var(--sky-2); border-top-color:var(--blue);
  animation:spin .85s linear infinite;}
@keyframes spin{ to{ transform:rotate(360deg); } }
#tmh-ea .lv-panel{margin:-4px 0 10px; padding:12px 14px;
  background:var(--row); border:1px solid var(--line); border-radius:var(--r-sm);}
#tmh-ea .lv-chips{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:10px;}
#tmh-ea .lv-chip{display:inline-flex; align-items:center; gap:7px;
  padding:5px 8px 5px 13px; border-radius:99px;
  background:#fff; border:1px solid var(--line-2);
  font-size:13.5px; color:var(--ink);}
#tmh-ea .lv-chip button{border:none; background:none; cursor:pointer; padding:0 2px;
  color:var(--ink-3); font-size:13px; line-height:1; transition:.18s;}
#tmh-ea .lv-chip button:hover{color:var(--danger);}
#tmh-ea .lv-add{display:flex; gap:8px;}
#tmh-ea .lv-add input{flex:1; padding:8px 12px; font-size:14px; font-family:inherit;
  border:1px solid var(--line-2); border-radius:var(--r-sm); outline:none; background:#fff;}
#tmh-ea .lv-add input:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(27,132,199,.14);}
#tmh-ea .lv-add button{padding:8px 16px; border-radius:var(--r-sm); border:none; cursor:pointer;
  background:linear-gradient(135deg,#2FA3E0,#1069AB); color:#fff;
  font-family:inherit; font-size:14px; font-weight:600;}
#tmh-ea .navtoggle{display:none;}
@media (max-width: 900px){#tmh-ea .layout{display:block;}
#tmh-ea .sidenav{width:auto; position:static; max-height:none; margin-bottom:18px; display:none;}
#tmh-ea .sidenav.open{display:block;}
#tmh-ea .navtoggle{display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:12px; margin-bottom:14px;
    background:#fff; border:1px solid var(--line-2); border-radius:var(--r);
    color:var(--ink); font-family:inherit; font-size:15px; font-weight:600; cursor:pointer;
    box-shadow:var(--shadow-card);}

}
@media (max-width: 760px){#tmh-ea .wrap{padding:14px 13px 60px;}
#tmh-ea .hero{padding:20px 18px; border-radius:var(--r);}
#tmh-ea .hero-title{font-size:20px;}
#tmh-ea .section{padding:18px 15px 15px; border-radius:var(--r);}
#tmh-ea .section-title{font-size:18px;}
#tmh-ea .section-count{display:none;}
#tmh-ea .row{flex-wrap:wrap; gap:9px; padding:13px 14px;}
#tmh-ea .row-main{flex:1 1 100%;}
#tmh-ea .open-btn{flex:1; justify-content:center;}
#tmh-ea .field-row{grid-template-columns:1fr;}
#tmh-ea .toasts{right:12px; left:12px; bottom:12px;}

}
#tmh-ea button,#tmh-ea input,#tmh-ea select,#tmh-ea textarea{font-family:inherit; letter-spacing:normal; text-transform:none; margin:0; line-height:1.4;}
#tmh-ea button{min-height:0;}
#tmh-ea h1,#tmh-ea h2,#tmh-ea h3{font-family:inherit; letter-spacing:normal; text-transform:none;}
#tmh-ea a{text-decoration:none; box-shadow:none;}
#tmh-ea a.hero-btn{color:#fff;}
#tmh-ea a.open-btn,#tmh-ea a.open-btn:hover,#tmh-ea a.open-btn:visited{color:#fff;}
#tmh-ea .opt{font-weight:400; color:var(--ink-3);}
#tmh-ea .modal-head.danger{background:linear-gradient(100deg,#E35D6A,#DC3545 70%,#B02A37);}
#tmh-ea .loader{position:absolute; border-radius:var(--r-lg); min-height:240px;}
#tmh-ea .wrap{position:relative;}
#tmh-ea .ytag{display:inline-flex; align-items:center; font-size:12.5px; font-weight:600;
  padding:2px 10px; border-radius:99px; background:var(--sky); color:var(--blue-dark);
  white-space:nowrap;}
#tmh-ea .ext{display:inline-flex; font-size:11px; font-weight:700; letter-spacing:.5px;
  padding:1px 7px; border-radius:6px; background:#FDECEE; color:#C42B3A; text-transform:uppercase;}
#tmh-ea .ext.doc{background:#E6F0FF; color:#1D5FC2;}
#tmh-ea .ext.xls{background:#E3F8F0; color:#0E7F57;}
#tmh-ea .ext.zip{background:#FEF3E2; color:#B45F06;}
#tmh-ea .ext.img{background:#F1EAFE; color:#6A43C9;}
#tmh-ea .file-input{width:100%; padding:9px 12px; border:1px dashed var(--line-2); border-radius:var(--r-sm);
  background:var(--row); font-size:14px; color:var(--ink-2);}
#tmh-ea .dropzone{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:26px 16px; border:2px dashed var(--line-2); border-radius:var(--r);
  background:var(--row); cursor:pointer; text-align:center; transition:.2s var(--ease);}
#tmh-ea .dropzone:hover,#tmh-ea .dropzone.over{border-color:var(--blue); background:var(--sky);}
#tmh-ea .dropzone .dz-ico{font-size:30px; color:var(--blue); line-height:1;}
#tmh-ea .dropzone .dz-t{font-size:15px; font-weight:600; color:var(--ink);}
#tmh-ea .dropzone .dz-s{font-size:12.5px; color:var(--ink-3);}
#tmh-ea .batch-head{display:grid; grid-template-columns:1fr 96px 36px; gap:9px;
  font-size:12.5px; color:var(--ink-3); padding:0 4px 6px;}
#tmh-ea .batch-row{grid-template-columns:1fr 96px 36px; align-items:start;}
#tmh-ea .batch-row .b-file{font-size:12px; color:var(--ink-3); margin-top:3px; padding-left:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#tmh-ea .batch-row .b-stat{font-size:12px; font-weight:600; margin-top:3px; padding-left:2px;}
#tmh-ea .batch-row .b-stat.ok{color:var(--ok);}
#tmh-ea .batch-row .b-stat.err{color:var(--danger);}
#tmh-ea .batch-row .b-stat.run{color:var(--warn);}
#tmh-ea .batch-row .rm{height:42px;}
#tmh-ea .b-empty{font-size:13.5px; color:var(--ink-3); padding:10px 4px;}
@media (max-width:760px){#tmh-ea .batch-row,#tmh-ea .batch-head{grid-template-columns:1fr 80px 36px;}

}

#tmh-ea{position:relative;border-radius:20px;}
#tmh-ea a.abtn,#tmh-ea a.abtn:hover,#tmh-ea a.abtn:visited{color:#fff;text-decoration:none;}
/* ขยายเต็มความกว้างแม้ธีมจำกัดความกว้างเนื้อหา */
#tmh-ea{--ea-w:min(1180px, calc(100vw - 32px));width:var(--ea-w);max-width:none;left:50%;margin-left:calc(var(--ea-w) / -2);margin-right:0;}
#tmh-ea{left:auto;margin-left:calc(50% - var(--ea-w) / 2) !important;margin-right:0 !important;}
#tmh-ea .pwwarn{display:none;margin:-6px 0 18px;padding:11px 16px;border-radius:var(--r-sm);background:var(--warn-bg);color:var(--warn);border:1px solid #F7DFB8;font-size:14px;font-weight:600;}
#tmh-ea .pwwarn.show{display:block;}
#tmh-ea .store-note{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:9px 14px;border-radius:var(--r-sm);background:var(--ok-bg);color:var(--ok);border:1px solid #BFE9D8;font-size:13.5px;font-weight:600;}
#tmh-ea .store-note.local{background:var(--danger-bg);color:var(--danger);border-color:#F3B9BE;}
#tmh-ea .ext.drive{background:#E8F0FE;color:#1A73E8;}
#tmh-ea .row-title a.t-link{color:inherit;text-decoration:none;}
#tmh-ea .row-title a.t-link:hover{color:var(--blue-dark);text-decoration:underline;}

/* ══════════ ACSP skin — เข้าชุดกับธีมห้องเรียน (เลือดหมู / กรมท่า) ══════════ */
#tmh-ea{
  --navy:#0B3570; --navy-deep:#062452; --blue:#1596D6; --blue-dark:#0F6FB0; --cyan:#1CACEA;
  --maroon:#841A1C; --maroon-bg:#F6E7E7; --sky:#E8F1FB; --sky-2:#D5E4F5; --row:#F6F9FC; --row-hover:#EDF3FA;
  --line:#E3E8EF; --line-2:#D5DEE9;
  --shadow-card:0 10px 30px rgba(40,0,0,.16);
  --shadow-btn:0 4px 12px rgba(21,150,214,.3);
  background:transparent; font-family:'IBM Plex Sans Thai','Sarabun',sans-serif;
}
#tmh-ea h1,#tmh-ea h2,#tmh-ea .hero-title,#tmh-ea .section-title,#tmh-ea .modal-head h2,#tmh-ea .band{font-family:'Kanit','Prompt',sans-serif;}
#tmh-ea .loader{background:#fff;}
#tmh-ea .hero,#tmh-ea .section{position:relative;overflow:hidden;}
#tmh-ea .hero::before,#tmh-ea .section::before{
  content:'';position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,#0B3873 0%,#1675B2 50%,#1EAFED 100%);
}
#tmh-ea .hero{background:#fff;border-radius:16px;box-shadow:var(--shadow-card);padding:28px 26px 22px;}
#tmh-ea .hero-logo{background:var(--sky);border-color:var(--sky-2);color:var(--navy);}
#tmh-ea .hero-title{color:var(--navy);font-weight:600;}
#tmh-ea .hero-sub{color:var(--ink-3);}
#tmh-ea .hero-btn.ghost,#tmh-ea a.hero-btn.ghost{background:#fff;border:1.5px solid var(--navy);color:var(--navy);box-shadow:none;}
#tmh-ea .hero-btn.ghost:hover{background:var(--navy);color:#fff;}
#tmh-ea .search input{background:var(--row);border:1px solid var(--line);box-shadow:none;}
#tmh-ea .search input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,150,214,.15);}
#tmh-ea .hero-stats .hs{color:var(--ink-2);}
#tmh-ea .hero-stats .hs b{color:var(--maroon);}
#tmh-ea .sidenav,#tmh-ea .yearbar,#tmh-ea .section,#tmh-ea .empty{border:0;border-radius:16px;box-shadow:var(--shadow-card);}
#tmh-ea .sn-item.active{background:var(--maroon);box-shadow:0 3px 10px rgba(132,26,28,.3);}
#tmh-ea .sn-level.active{background:var(--maroon-bg);color:var(--maroon);}
#tmh-ea .ypill.active{background:var(--maroon);border-color:var(--maroon);}
#tmh-ea .ypill:hover{border-color:var(--maroon);color:var(--maroon);}
#tmh-ea .band{background:var(--navy);font-weight:600;}
#tmh-ea .ytag{background:var(--sky);color:var(--navy);}
#tmh-ea .open-btn{background:linear-gradient(135deg,#1CACEA,#1596D6);border-radius:10px;}
#tmh-ea .btn-primary,#tmh-ea .seg button.on,#tmh-ea .lv-add button{background:linear-gradient(135deg,#1CACEA,#1596D6);}
#tmh-ea .modal-head{background:linear-gradient(100deg,#0B3570,#1675B2 70%,#1CACEA);}
#tmh-ea .adminbar{background:linear-gradient(100deg,#062452,#0B3570);border-radius:16px;}
#tmh-ea .navtoggle{border:0;border-radius:14px;box-shadow:var(--shadow-card);}
#tmh-ea .toast{border-left-color:var(--navy);}

/* ภายในธีม ACSP: ใช้ความกว้างตามธีม และใช้หัวเรื่องสีเลือดหมูของธีมแทน */
body.acsp-theme #tmh-ea{width:auto;left:auto;margin-left:0 !important;margin-right:0 !important;}
body.acsp-theme #tmh-ea .wrap{padding:0;}
body.acsp-theme #tmh-ea .hero-top > .hero-logo,
body.acsp-theme #tmh-ea .hero-top > div:nth-child(2){display:none;}
body.acsp-theme #tmh-ea .hero-top{margin-bottom:14px;}
@media (min-width:761px){
  body.acsp-theme #tmh-ea .hero-top{position:absolute;right:26px;top:30px;margin:0;z-index:1;}
  body.acsp-theme #tmh-ea .hero-bar{padding-right:236px;}
}

/* ══════════ การ์ดข้อสอบรายปี (แบบการ์ดบทเรียน) ══════════ */
#tmh-ea .yearblock .band{border-radius:12px;margin-bottom:14px;}
#tmh-ea .yearblock{margin-bottom:22px;}
#tmh-ea .xgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;}
#tmh-ea .xcard{
  position:relative;display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;
  padding:20px 16px 14px;border:1px solid var(--line);box-shadow:0 4px 16px rgba(11,53,112,.08);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
#tmh-ea .xcard::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#0B3873 0%,#1675B2 50%,#1EAFED 100%);}
#tmh-ea .xcard:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(11,53,112,.16);}
#tmh-ea .xcard.pinned{border-color:#F5D58C;}
#tmh-ea .xcard.dragging{opacity:.4;}
#tmh-ea .xcard.drop-target{box-shadow:0 0 0 3px var(--blue);}
#tmh-ea .x-head{display:flex;gap:11px;align-items:flex-start;}
#tmh-ea .x-num{
  width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-family:'Kanit','Prompt',sans-serif;font-weight:600;font-size:15px;
  box-shadow:0 3px 8px rgba(11,53,112,.3);
}
#tmh-ea .x-titles{min-width:0;flex:1;}
#tmh-ea .x-title{margin:0;font-family:'Kanit','Prompt',sans-serif;font-weight:600;font-size:16.5px;line-height:1.35;word-break:break-word;}
#tmh-ea .x-title a{color:var(--navy);text-decoration:none;}
#tmh-ea .x-title a:hover{color:var(--maroon);}
#tmh-ea .x-title .star{color:#F0A500;}
#tmh-ea .x-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:3px;font-size:12.5px;color:var(--ink-3);}
#tmh-ea .x-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;}
#tmh-ea .x-year{display:inline-flex;padding:2px 11px;border-radius:99px;background:var(--maroon-bg);color:var(--maroon);font-size:12.5px;font-weight:700;}
#tmh-ea .x-note{margin:10px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.55;}
#tmh-ea .x-spacer{flex:1;min-height:14px;}
#tmh-ea .x-actions{display:flex;gap:8px;flex-wrap:wrap;}
#tmh-ea .x-btn{
  display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:10px;font-size:14px;font-weight:600;
  text-decoration:none;background:#EEF2F7;color:var(--ink-3);border:1px solid var(--line);white-space:nowrap;
  transition:filter .15s,transform .15s;
}
#tmh-ea .x-btn:hover{filter:brightness(.97);color:var(--navy);}
#tmh-ea .x-btn.primary,#tmh-ea .x-btn.primary:visited{background:linear-gradient(135deg,#1CACEA,#1596D6);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(21,150,214,.3);}
#tmh-ea .x-btn.primary:hover{filter:brightness(1.06);transform:translateY(-1px);color:#fff;}
#tmh-ea .x-admin{display:flex;gap:6px;justify-content:flex-end;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);}
#tmh-ea .x-admin .icon-btn{width:30px;height:30px;flex-basis:30px;font-size:13px;}

/* เต็มหน้าจอ */
#tmh-ea{--ea-w:calc(100vw - 32px);}
@media (min-width:1400px){ #tmh-ea .xgrid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));} }
@media (max-width:760px){ #tmh-ea .xgrid{grid-template-columns:1fr;} #tmh-ea .section{padding:16px 12px;} }
#tmh-ea .wrap{max-width:none;}