/*
  Vỏ PHONE của Question bank — đi cùng phone.js, chỉ có hiệu lực khi device.js gắn `device-phone` lên <html>.
  Mọi rule đều bắt đầu bằng `html.device-phone` nên desktop/tablet không bị đụng, và đủ nặng để thắng các media query
  (max-width:560/680/840/900px) sẵn có trong app.css — những thuộc tính media query đó đặt mà ở đây cần khác thì phải
  đặt lại tường minh.
  Lớp chồng (z-index): màn câu hỏi 40 · tab bar 45 · panel My study 46 · scrim 52 · sheet 53 · hộp thoại của app 60 ·
  thẻ hướng dẫn 75+. Sheet phải DƯỚI hộp thoại: chạm topic khoá trong sheet bộ lọc mở hộp mời đăng nhập lên trên nó.
*/
/* Vùng an toàn: app.html đặt `viewport-fit=cover` (để mở từ màn hình chính trông như app) — trang vẽ tràn cả sau tai
   thỏ / thanh home, nên phần đầu và đáy phải tự chừa env(safe-area-inset-*). Trình duyệt thường trả 0. */
html.device-phone{
  --ph-tabs-h:58px; --ph-safe-b:env(safe-area-inset-bottom, 0px); --ph-safe-t:env(safe-area-inset-top, 0px);
  --ph-safe-l:env(safe-area-inset-left, 0px); --ph-safe-r:env(safe-area-inset-right, 0px);
}
html.device-phone body{display:block;}
html.device-phone .app{
  max-width:none; margin:0; gap:0; min-height:100dvh;
  padding:0 var(--ph-safe-r) calc(var(--ph-tabs-h) + var(--ph-safe-b) + 12px) var(--ph-safe-l);
}
/* iOS phóng to trang khi chạm vào ô nhập chữ < 16px — mọi ô nhập trên phone phải 16px. */
html.device-phone select.field,
html.device-phone .text-input,
html.device-phone input[type="text"],
html.device-phone input[type="search"],
html.device-phone input[type="password"],
html.device-phone input[type="email"]{font-size:16px;}

/* Phone không có Tools, Papers, Write (user chốt 2026-10-22); số liệu đếm câu chiếm chỗ không cần thiết. */
html.device-phone .stats-banner,
html.device-phone .side-dock-launchers,
html.device-phone #vExamAdd,
html.device-phone #vInk,
html.device-phone .ink-bar,
html.device-phone .ex-btn,
html.device-phone #sharedWorkLink,
html.device-phone #bkFilterBtn,
html.device-phone .more-filters-btn{display:none !important;}
html.device-phone body:has(.side-dock-launchers):not(.has-side-app) .viewer-body{padding-bottom:24px;}

/* ---------- Thanh trên ---------- */
html.device-phone .topbar{
  flex-wrap:nowrap; justify-content:flex-start; gap:8px; padding:calc(6px + var(--ph-safe-t)) 8px 6px 12px;
  background:var(--surface); border-bottom:1px solid var(--line);
}
html.device-phone .topbar-left{margin-right:auto; gap:0;}
html.device-phone .wordmark .logo-img{height:36px;}
html.device-phone .ph-signin{
  display:none; align-items:center; min-height:36px; padding:0 14px; border-radius:999px;
  background:var(--accent); color:#fff; font-size:.88rem; font-weight:600; text-decoration:none;
}
html.device-phone body.is-guest .ph-signin{display:inline-flex;}
.ph-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;
}
.ph-icon-btn:active{background:var(--surface-2);}

/* ---------- Sheet dùng chung (menu, bộ lọc) ---------- */
.ph-scrim{display:none;}
html.device-phone body.ph-filters-open .ph-scrim,
html.device-phone body.ph-menu-open .ph-scrim{
  display:block; position:fixed; inset:0; z-index:52; background:rgba(27,35,32,.42);
}
html.device-phone body.ph-filters-open,
html.device-phone body.ph-menu-open,
html.device-phone body.ph-q{overflow:hidden;}
.ph-sheet-head{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.ph-sheet-head strong{font-size:1.02rem; font-weight:600;}

/* Menu = chính `.topbar .meta` (guide.js / ink.js tìm nó bằng selector này nên không dời nó đi). */
html.device-phone .topbar .meta{
  position:fixed; left:0; right:0; bottom:0; z-index:53;
  display:none; flex-direction:column; align-items:stretch; gap:0;
  max-height:85dvh; overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface); border-radius:16px 16px 0 0; box-shadow:0 -12px 32px rgba(20,30,26,.2);
  padding:0 16px calc(12px + var(--ph-safe-b)); font-size:1rem; color:var(--ink);
}
html.device-phone body.ph-menu-open .topbar .meta{display:flex;}
html.device-phone .topbar .meta > *{order:1;}
html.device-phone .topbar .meta > .ph-sheet-head{
  order:-1; position:sticky; top:0; z-index:1; background:var(--surface); padding:6px 0 2px; margin-right:-10px;
}
html.device-phone .topbar .meta > .gd-help-link,
html.device-phone .topbar .meta > .logout-link,
html.device-phone .topbar .meta > #adminLink,
html.device-phone .topbar .meta > .account-menu > .who{
  display:flex; align-items:center; width:100%; min-height:50px; padding:0; margin:0;
  border:none; border-bottom:1px solid var(--line); background:none; text-align:left;
  font-size:1rem; color:var(--ink); text-decoration:none;
}
html.device-phone .topbar .meta > .account-menu > .who::before{content:"Account: "; color:var(--ink-faint); margin-right:4px;}
html.device-phone .topbar .meta > .tier-badge{align-self:flex-start; margin:12px 0 4px;}
/* `display` ở trên đè [hidden] và inline style của app.js — giữ đúng chỗ app muốn ẩn. */
html.device-phone .topbar .meta > [hidden],
html.device-phone .topbar .meta > [style*="display: none"],
html.device-phone .topbar .meta > [style*="display:none"]{display:none !important;}
html.device-phone .topbar .meta > .ph-desktop-view{color:var(--ink-soft); border-bottom:none;}
html.device-phone .account-panel{
  position:static; width:auto; box-shadow:none; border:none; border-radius:0; padding:4px 0 12px;
  border-bottom:1px solid var(--line);
}
html.device-phone .account-panel .text-input{padding:10px 12px;}
html.device-phone .account-panel .btn{padding:11px 14px; font-size:.92rem;}

/* ---------- Danh sách: nút Filters + chip, dính trên đầu khi cuộn ---------- */
html.device-phone .ph-listbar{
  position:sticky; top:0; z-index:30; display:flex; flex-direction:column; gap:6px;
  padding:8px 12px; background:var(--bg); border-bottom:1px solid var(--line);
}
html.device-phone .ph-listbar-top{display:flex; align-items:center; gap:10px; min-width:0;}
html.device-phone .ph-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:.92rem; font-weight:600; cursor:pointer;
}
html.device-phone .ph-filters-btn .ph-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-phone .ph-filters-btn .ph-count[hidden]{display:none;}
html.device-phone .ph-subject{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9rem; color:var(--ink-soft);
}
/* Chip: một hàng cuộn ngang thay vì xuống nhiều dòng; chỗ chừa cho nút Clear all (desktop) không cần nữa. */
html.device-phone .ph-listbar .chips{
  flex-wrap:nowrap; overflow-x:auto; padding-right:0; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
html.device-phone .ph-listbar .chips::-webkit-scrollbar{display:none;}
html.device-phone .ph-listbar .chips .chip{flex-shrink:0; padding:5px 6px 5px 12px; font-size:.8rem;}
html.device-phone .ph-listbar .chips .chip button{width:26px; height:24px; font-size:1.05rem;}
html.device-phone .ph-listbar .chips.empty{display:none;}
/* Tab Saved: mọi câu đã lưu của môn, bộ lọc không áp (app.js buildQuery) — giấu chip và nút Filters cho khỏi hiểu nhầm. */
html.device-phone body.ph-saved .ph-listbar .chips,
html.device-phone body.ph-saved #filtersBtn{display:none;}
html.device-phone body.ph-saved .ph-subject{font-weight:600; color:var(--ink);}

/* ---------- Sheet bộ lọc = chính `.filterbar` ---------- */
html.device-phone .filterbar{
  position:fixed; left:0; right:0; bottom:0; z-index:53;
  display:none; gap:0; max-height:88dvh; overflow-y:auto; overscroll-behavior:contain;
  padding:0 16px; border:none; border-radius:16px 16px 0 0; box-shadow:0 -12px 32px rgba(20,30,26,.2);
}
html.device-phone body.ph-filters-open .filterbar{display:flex;}
html.device-phone .filterbar > .ph-sheet-head{
  position:sticky; top:0; z-index:2; background:var(--surface); padding:6px 0 2px; margin-right:-10px;
}
html.device-phone .filter-row{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:14px 12px; padding:8px 0 16px;
}
html.device-phone .filter-more{display:contents;}
html.device-phone .filter-group{gap:4px;}
html.device-phone .filter-group label{font-size:.7rem;}
html.device-phone #programmeGroup,
html.device-phone .filter-group:has(#subjectBtn),
html.device-phone .filter-group:has(#topicBtn){grid-column:1 / -1;}
/* Topic xuống CUỐI: danh sách topic mở ngay trong sheet dài tới vài nghìn px (AA: ~4.200px) — để giữa thì Level / Paper /
   Year bị đẩy xuống tận đáy; để cuối thì sheet chỉ việc cuộn tiếp, không cần khung cuộn lồng. */
html.device-phone #programmeGroup{order:1;}
html.device-phone .filter-group:has(#subjectBtn){order:2;}
html.device-phone .filter-group:has(#fLevel){order:3;}
html.device-phone .filter-more .filter-group{order:4;}
html.device-phone .filter-group:has(#topicBtn){order:5;}
html.device-phone select.field,
html.device-phone .subject-btn,
html.device-phone .topic-btn{
  width:100%; min-width:0; max-width:none; min-height:44px; padding:8px 30px 8px 12px; font-size:16px;
}
html.device-phone .subject-btn,
html.device-phone .topic-btn{padding-right:12px;}
/* Danh sách môn / topic mở ngay trong sheet (đẩy phần dưới xuống) thay vì popover nổi — sheet tự cuộn. */
html.device-phone .subject-panel,
html.device-phone .topic-panel{
  position:static; width:auto; max-width:none; max-height:none; margin-top:6px; box-shadow:none;
}
html.device-phone .subject-item{padding:11px 10px; font-size:.95rem;}
html.device-phone .topic-item,
html.device-phone .topic-group-head{padding:9px 8px; font-size:.95rem;}
html.device-phone .topic-item input,
html.device-phone .topic-group-head input{width:20px; height:20px;}
html.device-phone .ph-sheet-foot{
  position:sticky; bottom:0; z-index:2; display:flex; gap:10px; margin:0 -16px; padding:10px 16px calc(10px + var(--ph-safe-b));
  background:var(--surface); border-top:1px solid var(--line);
}
html.device-phone .ph-sheet-foot .clear-btn{position:static; flex:0 0 auto; min-height:46px; padding:0 16px; font-size:.92rem;}
html.device-phone .ph-sheet-foot .ph-show-btn{flex:1; min-height:46px; font-size:.95rem;}

/* ---------- Danh sách câu: cả trang cuộn (thanh địa chỉ thu lại được), không cuộn trong khung ---------- */
html.device-phone .workspace{display:block;}
html.device-phone .qlist{
  height:auto; max-height:none; min-height:0; border:none; border-radius:0; box-shadow:none; background:transparent;
}
html.device-phone .qlist-head{padding:10px 14px 6px; border-bottom:none; font-size:.8rem;}
html.device-phone .qlist-body{overflow:visible; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
/* Dòng câu (app.js itemHtml, nhánh phone): tên topic · mã topic + điểm · đề nào + mã câu. */
html.device-phone .qitem-main{display:flex; flex-direction:column; gap:5px; padding:12px 56px 12px 14px;}
html.device-phone .qitem .qname{
  font-size:.95rem; font-weight:600; line-height:1.3; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
html.device-phone .qitem .qtags{gap:5px;}
html.device-phone .qitem .qtags .badge{font-size:.68rem; padding:1px 6px;}
html.device-phone .qitem .qsource{font-size:.74rem; color:var(--ink-faint); line-height:1.3; overflow-wrap:anywhere;}
html.device-phone .qitem .qsource .code{display:inline; margin:0; font-size:.72rem; color:var(--ink-faint);}
html.device-phone .bk-btn{top:50%; right:6px; width:44px; height:44px; transform:translateY(-50%);}
html.device-phone .bk-btn svg{width:18px; height:18px;}
/* Cuộn liên tục (phone.js `.ph-more`) thay cho nút trang. */
html.device-phone .qlist-pager{display:none;}
html.device-phone .ph-more{min-height:56px; padding:18px 14px; text-align:center; font-size:.82rem; color:var(--ink-faint);}

/* ---------- Xem hình / bảng toàn màn (phone.js) ---------- */
.ph-zoom{display:none;}
html.device-phone .sheet-body img,
html.device-phone .sheet-body table{cursor:zoom-in;}
html.device-phone body.ph-zoom-open .ph-zoom{
  position:fixed; inset:0; z-index:55; display:flex; flex-direction:column; background:#fff;
}
html.device-phone .ph-zoom-bar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:calc(4px + var(--ph-safe-t)) 4px 4px 16px; border-bottom:1px solid var(--line);
  font-size:.82rem; color:var(--ink-faint);
}
html.device-phone .ph-zoom-stage{
  position:relative; flex:1; min-height:0; overflow:hidden; touch-action:none; background:var(--surface-2);
}
html.device-phone .ph-zoom-content{position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform;}
html.device-phone .ph-zoom-content > img{display:block; width:100%; height:auto; max-width:none; margin:0; background:#fff;}
html.device-phone .ph-zoom-table{width:max-content; max-width:none; padding:8px; border-radius:0; background:#fff;}
html.device-phone .ph-zoom-table table{margin:0;}

/* ---------- Màn câu hỏi: phủ toàn màn, tự cuộn bên trong ---------- */
html.device-phone .viewer{
  position:fixed; inset:0; z-index:40; display:none; flex-direction:column; min-height:0;
  padding:0 var(--ph-safe-r) 0 var(--ph-safe-l);
  border:none; border-radius:0; box-shadow:none;
}
html.device-phone body.ph-q .viewer{display:flex;}
html.device-phone .viewer-head{
  flex:0 0 auto; flex-wrap:nowrap; gap:4px; padding:calc(4px + var(--ph-safe-t)) 6px 4px 2px; background:var(--surface);
}
html.device-phone .viewer-title{flex:1; min-width:0;}
html.device-phone .viewer-title .code{font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
html.device-phone .viewer-title .path{font-size:.75rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
html.device-phone .viewer-controls{gap:2px; flex-shrink:0;}
html.device-phone .viewer-controls .nav-btn{width:44px; height:44px; border:none; background:none;}
html.device-phone .viewer-controls .nav-btn svg{width:20px; height:20px;}
/* "Link copied" canh giữa dưới nút Share nằm sát mép phải → tràn 10px ở màn 320px; canh phải theo nút. */
html.device-phone .share-toast{left:auto; right:0; transform:translateY(-4px);}
html.device-phone .share-toast.show{transform:none;}
html.device-phone .share-toast::before{left:auto; right:18px; transform:none;}
html.device-phone .viewer-body{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;}
html.device-phone .viewer-foot{flex:0 0 auto; padding:4px 14px; font-size:.72rem;}
html.device-phone .ph-qbar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:6px 10px calc(6px + var(--ph-safe-b)); background:var(--surface); border-top:1px solid var(--line);
}
html.device-phone .ph-qbar .nav-btn{width:48px; height:44px; border-radius:10px;}
html.device-phone .ph-qbar .nav-btn svg{width:20px; height:20px;}
html.device-phone .ph-qbar .segmented{flex:0 1 auto;}
html.device-phone .ph-qbar .segmented button{min-height:38px; padding:0 20px; font-size:.9rem;}

/* ---------- Tab bar ---------- */
.ph-tabs{display:none;}
html.device-phone .ph-tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:45; display:flex;
  height:calc(var(--ph-tabs-h) + var(--ph-safe-b)); padding-bottom:var(--ph-safe-b);
  background:var(--surface); border-top:1px solid var(--line);
}
html.device-phone .ph-tabs button{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:none; background:none; padding:0; color:var(--ink-faint); font-size:.7rem; font-weight:600; cursor:pointer;
}
html.device-phone .ph-tabs button.is-on{color:var(--accent);}
html.device-phone .ph-tabs button[hidden]{display:none;}
html.device-phone body.ph-q .ph-tabs{display:none;}

/* ---------- Panel My study: toàn màn, chừa tab bar để chuyển về Questions ---------- */
html.device-phone .calcguide-panel{
  position:fixed; top:0; left:0; right:0; bottom:calc(var(--ph-tabs-h) + var(--ph-safe-b)); z-index:46;
  width:auto; height:auto; margin:0; border-left:none; box-shadow:none;
}
html.device-phone .calcguide-head{padding:calc(6px + var(--ph-safe-t)) 8px 6px 14px;}
html.device-phone .calcguide-close,
html.device-phone .calcguide-back{width:44px; height:44px;}
html.device-phone .dock-tab{min-height:40px; font-size:.9rem;}

/* ---------- Hộp thoại của app: vừa màn hẹp, nút đủ to để chạm ---------- */
html.device-phone .upgrade-card{max-width:calc(100vw - 24px);}
html.device-phone .upgrade-card .btn{min-height:46px;}

/* ---------- Nhanh & mượt: khung chờ, màn câu hỏi trượt vào ---------- */
html.device-phone .ph-skel{padding:24px 16px; display:flex; flex-direction:column; gap:12px;}
html.device-phone .ph-skel i{
  display:block; height:14px; border-radius:7px; background:var(--surface-3);
  animation:ph-pulse 1s ease-in-out infinite alternate;
}
html.device-phone .ph-skel i:nth-child(1){width:40%;}
html.device-phone .ph-skel i:nth-child(2){width:92%;}
html.device-phone .ph-skel i:nth-child(3){width:85%;}
html.device-phone .ph-skel i:nth-child(4){width:60%;}
@keyframes ph-pulse{from{opacity:.55;} to{opacity:1;}}
html.device-phone body.ph-q .viewer{animation:ph-slide-in .16s ease-out;}
@keyframes ph-slide-in{from{transform:translateX(28px); opacity:.6;} to{transform:none; opacity:1;}}
@media (prefers-reduced-motion:reduce){
  html.device-phone body.ph-q .viewer, html.device-phone .ph-skel i{animation:none;}
}

/* ---------- (9) Ô tự chấm dính đáy khi cuộn đáp án + Next question ---------- */
html.device-phone #rateBox{
  position:sticky; bottom:0; z-index:3; margin:16px 0 0; padding:10px 12px calc(10px + 0px);
  border-radius:14px 14px 0 0; border-bottom:none; box-shadow:0 -8px 24px -12px rgba(20,30,26,.3); gap:8px;
}
html.device-phone #rateBox .rate-q{flex:1 0 100%;}
html.device-phone #rateBox .rate-q span{display:none;}
html.device-phone #rateBox .rate-btns{flex:1 0 100%;}
html.device-phone #rateBox .rate-btn{min-height:42px; font-size:.74rem;}
html.device-phone #rateBox .rate-msg:empty{display:none;}
html.device-phone .ph-next-q{
  flex:1 0 100%; display:flex; align-items:center; justify-content:center; gap:4px; min-height:44px;
  border:1px solid var(--line-strong); border-radius:10px; background:var(--surface-2); color:var(--ink-soft);
  font:inherit; font-size:.92rem; font-weight:600; cursor:pointer;
}
html.device-phone .ph-next-q.is-ready{background:var(--accent); border-color:var(--accent); color:#fff;}
html.device-phone .ph-next-q[hidden]{display:none;}
/* Ô tự chấm dính SÁT đáy: bỏ khoảng đệm đáy của khung cuộn (để thì lộ một dải chữ markscheme chạy dưới ô). */
html.device-phone #viewerBody:has(> #rateBox){padding-bottom:0;}