/*
  Vỏ TABLET của Question bank — đi cùng tablet.js, chỉ có hiệu lực khi device.js gắn `device-tablet` lên <html>.
  Mọi rule bắt đầu bằng `html.device-tablet` (đủ nặng để thắng các media query sẵn có của app.css). Ngang/dọc khác nhau
  bằng `@media (orientation:…)` — xoay máy không đổi vỏ, chỉ đổi cách xếp.
  App cao đúng một màn hình (100dvh): danh sách và tờ đề tự cuộn bên trong, thanh trên đứng yên.
  Lớp chồng (z-index): scrim 47 · bảng thả xuống 48 · drawer danh sách 49 · panel Slide Over 50 · thanh viết 58 ·
  hộp thoại của app 60 · thẻ hướng dẫn 75+. Thanh trên KHÔNG có z-index (không tạo stacking context) để menu nằm trong
  nó vẫn so được lớp với scrim.
*/
html.device-tablet{--tb-top-h:58px; --tb-list-w:290px;}
html.device-tablet body{display:block;}
html.device-tablet .app{
  max-width:none; margin:0; padding:0; gap:0; height:100dvh; min-height:0; overflow:hidden;
}
html.device-tablet select.field,
html.device-tablet .text-input{font-size:16px;}

/* ---------- Thanh trên: logo · Filters · môn · Tools/Papers/My study · menu ---------- */
html.device-tablet .topbar{
  flex:0 0 auto; flex-wrap:nowrap; justify-content:flex-start; gap:10px;
  height:var(--tb-top-h); padding:0 8px 0 14px; background:var(--surface); border-bottom:1px solid var(--line);
}
html.device-tablet .topbar-left{flex-wrap:nowrap; flex-shrink:0; gap:16px;}
html.device-tablet .wordmark .logo-img{height:36px;}
html.device-tablet .stats-banner{display:none;}
@media (orientation:landscape) and (min-width:1200px){
  html.device-tablet .stats-banner{display:flex;}
  html.device-tablet .stat-num{font-size:1.2rem;}
}
html.device-tablet .tb-filters-btn{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0; min-height:40px; padding:0 14px;
  border:1px solid var(--line-strong); border-radius:999px; background:var(--surface);
  color:var(--ink); font-size:.9rem; font-weight:600; cursor:pointer;
}
html.device-tablet .tb-filters-btn[aria-expanded="true"]{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);}
html.device-tablet .tb-count{
  min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--accent); color:#fff;
  font-size:.72rem; display:grid; place-items:center;
}
html.device-tablet .tb-count[hidden]{display:none;}
html.device-tablet .tb-subject{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left;
  padding:0; border:none; background:none; color:var(--ink-soft); font-size:.88rem; cursor:pointer;
}
html.device-tablet .tb-dock-slot{flex-shrink:0; display:flex;}
html.device-tablet .tb-signin{
  display:none; align-items:center; flex-shrink:0; min-height:38px; padding:0 16px; border-radius:999px;
  background:var(--accent); color:#fff; font-size:.88rem; font-weight:600; text-decoration:none;
}
html.device-tablet body.is-guest .tb-signin{display:inline-flex;}
.tb-icon-btn{
  width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; padding:0;
  border:none; background:none; border-radius:10px; color:var(--ink-soft); cursor:pointer;
}
.tb-icon-btn[aria-expanded="true"]{background:var(--surface-2); color:var(--ink);}

/* Nút Tools / Papers / My study: nằm trong thanh trên (tablet.js dời `#sideDockLaunchers` vào), hàng ngang thay vì
   cột nổi góc phải dưới. Panel mở / đang viết vẫn hiện — ở thanh trên chúng không che gì, và là chỗ chuyển / đóng panel. */
html.device-tablet .side-dock-launchers{
  position:static; flex-direction:row; align-items:center; gap:6px;
}
html.device-tablet body.has-side-app .side-dock-launchers,
html.device-tablet body.ink-on .side-dock-launchers{display:flex;}
html.device-tablet .side-dock-launchers .calcguide-launcher{
  min-height:40px; padding:0 13px 0 11px; box-shadow:none; font-size:.86rem;
}
html.device-tablet .side-dock-launchers .calcguide-launcher[aria-expanded="true"]{
  border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);
}
@media (orientation:portrait){
  html.device-tablet .side-dock-launchers .calcguide-launcher{padding:0 11px;}
  html.device-tablet .side-dock-launchers .calcguide-launcher > span:not(.exam-count){display:none;}
}
/* Chồng nút nổi không còn ở góc khung đề → bỏ khoảng chừa 330px ở đáy tờ đề. */
html.device-tablet body:has(.side-dock-launchers):not(.has-side-app) .viewer-body{padding-bottom:46px;}

/* ---------- Scrim + bảng thả xuống (menu, bộ lọc) ---------- */
.tb-scrim{display:none;}
html.device-tablet body.tb-filters-open .tb-scrim,
html.device-tablet body.tb-menu-open .tb-scrim,
html.device-tablet body.tb-list-open .tb-scrim{
  display:block; position:fixed; left:0; right:0; bottom:0; top:var(--tb-top-h); z-index:47;
  background:rgba(27,35,32,.22);
}

/* Menu = chính `.topbar .meta` (guide.js / ink.js tìm nó bằng selector này). */
html.device-tablet .topbar .meta{
  position:fixed; top:calc(var(--tb-top-h) + 6px); right:8px; z-index:48;
  display:none; flex-direction:column; align-items:stretch; gap:0; width:300px;
  max-height:calc(100dvh - var(--tb-top-h) - 20px); overflow-y:auto;
  padding:4px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); font-size:.95rem; color:var(--ink);
}
html.device-tablet body.tb-menu-open .topbar .meta{display:flex;}
html.device-tablet .topbar .meta > .gd-help-link,
html.device-tablet .topbar .meta > .logout-link,
html.device-tablet .topbar .meta > .sw-link,
html.device-tablet .topbar .meta > #adminLink,
html.device-tablet .topbar .meta > .account-menu > .who{
  display:flex; align-items:center; width:100%; min-height:46px; padding:0; margin:0;
  border:none; border-bottom:1px solid var(--line); background:none; text-align:left;
  font-size:.95rem; color:var(--ink); text-decoration:none;
}
html.device-tablet .topbar .meta > .account-menu > .who::before{content:"Account: "; color:var(--ink-faint); margin-right:4px;}
html.device-tablet .topbar .meta > .tier-badge{align-self:flex-start; margin:10px 0 4px;}
html.device-tablet .topbar .meta > [hidden],
html.device-tablet .topbar .meta > [style*="display: none"],
html.device-tablet .topbar .meta > [style*="display:none"]{display:none !important;}
html.device-tablet .topbar .meta > .tb-desktop-view{color:var(--ink-soft); border-bottom:none;}
html.device-tablet .account-panel{
  position:static; width:auto; box-shadow:none; border:none; border-radius:0; padding:4px 0 12px;
  border-bottom:1px solid var(--line);
}

/* Bộ lọc = chính `.filterbar`, thả xuống dưới thanh trên. KHÔNG cuộn trong khung: popover môn / topic tuyệt đối bên
   trong nó phải tràn ra ngoài được. */
html.device-tablet .filterbar{
  position:fixed; top:calc(var(--tb-top-h) + 6px); left:8px; z-index:48;
  width:min(780px, calc(100vw - 16px)); display:none; padding:12px 14px 12px;
}
html.device-tablet body.tb-filters-open .filterbar{display:flex;}
html.device-tablet .filter-row{gap:10px 8px;}
html.device-tablet select.field,
html.device-tablet .subject-btn,
html.device-tablet .topic-btn{min-height:40px; font-size:16px;}
html.device-tablet .more-filters-btn{display:none;}
html.device-tablet .filter-more{display:flex;}
html.device-tablet .chips{padding-right:190px; min-height:34px; align-items:center;}
html.device-tablet .clear-btn{right:96px; bottom:12px; min-height:36px;}
html.device-tablet .tb-done-btn{position:absolute; right:14px; bottom:12px; min-height:36px; padding:0 20px;}
html.device-tablet .subject-item,
html.device-tablet .topic-item,
html.device-tablet .topic-group-head{padding-top:9px; padding-bottom:9px;}

/* ---------- Khung làm việc: cao hết phần còn lại, tự cuộn bên trong ---------- */
html.device-tablet .workspace{
  flex:1 1 auto; min-height:0; display:grid; grid-template-columns:var(--tb-list-w) minmax(0, 1fr);
  grid-template-rows:minmax(0, 1fr); gap:10px; padding:10px; align-items:stretch;
}
html.device-tablet .qlist{height:auto; max-height:none; min-height:0;}
html.device-tablet .viewer{min-height:0;}
html.device-tablet .viewer-body{padding:24px 28px 46px;}
html.device-tablet .qitem-main{padding:10px 56px 10px 12px;}
html.device-tablet .qitem .code{font-size:.78rem; margin-bottom:3px;}
html.device-tablet .qitem .qtags .badge{font-size:.62rem; padding:1px 5px;}
html.device-tablet .bk-btn{top:50%; right:4px; width:40px; height:40px; transform:translateY(-50%);}
html.device-tablet .bk-btn svg{width:16px; height:16px;}
html.device-tablet .ex-btn{top:50%; right:42px; width:40px; height:40px; transform:translateY(-50%);}
html.device-tablet .ex-btn svg{width:16px; height:16px;}
html.device-tablet .qitem-main{padding-right:86px;}
html.device-tablet .qlist-pager{padding:8px 10px;}
html.device-tablet .qlist-pager button{min-height:36px; padding:0 12px; font-size:.8rem;}
html.device-tablet .viewer-head{flex-wrap:nowrap; padding:8px 12px; gap:10px;}
html.device-tablet .viewer-title{flex:1; min-width:0;}
html.device-tablet .viewer-title .code,
html.device-tablet .viewer-title .path{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
html.device-tablet .viewer-controls{gap:6px; flex-shrink:0;}
html.device-tablet .nav-btn{width:40px; height:40px; border-radius:10px;}
html.device-tablet .nav-btn svg{width:18px; height:18px;}
html.device-tablet .segmented button{min-height:36px; padding:0 16px;}

/* Ngang: cột danh sách thu gọn được (nút ở đầu khung đề). */
html.device-tablet body.tb-list-collapsed .workspace{grid-template-columns:minmax(0, 1fr);}
html.device-tablet body.tb-list-collapsed .qlist{display:none;}
html.device-tablet .tb-list-btn{flex-shrink:0;}
html.device-tablet body:not(.tb-list-collapsed) .tb-list-btn{color:var(--accent-ink); border-color:var(--accent); background:var(--accent-soft);}

/* ---------- Dọc: khung đề rộng hết, danh sách là drawer, prev/next xuống thanh dưới ---------- */
.tb-qbar{display:none;}
@media (orientation:portrait){
  html.device-tablet .workspace,
  html.device-tablet body.tb-list-collapsed .workspace{grid-template-columns:minmax(0, 1fr);}
  html.device-tablet .qlist,
  html.device-tablet body.tb-list-collapsed .qlist{
    position:fixed; top:var(--tb-top-h); bottom:0; left:0; z-index:49; display:flex;
    width:min(380px, 86vw); border-radius:0; border-top:none;
    transform:translateX(-105%); visibility:hidden; transition:transform .2s ease, visibility 0s linear .2s;
  }
  html.device-tablet body.tb-list-open .qlist{transform:none; visibility:visible; transition:transform .2s ease;}
  html.device-tablet .tb-list-btn,
  html.device-tablet body:not(.tb-list-collapsed) .tb-list-btn{color:var(--ink-soft); border-color:var(--line); background:var(--surface-2);}
  html.device-tablet body.tb-list-open .tb-list-btn{color:var(--accent-ink); border-color:var(--accent); background:var(--accent-soft);}
  html.device-tablet .viewer-controls #prevBtn,
  html.device-tablet .viewer-controls #nextBtn{display:none;}
  html.device-tablet .tb-qbar{
    flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:8px 12px; background:var(--surface); border-top:1px solid var(--line);
  }
}
html.device-tablet .tb-step{
  display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:0 16px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--ink-soft);
  font-size:.92rem; font-weight:600; cursor:pointer;
}
html.device-tablet .tb-step:disabled{opacity:.4; cursor:not-allowed;}
html.device-tablet .tb-pos{font-variant-numeric:tabular-nums; color:var(--ink-faint); font-size:.85rem;}
@media (prefers-reduced-motion:reduce){
  html.device-tablet .qlist{transition:none !important;}
}

/* ---------- Ô tự chấm dính đáy khung cuộn khi đọc đáp án dài + Next question ----------
   Ô là con trực tiếp của `#viewerBody` (khung cuộn) nên sticky bám đáy khung. Gọn còn một hàng: câu hỏi · 5 mức · Next. */
html.device-tablet #rateBox{
  position:sticky; bottom:0; z-index:3; margin:16px -28px 0; padding:10px 28px 12px;
  border-radius:0; border-left:none; border-right:none; border-bottom:none;
  box-shadow:0 -8px 24px -14px rgba(20,30,26,.3);
}
html.device-tablet #rateBox .rate-q{flex:0 1 auto;}
html.device-tablet #rateBox .rate-q span{display:none;}
html.device-tablet #rateBox .rate-btns{flex:1 1 320px;}
html.device-tablet #rateBox .rate-btn{min-height:42px; font-size:.8rem;}
html.device-tablet #rateBox .rate-msg:empty{display:none;}
html.device-tablet .tb-next-q{
  flex:0 0 auto; display:flex; align-items:center; gap:4px; min-height:42px; padding:0 16px;
  border:1px solid var(--line-strong); border-radius:10px; background:var(--surface-2); color:var(--ink-soft);
  font:inherit; font-size:.9rem; font-weight:600; cursor:pointer; white-space:nowrap;
}
html.device-tablet .tb-next-q.is-ready{background:var(--accent); border-color:var(--accent); color:#fff;}
html.device-tablet .tb-next-q[hidden]{display:none;}
/* Ô dính SÁT đáy: bỏ khoảng đệm đáy của khung cuộn (để thì lộ một dải markscheme chạy dưới ô). */
html.device-tablet #viewerBody:has(> #rateBox){padding-bottom:0;}

/* ---------- Tools / Papers / My study: trượt đè từ phải, dưới thanh trên ---------- */
html.device-tablet .calcguide-panel{
  position:fixed; top:var(--tb-top-h); right:0; bottom:0; z-index:50;
  width:min(420px, 46vw); height:auto; margin:0; flex:none;
  box-shadow:-18px 0 40px -18px rgba(20,30,26,.4);
}
@media (orientation:portrait){
  html.device-tablet .calcguide-panel{width:min(440px, 64vw);}
}
html.device-tablet .calcguide-close,
html.device-tablet .calcguide-back{width:40px; height:40px;}