/* ═══════════════════════════════════════════════════════════════════════════
   BỘ LỌC ĐỀ — 5 trang kỹ năng (de-reading / de-listening / de-writing /
   de-speaking / de-chep-chinh-ta). 27/09/2026. Markup: partials/archive/skill-loc.php
   JS: public/scripts/alpha-loc-de.js. Nạp SAU dark-mode.css + site-skeuo.css.

   Máy tính ≥992  : thanh ngang dính dưới header — ô tìm · bong bóng phần đề (kiểu
                    ô tô trên phiếu trả lời) · bảng thả «Bộ đề», «Dạng câu hỏi» · số đề;
                    hàng chip đang bật nằm ngay dưới thanh.
   <992           : thanh dính [ô tìm][Lọc (n)] nền đặc + hàng «N đề · chip»;
                    form = tấm trượt từ đáy (≤599) / tấm giữa 560px (600–991).
   Phạm vi: chỉ .locde* + main.page-skill (không đụng .side-open/.catexams-side,
   .sideOpenQues hay rule chung). Da: phẳng · html.ae-dark-mode · html.theme-skeuo (+ tối).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. Khung trang: bỏ cột trái, lưới rộng hết bề ngang, lề điện thoại 16px ── */
main.page-skill .skill-body .container-fluid.locde-container{ padding-left:40px; padding-right:40px; }
main.page-skill .exam-wrap.locde-wrap{ display:block !important; }
main.page-skill .locde-wrap .skill-content{ width:100% !important; max-width:none !important; flex:none !important; }
@media (min-width:1200px){
  main.page-skill .locde-wrap .skill-results .exam-list.row{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
}
@media (min-width:992px) and (max-width:1199px){
  main.page-skill .locde-wrap .skill-results .exam-list.row{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:991px){
  main.page-skill .skill-body .container-fluid.locde-container{ padding-left:16px; padding-right:16px; }
  main.page-skill .skill-body.ss-pd{ padding-top:20px; }
  /* phân trang: lề 16px thì dải 7–13 ô tròn dài hơn màn 360 ⇒ cho xuống dòng thay vì tràn ngang */
  main.page-skill .locde-wrap .skill-results .pagination-wrapper ul.page-numbers{ flex-wrap:wrap; row-gap:10px; max-width:100%; }
}

/* ── 1. Bảng màu. Phẳng sáng: mực của nút «Thi Thử Ngay» ở header làm màu «đang chọn»;
      đỏ thương hiệu CHỈ ở huy hiệu số trên nút «Lọc». Không tím, không vàng, không glow. ── */
.locde, .locde-rong, body.alpha-locde .back-to-top{
  --l-chu:#15191e;  --l-chu-2:#3f4650;  --l-nhat:#646c77;
  --l-vien:#cfd4da; --l-vien-2:#e6e8ec;
  --l-nen:#ffffff;  --l-nen-2:#f2f3f5;  --l-ray:#eceef1;
  --l-trang:#ffffff;                               /* nền thanh dính điện thoại (đặc) */
  --l-bat:#15191e;  --l-bat-chu:#ffffff;
  --l-do:#d71920;   --l-do-chu:#ffffff;
  --l-phu:rgba(12,14,18,.46);
  --l-bong:0 1px 2px rgba(21,25,30,.05), 0 12px 32px -20px rgba(21,25,30,.38);
  --l-bong-dinh:0 1px 2px rgba(21,25,30,.06), 0 18px 40px -18px rgba(21,25,30,.42);
  --l-bong-pop:0 28px 64px -24px rgba(21,25,30,.42), 0 2px 8px rgba(21,25,30,.07);
  --l-vong:0 0 0 2px var(--l-nen), 0 0 0 4px #2f6bd8;
  --l-r:18px;
  --l-serif:inherit;
  --l-tk-nen:rgba(47,107,216,.13);                 /* nền tô của từ khoá học viên gõ (.locde-tk) — cùng họ màu vòng focus */
}
html.ae-dark-mode .locde, html.ae-dark-mode .locde-rong, html.ae-dark-mode body.alpha-locde .back-to-top{
  --l-chu:#eef0f3;  --l-chu-2:#c9ced5;  --l-nhat:#9aa2ad;
  --l-vien:#3a4048; --l-vien-2:#272b31;
  --l-nen:#15171b;  --l-nen-2:#1e2126;  --l-ray:#0f1114;
  --l-trang:#15171b;
  --l-bat:#eef0f3;  --l-bat-chu:#111316;
  --l-do:#ff4b53;
  --l-phu:rgba(0,0,0,.62);
  --l-bong:0 0 0 1px rgba(255,255,255,.02), 0 14px 34px -20px rgba(0,0,0,.9);
  --l-bong-dinh:0 16px 40px -16px rgba(0,0,0,.95);
  --l-bong-pop:0 30px 70px -20px rgba(0,0,0,.9);
  --l-vong:0 0 0 2px var(--l-nen), 0 0 0 4px #6ea2ff;
  --l-tk-nen:rgba(110,162,255,.22);
}

/* ── 2. Phần tử chung ── */
.locde{ position:relative; font-family:inherit; color:var(--l-chu); }
.locde *, .locde-rong *{ box-sizing:border-box; }
.locde [hidden], .locde-rong [hidden]{ display:none !important; }
.locde button, .locde input{ font:inherit; letter-spacing:normal; text-transform:none; }
.locde svg{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.locde fieldset{ border:0; margin:0; padding:0; min-width:0; }
.locde legend{ width:auto; max-width:100%; padding:0; margin:0; border:0; float:none; font-size:inherit; line-height:inherit; color:inherit; }
.locde h2, .locde h3{ font-family:inherit; }
.locde-khung:focus{ outline:0; }
.locde p{ margin:0; }
.locde-an{ position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; margin:0 !important; padding:0 !important; }
/* ô tick THẬT phủ kín nhãn, trong suốt — bấm/Tab/Space đều chạy không cần JS */
.locde label{ position:relative; cursor:pointer; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; margin:0; font-weight:inherit; }
.locde label > input[type=checkbox]{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; -webkit-appearance:none; appearance:none; z-index:1; }
.locde label > input[type=checkbox]:disabled{ cursor:not-allowed; }
.locde button{ -webkit-tap-highlight-color:transparent; cursor:pointer; }
.locde button:disabled{ cursor:default; }

/* ô tìm (MỘT input name=keyword, nằm ngoài form, gắn form="skillFilterForm") */
.locde-tim-o{ display:flex !important; align-items:center; gap:10px; height:44px; padding:0 16px; border-radius:999px;
  background:var(--l-nen-2); border:1.5px solid transparent; color:var(--l-nhat); cursor:text !important; transition:border-color .15s, background-color .15s; }
.locde-tim-o:focus-within{ border-color:var(--l-chu); background:var(--l-nen); color:var(--l-chu); }
/* dark-mode.css + site-skeuo.css ép nền/viền/bóng mọi input bằng luật rất đặc ⇒ dùng ID để thắng */
input#locdeTim{ flex:1; min-width:0; width:100%; height:100% !important; min-height:0 !important; margin:0 !important; padding:0 !important;
  border:0 !important; border-radius:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important;
  font-size:15px; font-weight:500; line-height:1.2; color:var(--l-chu) !important; -webkit-text-fill-color:var(--l-chu); -webkit-appearance:none; appearance:none; }
input#locdeTim::placeholder{ color:var(--l-nhat) !important; -webkit-text-fill-color:var(--l-nhat); opacity:1; }
input#locdeTim::-webkit-search-cancel-button{ -webkit-appearance:none; }

/* phần đề = bong bóng số (ô tô trên phiếu trả lời) + viên «Full đề», gom trong MỘT rãnh */
.locde-phan legend{ font-weight:700; color:var(--l-chu); }
.locde-phan-ds{ display:inline-flex; align-items:center; gap:4px; padding:3px; border-radius:999px; background:var(--l-ray); box-shadow:inset 0 0 0 1px var(--l-vien-2); }
.locde-bong{ display:inline-flex !important; flex-direction:column; align-items:center; justify-content:center; color:var(--l-chu-2); }
.locde-bong-o{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--l-vien);
  background:var(--l-nen); font-weight:700; font-size:14.5px; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap;
  transition:background-color .15s, border-color .15s, color .15s; }
.locde-bong--chu .locde-bong-o{ width:auto; padding:0 14px; border-radius:999px; font-weight:600; font-size:14px; }
.locde-bong-sl{ display:none; font-size:12.5px; line-height:1; color:var(--l-nhat); font-variant-numeric:tabular-nums; }
.locde-bong:not(.is-0):not(.is-bat):hover .locde-bong-o{ border-color:var(--l-chu); color:var(--l-chu); }
.locde-bong.is-bat .locde-bong-o, .locde-bong:has(input:checked) .locde-bong-o{ background:var(--l-bat); border-color:var(--l-bat); color:var(--l-bat-chu); }
.locde-bong:has(input:focus-visible) .locde-bong-o{ box-shadow:var(--l-vong); }
.locde-bong.is-0{ opacity:.38; }
.locde-bong.is-0 .locde-bong-o{ border-style:dashed; }

/* nút mở bảng thả */
.locde-nut{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px 0 18px; border-radius:999px;
  border:1.5px solid var(--l-vien); background:var(--l-nen); color:var(--l-chu); font-weight:600; font-size:15px; white-space:nowrap;
  transition:border-color .15s, background-color .15s; }
.locde-nut:hover{ border-color:var(--l-chu); }
.locde-nut svg{ width:18px; height:18px; stroke-width:2.2; transition:transform .18s ease; }
.locde-nut[aria-expanded=true]{ border-color:var(--l-chu); background:var(--l-nen-2); }
.locde-nut[aria-expanded=true] svg{ transform:rotate(180deg); }
.locde-nut:focus-visible, .locde-mo:focus-visible, .locde-chip-o:focus-visible, .locde-xoa:focus-visible, .locde-xem:focus-visible,
.locde-xem-pop:focus-visible, .locde-bo:focus-visible, .locde-dong:focus-visible, .locde-rong button:focus-visible{ outline:0; box-shadow:var(--l-vong); }
.locde-nut-so, .locde-so{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px;
  font-size:12.5px; font-weight:800; line-height:1; font-style:normal; font-variant-numeric:tabular-nums; }
.locde-nut-so{ background:var(--l-bat); color:var(--l-bat-chu); }
.locde-so{ background:var(--l-do); color:var(--l-do-chu); }

/* ô tick (bảng thả + tấm trượt) */
.locde-pop-dau{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.locde-pop-dau h3{ margin:0; font-size:16px; font-weight:700; color:var(--l-chu); line-height:1.3; }
.locde-bo, .locde-xoa--chu{ border:0; background:none; padding:0 6px; height:36px; font-size:14px; font-weight:600; color:var(--l-chu-2);
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; border-radius:8px; white-space:nowrap; }
.locde-bo:hover, .locde-xoa--chu:hover{ color:var(--l-chu); }
.locde-bo:disabled{ opacity:.4; text-decoration:none; }
.locde-ho legend{ font-size:13px; font-weight:700; color:var(--l-nhat); line-height:1.3; }
.locde-o{ display:flex !important; align-items:center; gap:10px; color:var(--l-chu); }
.locde-tick{ display:grid; place-items:center; flex:none; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--l-vien);
  background:var(--l-nen); transition:background-color .12s, border-color .12s; }
.locde-tick svg{ width:14px; height:14px; stroke:var(--l-bat-chu); stroke-width:3; opacity:0; }
.locde-o:not(.is-0):hover .locde-tick{ border-color:var(--l-chu); }
.locde-o.is-bat .locde-tick, .locde-o:has(input:checked) .locde-tick{ background:var(--l-bat); border-color:var(--l-bat); }
.locde-o.is-bat .locde-tick svg, .locde-o:has(input:checked) .locde-tick svg{ opacity:1; }
.locde-o:has(input:focus-visible){ box-shadow:var(--l-vong); }
.locde-o.is-0{ opacity:.42; }
.locde-ten{ flex:1; min-width:0; font-size:15px; font-weight:500; line-height:1.3; }
.locde-sl{ font-size:13px; color:var(--l-nhat); font-variant-numeric:tabular-nums; }

/* số đề */
.locde-dem{ margin:0; font-size:15px; color:var(--l-nhat); white-space:nowrap; line-height:1; }
.locde-dem b{ font-size:20px; font-weight:800; color:var(--l-chu); letter-spacing:-.01em; font-variant-numeric:tabular-nums; margin-right:3px; transition:opacity .15s; }
.locde.is-tai .locde-dem b{ opacity:.35; }

/* chip đang bật */
.locde-chip{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.locde-chip-o{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 8px 0 14px; border-radius:999px;
  border:1px solid var(--l-vien-2); background:var(--l-nen-2); color:var(--l-chu); font-size:14px; font-weight:600; max-width:100%; }
.locde-chip-o span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.locde-chip-o svg{ width:18px; height:18px; padding:3px; border-radius:50%; stroke-width:2.6; color:var(--l-nhat); transition:background-color .12s, color .12s; }
.locde-chip-o:hover svg{ background:var(--l-chu); color:var(--l-nen); }
/* chip từ khoá: kính lúp đứng trước + chữ nghiêng ⇒ nhận ra ngay là chữ mình gõ, khỏi ngoặc kép */
.locde-chip-o--tk{ padding-left:11px; gap:5px; }
.locde-chip-o--tk span{ font-style:italic; }
.locde-chip-o svg.locde-chip-kinh, .locde-chip-o:hover svg.locde-chip-kinh{ width:16px; height:16px; padding:0; border-radius:0; stroke-width:2.2; background:none; color:var(--l-nhat); }

/* từ khoá trong câu (trạng thái rỗng, dòng giải thích nhóm chết, nút «Bỏ từ khoá …»): tô nền nhạt + nghiêng */
.locde-tk{ font-style:italic; padding:.04em .36em; margin:0 .04em; border-radius:6px; background:var(--l-tk-nen);
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* nhóm chết theo ngữ cảnh (.is-can): dòng giải thích thay cho danh sách toàn ô 0 — chỉ hiện trong tấm lọc (<992) */
.locde-can-ghi{ margin:0; padding:14px 16px; border-radius:14px; background:var(--l-nen-2); color:var(--l-chu-2);
  font-size:14.5px; line-height:1.5; text-wrap:pretty; }
.locde-can-ghi b{ font-weight:700; color:var(--l-chu); }
html.ae-dark-mode .locde .locde-can-ghi{ color:var(--l-chu-2) !important; }
html.ae-dark-mode .locde .locde-can-ghi b{ color:var(--l-chu) !important; }

/* vạch đang tải (thay lớp mờ phủ cả trang của bản cũ) */
.locde-tai{ position:absolute; left:18px; right:18px; bottom:-1px; height:2px; overflow:hidden; border-radius:2px; opacity:0; transition:opacity .15s; pointer-events:none; }
.locde-tai::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:28%; border-radius:2px; background:var(--l-chu); animation:locde-chay 1.05s cubic-bezier(.45,.05,.35,1) infinite; }
.locde.is-tai .locde-tai{ opacity:1; }
@keyframes locde-chay{ from{ transform:translateX(-110%); } to{ transform:translateX(370%); } }
main.page-skill .locde-wrap .skill-results.is-loading{ opacity:.55; transition:opacity .15s; }

/* trạng thái rỗng */
.locde-rong{ padding:32px 32px 30px; border-radius:var(--l-r); background:var(--l-nen); border:1px solid var(--l-vien-2); color:var(--l-chu); max-width:720px; margin:8px 0 0; }
.locde-rong h3{ margin:0 0 8px; font-size:20px; font-weight:800; letter-spacing:-.01em; color:var(--l-chu); line-height:1.3; }
.locde-rong p{ margin:0 0 20px; font-size:15.5px; line-height:1.6; color:var(--l-chu-2); max-width:60ch; }
.locde-rong p b{ font-weight:700; color:var(--l-chu); }
.locde-rong-nut{ display:flex; flex-wrap:wrap; gap:10px; }
.locde-rong button{ height:44px; padding:0 20px; border-radius:999px; font-size:15px; font-weight:700; cursor:pointer; }
.locde-rong .locde-rong-bo{ border:1.5px solid var(--l-vien); background:var(--l-nen); color:var(--l-chu); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.locde-rong .locde-rong-bo:hover{ border-color:var(--l-chu); }
.locde-rong .locde-xoa{ border:0; background:var(--l-bat); color:var(--l-bat-chu); }
.locde-loi{ margin:0 0 14px; padding:12px 16px; border-radius:12px; background:var(--l-nen-2); color:var(--l-chu); font-size:15px; }

/* ── 2b. Chặn luật tối «càn quét» của dark-mode.css (p/span/label/div ép màu, h*, button !important).
      Mọi màu của bộ lọc lấy lại từ token, đặc hơn + !important. ── */
html.ae-dark-mode .locde, html.ae-dark-mode .locde-rong{ color:var(--l-chu); }
html.ae-dark-mode .locde :is(span, p, label, div, legend, b){ color:inherit; }
html.ae-dark-mode .locde .locde-khung-dau h2, html.ae-dark-mode .locde .locde-pop-dau h3, html.ae-dark-mode .locde-rong h3{ color:var(--l-chu) !important; }
html.ae-dark-mode .locde .locde-phan legend{ color:var(--l-chu) !important; }
html.ae-dark-mode .locde .locde-ho legend, html.ae-dark-mode .locde .locde-sl, html.ae-dark-mode .locde .locde-bong-sl,
html.ae-dark-mode .locde .locde-dem, html.ae-dark-mode .locde .locde-pop-chan p, html.ae-dark-mode .locde .locde-tim-o{ color:var(--l-nhat) !important; }
html.ae-dark-mode .locde .locde-tim-o:focus-within{ color:var(--l-chu) !important; }
html.ae-dark-mode .locde .locde-dem b, html.ae-dark-mode .locde .locde-o, html.ae-dark-mode .locde .locde-ten{ color:var(--l-chu) !important; }
html.ae-dark-mode .locde .locde-bong{ color:var(--l-chu-2) !important; }
html.ae-dark-mode .locde .locde-bong .locde-bong-o{ color:var(--l-chu-2) !important; }
html.ae-dark-mode .locde .locde-bong:not(.is-0):not(.is-bat):hover .locde-bong-o{ color:var(--l-chu) !important; }
html.ae-dark-mode .locde .locde-bong.is-bat .locde-bong-o, html.ae-dark-mode .locde .locde-bong:has(input:checked) .locde-bong-o{ color:var(--l-bat-chu) !important; }
html.ae-dark-mode .locde .locde-nut, html.ae-dark-mode .locde .locde-mo, html.ae-dark-mode .locde .locde-dong,
html.ae-dark-mode .locde .locde-chip-o, html.ae-dark-mode .locde .locde-xoa--khung, html.ae-dark-mode .locde-rong .locde-rong-bo{ color:var(--l-chu) !important; }
html.ae-dark-mode .locde .locde-bo, html.ae-dark-mode .locde .locde-xoa--chu{ color:var(--l-chu-2) !important; }
html.ae-dark-mode .locde .locde-xem, html.ae-dark-mode .locde .locde-xem-pop, html.ae-dark-mode .locde-rong .locde-xoa,
html.ae-dark-mode .locde .locde-nut-so{ color:var(--l-bat-chu) !important; }
html.ae-dark-mode .locde .locde-so{ color:var(--l-do-chu) !important; }
html.ae-dark-mode .locde-rong p{ color:var(--l-chu-2) !important; }
html.ae-dark-mode .locde-rong p b{ color:var(--l-chu) !important; }

/* ═════════════ 3. MÁY TÍNH ≥ 992px — thanh ngang dính ═════════════ */
@media (min-width:992px){
  .locde{ position:sticky; top:var(--locde-top,0px); z-index:40; margin:0 0 28px;
    display:flex; flex-wrap:wrap; align-items:center; column-gap:14px; padding:0 14px 0 12px;
    background:var(--l-nen); border:1px solid var(--l-vien-2); border-radius:var(--l-r); box-shadow:var(--l-bong);
    transition:box-shadow .2s, border-radius .2s; }
  /* đã dính: thành khay treo dưới header (vuông góc trên, không hở khe cho thẻ đề lấp ló) */
  .locde.is-dinh{ box-shadow:var(--l-bong-dinh); border-top-color:transparent; border-top-left-radius:0; border-top-right-radius:0; }
  .locde-dinh{ flex:0 1 300px; min-width:200px; padding:11px 0; }
  .locde-mo, .locde-man, .locde-khung-dau, .locde-khung-chan, .locde-keo, .locde-dem--hang, .locde-pop-dau .locde-bo{ display:none !important; }
  .locde-khung{ display:flex; align-items:center; min-width:0; flex:0 1 auto; }
  .locde--chi-tim .locde-khung{ display:none; }
  .locde-than{ display:flex; align-items:center; gap:14px; }
  .locde-phan{ display:block; padding-left:16px !important; border-left:1px solid var(--l-vien-2) !important; }
  .locde-phan legend{ float:left; line-height:44px; margin-right:12px; font-size:14.5px; }
  .locde-nhom{ position:static; }
  .locde-than > .locde-nhom:first-child{ padding-left:0; }
  .locde-phan + .locde-nhom{ padding-left:16px; border-left:1px solid var(--l-vien-2); }
  .locde .locde-dem--thanh{ margin-left:auto; padding:0 4px 0 12px; }
  .locde-dem--thanh b{ font-size:22px; }
  /* hàng chip: chiếm trọn 1 dòng dưới thanh, chỉ hiện khi đang lọc. Dải chip «tan» vào hàng (display:contents)
     ⇒ chip và «Xoá bộ lọc» xuống dòng chung, nút luôn đứng ngay sau chip cuối */
  .locde-hang{ flex:1 0 100%; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 -14px 0 -12px; padding:10px 14px 12px 16px; border-top:1px solid var(--l-vien-2); }
  .locde:not(.co-loc) .locde-hang{ display:none; }
  .locde-hang .locde-chip{ display:contents; }
  .locde-xoa--chu{ margin-left:4px; }
  /* nhóm chết: nút mờ, không mở bảng (JS), câu giải thích nằm ở title + aria */
  .locde .locde-can-ghi{ display:none !important; }
  .locde-nhom.is-can .locde-nut{ opacity:.45; cursor:not-allowed; }
  .locde-nhom.is-can .locde-nut:hover{ border-color:var(--l-vien); }
  html.theme-skeuo .locde-nhom.is-can .locde-nut:hover{ border-color:#bfae83; }
  html.theme-skeuo.ae-dark-mode .locde-nhom.is-can .locde-nut:hover{ border-color:rgba(255,214,150,.28); }
  /* Speaking (chỉ ô tìm): ô tìm giãn hết phần trống, không để thanh rỗng giữa */
  .locde--chi-tim .locde-dinh{ flex:1 1 auto; max-width:none; }

  /* bảng thả rộng = tấm rộng bằng thanh (Reading/Listening: 5–6 họ dạng, 4 cột) */
  .locde-pop{ display:none; position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:2;
    background:var(--l-nen); border:1px solid var(--l-vien-2); border-radius:var(--l-r); box-shadow:var(--l-bong-pop);
    padding:18px 24px 0; max-height:calc(100vh - var(--locde-top,0px) - 150px); overflow:auto; overscroll-behavior:contain; }
  .locde-nhom.is-mo .locde-pop{ display:block; animation:locde-ha .16s ease-out; }
  .locde-pop-dau{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .locde-cot{ columns:var(--cot,4) 200px; column-gap:36px; }
  .locde-ho{ break-inside:avoid; margin:0 0 14px !important; }
  .locde-ho legend{ display:block; margin:0 0 4px; padding-top:4px; }
  .locde-ho legend.locde-an{ position:absolute !important; }
  .locde-o{ min-height:40px; padding:6px 10px; margin:0 -10px; border-radius:10px; }
  .locde-o:not(.is-0):hover{ background:var(--l-nen-2); }
  .locde-o .locde-sl{ margin-left:10px; }
  /* bảng hẹp neo dưới nút (Bộ đề; Writing «Dạng bài» 2 cột) — chỉ rộng theo số cột thật, JS đặt left */
  .locde-pop--neo{ right:auto; width:calc(var(--cot,1) * 300px + (var(--cot,1) - 1) * 36px + 48px); max-width:calc(100% - 24px); }
  /* «Bộ đề» phẳng dài (>10 ô, 28/09): chia 2 cột NGAY trong danh sách (1 fieldset không tách qua cột của .locde-cot) */
  .locde-pop--2cot .locde-cot{ columns:auto; }
  .locde-pop--2cot .locde-ho-ds{ columns:2; column-gap:36px; }
  .locde-pop--2cot .locde-o{ break-inside:avoid; }
  /* bảng hẹp: chân chỉ còn «Bỏ chọn» + «Xem N đề» (ghi chú 2 dòng làm bảng nặng đáy — chuyển sang aria-describedby) */
  .locde-pop--neo .locde-pop-chan p{ display:none; }
  /* chân bảng: ghi chú + «Bỏ chọn» + «Xem N đề» (dính đáy khi bảng cuộn) */
  .locde-pop-chan{ position:sticky; bottom:0; z-index:1; display:flex; align-items:center; gap:14px; margin:10px -24px 0; padding:12px 16px 12px 24px;
    background:var(--l-nen); border-top:1px solid var(--l-vien-2); }
  .locde-pop-chan p{ flex:1; min-width:0; font-size:13.5px; line-height:1.4; color:var(--l-nhat); }
  .locde-pop--neo .locde-pop-chan{ flex-wrap:wrap; row-gap:8px; }
  .locde-pop--neo .locde-pop-chan p{ flex:1 0 100%; }
  .locde-pop--neo .locde-pop-chan .locde-bo{ margin-right:auto; margin-left:-6px; }
  .locde-xem-pop{ height:40px; padding:0 18px; border-radius:999px; border:0; background:var(--l-bat); color:var(--l-bat-chu); font-size:14.5px; font-weight:700; white-space:nowrap; }
  .locde-xem-pop b{ font-variant-numeric:tabular-nums; }
}
/* máy tính hẹp / iPad ngang: ô tìm co lại, bớt khoảng */
@media (min-width:992px) and (max-width:1279px){
  .locde{ column-gap:10px; }
  .locde-dinh{ flex:1 1 150px; min-width:140px; }
  .locde-than{ gap:10px; }
  .locde-phan, .locde-phan + .locde-nhom{ padding-left:12px !important; }
  .locde-phan legend{ margin-right:8px; }
  .locde-phan-ds{ gap:2px; }
  .locde-nut{ padding:0 12px 0 14px; }
  .locde-dem--thanh{ padding:0 2px 0 6px; }
  .locde-dem--thanh b{ font-size:20px; }
}
/* màn cảm ứng khổ lớn: mọi chỗ chạm ≥ 44px */
@media (min-width:992px) and (pointer:coarse){
  .locde-bong-o{ width:44px; height:44px; }
  .locde-o{ min-height:44px; }
  .locde-chip-o, .locde-bo, .locde-xoa--chu, .locde-xem-pop{ height:44px; }
}
@keyframes locde-ha{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* ═════════════ 4. ĐIỆN THOẠI / MÁY TÍNH BẢNG < 992px ═════════════ */
@media (max-width:991px){
  /* .locde không tạo hộp ⇒ .locde-dinh dính theo cả khung lưới (.exam-wrap), không trôi theo hàng chip */
  .locde{ display:contents; }
  .locde-dem--thanh, .locde-nut, .locde-pop-chan{ display:none !important; }

  /* thanh dính: nền ĐẶC tràn mép, [ô tìm][Lọc (n)] — không bao giờ đè lên thẻ đề */
  .locde-dinh{ position:sticky; top:var(--locde-top,0px); z-index:30; display:flex; align-items:center; gap:8px;
    margin:0 -16px; padding:6px 16px; min-height:56px; background:var(--l-trang);
    box-shadow:0 1px 0 var(--l-vien-2); transition:box-shadow .2s; }
  .locde-dinh.is-dinh{ box-shadow:0 1px 0 var(--l-vien-2), 0 10px 22px -16px rgba(0,0,0,.45); }
  .locde-tim-o{ flex:1; min-width:0; height:44px; padding:0 14px; }
  input#locdeTim{ font-size:16px; }   /* ≥16px: iOS không tự phóng to */
  .locde-mo{ display:inline-flex; align-items:center; gap:8px; flex:none; height:44px; padding:0 14px 0 12px; border-radius:999px;
    border:1.5px solid var(--l-chu); background:var(--l-nen); color:var(--l-chu); font-size:15.5px; font-weight:700; }
  .locde-mo[aria-expanded=true]{ background:var(--l-nen-2); }
  .locde-tai{ left:16px; right:16px; bottom:0; }

  /* hàng «N đề · [dải chip cuộn ngang] · Xoá bộ lọc» — nút xoá đứng NGOÀI dải cuộn, luôn thấy trọn chữ */
  .locde-hang{ display:flex; align-items:center; gap:8px; min-height:44px; margin:8px 0 12px; }
  .locde-dem--hang{ flex:none; margin-right:2px; }
  .locde-dem--hang b{ font-size:18px; }
  .locde-hang .locde-chip{ flex:1 1 auto; min-width:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 40px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 40px),transparent 100%);
    padding:0 40px 0 10px; margin-left:-10px; }
  .locde-hang .locde-chip::-webkit-scrollbar{ display:none; }
  .locde-chip-o{ flex:none; height:44px; padding:0 10px 0 16px; font-size:15px; }
  .locde-hang > .locde-xoa--chu{ flex:none; height:44px; padding:0 2px 0 4px; margin:0 -2px 0 4px; }

  /* main.page-skill có z-index:1 ⇒ khi tấm trượt mở, gỡ tạm để lớp phủ + tấm đè được header (z 150) */
  html.locde-khoa main.page-skill{ z-index:auto !important; }
  .locde-man{ position:fixed; inset:0; z-index:1000; background:var(--l-phu); opacity:0; transition:opacity .22s; }
  .locde.is-mo .locde-man{ opacity:1; }

  /* tấm trượt từ đáy (≤599). Mép trên = ngay dưới thanh [ô tìm][Lọc] (JS đo --locde-tran lúc mở) ⇒ không bao giờ
     chém ngang nút «Lọc»; thanh vẫn hiện nguyên dưới lớp phủ. Dòng vh = dự phòng trình duyệt chưa có dvh. */
  .locde-khung{ position:fixed; left:0; right:0; bottom:0; z-index:1001; display:flex; flex-direction:column;
    max-height:min(calc(100vh - var(--locde-tran, 72px)), 820px); max-height:min(calc(100dvh - var(--locde-tran, 72px)), 820px);
    background:var(--l-nen); border-radius:24px 24px 0 0;
    box-shadow:0 -24px 60px -24px rgba(0,0,0,.45); transform:translateY(104%); visibility:hidden;
    transition:transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s; }
  .locde.is-mo .locde-khung{ transform:none; visibility:visible; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
  .locde-khung.is-keo{ transition:none !important; }
  .locde-khung-dau{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 12px 10px 20px; flex:none; touch-action:none; }
  .locde-keo{ position:absolute; top:8px; left:50%; width:40px; height:5px; margin-left:-20px; border-radius:3px; background:var(--l-vien); }
  .locde-khung-dau h2{ margin:0; font-size:20px; font-weight:800; letter-spacing:-.015em; color:var(--l-chu); line-height:1.25; }
  .locde-dong{ display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; border:0; background:var(--l-nen-2); color:var(--l-chu); }
  .locde-dong svg{ stroke-width:2.2; }
  .locde-than{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:2px 20px 12px;
    display:flex; flex-direction:column; }
  .locde .locde-khoi{ flex:none; padding:18px 0 22px; border-top:1px solid var(--l-vien-2); }
  /* khối ĐẦU theo thứ tự hiển thị (nhóm chết bị đẩy xuống cuối ⇒ không dùng :first-child) */
  .locde .locde-than > .locde-khoi:not(.is-can):not(.locde-khoi:not(.is-can) ~ .locde-khoi){ padding-top:4px; border-top:0; }
  /* còn nội dung bên dưới (JS: .co-duoi): mờ đáy vùng cuộn + bóng trên chân tấm ⇒ tiêu đề nhóm kế tiếp không trông như bị cắt */
  .locde-khung.co-duoi .locde-than{ -webkit-mask-image:linear-gradient(#000 calc(100% - 28px), transparent); mask-image:linear-gradient(#000 calc(100% - 28px), transparent); }
  .locde-khung.co-duoi .locde-khung-chan{ box-shadow:0 -12px 18px -14px rgba(0,0,0,.3); }
  html.ae-dark-mode .locde-khung.co-duoi .locde-khung-chan{ box-shadow:0 -12px 18px -12px rgba(0,0,0,.85); }

  /* nhóm chết (.is-can): giấu danh sách toàn ô 0, hiện 1 dòng giải thích, đẩy xuống CUỐI tấm (không ẩn hẳn — bố cục không nhảy) */
  .locde .locde-khoi.is-can{ order:9; }
  .locde .locde-khoi.is-can > legend, .locde .locde-khoi.is-can .locde-pop-dau h3{ color:var(--l-nhat) !important; }
  .locde .locde-khoi.is-can .locde-phan-ds, .locde .locde-khoi.is-can .locde-cot, .locde .locde-khoi.is-can .locde-pop-dau .locde-bo{ display:none !important; }
  .locde .locde-khoi.is-can .locde-pop-dau{ min-height:0; margin:0 0 12px; }
  .locde-phan .locde-can-ghi{ margin:0 0 2px; }
  .locde-phan legend, .locde-pop-dau h3{ display:block; margin:0 0 12px; font-size:16px; font-weight:700; color:var(--l-chu); }
  /* legend của fieldset nằm TRÊN viền trên (khe legend) ⇒ khi khối Passage không đứng đầu (nhóm khác chết/đổi chỗ)
     sẽ bị gạch ngang. Thả nổi legend ⇒ nó thành nhãn thường, viền trên vẽ liền */
  .locde:not(.locde--chi-phan) .locde-phan > legend{ float:left; width:100%; }
  .locde:not(.locde--chi-phan) .locde-phan > legend ~ *{ clear:both; }
  .locde-pop-dau{ margin:0 0 2px; min-height:44px; }   /* «Bỏ chọn» hiện/ẩn không làm danh sách nhảy dưới ngón tay */
  .locde-pop-dau h3{ margin:0; }
  .locde-pop-dau .locde-bo{ height:44px; }
  .locde-pop{ display:block; }

  /* bong bóng trong tấm trượt: hàng ô tô 48px, số đề nhỏ dưới mỗi ô */
  .locde-phan-ds{ display:flex; flex-wrap:wrap; gap:6px 10px; width:100%; padding:12px 12px 10px; border-radius:18px; background:var(--l-nen-2); box-shadow:none; }
  .locde-bong{ gap:6px; min-width:48px; }
  .locde-bong-o{ width:48px; height:48px; font-size:17px; }
  .locde-bong--chu .locde-bong-o{ padding:0 18px; font-size:15.5px; }
  .locde-bong-sl{ display:block; }

  /* họ dạng câu hỏi / bộ đề = nhóm dòng kiểu bảng iOS, dòng 50px (không cắt chữ) */
  .locde-ho{ display:block !important; margin-top:14px !important; }
  .locde-ho + .locde-ho{ margin-top:22px !important; }
  .locde-ho legend{ display:block; margin:0 0 8px 2px; font-size:13.5px; font-weight:600; }
  .locde .locde-ho-ds{ border-radius:14px; background:var(--l-nen-2); overflow:hidden; }
  .locde .locde-o{ min-height:50px; padding:0 16px 0 14px; margin:0; gap:12px; }
  .locde .locde-o + .locde-o::before{ content:""; position:absolute; left:46px; right:0; top:0; height:1px; background:var(--l-vien-2); pointer-events:none; }
  .locde-o.is-bat .locde-ten, .locde-o:has(input:checked) .locde-ten{ font-weight:650; }
  .locde-o:has(input:focus-visible){ box-shadow:inset 0 0 0 2px var(--l-chu); }
  .locde-ten{ font-size:15.5px; padding:12px 0; }
  .locde-sl{ font-size:14px; }

  .locde-khung-chan{ display:flex; gap:10px; flex:none; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--l-vien-2); background:var(--l-nen); }
  .locde-khung-chan .locde-xoa{ height:52px; padding:0 20px; border-radius:999px; border:1.5px solid var(--l-vien); background:var(--l-nen); color:var(--l-chu); font-size:16px; font-weight:700; white-space:nowrap; }
  .locde-khung-chan .locde-xoa:disabled{ opacity:.4; }
  .locde-xem{ flex:1; height:52px; border-radius:999px; border:0; background:var(--l-bat); color:var(--l-bat-chu); font-size:16px; font-weight:700; white-space:nowrap; }
  .locde-xem b{ font-variant-numeric:tabular-nums; }
  .locde-rong{ padding:26px 20px 22px; }

  /* Chép chính tả (chỉ có Part): bong bóng nằm ngay dưới thanh dính, không cần tấm trượt */
  .locde--chi-phan .locde-khung{ position:static; display:block; transform:none; visibility:visible; max-height:none; background:none; box-shadow:none; border-radius:0; transition:none; margin:10px 0 0; }
  .locde--chi-phan .locde-khung-dau{ display:none; }
  .locde--chi-phan .locde-than{ padding:0; overflow:visible; }
  .locde--chi-phan .locde-phan{ display:flex !important; align-items:center; gap:12px; padding:0 !important; border:0 !important; }
  .locde--chi-phan .locde-phan legend{ float:left; margin:0 12px 0 0; line-height:50px; font-size:15px; }
  /* rãnh bong bóng có SỐ ĐỀ nhỏ dưới mỗi ô (như trong tấm lọc) ⇒ đọc ra là bộ lọc, không lẫn với dải phân trang tròn ở đáy */
  .locde--chi-phan .locde-phan-ds{ display:inline-flex; flex-wrap:nowrap; width:auto; padding:6px 6px 7px; gap:4px; border-radius:18px; background:var(--l-ray); box-shadow:inset 0 0 0 1px var(--l-vien-2); }
  .locde--chi-phan .locde-bong{ gap:4px; min-width:44px; }
  .locde--chi-phan .locde-bong-o{ width:44px; height:44px; font-size:16px; }
  .locde--chi-phan .locde-bong-sl{ display:block; font-size:12px; }
  /* …và «N đề» đứng cùng hàng bên phải bong bóng (lưới 2 cột trên khung lưới; trình duyệt chưa có :has thì xếp 2 hàng).
     Số đề ở hàng bong bóng = .locde-dem--thanh (JS cập nhật mọi .locde-dem); hàng chip giữ nguyên dạng flex
     [dải chip][Xoá bộ lọc] trải hết bề ngang ⇒ nút xoá không chen vào cột số đề, bong bóng không bị ép xuống dòng */
  main.page-skill .exam-wrap.locde-wrap:has(> .locde--chi-phan){ display:grid !important; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; align-items:center; }
  main.page-skill .exam-wrap.locde-wrap:has(> .locde--chi-phan) > .skill-content,
  .locde--chi-phan > .locde-dinh, .locde--chi-phan > .locde-hang{ grid-column:1 / -1; }
  .locde--chi-phan > .locde-khung{ grid-column:1; justify-self:start; margin:12px 0; }
  .locde.locde--chi-phan > .locde-dem--thanh{ display:block !important; grid-column:2; justify-self:end; }
  .locde--chi-phan > .locde-dem--thanh b{ font-size:18px; }
  .locde--chi-phan .locde-dem--hang{ display:none; }
  .locde--chi-phan > .locde-hang{ margin:0 0 12px; }
  .locde--chi-phan:not(.co-loc) > .locde-hang{ display:none; }
  html.theme-skeuo .locde--chi-phan .locde-khung{ background:none; }
  /* Speaking hiện chưa còn ô lọc nào: chỉ ô tìm */
  .locde--chi-tim .locde-khung{ display:none; }
}
/* máy tính bảng dọc 600–991: tấm GIỮA rộng tối đa 560px (không trải hết 820px) */
@media (min-width:600px) and (max-width:991px){
  .locde:not(.locde--chi-phan) .locde-khung{ left:50%; right:auto; top:50%; bottom:auto; width:min(560px, calc(100% - 48px));
    max-height:min(84vh, 780px); max-height:min(84dvh, 780px); border-radius:24px;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.04);
    transform:translate(-50%,-47%) scale(.98); opacity:0;
    transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .2s, visibility 0s linear .24s; }
  .locde.is-mo:not(.locde--chi-phan) .locde-khung{ transform:translate(-50%,-50%); opacity:1; visibility:visible;
    transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .2s; }
  .locde-keo{ display:none; }
  .locde-khung-dau{ padding-top:18px; touch-action:auto; }
  .locde-khung-chan{ padding-bottom:14px; border-radius:0 0 24px 24px; }
  .locde-dinh{ margin:0 -16px; }
  .locde-tim-o{ max-width:none; }
}

/* giảm chuyển động */
@media (prefers-reduced-motion:reduce){
  .locde *, .locde-khung, .locde-man, .locde-dinh, body.alpha-locde .back-to-top, body.alpha-locde .back-to-top *{ transition:none !important; animation:none !important; }
  .locde-tai::after{ width:100%; opacity:.5; }
}

/* ── ô «lên đầu trang» — CHỈ trên 5 trang danh sách đề: tròn 44px theo skin, một mũi tên đứng yên ── */
body.alpha-locde .back-to-top{ width:44px; height:44px; border-radius:50%; right:16px; bottom:calc(20px + env(safe-area-inset-bottom,0px));
  background:var(--l-bat); border:0; box-shadow:0 10px 24px -10px rgba(12,14,18,.55); justify-content:center; }
body.alpha-locde .back-to-top .triangle{ animation:none !important; border-width:7px; border-bottom-width:7px; border-bottom-color:var(--l-bat-chu); margin:-7px 0 0; }
body.alpha-locde .back-to-top .triangle:nth-child(n+2){ display:none; }
html.ae-dark-mode body.alpha-locde .back-to-top{ background:var(--l-bat) !important; border-color:transparent !important; }
html.ae-dark-mode body.alpha-locde .back-to-top .triangle{ border-bottom-color:var(--l-bat-chu) !important; }
@media (min-width:992px){ body.alpha-locde .back-to-top{ right:24px; bottom:28px; } }
/* chỉ hiện khi đã cuộn quá 2 màn hình VÀ đang cuộn lên (JS đặt/bỏ .locde-btt-an) — cuộn xuống thì lui, không đè thẻ đề */
body.alpha-locde .back-to-top.locde-btt-an{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
  transform:translateY(14px) scale(.9) !important; transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s !important; }
body.alpha-locde .back-to-top.active:not(.locde-btt-an){ transition:opacity .2s ease, transform .2s cubic-bezier(.2,.8,.2,1), visibility 0s !important; }
@media (prefers-reduced-motion:reduce){
  body.alpha-locde .back-to-top.locde-btt-an, body.alpha-locde .back-to-top.active:not(.locde-btt-an){ transition:none !important; }
  body.alpha-locde .back-to-top.locde-btt-an{ transform:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. DA SKEUO (html.theme-skeuo) — chỉ đổi CHẤT LIỆU/MÀU, giữ kích thước.
   Sáng: giấy kem trên gỗ sồi, nút gel kem, ô chọn = gel xanh Aqua (iOS 6).
   Tối : gỗ óc chó, ô chọn = gel đồng thau. Tiêu đề / tên nhóm = Source Serif 4
   (site đã nạp ở functions.php — alpha-skin-fonts). Da phẳng giữ font của site.
   ═══════════════════════════════════════════════════════════════════════════ */
html.theme-skeuo .locde, html.theme-skeuo .locde-rong, html.theme-skeuo body.alpha-locde .back-to-top{
  --l-chu:#3d2f16; --l-chu-2:#5a4726; --l-nhat:#7a6844;
  --l-vien:#cdbf98; --l-vien-2:#e3d8b8;
  --l-nen:#fffdf7; --l-nen-2:#f5eedd; --l-ray:#ece2c7;
  --l-trang:linear-gradient(180deg,#fffdf6 0%,#f4ecd6 100%);
  --l-bat:#2f76d2; --l-bat-chu:#ffffff;
  --l-do:#d71920;
  --l-vong:0 0 0 3px rgba(76,145,230,.55);
  --l-gel:linear-gradient(180deg,#ffffff 0%,#f7f2e5 48%,#ece3cb 52%,#f4eedd 100%);
  --l-gel-bat:linear-gradient(180deg,#9cc6f8 0%,#4c91e6 48%,#2f76d2 52%,#4a90e2 100%);
  --l-gel-vien-bat:#255da6;
  --l-giay:linear-gradient(180deg,#fffefb 0%,#f7f0de 100%);
  --l-serif:"Source Serif 4", "Source Serif Pro", Georgia, serif;
  --l-tk-nen:rgba(76,145,230,.2);
}
html.theme-skeuo.ae-dark-mode .locde, html.theme-skeuo.ae-dark-mode .locde-rong, html.theme-skeuo.ae-dark-mode body.alpha-locde .back-to-top{
  --l-chu:#f1e6d0; --l-chu-2:#dccbaa; --l-nhat:#b9a582;
  --l-vien:rgba(255,214,150,.26); --l-vien-2:rgba(255,214,150,.14);
  --l-nen:#2b241c; --l-nen-2:#211b14; --l-ray:#1a150f;
  --l-trang:linear-gradient(180deg,#342a20 0%,#2a221a 100%);
  --l-bat:#d6a64c; --l-bat-chu:#3a2a08;
  --l-do:#e0343b;
  --l-vong:0 0 0 3px rgba(232,190,100,.55);
  --l-gel:linear-gradient(180deg,#4a3d2e 0%,#3b3024 48%,#30271d 52%,#382e23 100%);
  --l-gel-bat:linear-gradient(180deg,#f8e2a4 0%,#e0b85e 48%,#c8983c 52%,#dbad52 100%);
  --l-gel-vien-bat:#8a6424;
  --l-giay:linear-gradient(180deg,#3a3026 0%,#2c241b 100%);
  --l-phu:rgba(10,6,2,.62);
  --l-tk-nen:rgba(232,190,100,.22);
}
/* chữ serif khắc cho tiêu đề tấm trượt, tên nhóm, tên họ dạng */
html.theme-skeuo .locde .locde-khung-dau h2, html.theme-skeuo .locde .locde-phan legend, html.theme-skeuo .locde .locde-ho legend,
html.theme-skeuo .locde .locde-pop-dau h3, html.theme-skeuo .locde-rong h3{ font-family:var(--l-serif); letter-spacing:0; }
html.theme-skeuo .locde .locde-ho legend{ font-size:14px; font-weight:600; font-style:italic; }
html.theme-skeuo .locde .locde-khung-dau h2{ font-weight:700; font-size:21px; }
html.theme-skeuo .locde-rong h3{ font-weight:700; }

/* tấm giấy: thanh (máy tính), bảng thả, tấm trượt, ô rỗng, thanh dính (điện thoại) */
html.theme-skeuo .locde-rong{ background:var(--l-giay); border-color:#dccda2; box-shadow:inset 0 1px 0 #fff, 0 12px 26px -16px rgba(70,48,14,.55); }
html.theme-skeuo.ae-dark-mode .locde-rong{ border-color:rgba(255,214,150,.3); box-shadow:inset 0 1px 0 rgba(255,236,200,.08), 0 14px 30px -16px rgba(0,0,0,.7); }
@media (min-width:992px){
  html.theme-skeuo .locde{ background:var(--l-giay); border:1px solid #dccda2;
    box-shadow:inset 0 1px 0 #fff, 0 1px 0 rgba(255,255,255,.35), 0 14px 30px -16px rgba(70,48,14,.6); }
  html.theme-skeuo .locde.is-dinh{ box-shadow:inset 0 1px 0 #fff, 0 18px 36px -14px rgba(70,48,14,.7); }
  html.theme-skeuo .locde-pop{ background:var(--l-giay); border:1px solid #d8c89a;
    box-shadow:inset 0 1px 0 #fff, 0 30px 60px -20px rgba(60,40,10,.6), 0 2px 6px rgba(60,40,10,.18); }
  html.theme-skeuo .locde-pop-chan{ background:linear-gradient(180deg,#f7f0de,#efe5cb); border-top-color:#dccda2; box-shadow:inset 0 1px 0 #fff; }
  html.theme-skeuo .locde-hang{ border-top-color:#e6dbbb; box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
  html.theme-skeuo .locde-phan, html.theme-skeuo .locde-phan + .locde-nhom{ border-left-color:#e2d6b4 !important; box-shadow:-1px 0 0 rgba(255,255,255,.8); }
  html.theme-skeuo .locde-o:not(.is-0):hover{ background:rgba(214,190,130,.18); }
  html.theme-skeuo.ae-dark-mode .locde{ border-color:rgba(255,214,150,.3); box-shadow:inset 0 1px 0 rgba(255,236,200,.08), 0 16px 34px -16px rgba(0,0,0,.75); }
  html.theme-skeuo.ae-dark-mode .locde-pop{ border-color:rgba(255,214,150,.3); box-shadow:inset 0 1px 0 rgba(255,236,200,.08), 0 30px 64px -18px rgba(0,0,0,.85); }
  html.theme-skeuo.ae-dark-mode .locde-pop-chan{ background:linear-gradient(180deg,#2c241b,#241e16); border-top-color:rgba(255,214,150,.16); box-shadow:inset 0 1px 0 rgba(255,236,200,.05); }
  html.theme-skeuo.ae-dark-mode .locde-hang{ border-top-color:rgba(255,214,150,.14); box-shadow:inset 0 1px 0 rgba(0,0,0,.25); }
  html.theme-skeuo.ae-dark-mode .locde-phan, html.theme-skeuo.ae-dark-mode .locde-phan + .locde-nhom{ border-left-color:rgba(255,214,150,.16) !important; box-shadow:-1px 0 0 rgba(0,0,0,.3); }
  html.theme-skeuo.ae-dark-mode .locde-o:not(.is-0):hover{ background:rgba(255,214,150,.07); }
}
@media (max-width:991px){
  html.theme-skeuo .locde-khung{ background:var(--l-giay); }
  /* thanh dính = dải giấy kem có gờ dưới, nằm trên mặt gỗ */
  html.theme-skeuo .locde-dinh{ background:var(--l-trang); box-shadow:inset 0 1px 0 #fff, 0 1px 0 #c9b98c, 0 2px 0 rgba(255,255,255,.25); }
  html.theme-skeuo .locde-dinh.is-dinh{ box-shadow:inset 0 1px 0 #fff, 0 1px 0 #c9b98c, 0 10px 20px -12px rgba(60,40,10,.55); }
  html.theme-skeuo.ae-dark-mode .locde-dinh{ box-shadow:inset 0 1px 0 rgba(255,236,200,.07), 0 1px 0 rgba(0,0,0,.55), 0 2px 0 rgba(255,214,150,.06); }
  html.theme-skeuo.ae-dark-mode .locde-dinh.is-dinh{ box-shadow:inset 0 1px 0 rgba(255,236,200,.07), 0 1px 0 rgba(0,0,0,.55), 0 12px 22px -12px rgba(0,0,0,.8); }
  /* hàng «N đề · chip» nằm thẳng trên mặt gỗ ⇒ chữ khắc sáng/tối cho đọc được */
  html.theme-skeuo:not(.ae-dark-mode) .locde-dem--hang, html.theme-skeuo:not(.ae-dark-mode) .locde--chi-phan > .locde-dem--thanh{ color:#3d2c10 !important; text-shadow:0 1px 0 rgba(255,240,205,.55); }
  html.theme-skeuo:not(.ae-dark-mode) .locde-dem--hang b, html.theme-skeuo:not(.ae-dark-mode) .locde--chi-phan > .locde-dem--thanh b{ color:#2a1d08 !important; }
  html.theme-skeuo:not(.ae-dark-mode) .locde-hang .locde-xoa--chu{ color:#3d2c10 !important; text-shadow:0 1px 0 rgba(255,240,205,.55); }
  html.theme-skeuo .locde .locde-ho-ds{ background:linear-gradient(180deg,#fffefb,#fbf6e8); border:1px solid #cbbd94; box-shadow:0 1px 0 rgba(255,255,255,.9); }
  html.theme-skeuo .locde .locde-o{ text-shadow:0 1px 0 #fff; }
  html.theme-skeuo .locde .locde-o + .locde-o::before{ left:0; right:0; background:#e4dac0; box-shadow:0 1px 0 #fff; }
  html.theme-skeuo .locde .locde-khoi{ border-top-color:#e6dbbb; box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
  html.theme-skeuo .locde .locde-than > .locde-khoi:not(.is-can):not(.locde-khoi:not(.is-can) ~ .locde-khoi){ box-shadow:none; }
  html.theme-skeuo .locde .locde-phan-ds{ background:linear-gradient(180deg,#efe6cf,#f8f2e3); box-shadow:inset 0 1px 3px rgba(90,66,24,.18), 0 1px 0 #fff; }
  html.theme-skeuo.ae-dark-mode .locde .locde-ho-ds{ background:linear-gradient(180deg,#342a20,#2c241b); border-color:rgba(255,214,150,.2); box-shadow:0 1px 0 rgba(0,0,0,.35); }
  html.theme-skeuo.ae-dark-mode .locde .locde-o{ text-shadow:0 -1px 0 rgba(0,0,0,.5); }
  html.theme-skeuo.ae-dark-mode .locde .locde-o + .locde-o::before{ background:rgba(0,0,0,.4); box-shadow:0 1px 0 rgba(255,236,200,.06); }
  html.theme-skeuo.ae-dark-mode .locde .locde-khoi{ border-top-color:rgba(255,214,150,.12); box-shadow:inset 0 1px 0 rgba(0,0,0,.25); }
  html.theme-skeuo.ae-dark-mode .locde .locde-phan-ds{ background:linear-gradient(180deg,#17120d,#211a13); box-shadow:inset 0 2px 4px rgba(0,0,0,.55), 0 1px 0 rgba(255,236,200,.05); }
}

/* rãnh bong bóng (máy tính + Chép chính tả) = rãnh lõm khắc vào giấy */
html.theme-skeuo .locde-phan-ds{ background:linear-gradient(180deg,#e9dfc4,#f4eddb); box-shadow:inset 0 1px 3px rgba(90,66,24,.25), 0 1px 0 rgba(255,255,255,.9); }
html.theme-skeuo.ae-dark-mode .locde-phan-ds{ background:linear-gradient(180deg,#17120d,#211a13); box-shadow:inset 0 2px 4px rgba(0,0,0,.6), 0 1px 0 rgba(255,236,200,.06); }

/* ô tìm = rãnh lõm */
html.theme-skeuo .locde-tim-o{ background:linear-gradient(180deg,#efe6cf,#faf6ea); border:1px solid #c9ba90;
  box-shadow:inset 0 2px 3px rgba(90,66,24,.2), 0 1px 0 rgba(255,255,255,.85); }
html.theme-skeuo .locde-tim-o:focus-within{ border-color:#4c91e6; box-shadow:inset 0 2px 3px rgba(90,66,24,.16), 0 0 0 3px rgba(76,145,230,.35); }
html.theme-skeuo.ae-dark-mode .locde-tim-o{ background:linear-gradient(180deg,#17120d,#211a13); border-color:rgba(255,214,150,.22);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.55), 0 1px 0 rgba(255,236,200,.06); }
html.theme-skeuo.ae-dark-mode .locde-tim-o:focus-within{ border-color:#c8983c; box-shadow:inset 0 2px 4px rgba(0,0,0,.5), 0 0 0 3px rgba(232,190,100,.3); }

/* nút gel: bong bóng, nút thả, chip, nút mở, nút đóng, «Xoá bộ lọc» trong tấm trượt, «Bỏ X» */
html.theme-skeuo .locde-bong-o, html.theme-skeuo .locde-nut, html.theme-skeuo .locde-chip-o,
html.theme-skeuo .locde-mo, html.theme-skeuo .locde-dong, html.theme-skeuo .locde-khung-chan .locde-xoa, html.theme-skeuo .locde-rong .locde-rong-bo{
  background:var(--l-gel); border:1px solid #bfae83; color:var(--l-chu);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(90,66,24,.28);
  text-shadow:0 1px 0 rgba(255,255,255,.85); }
html.theme-skeuo .locde-bong:not(.is-0):not(.is-bat):hover .locde-bong-o, html.theme-skeuo .locde-nut:hover{ border-color:#9f8d5f; }
html.theme-skeuo .locde-nut[aria-expanded=true], html.theme-skeuo .locde-mo[aria-expanded=true]{ background:linear-gradient(180deg,#ebe2c9,#f6f0e0); box-shadow:inset 0 2px 4px rgba(90,66,24,.25); border-color:#a8966a; }
html.theme-skeuo .locde-bong.is-bat .locde-bong-o, html.theme-skeuo .locde-bong:has(input:checked) .locde-bong-o{
  background:var(--l-gel-bat); border-color:var(--l-gel-vien-bat); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 6px rgba(10,50,120,.25), 0 1px 2px rgba(20,50,100,.35);
  text-shadow:0 -1px 0 rgba(0,35,90,.55); }
html.theme-skeuo .locde-bong.is-0 .locde-bong-o{ box-shadow:none; background:transparent; }
html.theme-skeuo .locde-nut-so{ background:var(--l-gel-bat); color:#fff; border:1px solid var(--l-gel-vien-bat); text-shadow:0 -1px 0 rgba(0,35,90,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
html.theme-skeuo .locde-so{ background:linear-gradient(180deg,#ff7a7f 0%,#e2262d 48%,#c3171d 52%,#dc2a30 100%); border:1px solid #8f0f14;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(80,0,0,.35); text-shadow:0 -1px 0 rgba(90,0,5,.5); }
/* ô tick skeuo */
html.theme-skeuo .locde-tick{ background:linear-gradient(180deg,#fff,#efe7d2); border:1px solid #b9a77a; box-shadow:inset 0 1px 1px rgba(90,66,24,.15), 0 1px 0 #fff; }
html.theme-skeuo .locde-o.is-bat .locde-tick, html.theme-skeuo .locde-o:has(input:checked) .locde-tick{
  background:var(--l-gel-bat); border-color:var(--l-gel-vien-bat); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
html.theme-skeuo .locde-tick svg{ stroke:#fff; filter:drop-shadow(0 -1px 0 rgba(0,35,90,.5)); }
html.theme-skeuo .locde-pop-dau h3, html.theme-skeuo .locde-phan legend, html.theme-skeuo .locde-khung-dau h2,
html.theme-skeuo .locde-dem b, html.theme-skeuo .locde-rong h3{ text-shadow:0 1px 0 rgba(255,255,255,.8); }
html.theme-skeuo .locde-bo, html.theme-skeuo .locde-xoa--chu{ color:#6a5428; text-shadow:0 1px 0 rgba(255,255,255,.7); }
/* nút chính = gel xanh (sáng) */
html.theme-skeuo .locde-xem, html.theme-skeuo .locde-xem-pop, html.theme-skeuo .locde-rong .locde-xoa{
  background:var(--l-gel-bat); border:1px solid var(--l-gel-vien-bat); color:#fff; text-shadow:0 -1px 0 rgba(0,35,90,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -4px 8px rgba(10,50,120,.22), 0 2px 5px rgba(20,50,100,.35); }
html.theme-skeuo .locde-khung-dau{ border-bottom:1px solid #e3d6b2; box-shadow:0 1px 0 rgba(255,255,255,.7); }
html.theme-skeuo .locde-keo{ background:#cbbb8f; box-shadow:inset 0 1px 1px rgba(90,66,24,.35), 0 1px 0 #fff; }
html.theme-skeuo .locde-khung-chan{ background:linear-gradient(180deg,#f6efdc,#efe5cb); border-top:1px solid #dccda2; box-shadow:inset 0 1px 0 #fff; }
/* còn nội dung bên dưới: bóng CỘNG DỒN với gờ trắng sẵn có */
html.theme-skeuo .locde-khung.co-duoi .locde-khung-chan{ box-shadow:inset 0 1px 0 #fff, 0 -12px 18px -14px rgba(70,48,14,.5); }
/* dòng giải thích nhóm chết = mẩu giấy lõm trên tấm */
html.theme-skeuo .locde-can-ghi{ background:linear-gradient(180deg,#f3ecd9,#faf6ea); border:1px solid #dccda2; box-shadow:inset 0 1px 2px rgba(90,66,24,.12), 0 1px 0 #fff; text-shadow:0 1px 0 rgba(255,255,255,.7); }
/* ô «lên đầu trang» skeuo = gel than chì (sáng) */
html.theme-skeuo body.alpha-locde .back-to-top{ background:linear-gradient(180deg,#5a5f67 0%,#2b2f35 48%,#16191d 52%,#2a2e34 100%) !important;
  border:1px solid #0b0d10 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px -10px rgba(40,24,6,.7) !important; }
html.theme-skeuo body.alpha-locde .back-to-top .triangle{ border-bottom-color:#fff !important; }

/* ── skeuo TỐI: gel gỗ + đồng thau ── */
html.theme-skeuo.ae-dark-mode .locde-bong-o, html.theme-skeuo.ae-dark-mode .locde-nut,
html.theme-skeuo.ae-dark-mode .locde-chip-o, html.theme-skeuo.ae-dark-mode .locde-mo, html.theme-skeuo.ae-dark-mode .locde-dong,
html.theme-skeuo.ae-dark-mode .locde-khung-chan .locde-xoa, html.theme-skeuo.ae-dark-mode .locde-rong .locde-rong-bo{
  border-color:rgba(255,214,150,.28); color:var(--l-chu); text-shadow:0 -1px 0 rgba(0,0,0,.55);
  box-shadow:inset 0 1px 0 rgba(255,236,200,.14), 0 1px 2px rgba(0,0,0,.5); }
html.theme-skeuo.ae-dark-mode .locde-bong:not(.is-0):not(.is-bat):hover .locde-bong-o, html.theme-skeuo.ae-dark-mode .locde-nut:hover{ border-color:rgba(255,214,150,.5); }
html.theme-skeuo.ae-dark-mode .locde-nut[aria-expanded=true], html.theme-skeuo.ae-dark-mode .locde-mo[aria-expanded=true]{ background:linear-gradient(180deg,#1c1610,#2a221a); border-color:rgba(255,214,150,.4); box-shadow:inset 0 2px 5px rgba(0,0,0,.6); }
html.theme-skeuo.ae-dark-mode .locde-bong.is-bat .locde-bong-o, html.theme-skeuo.ae-dark-mode .locde-bong:has(input:checked) .locde-bong-o,
html.theme-skeuo.ae-dark-mode .locde-nut-so, html.theme-skeuo.ae-dark-mode .locde-xem, html.theme-skeuo.ae-dark-mode .locde-xem-pop, html.theme-skeuo.ae-dark-mode .locde-rong .locde-xoa{
  background:var(--l-gel-bat); border-color:var(--l-gel-vien-bat); color:#3a2a08; text-shadow:0 1px 0 rgba(255,240,200,.6);
  box-shadow:inset 0 1px 0 rgba(255,250,225,.7), inset 0 -3px 6px rgba(120,80,10,.25), 0 1px 3px rgba(0,0,0,.5); }
html.theme-skeuo.ae-dark-mode .locde-tick{ background:linear-gradient(180deg,#1a140e,#2a2119); border-color:rgba(255,214,150,.3); box-shadow:inset 0 1px 2px rgba(0,0,0,.5); }
html.theme-skeuo.ae-dark-mode .locde-o.is-bat .locde-tick, html.theme-skeuo.ae-dark-mode .locde-o:has(input:checked) .locde-tick{ background:var(--l-gel-bat); border-color:var(--l-gel-vien-bat); }
html.theme-skeuo.ae-dark-mode .locde-tick svg{ stroke:#3a2a08; filter:none; }
html.theme-skeuo.ae-dark-mode .locde-pop-dau h3, html.theme-skeuo.ae-dark-mode .locde-phan legend, html.theme-skeuo.ae-dark-mode .locde-khung-dau h2,
html.theme-skeuo.ae-dark-mode .locde-dem b, html.theme-skeuo.ae-dark-mode .locde-rong h3{ text-shadow:0 -1px 0 rgba(0,0,0,.6); }
html.theme-skeuo.ae-dark-mode .locde .locde-bo, html.theme-skeuo.ae-dark-mode .locde .locde-xoa--chu{ color:#e2c98f !important; text-shadow:0 -1px 0 rgba(0,0,0,.5); }
html.theme-skeuo.ae-dark-mode .locde-khung-dau{ border-bottom-color:rgba(255,214,150,.14); box-shadow:0 1px 0 rgba(0,0,0,.35); }
html.theme-skeuo.ae-dark-mode .locde-keo{ background:rgba(255,214,150,.3); box-shadow:inset 0 1px 1px rgba(0,0,0,.5); }
html.theme-skeuo.ae-dark-mode .locde-khung-chan{ background:linear-gradient(180deg,#241e16,#1c1711); border-top-color:rgba(255,214,150,.16); box-shadow:inset 0 1px 0 rgba(255,236,200,.05); }
html.theme-skeuo.ae-dark-mode .locde-khung.co-duoi .locde-khung-chan{ box-shadow:inset 0 1px 0 rgba(255,236,200,.05), 0 -12px 18px -12px rgba(0,0,0,.8); }
html.theme-skeuo.ae-dark-mode .locde-can-ghi{ background:linear-gradient(180deg,#1a150f,#231c14); border-color:rgba(255,214,150,.16); box-shadow:inset 0 2px 4px rgba(0,0,0,.45), 0 1px 0 rgba(255,236,200,.05); text-shadow:0 -1px 0 rgba(0,0,0,.45); }
html.theme-skeuo.ae-dark-mode body.alpha-locde .back-to-top{ background:var(--l-gel-bat) !important; border:1px solid #7a561c !important;
  box-shadow:inset 0 1px 0 rgba(255,250,225,.75), 0 10px 22px -10px rgba(0,0,0,.85) !important; }
html.theme-skeuo.ae-dark-mode body.alpha-locde .back-to-top .triangle{ border-bottom-color:#3a2a08 !important; }