/*
Theme Name: JunHSK
Theme URI: https://trungquanstore.com
Author: Trung Quân
Description: Theme học tiếng Trung / luyện thi HSK cho người Việt. Âm Hán Việt, pinyin, flashcard, sổ tay, lộ trình, thanh toán VNĐ và nhân dân tệ. Nhánh từ theme JunTopik.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: juntopik
Tags: education, custom-menu, translation-ready
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --ink:#000;
  --paper:#fff;
  --pink:#D7263D;
  --pink-soft:#FFEFF4;
  --pink-line:#FFC9D9;
  --pink-brush:#FF5C8A;
  --yellow:#FFE01A;
  --blue:#0E6DBE;
  --muted:#1f1f1f;

  --bd:3px;
  --line:var(--ink);
  --sh:4px 4px 0 var(--ink);
  --sh-sm:3px 3px 0 var(--ink);
  --r:14px;
  --r-sm:10px;

  --sidebar-w:270px;
  --bg-app:#fff;
  --bg-main:#fff;
  --surface:#fff;
  --surface-2:#f4f4f5;
  /* Chữ phụ cũng giữ gần đen: sáng là chữ đen, tối là chữ trắng, dễ đọc hơn xám. */
  --text-soft:#1f1f1f;
  --font:"Be Vietnam Pro","BeVietnamPro",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}

/* Màu phụ suy ra từ màu chủ đạo, nên đổi --pink là cả site đổi theo. */
@supports (color:color-mix(in srgb,red 50%,white)){
  :root{
    --pink-brush:color-mix(in srgb,var(--pink) 86%,white);
    --pink-soft:color-mix(in srgb,var(--pink) 7%,white);
    --pink-line:color-mix(in srgb,var(--pink) 24%,white);
  }
  html[data-mode="dark"]{
    --pink-brush:color-mix(in srgb,var(--pink) 82%,black);
    --pink-soft:color-mix(in srgb,var(--pink) 10%,#101014);
    --pink-line:color-mix(in srgb,var(--pink) 22%,#101014);
  }
  @media (prefers-color-scheme:dark){
    html[data-mode="auto"]{
      --pink-brush:color-mix(in srgb,var(--pink) 82%,black);
      --pink-soft:color-mix(in srgb,var(--pink) 10%,#101014);
      --pink-line:color-mix(in srgb,var(--pink) 22%,#101014);
    }
  }
}

/* ---- MẪU GIAO DIỆN ----
   Đổi vài token là đổi cả dáng site: độ dày viền, bo góc, đổ bóng, nền.
   Không đụng tới bố cục hay chức năng, chỉ là lớp áo. */

/* Mềm: viền mảnh xám, bo tròn nhiều, bóng đổ mờ kiểu ứng dụng di động. */
html[data-skin="mem"]{
  --bd:1px;
  --line:#e2e3e8;
  --r:18px;
  --r-sm:12px;
  --sh:0 6px 18px rgba(0,0,0,.09);
  --sh-sm:0 3px 10px rgba(0,0,0,.07);
  --bg-app:#fff;
  --surface-2:#f7f8fa;
}
html[data-skin="mem"][data-mode="dark"],
html[data-skin="mem"][data-mode="auto"]{
  --line:#33343c;
  --sh:0 6px 18px rgba(0,0,0,.5);
  --sh-sm:0 3px 10px rgba(0,0,0,.4);
}

/* Phẳng: gần như không viền, không bóng, góc vuông vức, tối giản. */
html[data-skin="phang"]{
  --bd:1px;
  --line:#e6e6ea;
  --r:6px;
  --r-sm:4px;
  --sh:none;
  --sh-sm:none;
  --bg-app:#fff;
  --surface-2:#f1f1f3;
}
html[data-skin="phang"][data-mode="dark"],
html[data-skin="phang"][data-mode="auto"]{
  --line:#2e2f36;
}

/* Kính: thẻ trong mờ, nhìn xuyên thấy nền phía sau.
   Cần --surface trong suốt một phần, nên chỗ nào chồng thẻ lên thẻ sẽ hơi đục
   hơn — đó là chủ ý, cho ra cảm giác nhiều lớp kính. */
html[data-skin="kinh"]{
  --bd:1px;
  --line:rgba(255,255,255,.55);
  --r:18px;
  --r-sm:12px;
  --sh:0 8px 28px rgba(31,45,90,.14);
  --sh-sm:0 3px 12px rgba(31,45,90,.10);
  --surface:rgba(255,255,255,.62);
  --surface-2:rgba(255,255,255,.42);
  --paper:rgba(255,255,255,.78);
}

/* Làm mờ nền sau thẻ. Trình duyệt không hỗ trợ thì chỉ mất hiệu ứng mờ,
   thẻ vẫn trong mờ và đọc được bình thường. */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  html[data-skin="kinh"] .card,
  html[data-skin="kinh"] .du-khoi,
  html[data-skin="kinh"] .ht-chon,
  html[data-skin="kinh"] .ld-chon,
  html[data-skin="kinh"] .ld-bai,
  html[data-skin="kinh"] .ld-ket,
  html[data-skin="kinh"] .bxh-buc-o,
  html[data-skin="kinh"] .bxh-hang,
  html[data-skin="kinh"] .bxh-qua,
  html[data-skin="kinh"] .sdl-the,
  html[data-skin="kinh"] .sd-cau,
  html[data-skin="kinh"] .du-hang,
  html[data-skin="kinh"] .du-cau,
  html[data-skin="kinh"] .ht-bong,
  html[data-skin="kinh"] .player,
  html[data-skin="kinh"] .vs-hop,
  html[data-skin="kinh"] .ptc-cau,
  html[data-skin="kinh"] .toggle{
    -webkit-backdrop-filter:blur(14px) saturate(150%);
    backdrop-filter:blur(14px) saturate(150%);
  }
}

/* Viền sáng ở mép trên cho ra chất kính, chỉ áp cho các thẻ lớn. */
html[data-skin="kinh"] .card,
html[data-skin="kinh"] .du-khoi,
html[data-skin="kinh"] .ht-chon,
html[data-skin="kinh"] .ld-chon,
html[data-skin="kinh"] .bxh-qua,
html[data-skin="kinh"] .vs-hop{
  box-shadow:var(--sh), inset 0 1px 0 rgba(255,255,255,.75);
}

html[data-skin="kinh"][data-mode="dark"],
html[data-skin="kinh"][data-mode="auto"]{
  --line:rgba(255,255,255,.14);
  --surface:rgba(32,33,40,.58);
  --surface-2:rgba(32,33,40,.40);
  --paper:rgba(24,25,31,.72);
  --sh:0 8px 28px rgba(0,0,0,.45);
  --sh-sm:0 3px 12px rgba(0,0,0,.35);
}
html[data-skin="kinh"][data-mode="dark"] .card,
html[data-skin="kinh"][data-mode="dark"] .du-khoi,
html[data-skin="kinh"][data-mode="dark"] .ht-chon,
html[data-skin="kinh"][data-mode="dark"] .ld-chon,
html[data-skin="kinh"][data-mode="dark"] .bxh-qua,
html[data-skin="kinh"][data-mode="dark"] .vs-hop{
  box-shadow:var(--sh), inset 0 1px 0 rgba(255,255,255,.10);
}

/* ---- CHẾ ĐỘ TỐI ---- */
html[data-mode="dark"]{
  --ink:#fff;
  --paper:#1b1b20;
  --yellow:#F2C230;
  --bg-app:#0d0d10;
  --bg-main:#111114;
  --surface:#1b1b20;
  --surface-2:#26262d;
  --text-soft:#f2f2f4;
  --muted:#f2f2f4;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  html[data-mode="auto"]{
    --ink:#fff;
    --paper:#1b1b20;
    --yellow:#F2C230;
    --bg-app:#0d0d10;
    --bg-main:#111114;
    --surface:#1b1b20;
    --surface-2:#26262d;
    --text-soft:#f2f2f4;
    --muted:#f2f2f4;
    color-scheme:dark;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  background:var(--bg-app);
  color:var(--ink);
  padding:12px;
  -webkit-font-smoothing:antialiased;
}
body.admin-bar{padding-top:44px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--line);outline-offset:2px}
.screen-reader-text{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

/* ============================================================
   2. KHUNG APP
   ============================================================ */
.app{
  display:flex;
  max-width:1900px;
  margin:0 auto;
  height:calc(100vh - 24px);
  border:var(--bd) solid var(--line);
  border-radius:22px;
  overflow:hidden;
  background:var(--paper);
}
body.admin-bar .app{height:calc(100vh - 68px)}

/* ============================================================
   3. SIDEBAR
   ============================================================ */
.sidebar{
  width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  border-right:var(--bd) solid var(--line);
  background:var(--paper);
  display:flex;
  flex-direction:column;
  padding:16px 14px;
  overflow-y:auto;
  scrollbar-width:thin;
}

.brand{display:flex;align-items:center;gap:8px;padding:2px 4px 18px}
.brand-mark{
  background:var(--ink);color:#fff;border-radius:var(--r-sm);
  padding:4px 7px;font-size:13px;font-weight:700;line-height:1;
}
.brand-name{font-size:16px;font-weight:800;letter-spacing:.5px;line-height:1.1}
.brand-name i{font-style:normal}
.brand-name i:nth-child(odd){color:#00A3E0}
.brand-name i:nth-child(even){color:var(--pink)}
.brand-name small{display:block;font-size:10px;color:var(--muted);font-weight:600;letter-spacing:2px}

.nav-label{
  font-size:11px;font-weight:700;color:var(--muted);
  letter-spacing:1.4px;padding:0 8px 8px;
}

.nav{display:flex;flex-direction:column;gap:4px}
.nav-item{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:9px 10px;border-radius:var(--r-sm);
  font-size:14px;font-weight:600;text-align:left;
  border:var(--bd) solid transparent;
  transition:background .12s ease;
}
.nav-item:hover{background:var(--surface-2)}
.ico{flex:0 0 20px;width:20px;height:20px;display:block}
.nav-item .ico{flex:0 0 20px;width:20px;height:20px;display:block}
.nav-item .chev{margin-left:auto;width:14px;height:14px;transition:transform .18s ease}
.nav-item[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-item.is-active{
  background:var(--pink);color:#fff;
  border-color:var(--ink);box-shadow:var(--sh-sm);
}
.nav-item.is-active:hover{background:var(--pink)}

.badge{
  margin-left:auto;background:var(--yellow);
  border:var(--bd) solid var(--line);border-radius:6px;
  font-size:10px;font-weight:700;padding:1px 6px;line-height:1.5;
}

.submenu{display:none;flex-direction:column;gap:2px;padding:4px 0 4px 40px}
.submenu.is-open{display:flex}
.submenu a{font-size:13px;font-weight:500;color:var(--text-soft);padding:6px 8px;border-radius:var(--r-sm)}
.submenu a:hover{background:var(--surface-2);color:var(--ink)}

.btn-upgrade{
  display:flex;align-items:center;gap:10px;
  margin:16px 0 0;padding:11px 12px;
  background:var(--yellow);border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-sm);
  font-size:14px;font-weight:700;
}
.btn-upgrade:active{transform:translate(3px,3px);box-shadow:none}

.sidebar-foot{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:4px}
.btn-login{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:10px;padding:12px;
  background:var(--pink);color:#fff;
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
  font-size:14px;font-weight:700;
}
.btn-login:active{transform:translate(3px,3px);box-shadow:none}

.user-chip{
  display:flex;align-items:center;gap:9px;margin-top:10px;padding:9px 10px;
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
  background:var(--surface);font-size:13px;font-weight:700;
}
.user-chip img{border-radius:50%;border:var(--bd) solid var(--line)}
.user-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================================================
   4. VÙNG NỘI DUNG — NỀN TRẮNG TINH
   ============================================================ */
.main{
  flex:1;position:relative;overflow-y:auto;
  background:var(--bg-main);
}
.brush{
  position:absolute;top:-40px;right:0;left:auto;
  width:min(880px,66%);height:auto;
  pointer-events:none;z-index:0;
}
.brush-stroke{opacity:.85}

/* ---- chữ chạy ở nền ---- */
.bg-word{
  font-family:var(--font);
  font-weight:800;letter-spacing:-1px;
  color:transparent;
  -webkit-text-stroke:1.6px var(--pink-brush);
  fill:none;stroke:var(--pink-brush);stroke-width:1.6;
}
@supports not (-webkit-text-stroke:1px red){
  .bg-word{color:rgba(255,92,138,.28)}
}

/* kiểu hàng ngang */
.bg-rows{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-around;
  padding:40px 0;
}
.bg-row{
  display:flex;flex:0 0 auto;white-space:nowrap;
  animation-name:junRunLeft;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
.bg-row--rtl{animation-name:junRunRight}
.bg-track{display:inline-flex;align-items:center;gap:26px;padding-right:26px}
.bg-rows .bg-word{font-size:clamp(30px,5vw,80px);line-height:1.1}
.bg-dot{color:var(--pink-line);font-size:clamp(18px,2.6vw,40px)}

.bg-rows.is-static .bg-row{animation:none}
.bg-rows.is-static .bg-track:last-child{display:none}

@keyframes junRunLeft{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@keyframes junRunRight{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}

/* kiểu nét cọ viết ra chữ */
.bg-write{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:min(1000px,86%);height:auto;
  overflow:visible;
  z-index:0;pointer-events:none;
}
/* Nội dung luôn nằm trên lớp chữ nền, kể cả các khối không có nền riêng. */
.content > *{position:relative;z-index:1}

/* Nét cọ vẽ ra từng chữ cái.
   Mỗi chữ là một path thật nên đặt pathLength=100, nét chạy ra chính xác
   theo phần trăm. Vẽ xong giữ khoảng hai giây rồi mờ đi và vẽ lại. */
.bg-stroke{
  fill:none;
  stroke:var(--pink-brush);
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation:junStroke var(--jun-write,8s) ease-in-out infinite;
}
/* Nét trong màu nền, chồng lên nét ngoài để chữ thành viền rỗng ruột. */
.bg-stroke--in{stroke:var(--pink-soft)}
@keyframes junStroke{
  0%   {stroke-dashoffset:100;opacity:1}
  6%   {stroke-dashoffset:0;opacity:1}
  72%  {stroke-dashoffset:0;opacity:1}
  86%  {stroke-dashoffset:0;opacity:0}
  100% {stroke-dashoffset:100;opacity:0}
}

/* kiểu vòng tròn */
.bg-rings{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:min(1100px,120vmin);height:min(1100px,120vmin);
  z-index:0;pointer-events:none;
}
.bg-rings .bg-word{
  font-size:44px;letter-spacing:2px;
  -webkit-text-stroke:0;
}
.ring{
  transform-origin:500px 500px;
  animation-name:junSpin;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
.ring--back{animation-direction:reverse}
@keyframes junSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* ---- chữ nền theo từng cỡ máy ---- */

/* máy tính rộng: chữ to, nhiều hàng vẫn thoáng */
@media (min-width:1400px){
  .bg-rows .bg-word{font-size:clamp(56px,4.4vw,96px)}
  .bg-track{gap:34px;padding-right:34px}
}

/* máy tính bảng nằm ngang */
@media (max-width:1200px){
  .brush{width:min(680px,60%)}
  .bg-rows .bg-word{font-size:clamp(34px,5.6vw,64px)}
  .bg-rings .bg-word{font-size:46px}
}

/* máy tính bảng dựng đứng */
@media (max-width:900px){
  .bg-rows{padding:26px 0}
  .bg-track{gap:20px;padding-right:20px}
  .bg-rows .bg-word{font-size:clamp(30px,6.4vw,52px);-webkit-text-stroke-width:1.4px}
  .bg-rings{width:135vmin;height:135vmin}
  .bg-rings .bg-word{font-size:50px}
  .bg-write{width:92%}
}

/* điện thoại: bớt hàng cho đỡ rối, chữ vừa tầm nhìn */
@media (max-width:600px){
  .brush{width:130%;top:-16px;right:-30px}
  .bg-rows{padding:14px 0}
  .bg-track{gap:14px;padding-right:14px}
  .bg-rows .bg-word{font-size:clamp(26px,8vw,40px);-webkit-text-stroke-width:1.2px;letter-spacing:-.5px}
  .bg-dot{font-size:16px}
  .bg-row:nth-child(n+5){display:none}
  .bg-rings{width:170vmin;height:170vmin}
  .bg-rings .bg-word{font-size:58px;letter-spacing:1px}
  .bg-write{width:96%}
}

/* điện thoại nhỏ */
@media (max-width:380px){
  .bg-rows .bg-word{font-size:26px}
  .bg-row:nth-child(n+4){display:none}
}

/* máy nằm ngang, màn thấp: giảm số hàng cho khỏi chật */
@media (max-height:520px) and (orientation:landscape){
  .bg-rows{padding:8px 0}
  .bg-row:nth-child(n+4){display:none}
  .bg-rows .bg-word{font-size:clamp(24px,5vw,38px)}
}

@media (prefers-reduced-motion:reduce){
  .bg-row,.ring{animation:none!important}
  .bg-stroke{animation:none!important;stroke-dashoffset:0}
}

.content{position:relative;z-index:1;padding:26px 40px 90px;max-width:1440px;margin:0 auto}

.notice{
  background:var(--paper);
  border:var(--bd) solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);
  padding:20px 24px;margin-bottom:28px;
}
.notice h1{font-size:24px;font-weight:800;margin-bottom:12px}
.notice p,.notice .notice-body{font-size:14px;line-height:1.7;max-width:74ch}
.notice .notice-body p + p{margin-top:6px}
.notice a{color:var(--pink);text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* bài viết / trang thường */
.entry{
  background:var(--paper);border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);
  padding:26px 30px;margin-bottom:22px;
}
.entry-title{font-size:26px;font-weight:800;line-height:1.25;margin-bottom:10px}
.entry-meta{font-size:12px;color:var(--text-soft);margin-bottom:16px}
.entry-content{font-size:15px;line-height:1.75;max-width:72ch}
.entry-content > * + *{margin-top:14px}
.entry-content h2{font-size:20px;font-weight:800;margin-top:26px}
.entry-content h3{font-size:17px;font-weight:700;margin-top:22px}
.entry-content a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.entry-content ul,.entry-content ol{padding-left:22px}
.entry-content li + li{margin-top:6px}
.entry-content blockquote{
  border-left:5px solid var(--line);padding:4px 0 4px 14px;font-style:italic;
}
.entry-content img{border:var(--bd) solid var(--line);border-radius:var(--r-sm)}

.pager{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.pager a,.pager span{
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
  box-shadow:var(--sh-sm);padding:8px 14px;font-size:13px;font-weight:700;
}
.pager .current{background:var(--pink);color:#fff}

/* ============================================================
   5. KỆ SÁCH
   ============================================================ */
.series{margin-bottom:30px}
.sec-head{border-left:5px solid var(--line);padding-left:12px;margin-bottom:14px}
.sec-head h2{font-size:20px;font-weight:800;line-height:1.3}
.sec-head p{font-size:12px;color:var(--text-soft);margin-top:1px}

.shelf{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}

.book{
  position:relative;display:block;
  aspect-ratio:3/4;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
  box-shadow:var(--sh);overflow:hidden;
  transition:transform .12s ease,box-shadow .12s ease;
}
.book:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.book:active{transform:translate(3px,3px);box-shadow:none}
.book-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* bìa HSK xanh */
.book--topik{background:var(--bg,var(--blue));display:grid;place-items:center}
.disc{width:72%;aspect-ratio:1;border-radius:50%;border:6px dotted #fff;padding:5px}
.disc-in{
  width:100%;height:100%;border-radius:50%;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:6px;
}
.disc-in strong{font-size:clamp(14px,2.1vw,26px);font-weight:800;letter-spacing:-.5px;line-height:1}
.disc-in em{font-size:clamp(7px,.85vw,11px);font-style:italic;color:#222;margin-top:3px;line-height:1.2}
.book--topik .num{
  position:absolute;right:8px;bottom:2px;
  font-size:clamp(30px,4.6vw,56px);font-weight:800;color:#fff;line-height:1;
}

/* bìa Màu Sắc */
.book--color{background:var(--bg);padding:8px;display:flex;flex-direction:column}
.book--color .tag{font-size:8px;font-weight:700}
.book--color .lock{
  position:absolute;top:6px;right:6px;width:13px;height:13px;
  border-radius:50%;background:#fff;border:var(--bd) solid var(--line);
}
.book--color .ct-title{
  margin-top:2px;font-size:clamp(9px,1.15vw,14px);font-weight:800;
  white-space:nowrap;line-height:1.2;
}
.book--color .ct-title i{font-style:normal;color:var(--accent,#D5006D)}
.pattern{
  margin:6px auto;width:72%;
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid rgba(0,0,0,.25);
}
.pattern i{display:block;aspect-ratio:1}
.book--color .ct-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:4px}
.book--color .ct-foot span{font-size:8px;font-weight:800;line-height:1.15;max-width:52px}
.pill{
  width:20px;height:20px;border-radius:50%;
  background:var(--pillbg,#111);color:var(--pillink,#fff);
  display:grid;place-items:center;font-size:11px;font-weight:800;
}

/* bìa Màu Vàng (núi) */
.book--peak{background:#fff}
.book--peak .peak{
  position:absolute;left:-6%;bottom:0;width:78%;height:88%;
  background:#B07C46;clip-path:polygon(50% 0,100% 100%,0 100%);
}
.book--peak .peak::after{
  content:"";position:absolute;right:0;bottom:0;width:42%;height:100%;
  background:rgba(255,255,255,.22);clip-path:polygon(100% 0,100% 100%,0 100%);
}
.book--peak .han{
  position:absolute;top:16%;left:0;right:0;text-align:center;
  font-size:9px;font-weight:700;color:#4a3620;
}
.book--peak .num{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:clamp(34px,5vw,60px);font-weight:800;line-height:1;
}
.book--peak .seal{
  position:absolute;left:50%;bottom:9%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;
  background:#2B4FA0;border:2px solid #C9302C;
}
.book--peak .lockbox{position:absolute;top:6px;right:6px;width:16px;height:16px}

/* ============================================================
   6. NÚT NỔI + MOBILE
   ============================================================ */
.fabs{position:fixed;right:26px;bottom:24px;display:flex;flex-direction:column;gap:10px;z-index:5}
.fab{
  display:flex;align-items:center;gap:7px;
  padding:9px 14px;background:var(--pink);color:#fff;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm);
  font-size:13px;font-weight:700;
}
.fab:active{transform:translate(3px,3px);box-shadow:none}

.menu-btn{
  display:none;position:fixed;top:22px;left:22px;z-index:20;
  width:44px;height:44px;background:var(--paper);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm);
  place-items:center;
}
body.admin-bar .menu-btn{top:60px}
.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:9}
.scrim.is-open{display:block}

@media (max-width:1100px){ .shelf{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:860px){
  body{padding:0}
  .app{height:100vh;border:0;border-radius:0}
  body.admin-bar .app{height:calc(100vh - 46px)}
  .menu-btn{display:grid}
  .sidebar{
    position:fixed;top:0;bottom:0;left:0;z-index:10;
    transform:translateX(-102%);transition:transform .22s ease;
    box-shadow:6px 0 0 rgba(0,0,0,.15);
  }
  .sidebar.is-open{transform:none}
  .content{padding:80px 18px 90px}
  .entry{padding:20px 18px}
  .shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .notice h1{font-size:20px}
}
@media (max-width:520px){ .shelf{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ============================================================
   7. THANH TRÊN CÙNG CHO ĐIỆN THOẠI
   ============================================================ */
.mobile-bar{display:none}
.mobile-brand{display:flex;align-items:center;gap:8px}
.mobile-brand .brand-name{font-size:15px}

/* ============================================================
   8. TRÌNH ĐỌC SÁCH
   ============================================================ */
.reader{margin-bottom:26px}

/* thanh công cụ */
.reader-bar{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;row-gap:8px;
  background:var(--paper);border:var(--bd) solid var(--line);
  border-radius:12px 12px 0 0;box-shadow:var(--sh);
  padding:10px 14px;
}

.reader-group{display:inline-flex;align-items:center;gap:6px}
.reader-step{
  width:30px;height:30px;flex:0 0 30px;
  display:grid;place-items:center;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);background:var(--surface);
}
.reader-step svg{width:15px;height:15px}
.reader-step:hover{background:var(--pink);color:#fff}
.reader-step:active{transform:translate(1px,1px)}
.reader-group input{
  width:54px;padding:5px 6px;text-align:center;
  font:inherit;font-size:13px;font-weight:700;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);background:var(--surface);
}
.reader-total{font-size:13px;font-weight:700;color:var(--text-soft);min-width:34px}
.reader-zoomval{
  min-width:56px;padding:5px 6px;font-size:12px;font-weight:700;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);background:var(--surface);
}
.reader-btn{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;font-size:13px;font-weight:800;
  background:var(--yellow);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.reader-btn svg{width:15px;height:15px}
.reader-btn:active{transform:translate(1px,1px)}

/* khung sách */
.reader-stage{
  position:relative;
  background:#3A2A1C;
  border:var(--bd) solid var(--line);border-top:0;
  border-radius:0 0 12px 12px;box-shadow:var(--sh);
  padding:14px;
}
.reader-scroll{
  position:relative;
  width:100%;height:clamp(460px,72vh,1000px);
  overflow:auto;
  display:flex;align-items:flex-start;justify-content:center;
  background:#1d1d1d;border-radius:4px;
  -webkit-overflow-scrolling:touch;
}
#junCanvas{
  display:block;margin:10px auto;background:#fff;
  box-shadow:0 8px 26px rgba(0,0,0,.5);
  opacity:0;transition:opacity .18s ease;
}
#junCanvas.is-ready{opacity:1}

/* bìa hiện ngay trong lúc trang đầu đang dựng */
.reader-cover{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  max-width:min(86%,380px);max-height:86%;
  border-radius:3px;box-shadow:0 10px 30px rgba(0,0,0,.55);
  z-index:2;
}
.reader-cover[hidden]{display:none}

/* dòng trạng thái */
.reader-status{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:3;max-width:86%;text-align:center;
  padding:8px 16px;border-radius:var(--r-sm);
  background:rgba(0,0,0,.8);color:#fff;
  font-size:12px;font-weight:600;
}
.reader-status[hidden]{display:none}
.reader-status a{color:#ffd84d;text-decoration:underline}

/* vùng chạm lật trang */
.reader-tap{
  position:absolute;top:60px;bottom:40px;width:13%;
  background:transparent;border:0;cursor:pointer;z-index:1;
}
.reader-tap--prev{left:14px}
.reader-tap--next{right:14px}
.reader-tap:hover{background:rgba(255,255,255,.06)}

.reader-hint{font-size:12px;color:var(--text-soft);margin-top:10px}

/* toàn màn hình: dùng cả :fullscreen lẫn class dự phòng */
#junReader:fullscreen,
.reader.is-faux{
  position:fixed;inset:0;z-index:9999;margin:0;
  display:flex;flex-direction:column;background:#141414;
}
#junReader:fullscreen .reader-bar,
.reader.is-faux .reader-bar{
  border-radius:0;box-shadow:none;border-left:0;border-right:0;border-top:0;
}
#junReader:fullscreen .reader-stage,
.reader.is-faux .reader-stage{
  flex:1;min-height:0;padding:0;background:#141414;
  border:0;border-radius:0;box-shadow:none;
}
#junReader:fullscreen .reader-scroll,
.reader.is-faux .reader-scroll{height:100%;background:#141414}
#junReader:fullscreen .reader-hint,
.reader.is-faux .reader-hint{display:none}
#junReader:fullscreen .reader-status,
.reader.is-faux .reader-status{
  top:50%;bottom:auto;transform:translate(-50%,-50%);font-size:14px;padding:12px 20px;
}
#junReader:fullscreen .reader-tap,
.reader.is-faux .reader-tap{top:0;bottom:0;width:16%}
.reader.is-faux .reader-tap--prev{left:0}
.reader.is-faux .reader-tap--next{right:0}

/* màn chắn khi sách bị khoá */
.reader-gate{
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;
  background:var(--paper);border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);padding:26px;
}
.reader-gate img{
  width:150px;border:var(--bd) solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.reader-gate h2{font-size:20px;font-weight:800;margin-bottom:6px}
.reader-gate p{font-size:14px;color:var(--text-soft);margin-bottom:14px}

/* ============================================================
   9. ĐIỆN THOẠI
   ============================================================ */
@media (max-width:860px){
  .mobile-bar{
    display:flex;align-items:center;gap:12px;
    position:sticky;top:0;z-index:8;
    background:var(--paper);
    border-bottom:var(--bd) solid var(--line);
    padding:8px 12px;
  }
  .menu-btn{
    display:grid;position:static;top:auto;left:auto;
    width:40px;height:40px;box-shadow:var(--sh-sm);
  }
  .content{padding:18px 14px 90px}

  .reader-bar{padding:8px 10px;gap:8px}
  .reader-btn{padding:7px 10px}
  .reader-btn span{display:none}
  .reader-stage{padding:8px}
  .reader-scroll{height:calc(100vh - 260px);min-height:360px}
  .reader-tap{width:18%;top:20px;bottom:20px}
  .reader-hint{font-size:11px}
}

/* ============================================================
   10. TRANG CÀI ĐẶT HIỂN THỊ
   ============================================================ */
.prefs .entry-title{font-size:19px}

.swatches{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.swatch{
  width:46px;height:46px;padding:0;
  background:var(--sw,#ccc);
  border:var(--bd) solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-sm);
  position:relative;
}
.swatch:active{transform:translate(2px,2px);box-shadow:none}
.swatch.is-active::after{
  content:"";position:absolute;inset:6px;
  border:3px solid #fff;border-radius:6px;
  box-shadow:0 0 0 2px rgba(0,0,0,.35);
}
.swatch--custom{
  display:grid;place-items:center;overflow:hidden;
  background:conic-gradient(#E5322F,#F2B705,#2E9E4F,#2F7BE0,#7A4BE0,#FF3D77,#E5322F);
  cursor:pointer;
}
.swatch--custom input{
  width:150%;height:150%;border:0;padding:0;background:none;
  opacity:0;cursor:pointer;
}

.modes{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.mode{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 18px;font-size:14px;font-weight:700;
  background:var(--surface);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-sm);
}
.mode svg{width:18px;height:18px}
.mode:active{transform:translate(2px,2px);box-shadow:none}
.mode.is-active{background:var(--pink);color:#fff}

.prefs-foot{display:flex;align-items:center;gap:14px;margin-top:24px;flex-wrap:wrap}
.prefs-reset{
  padding:9px 16px;font-size:13px;font-weight:700;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.prefs-reset:hover{background:var(--surface-2)}
.prefs-note{
  font-size:13px;font-weight:700;color:#1e7e34;
}
.prefs-note.is-bad{color:#c0392b}
.prefs-note[hidden]{display:none}

/* vài chỗ cần chỉnh riêng khi ở chế độ tối */
html[data-mode="dark"] .book--peak,
html[data-mode="dark"] #junCanvas{filter:none}
html[data-mode="dark"] .reader-stage{background:#26201a}
html[data-mode="dark"] .notice a{text-decoration-color:var(--pink)}

/* ============================================================
   11. FORM DÙNG CHUNG
   ============================================================ */
.form{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field > span{font-size:13px;font-weight:700}
.field input,.field textarea,.field select,
.member-filter input,.member-filter select{
  width:100%;padding:11px 13px;
  font:inherit;font-size:14px;
  color:var(--ink);background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.field textarea{resize:vertical;min-height:80px}
.field input:focus,.field textarea:focus{outline:0;box-shadow:var(--sh-sm)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field-hint{font-size:12px;color:var(--text-soft)}

.check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.check input{width:16px;height:16px;accent-color:var(--pink)}

.btn-primary{
  padding:13px 20px;font-size:14px;font-weight:800;
  background:var(--pink);color:#fff;
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
}
.btn-primary:active{transform:translate(3px,3px);box-shadow:none}
.btn-sm{padding:10px 16px;font-size:13px}

.btn-file{
  display:inline-block;position:relative;overflow:hidden;
  padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;
  background:var(--yellow);color:#111;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.btn-file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-note{
  margin-top:14px;padding:11px 14px;font-size:13px;font-weight:700;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
  background:#ffe9ec;color:#a01128;
}
.form-note--ok{background:#e6f6ec;color:#186c37}
html[data-mode="dark"] .form-note{background:#3a1620;color:#ffb3c0}
html[data-mode="dark"] .form-note--ok{background:#123322;color:#8fe0ae}

/* ============================================================
   12. ĐĂNG NHẬP / ĐĂNG KÝ
   ============================================================ */
.auth{display:flex;justify-content:center;padding:20px 0 40px}
.auth-card{
  width:100%;max-width:440px;
  background:var(--paper);
  border:var(--bd) solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:28px 26px;
}
.auth-card h1{font-size:24px;font-weight:800}
.auth-sub{font-size:13px;color:var(--text-soft);margin-top:4px}
.auth-foot{
  display:flex;flex-direction:column;gap:8px;
  margin-top:18px;padding-top:16px;
  border-top:var(--bd) solid var(--line);
  font-size:13px;
}
.auth-foot a{color:var(--pink);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   13. BẢNG ĐIỀU KHIỂN THÀNH VIÊN
   ============================================================ */
.dash-head{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:var(--paper);
  border:var(--bd) solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:22px 26px;margin-bottom:22px;
}
.dash-avatar img{
  width:110px;height:110px;border-radius:50%;object-fit:cover;
  border:var(--bd) solid var(--line);box-shadow:var(--sh-sm);
}
.dash-id h1{font-size:24px;font-weight:800}
.dash-meta{font-size:12px;color:var(--text-soft);margin-top:4px}
.dash-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{
  padding:7px 14px;font-size:12px;font-weight:700;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.chip:hover{background:var(--pink);color:#fff}
.chip--out{background:var(--yellow);color:#111}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}

.avatar-edit{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.avatar-edit img{
  width:88px;height:88px;border-radius:50%;object-fit:cover;
  border:var(--bd) solid var(--line);
}

/* ============================================================
   14. QUẢN LÝ THÀNH VIÊN
   ============================================================ */
.stats{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 20px}
.stat{
  padding:12px 18px;min-width:110px;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r);
}
.stat strong{display:block;font-size:22px;font-weight:800}
.stat span{font-size:11px;color:var(--text-soft);font-weight:600}

.member-filter{display:flex;gap:10px;flex-wrap:wrap}
.member-filter input{flex:1;min-width:180px}
.member-filter select{width:auto;min-width:150px}

.member-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.member{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 14px;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r);
}
.member img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:var(--bd) solid var(--line)}
.member-info{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px}
.member-info strong{font-size:15px;font-weight:800}
.member-info span{font-size:12px;color:var(--text-soft);word-break:break-word}
.member-dates{font-size:11px}
.member-act{margin:0}
.member-act select{
  padding:8px 10px;font:inherit;font-size:12px;font-weight:700;
  color:var(--ink);background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.member-role{font-size:12px;font-weight:700;color:var(--text-soft)}
.btn-del{
  width:34px;height:34px;font-size:18px;font-weight:800;line-height:1;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.btn-del:hover{background:#c0392b;color:#fff}

@media (max-width:860px){
  .dash-grid{grid-template-columns:1fr}
  .dash-head{padding:18px;gap:16px}
  .dash-avatar img{width:84px;height:84px}
  .field-row{grid-template-columns:1fr}
  .auth-card{padding:22px 18px}
}
.form-note--warn{background:#fff6e0;color:#8a5b00}
html[data-mode="dark"] .form-note--warn{background:#3a2e10;color:#ffd98a}

/* chữ nền luôn nằm dưới nội dung và không bắt chuột */
.bg-rows,.bg-rings,.bg-write,.brush{user-select:none}

/* ============================================================
   15. TRANG SÁCH: ĐẦU TRANG
   ============================================================ */
.crumb{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:700;color:var(--ink);
  margin-bottom:16px;
}
.crumb svg{width:16px;height:16px}
.crumb:hover{color:var(--pink)}

.hero{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;margin-bottom:24px}
.hero-cover img{
  width:150px;aspect-ratio:3/4;object-fit:cover;display:block;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh);
}
.hero-text{flex:1;min-width:240px}
.hero-tags{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.hero-badge{
  padding:5px 14px;font-size:12px;font-weight:800;
  background:var(--pink);color:#fff;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.hero-sub{font-size:13px;font-weight:600;color:var(--text-soft)}
.hero-title{font-size:clamp(24px,4vw,34px);font-weight:800;line-height:1.25}
.hero-title span{
  background:var(--yellow);color:#111;
  padding:2px 12px;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.hero-desc{font-size:14px;line-height:1.7;color:var(--text-soft);margin-top:10px;max-width:70ch}

/* ============================================================
   16. THẺ KỸ NĂNG
   ============================================================ */
.skills{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.skills-label{font-size:13px;font-weight:800;letter-spacing:1px;color:var(--text-soft)}
.skill{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;
  background:var(--surface);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  font-size:15px;
}
.skill svg{width:18px;height:18px}
.skill b{font-weight:800}
.skill i{font-style:normal;font-size:13px;opacity:.7}
.skill:active{transform:translate(3px,3px);box-shadow:none}
.skill.is-active{background:var(--pink);color:#fff}

/* ============================================================
   17. DANH SÁCH BÀI HỌC
   ============================================================ */
.lessons{margin-bottom:24px}
.lessons-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.lessons-head h2{font-size:14px;font-weight:800;letter-spacing:1.5px;color:var(--text-soft)}
.lessons-search{
  margin-left:auto;min-width:180px;flex:1;max-width:300px;
  padding:9px 13px;font:inherit;font-size:13px;
  color:var(--ink);background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}

.lesson{
  display:flex;align-items:center;gap:16px;
  padding:16px 18px;
  background:var(--surface);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);
  margin-bottom:14px;
  transition:transform .12s ease,box-shadow .12s ease;
}
.lesson[hidden]{display:none}
.lesson:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.lesson:active{transform:translate(3px,3px);box-shadow:none}

.lesson-no{
  flex:0 0 auto;min-width:46px;height:46px;
  display:grid;place-items:center;padding:0 8px;
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
  font-size:18px;font-weight:800;
}
.lesson:hover .lesson-no{background:var(--pink);color:#fff}
.lesson-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lesson-text strong{font-size:19px;font-weight:800;line-height:1.2;word-break:break-word}
.lesson-text span{font-size:13px;color:var(--text-soft)}
.lesson-arrow{width:22px;height:22px;flex:0 0 22px;color:var(--text-soft)}
.lesson:hover .lesson-arrow{color:var(--pink)}

.lessons-empty{font-size:13px;color:var(--text-soft);padding:10px 4px}
.lessons-empty[hidden]{display:none}

.skill-panel[hidden]{display:none}
#junReader[hidden]{display:none}

@media (max-width:860px){
  .hero{gap:16px}
  .hero-cover img{width:110px}
  .skills{gap:8px}
  .skill{padding:10px 14px;font-size:14px}
  .skills-label{width:100%}
  .lessons-search{margin-left:0;max-width:none;width:100%}
  .lesson > summary{padding:13px 12px;gap:12px}
  .lesson-no{min-width:40px;height:40px;font-size:16px}
  .lesson-text strong{font-size:17px}
  }

/* ============================================================
   18. TRANG MỘT BÀI HỌC
   ============================================================ */
.lp-tags{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.lp-badge{
  padding:6px 16px;font-size:14px;font-weight:800;
  background:var(--pink);color:#fff;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.lp-ko{font-size:15px;font-weight:700;color:var(--text-soft)}
.lp-meta{font-size:14px;color:var(--text-soft)}

.lp-title{font-size:clamp(26px,5.5vw,40px);font-weight:800;line-height:1.25}
.lp-title span{
  background:var(--pink-line);color:var(--ink);
  padding:2px 10px;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.lp-peek{
  font-size:17px;font-style:italic;color:var(--text-soft);
  margin:12px 0 20px;word-break:break-word;
}

.lp-actions{display:flex;justify-content:flex-end;margin-bottom:18px}
.lp-all{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 22px;font-size:15px;font-weight:800;
  background:var(--yellow);color:#111;
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
}
.lp-all svg{width:19px;height:19px}
.lp-all:active{transform:translate(3px,3px);box-shadow:none}

/* thẻ từ vựng / mẫu ngữ pháp */
.card{
  background:var(--paper);
  border:var(--bd) solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);margin-bottom:18px;overflow:hidden;
}
.card-top{display:flex;gap:14px;padding:18px 20px;align-items:flex-start}
.card-no{font-size:15px;font-weight:700;color:var(--text-soft);padding-top:8px}
.card-main{flex:1;min-width:0}
.card-term{font-size:clamp(24px,5vw,32px);font-weight:800;line-height:1.25;word-break:break-word}
.card-read{font-size:15px;font-style:italic;color:var(--text-soft);margin-top:4px}
.card-note{font-size:15px;font-weight:800;color:#d2601a;margin-top:6px}
.card-mean{font-size:17px;font-weight:700;color:var(--blue);margin-top:6px;line-height:1.5}
.card--gram .card-mean{font-size:16px}

.card-btns{display:flex;gap:8px;flex:0 0 auto}
.card-btn{
  width:44px;height:44px;flex:0 0 44px;
  display:grid;place-items:center;
  background:var(--surface);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.card-btn svg{width:20px;height:20px}
.card-btn:active{transform:translate(2px,2px);box-shadow:none}
.card-btn.is-playing{background:var(--pink);color:#fff}

.card-ex{
  display:flex;align-items:center;gap:14px;
  padding:16px 20px;
  background:#eef8ee;
  border-top:var(--bd) solid var(--line);
}
html[data-mode="dark"] .card-ex{background:#16241a}
.card-ex > div{flex:1;min-width:0}
.card-ex-ko{font-size:17px;line-height:1.5;word-break:break-word}
.card-ex-vi{font-size:15px;color:var(--text-soft);margin-top:6px}

.lp-nav{display:flex;justify-content:space-between;gap:12px;margin:24px 0 10px}
.lp-nav-btn{
  padding:11px 20px;font-size:14px;font-weight:800;
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
}
.lp-nav-btn:hover{background:var(--pink);color:#fff}
.lp-nav-btn--next{margin-left:auto}

@media (max-width:860px){
  .lp-all{width:100%;justify-content:center}
  .lp-actions{margin-bottom:14px}
  .card-top{padding:14px;gap:10px}
  .card-btn{width:40px;height:40px;flex:0 0 40px}
  .card-ex{padding:13px 14px}
}

/* ============================================================
   19. TRANG TỔNG HỢP TỪ VỰNG / NGỮ PHÁP
   ============================================================ */
.arc-head{
  background:var(--paper);
  border:var(--bd) solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:22px 24px;margin-bottom:22px;
}
.arc-head h1{font-size:26px;font-weight:800}
.arc-head p{font-size:14px;color:var(--text-soft);margin-top:6px;max-width:70ch}
.arc-search{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.arc-search input{
  flex:1;min-width:200px;padding:12px 14px;
  font:inherit;font-size:14px;
  color:var(--ink);background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}

.arc-results{margin-bottom:24px}
.hit{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 16px;margin-bottom:8px;
  background:var(--surface);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r);
}
.hit:hover{background:var(--yellow)}
.hit-main{flex:1;min-width:200px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hit-main strong{font-size:18px;font-weight:800}
.hit-main em{font-size:13px;color:var(--text-soft)}
.hit-mean{font-size:14px;color:var(--blue);font-weight:700}
.hit-src{font-size:12px;color:var(--text-soft);font-weight:600}

.arc-book{
  display:flex;align-items:center;gap:16px;
  padding:14px 16px;margin-bottom:14px;
  background:var(--surface);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  transition:transform .12s ease,box-shadow .12s ease;
}
.arc-book:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.arc-book:active{transform:translate(3px,3px);box-shadow:none}
.arc-book img{
  width:56px;aspect-ratio:3/4;object-fit:cover;flex:0 0 56px;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.arc-book-blank{
  width:56px;aspect-ratio:3/4;flex:0 0 56px;
  display:grid;place-items:center;
  background:var(--pink);color:#fff;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
  font-size:22px;font-weight:800;
}
.arc-book-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.arc-book-cat{font-size:11px;font-weight:800;color:var(--pink);letter-spacing:.5px}
.arc-book-text strong{font-size:17px;font-weight:800;line-height:1.25}
.arc-book-meta{font-size:13px;color:var(--text-soft)}

@media (max-width:860px){
  .arc-head{padding:16px 14px}
  .arc-search input{min-width:0}
  .arc-book{padding:12px;gap:12px}
}

/* ============================================================
   20. HỎI AI
   ============================================================ */
.card-ai{background:var(--blue,#3f5efb);color:#fff}
.card-ai:hover{filter:brightness(1.08)}

/* Nút nổi hiện ngay dưới phần chữ đang chọn — giờ tự lo việc chọn chữ (xem
   assets/js/ai.js) nên không còn lo bị menu Chép/Dán của trình duyệt đè lên
   nữa, đặt sát chỗ đang chọn cho dễ thấy đang dịch đúng đoạn nào. Toạ độ
   top/left do JS tính lại mỗi lần chọn, ở đây chỉ khai style. Màu xanh dương
   cố định (giống các nút Hỏi AI khác trên trang), không đổi theo chủ đề
   theo mùa như nút hồng thường thấy. */
.ai-pick{
  position:fixed;top:0;left:0;
  z-index:9997;
  padding:11px 20px;font-size:14px;font-weight:800;white-space:nowrap;
  background:var(--blue,#0E6DBE);color:#fff;
  border:var(--bd) solid var(--line);border-radius:99px;box-shadow:var(--sh);
  animation:ai-pick-len .15s ease-out;
}
.ai-pick[hidden]{display:none}
@keyframes ai-pick-len{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ai-pick{animation:none}}

.ai-sheet{position:fixed;inset:0;z-index:9998;display:flex;align-items:flex-end;justify-content:center}
.ai-sheet[hidden]{display:none}
.ai-sheet-back{
  position:absolute;inset:0;background:rgba(0,0,0,.45);
  opacity:0;transition:opacity .25s ease;
}
.ai-sheet.is-open .ai-sheet-back{opacity:1}
.ai-sheet-panel{
  position:relative;width:100%;max-width:720px;max-height:86vh;
  display:flex;flex-direction:column;
  background:var(--paper);
  border:var(--bd) solid var(--line);border-bottom:0;
  border-radius:18px 18px 0 0;
  transform:translateY(100%);transition:transform .25s ease;
}
.ai-sheet.is-open .ai-sheet-panel{transform:translateY(0)}
.ai-sheet-grip{
  width:64px;height:5px;margin:10px auto 0;flex:0 0 auto;
  background:var(--ink);opacity:.25;border-radius:99px;
}
.ai-sheet-head{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px 14px;flex:0 0 auto;
  border-bottom:var(--bd) solid var(--line);
}
.ai-sheet-head h2{flex:1;min-width:0;font-size:22px;font-weight:800;word-break:break-word}
.ai-sheet-btns{display:flex;gap:8px;flex:0 0 auto}
.ai-sheet-body{
  padding:18px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  font-size:15px;line-height:1.65;
}

.ai-head{font-size:20px;margin-bottom:12px}
.ai-head b{font-weight:800}
.ai-head i{font-size:14px;color:var(--text-soft);font-style:italic}

.ai-row{display:flex;gap:10px;margin-bottom:12px;align-items:flex-start}
.ai-row strong{font-weight:800}
.ai-ico{
  width:24px;height:24px;flex:0 0 24px;margin-top:1px;
  display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:6px;
  font-size:12px;font-weight:800;line-height:1;
}
.ai-warn .ai-ico{background:#f6c343}

.ai-list{list-style:none;margin-top:6px;display:flex;flex-direction:column;gap:8px}
.ai-list li{padding-left:12px;border-left:3px solid var(--pink-line,var(--surface-2))}
.ai-list b{font-weight:800}
.ai-list i{font-size:13px;color:var(--text-soft);font-style:italic}
.ai-list--ex span{display:block;color:var(--text-soft);font-size:14px}

.ai-foot{margin-top:18px;font-size:12px;color:var(--text-soft);font-style:italic}

.ai-load{padding:34px 0;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--text-soft)}
.ai-spin{
  width:30px;height:30px;border-radius:50%;
  border:3px solid var(--surface-2);border-top-color:var(--pink);
  animation:ai-spin .8s linear infinite;
}
@keyframes ai-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .ai-spin{animation-duration:2s}
  .ai-sheet-panel,.ai-sheet-back{transition:none}
}

.ai-fail{padding:26px 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.ai-fail p{color:var(--text-soft)}

@media (max-width:860px){
  .ai-sheet-panel{max-height:90vh}
  .ai-sheet-body{padding:15px}
  .ai-sheet-head{padding:10px 14px 12px}
  .ai-sheet-head h2{font-size:19px}
}

.form-note a{color:inherit;text-decoration:underline;text-underline-offset:3px;margin-left:8px}
/* thông báo chặn đăng nhập dài hơn một dòng, cho thở và tách nút liên hệ ra */
.form-note strong{font-weight:800}
.form-note br + a,
.form-note a[target="_blank"]{
  display:inline-block;margin:8px 0 0;padding:7px 12px;
  font-size:13px;font-weight:800;text-decoration:none;
  background:var(--ink);color:var(--paper);
  border-radius:var(--r-sm);
}


/* ============================================================
   23. TRANG NÂNG CẤP TÀI KHOẢN
   Cùng ngôn ngữ với trang Lộ trình: nền trắng, thẻ theo token của mẫu
   giao diện (viền, bo góc, bóng), chữ đen / trắng, màu gói chỉ làm điểm nhấn.
   Màu gói lấy từ Quản trị > Gói nâng cấp qua --plan-btn và --plan-bg.
   ============================================================ */
.upgrade-page{width:min(1040px,100%);margin:0 auto;padding:6px 0 44px}

.upgrade-head{
  display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;
  margin-bottom:20px;
}
.upgrade-crown{
  grid-row:1 / span 2;width:52px;height:52px;display:grid;place-items:center;
  color:var(--pink);background:var(--pink-soft);border-radius:var(--r-sm);
}
.upgrade-crown .ico{width:26px;height:26px}
.upgrade-head h1{margin:0;font-size:clamp(24px,4vw,34px);font-weight:900;line-height:1.2}
.upgrade-head p{margin:0;font-size:15px;line-height:1.6;color:var(--text-soft)}

/* ưu đãi */
.upgrade-promo{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  margin-bottom:26px;padding:14px 16px;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-sm);
}
.upgrade-promo-icon{
  width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:#1877f2;color:#fff;font-size:22px;font-weight:900;font-family:Arial,sans-serif;
}
.upgrade-promo-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.upgrade-promo-copy strong{font-size:15px;line-height:1.4}
.upgrade-promo-copy span{font-size:13px;line-height:1.55;color:var(--text-soft)}
.upgrade-promo-btn{
  padding:10px 16px;background:#1877f2;color:#fff;border-radius:99px;
  font-size:13px;font-weight:800;white-space:nowrap;
}
.upgrade-promo-btn:hover{filter:brightness(1.06)}

/* tiêu đề nhóm */
.upgrade-section-title{display:flex;align-items:center;gap:9px;margin:0 0 14px}
.upgrade-section-title > span{
  display:grid;place-items:center;width:30px;height:30px;
  color:var(--pink);background:var(--pink-soft);border-radius:var(--r-sm);
  font-size:15px;font-weight:900;
}
.upgrade-section-title .ico{width:17px;height:17px}
.upgrade-section-title h2{margin:0;font-size:19px;font-weight:900}
.upgrade-section-title--compare{margin-top:34px}

/* thẻ gói */
.upgrade-plans{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;align-items:stretch;
}
.upgrade-plan{
  position:relative;display:flex;flex-direction:column;min-width:0;
  padding:22px 20px 20px;overflow:hidden;
  background:var(--surface);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
}
/* vạch màu gói ở mép trên */
.upgrade-plan::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:var(--plan-btn,var(--pink));
}
.upgrade-plan.is-featured{
  border-color:var(--plan-btn,var(--pink));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--plan-btn,var(--pink)) 22%,transparent),var(--sh-sm);
}
.upgrade-ribbon{
  position:absolute;top:16px;right:16px;padding:4px 11px;
  background:var(--plan-btn,var(--pink));color:#fff;border-radius:99px;
  font-size:11px;font-weight:900;letter-spacing:.3px;
}

.upgrade-plan-title{display:flex;gap:12px;align-items:center;padding-right:84px}
.upgrade-plan-icon{
  width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;
  font-size:21px;font-weight:900;border-radius:var(--r-sm);
  background:var(--surface-2);
  background:color-mix(in srgb,var(--plan-btn,var(--pink)) 14%,var(--surface));
  color:var(--plan-btn,var(--pink));
}
.upgrade-plan-title h3{margin:0;font-size:18px;font-weight:900;line-height:1.25}
.upgrade-plan-title span{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--text-soft)}

.upgrade-price{
  display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;
  margin:18px 0 6px;
}
.upgrade-price strong{font-size:32px;font-weight:900;letter-spacing:-.5px;line-height:1.1}
.upgrade-price small{font-size:14px;font-weight:700;color:var(--text-soft)}
.upgrade-price-alt{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px}
.upgrade-price-alt span{
  padding:3px 10px;font-size:12px;font-weight:800;
  background:var(--surface-2);border-radius:99px;
}

.upgrade-features{
  list-style:none;display:flex;flex-direction:column;gap:9px;flex:1;
  margin:14px 0 18px;padding:14px 0 0;border-top:1px solid var(--surface-2);
}
.upgrade-features li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.5}
.upgrade-features li span{
  flex:0 0 20px;width:20px;height:20px;margin-top:1px;display:grid;place-items:center;
  font-size:11px;font-weight:900;line-height:1;color:#fff;
  background:#1f8a4c;border-radius:50%;
}

.upgrade-buy{
  display:block;text-align:center;padding:13px 12px;
  background:var(--plan-btn,var(--pink));color:#fff;
  border-radius:var(--r-sm);font-size:15px;font-weight:900;
  transition:filter .15s;
}
.upgrade-buy:hover{filter:brightness(1.07)}
.upgrade-buy:active{filter:brightness(.95)}

/* gói đang dùng: nút thành viền, có dấu nhỏ ở góc */
.upgrade-plan.is-current .upgrade-buy{
  background:transparent;color:var(--plan-btn,var(--pink));
  box-shadow:inset 0 0 0 2px var(--plan-btn,var(--pink));
}

/* bảng so sánh */
.upgrade-table-wrap{
  overflow-x:auto;background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
}
.upgrade-table{width:100%;min-width:620px;border-collapse:collapse;font-size:14px}
.upgrade-table th,.upgrade-table td{padding:12px 14px;vertical-align:middle;border-bottom:1px solid var(--surface-2)}
.upgrade-table thead th{background:var(--surface);text-align:center;font-weight:900;border-bottom:2px solid var(--surface-2)}
.upgrade-table thead th:first-child{width:40%;text-align:left;font-size:13px;color:var(--text-soft)}
.upgrade-table-plan{position:relative}
.upgrade-table-plan::after{
  content:"";position:absolute;left:14px;right:14px;top:0;height:4px;
  background:var(--plan-btn,var(--pink));border-radius:0 0 4px 4px;
}
.upgrade-table-plan strong{display:block;font-size:15px}
.upgrade-table-plan small{display:block;margin-top:2px;font-size:12px;font-weight:700;color:var(--text-soft)}
.upgrade-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.upgrade-table tbody td:first-child{font-weight:700}
.upgrade-table-value{text-align:center;font-weight:700}

.compare-yes,.compare-no{
  display:inline-grid;place-items:center;width:24px;height:24px;
  border-radius:50%;font-size:13px;font-weight:900;line-height:1;
}
.compare-yes{background:#1f8a4c;color:#fff}
.compare-no{background:var(--surface-2);color:var(--text-soft)}

.upgrade-table tfoot td{background:var(--surface);border-bottom:0;padding:14px}
.upgrade-table-buy{
  display:block;text-align:center;padding:10px 8px;
  background:var(--plan-btn,var(--pink));color:#fff;border-radius:var(--r-sm);
  font-size:13px;font-weight:900;
}
.upgrade-table-buy:hover{filter:brightness(1.07)}

.upgrade-note{text-align:center;color:var(--text-soft);font-size:13px;line-height:1.6;margin:18px auto 0;max-width:720px}
.upgrade-note code{font-size:12px;padding:2px 5px;background:var(--surface-2);border-radius:4px}

@media (max-width:700px){
  .upgrade-page{padding-top:0}
  .upgrade-head{grid-template-columns:1fr}
  .upgrade-crown{grid-row:auto;width:44px;height:44px;margin-bottom:6px}
  .upgrade-promo{grid-template-columns:auto 1fr}
  .upgrade-promo-btn{grid-column:1/-1;text-align:center}
  .upgrade-plans{grid-template-columns:1fr;gap:14px}
  .upgrade-plan{padding:20px 16px 16px}
  .upgrade-price strong{font-size:28px}
  .upgrade-table{font-size:13px}
}

/* ============================================================
   16. HUY HIỆU THÀNH VIÊN — nhãn và màu lấy từ Quản trị > Gói nâng cấp
   Dạng viên nhạt: nền pha màu gói, chữ và dấu tích mang màu gói.
   ============================================================ */
.jun-badge{
  display:inline-flex;align-items:center;gap:4px;vertical-align:middle;
  padding:3px 10px 3px 5px;border-radius:99px;
  font-size:12px;font-weight:800;line-height:1.3;letter-spacing:.1px;white-space:nowrap;
  color:var(--badge,#8c8f94);
  background:var(--surface-2);
  background:color-mix(in srgb,var(--badge,#8c8f94) 13%,var(--surface));
  border:1px solid color-mix(in srgb,var(--badge,#8c8f94) 32%,transparent);
}
.jun-badge-tick{width:16px;height:16px;flex:0 0 16px;color:inherit}
.jun-badge-text{display:inline-block}

/* Chỉ dấu tích, dùng trong sidebar */
.jun-badge--tick{
  padding:0;border:0;background:none;
  color:var(--badge,#8c8f94);
}
.jun-badge--tick .jun-badge-tick{width:17px;height:17px;flex:0 0 17px}

.dash-id h1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dash-id h1 .jun-badge{font-size:13px;padding:4px 12px 4px 6px}
.user-chip{min-width:0}
.user-chip > span{flex:1;min-width:0}
.user-chip .jun-badge--tick{flex:0 0 auto;margin-left:-2px;overflow:visible}

/* Chế độ tối: chữ màu gói sáng lên cho đủ tương phản trên nền tối. */
html[data-mode="dark"] .jun-badge:not(.jun-badge--tick){
  color:color-mix(in srgb,var(--badge,#8c8f94) 55%,#fff);
  background:color-mix(in srgb,var(--badge,#8c8f94) 24%,var(--surface));
  border-color:color-mix(in srgb,var(--badge,#8c8f94) 50%,transparent);
}
@media (prefers-color-scheme:dark){
  html[data-mode="auto"] .jun-badge:not(.jun-badge--tick){
    color:color-mix(in srgb,var(--badge,#8c8f94) 55%,#fff);
    background:color-mix(in srgb,var(--badge,#8c8f94) 24%,var(--surface));
    border-color:color-mix(in srgb,var(--badge,#8c8f94) 50%,transparent);
  }
}

@media (max-width:520px){
  .jun-badge{font-size:11px;padding:2px 8px 2px 4px}
  .jun-badge-tick{width:14px;height:14px;flex:0 0 14px}
}

/* ============================================================
   17. GÓI CỦA THÀNH VIÊN — thẻ tình trạng và ô thao tác
   ============================================================ */
.plan-card{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:18px;padding:13px 15px;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-sm);
}
.plan-card.is-active{background:var(--surface-2)}
.plan-card-main{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px}
.plan-card-label{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text-soft)}
.plan-card-main strong{font-size:16px;font-weight:900;line-height:1.25}
.plan-card-dates{font-size:11px;color:var(--text-soft);font-weight:600}
.plan-card-left{
  padding:5px 10px;border:var(--bd) solid var(--line);border-radius:99px;
  background:#8ee6b0;color:#111;font-size:11px;font-weight:900;white-space:nowrap;
}
.plan-card-left.is-soon{background:#ffd166}
.plan-card-btn{
  padding:8px 13px;border:var(--bd) solid var(--line);border-radius:var(--r-sm);
  background:var(--yellow);color:#111;box-shadow:var(--sh-sm);
  font-size:12px;font-weight:900;white-space:nowrap;
}
.plan-card-btn:active{transform:translate(3px,3px);box-shadow:none}

.member-plan{font-size:11px;font-weight:800;color:var(--text-soft)}
.member-plan-act{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.member-plan-act select{max-width:150px}

@media (max-width:560px){
  .plan-card{gap:10px}
  .plan-card-btn,.plan-card-left{font-size:11px}
  .member-plan-act{width:100%}
  .member-plan-act select{flex:1;min-width:0;max-width:none}
}

/* ============================================================
   18. CREDIT AI TRONG SIDEBAR — chỉ hiện khi đã đăng nhập
   ============================================================ */
.ai-credit{
  display:flex;align-items:center;gap:8px;
  margin-top:9px;padding:10px 12px;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-sm);font-size:13px;font-weight:700;
}
.ai-credit .ico{width:16px;height:16px;flex:0 0 16px}
.ai-credit span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-credit strong{font-size:16px;font-weight:950;line-height:1}

/* ============================================================
   19. CỬA SỔ CHUYỂN KHOẢN — trang Nâng cấp
   ============================================================ */
body.jun-pay-open{overflow:hidden}

.pay-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px}
.pay-modal[hidden]{display:none}
.pay-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}

.pay-box{
  position:relative;width:min(680px,100%);max-height:90vh;overflow-y:auto;
  padding:22px 20px 20px;background:var(--surface);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
}
.pay-box > h2{text-align:center;font-size:19px;font-weight:900;margin-bottom:16px}
.pay-title-wrap{text-align:center;margin-bottom:16px}.pay-kicker{display:inline-block;font-size:10px;font-weight:900;letter-spacing:1.4px;padding:5px 9px;border-radius:999px;background:var(--pink-soft);color:var(--pink)}.pay-title-wrap h2{margin:8px 0 4px}.pay-title-wrap p{margin:0;color:var(--text-soft);font-size:14px;line-height:1.55}.pay-steps{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:12px;font-weight:800;color:var(--text-soft)}.pay-steps span{padding:7px 11px;border:1px solid var(--surface-2);border-radius:999px}.pay-steps .is-active{color:#fff;background:var(--pink);border-color:var(--pink)}.pay-steps i{height:1px;flex:1;background:var(--surface-2)}.pay-row-code{background:var(--pink-soft)}.pay-row-code dd{font-size:17px;letter-spacing:1.5px}.pay-confirm-box{margin-top:14px;padding:13px;border:1px solid var(--surface-2);border-radius:var(--r);background:var(--surface-2)}.pay-confirm-box p{margin:0 0 10px;font-size:12px;line-height:1.5;color:var(--text-soft)}
.pay-x{
  position:absolute;top:10px;right:10px;width:30px;height:30px;
  display:grid;place-items:center;border:var(--bd) solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);font-size:18px;font-weight:900;line-height:1;cursor:pointer;
}

.pay-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:12px 14px;margin-bottom:14px;background:var(--pink-soft);color:var(--ink);
  border-radius:var(--r-sm);
}
.pay-head strong{font-size:14px;font-weight:900}
.pay-head span{font-size:15px;font-weight:900}

.pay-tabs{display:flex;gap:8px;margin-bottom:14px}
.pay-tab{
  flex:1;padding:9px 10px;background:var(--surface-2);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
  font-size:12px;font-weight:800;cursor:pointer;
}
.pay-tab.is-on{background:var(--pink);color:#fff;border-color:var(--pink)}

.pay-gate[hidden]{display:none}
.pay-qr{display:flex;flex-direction:column;align-items:center;gap:7px;margin-bottom:14px}
.pay-qr img{
  width:min(240px,72vw);aspect-ratio:1;object-fit:contain;background:#fff;padding:9px;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.pay-qr small{font-size:11px;color:var(--text-soft);font-weight:600}
.pay-dl{
  padding:7px 13px;background:var(--surface-2);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
  font-size:12px;font-weight:800;
}

.pay-rows{border:var(--bd) solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.pay-row{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;
  padding:10px 13px;border-bottom:1px solid var(--surface-2);
}
.pay-row:last-child{border-bottom:0}
.pay-row dt{font-size:12px;color:var(--text-soft);font-weight:700;grid-column:1}
.pay-row dd{font-size:14px;font-weight:900;grid-column:1;word-break:break-all;line-height:1.3}
.pay-copy{
  grid-column:2;grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;
  background:var(--surface-2);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
  font-size:14px;cursor:pointer;
}
.pay-copy.is-done{background:#8ee6b0}

.pay-note,.pay-eta,.pay-policy,.pay-warn{margin-top:11px;text-align:center;font-size:13px;line-height:1.6}
.pay-note{color:var(--text-soft)}
.pay-eta{color:#0a7d3c;font-weight:700}
.pay-policy a{text-decoration:underline}
.pay-warn{
  padding:9px 11px;background:#fff3cd;color:#6b4d00;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);font-weight:700;
}
.pay-warn a{text-decoration:underline}

@media (max-width:560px){
  .pay-box{padding:18px 14px 16px;border-radius:var(--r)}
  .pay-box > h2{font-size:17px}
  .pay-row dd{font-size:13px}
}

/* Nút báo đã chuyển khoản trong cửa sổ thanh toán */
.pay-done{
  display:block;width:100%;margin-top:13px;padding:12px;
  background:var(--pink);color:#fff;border:var(--bd) solid var(--line);border-radius:var(--r-sm);
  font-size:15px;font-weight:900;cursor:pointer;
}
.pay-done:hover{filter:brightness(1.07)}
.pay-done[disabled]{opacity:.6;cursor:default}
.pay-msg{
  margin-top:9px;padding:9px 11px;border:var(--bd) solid var(--line);border-radius:var(--r-sm);
  background:#d7f5e3;color:#0a5c31;font-size:11px;font-weight:700;text-align:center;line-height:1.5;
}
.pay-msg.is-bad{background:#ffe0e0;color:#8a1f1f}


/* JunHSK order admin refinement */
.jun-orders-table .jun-o-order-id code,.jun-orders-table .jun-o-code code{display:block;font-weight:700;letter-spacing:.04em}
.jun-orders-table .jun-o-order-id small,.jun-orders-table .jun-o-code small{display:block;margin-top:4px;color:#6b7280}
.jun-orders-table .jun-o-buyer small{display:block;margin-top:3px}


/* Logo tùy chọn + chuỗi ngày đăng nhập */
.brand-row{display:flex;align-items:center;gap:10px;padding-right:4px}
.brand-row .brand{flex:1;min-width:0;padding-bottom:0}
.brand-logo-wrap{display:block;flex:0 0 auto;line-height:0}
.brand-logo{display:block;height:34px;width:auto;max-width:158px;object-fit:contain}
.brand-logo--toi{display:none}
.mobile-brand .brand-logo{height:26px;max-width:124px}
.brand-row.has-logo .brand-name,.mobile-brand.has-logo .brand-name{display:none}

/* Đổi logo theo chế độ hiển thị */
html[data-mode="dark"] .brand-logo--sang{display:none}
html[data-mode="dark"] .brand-logo--toi{display:block}
@media (prefers-color-scheme:dark){
  html[data-mode="auto"] .brand-logo--sang{display:none}
  html[data-mode="auto"] .brand-logo--toi{display:block}
}
.brand-row{padding-bottom:18px}

.streak{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;padding:4px 9px 4px 6px;border-radius:999px;background:#FFF1E0;color:#C2410C;font-weight:800;font-size:13px;line-height:1;white-space:nowrap}
.streak b{font-weight:800}
.streak-lua{width:16px;height:16px;fill:#F97316}
.streak-lua .streak-loi{fill:#FCD34D}
.streak--hot{background:#FFE4E0;color:#B91C1C}
.streak--hot .streak-lua{fill:#EF4444;animation:jun-lua 1.6s ease-in-out infinite}
@keyframes jun-lua{50%{transform:scale(1.14)}}
.mobile-bar .streak{margin-left:auto}
@media (prefers-reduced-motion:reduce){.streak--hot .streak-lua{animation:none}}


/* Thẻ credit AI trong trang tài khoản + chip credit ở sidebar */
.credit-card .plan-card-main strong small{margin-left:4px;font-size:14px;font-weight:600;color:var(--text-soft)}
.ai-credit--link{text-decoration:none;color:inherit;cursor:pointer}
.ai-credit--link:hover{background:var(--pink-soft)}
.ai-credit-plus{display:grid;place-items:center;width:20px;height:20px;margin-left:6px;border-radius:50%;background:var(--pink);color:#fff;font-style:normal;font-weight:800;font-size:14px;line-height:1}


/* ============================================================
   24. THANH TÌM SÁCH Ở TRANG CHỦ
   ============================================================ */
.booksearch{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);
  padding:10px 14px;margin-bottom:16px;
  transition:transform .12s ease,box-shadow .12s ease;
}
.booksearch:focus-within{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}

.booksearch-ico{
  display:grid;place-items:center;
  width:22px;height:22px;flex:0 0 22px;color:var(--pink);
}
.booksearch-ico svg{width:100%;height:100%}

.booksearch-input{
  flex:1;min-width:0;
  padding:5px 0;font:inherit;font-size:15px;font-weight:600;
  color:var(--ink);background:none;border:0;
}
.booksearch-input::placeholder{color:var(--text-soft);font-weight:500}
.booksearch-input:focus{outline:0}
.booksearch-input::-webkit-search-cancel-button,
.booksearch-input::-webkit-search-decoration{-webkit-appearance:none;display:none}

/* gợi ý phím tắt "/" — ẩn khi đang gõ */
.booksearch-kbd{
  flex:0 0 auto;
  padding:2px 9px;font-family:var(--font);font-size:12px;font-weight:800;line-height:1.5;
  color:var(--text-soft);background:var(--surface-2);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.booksearch:focus-within .booksearch-kbd{display:none}

.booksearch-clear{
  display:grid;place-items:center;
  width:28px;height:28px;flex:0 0 28px;padding:6px;
  color:var(--ink);background:var(--surface-2);
  border:var(--bd) solid var(--line);border-radius:50%;
}
.booksearch-clear svg{width:100%;height:100%}
.booksearch-clear:hover{background:var(--pink);color:#fff}
.booksearch-clear[hidden]{display:none}

.booksearch-go{
  flex:0 0 auto;
  padding:8px 18px;font-size:13px;font-weight:800;
  color:#111;background:var(--yellow);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.booksearch-go:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
/* có JS thì lọc ngay khi gõ, không cần bấm nút */
.booksearch.is-live .booksearch-go{display:none}

.booksearch-count{
  font-size:12px;font-weight:700;color:var(--text-soft);
  margin:0 0 16px 4px;
}
.booksearch-count b{color:var(--pink)}
.booksearch-count[hidden]{display:none}

.booksearch-empty{
  background:var(--pink-soft);
  border:var(--bd) dashed var(--ink);border-radius:var(--r);
  padding:22px 24px;margin-bottom:26px;
}
.booksearch-empty strong{display:block;font-size:17px;font-weight:800;margin-bottom:5px}
.booksearch-empty span{font-size:13px;line-height:1.7;color:var(--text-soft)}
.booksearch-empty[hidden]{display:none}

/* ẩn bìa / kệ không khớp từ khoá */
.shelf .book[hidden]{display:none}
.series[hidden]{display:none}

@media (max-width:860px){
  .booksearch{padding:9px 11px;gap:8px}
  .booksearch-input{font-size:14px}
  .booksearch-kbd{display:none}
}


/* ============================================================
   25. GIỌNG ĐỌC & CÔNG TẮC NÚT NỔI
   ============================================================ */
.rate{
  margin-top:16px;padding:16px 18px;
  background:var(--surface-2);
  border:var(--bd) solid var(--line);border-radius:var(--r);
}
.rate-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rate-row label{font-size:14px;font-weight:800}
#junRateOut{
  padding:3px 11px;font-size:14px;font-weight:800;
  color:#fff;background:var(--pink);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}

#junRate{
  -webkit-appearance:none;appearance:none;
  width:100%;height:16px;margin:14px 0 6px;
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
#junRate::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:26px;height:26px;margin-top:0;
  background:var(--pink);
  border:var(--bd) solid var(--line);border-radius:50%;
  box-shadow:2px 2px 0 var(--ink);cursor:pointer;
}
#junRate::-moz-range-thumb{
  width:26px;height:26px;
  background:var(--pink);
  border:var(--bd) solid var(--line);border-radius:50%;
  box-shadow:2px 2px 0 var(--ink);cursor:pointer;
}
#junRate:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

.rate-scale{
  display:flex;justify-content:space-between;
  font-size:11px;font-weight:700;color:var(--text-soft);
}

.rate-foot{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.rate-try{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;font-size:13px;font-weight:800;
  background:var(--yellow);color:#111;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.rate-try svg{width:16px;height:16px}
.rate-try:active{transform:translate(2px,2px);box-shadow:none}
.rate-info{font-size:12px;font-weight:600;line-height:1.5;color:var(--text-soft)}

.toggles{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.toggle{
  display:flex;align-items:center;gap:14px;
  padding:13px 16px;cursor:pointer;
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-sm);
}
.toggle:active{transform:translate(2px,2px);box-shadow:none}
.toggle input{position:absolute;opacity:0;width:0;height:0}

.toggle-sw{
  position:relative;flex:0 0 auto;
  width:54px;height:30px;
  background:var(--surface-2);
  border:var(--bd) solid var(--line);border-radius:16px;
  transition:background .15s ease;
}
.toggle-sw::after{
  content:"";position:absolute;top:2px;left:2px;
  width:20px;height:20px;
  background:var(--ink);border-radius:50%;
  transition:transform .15s ease;
}
.toggle input:checked + .toggle-sw{background:var(--pink)}
.toggle input:checked + .toggle-sw::after{transform:translateX(24px);background:#fff}
.toggle input:focus-visible + .toggle-sw{outline:3px solid var(--pink);outline-offset:3px}

.toggle-text{display:flex;flex-direction:column;gap:2px}
.toggle-text strong{font-size:14px;font-weight:800}
.toggle-text small{font-size:12px;color:var(--text-soft)}

/* Tắt nút nổi: .jdc là trợ lý AI của plugin từ điển, .tlh là nút liên hệ.
   Cần !important vì CSS của hai plugin in sau stylesheet của theme. */
html[data-ai="off"] .jdc{display:none!important}
html[data-lienhe="off"] .tlh{display:none!important}

/* ---- Xếp nút trợ lý AI vào cùng cụm với nút liên hệ ----
   Hai plugin đều tự đặt mình ở góc phải dưới nên trước đây chúng đè lên nhau.
   Nút liên hệ nằm dưới, nút AI xếp lên trên, cách 12px giống khoảng cách bên
   trong cụm liên hệ. */
.jdc{bottom:88px!important}

/* Quản trị đổi nút liên hệ sang góc trái thì nút AI đi theo. */
body:has(.tlh-left) .jdc{left:16px!important;right:auto!important}

/* Tắt nút liên hệ thì nút AI tụt xuống chỗ trống, khỏi lơ lửng giữa không. */
html[data-lienhe="off"] .jdc{bottom:16px!important}

/* ---- Nút AI dùng chung kiểu với nút liên hệ ---- */
.jdc-nut{
  width:60px!important;height:60px!important;
  border:var(--bd) solid var(--ink)!important;
  box-shadow:var(--sh)!important;
}
.jdc-nut:active{transform:translate(3px,3px)!important;box-shadow:none!important}

/* Trạng thái đang mở: nền vàng dấu nhân đen, y như nút liên hệ. */
.jdc-nut.jdc-dong{background:var(--yellow)!important;color:#000!important}
.jdc-nut.jdc-dong::after{font-weight:800!important}

@media (max-width:480px){
  .jdc{right:12px!important;bottom:84px!important}
  body:has(.tlh-left) .jdc{left:12px!important;right:auto!important}
  html[data-lienhe="off"] .jdc{bottom:12px!important}
}

/* danh sách giọng đọc ngoài trang cài đặt */
.voices{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.voice{
  display:flex;align-items:center;gap:13px;text-align:left;
  padding:12px 15px;
  background:var(--surface);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-sm);
}
.voice:active{transform:translate(2px,2px);box-shadow:none}
.voice.is-active{background:var(--pink);color:#fff}
.voice-ic{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px}
.voice-ic svg{width:100%;height:100%}
.voice-text{display:flex;flex-direction:column;gap:2px}
.voice-text strong{font-size:14px;font-weight:800}
.voice-text small{font-size:12px;opacity:.75}


/* ============================================================
   26. BẢNG CHỮ CÁI
   ============================================================ */
.hangul-tabs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;margin-bottom:22px;
}
.hangul-tab{
  display:flex;align-items:baseline;justify-content:center;gap:6px;flex-wrap:wrap;
  min-width:0;padding:12px 10px;text-align:center;
  background:var(--surface);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
}
.hangul-tab strong{font-size:14px;font-weight:800}
.hangul-tab span{font-size:12px;color:var(--text-soft)}
.hangul-tab.is-active span{color:inherit}
.hangul-tab:active{transform:translate(2px,2px);box-shadow:none}
.hangul-tab.is-active{background:var(--pink);color:#fff}
.hangul-tab.is-active span{opacity:.85}

.hangul-head{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:0 0 6px;font-size:22px;font-weight:800;
}
.hangul-head span{font-size:15px;font-weight:600;color:var(--text-soft)}
.hangul-note{margin:0 0 20px;font-size:13px;line-height:1.7;color:var(--text-soft);max-width:62ch}

.letters{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.letter{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:20px 14px 16px;
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);
}
.letter-tools{
  position:absolute;top:9px;right:9px;
  display:flex;gap:2px;
}
.letter-tool{
  display:grid;place-items:center;
  width:28px;height:28px;padding:6px;
  color:var(--text-soft);background:none;border:0;border-radius:var(--r-sm);
}
.letter-tool svg{width:100%;height:100%}
.letter-tool:hover{color:var(--pink);background:var(--surface-2)}

.letter-glyph{font-size:56px;font-weight:700;line-height:1.15}
.letter-romaja{font-size:17px;font-weight:800;color:var(--pink)}
.letter-doc{font-size:15px;font-weight:600}
.letter-meta{font-size:12px;color:var(--text-soft);text-align:center}
.letter-name{
  font-size:14px;font-weight:700;color:var(--ink);
}
.letter-name em{font-style:normal;font-weight:600;color:var(--text-soft)}
.letter-vd{margin-top:2px;font-size:14px;color:var(--text-soft);text-align:center}
.letter-vd em{font-style:normal;color:var(--pink);font-weight:700}
.letter-btn{
  margin-top:9px;padding:7px 20px;
  font-size:13px;font-weight:800;
  background:var(--surface);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.letter-btn:hover{background:var(--pink);color:#fff}
.letter-btn:active{transform:translate(2px,2px)}

/* bài tập */
.quiz{
  max-width:520px;padding:22px;
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
}
.quiz-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.quiz-score{font-size:13px;font-weight:700;color:var(--text-soft)}
.quiz-score b{color:var(--ink);font-size:15px}
.quiz-reset{
  padding:7px 14px;font-size:12px;font-weight:800;
  background:var(--surface-2);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.quiz-reset:hover{background:var(--pink);color:#fff}

.quiz-glyph{
  margin:20px 0;padding:26px 0;
  font-size:82px;font-weight:700;line-height:1;text-align:center;
  background:var(--surface-2);
  border:var(--bd) solid var(--line);border-radius:var(--r);
}

.quiz-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.quiz-opt{
  padding:15px 10px;font-size:16px;font-weight:800;
  background:var(--surface);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
}
.quiz-opt:active{transform:translate(2px,2px);box-shadow:none}
.quiz-opt.is-ok{background:#2E9E4F;color:#fff}
.quiz-opt.is-bad{background:#E5322F;color:#fff}

.quiz-say{margin:16px 0 0;font-size:14px;font-weight:700;text-align:center}
.quiz-say[hidden]{display:none}

@media (max-width:520px){
  .letters{grid-template-columns:repeat(2,1fr);gap:11px}
  .letter-glyph{font-size:46px}
  .quiz-glyph{font-size:64px;padding:20px 0}
}


/* ============================================================
   27. LUYỆN ĐỀ
   ============================================================ */
.exams-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px}
.exams-ico{
  display:grid;place-items:center;flex:0 0 52px;
  width:52px;height:52px;padding:12px;
  color:#fff;background:var(--pink);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
}
.exams-ico svg{width:100%;height:100%}
.exams-head h1{margin:0 0 4px;font-size:28px;font-weight:800}
.exams-head p{margin:0;font-size:14px;line-height:1.6;color:var(--text-soft);max-width:64ch}

.exams-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:20px;
}
.exams-filters{display:flex;gap:10px;flex-wrap:wrap}
.exams-filter{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;font-size:14px;font-weight:800;
  background:var(--surface);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
}
.exams-filter b{
  padding:1px 8px;font-size:12px;
  background:var(--surface-2);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.exams-filter:active{transform:translate(2px,2px);box-shadow:none}
.exams-filter.is-active{background:var(--pink);color:#fff}
.exams-filter.is-active b{background:rgba(255,255,255,.85);color:var(--ink)}

.exams-history{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;font-size:13px;font-weight:800;
  background:var(--surface);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
}
.exams-history svg{width:17px;height:17px}
.exams-history:hover{background:var(--pink);color:#fff}

.exam-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.exam{
  display:flex;flex-direction:column;gap:12px;
  padding:18px;
  background:var(--surface);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
}
.exam:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.exam[hidden]{display:none}

.exam-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.exam-tag{
  padding:5px 11px;font-size:12px;font-weight:800;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.exam--i .exam-tag{background:#BFD4FF}
.exam--ii .exam-tag{background:var(--yellow)}
.exam-go{font-size:20px;font-weight:800;color:var(--text-soft)}
.exam-vip{display:grid;place-items:center;width:22px;height:22px;color:#D89A00}
.exam-vip svg{width:100%;height:100%}

.exam-name{font-size:21px;font-weight:700;line-height:1.35}
.exam-name b{
  display:inline-block;padding:0 8px;margin:0 2px;
  color:#fff;background:var(--pink);border-radius:var(--r-sm);font-weight:800;
}

.exam-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.exam-stat{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 4px;
  background:var(--surface-2);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.exam-stat small{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--text-soft)}
.exam-stat b{font-size:19px;font-weight:800}

.exams-empty{
  padding:26px;background:var(--pink-soft);
  border:var(--bd) dashed var(--ink);border-radius:var(--r);
}
.exams-empty strong{display:block;font-size:17px;font-weight:800;margin-bottom:5px}
.exams-empty span{font-size:13px;color:var(--text-soft)}
.exams-none{padding:22px 0;font-size:14px;font-weight:700;color:var(--text-soft)}
.exams-none[hidden]{display:none}

/* ---- Kho tài liệu ---- */
.docs-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;
}
.doc-card{
  display:flex;flex-direction:column;gap:10px;
  padding:14px;
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
}
.doc-anh{
  display:grid;place-items:center;
  aspect-ratio:4/3;overflow:hidden;
  background:var(--surface-2);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.doc-anh img{width:100%;height:100%;object-fit:cover;display:block}
.doc-anh-loai{
  padding:8px 18px;font-size:15px;font-weight:900;letter-spacing:.02em;color:#fff;
  border-radius:var(--r-sm);
}
.doc-ten{
  flex:1;margin:0;font-size:14px;font-weight:800;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.doc-nguon{margin:-6px 0 0;font-size:12px;color:var(--text-soft)}
.doc-xem,.doc-tai{
  display:block;padding:10px;text-align:center;font-size:13px;font-weight:800;color:#fff;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.doc-xem{background:var(--pink)}
.doc-tai{background:var(--surface);color:var(--ink)}
.doc-xem:active,.doc-tai:active{transform:translate(2px,2px);box-shadow:none}

@media (max-width:520px){
  .exams-head h1{font-size:23px}
  .exam-grid{grid-template-columns:1fr}
  .exam-name{font-size:19px}
}


/* ============================================================
   28. MỘT ĐỀ THI: GIỚI THIỆU VÀ LÀM BÀI
   ============================================================ */
.exam-lock{padding:40px 26px;text-align:center}
.exam-lock h1{margin:0 0 10px;font-size:24px;font-weight:800}
.exam-lock p{margin:0 auto 20px;max-width:52ch;color:var(--text-soft);line-height:1.7}

.exam-intro{
  border:var(--bd) solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden;background:var(--surface);
}
.exam-banner{padding:26px 24px;color:#fff}
.exam-banner--i{background:#5B8DEF}
.exam-banner--ii{background:var(--pink)}
.exam-banner h1{margin:0 0 6px;font-size:29px;font-weight:800;line-height:1.25}
.exam-banner p{margin:0;font-size:14px;opacity:.9}

.exam-sum{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:var(--bd) solid var(--line);
}
.exam-sum-item{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:18px 8px;border-top:var(--bd) solid var(--line);
}
.exam-sum-item + .exam-sum-item{border-left:var(--bd) solid var(--line)}
.exam-sum-item small{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--text-soft)}
.exam-sum-item b{font-size:26px;font-weight:800}

.exam-body{padding:24px}
.exam-body h2{margin:0 0 6px;font-size:20px;font-weight:800}
.exam-lead{margin:0 0 18px;font-size:13px;line-height:1.7;color:var(--text-soft)}

.exam-part{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  padding:15px 17px;margin-bottom:12px;
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
}
.exam-part--nghe{background:#DCE8FF}
.exam-part--viet{background:#DCF5E3}
.exam-part--doc{background:#FFE0EC}
.exam-part--soon{background:var(--surface-2)}
.exam-part-name{font-size:16px;font-weight:700}
.exam-part-name b{font-size:19px;font-weight:800}
.exam-part-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.exam-part-meta em{font-style:normal;font-size:12px;color:var(--text-soft)}
.exam-chip{
  padding:6px 12px;font-size:12px;font-weight:700;
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.exam-part-go{
  padding:7px 15px;font-size:13px;font-weight:800;
  color:#fff;background:var(--pink);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.exam-part-go:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}

/* ---- Trang lịch thi HSK ---- */
.lich-wrap{max-width:var(--w);margin:0 auto;padding:22px 16px 60px}
/* Trang có ảnh nền nên mọi khối chữ đều phải có nền riêng, không thì chữ chìm
   vào ảnh, chỗ sáng chỗ tối mỗi lúc một kiểu. */
.lich-panel{
  display:block;padding:18px;margin-bottom:22px;
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
}
.lich-dau{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lich-h1{margin:0;font-size:26px;font-weight:900}
.lich-on{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 16px;font-size:14px;font-weight:800;color:var(--ink);
  background:var(--pink);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.lich-on:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.lich-on .ico{width:18px;height:18px}
.lich-lead{margin:10px 0 0;font-size:14px;line-height:1.7;color:var(--text-soft)}
.lich-chon{display:flex;align-items:center;gap:10px;margin:16px 0 0}
.lich-chon label{font-size:13px;font-weight:800}
.lich-chon select{
  flex:1;max-width:260px;padding:10px 12px;
  font-size:15px;font-weight:700;color:var(--ink);
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.lich-kv{margin-bottom:30px}
.lich-kv-ten{margin:0 0 12px;font-size:19px;font-weight:900}
.lich-kv-the{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:999px;box-shadow:var(--sh-sm);
}
.lich-dem{
  display:grid;gap:3px;padding:16px 18px;margin-bottom:14px;
  background:var(--pink);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
}
.lich-dem small{font-size:11px;font-weight:800;letter-spacing:.06em;opacity:.75}
.lich-dem-so{font-size:27px;font-weight:900;line-height:1.2}
.lich-dem-ky{font-size:14px;font-weight:700}
.lich-ds{display:grid;gap:12px}
.lich-the{
  display:grid;gap:10px;padding:15px 16px;
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
}
.lich-the--da-thi{opacity:.6}
.lich-the--dang-mo{background:#FDF6D8}
.lich-the-dau{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lich-ky{font-size:16px;font-weight:900}
.lich-nhan{
  padding:3px 9px;font-size:11px;font-weight:800;letter-spacing:.03em;
  background:var(--surface-2);
  border:2px solid var(--line);border-radius:999px;
}
.lich-nhan--mo{color:#fff;background:#12A150;border-color:var(--line)}
.lich-nhan--toi{background:#DCE8FF}
.lich-nhan--qua{color:var(--text-soft)}
.lich-ngay{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.lich-ngay-nhan{font-size:13px;font-weight:800;color:var(--text-soft)}
.lich-ngay b{font-size:22px;font-weight:900}
.lich-ngay span{font-size:13px;font-weight:700;color:var(--text-soft)}
.lich-ngay i{
  font-style:normal;font-size:12px;font-weight:800;
  padding:2px 8px;background:var(--surface-2);
  border:2px solid var(--line);border-radius:999px;
}
.lich-moc{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:0}
.lich-moc div{
  padding:9px 11px;background:var(--surface-2);
  border:2px solid var(--line);border-radius:var(--r-sm);
}
.lich-moc dt{font-size:11px;font-weight:800;letter-spacing:.03em;color:var(--text-soft)}
.lich-moc dd{margin:2px 0 0;font-size:15px;font-weight:800}
.lich-dk{
  justify-self:start;padding:9px 15px;
  font-size:13px;font-weight:800;color:var(--ink);
  background:var(--surface-2);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.lich-dk:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
/* Hết hạn hoặc chưa tới hạn thì thay nút bằng một dòng nhắn nhỏ, để chỗ đó
   không trống hoác mà người xem cũng biết vì sao chưa bấm đăng ký được. */
.lich-bao{
  margin:0;padding:10px 13px;
  font-size:13px;font-weight:700;line-height:1.5;
  background:var(--surface-2);
  border:2px dashed var(--line);border-radius:var(--r-sm);
}
.lich-bao--mo{background:#E4F7EA;border-style:solid}
.lich-bao--dong{color:var(--text-soft)}

.lich-trong{
  padding:16px;font-size:14px;font-weight:700;color:var(--text-soft);text-align:center;
  background:var(--surface);
  border:2px dashed var(--line);border-radius:var(--r-sm);
}
.lich-nguon{
  margin-top:24px;padding:13px 15px;
  font-size:12px;line-height:1.7;color:var(--text-soft);
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}

/* ---- Bảng tổng kết cả kỳ ---- */
.bo-ket-ds{display:grid;gap:16px;margin-bottom:26px}
.tries-h2{margin:0 0 12px;font-size:19px;font-weight:800}
.bo-ket{
  display:grid;gap:12px;
  padding:18px;margin-bottom:18px;
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
}
.bo-ket-dau{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.bo-ket-ten{font-size:17px;font-weight:800}
.bo-ket-bac{
  padding:6px 14px;font-size:13px;font-weight:900;letter-spacing:.04em;color:#fff;
  background:var(--text-soft);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.bo-ket--dat .bo-ket-bac{background:#12A150}
.bo-ket--chua .bo-ket-bac{background:#B4436C}
.bo-ket-diem{display:flex;align-items:baseline;gap:6px}
.bo-ket-diem b{font-size:34px;font-weight:900;line-height:1}
.bo-ket-diem span{font-size:15px;font-weight:700;color:var(--text-soft)}
.bo-ket-thanh{
  height:12px;overflow:hidden;
  background:var(--surface-2);
  border:var(--bd) solid var(--line);border-radius:999px;
}
.bo-ket-thanh i{display:block;height:100%;background:var(--pink)}
.bo-ket--dat .bo-ket-thanh i{background:#12A150}
.bo-ket-phan{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:9px}
.bo-ket-o{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 6px;color:var(--ink);
  background:var(--surface-2);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.bo-ket-o--nghe{background:#DCE8FF}
.bo-ket-o--viet{background:#DCF5E3}
.bo-ket-o--doc{background:#FFE0EC}
.bo-ket-o small{font-size:13px;font-weight:800}
.bo-ket-o b{font-size:19px;font-weight:900}
.bo-ket-o b i{font-style:normal;font-size:12px;font-weight:700;color:var(--text-soft)}
.bo-ket-o .bo-ket-chua{font-size:12px;font-weight:700;color:var(--text-soft)}
.bo-ket-o:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.bo-ket-note{
  margin:0;padding:10px 13px;font-size:12px;font-weight:700;line-height:1.6;
  background:#FDF6D8;border:2px dashed var(--ink);border-radius:var(--r-sm);
}

/* ---- Thẻ bộ đề: một kỳ, ba phần ---- */
.exam-bo-parts{display:grid;gap:8px}
.exam-bo-part{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 13px;
  color:var(--ink);background:var(--surface-2);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.exam-bo-part b{font-size:16px;font-weight:800}
.exam-bo-part small{font-size:12px;font-weight:700;color:var(--text-soft)}
.exam-bo-part--nghe{background:#DCE8FF}
.exam-bo-part--viet{background:#DCF5E3}
.exam-bo-part--doc{background:#FFE0EC}
a.exam-bo-part:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.exam-bo-part.is-off{opacity:.55;box-shadow:none;border-style:dashed}

.exam-banner-phan{
  display:inline-block;padding:2px 12px;margin-left:6px;
  font-size:22px;font-weight:800;
  background:rgba(255,255,255,.25);border-radius:var(--r-sm);
}

.exam-warn{
  margin:20px 0;padding:18px 20px;
  background:#FDF6D8;
  border:var(--bd) solid var(--line);border-radius:var(--r);
}
.exam-warn strong{display:block;margin-bottom:8px;font-size:15px;font-weight:800}
.exam-warn ul{margin:0;padding-left:20px}
.exam-warn li{font-size:13px;line-height:1.9}

.exam-nokey{
  padding:12px 16px;margin:0 0 16px;font-size:13px;font-weight:700;
  background:var(--pink-soft);border:2px dashed var(--ink);border-radius:var(--r-sm);
}

.exam-start{
  display:inline-block;padding:15px 28px;
  font-size:16px;font-weight:800;
  color:#fff;background:var(--pink);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
}
.exam-start:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}

/* ---- màn hình làm bài ---- */
.doing-bar{
  position:sticky;top:0;z-index:9;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;margin-bottom:18px;
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
}
.doing-ic{
  display:grid;place-items:center;flex:0 0 44px;
  width:44px;height:44px;padding:10px;
  border:var(--bd) solid var(--line);border-radius:var(--r);
}
.doing-ic svg{width:100%;height:100%}
.doing-ic--nghe{background:#DCE8FF}
.doing-ic--viet{background:#DCF5E3}
.doing-ic--doc{background:#FFE0EC}

.doing-title{flex:1;min-width:150px;display:flex;flex-direction:column;gap:1px}
.doing-title small{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--text-soft)}
.doing-title b{font-size:18px;font-weight:800}

.doing-out,.doing-clock,.doing-submit{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 16px;font-size:14px;font-weight:800;
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
}
.doing-out svg,.doing-clock svg,.doing-submit svg{width:17px;height:17px}
.doing-out{background:var(--surface);color:var(--ink)}
.doing-clock{background:#FDF6D8;color:var(--ink);font-variant-numeric:tabular-nums}
.doing-clock.is-warn{background:#E5322F;color:#fff}
.doing-submit{background:var(--pink);color:#fff}
.doing-submit:active{transform:translate(2px,2px);box-shadow:none}
.doing-submit:disabled{opacity:.6}

.doing-wrap{display:grid;grid-template-columns:1fr 330px;gap:16px;align-items:start}
.doing-col{min-width:0}

.player{
  padding:14px;margin-bottom:14px;
  background:#DCE8FF;
  border:var(--bd) solid var(--line);border-radius:var(--r);
}
.player-line{display:flex;align-items:center;gap:11px}
.player-time{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;flex:0 0 auto}
.player-seek{
  -webkit-appearance:none;appearance:none;
  flex:1;height:12px;
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.player-seek::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;
  background:var(--pink);border:var(--bd) solid var(--line);border-radius:50%;cursor:pointer;
}
.player-seek::-moz-range-thumb{
  width:20px;height:20px;
  background:var(--pink);border:var(--bd) solid var(--line);border-radius:50%;cursor:pointer;
}

.player-btns{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:11px}
.player-grp{display:flex;align-items:center;gap:7px}
.player-grp--end{margin-left:auto}
.player-b{
  /* Căn bằng lưới và khoá line-height, nếu không chữ bị đẩy lệch khỏi ô */
  display:inline-grid;place-items:center;
  height:38px;padding:0 13px;
  font-size:13px;font-weight:800;line-height:1;
  white-space:nowrap;
  background:var(--surface);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.player-b:active{transform:translate(1px,1px)}
.player-b--ic{width:40px;padding:0}
.player-b--ic svg{width:18px;height:18px;display:block}
.player-b--rate{
  width:48px;padding:0;
  background:var(--pink);color:#fff;
  font-size:12px;font-variant-numeric:tabular-nums;
}

.player-b--go{
  width:48px;padding:0;
  background:var(--pink);color:#fff;
}
.player-b--go svg{width:18px;height:18px;display:block}
.player-b--go .p-pause{display:none}
.player-b--go.is-playing .p-play{display:none}
.player-b--go.is-playing .p-pause{display:block}

/* nút đang bật thì tô hồng, tắt thì về nền trắng */
.player-b--hi{background:var(--pink);color:#fff}
.player-b--hi.is-off{background:var(--surface);color:var(--ink)}

.player-sub{
  margin-top:12px;padding:16px 18px;min-height:84px;
  display:grid;align-content:center;
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
  text-align:center;
}
.player-sub[hidden]{display:none}
.player-ko{margin:0;font-size:19px;font-weight:700;line-height:1.95}
.player-vi{margin:7px 0 0;font-size:13px;font-style:italic;color:var(--text-soft);line-height:1.6}
.player-sub.is-ko .player-vi{display:none}

/* từng chữ trong câu đang đọc, chữ nào tới lượt thì đổi màu */
.player-w{
  display:inline-block;
  padding:0 1px;
  border-bottom:2px solid rgba(229,50,47,.26);
  transition:color .1s linear,border-color .1s linear;
}
.player-w + .player-w{margin-left:.34em}
.player-w.is-now{color:#E5322F;border-bottom-color:#E5322F}
@media (prefers-reduced-motion:reduce){.player-w{transition:none}}
.doing-pdflink{margin:0 0 12px;font-size:13px;font-weight:700}

.q-huong{
  margin:0;padding:12px 16px;
  font-size:14px;font-weight:600;
  background:var(--surface-2);
  border:var(--bd) solid var(--line);border-bottom:0;
  border-radius:12px 12px 0 0;
}
.q-box{
  padding:20px;
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
}
.q-huong + .q-box{border-radius:0 0 12px 12px}

.q-head{display:flex;align-items:center;gap:10px;margin:0 0 16px;flex-wrap:wrap}
.q-head b{font-size:26px;font-weight:800}
.q-yeu-cau{flex:1;min-width:0;font-size:15px;font-weight:700}
.q-head em{
  padding:4px 11px;font-style:normal;font-size:12px;font-weight:800;
  background:var(--yellow);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}

.q-anh{
  display:block;width:100%;height:auto;margin-bottom:14px;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);background:#fff;
}
.q-de-tren{
  margin:0 0 14px;padding:14px 16px;
  font-size:16px;line-height:1.7;
  /* Giữ chỗ xuống dòng của người nhập: dạng bài sắp xếp câu có (가) (나) (다)
     (라), mỗi ý phải nằm một dòng mới đọc được. Khoảng trắng thừa vẫn gộp
     như bình thường nên dán từ PDF vào không bị thụt thò. */
  white-space:pre-line;
  background:var(--surface);
  border:2px dashed var(--line);border-radius:var(--r-sm);
}
.q-de{
  margin:0 0 16px;padding:16px;
  font-size:17px;line-height:1.8;
  white-space:pre-line;
  background:var(--surface-2);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}

/* Bốn khối chữ này tự lo việc chọn từ bằng JS (bấm giữ) khi tính năng AI
   đang bật, nên tắt bôi đen mặc định của trình duyệt ở đúng lúc đó — không
   thì cả hai kiểu chọn chồng lên nhau, và trình duyệt sẽ tự vẽ menu
   Chép/Dán/Tìm kiếm mà trang không tắt được. AI tắt thì [data-ai-select]
   không được in ra, chữ vẫn bôi đen bình thường như trước. */
[data-ai-select] .q-huong,[data-ai-select] .q-yeu-cau,[data-ai-select] .q-de-tren,[data-ai-select] .q-de,[data-ai-select] .q-opt-text{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
/* Máy tính không có cú bấm giữ nên chọn chữ bằng cách bấm rồi rê chuột. Đổi
   con trỏ thành dạng chọn chữ để nhìn là biết chỗ này rê được. */
@media (hover:hover) and (pointer:fine){
  [data-ai-select] .q-huong,[data-ai-select] .q-yeu-cau,[data-ai-select] .q-de-tren,[data-ai-select] .q-de,[data-ai-select] .q-opt-text{
    cursor:text;
  }
}
.ai-tu.is-chon{
  /* Cố định một màu đỏ, không đổi theo chủ đề theo mùa — để lúc nào cũng
     nhận ra ngay đây là phần đang chọn, khác với các màu nhấn khác trên
     trang vốn đổi theo chủ đề thành viên chọn. Chỉ tô nền, không viền —
     viền quanh từng từ sẽ tạo đường ngăn giữa các từ liền nhau, nhìn đứt
     đoạn thay vì một dải liền mạch như bôi đen thường thấy. */
  background:#FFC9C9;
}

/* Hai tay cầm ở hai đầu vùng đang chọn, kéo riêng để nới rộng thêm về
   trước hoặc về sau — vùng chạm để to (32px) cho dễ bắt, chấm đỏ hiện ra
   chỉ là phần nhìn thấy, nhỏ hơn để không che chữ. */
.ai-handle{
  position:fixed;z-index:9997;
  width:32px;height:32px;
  transform:translate(-50%,0);
  touch-action:none;
}
.ai-handle[hidden]{display:none}
.ai-handle::after{
  content:'';
  position:absolute;top:-2px;left:50%;
  width:14px;height:14px;
  transform:translate(-50%,0);
  border-radius:50%;
  background:#E5322F;
  box-shadow:0 0 0 2px #fff,0 1px 3px rgba(0,0,0,.35);
}

.q-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.q-opt{
  display:flex;align-items:flex-start;gap:9px;text-align:left;
  padding:14px 15px;font-size:15px;line-height:1.6;
  background:var(--surface);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.q-opt:active{transform:translate(2px,2px);box-shadow:none}
.q-opt-so{font-weight:800;flex:0 0 auto}
.q-opt.is-on{background:var(--pink);color:#fff}
.q-opt.is-dap{background:#2E9E4F;color:#fff}
.q-opt.is-sai{background:#E5322F;color:#fff}

.q-viet{display:flex;flex-direction:column;gap:13px}
.q-viet label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:800}
.q-viet input,.q-viet textarea{
  width:100%;padding:13px 15px;font:inherit;font-size:15px;font-weight:500;
  background:var(--surface);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.q-viet textarea{line-height:1.8;resize:vertical}
.q-dem{align-self:flex-end;font-size:12px;font-weight:700;color:var(--text-soft)}
.q-dem.is-bad{color:#c0392b}

.q-ai{
  margin-top:16px;padding:10px 18px;
  font-size:13px;font-weight:800;
  background:var(--yellow);color:#111;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}

.q-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.q-prev,.q-next{
  padding:12px 20px;font-size:14px;font-weight:800;
  background:var(--surface);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
}
.q-prev:disabled,.q-next:disabled{opacity:.4;box-shadow:none}
.q-pos{font-size:14px;font-weight:700;color:var(--text-soft)}

.qmap{
  position:sticky;top:96px;
  padding:18px;
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
}
.qmap-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.qmap-top b{font-size:17px;font-weight:800}
.qmap-top span{font-size:13px;font-weight:700;color:var(--text-soft)}
.qmap-part{margin:0 0 11px;font-size:14px;font-weight:700}

.qmap-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;max-height:52vh;overflow-y:auto}
.qmap-o{
  padding:9px 0;font-size:13px;font-weight:800;
  background:var(--surface);color:var(--ink);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.qmap-o.is-done{background:#BFD4FF}
.qmap-o.is-now{background:var(--pink);color:#fff}
.qmap-o.is-ok{background:#2E9E4F;color:#fff}
.qmap-o.is-bad{background:#E5322F;color:#fff}

.qmap-note{display:flex;align-items:center;gap:6px;margin:13px 0 0;font-size:11px;font-weight:700;color:var(--text-soft)}
.qmap-cham{
  width:13px;height:13px;border:var(--bd) solid var(--line);border-radius:50%;
  background:var(--surface);
}
.qmap-cham.is-done{background:#BFD4FF}
.qmap-cham.is-now{background:var(--pink)}

.doing-result{
  position:fixed;inset:0;z-index:40;
  display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.45);
}
.doing-result[hidden]{display:none}
.doing-result-box{
  width:min(94vw,420px);padding:28px;text-align:center;
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
}
.doing-result-box h2{margin:0 0 12px;font-size:21px;font-weight:800}
.doing-score{margin:0 0 8px;font-size:17px;color:var(--text-soft)}
.doing-score b{font-size:44px;font-weight:800;color:var(--pink)}
.doing-detail{margin:0 0 20px;font-size:14px;line-height:1.7}
.doing-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.doing-review{
  padding:11px 18px;font-size:13px;font-weight:800;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}

@media (max-width:960px){
  .doing-wrap{grid-template-columns:1fr}
  .qmap{position:static}
  .qmap-grid{max-height:180px}
  .q-opts{grid-template-columns:1fr}
  .doing-title b{font-size:16px}
  .exam-banner h1{font-size:23px}
  .exam-part{flex-direction:column;align-items:flex-start}
}

/* lịch sử làm bài */
.tries{display:flex;flex-direction:column;gap:11px}
.try{
  display:grid;align-items:center;gap:12px;
  grid-template-columns:1fr auto 120px auto;
  padding:14px 16px;
  background:var(--surface);
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
}
.try-main strong{display:block;font-size:15px;font-weight:800}
.try-main small{font-size:12px;color:var(--text-soft)}
.try-score b{font-size:22px;font-weight:800;color:var(--pink)}
.try-score span{font-size:13px;color:var(--text-soft)}
.try-bar{
  height:12px;background:var(--surface-2);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);overflow:hidden;
}
.try-bar i{display:block;height:100%;background:var(--pink)}
.try-right{font-size:15px;font-weight:800;text-align:right}
.try-right small{display:block;font-size:11px;font-weight:600;color:var(--text-soft)}

@media (max-width:700px){
  .try{grid-template-columns:1fr auto;gap:8px}
  .try-bar{grid-column:1/-1}
  .try-right{text-align:left}
}



/* AI chấm phần viết */
.doing-cham{
  padding:11px 18px;font-size:13px;font-weight:800;
  background:var(--yellow);color:#111;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.doing-cham[hidden]{display:none}
.doing-cham:disabled{opacity:.6}

.q-cham{
  margin-top:16px;padding:16px;
  background:var(--surface-2);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.q-cham-diem{margin:0;font-size:15px;color:var(--text-soft)}
.q-cham-diem b{font-size:28px;font-weight:800;color:var(--pink)}
.q-cham-tieu{margin:4px 0 0;font-size:12px;font-weight:700;color:var(--text-soft)}
.q-cham-nx{margin:11px 0 0;font-size:14px;line-height:1.8}
.q-cham-sua{margin:12px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.q-cham-sua li{font-size:13px;line-height:1.7}
.q-cham-sua s{color:#E5322F}
.q-cham-sua b{color:#2E9E4F}
.q-cham-sua em{display:block;font-style:normal;font-size:12px;color:var(--text-soft)}
.q-cham-chu{
  margin:9px 0 0;padding:6px 11px;display:inline-block;
  font-size:12px;font-weight:700;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.q-cham-chu.is-bad{background:#FFE0E0;color:#B3201E}

/* ============================================================
   BẢNG XẾP HẠNG
   ============================================================ */
.bxh{max-width:900px;margin:0 auto}

.bxh-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}
.bxh-ico{font-size:30px;line-height:1}
.bxh-head h1{margin:0;font-size:26px;font-weight:900}
.bxh-head p{margin:4px 0 0;font-size:13px;color:var(--text-soft);line-height:1.6}
.bxh-moi{
  flex:0 0 auto;margin-left:auto;
  padding:9px 14px;font-size:13px;font-weight:800;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.bxh-moi:active{transform:translate(1px,1px)}

.bxh-trong{
  padding:22px;text-align:center;font-weight:700;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r);
}

/* bục ba hạng đầu, hạng nhất ở giữa và cao hơn.
   Giữ ba cột ở cả màn dọc lẫn ngang — xếp dọc thì mất hẳn hình dáng cái bục. */
.bxh-buc{
  display:grid;grid-template-columns:repeat(3,1fr);
  align-items:end;gap:10px;margin-bottom:16px;
}
.bxh-buc-o{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:16px 10px;text-align:center;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r);
}
.bxh-buc-o--1{padding-top:22px;padding-bottom:22px;background:var(--yellow)}
.bxh-huy{font-size:24px;line-height:1}
.bxh-anh img{
  width:64px;height:64px;border-radius:50%;
  border:3px solid var(--yellow);object-fit:cover;display:block;
  box-shadow:0 0 0 2px var(--ink);
}
.bxh-buc-o--1 .bxh-anh img{width:78px;height:78px}
.bxh-vip{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 9px;font-size:11px;font-weight:800;white-space:nowrap;
  color:#8a5b00;background:#fff6e0;
  border:2px solid var(--yellow);border-radius:99px;
}
.bxh-ten{display:flex;align-items:center;gap:5px;font-weight:800;font-size:14px;flex-wrap:wrap}
.bxh-diem{
  padding:6px 12px;font-size:14px;font-weight:900;
  background:var(--paper);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
  white-space:nowrap;
}
.bxh-meta{
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;
  font-size:11px;font-weight:700;color:var(--text-soft);
}

/* các hạng còn lại */
.bxh-ds{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bxh-hang,
.bxh-toi{
  display:flex;align-items:center;gap:11px;
  padding:11px 13px;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r);
}
.bxh-toi{margin-top:12px;background:var(--yellow)}
.bxh-hang.is-toi{background:var(--yellow)}
.bxh-so{flex:0 0 46px;font-weight:900;font-size:14px}
.bxh-hang .bxh-anh img,
.bxh-toi .bxh-anh img{width:42px;height:42px}
.bxh-than{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.bxh-than .bxh-meta{justify-content:flex-start}
.bxh-hang .bxh-diem,
.bxh-toi .bxh-diem{margin-left:auto}

.bxh-chan{margin:16px 0 0;font-size:12px;color:var(--text-soft);line-height:1.6}

@media (max-width:640px){
  .bxh-head{flex-wrap:wrap}
  .bxh-moi{margin-left:0;order:3;width:100%;text-align:center}

  /* vẫn ba cột, chỉ thu nhỏ mọi thứ cho vừa bề ngang điện thoại */
  .bxh-buc{gap:6px}
  .bxh-buc-o{padding:12px 6px;gap:5px}
  .bxh-buc-o--1{padding-top:16px;padding-bottom:16px}
  .bxh-huy{font-size:20px}
  .bxh-anh img{width:52px;height:52px}
  .bxh-buc-o--1 .bxh-anh img{width:62px;height:62px}
  .bxh-ten{font-size:12px;justify-content:center;gap:3px}
  .bxh-diem{padding:5px 8px;font-size:12px}
  .bxh-vip{padding:1px 7px;font-size:10px}
  .bxh-buc .bxh-meta{display:none}

  .bxh-so{flex:0 0 34px;font-size:13px}
  .bxh-meta{font-size:10px;gap:3px 8px}
}

/* màn rất hẹp thì bỏ huy hiệu trên bục cho khỏi tràn */
@media (max-width:380px){
  .bxh-buc .bxh-vip{display:none}
  .bxh-ten{font-size:11px}
}

/* ---- Chọn mẫu giao diện: cùng dáng hàng với các nút gạt bên dưới ---- */
.skins{margin-top:14px}
.skin{text-align:left;width:100%}
.skin.is-active{background:var(--pink-soft);border-color:var(--pink)}

/* chấm tròn thay cho nút gạt, vì đây là chọn một trong ba chứ không bật tắt */
.skin-cham{
  position:relative;flex:0 0 auto;
  width:26px;height:26px;
  background:var(--surface-2);
  border:var(--bd) solid var(--line);border-radius:50%;
}
.skin.is-active .skin-cham{border-color:var(--pink)}
.skin.is-active .skin-cham::after{
  content:"";position:absolute;inset:4px;
  background:var(--pink);border-radius:50%;
}

/* ô xem trước: hai thanh giả lập dáng thẻ của từng mẫu */
.skin-xem{display:flex;gap:5px;flex:0 0 auto;width:56px;height:36px;align-items:stretch;margin-left:auto}
.skin-xem span{flex:1;background:var(--surface-2)}
.skin .toggle-text{flex:1;min-width:0}
.skin-xem--mem span{border:1px solid #e2e3e8;border-radius:16px;box-shadow:0 3px 10px rgba(0,0,0,.10)}
.skin-xem--phang span{border:1px solid #e6e6ea;border-radius:4px}
.skin-xem--kinh span{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.8);border-radius:14px;
  box-shadow:0 3px 12px rgba(31,45,90,.14), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ============================================================
   SHADOWING
   ============================================================ */
.sd{max-width:900px;margin:0 auto}
.sd-head{margin-bottom:14px}
.sd-ve{font-size:13px;font-weight:700;color:var(--text-soft)}
.sd-cap{
  display:inline-block;margin:0 0 0 8px;padding:3px 10px;
  font-size:12px;font-weight:800;
  background:var(--pink-soft);color:var(--pink);
  border:var(--bd) solid var(--pink);border-radius:99px;
}
.sd-head h1{margin:8px 0 0;font-size:24px;font-weight:900;line-height:1.3}

.sd-trong,.sd-khoa{
  padding:22px;text-align:center;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-sm);
}
.sd-khoa .btn{display:inline-block;margin-top:10px}

.sd-video{
  position:relative;padding-top:56.25%;overflow:hidden;
  background:#000;border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-sm);
}
.sd-video iframe,.sd-video>div{position:absolute;inset:0;width:100%;height:100%}

.sd-dieu{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.sd-nhom{display:flex;align-items:center;gap:7px;margin-left:auto}
.sd-b{
  display:inline-grid;place-items:center;width:44px;height:42px;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.sd-b svg{width:19px;height:19px;display:block}
.sd-b:active{transform:translate(1px,1px)}
.sd-b.is-on{background:var(--pink);color:#fff;border-color:var(--pink)}
.sd-b--go{width:54px;background:var(--pink);color:#fff;border-color:var(--pink)}
.sd-b--go .p-pause{display:none}
.sd-b--go.is-playing .p-play{display:none}
.sd-b--go.is-playing .p-pause{display:block}

/* công tắc tự ngắt câu */
.sd-tat{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:800}
.sd-nut{
  width:46px;height:26px;padding:3px;display:block;
  background:var(--surface-2);border:var(--bd) solid var(--line);
  border-radius:99px;transition:background .15s;
}
.sd-nut::after{
  content:"";display:block;width:18px;height:18px;
  background:var(--surface);border:2px solid var(--line);border-radius:50%;
  transition:transform .15s;
}
.sd-tat.is-on .sd-nut{background:var(--pink)}
.sd-tat.is-on .sd-nut::after{transform:translateX(20px)}

.sd-cong{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.sd-c{
  padding:8px 13px;font-size:13px;font-weight:800;line-height:1;
  min-height:38px;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.sd-c.is-on{background:var(--pink-soft);border-color:var(--pink);color:var(--pink)}
.sd-c--rate{min-width:52px;font-variant-numeric:tabular-nums}

/* danh sách câu */
.sd-ds{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.sd-cau{
  display:flex;gap:11px;padding:12px 14px;cursor:pointer;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r-sm);
}
.sd-cau.is-now{border-color:var(--pink);background:var(--pink-soft)}
.sd-stt{flex:0 0 26px;font-size:12px;font-weight:800;color:var(--text-soft)}
.sd-than{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sd-ro{font-size:12px;color:var(--text-soft);font-family:ui-monospace,Menlo,Consolas,monospace}
.sd-ko{font-size:18px;font-weight:800;line-height:1.6}
.sd-vi{font-size:13px;font-style:italic;color:var(--text-soft);line-height:1.6}

/* các lớp bật tắt do nút điều khiển */
.sd-box:not(.hien-ro) .sd-ro{display:none}
.sd-box:not(.hien-vi) .sd-vi{display:none}
.sd-chep{display:none;gap:7px;align-items:center;flex-wrap:wrap;margin-top:5px}
.sd-box.che-do-chep .sd-chep{display:flex}
.sd-box.che-do-chep .sd-cau:not(.is-now) .sd-ko{filter:blur(5px)}
.sd-chep-o{
  flex:1;min-width:180px;padding:8px 11px;font-size:15px;
  background:var(--paper);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.sd-kiem{
  padding:8px 12px;font-size:13px;font-weight:800;
  background:var(--pink);color:#fff;border:var(--bd) solid var(--pink);border-radius:var(--r-sm);
}
.sd-ket{width:100%;font-size:13px;font-weight:700}
.sd-ket.is-dung{color:#1f8a4c}
.sd-ket.is-sai .ok{color:var(--text-soft)}
.sd-ket.is-sai .sai{color:#c0392b;text-decoration:underline}

.sd-nguon{margin-top:12px;font-size:12px;color:var(--text-soft)}

@media (max-width:640px){
  .sd-head h1{font-size:20px}
  .sd-nhom{margin-left:0;order:-1;width:100%;justify-content:space-between}
  .sd-ko{font-size:16px}
}

/* ---- Danh sách bài shadowing ---- */
.sdl{max-width:1000px;margin:0 auto}
.sdl-head h1{margin:0;font-size:26px;font-weight:900}
.sdl-head p{margin:6px 0 0;font-size:14px;color:var(--text-soft);line-height:1.6}

.sdl-loc{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0}
.sdl-l{
  padding:7px 13px;font-size:13px;font-weight:800;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:99px;
}
.sdl-l.is-on{background:var(--pink);color:#fff;border-color:var(--pink)}

.sdl-bo{margin-bottom:26px}
.sdl-bo h2{margin:0 0 12px;font-size:19px;font-weight:900;border-left:5px solid var(--pink);padding-left:10px}
.sdl-bo h2 small{font-weight:700;font-size:13px;color:var(--text-soft)}

.sdl-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.sdl-the{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-sm);
}
.sdl-anh{position:relative;display:block;padding-top:56.25%;background:var(--surface-2)}
.sdl-anh img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sdl-cap,.sdl-mien,.sdl-dai{
  position:absolute;padding:3px 9px;font-size:11px;font-weight:800;
  border:2px solid var(--ink);border-radius:var(--r-sm);
}
.sdl-cap{top:8px;right:8px;background:var(--pink-soft);color:var(--pink)}
.sdl-mien{bottom:8px;left:8px;background:#c9f5d6;color:#166b36}
.sdl-dai{bottom:8px;right:8px;background:var(--paper)}
.sdl-than{display:flex;flex-direction:column;gap:5px;padding:11px 13px}
.sdl-ten{font-size:15px;font-weight:800;line-height:1.4}
.sdl-nguon{font-size:11px;font-weight:700;color:var(--text-soft);text-transform:uppercase}
.sdl-kieu{display:flex;gap:12px;font-size:12px;color:var(--text-soft)}

.sdl-trong{
  padding:22px;text-align:center;font-weight:700;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r);
}

/* khung bài chỉ có tiếng: lấy ảnh bìa làm nền cho đỡ trống */
.sd-video video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.sd-tieng{
  display:flex;align-items:flex-end;min-height:170px;padding:14px;
  background:var(--surface-2) center/cover no-repeat;
  border:var(--bd) solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
}
.sd-tieng audio{width:100%}

/* ============================================================
   PHÂN TÍCH CÂU
   ============================================================ */
.ptc{max-width:1000px;margin:0 auto}
.ptc-head h1{margin:0;font-size:26px;font-weight:900}
.ptc-head p{margin:6px 0 0;font-size:14px;color:var(--text-soft);line-height:1.6}

.ptc-nhap{display:flex;gap:9px;margin-top:16px}
#ptcCau{
  flex:1;min-width:0;padding:13px 15px;font-size:16px;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.ptc-go{
  padding:0 18px;min-height:48px;font-size:14px;font-weight:900;white-space:nowrap;
  background:var(--pink);color:#fff;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.ptc-go:active{transform:translate(1px,1px)}
.ptc-go[disabled]{opacity:.6}
.ptc-dem{margin:5px 2px 0;text-align:right;font-size:12px;color:var(--text-soft)}

.ptc-khoa{
  margin-top:12px;padding:11px 14px;font-size:13px;font-weight:700;
  background:var(--yellow);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.ptc-khoa a{text-decoration:underline;text-underline-offset:3px}
.ptc-loi{
  margin-top:12px;padding:11px 14px;font-size:13px;font-weight:700;
  background:#ffe3e3;color:#b3201e;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}

/* thẻ câu gốc */
.ptc-cau{
  margin-top:16px;padding:17px 19px;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-sm);
}
.ptc-cau-tren{display:flex;align-items:center;gap:11px}
.ptc-loa{
  flex:0 0 auto;display:inline-grid;place-items:center;width:42px;height:38px;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.ptc-ko{margin:0;font-size:20px;font-weight:900;line-height:1.5}
.ptc-ro{margin:9px 0 0;padding-bottom:11px;border-bottom:var(--bd) solid var(--line);
  font-size:13px;font-style:italic;color:var(--text-soft);font-family:ui-monospace,Menlo,Consolas,monospace}
.ptc-vi{margin:11px 0 0;font-size:15px;font-weight:700}

.ptc-tieu{margin:22px 0 10px;font-size:17px;font-weight:900}

/* lưới hình vị: mỗi cột là một từ trong câu */
.ptc-luoi{display:flex;gap:9px;overflow-x:auto;padding-bottom:8px;align-items:flex-start}
.ptc-cot{display:flex;flex-direction:column;gap:7px;min-width:92px}
.ptc-mat{
  padding:11px 9px;text-align:center;font-size:15px;font-weight:900;
  background:var(--pink);color:#fff;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.ptc-hv{
  display:flex;flex-direction:column;gap:2px;padding:9px 7px;text-align:center;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.ptc-form{font-size:17px;font-weight:900;line-height:1.3}
.ptc-nghia{font-size:11px;color:var(--pink);font-weight:700;line-height:1.4}
.ptc-loai{font-size:9px;font-weight:800;color:var(--text-soft);letter-spacing:.03em;line-height:1.3}

.ptc-ct{
  padding:11px 15px;font-size:13px;font-weight:800;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.ptc-ct[disabled]{opacity:.6}
.ptc-ct-ra:not(:empty){
  margin-top:12px;padding:16px 18px;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-sm);
}
.ptc-ct-ra h3{margin:14px 0 5px;font-size:15px;font-weight:900}
.ptc-ct-ra h3:first-child{margin-top:0}
.ptc-ct-ra p{margin:0;font-size:14px;line-height:1.7}

@media (max-width:640px){
  .ptc-head h1{font-size:21px}
  .ptc-nhap{flex-direction:column}
  .ptc-go{width:100%}
  .ptc-ko{font-size:17px}
  .ptc-cot{min-width:80px}
}

/* ---- Hàng cấu trúc cú pháp ---- */
.ptc-cum{display:flex;flex-wrap:wrap;gap:9px;align-items:flex-start}
.ptc-cum-o{
  display:flex;flex-direction:column;gap:6px;padding:9px 10px;align-items:center;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.ptc-cum-o.la-le{box-shadow:none;background:var(--surface-2)}
.ptc-cum-manh{display:flex;gap:7px;align-items:baseline}
.ptc-manh{font-size:17px;font-weight:900;line-height:1.3}
.ptc-manh--phu{color:var(--pink);font-weight:800}
.ptc-nhan{
  padding:3px 9px;font-size:10px;font-weight:800;letter-spacing:.03em;
  background:var(--pink);color:#fff;border-radius:99px;white-space:nowrap;
}

/* số dư credit trên đầu trang */
.ptc-dem{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ptc-du{font-weight:800;color:var(--ink)}
.ptc-go small{display:block;font-size:10px;font-weight:700;opacity:.85;margin-top:2px}

@media (max-width:640px){
  .ptc-cum{gap:7px}
  .ptc-manh{font-size:15px}
}

/* ---- Ngữ pháp trong câu ----
   Khối này cố tình khác màu phần còn lại: nền vàng nhạt, mẫu ngữ pháp màu đỏ,
   phần giải thích nằm trên dải vàng như ghi chú viết tay. Học viên lướt trang
   là nhận ra ngay đâu là chỗ cần nhớ. */
.ptc-np{
  --np-nen:#FFF8DC;
  --np-vien:#F2C94C;
  --np-do:#D92D20;
  --np-note:#FFF3BF;

  display:grid;gap:10px;
  padding:14px;
  background:var(--np-nen);
  border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-sm);
}
html[data-mode="dark"] .ptc-np{
  --np-nen:#332b10;
  --np-vien:#6b5a1e;
  --np-do:#ff8f85;
  --np-note:#3d3315;
}

.ptc-np-o{
  padding:13px 15px;
  background:var(--surface);
  border:var(--bd) solid var(--np-vien);
  border-radius:var(--r-sm);
}
.ptc-np-tren{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ptc-np-mau{
  padding:4px 11px;font-size:17px;font-weight:900;line-height:1.3;
  background:var(--np-do);color:#fff;border-radius:var(--r-sm);
}
.ptc-np-cap{
  padding:4px 10px;font-size:10px;font-weight:800;letter-spacing:.03em;
  background:var(--np-vien);color:#4a3a00;
  border-radius:99px;white-space:nowrap;
}
html[data-mode="dark"] .ptc-np-cap{color:#f5e9c0}
.ptc-np-nghia{
  margin:9px 0 0;font-size:15px;font-weight:900;color:var(--np-do);
}
.ptc-np-giai{
  margin:8px 0 0;padding:9px 11px;
  font-size:13px;line-height:1.7;
  background:var(--np-note);
  border-left:4px solid var(--np-vien);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}

/* ---- Ngữ pháp tương tự, gọi thêm bằng AI ---- */
.ptc-giong{margin-top:10px}
.ptc-giong-nut{
  padding:8px 13px;font-size:12px;font-weight:800;
  background:var(--surface);color:var(--np-do);
  border:2px solid var(--np-do);border-radius:99px;
}
.ptc-giong-nut[disabled]{opacity:.6}
.ptc-giong-ra:not(:empty){display:grid;gap:8px;margin-top:10px}
.ptc-giong-o{
  padding:11px 13px;
  background:var(--np-note);
  border:2px solid var(--np-vien);border-radius:var(--r-sm);
}
.ptc-giong-tren{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ptc-giong-mau{font-size:15px;font-weight:900;color:var(--np-do)}
.ptc-giong-nghia{margin:6px 0 0;font-size:13px;font-weight:800}
.ptc-giong-khac{margin:4px 0 0;font-size:12px;line-height:1.7;color:var(--text-soft)}
.ptc-giong-vd{margin:7px 0 0;font-size:14px;font-weight:800;line-height:1.5}
.ptc-giong-vdvi{margin:2px 0 0;font-size:12px;font-style:italic;color:var(--text-soft)}
.ptc-raw{margin-top:9px;font-weight:400}
.ptc-raw summary{cursor:pointer;font-size:12px;font-weight:700}
.ptc-raw pre{
  margin:8px 0 0;padding:10px;max-height:280px;overflow:auto;
  font-size:11px;line-height:1.5;white-space:pre-wrap;word-break:break-word;
  background:var(--surface);border:2px solid var(--line);border-radius:var(--r-sm);
}

/* ---- Thanh tua của trình phát shadowing ---- */
.sd-tua{display:flex;align-items:center;gap:10px;margin-top:12px}
.sd-gio{
  flex:0 0 auto;min-width:44px;font-size:12px;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--text-soft);
}
.sd-gio:last-child{text-align:right}
#sdTua{
  flex:1;min-width:0;height:8px;-webkit-appearance:none;appearance:none;
  background:var(--surface-2);
  border:var(--bd) solid var(--line);border-radius:99px;
}
#sdTua::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;
  background:var(--pink);border:2px solid var(--line);border-radius:50%;cursor:pointer;
}
#sdTua::-moz-range-thumb{
  width:18px;height:18px;
  background:var(--pink);border:2px solid var(--line);border-radius:50%;cursor:pointer;
}

/* chú thích nhỏ dưới ô nhập trong trang tài khoản */
.field-note{display:block;margin-top:5px;font-size:12px;color:var(--text-soft);line-height:1.5}
.field input[readonly]{background:var(--surface-2);color:var(--text-soft);cursor:not-allowed}

/* ============================================================
   THÁCH ĐẤU
   ============================================================ */
.du{max-width:860px;margin:0 auto}
.du-head h1{margin:0;font-size:26px;font-weight:900}
.du-head p{margin:6px 0 0;font-size:14px;color:var(--text-soft);line-height:1.6}

.du-tt{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}
.du-tt-o{
  flex:1;min-width:96px;display:flex;flex-direction:column;gap:2px;
  padding:11px 13px;text-align:center;font-size:12px;font-weight:700;color:var(--text-soft);
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.du-tt-o b{font-size:20px;font-weight:900;color:var(--ink)}
.du-tt-o--t b{color:#1f8a4c}
.du-tt-o--b b{color:#c0392b}

/* mỗi mục là một thẻ có nền riêng, tách hẳn khỏi nền phía sau */
.du-khoi{
  margin-bottom:14px;padding:15px 16px;
  background:var(--surface);
  border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-sm);
}
.du-khoi h2{
  margin:0 0 12px;font-size:17px;font-weight:900;
  display:flex;align-items:center;gap:7px;
}
.du-note{margin:8px 0 0;font-size:13px;color:var(--text-soft);line-height:1.6}

/* cách tính điểm: ba cột ngang hàng */
.du-bang{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.du-cot{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:13px 9px;text-align:center;
  background:var(--surface-2);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.du-cot-ten{font-size:12px;font-weight:800;color:var(--text-soft)}
.du-cot-so{font-size:24px;font-weight:900;line-height:1}
.du-cot--t{background:#e6faec;border-color:#8fdca8}
.du-cot--t .du-cot-so{color:#166b36}
.du-cot--b{background:#ffeceb;border-color:#f3b4ae}
.du-cot--b .du-cot-so{color:#a32820}
html[data-mode="dark"] .du-cot--t{background:#12321f;border-color:#2c6b41}
html[data-mode="dark"] .du-cot--b{background:#3a1a18;border-color:#7a3630}

/* các thẻ con nằm trong khối thì bỏ nền kép cho đỡ rối */
.du-khoi .du-hang{background:var(--surface-2)}

.du-tao{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap}
.du-cap{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:800}
.du-cap select{
  padding:11px 13px;font-size:14px;font-weight:700;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.du-go{
  padding:12px 18px;font-size:14px;font-weight:900;
  background:var(--pink);color:#fff;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.du-go:active{transform:translate(1px,1px)}
.du-go[disabled]{opacity:.6}

.du-ds{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.du-hang{
  display:flex;align-items:center;gap:11px;padding:11px 13px;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.du-anh img{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);object-fit:cover;display:block}
.du-than{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.du-than b{font-size:14px;font-weight:800}
.du-than small{font-size:12px;color:var(--text-soft)}
.du-nhan{
  padding:8px 14px;font-size:13px;font-weight:800;white-space:nowrap;
  background:var(--yellow);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.du-ket{padding:5px 11px;font-size:12px;font-weight:900;border-radius:99px;white-space:nowrap}
.du-thang{background:#c9f5d6;color:#166b36}
.du-thua{background:#ffd9d6;color:#a32820}
.du-hoa{background:var(--surface-2);color:var(--text-soft)}
.du-cho{background:var(--yellow);color:var(--ink)}

/* màn làm bài */
.du-top{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 14px;margin-bottom:12px;
  background:var(--yellow);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
  font-weight:800;
}
.du-dem{font-variant-numeric:tabular-nums}
.du-cau{
  padding:14px 16px;margin-bottom:10px;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-sm);
}
.du-huong{margin:0 0 8px;font-size:12px;font-weight:700;color:var(--text-soft);line-height:1.6}
.du-so{font-size:12px;font-weight:900;color:var(--pink)}
.du-de{margin:6px 0 0;font-size:16px;font-weight:700;line-height:1.7}
.du-anh-cau{display:block;max-width:100%;margin-top:9px;border:2px solid var(--line);border-radius:var(--r-sm)}
.du-chon{display:grid;gap:7px;margin-top:11px}
.du-y{
  padding:11px 13px;text-align:left;font-size:15px;line-height:1.5;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.du-y.is-chon{background:var(--pink-soft);border-color:var(--pink);font-weight:800}

.du-kq{
  padding:24px;text-align:center;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-sm);
}
.du-kq-diem{margin:0;font-size:36px;font-weight:900}
.du-kq-giay{margin:4px 0 0;font-size:13px;color:var(--text-soft)}
.du-kq-ket{display:inline-block;margin:14px 0 0;padding:8px 18px;font-size:17px;font-weight:900;border-radius:99px}
.du-kq-doi{margin:10px 0 0;font-size:14px;font-weight:700}
.du-kq-cho{margin:14px 0 0;font-size:14px;line-height:1.7;color:var(--text-soft)}
.du-kq .du-go{margin-top:16px}

.du-trong,.du-loi{
  padding:16px;text-align:center;font-weight:700;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.du-loi{background:#ffe3e3;color:#b3201e;margin-top:14px}

@media (max-width:640px){
  .du-head h1{font-size:21px}
  .du-tao{flex-direction:column;align-items:stretch}
  .du-go{width:100%}
  .du-de{font-size:15px}
}

/* ---- Tìm đối thủ và trạng thái online ---- */
.du-go--phu{background:var(--surface);color:var(--ink)}

.du-tim{
  display:flex;align-items:center;gap:10px;margin-top:11px;
  padding:11px 14px;font-size:13px;font-weight:700;
  background:var(--yellow);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.du-tim.la-xong{background:var(--surface-2);color:var(--text-soft)}
.du-tim.la-xong .du-quay,
.du-tim.la-xong .du-huy{display:none}
.du-quay{
  flex:0 0 auto;width:15px;height:15px;border-radius:50%;
  border:3px solid rgba(0,0,0,.2);border-top-color:var(--ink);
  animation:du-quay .8s linear infinite;
}
@keyframes du-quay{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.du-quay{animation:none}}
.du-huy{
  margin-left:auto;padding:5px 12px;font-size:12px;font-weight:800;
  background:var(--surface);border:2px solid var(--line);border-radius:99px;
}

.du-dem-on{
  display:inline-block;margin-left:6px;padding:2px 9px;
  font-size:12px;font-weight:800;
  background:#c9f5d6;color:#166b36;border-radius:99px;
}
.du-on{color:#1f8a4c;font-weight:700}
.du-on::before{
  content:"";display:inline-block;width:7px;height:7px;margin-right:5px;
  background:#1f8a4c;border-radius:50%;vertical-align:middle;
}

/* câu hỏi từ vựng trong trận: chữ to hơn, canh giữa cho dễ đọc nhanh */
.du-cau .du-de:not([lang="ko"]){font-size:18px;text-align:center;padding:6px 0}
.du-tao{align-items:flex-end}

/* khung chọn mức của máy, chỉ xổ ra khi bấm nút Đấu với máy */
.du-may{
  margin-top:9px;padding:12px 14px;
  background:var(--surface-2);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.du-may[hidden]{display:none}
.du-may-ten{display:block;margin-bottom:8px;font-size:13px;font-weight:800}
.du-may-ds{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.du-may-nut{background:var(--surface);text-align:center}

/* hàng vào trận: ô cấp độ và các nút chiếm hết chiều ngang */
.du-tao{flex-direction:column;align-items:stretch}
.du-tao .du-cap{width:100%}
.du-tao .du-cap select{width:100%}
.du-tao .du-go{width:100%}
/* nút Đấu với máy nằm ngoài hàng .du-tao nên phải cho rộng riêng */
#duMayMo{display:block;width:100%;margin-top:9px}

/* ảnh đại diện chữ cái cho người trong danh sách online chưa có ảnh */
.du-chu{
  display:grid;place-items:center;width:42px;height:42px;
  font-size:17px;font-weight:900;color:#fff;
  border:2px solid var(--line);border-radius:50%;
}
.bxh-chu{display:grid;place-items:center;font-weight:900;color:#fff;border:2px solid var(--line);border-radius:50%}

/* ---- Nút đăng nhập mạng xã hội do plugin cung cấp ---- */
.social-login{margin-top:18px}
.social-hoac{
  display:flex;align-items:center;gap:12px;
  margin-bottom:14px;font-size:12px;font-weight:700;color:var(--text-soft);
}
.social-hoac::before,
.social-hoac::after{content:"";flex:1;height:2px;background:var(--line)}
.social-login .nsl-container{margin:0!important}
.social-login .nsl-container-buttons{display:grid;gap:8px}

/* đồng hồ đếm ngược trong trận */
.du-gio{
  margin-left:10px;padding:3px 10px;
  font-size:14px;font-weight:900;font-variant-numeric:tabular-nums;
  background:var(--paper);border:2px solid var(--line);border-radius:99px;
}
.du-gio.la-gap{background:#ffd9d6;color:#a32820;border-color:#a32820}

/* ============================================================
   MÀN TÌM ĐỐI THỦ VÀ ĐỐI ĐẦU
   ============================================================ */
.vs{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.72);
}
.vs-hop{
  width:100%;max-width:440px;padding:26px 20px;text-align:center;
  background:var(--surface);
  border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);
}
.vs-tieu{margin:0;font-size:16px;font-weight:900}
.vs-phu{margin:14px 0 0;font-size:13px;color:var(--text-soft)}
.vs-dem{
  margin:10px 0 0;font-size:54px;font-weight:900;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--pink);
}
.vs-huy{
  margin-top:16px;padding:8px 18px;font-size:13px;font-weight:800;
  background:var(--surface);border:2px solid var(--line);border-radius:99px;
}

.vs-hang{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px}
.vs-ai{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.vs-ai img,
.vs-chu{
  width:76px;height:76px;border-radius:50%;object-fit:cover;display:block;
  border:3px solid var(--yellow);box-shadow:0 0 0 2px var(--ink);
}
.vs-chu{display:grid;place-items:center;font-size:30px;font-weight:900;color:#fff}
.vs-ten{
  font-size:13px;font-weight:800;line-height:1.4;
  overflow-wrap:anywhere;
}
.vs-chu-vs{
  flex:0 0 auto;font-size:19px;font-weight:900;color:var(--pink);
  padding:5px 10px;background:var(--pink-soft);border-radius:99px;
}

@media (max-width:380px){
  .vs-ai img,.vs-chu{width:62px;height:62px}
  .vs-dem{font-size:44px}
}

/* ---- Phòng riêng ---- */
.du-phong{
  margin-top:9px;padding:14px;text-align:center;
  background:var(--yellow);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.du-phong[hidden]{display:none}
.du-phong-ten{margin:0;font-size:12px;font-weight:800}
.du-phong-ma{
  margin:6px 0 10px;font-size:30px;font-weight:900;
  letter-spacing:.14em;font-variant-numeric:tabular-nums;
}
.du-phong-link{margin:0 0 10px}
.du-phong-link input{
  width:100%;padding:9px 11px;font-size:12px;
  background:var(--paper);border:2px solid var(--line);border-radius:var(--r-sm);
}
#duPhong{display:block;width:100%;margin-top:9px}
.du-vao{display:flex;gap:9px;align-items:stretch;margin-top:9px}
.du-vao .du-cap{display:flex;flex-direction:column;justify-content:flex-end}
.du-vao input{
  width:100%;padding:11px 13px;font-size:15px;font-weight:800;letter-spacing:.08em;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.du-vao .du-nhan{padding:12px 16px}

/* ---- Trận đấu nhóm ---- */
.du-nhom-moi{
  margin-bottom:14px;padding:14px;text-align:center;
  background:var(--yellow);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.du-nhom-ma{margin:0 0 8px;font-size:13px;font-weight:800}
.du-nhom-ma b{font-size:20px;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.du-nhom-moi .du-phong-link{margin:0 0 10px}
.du-nhom-moi .du-nhan{width:100%}

.du-nhom-trang-thai{margin:0 0 12px;font-size:13px;font-weight:700;color:var(--text-soft);text-align:center}

.du-nhom-doi{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.du-nhom-ben{
  padding:12px;
  background:var(--surface-2);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.du-nhom-ben-dau{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.du-nhom-ben-dau h3{margin:0;font-size:14px;font-weight:900}
.du-nhom-diem{font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}

.du-nhom-ds{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:7px;min-height:6px}
.du-nhom-tv{display:flex;align-items:center;gap:8px}
.du-nhom-tv-anh,.du-nhom-tv-chu{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;object-fit:cover;
  display:grid;place-items:center;font-size:12px;font-weight:900;color:#fff;
  border:2px solid var(--line);
}
.du-nhom-tv-anh img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.du-nhom-tv-ten{flex:1;min-width:0;font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.du-nhom-tv-diem{flex:0 0 auto;font-size:12px;font-weight:900;font-variant-numeric:tabular-nums}
.du-nhom-tv-diem.la-cho{color:var(--text-soft);font-weight:700}
.du-nhom-tv-diem.la-xong{color:var(--pink)}

.du-nhom-vao{width:100%;padding:9px}
.du-nhom-vao[hidden]{display:none}

.du-nhom-ket{
  margin:14px 0 0;padding:12px;text-align:center;font-size:15px;font-weight:900;
  border-radius:var(--r-sm);
}
.du-nhom-ket[hidden]{display:none}

@media (max-width:480px){
  .du-nhom-doi{grid-template-columns:1fr}
}

/* ---- Màn chờ trong phòng ---- */
.vs-ma{
  margin:12px 0 8px;font-size:30px;font-weight:900;
  letter-spacing:.14em;color:var(--pink);
}
.vs-link{
  width:100%;padding:8px 10px;margin-bottom:4px;font-size:12px;
  background:var(--surface-2);border:2px solid var(--line);border-radius:var(--r-sm);
}
.vs-san{
  display:inline-block;padding:2px 10px;
  font-size:11px;font-weight:800;
  background:var(--surface-2);color:var(--text-soft);border-radius:99px;
}
.vs-san.la-ok{background:#c9f5d6;color:#166b36}
.vs-san-nut{
  display:block;width:100%;margin-top:16px;padding:13px;
  font-size:15px;font-weight:900;
  background:var(--pink);color:#fff;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}

/* ============================================================
   LUYỆN HỘI THOẠI
   ============================================================ */
.ht{max-width:800px;margin:0 auto}
.ht-head h1{margin:0;font-size:26px;font-weight:900}
.ht-head p{margin:6px 0 0;font-size:14px;color:var(--text-soft);line-height:1.6}
.ht-du{
  margin:14px 0 0;padding:9px 13px;font-size:13px;font-weight:700;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.ht-khoa{
  margin-top:16px;padding:16px;text-align:center;font-weight:700;
  background:var(--yellow);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.ht-khoa a{text-decoration:underline;text-underline-offset:3px}

/* chọn tình huống */
.ht-chon{
  margin-top:18px;padding:18px;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-sm);
}
.ht-nhan{margin:0 0 9px;font-size:14px;font-weight:900}
.ht-goiy{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.ht-chip{
  display:flex;align-items:center;gap:9px;align-self:flex-start;
  padding:10px 15px;font-size:14px;font-weight:700;text-align:left;
  background:var(--surface-2);border:var(--bd) solid var(--line);
  border-radius:99px;box-shadow:var(--sh-sm);
}
.ht-chip:active{transform:translate(1px,1px)}

.ht-o{display:block;margin-bottom:14px}
.ht-o span{display:block;margin-bottom:6px;font-size:14px;font-weight:900}
.ht-o b{color:#D92D20}
.ht-o input{
  width:100%;padding:13px 15px;font-size:15px;
  background:var(--paper);border:var(--bd) solid var(--line);
  border-radius:var(--r-sm);
}

.ht-caps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.ht-cap-nut{
  display:flex;align-items:center;justify-content:center;gap:7px;
  min-width:0;padding:10px 8px;font-size:14px;font-weight:800;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.ht-cap-nut.is-on{background:var(--pink);color:#fff;border-color:var(--pink)}
.ht-cap-ko{
  padding:2px 9px;font-size:12px;font-weight:800;color:#fff;border-radius:6px;
}
.ht-cap-ko--1{background:#2E9E4F}
.ht-cap-ko--2{background:#2F7BE0}
.ht-cap-ko--3{background:#7A4BE0}

.ht-batdau{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:16px;font-size:17px;font-weight:900;
  background:var(--pink);color:#fff;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.ht-batdau small{font-size:12px;font-weight:700;opacity:.85}
.ht-batdau:active{transform:translate(1px,1px)}
.ht-batdau[disabled]{opacity:.6}
.ht-chan{margin:12px 0 0;font-size:12px;color:var(--text-soft);line-height:1.6}

/* nút micro */
.ht-mic{
  flex:0 0 auto;width:48px;
  font-size:19px;
  background:var(--surface-2);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.ht-mic.la-nghe{background:#ffd9d6;border-color:#a32820}
@media (prefers-reduced-motion:no-preference){
  .ht-mic.la-nghe{animation:ht-nhay 1s ease-in-out infinite}
}
@keyframes ht-nhay{50%{opacity:.55}}

/* khung chat */
.ht-khung{margin-top:18px}
.ht-top{
  display:flex;align-items:center;gap:10px;padding:11px 14px;
  background:var(--yellow);border:var(--bd) solid var(--line);
  border-radius:var(--r-sm) var(--r-sm) 0 0;font-weight:900;
}
.ht-doi{
  margin-left:auto;padding:5px 12px;font-size:12px;font-weight:800;
  background:var(--surface);border:2px solid var(--line);border-radius:99px;
}
.ht-dong{
  display:flex;flex-direction:column;gap:10px;
  height:58vh;min-height:320px;overflow-y:auto;padding:14px;
  background:var(--surface-2);
  border:var(--bd) solid var(--line);border-top:0;
}
.ht-bong{
  position:relative;max-width:82%;padding:11px 14px;
  border:var(--bd) solid var(--line);border-radius:var(--r);
}
.la-ai{align-self:flex-start;background:var(--surface);border-bottom-left-radius:4px}
.la-toi{align-self:flex-end;background:var(--pink-soft);border-bottom-right-radius:4px}
.la-cho{color:var(--text-soft);letter-spacing:.2em}
.ht-ko{margin:0;font-size:16px;font-weight:700;line-height:1.7}
.ht-vi{margin:5px 0 0;font-size:13px;font-style:italic;color:var(--text-soft);line-height:1.6}
.ht-loa{
  position:absolute;top:8px;right:8px;
  width:26px;height:26px;font-size:13px;line-height:1;
  background:var(--surface-2);border:2px solid var(--line);border-radius:50%;
}
.la-ai .ht-ko{padding-right:26px}

/* phần sửa câu */
.ht-sua{
  margin-top:9px;padding:9px 11px;
  background:#FFF8DC;border-left:4px solid #D92D20;border-radius:0 var(--r-sm) var(--r-sm) 0;
}
html[data-mode="dark"] .ht-sua{background:#332b10}
.ht-sua-nhan{font-size:10px;font-weight:900;letter-spacing:.04em;color:#D92D20}
.ht-sua-ko{margin:3px 0 0;font-size:15px;font-weight:800;line-height:1.6}
.ht-sua-vs{margin:4px 0 0;font-size:12px;line-height:1.6;color:var(--text-soft)}

/* gợi ý và ô gõ */
.ht-goi{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0;padding:9px 14px;
  background:var(--surface);border:var(--bd) solid var(--line);border-top:0;
}
.ht-goi[hidden]{display:none}
.ht-goi-nhan{font-size:11px;font-weight:900;color:var(--text-soft)}
.ht-goi-cau{
  padding:5px 12px;font-size:13px;font-weight:700;
  background:var(--surface-2);border:2px solid var(--line);border-radius:99px;
}
.ht-go{display:flex;gap:8px;padding:12px 14px;
  background:var(--surface);border:var(--bd) solid var(--line);border-top:0;
  border-radius:0 0 var(--r-sm) var(--r-sm);
}
#htCau{
  flex:1;min-width:0;padding:12px 14px;font-size:15px;
  background:var(--paper);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.ht-gui{
  padding:0 20px;font-weight:900;
  background:var(--pink);color:#fff;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.ht-gui[disabled]{opacity:.6}
.ht-loi{
  margin:0;padding:10px 14px;font-size:13px;font-weight:700;
  background:#ffe3e3;color:#b3201e;border:var(--bd) solid var(--line);border-top:0;
}
.ht-loi[hidden]{display:none}

@media (max-width:380px){
  .ht-caps{grid-template-columns:repeat(2,1fr)}
  .ld-caps{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  .ht-head h1{font-size:21px}
  .ht-ds{grid-template-columns:1fr}
  .ht-bong{max-width:92%}
  .ht-dong{height:52vh}
}

/* ---- Hai bảng xếp hạng và khung quà ---- */
.bxh-tab{display:flex;gap:0;margin:14px 0}
.bxh-tab-o{
  flex:1;padding:11px 12px;text-align:center;
  font-size:14px;font-weight:800;
  background:var(--surface);border:var(--bd) solid var(--line);
  box-shadow:var(--sh-sm);
}
.bxh-tab-o:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.bxh-tab-o:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0;border-left:0}
.bxh-tab-o.is-on{background:var(--pink);color:#fff;border-color:var(--pink)}

.bxh-qua{
  margin-bottom:16px;padding:16px;
  background:#FFF8DC;
  border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-sm);
}
html[data-mode="dark"] .bxh-qua{background:#332b10}
.bxh-qua h2{
  display:flex;align-items:center;gap:8px;
  margin:0 0 6px;font-size:16px;font-weight:900;
}
.bxh-qua-ico{font-size:19px}
.bxh-qua-mo{margin:0 0 12px;font-size:13px;line-height:1.6}
.bxh-qua-ds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bxh-qua-o{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:12px 8px;text-align:center;
  background:var(--surface);
  border:2px solid var(--line);border-radius:var(--r-sm);
}
.bxh-qua-o--1{background:#FFF3BF;border-color:#E6B800}
.bxh-qua-o--2{background:#F1F2F4;border-color:#A8ADB5}
.bxh-qua-o--3{background:#FFE6D1;border-color:#D98E4F}
html[data-mode="dark"] .bxh-qua-o{background:#2a2a30}
.bxh-qua-huy{font-size:22px;line-height:1}
.bxh-qua-gia{font-size:19px;font-weight:900}
.bxh-qua-ten{font-size:11px;font-weight:700;color:var(--text-soft);line-height:1.4}
.bxh-qua-ghi{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--text-soft)}

@media (max-width:380px){
  .bxh-tab-o{font-size:13px;padding:10px 6px}
  .bxh-qua-gia{font-size:16px}
}

/* ============================================================
   LUYỆN DỊCH
   ============================================================ */
.ld{max-width:800px;margin:0 auto}
.ld-head h1{margin:0;font-size:26px;font-weight:900}
.ld-head p{margin:6px 0 0;font-size:14px;color:var(--text-soft);line-height:1.6}
.ld-du{
  margin:14px 0 0;padding:9px 13px;font-size:13px;font-weight:700;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.ld-khoa{
  margin-top:16px;padding:16px;text-align:center;font-weight:700;
  background:var(--yellow);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.ld-khoa a{text-decoration:underline;text-underline-offset:3px}
.ld-loi{
  margin:14px 0 0;padding:11px 14px;font-size:13px;font-weight:700;
  background:#ffe3e3;color:#b3201e;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.ld-loi[hidden]{display:none}

/* chọn kiểu luyện */
.ld-chon,
.ld-bai,
.ld-ket{
  margin-top:16px;padding:18px;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-sm);
}
.ld-nhan{margin:0 0 9px;font-size:14px;font-weight:900}
.ld-chieu{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:18px}
.ld-chieu-nut{
  display:flex;flex-direction:column;gap:4px;padding:14px;text-align:left;
  background:var(--surface-2);border:var(--bd) solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.ld-chieu-nut strong{font-size:15px;font-weight:900}
.ld-chieu-nut small{font-size:12px;color:var(--text-soft);line-height:1.5}
.ld-chieu-nut.is-on{background:var(--pink-soft);border-color:var(--pink)}
.ld-chieu-nut.is-on small{color:var(--ink)}

.ld-caps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.ld-cap-nut{
  display:flex;align-items:center;justify-content:center;gap:7px;
  min-width:0;padding:10px 8px;font-size:14px;font-weight:800;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.ld-cap-nut.is-on{background:var(--pink);color:#fff;border-color:var(--pink)}
.ld-cap-ko{padding:2px 9px;font-size:12px;font-weight:800;color:#fff;border-radius:6px}
.ld-cap-ko--1{background:#2E9E4F}
.ld-cap-ko--2{background:#2F7BE0}
.ld-cap-ko--3{background:#7A4BE0}

.ld-o{display:block;margin-bottom:16px}
.ld-o span{display:block;margin-bottom:6px;font-size:14px;font-weight:900}
.ld-o input,
.ld-o textarea{
  width:100%;padding:13px 15px;font-size:15px;line-height:1.7;
  background:var(--paper);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.ld-go{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:15px;font-size:16px;font-weight:900;
  background:var(--pink);color:#fff;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.ld-go small{font-size:12px;font-weight:700;opacity:.85}
.ld-go:active{transform:translate(1px,1px)}
.ld-go[disabled]{opacity:.6}
.ld-phu{
  width:100%;margin-top:9px;padding:12px;font-size:14px;font-weight:800;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}

/* đoạn cần dịch */
.ld-de{
  padding:15px;margin-bottom:16px;
  background:var(--surface-2);
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.ld-de-nhan{margin:0 0 8px;font-size:12px;font-weight:900;color:var(--text-soft)}
.ld-de-noi{margin:0;font-size:17px;line-height:1.9;font-weight:700}
.ld-tu{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:12px}
.ld-tu[hidden]{display:none}
.ld-tu-nhan{font-size:11px;font-weight:900;color:var(--text-soft)}
.ld-tu-o{
  display:inline-flex;align-items:baseline;gap:5px;
  padding:4px 10px;font-size:12px;
  background:var(--paper);border:2px solid var(--line);border-radius:99px;
}
.ld-tu-o b{font-size:13px;font-weight:800}

/* kết quả */
.ld-diem{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-bottom:14px}
.ld-diem-so{font-size:52px;font-weight:900;line-height:1;color:var(--pink)}
.ld-diem-tren{font-size:15px;font-weight:800;color:var(--text-soft)}
.ld-mat{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:14px}
.ld-mat-o{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 5px;text-align:center;
  background:var(--surface-2);border:2px solid var(--line);border-radius:var(--r-sm);
}
.ld-mat-ten{font-size:11px;font-weight:700;color:var(--text-soft)}
.ld-mat-so{font-size:15px;font-weight:900}
.ld-nhanxet{
  margin:0 0 16px;padding:12px 14px;font-size:14px;line-height:1.7;
  background:var(--yellow);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.ld-tieu{margin:18px 0 10px;font-size:16px;font-weight:900}
.ld-lois{display:grid;gap:9px}
.ld-loi-o{
  padding:12px 14px;
  background:#FFF8DC;border:2px solid var(--line);
  border-left:5px solid #D92D20;border-radius:0 var(--r-sm) var(--r-sm) 0;
}
html[data-mode="dark"] .ld-loi-o{background:#332b10}
.ld-loi-loai{
  display:inline-block;margin-bottom:6px;padding:2px 9px;
  font-size:10px;font-weight:900;letter-spacing:.03em;
  background:#D92D20;color:#fff;border-radius:99px;
}
.ld-loi-sai{margin:0;font-size:14px;font-weight:700;text-decoration:line-through;color:#a32820}
.ld-loi-dung{margin:5px 0 0;font-size:15px;font-weight:800;line-height:1.6}
.ld-loi-vs{margin:5px 0 0;font-size:12px;line-height:1.6;color:var(--text-soft)}
.ld-thamkhao{
  margin:0;padding:14px;font-size:15px;line-height:1.9;font-weight:700;
  background:var(--surface-2);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.ld-ket .ld-go{margin-top:18px}

@media (max-width:640px){
  .ld-head h1{font-size:21px}
  .ld-chieu{grid-template-columns:1fr}
  .ld-mat{grid-template-columns:repeat(2,1fr)}
  .ld-de-noi{font-size:16px}
  .ld-diem-so{font-size:44px}
}

/* ============================================================
   SỔ TAY RIÊNG
   ============================================================ */
.st{max-width:820px;margin:0 auto}
.st-head h1{margin:0;font-size:26px;font-weight:900}
.st-head p{margin:6px 0 0;font-size:14px;color:var(--text-soft);line-height:1.6}
.st-khoa{
  margin-top:16px;padding:16px;text-align:center;font-weight:700;
  background:var(--yellow);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.st-khoa a{text-decoration:underline;text-underline-offset:3px}

.st-dem{display:flex;gap:9px;margin:14px 0}
.st-dem span{
  flex:1;padding:11px 13px;text-align:center;font-size:12px;font-weight:700;color:var(--text-soft);
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.st-dem b{display:block;font-size:20px;font-weight:900;color:var(--ink)}

.st-them{
  padding:18px;margin-bottom:16px;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-sm);
}
.st-them h2{margin:0 0 14px;font-size:17px;font-weight:900}
.st-o{display:block;margin-bottom:12px}
.st-o span{display:block;margin-bottom:5px;font-size:13px;font-weight:800}
.st-o b{color:#D92D20}
.st-o input,
.st-o textarea{
  width:100%;padding:11px 13px;font-size:15px;line-height:1.6;
  background:var(--paper);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}

.st-ai-hang{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.st-ai{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;font-size:13px;font-weight:800;
  background:var(--pink-soft);color:var(--pink);
  border:2px solid var(--pink);border-radius:99px;
}
.st-ai small{font-size:11px;font-weight:700;opacity:.8}
.st-ai[disabled]{opacity:.6}
.st-ai-tin{font-size:12px;font-weight:700;color:var(--text-soft)}

.st-nut{display:flex;gap:9px;align-items:stretch}
.st-go{
  flex:1;padding:13px;font-size:15px;font-weight:900;
  background:var(--pink);color:#fff;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.st-go[disabled]{opacity:.6}
.st-phu{
  padding:13px 18px;font-size:14px;font-weight:800;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.st-loi{
  margin:12px 0 0;padding:10px 13px;font-size:13px;font-weight:700;
  background:#ffe3e3;color:#b3201e;border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.st-loi[hidden]{display:none}

/* Ô tìm chiếm cả hàng trên, hai ô chọn chia đôi hàng dưới — không còn cảnh
   một ô rơi xuống dòng riêng với bề ngang khác hẳn hai ô kia. */
.st-loc{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px;
}
.st-loc input{grid-column:1 / -1}
.st-loc input,
.st-loc select{
  width:100%;min-width:0;
  padding:11px 13px;font-size:14px;
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}

@media (min-width:720px){
  /* Màn rộng thì ba ô nằm cùng một hàng, ô tìm rộng gấp đôi. */
  .st-loc{grid-template-columns:2fr 1fr 1fr}
  .st-loc input{grid-column:auto}
}

.st-ds{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.st-muc{
  display:flex;gap:11px;padding:13px 15px;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.st-muc[hidden]{display:none}
.st-muc.la-thuoc{background:var(--surface-2)}
.st-muc.la-thuoc .st-term{text-decoration:line-through;opacity:.65}
.st-than{flex:1;min-width:0}
.st-term{margin:0;font-size:18px;font-weight:900;line-height:1.5}
.st-reading{margin:2px 0 0;font-size:12px;color:var(--text-soft);font-family:ui-monospace,Menlo,Consolas,monospace}
.st-meaning{margin:4px 0 0;font-size:15px;font-weight:700}
.st-vd{margin:7px 0 0;font-size:14px;line-height:1.7}
.st-vdvi{margin:2px 0 0;font-size:13px;font-style:italic;color:var(--text-soft)}
.st-note{margin:6px 0 0;font-size:12px;line-height:1.6;color:var(--text-soft)}
.st-nhan{
  display:inline-block;margin-top:8px;padding:2px 10px;
  font-size:11px;font-weight:800;
  background:var(--yellow);border:2px solid var(--line);border-radius:99px;
}
.st-tay{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.st-tick{
  width:34px;height:34px;font-size:15px;font-weight:900;
  background:var(--surface-2);border:2px solid var(--line);border-radius:50%;
}
.la-thuoc .st-tick{background:#c9f5d6;color:#166b36;border-color:#166b36}
.st-nho{
  padding:5px 10px;font-size:12px;font-weight:800;
  background:var(--surface);border:2px solid var(--line);border-radius:99px;
}
.st-xoa{color:#b3201e}
.st-trong{
  padding:20px;text-align:center;font-weight:700;color:var(--text-soft);
  background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.st-trong[hidden]{display:none}

@media (max-width:640px){
  .st-head h1{font-size:21px}
  .st-muc{flex-direction:column}
  .st-tay{flex-direction:row}
}

/* ---- Chế độ học trong sổ tay ---- */
.sth{margin-bottom:14px}
/* Nhãn đứng riêng một dòng, hai nút chia đôi bằng nhau. Để nhãn chen vào
   cùng hàng thì nút đầu bị đẩy hẹp lại, nhìn lệch hẳn so với nút thứ hai. */
.sth-chon{
  padding:12px 14px;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.sth-nhan{display:block;margin:0 0 9px;font-size:13px;font-weight:900}
.sth-hai{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.sth-nut{
  display:flex;flex-direction:column;gap:1px;align-items:flex-start;
  padding:11px 14px;text-align:left;
  background:var(--surface-2);border:2px solid var(--line);border-radius:var(--r-sm);
}
.sth-nut b{font-size:14px;font-weight:900}
.sth-nut small{font-size:11px;color:var(--text-soft)}
.sth-nut.is-on{background:var(--pink);color:#fff;border-color:var(--pink)}
.sth-nut.is-on small{color:rgba(255,255,255,.85)}

.sth-san{
  margin-top:10px;padding:16px;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-sm);
}
.sth-san[hidden]{display:none}
.sth-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.sth-dem{
  padding:4px 12px;font-size:13px;font-weight:900;font-variant-numeric:tabular-nums;
  background:var(--yellow);border:2px solid var(--line);border-radius:99px;
}
.sth-diem{font-size:12px;font-weight:800;color:var(--text-soft)}
.sth-nho{
  padding:5px 12px;font-size:12px;font-weight:800;
  background:var(--surface);border:2px solid var(--line);border-radius:99px;
}
.sth-top .sth-nho:last-child{margin-left:auto}

/* mặt thẻ */
.sth-the{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  min-height:220px;padding:28px 20px;text-align:center;cursor:pointer;
  background:var(--surface-2);border:var(--bd) solid var(--line);border-radius:var(--r);
}
.sth-the.la-thuoc{border-color:#2E9E4F}
.sth-hoi{margin:0;font-size:12px;font-weight:800;color:var(--text-soft)}
.sth-chu{margin:0;font-size:34px;font-weight:900;line-height:1.4;overflow-wrap:anywhere}
.sth-vd{margin:6px 0 0;font-size:16px;line-height:1.7}
.sth-vdvi{margin:2px 0 0;font-size:13px;font-style:italic;color:var(--text-soft)}
.sth-goi{margin:4px 0 0;font-size:11px;color:var(--text-soft)}
.sth-loa{
  position:absolute;top:10px;right:10px;
  width:34px;height:34px;font-size:15px;
  background:var(--surface);border:2px solid var(--line);border-radius:50%;
}

/* hàng nút chấm */
.sth-hang{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px}
.sth-di,
.sth-chua,
.sth-roi{
  padding:12px 6px;font-size:13px;font-weight:900;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.sth-di{background:var(--surface)}
.sth-di[disabled]{opacity:.45}
.sth-chua{background:#D92D20;color:#fff}
.sth-roi{background:#1f8a4c;color:#fff}

/* ô gõ */
.sth-the .sth-go{
  width:100%;max-width:460px;margin-top:6px;padding:13px 15px;
  font-size:18px;font-weight:700;text-align:center;
  background:var(--paper);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.sth-the .sth-go[disabled]{opacity:.7}
.sth-kiem{
  width:100%;max-width:460px;margin-top:4px;padding:13px;
  font-size:15px;font-weight:900;
  background:var(--pink);color:#fff;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.sth-ket{margin:2px 0 0;font-size:15px;font-weight:800}
.sth-ket.la-dung{color:#166b36}
.sth-ket.la-sai{color:#a32820}
.sth-ket[hidden]{display:none}

/* màn kết thúc */
.sth-xong{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 16px;text-align:center}
.sth-xong-tieu{margin:0;font-size:26px;font-weight:900}
.sth-xong-phu{margin:0;font-size:13px;color:var(--text-soft)}
.sth-lai{
  margin-top:8px;padding:12px 22px;font-size:15px;font-weight:900;
  background:var(--pink);color:#fff;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.sth-trong{margin:0;padding:24px;text-align:center;font-weight:700;color:var(--text-soft)}

@media (max-width:640px){
  .sth-chu{font-size:26px}
  .sth-the{min-height:180px;padding:22px 14px}
  .sth-hang{grid-template-columns:repeat(2,1fr)}
}

/* ---- Học từ vựng theo bài (dùng lại giao diện .sth của sổ tay) ---- */
.hb{margin:0 0 20px}
.hb-dong{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.hb-dong .sth-nhan{margin:0}
.hb-dem{font-size:12px;font-weight:800;color:var(--text-soft);white-space:nowrap}
.hb-dem b{color:#1f8a4c;font-size:14px;font-variant-numeric:tabular-nums}
.hb-tuy{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px}
.hb-chk{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;cursor:pointer}
.hb-chk input{width:17px;height:17px;accent-color:var(--pink)}
.hb-xoa{
  padding:4px 11px;font-size:11px;font-weight:800;color:var(--text-soft);
  background:transparent;border:2px dashed var(--line);border-radius:99px;
}
.hb-xoa[hidden]{display:none}

.hb-doc{margin:0;font-size:14px;font-style:italic;color:var(--text-soft)}
.hb-go{cursor:default}
.hb-bo{
  margin-top:2px;padding:4px 8px;font-size:12px;font-weight:700;
  color:var(--text-soft);background:none;border:0;text-decoration:underline;
}
.hb-bo[hidden]{display:none}
.sth-ket .hb-ket-tieu{margin:0;font-size:14px;font-weight:800}
.sth-ket .hb-ket-tu{margin:2px 0 0;font-size:26px;font-weight:900;color:var(--ink)}

.hb-sai{
  list-style:none;margin:6px 0 4px;padding:0;width:100%;max-width:420px;
  display:flex;flex-direction:column;gap:5px;text-align:left;
}
.hb-sai li{
  display:flex;gap:10px;align-items:baseline;
  padding:8px 12px;background:var(--surface-2);
  border:2px solid var(--line);border-radius:var(--r-sm);
}
.hb-sai b{font-size:16px;font-weight:900;flex:0 0 auto}
.hb-sai span{font-size:13px;color:var(--text-soft);min-width:0;overflow-wrap:anywhere}

/* dấu đã thuộc trên thẻ từ của trang bài */
.card-thuoc{
  display:none;margin-top:6px;
  width:22px;height:22px;place-items:center;
  font-size:12px;font-style:normal;font-weight:900;color:#fff;
  background:#1f8a4c;border:2px solid var(--line);border-radius:50%;
}
.card-no{display:flex;flex-direction:column;align-items:center}
.card.la-thuoc{border-color:#1f8a4c}
.card.la-thuoc .card-thuoc{display:grid}
.card.la-thuoc .card-no{color:#1f8a4c}

/* nút mở khung nhập trong sổ tay */
.st-mo{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;margin-bottom:12px;padding:14px;
  font-size:15px;font-weight:900;
  background:var(--pink);color:#fff;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.st-mo:active{transform:translate(1px,1px)}
.st-mo-cong{font-size:19px;line-height:1}
.st-mo.is-on{background:var(--surface);color:var(--ink)}
.st-mo.is-on .st-mo-cong{transform:rotate(45deg)}
.st-them[hidden]{display:none}


/* ============================================================
   CHỦ ĐỀ THEO MÙA VÀ NGÀY LỄ
   Mỗi chủ đề chỉ đổi màu nhấn và màu nền giấy, không đụng bố cục.
   ============================================================ */
html[data-mua="xuan"]{--pink:#E85D9E;--pink-soft:#FFF0F6;--pink-line:#FBD6E6;--yellow:#FFD9E8}
html[data-mua="ha"]{--pink:#0E8C8C;--pink-soft:#ECFBFB;--pink-line:#CBEDED;--yellow:#FFE08A}
html[data-mua="thu"]{--pink:#D2691E;--pink-soft:#FFF5EA;--pink-line:#F6DCC0;--yellow:#FFCF7A}
html[data-mua="dong"]{--pink:#2F6FD0;--pink-soft:#F1F6FD;--pink-line:#D5E3F7;--yellow:#CFE4FF}
html[data-mua="tet"]{--pink:#C8102E;--pink-soft:#FFF3F2;--pink-line:#FAD4D0;--yellow:#FFD34D}
html[data-mua="trungthu"]{--pink:#E07B00;--pink-soft:#FFF8EA;--pink-line:#F7E2B8;--yellow:#FFC93C}
html[data-mua="noel"]{--pink:#C1121F;--pink-soft:#F2FBF3;--pink-line:#CFE9D4;--yellow:#F5D061}
html[data-mua="halloween"]{--pink:#E8620C;--pink-soft:#FAF3FF;--pink-line:#E4D4F5;--yellow:#FFB65C}
html[data-mua="nhagiao"]{--pink:#C2185B;--pink-soft:#FFF2F6;--pink-line:#F8D3E0;--yellow:#FFD7E4}

/* lớp hình rơi ở nền */
.mua-roi{
  position:fixed;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;
}
.mua-roi span{
  position:absolute;top:-8vh;
  line-height:1;opacity:.55;
  will-change:transform;
  animation-name:mua-xuong;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes mua-xuong{
  0%{transform:translateY(-10vh) rotate(0deg)}
  100%{transform:translateY(112vh) rotate(320deg)}
}

/* Máy nào bật giảm chuyển động thì ẩn hẳn, chứ để đứng yên giữa màn hình
   thì nhìn như lỗi. */
@media (prefers-reduced-motion:reduce){
  .mua-roi{display:none}
}

/* Màn hẹp thì bớt cho đỡ rối và đỡ tốn pin. */
@media (max-width:640px){
  .mua-roi span:nth-child(n+9){display:none}
}

/* ---- Chọn chủ đề theo mùa trong trang cài đặt ---- */
.muas{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.mua{
  padding:12px 10px;text-align:center;font-size:14px;font-weight:800;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.mua:active{transform:translate(1px,1px)}
.mua.is-active{background:var(--pink);color:#fff;border-color:var(--pink)}

/* ---- Thẻ lời mời thách đấu ---- */
.moi{
  position:fixed;inset:0;z-index:9997;
  display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.72);
  animation:moi-len .2s ease-out;
}
@keyframes moi-len{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.moi{animation:none}}

.moi-hop{
  width:100%;max-width:360px;padding:24px 20px;text-align:center;
  background:var(--surface);
  border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);
}

.moi-anh{display:flex;justify-content:center;margin-bottom:12px}
.moi-anh img,
.moi-chu{
  display:grid;place-items:center;
  width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:3px solid var(--yellow);box-shadow:0 0 0 2px var(--ink);
  font-size:24px;font-weight:900;color:#fff;
}
.moi-than{display:flex;flex-direction:column;gap:4px}
.moi-than b{font-size:16px;font-weight:900}
.moi-than small{font-size:13px;color:var(--text-soft)}

.moi-dem{
  margin:14px 0 0;font-size:38px;font-weight:900;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--pink);
}

.moi-nut{margin-top:16px;display:flex;gap:9px}
.moi-nhan{
  flex:1;padding:11px 16px;font-size:14px;font-weight:900;
  background:var(--pink);color:#fff;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.moi-bo{
  flex:1;padding:11px 12px;font-size:13px;font-weight:800;
  background:var(--surface-2);border:2px solid var(--line);border-radius:var(--r-sm);
}

@media (max-width:380px){
  .moi-anh img,.moi-chu{width:54px;height:54px}
  .moi-dem{font-size:32px}
}

/* ============================================================
   LỘ TRÌNH
   ============================================================ */
.lt{max-width:880px;margin:0 auto;padding:6px 0 30px}

.lt-head{margin-bottom:18px}
.lt-kicker{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--pink)}
.lt-head h1{margin:0;font-size:clamp(26px,4vw,36px);font-weight:900;line-height:1.2}
.lt-lead{margin:8px 0 0;max-width:62ch;font-size:15px;line-height:1.65;color:var(--text-soft)}

/* ô số tổng quan */
.lt-tong{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}
.lt-so{
  display:flex;flex-direction:column;gap:2px;padding:14px 16px;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.lt-so b{font-size:24px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.1}
.lt-so > span{font-size:12px;font-weight:700;color:var(--text-soft)}

/* thước chặng: các mốc nối bằng một đường */
.lt-thuoc{
  position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:4px;margin:0 0 20px;padding:var(--lt-pt,4px) 0 4px;
}
/* Đường nối chạy qua tâm vòng tròn mốc, tính theo khoảng đệm phía trên. */
.lt-thuoc::before{
  content:"";position:absolute;left:10%;right:10%;top:calc(var(--lt-pt,4px) + 18px);height:2px;
  background:var(--line);opacity:.35;
}
.lt-moc{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0}
.lt-moc-so{
  display:grid;place-items:center;width:38px;height:38px;
  font-size:15px;font-weight:900;
  background:var(--surface);border:2px solid var(--line);border-radius:50%;
}
.lt-moc-ten{font-size:12px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.lt-moc.la-xong .lt-moc-so{background:#1f8a4c;border-color:#1f8a4c;color:#fff}
.lt-moc.la-dang .lt-moc-so{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 0 0 4px var(--pink-line)}

.lt-khach{
  margin:0 0 16px;padding:10px 14px;font-size:13px;line-height:1.6;
  background:var(--surface-2);border-radius:var(--r-sm);
}
.lt-khach a{font-weight:800;text-decoration:underline}

/* từng chặng */
.lt-ds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.lt-chang{
  padding:18px 18px 12px;scroll-margin-top:14px;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-sm);
}
.lt-chang.la-dang{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-line)}
.lt-chang-dau{display:flex;align-items:flex-start;gap:14px}
.lt-chang-so{
  flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;
  font-size:22px;font-weight:900;border:2px solid var(--line);border-radius:var(--r-sm);
}
.lt-chang.la-xong .lt-chang-so{background:#1f8a4c;border-color:#1f8a4c;color:#fff}
.lt-chang.la-dang .lt-chang-so{background:var(--pink);border-color:var(--pink);color:#fff}
.lt-chang-ten{flex:1;min-width:0}
.lt-cap{font-size:12px;font-weight:800;color:var(--pink)}
.lt-chang-ten h2{margin:2px 0 0;font-size:20px;font-weight:900}
.lt-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:4px 0 0;font-size:12px;font-weight:600;color:var(--text-soft)}
.lt-nhan-dang{
  flex:0 0 auto;padding:4px 10px;font-size:11px;font-weight:900;
  background:var(--pink);color:#fff;border-radius:99px;
}
.lt-nhan-dang[hidden]{display:none}
.lt-mo-ta{margin:12px 0 10px;font-size:14px;line-height:1.65}

.lt-tien{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.lt-tien-thanh{display:block;height:100%;background:#1f8a4c;border-radius:99px;transition:width .25s}
.lt-tien-chu{margin:5px 0 6px;font-size:12px;font-weight:800;color:var(--text-soft)}

.lt-viec{list-style:none;margin:0;padding:0}
.lt-muc{
  display:flex;align-items:center;gap:10px;padding:9px 0;
  border-top:1px solid var(--surface-2);
}
.lt-tick{flex:1;min-width:0;display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.lt-tick input{position:absolute;opacity:0;width:1px;height:1px}
.lt-o{
  flex:0 0 auto;width:22px;height:22px;margin-top:1px;
  border:2px solid var(--line);border-radius:6px;background:var(--surface);
  display:grid;place-items:center;
}
.lt-tick input:focus-visible + .lt-o{outline:3px solid var(--pink);outline-offset:2px}
.lt-tick input:checked + .lt-o{background:#1f8a4c;border-color:#1f8a4c}
.lt-tick input:checked + .lt-o::after{content:"✓";color:#fff;font-size:13px;font-weight:900;line-height:1}
.lt-chu{font-size:14px;line-height:1.5}
.lt-muc.la-xong .lt-chu{text-decoration:line-through;text-decoration-thickness:1px}
.lt-di{
  flex:0 0 auto;padding:5px 11px;font-size:12px;font-weight:800;white-space:nowrap;
  border:2px solid var(--line);border-radius:99px;
}
.lt-di:hover{background:var(--pink);border-color:var(--pink);color:#fff}

.lt-chu-y{margin:18px 0 0;font-size:12px;line-height:1.6;color:var(--text-soft)}

@media (max-width:640px){
  .lt-tong{gap:7px}
  .lt-so{padding:11px 10px}
  .lt-so b{font-size:19px}
  .lt-moc-ten{font-size:10px}
  .lt-moc-so{width:32px;height:32px;font-size:13px}
  .lt-thuoc::before{top:calc(var(--lt-pt,4px) + 15px)}
  .lt-chang{padding:14px 13px 8px}
  .lt-chang-so{width:40px;height:40px;font-size:18px}
  .lt-chang-ten h2{font-size:18px}
  .lt-nhan-dang{display:none}
}

/* ---- Lưu nhanh vào sổ tay từ trang bài học ---- */
.lp-so{
  display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;
  margin:0 0 16px;padding:12px 14px;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.lp-so-chu{flex:1 1 260px;margin:0;font-size:13px;line-height:1.6}
.lp-so-chu b{font-variant-numeric:tabular-nums}
.lp-so-nut{
  flex:0 0 auto;padding:10px 16px;font-size:13px;font-weight:900;
  background:var(--pink);color:#fff;
  border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.lp-so-nut[disabled]{background:var(--surface-2);color:var(--ink);opacity:.7;cursor:default}

.card-luu.is-luu{background:#1f8a4c;color:#fff}
.card-luu.is-luu svg{fill:currentColor}
.card-luu[disabled]{opacity:.6}

.luu-bao{
  position:fixed;left:50%;bottom:24px;z-index:60;
  display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);
  padding:11px 16px;font-size:13px;font-weight:700;
  background:var(--ink);color:var(--paper);border-radius:var(--r-sm);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  transform:translate(-50%,20px);opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;
}
.luu-bao.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.luu-bao a{font-weight:900;text-decoration:underline;white-space:nowrap}

@media (max-width:640px){
  .lp-so-nut{width:100%}
  .luu-bao{bottom:84px}
}

/* ---- Biểu tượng SVG của gói ---- */
.upgrade-plan-icon.has-svg{background:none;padding:0}
.upgrade-plan-svg{width:44px;height:44px;color:var(--plan-btn,var(--pink))}
.upgrade-table-svg{display:block;width:26px;height:26px;margin:4px auto 6px;color:var(--plan-btn,var(--pink))}
.jun-badge .jun-badge-tick{color:var(--badge,#8c8f94)}
html[data-mode="dark"] .jun-badge:not(.jun-badge--tick) .jun-badge-tick{color:color-mix(in srgb,var(--badge,#8c8f94) 80%,#fff)}

/* Nút của gói mặc định: không mua, chỉ báo trạng thái */
.upgrade-buy.is-nen,
.upgrade-table-buy.is-nen{
  background:var(--surface-2);color:var(--ink);cursor:default;
  box-shadow:inset 0 0 0 1px var(--surface-2);
}
.upgrade-plan.is-current .upgrade-buy.is-nen{
  background:transparent;color:var(--plan-btn,var(--pink));
  box-shadow:inset 0 0 0 2px var(--plan-btn,var(--pink));
}

/* ---- Thư chúc thi: lựa chọn trong trang Tài khoản ---- */
.thu-thi{
  margin-bottom:18px;padding:14px 16px;scroll-margin-top:14px;
  background:var(--surface);border:var(--bd) solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-sm);
}
.thu-thi form{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.thu-thi-chu{flex:1 1 280px;display:flex;flex-direction:column;gap:3px}
.thu-thi-chu strong{font-size:15px;font-weight:900}
.thu-thi-chu span{font-size:13px;line-height:1.55;color:var(--text-soft)}
.thu-thi-hang{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.thu-thi-hang select{
  padding:9px 12px;font:inherit;font-size:13px;color:var(--ink);
  background:var(--surface-2);border:var(--bd) solid var(--line);border-radius:var(--r-sm);
}
.thu-thi-ok{font-size:12px;font-weight:800;color:#1f8a4c}

/* ---- JunHSK: âm Hán Việt và cấp HSK trên thẻ từ ---- */
.card-hv{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.card-hv-am{
  padding:2px 9px;font-size:13px;font-weight:900;letter-spacing:.4px;
  color:var(--pink);background:var(--pink-soft);border-radius:99px;
}
.card-hsk{
  padding:2px 8px;font-size:11px;font-weight:800;
  background:var(--surface-2);border-radius:99px;
}
.card-hsk--moi{color:var(--pink)}
.hb-hv{margin:0;font-size:14px;font-weight:900;letter-spacing:.4px;color:var(--pink)}
.card-term,.sth-chu,.st-term{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",var(--font)}