/* ───────── Vocabulary · BASE (theme-agnostic structure + flip) ─────────
   Surfaces/colors live in vocab-flat.css (default) + vocab-skeuo.css. */
.vc-full-page:not(.vc-access-denied) .hd,.vc-full-page:not(.vc-access-denied) .ft,.vc-full-page:not(.vc-access-denied) footer.ft{ display:none !important; }
body.vc-full-page{ margin:0; }
/* Full-page app: ẩn WP admin bar vàng — giống immersive shell Speaking/Grammar */
body.vc-full-page #wpadminbar{ display:none !important; }
body.vc-full-page.admin-bar{ margin-top:0 !important; padding-top:0 !important; }

.vc-root{ --vc-ui:'Inter','Be Vietnam Pro',-apple-system,system-ui,sans-serif; --vc-serif:'Source Serif 4',Georgia,serif;
  --vc-sidebar-w:248px;
  display:grid; grid-template-columns:var(--vc-sidebar-w) 1fr; min-height:100vh; font-family:var(--vc-ui); -webkit-font-smoothing:antialiased; }
.vc-root *{ box-sizing:border-box; }

.vc-side{ display:flex; flex-direction:column; padding:18px 14px; position:sticky; top:0; height:100vh; }
.admin-bar .vc-side{ height:calc(100vh - 32px); top:32px; }
.vc-brand{ display:flex; align-items:flex-start; gap:12px; padding:6px 8px 20px; }
.vc-brand-text{ flex:1; min-width:0; padding-top:2px; }
.vc-brand-name{ font-size:16px; font-weight:700; letter-spacing:-.2px; line-height:1.2; width:fit-content; max-width:100%; }
.vc-brand-sub{ margin-top:4px; font-size:11px; font-weight:600; letter-spacing:.02em; line-height:1.35; white-space:nowrap; width:100%; transform-origin:left center; }
.vc-logo{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:800; font-size:20px; flex-shrink:0; margin-top:2px; }
.vc-logo i{ font-size:23px; }
.vc-navlbl{ font-size:11px; letter-spacing:.6px; font-weight:600; margin:8px 10px 8px; text-transform:uppercase; }
.vc-nav{ display:flex; flex-direction:column; gap:2px; }
.vc-nav-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:11px; text-decoration:none; font-size:14px; font-weight:500; transition:.15s; }
.vc-nav-item i{ font-size:19px; width:20px; text-align:center; }
.vc-side-foot{ margin-top:auto; display:flex; flex-direction:column; gap:10px; }
.vc-streak{ display:flex; align-items:center; gap:12px; padding:13px; border-radius:14px; }
.vc-flame{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-size:18px; flex-shrink:0; }
.vc-streak b{ font-size:16px; font-weight:700; } .vc-streak small{ display:block; font-size:11.5px; }
.vc-user{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:12px; }
.vc-av,.vc-av-img{ width:34px; height:34px; border-radius:50%; flex-shrink:0; object-fit:cover; }
.vc-me .vc-av-img{ width:32px; height:32px; }
.vc-user-name{ font-size:13px; font-weight:600; } .vc-user-sub{ font-size:11px; }

.vc-main{ display:flex; flex-direction:column; min-width:0; }
.vc-top{ display:flex; align-items:center; gap:12px; padding:14px 24px; position:sticky; top:0; z-index:20; }
.admin-bar .vc-top{ top:32px; }
.vc-search{ display:flex; align-items:center; gap:10px; padding:10px 15px; border-radius:12px; font-size:13.5px; max-width:430px; flex:0 1 430px; position:relative; }
.vc-search i{ font-size:17px; flex-shrink:0; }
.vc-search .vc-k{ display:none !important; }
.vc-search-input{
  flex:1; min-width:0; width:100%;
  border:0 !important; background:transparent !important; background-color:transparent !important;
  background-image:none !important; box-shadow:none !important; outline:none !important;
  border-radius:0 !important; -webkit-appearance:none !important; appearance:none !important;
  font:inherit; font-size:13.5px; color:inherit; padding:0; min-height:0; line-height:1.4;
}
.vc-search-input::placeholder{ color:inherit; opacity:.7; }
.vc-search-results{ display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; max-height:360px; overflow:auto; border-radius:14px; padding:6px; z-index:60; }
.vc-search-results.open{ display:block; }
.vc-sr-item{ display:flex; align-items:baseline; gap:10px; padding:9px 12px; border-radius:9px; text-decoration:none; }
.vc-sr-term{ font-weight:700; font-size:14px; flex-shrink:0; max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vc-sr-vn{ flex:1; min-width:0; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vc-sr-unit{ font-size:11px; opacity:.55; flex-shrink:0; white-space:nowrap; }
.vc-sr-empty{ padding:16px; text-align:center; font-size:13px; opacity:.6; }
.vc-sr-ico{ width:26px; height:26px; border-radius:7px; display:grid; place-items:center; font-size:15px; flex-shrink:0; }
.vc-sr-set .vc-sr-term{ max-width:none; }
.vc-spacer{ flex:1; }
.vc-skin-switch{ display:flex; border-radius:11px; padding:3px; gap:2px; }
.vc-skin-switch button{ border:0; background:transparent; font:inherit; font-size:12.5px; font-weight:600; padding:6px 11px; border-radius:9px; cursor:pointer; display:flex; align-items:center; gap:5px; }
.vc-skin-switch button i{ font-size:15px; }
.vc-icon-btn{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; cursor:pointer; font-size:18px; border:0; }
.vc-me{ display:flex; align-items:center; gap:10px; padding:5px 12px 5px 5px; border-radius:12px; }
.vc-me b{ font-size:13px; font-weight:600; } .vc-me small{ display:block; font-size:11px; }

.vc-stage{ flex:1; overflow:auto; padding:26px 30px; display:flex; flex-direction:column; align-items:center; }
.vc-head{ width:100%; max-width:min(1440px,96vw); display:flex; align-items:flex-end; justify-content:space-between; margin:4px 0 22px; }
.vc-crumb{ font-size:13px; font-weight:500; margin-bottom:4px; }
.vc-h1{ font-size:25px; font-weight:700; letter-spacing:-.4px; margin:0; }
.vc-setpill{ display:flex; align-items:center; gap:9px; padding:9px 15px; border-radius:11px; font-size:13px; font-weight:600; cursor:pointer; border:0; }
.vc-setpill .vc-gd{ width:9px; height:9px; border-radius:50%; }
/* Mode bar: GRID chia đều — desktop 9 nút 1 HÀNG, mỗi nút icon+chữ 1 DÒNG (nowrap); mobile wrap 3 cột đều, không kéo ngang */
.vc-modes{ display:grid; grid-template-columns:repeat(11,minmax(0,1fr)); gap:6px; padding:5px; border-radius:14px; margin-bottom:28px; width:100%; max-width:min(1440px,96vw); box-sizing:border-box; }
.vc-modes button{ display:flex; align-items:center; justify-content:center; gap:6px; padding:11px 8px; border-radius:11px; background:transparent; border:0; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:.15s; text-align:center; white-space:nowrap; min-width:0; }
.vc-modes button i{ flex:0 0 auto; font-size:15px; }
/* Nút dài (Trắc nghiệm/AI đặt câu…) chật thì thu chữ 1 nấc thay vì xuống dòng */
@media(max-width:1080px){ .vc-modes button{ font-size:12px; gap:4px; padding:9px 5px; } }
/* Hẹp hơn 1100px: 9 nút 1 hàng không đủ chỗ → về 3 cột đều (cho phép chữ xuống dòng trong nút) */
@media(max-width:960px){ .vc-modes{ grid-template-columns:repeat(3,minmax(0,1fr)); } .vc-modes button{ white-space:normal; } }
/* Trắc nghiệm: 1 CONTAINER cỡ flashcard (620) chứa CẢ thẻ từ + đáp án bên trong */
.vc-quiz-wrap{ display:flex; flex-direction:column; align-items:center; width:100%; }
.vc-quiz-card{ box-sizing:border-box; width:min(620px,92vw); display:flex; flex-direction:column; text-align:center; padding:24px 26px 26px; position:relative; }
.vc-quiz-card .vc-pos{ position:absolute; top:18px; left:22px; }
.vc-quiz-head{ padding:30px 0 26px; }
.vc-quiz-card .vc-word{ font-size:clamp(32px,5vw,44px); display:flex; align-items:center; gap:12px; justify-content:center; }
.vc-quiz-card .vc-ipa{ margin-top:10px; font-size:18px; }
.vc-quiz-lbl{ margin:0 0 12px; font-size:13.5px; font-weight:700; opacity:.75; }
.vc-quiz-opts{ width:100%; display:flex; flex-direction:column; gap:9px; }
.vc-quiz-opts .vc-listrow{ justify-content:center; text-align:center; padding:13px 18px; border-radius:13px; width:100%; box-sizing:border-box; }
.vc-quiz-opts .vc-lr-title{ font-size:15.5px; }
.vc-modes button i{ font-size:16px; }

.vc-cardwrap{ position:relative; width:min(620px,82vw); height:340px; perspective:2000px; margin-bottom:4px; }
.vc-card{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.4,0,.2,1); cursor:pointer; }
.vc-card.is-flip{ transform:rotateY(180deg); }
.vc-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:24px; padding:34px 38px; display:flex; flex-direction:column; overflow:hidden; }
.vc-back{ transform:rotateY(180deg); }
.vc-pos{ align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; padding:5px 12px; border-radius:8px; }
.vc-word{ font-size:52px; font-weight:800; letter-spacing:-1px; margin-top:auto; display:flex; align-items:center; gap:16px; }
.vc-spk{ width:44px; height:44px; border-radius:50%; border:0; display:grid; place-items:center; font-size:20px; cursor:pointer; }
.vc-ipa{ font-size:18px; margin-top:10px; font-weight:500; }
.vc-hint{ margin-top:auto; align-self:center; font-size:13px; display:flex; align-items:center; gap:7px; }
.vc-back .vc-vn{ font-size:30px; font-weight:700; margin-top:4px; letter-spacing:-.5px; }
.vc-back .vc-def{ font-size:15px; line-height:1.6; margin-top:14px; }
.vc-back .vc-ex{ font-size:14.5px; line-height:1.55; margin-top:14px; padding:14px 16px 8px; border-radius:14px 14px 0 0; }
.vc-back .vc-ex-vn{ font-size:13.5px; line-height:1.5; font-style:italic; padding:0 16px 13px; border-radius:0 0 14px 14px; margin-top:-2px; opacity:.92; }
.vc-back .vc-syn{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; }
.vc-back .vc-syn span{ font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:9px; }

.vc-ctl{ width:min(620px,82vw); margin-top:26px; }
.vc-bar{ height:8px; border-radius:6px; overflow:hidden; }
.vc-bar i{ display:block; height:100%; border-radius:6px; }
.vc-meta{ display:flex; justify-content:space-between; margin:10px 2px 20px; font-size:13px; font-weight:500; }
.vc-acts{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.vc-rnd-row{ display:contents; }
.vc-rnd{ width:50px; height:50px; border-radius:50%; display:grid; place-items:center; font-size:20px; cursor:pointer; border:0; }
.vc-rate{ display:flex; gap:10px; }
.vc-rate button{ display:flex; align-items:center; gap:8px; padding:13px 20px; border-radius:14px; font:inherit; font-weight:700; font-size:13.5px; cursor:pointer; border:0; }
.vc-rate button i{ font-size:17px; }
.vc-empty{ margin:60px auto; text-align:center; max-width:420px; }
.vc-empty i{ font-size:46px; opacity:.5; } .vc-empty p{ margin-top:14px; font-size:15px; line-height:1.6; }

/* ── shared content components (overview/wordsets/stats/history/modes) ── */
.vc-content{ width:100%; max-width:min(1440px,96vw); }
.vc-page-head{ width:100%; max-width:min(1440px,96vw); margin:4px 0 18px; }
.vc-page-head h1{ font-size:25px; font-weight:700; letter-spacing:-.4px; margin:0; }
.vc-page-head .vc-crumb{ margin-bottom:4px; }
.vc-section-title{ font-size:15px; font-weight:700; margin:20px 0 12px; }
.vc-panel > .vc-section-title:first-child{ margin-top:0; }   /* panel đã có padding-top → bỏ margin dư trên đầu (vd "test · AI") */
.vc-col-rename{ width:26px; height:26px; border-radius:8px; border:1px solid rgba(0,0,0,.12); background:transparent; cursor:pointer; font-size:13px; line-height:1; display:inline-grid; place-items:center; padding:0; color:#8a6d2e; vertical-align:middle; margin-left:4px; }
.vc-col-rename:hover{ background:rgba(138,109,46,.12); }
.vc-panel{ border-radius:18px; padding:20px 22px; margin-bottom:16px; }
.vc-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:18px; }
.vc-stat{ border-radius:14px; padding:16px 18px; }
.vc-stat-lbl{ font-size:12.5px; font-weight:600; } .vc-stat-val{ font-size:28px; font-weight:800; margin-top:4px; letter-spacing:-.5px; }
.vc-list{ display:flex; flex-direction:column; gap:10px; }
.vc-listrow{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; text-decoration:none; }
.vc-lr-icon{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:19px; flex-shrink:0; }
.vc-lr-main{ flex:1; min-width:0; } .vc-lr-title{ font-weight:600; font-size:15px; } .vc-lr-sub{ font-size:12.5px; margin-top:2px; }
.vc-lr-meta{ font-size:12.5px; font-weight:600; text-align:right; }
/* Truy cập nhanh: lưới deep-link vào từng chế độ trên bộ đang học */
.vc-quick-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:18px; }
.vc-quick{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:18px 12px; border-radius:16px; text-decoration:none; text-align:center; transition:transform .12s ease, box-shadow .12s ease; }
.vc-quick:hover{ transform:translateY(-2px); }
.vc-q-ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:22px; flex-shrink:0; }
.vc-q-lbl{ font-weight:700; font-size:13.5px; line-height:1.25; }
.vc-q-nanh{ font-weight:400; }
/* Bộ từ: per-unit skill groups */
.vc-unit-group{ margin-bottom:20px; }
.vc-unit-group:last-child{ margin-bottom:0; }
.vc-unit-head{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; padding:6px 4px 9px; width:100%; background:none; border:0; cursor:pointer; font:inherit; text-align:left; }
.vc-unit-name{ font-weight:700; font-size:15.5px; flex:1 1 auto; }
.vc-unit-sub{ font-size:12.5px; opacity:.58; display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.vc-unit-head:hover .vc-unit-sub{ opacity:.92; }
/* +/- collapse toggle: a small square; horizontal bar always, vertical bar only
   when collapsed (so collapsed = "+", expanded = "−"). */
.vc-unit-toggle{ flex:0 0 auto; width:23px; height:23px; border-radius:7px; position:relative; }
.vc-unit-toggle::before,.vc-unit-toggle::after{ content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:currentColor; border-radius:1px; }
.vc-unit-toggle::before{ width:11px; height:2px; }
.vc-unit-toggle::after{ width:2px; height:11px; }
.vc-unit-group:not(.is-collapsed) .vc-unit-toggle::after{ display:none; }
.vc-unit-group.is-collapsed .vc-list{ display:none; }
/* deck-picker dropdown (flashcard "N từ · Đang ôn") */
.vc-setpick{ position:relative; }
.vc-setmenu{ position:absolute; top:calc(100% + 8px); right:0; min-width:236px; max-height:344px; overflow:auto; border-radius:14px; padding:7px; z-index:50; }
.vc-setmenu[hidden]{ display:none; }
/* Ô search trong dropdown chọn bộ: search sticky ở đầu, danh sách tự cuộn. Input dùng .vc-search-input → không bị lồng box dark. */
.vc-setmenu{ display:flex; flex-direction:column; overflow:hidden; }
.vc-setmenu-search{ display:flex; align-items:center; gap:7px; flex:0 0 auto; padding:9px 11px; margin-bottom:6px; border-radius:10px; border:1px solid rgba(0,0,0,.12); background:rgba(0,0,0,.04); }
.vc-setmenu-search .ti{ opacity:.55; font-size:15px; }
.vc-setmenu-search input{ border:0 !important; background:transparent !important; outline:none; font:inherit; font-size:13.5px; width:100%; min-width:0; color:inherit; box-shadow:none !important; padding:0 !important; }
.vc-setmenu-scroll{ flex:1 1 auto; overflow:auto; min-height:0; }
.vc-setmenu-empty{ padding:12px 10px; opacity:.62; font-size:13px; font-style:italic; }
/* Ép input trong suốt (specificity CAO) để không có box đen lồng trong ở dark — dark global ép input đen dù đã có .vc-search-input */
html.ae-dark-mode .vc-setpick .vc-setmenu .vc-setmenu-search input.vc-search-input{ background:transparent !important; border:0 !important; box-shadow:none !important; }
html.theme-skeuo.ae-dark-mode .vc-setpick .vc-setmenu .vc-setmenu-search input.vc-search-input{ background:transparent !important; border:0 !important; box-shadow:none !important; }
.vc-setmenu-head{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:7px 10px 8px; }
.vc-setmenu-grp{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:10px 10px 4px; opacity:.55; }
.vc-setmenu-grp:first-child{ padding-top:3px; }
.vc-setmenu-item{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 11px; border-radius:9px; text-decoration:none; font-size:13.5px; }
.vc-setmenu-nm{ font-weight:600; } .vc-setmenu-n{ font-size:12px; opacity:.62; white-space:nowrap; }
/* deck PICKER (bare ?view=flashcard) */
.vc-deckgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.vc-deck{ border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:13px; }
.vc-deck-head{ display:flex; align-items:center; gap:12px; }
.vc-deck-ico{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:22px; flex:0 0 auto; }
.vc-deck-meta{ min-width:0; } .vc-deck-name{ font-weight:700; font-size:15.5px; } .vc-deck-n{ font-size:12.5px; opacity:.6; margin-top:1px; }
.vc-deck-skills{ display:flex; flex-wrap:wrap; gap:7px; }
.vc-deck-skill{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:5px 10px; border-radius:9px; text-decoration:none; }
.vc-deck-skill i{ font-size:14px; }
.vc-deck-go{ justify-content:center; margin-top:auto; }
.vc-chips{ display:flex; gap:6px; flex-wrap:wrap; } .vc-chip{ font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:8px; }
.vc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:12px; font:inherit; font-weight:700; font-size:13.5px; cursor:pointer; border:0; text-decoration:none; text-align:center; }
.vc-btn i{ font-size:17px; }
.vc-row-actions{ display:flex; gap:10px; margin-top:6px; flex-wrap:wrap; }
.vc-heatmap{ display:grid; grid-template-columns:repeat(26,1fr); gap:4px; } .vc-heatmap i{ aspect-ratio:1; border-radius:3px; }
/* status breakdown bar + legend (Chưa thuộc / Mơ hồ / Thuộc rồi) */
.vc-statusbar{ display:flex; height:15px; border-radius:8px; overflow:hidden; background:rgba(0,0,0,.06); }
.vc-sb-seg{ display:block; height:100%; transition:width .3s; }
.vc-sb-weak{ background:#FF5A5F; } .vc-sb-fuzzy{ background:#F5A623; } .vc-sb-mast{ background:#19C37D; }
.vc-status-legend{ display:flex; gap:24px; margin-top:14px; flex-wrap:wrap; }
.vc-sl-it{ display:flex; align-items:center; gap:8px; font-size:13.5px; }
.vc-sl-dot{ width:12px; height:12px; border-radius:4px; flex:0 0 auto; }
.vc-sl-lbl{ opacity:.72; } .vc-sl-it b{ font-weight:800; }
/* per-skill mastery row */
.vc-skillrow{ display:flex; align-items:center; gap:14px; }
.vc-sr-skill{ width:132px; font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.vc-sr-skill i{ font-size:17px; }
/* recently-studied word log */
.vc-wordlog{ display:flex; flex-direction:column; }
.vc-wl-row{ display:flex; align-items:center; gap:12px; padding:10px 4px; border-bottom:1px solid rgba(0,0,0,.06); }
.vc-wl-row[hidden],.vc-hist-sess-row[hidden]{ display:none !important; }
.vc-wl-row:last-child{ border-bottom:0; }
.vc-wl-badge{ flex:0 0 auto; font-size:11px; font-weight:700; color:#fff; padding:4px 10px; border-radius:7px; min-width:80px; text-align:center; }
.vc-wl-term{ font-weight:700; font-size:14.5px; flex:0 0 auto; min-width:120px; }
.vc-wl-vn{ flex:1; min-width:0; font-size:13px; opacity:.7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vc-wl-meta{ flex:0 0 auto; font-size:12px; opacity:.55; }
/* history tabs + pagination */
.vc-hist-tabs{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.vc-hist-tab{ padding:10px 18px; border-radius:12px; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; border:1.5px solid rgba(0,0,0,.1); background:transparent; }
.vc-hist-tab.is-active{ font-weight:800; }
.vc-hist-pane[hidden]{ display:none !important; }
.vc-hist-sttabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.vc-hist-sttab{ padding:7px 12px; border-radius:999px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; border:1px solid rgba(0,0,0,.1); background:transparent; display:inline-flex; align-items:center; gap:6px; }
.vc-hist-sttab.is-active{ font-weight:800; }
.vc-hist-n{ font-size:11px; font-weight:700; opacity:.65; min-width:1.2em; text-align:center; }
.vc-hist-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.vc-hist-perpage{ font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.vc-hist-perpage select{ font:inherit; font-size:12.5px; font-weight:600; padding:6px 10px; border-radius:8px; border:1px solid rgba(0,0,0,.12); background:transparent; }
.vc-hist-pager{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.vc-hist-pg{ min-width:32px; height:32px; padding:0 8px; border-radius:8px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; border:1px solid rgba(0,0,0,.1); background:transparent; display:inline-grid; place-items:center; }
.vc-hist-pg:disabled{ opacity:.35; cursor:not-allowed; }
.vc-hist-pg.is-active{ font-weight:800; }
.vc-hist-pg-dots{ padding:0 4px; font-size:12px; opacity:.5; }
.vc-hist-empty{ margin:12px 0 0; font-size:13.5px; opacity:.7; }

/* access denied (customer thuần) — giữ header/footer site, nút ngoài .vc-root */
body.vc-access-denied .main-page-default{ overflow:visible; }
body.vc-access-denied .vc-denied{
  display:flex; align-items:center; justify-content:center;
  width:100%; max-width:100%; flex:none; overflow:visible; box-sizing:border-box;
  min-height:0;
  padding:clamp(40px,5vh,72px) 16px clamp(64px,10vh,120px);
}
.vc-denied-card{
  max-width:min(560px,calc(100% - 32px)); width:100%; flex-shrink:0;
  text-align:center; padding:36px 28px; border-radius:20px;
  background:rgba(255,255,255,.96); border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 40px rgba(0,0,0,.08);
}
.vc-denied-icon{ font-size:42px; margin-bottom:12px; line-height:1; }
.vc-denied h1{ font-size:22px; font-weight:800; margin:0 0 12px; color:#1a1a1a; line-height:1.35; }
.vc-denied p{ font-size:14px; line-height:1.6; margin:0 0 10px; color:#3a3a3a; }
.vc-denied-sub{ font-size:13px !important; color:#5a5a5a !important; }
.vc-denied-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
/* Nút denied render ngoài .vc-root → hardcode (modal pattern) */
body.vc-access-denied .vc-denied-actions .vc-btn{
  border:1px solid transparent; transition:background .15s ease,color .15s ease,box-shadow .15s ease,transform .12s ease;
}
body.vc-access-denied .vc-denied-actions .vc-btn-primary{
  background:#004080; color:#fff !important; border-color:#002952;
  box-shadow:0 2px 6px rgba(0,48,96,.28);
}
body.vc-access-denied .vc-denied-actions .vc-btn-primary:hover{
  background:#005099; box-shadow:0 4px 12px rgba(0,48,96,.32); transform:translateY(-1px);
}
body.vc-access-denied .vc-denied-actions .vc-btn-primary:active{ transform:translateY(0); box-shadow:0 1px 4px rgba(0,48,96,.25); }
body.vc-access-denied .vc-denied-actions .vc-btn-ghost{
  background:#f4f5f7; color:#1a1a1a !important; -webkit-text-fill-color:#1a1a1a !important;
  border-color:#d0d4dc;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
body.vc-access-denied .vc-denied-actions .vc-btn-ghost:hover{
  background:#e9ebf2; color:#004080 !important; -webkit-text-fill-color:#004080 !important;
  border-color:#b8c4d4;
  box-shadow:0 3px 8px rgba(0,48,96,.12); transform:translateY(-1px);
}
body.vc-access-denied .vc-denied-actions .vc-btn-ghost:active{ transform:translateY(0); }
html.theme-skeuo .vc-denied-card{ background:linear-gradient(180deg,#fffefb,#f6efdf); border:1px solid #e6dcbe; box-shadow:inset 0 1px 0 #fff,0 12px 32px -8px rgba(80,60,20,.28); }
html.theme-skeuo .vc-denied h1{ color:#3a2a08; font-family:Georgia,'Times New Roman',serif; }
html.theme-skeuo .vc-denied p{ color:#4a4438; }
html.theme-skeuo .vc-denied-sub{ color:#6a6254 !important; }
html.theme-skeuo.ae-dark-mode .vc-denied-card{ background:linear-gradient(180deg,#2f2820,#241e16); border-color:rgba(255,214,150,.14); color:#f5e6c8; box-shadow:inset 0 1px 0 rgba(255,236,200,.06),0 12px 32px -8px rgba(0,0,0,.55); }
html.theme-skeuo.ae-dark-mode .vc-denied h1{ color:#f1e6cd; }
html.theme-skeuo.ae-dark-mode .vc-denied p{ color:#d8cba8; }
html.theme-skeuo.ae-dark-mode .vc-denied-sub{ color:#bcae8c !important; }
html.theme-skeuo.ae-dark-mode body.vc-access-denied .vc-denied-actions .vc-btn-primary{
  background:linear-gradient(180deg,#1a3d5c,#0f2840); border-color:rgba(107,163,214,.35); color:#fff !important;
}
html.theme-skeuo.ae-dark-mode body.vc-access-denied .vc-denied-actions .vc-btn-primary:hover{
  background:linear-gradient(180deg,#234d70,#1a3d5c);
}
html.theme-skeuo.ae-dark-mode body.vc-access-denied .vc-denied-actions .vc-btn-ghost,
html.theme-skeuo.ae-dark-mode body.vc-access-denied .vc-denied-actions a.vc-btn-ghost[href*="lien-he"],
html.ae-dark-mode body.vc-access-denied .vc-denied-actions a.vc-btn-ghost[href*="lien-he"]{
  background:linear-gradient(180deg,#3a3228,#2f2820) !important;
  border:1px solid rgba(255,214,150,.22) !important;
  color:#f1e6cd !important; -webkit-text-fill-color:#f1e6cd !important;
  box-shadow:inset 0 1px 0 rgba(255,224,170,.08),0 2px 5px rgba(0,0,0,.4) !important;
}
html.theme-skeuo.ae-dark-mode body.vc-access-denied .vc-denied-actions .vc-btn-ghost:hover,
html.theme-skeuo.ae-dark-mode body.vc-access-denied .vc-denied-actions a.vc-btn-ghost[href*="lien-he"]:hover,
html.ae-dark-mode body.vc-access-denied .vc-denied-actions a.vc-btn-ghost[href*="lien-he"]:hover{
  background:linear-gradient(180deg,#443a2e,#3a3228) !important;
  color:#a8cce8 !important; -webkit-text-fill-color:#a8cce8 !important;
  border-color:rgba(107,163,214,.35) !important;
}
.vc-typed{ width:100%; padding:14px 16px; border-radius:13px; font:inherit; font-size:16px; margin-top:14px; }
.vc-feedback{ margin-top:14px; font-weight:600; font-size:14px; }

/* ── Nanh credit chip (sidebar) + AI Phân tích view ── */
.vc-nanh{ display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:14px; text-decoration:none; color:inherit; border:1px solid rgba(0,0,0,.06); }
.vc-nanh-ico{ font-size:22px; line-height:1; }
.vc-nanh b{ font-size:15px; font-weight:800; } .vc-nanh small{ display:block; font-size:11.5px; opacity:.7; }
.vc-nanh-body{ flex:1; min-width:0; }
.vc-nanh-top{ display:flex; align-items:baseline; gap:5px; }
.vc-nanh-top b{ font-size:16px; font-weight:800; } .vc-nanh-top small{ font-size:11px; opacity:.7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vc-nanh-bar{ height:7px; border-radius:99px; background:rgba(0,0,0,.1); overflow:hidden; margin-top:5px; }
.vc-nanh-bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#b07a2a,#e8c266); transition:width .45s ease; }
.vc-az-nanh{ font-size:13px; font-weight:700; padding:4px 11px; border-radius:999px; background:rgba(180,130,40,.12); margin-left:10px; vertical-align:middle; }
.vc-az{ display:flex; flex-direction:column; gap:14px; }
.vc-az-lead{ font-size:14px; line-height:1.6; opacity:.85; margin:0; } .vc-az-cost{ font-weight:700; opacity:1; }
.vc-az-modes{ display:flex; gap:10px; flex-wrap:wrap; }
.vc-az-mode{ flex:1; min-width:200px; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 14px; border-radius:12px; font-weight:700; font-size:13.5px; cursor:pointer; border:1.5px solid rgba(0,0,0,.12); background:transparent; transition:.15s; }
.vc-az-mode i{ font-size:18px; }
.vc-az-text{ width:100%; box-sizing:border-box; border-radius:14px; padding:14px 16px; font:inherit; font-size:14.5px; line-height:1.55; resize:vertical; min-height:130px; border:1.5px solid rgba(0,0,0,.12); }
.vc-az-img{ position:relative; display:flex; align-items:center; justify-content:center; min-height:78px; border-radius:14px; border:2px dashed rgba(0,0,0,.18); cursor:pointer; overflow:hidden; padding:10px; }
.vc-az-img-empty{ display:flex; align-items:center; gap:10px; font-size:13.5px; opacity:.7; } .vc-az-img-empty i{ font-size:22px; }
.vc-az-img-prev{ max-height:260px; max-width:100%; border-radius:10px; }
.vc-az-img-clear{ position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#fff; font-size:18px; cursor:pointer; line-height:1; }
.vc-az-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.vc-az-go{ font-size:15px; padding:13px 22px; } .vc-az-go-cost{ opacity:.85; font-weight:600; }
.vc-az-go.is-loading{ opacity:.7; pointer-events:none; }
.vc-az-go:disabled{ opacity:.5; cursor:not-allowed; }
.vc-az-status{ font-size:13.5px; font-weight:600; } .vc-az-warn{ color:#c0392b; font-size:13px; font-weight:600; margin:2px 0 0; }

/* ── Mobile top bar (hamburger) ── */
.vc-mobile-bar{ display:none; position:fixed; top:0; left:0; right:0; height:56px; z-index:120; align-items:center; padding:0 14px; gap:12px; }
.vc-mobile-toggle{ width:40px; height:40px; border:0; background:transparent; border-radius:10px; cursor:pointer; display:grid; place-items:center; font-size:22px; color:inherit; padding:0; flex:0 0 auto; }
.vc-mobile-title{ font-size:16px; font-weight:700; letter-spacing:-.2px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vc-mobile-actions{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.vc-mobile-actions .vc-icon-btn{ width:36px; height:36px; font-size:17px; }

@media(max-width:1024px){
  .vc-root{ grid-template-columns:1fr; }
  .vc-side{
    position:fixed !important; top:56px !important; left:0; bottom:0 !important; right:auto;
    width:min(288px,88vw); height:auto !important; max-height:none !important;
    align-self:auto !important;
    overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:max(18px, env(safe-area-inset-bottom, 0px));
    transform:translateX(-100%); z-index:110; box-shadow:0 12px 40px rgba(15,23,42,.18);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
  }
  body.vc-full-page.admin-bar .vc-side,
  body.admin-bar.vc-full-page .vc-side{ top:56px !important; height:auto !important; }
  .vc-side.is-open{ transform:translateX(0); }
  .vc-mobile-bar{ display:flex; }
  .vc-main{ padding-top:56px; min-height:100vh; width:100%; position:relative; z-index:1; }
  .vc-top{ top:56px; padding:10px 14px; gap:8px; flex-wrap:wrap; }
  .vc-search{ flex:1 1 100%; max-width:none; order:2; }
  .vc-spacer{ display:none; }
  .vc-skin-switch{ order:1; margin-left:auto; }
  .vc-icon-btn#vcDarkBtn{ order:1; }
  .vc-stage{ padding:18px 14px 28px; }
  .vc-head{ flex-direction:column; align-items:stretch; gap:12px; margin-bottom:16px; }
  .vc-setpill{ width:100%; justify-content:space-between; }
  .vc-modes{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:20px; max-width:100%; }
  .vc-modes button{ white-space:normal; padding:8px 6px; font-size:12px; }
  .vc-cardwrap{ width:100%; max-width:none; height:min(58vw,300px); min-height:220px; }
  .vc-word{ font-size:clamp(28px,8vw,42px); gap:10px; flex-wrap:wrap; }
  .vc-spk{ width:40px; height:40px; font-size:18px; }
  .vc-back .vc-vn{ font-size:clamp(22px,6vw,28px); }
  .vc-ctl{ width:100%; max-width:none; margin-top:18px; }
  .vc-acts{ flex-direction:column; align-items:stretch; gap:10px; }
  .vc-rnd-row{ display:flex; justify-content:center; gap:16px; order:2; }
  .vc-rate{ flex-direction:column; width:100%; gap:8px; order:1; }
  .vc-rate button{ width:100%; justify-content:center; padding:13px 16px; font-size:14px; }
  .vc-icon-btn#vcDarkBtn{ display:none; }
  .vc-hist-tabs,.vc-hist-sttabs{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .vc-deckgrid{ grid-template-columns:1fr; }
  /* desktop collapse state must not hide drawer on mobile */
  body.vc-sidebar-collapsed .vc-side{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }
  body.vc-sidebar-collapsed .vc-sidebar-expand{ display:none !important; }
  body.vc-sidebar-open .vc-side,
  .vc-side.is-open{ visibility:visible !important; opacity:1 !important; pointer-events:auto !important; }
}
body.vc-sidebar-open{ overflow:hidden; }
@media(max-width:480px){
  .vc-skin-switch button span{ display:none; }
  .vc-skin-switch button{ padding:6px 9px; }
  .vc-skin-switch button i{ margin:0; }
}

/* Tạo bộ từ vựng — credit progress block */
.vc-az-credit{ margin:2px 0 2px; }
.vc-az-credit-top{ font-size:13.5px; font-weight:600; } .vc-az-credit-top b{ font-size:16px; font-weight:800; }
html.theme-skeuo .vc-az-credit-top{ color:#6a5a32; } html.theme-skeuo.ae-dark-mode .vc-az-credit-top{ color:#e9dcc0; }

/* ── Modal (đổi tên / xác nhận xoá) — thay window.prompt/confirm ── */
.vc-modal-ov{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(20,14,6,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity .18s ease; }
.vc-modal-ov.is-open{ opacity:1; }
.vc-modal{ width:100%; max-width:380px; box-sizing:border-box; border-radius:18px; padding:22px 22px 18px; background:#fff; box-shadow:0 24px 60px -20px rgba(0,0,0,.5); transform:translateY(10px) scale(.97); transition:transform .2s cubic-bezier(.2,.9,.3,1.2); }
.vc-modal-ov.is-open .vc-modal{ transform:none; }
.vc-modal-title{ font-size:17px; font-weight:800; line-height:1.3; }
.vc-modal-msg{ font-size:13.5px; opacity:.66; margin-top:7px; line-height:1.5; }
.vc-modal-tu{ margin-top:10px; font-size:16px; line-height:1.45; overflow-wrap:anywhere; }
.vc-modal-tu .vc-nhan{ font-weight:700; padding:.1em .45em; }

/* ── .vc-nhan: chữ cần nhấn (từ đang nói tới, chữ học viên gõ, tên nút) — tô nền nhạt thay cho ngoặc kép.
      Ghi màu thẳng theo lớp da trên <html> vì còn dùng trong modal gắn ở <body>, ngoài .vc-root (không có token). ── */
.vc-nhan{ font-weight:600; font-style:normal; padding:.04em .36em; border-radius:6px; background:#ECEEFF; color:#3440C4;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
html.ae-dark-mode:not(.theme-skeuo) .vc-nhan{ background:#272D55; color:#C9CEFF; }
/* Dòng chữ mờ bằng opacity thì chữ nhấn mờ theo (đo 30/09, phẳng sáng: 2,8:1 trong ô tìm / lời mời Hội thoại — nhạt hơn cả chữ quanh nó).
   Hai dòng này làm mờ bằng MÀU CHỮ thay cho opacity ⇒ .vc-nhan giữ đủ đậm. Trình duyệt chưa có color-mix giữ opacity cũ. */
@supports (color: color-mix(in srgb, red 50%, transparent)){
  html .vc-sr-empty, html .vc-chat-empty,
  html.ae-dark-mode .vc-sr-empty, html.ae-dark-mode .vc-chat-empty{ opacity:1; color:color-mix(in srgb, currentColor 60%, transparent); }
}
/* chữ nhấn trong dòng phụ còn opacity (sắc thái, vì sao, ghi chú do AI viết): mực đậm hơn để sau opacity vẫn ≥ 4,5:1 */
html:not(.ae-dark-mode):not(.theme-skeuo) :is(.vc-ai-dim, .vc-fw-up-note, .vc-msg-fix-why, .vc-syn-nu) .vc-nhan{ background:#E3E6FF; color:#1a2170; }
.vc-modal-input{ width:100%; box-sizing:border-box; padding:11px 14px; border-radius:12px; border:1px solid #d8cba8; font:inherit; font-size:15px; margin-top:16px; outline:none; }
.vc-modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.vc-modal-actions .vc-btn{ min-width:88px; justify-content:center; }
.vc-modal-cancel{ background:rgba(0,0,0,.06); color:#5a5040; }
/* nút "Lưu" (primary) — set màu tường minh: modal render ở <body> nên KHÔNG
   nhận được biến --vc-t1/--accent (chỉ scope trong .vc-root) → trước đây nền
   trong suốt + chữ trắng = chìm. Specificity .vc-modal .vc-modal-ok > .vc-btn-primary. */
.vc-modal .vc-modal-ok{ background:linear-gradient(180deg,#6f7dff,#5b6cff); color:#fff; border:1px solid #4a57e0; }
.vc-btn-danger{ background:linear-gradient(180deg,#ef5b4c,#c0392b) !important; color:#fff !important; }

/* ── Sidebar collapse — structure chung; flat/skeuo tách ở vocab-flat / vocab-skeuo ── */
.vc-root{ transition:grid-template-columns .25s cubic-bezier(.4,0,.2,1); }
.vc-side{ transition:opacity .2s ease, visibility 0s linear .2s; overflow:visible; }
.vc-nav-clasp{ position:relative; flex:0 0 auto; }
.vc-sidebar-collapse{
  width:32px; height:32px; border-radius:8px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  padding:0; z-index:41; border:0; background:transparent;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease, left .25s cubic-bezier(.4,0,.2,1), box-shadow .15s ease;
}
.vc-sidebar-collapse-icon,.vc-sidebar-expand-icon,.vc-clasp-icon{ width:20px; height:20px; flex:0 0 auto; }
.vc-clasp-skeuo{ display:none; }
html.theme-skeuo .vc-clasp-flat{ display:none; }
html.theme-skeuo .vc-clasp-skeuo{ display:block; }
.vc-sidebar-expand{
  position:fixed; top:18px; left:18px; z-index:50;
  width:40px; height:40px; border-radius:10px;
  cursor:pointer; display:none; align-items:center; justify-content:center;
  padding:0; border:0; background:transparent;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.admin-bar .vc-sidebar-expand{ top:50px; }
body.vc-sidebar-collapsed .vc-root{ grid-template-columns:0 1fr; }
body.vc-sidebar-collapsed .vc-side{ opacity:0; pointer-events:none; visibility:hidden; }
body.vc-sidebar-collapsed .vc-sidebar-collapse{ display:none; }
body.vc-sidebar-collapsed .vc-sidebar-expand{ display:flex; }
@media(max-width:1024px){
  .vc-sidebar-collapse,.vc-sidebar-expand{ display:none !important; }
  body.vc-sidebar-collapsed .vc-root{ grid-template-columns:1fr; }
}

/* ==================== TOP-NAV LAYOUT (thay sidebar trái) — cấu trúc ==================== */
.vc-root.vc-topnav-layout{ display:flex !important; flex-direction:column; grid-template-columns:none !important; min-height:100vh; }
.vc-topnav-layout .vc-main{ padding-top:0 !important; width:100%; flex:1 1 auto; min-height:0; }
.vc-topnav{ position:sticky; top:0; z-index:45; display:flex; flex-direction:column; }
.admin-bar .vc-topnav{ top:32px; }
.vc-topnav-main{ display:flex; align-items:center; gap:16px; padding:11px 24px; }
.vc-topnav-layout .vc-brand{ padding:0; gap:10px; align-items:center; text-decoration:none; flex-shrink:0; }
.vc-topnav-layout .vc-logo{ margin:0; width:38px; height:38px; }
.vc-topnav-layout .vc-brand-name{ font-size:15px; }
.vc-topnav-layout .vc-brand-sub{ margin-top:1px; font-size:10.5px; }
.vc-topnav-layout .vc-search{ margin:0; flex:0 1 380px; }
.vc-topnav-right{ margin-left:auto; display:flex; align-items:center; gap:9px; flex-shrink:0; }
.vc-nanh-pill,.vc-streak-pill{ display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:13px; font-weight:700; text-decoration:none; color:inherit; }
.vc-nanh-pill b,.vc-streak-pill b{ font-weight:800; font-size:14px; }
.vc-nanh-ico,.vc-flame{ font-size:15px; line-height:1; }
/* Reset .vc-flame kiểu cũ (ô vuông 38px nền cam) — trong pill topnav phải bằng nút đá */
.vc-streak-pill .vc-flame{ width:auto; height:auto; border-radius:0; display:inline; background:transparent !important; box-shadow:none !important; }
.vc-topnav-right .vc-user{ padding:0; }
.vc-topnav-right .vc-av-img{ width:36px; height:36px; border-radius:50%; }

.vc-tabs{ display:flex; gap:6px; padding:12px 24px 13px; overflow-x:auto; scrollbar-width:none; }
.vc-tabs::-webkit-scrollbar{ display:none; }
.vc-tab{ display:flex; align-items:center; gap:8px; padding:9px 15px; border-radius:11px; font-size:13.5px; font-weight:600; text-decoration:none; white-space:nowrap; flex-shrink:0; transition:.15s; }
.vc-tab i{ font-size:18px; }
/* Canh GIỮA nhóm tab khi còn dư chỗ; tràn (màn hẹp) thì auto-margin = 0 → cuộn từ đầu, không cắt */
.vc-tabs > .vc-tab:first-child{ margin-left:auto; }
.vc-tabs > .vc-tab:last-child{ margin-right:auto; }

/* ==================== Ghép từ (matching) — tái dùng .vc-listrow skin ==================== */
.vc-match{ display:grid; grid-template-columns:1fr 1fr; gap:9px 16px; margin-top:10px; }
.vc-match-col{ display:flex; flex-direction:column; gap:9px; }
.vc-match-cell{ width:100%; text-align:left; justify-content:flex-start; cursor:pointer; transition:box-shadow .12s, opacity .2s, transform .06s; }
.vc-match-cell.is-sel{ box-shadow:inset 0 0 0 2px #7c3aed !important; }
.vc-match-cell.is-ok{ box-shadow:inset 0 0 0 2px #19c37d !important; opacity:.55; pointer-events:none; }
.vc-match-cell.is-bad{ box-shadow:inset 0 0 0 2px #ff5a5f !important; animation:vcShake .28s; }
@keyframes vcShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
@media(max-width:600px){ .vc-match{ gap:8px 10px; } }

/* ==================== Đọc hiểu (cloze reading) ==================== */
.vc-cloze-bank{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 18px; padding-bottom:14px; border-bottom:1px dashed rgba(124,58,237,.28); }
.vc-cloze-chip{ padding:6px 13px; border-radius:999px; font-size:13.5px; font-weight:700; cursor:pointer; user-select:none; transition:.12s; background:rgba(124,58,237,.12); border:1px solid rgba(124,58,237,.4); color:#6d28d9; }
.vc-cloze-chip:hover{ background:rgba(124,58,237,.2); }
.vc-cloze-chip.used{ opacity:.35; text-decoration:line-through; cursor:default; }
.vc-cloze-body{ font-size:16px; line-height:2.2; }
.vc-cloze-p{ margin:0 0 12px; }
.vc-cloze-hint{ font-size:12.5px; opacity:.55; font-style:italic; }
.vc-cloze-in{ font:inherit; font-size:15px; font-weight:700; text-align:center; color:inherit; border:0; border-bottom:2px solid rgba(124,58,237,.55); background:rgba(124,58,237,.06); border-radius:5px 5px 0 0; padding:3px 6px; margin:0 3px; min-width:72px; outline:none; }
.vc-cloze-in:focus{ border-bottom-color:#7c3aed; background:rgba(124,58,237,.12); }
.ae-dark-mode .vc-cloze-chip{ background:rgba(160,120,255,.16); border-color:rgba(160,120,255,.45); color:#c4b0ff; }
.ae-dark-mode .vc-cloze-in{ border-bottom-color:rgba(160,120,255,.6); }

/* ==================== Hoạt động học tập (dashboard: mục tiêu + đến hạn + dự báo 7 ngày) ==================== */
.vc-act-row{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-bottom:6px; }
.vc-act-goal{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.vc-ring{ width:86px; height:86px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--vc-ring-fill,#8b5cf6) calc(var(--pct,0)*1%), var(--vc-ring-track,rgba(0,0,0,.1)) 0); }
.vc-ring-in{ width:66px; height:66px; border-radius:50%; background:var(--vc-ring-bg,#fff); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.05; }
.vc-ring-in b{ font-size:22px; font-weight:800; } .vc-ring-in small{ font-size:12px; opacity:.55; }
.vc-act-goal-lbl{ font-size:12.5px; font-weight:600; opacity:.8; } .vc-act-done{ color:#1f9d57; font-weight:800; }
.vc-act-mini{ display:flex; gap:12px; flex:1; min-width:200px; }
.vc-act-card{ flex:1; text-align:center; padding:14px 10px; border-radius:14px; border:1px solid rgba(0,0,0,.07); background:rgba(0,0,0,.02); text-decoration:none; color:inherit; transition:.15s; }
.vc-act-card:hover{ transform:translateY(-2px); }
.vc-act-card.is-due{ border-color:rgba(224,53,59,.4); background:rgba(224,53,59,.07); }
.vc-act-num{ font-size:26px; font-weight:800; line-height:1; } .vc-act-card.is-due .vc-act-num{ color:#e0353b; }
/* DARK: số "Từ đến hạn" đỏ #e0353b trên nền đỏ-tối .07 = chìm. Sáng đỏ + đậm nền chút cho nổi (cả 2 skin). */
html.ae-dark-mode .vc-act-card.is-due{ background:rgba(224,53,59,.18) !important; border-color:rgba(255,120,120,.55) !important; }
html.ae-dark-mode .vc-act-card.is-due .vc-act-num{ color:#ff8a8a !important; }
html.ae-dark-mode .vc-act-card.is-due .vc-act-lbl{ color:#ffc9c9 !important; }
.vc-act-lbl{ font-size:12px; opacity:.7; margin-top:5px; }
.vc-fc{ margin-top:18px; }
.vc-fc-title{ font-size:12.5px; font-weight:700; opacity:.7; margin-bottom:10px; }
.vc-fc-chart{ display:flex; align-items:flex-end; gap:8px; }
.vc-fc-col{ flex:1; display:flex; flex-direction:column; align-items:center; }
.vc-fc-barwrap{ height:92px; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.vc-fc-n{ font-size:11px; font-weight:700; opacity:.65; margin-bottom:3px; }
.vc-fc-bar{ width:min(62%,34px); min-height:0; border-radius:6px 6px 0 0; background:var(--vc-fc-bar,#c4b5fd); transition:height .55s cubic-bezier(.2,1,.4,1); }
.vc-fc-lbl{ font-size:11px; opacity:.6; margin-top:7px; }
.vc-fc-col.is-today .vc-fc-bar{ background:var(--vc-fc-today,#8b5cf6); }
.vc-fc-col.is-today .vc-fc-lbl{ font-weight:800; opacity:1; }
.vc-fc-col.is-today .vc-fc-n{ opacity:1; color:var(--vc-fc-today,#8b5cf6); }

/* ==================== Danh sách từ (active-recall list) ==================== */
.vc-wl-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:16px; }
.vc-wl-lbl{ font-size:13px; opacity:.7; margin-right:2px; }
.vc-wl-tg{ padding:6px 12px; border-radius:999px; font-size:13px; font-weight:700; cursor:pointer; border:1px solid rgba(124,58,237,.4); background:transparent; color:inherit; transition:.12s; }
.vc-wl-tg.is-on{ background:#7c3aed; color:#fff; border-color:#7c3aed; }
.vc-wl-row{ padding:14px 2px; border-bottom:1px solid rgba(120,90,40,.14); display:flex; flex-direction:column; gap:5px; }
.vc-wl-term{ font-size:16.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vc-wl-pos{ font-size:12px; opacity:.6; font-style:italic; }
.vc-wl-ipa{ font-size:13px; opacity:.72; }
.vc-wl-vn{ font-size:15px; font-weight:600; }
.vc-wl-def{ font-size:13.5px; opacity:.82; line-height:1.5; }
.vc-wl-ex{ font-size:13.5px; opacity:.78; line-height:1.5; }
.vc-wl-syn{ display:flex; gap:6px; flex-wrap:wrap; }
.vc-wl-syn span{ font-size:12px; padding:2px 9px; border-radius:6px; background:rgba(0,0,0,.06); }
.ae-dark-mode .vc-wl-syn span{ background:rgba(255,255,255,.09); }
.vc-wl-spk{ width:28px; height:28px; font-size:14px; }
.vc-wl.hide-ipa .vc-wl-ipa:not(.peek),
.vc-wl.hide-vn  .vc-wl-vn:not(.peek),
.vc-wl.hide-def .vc-wl-def:not(.peek),
.vc-wl.hide-ex  .vc-wl-ex:not(.peek),
.vc-wl.hide-syn .vc-wl-syn:not(.peek){ filter:blur(6px); cursor:pointer; user-select:none; }
/* Danh sách (active-recall): lưới card nhiều cột dùng hết chiều ngang (thay 1 cột dồn giữa) */
#vcWL{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; align-items:start; }
#vcWL .vc-wl-row{ border:1px solid rgba(0,0,0,.09); border-radius:13px; padding:13px 16px; background:rgba(0,0,0,.02); text-align:left; align-items:flex-start; }
#vcWL .vc-wl-term{ justify-content:flex-start; }

/* Lịch sử — "Từ vựng đã học": lưới card auto nhiều cột (desktop tận dụng ngang, mobile tự về 1-2 cột).
 * Selector #vcHistWordList thắng .vc-wl-row column (danh sách active-recall ở trên). */
#vcHistWordList.vc-wordlog{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
#vcHistWordList .vc-wl-row{ flex-direction:column; align-items:flex-start; gap:5px; padding:12px 14px; border:1px solid rgba(0,0,0,.09); border-radius:12px; background:rgba(0,0,0,.02); }
#vcHistWordList .vc-wl-row:last-child{ border-bottom:1px solid rgba(0,0,0,.09); }
#vcHistWordList .vc-wl-badge{ min-width:0; }
#vcHistWordList .vc-wl-term{ min-width:0; font-size:15px; }
#vcHistWordList .vc-wl-vn{ white-space:normal; }
#vcHistWordList .vc-wl-meta{ opacity:.5; }

/* ==================== TRÒ CHƠI (5 game) ==================== */
.vc-game-card{ text-align:center; transition:transform .12s; } .vc-game-card:hover{ transform:translateY(-3px); }
.vc-game-emoji{ font-size:42px; margin-bottom:8px; line-height:1; }
.vc-game{ max-width:900px; margin:0 auto; }
/* Bộ chọn bộ/bài ngay trên trang Trò chơi */
.vc-game-picker .vc-gp-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.vc-gp{ position:relative; }
.vc-gp-btn{ display:flex; align-items:center; gap:8px; padding:9px 13px; border-radius:12px; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; min-width:190px; }
.vc-gp-btn .vc-gp-cur{ flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:210px; }
.vc-gp-btn i{ font-size:16px; } .vc-gp-caret{ opacity:.7; transition:transform .18s; } .vc-gp.open .vc-gp-caret{ transform:rotate(180deg); }
.vc-gp-pop{ position:absolute; top:calc(100% + 8px); right:0; z-index:60; width:320px; max-width:86vw; border-radius:14px; overflow:hidden; }
.vc-gp-search{ display:flex; align-items:center; gap:8px; padding:10px 12px; }
.vc-gp-search i{ font-size:15px; opacity:.6; }
.vc-gp-search input{ flex:1; border:0; background:transparent; font:inherit; font-size:13.5px; outline:none; }
.vc-gp-list{ max-height:340px; overflow-y:auto; padding:6px; }
.vc-gp-group{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; opacity:.6; padding:9px 10px 4px; }
.vc-gp-item{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:9px 10px; border-radius:9px; border:0; background:transparent; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.vc-gp-item-name{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vc-gp-item-count{ font-size:11.5px; font-weight:600; opacity:.6; flex:0 0 auto; }
.vc-gp-item-chk{ flex:0 0 auto; }
.vc-gp-item.is-lock{ opacity:.45; cursor:not-allowed; }
.vc-gp-empty{ padding:16px; text-align:center; font-size:13px; opacity:.6; }
.vg-hud{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:16px; font-weight:800; margin-bottom:14px; padding:10px 16px; border-radius:12px; background:rgba(124,58,237,.1); }
.vg-score{ color:#7c3aed; } .ae-dark-mode .vg-score{ color:#c4b0ff; }
.vg-combo{ font-size:14px; } .vg-lives{ letter-spacing:2px; font-size:15px; }
.vg-stage{ background:linear-gradient(180deg,#fffdf6,#f2ead6); border:1px solid #d8c89e; border-radius:18px; padding:22px; box-shadow:inset 0 1px 0 #fff,0 6px 18px -8px rgba(80,60,20,.4); }
.ae-dark-mode .vg-stage{ background:linear-gradient(180deg,#2f2820,#241e16); border-color:rgba(255,214,150,.14); }
.vg-miner{ text-align:center; }
.vg-rock{ width:150px; height:130px; margin:6px auto 22px; border-radius:26% 74% 62% 38%/45% 38% 62% 55%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 35% 30%,#8a8f98,#565b64 70%,#3c4048); color:#fff; box-shadow:inset 0 4px 10px rgba(255,255,255,.2),inset 0 -8px 14px rgba(0,0,0,.4),0 6px 14px rgba(0,0,0,.35); transition:.3s; }
.vg-rock-word{ font-size:22px; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.5); } .vg-rock-ipa{ font-size:12px; opacity:.85; margin-top:2px; }
.vg-crack{ background:radial-gradient(circle at 40% 30%,#e9c3ff,#a855f7 60%,#7c3aed); transform:scale(1.08); }
.vg-opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vg-opt{ padding:14px; border-radius:12px; font-size:15px; font-weight:600; cursor:pointer; border:1px solid #d0c09a; background:linear-gradient(180deg,#fff,#f0e8d6); color:#4a3c22; transition:.12s; }
.ae-dark-mode .vg-opt{ background:linear-gradient(180deg,#3a3020,#2c2418); border-color:rgba(255,214,150,.16); color:#e8d8ba; }
.vg-opt:hover:not(:disabled){ transform:translateY(-1px); }
.vg-opt.is-ok{ background:linear-gradient(180deg,#5fe0a0,#19c37d)!important; color:#053d29!important; border-color:#12a768!important; }
.vg-opt.is-bad{ background:linear-gradient(180deg,#ff8a8f,#ff5a5f)!important; color:#4a0d10!important; border-color:#e0353b!important; animation:vcShake .28s; }
.vg-prog{ margin-top:14px; font-size:12.5px; opacity:.6; text-align:center; }
.vg-fallzone{ position:relative; height:200px; border-radius:14px; overflow:hidden; margin-bottom:14px; background:linear-gradient(180deg,rgba(124,58,237,.06),rgba(124,58,237,.14)); border:1px dashed rgba(124,58,237,.3); }
.vg-falling{ position:absolute; top:0; left:50%; transform:translateX(-50%); padding:10px 18px; border-radius:12px; font-size:20px; font-weight:800; background:linear-gradient(180deg,#8b5cf6,#6d28d9); color:#fff; box-shadow:0 4px 10px rgba(60,20,120,.5); white-space:nowrap; }
.vg-gemgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
.vg-gemcol{ display:flex; flex-direction:column; gap:9px; }
.vg-gem{ padding:14px 12px; border-radius:12px; font-size:14.5px; font-weight:600; cursor:pointer; border:1px solid #c9b6f2; background:linear-gradient(180deg,#f7f2ff,#e9ddfb); color:#4a2b8c; transition:.12s; }
.ae-dark-mode .vg-gem{ background:linear-gradient(180deg,#332a52,#241d3e); border-color:rgba(160,120,255,.3); color:#d8ccff; }
.vg-gem.is-sel{ box-shadow:inset 0 0 0 2px #7c3aed; transform:scale(1.02); }
.vg-gem.is-ok{ background:linear-gradient(180deg,#5fe0a0,#19c37d)!important; color:#053d29!important; opacity:.65; }
.vg-gem.is-bad{ animation:vcShake .28s; box-shadow:inset 0 0 0 2px #ff5a5f; }
.vg-fish-q{ text-align:center; font-size:16px; margin-bottom:16px; }
.vg-pond{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.vg-fish-b{ padding:16px; border-radius:40px 40px 40px 10px; font-size:15px; font-weight:600; cursor:pointer; border:1px solid #9fd4e8; background:linear-gradient(180deg,#e6f6fd,#c7ebf8); color:#0d5a75; animation:vgFloat 2.4s ease-in-out infinite; animation-delay:var(--d,0s); }
.ae-dark-mode .vg-fish-b{ background:linear-gradient(180deg,#1c3a48,#12303d); border-color:rgba(120,200,230,.3); color:#a9dcec; }
.vg-fish-b.is-ok{ background:linear-gradient(180deg,#5fe0a0,#19c37d)!important; color:#053d29!important; }
.vg-fish-b.is-bad{ background:linear-gradient(180deg,#ff8a8f,#ff5a5f)!important; color:#4a0d10!important; }
@keyframes vgFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.vg-tower{ display:grid; grid-template-columns:80px 1fr; gap:18px; align-items:stretch; }
.vg-tower-viz{ position:relative; border-radius:12px; background:linear-gradient(180deg,rgba(124,58,237,.1),rgba(124,58,237,.02)); border:1px solid rgba(124,58,237,.2); min-height:240px; }
.vg-tower-top{ position:absolute; top:6px; left:50%; transform:translateX(-50%); font-size:26px; }
.vg-climber{ position:absolute; left:50%; transform:translateX(-50%); font-size:24px; transition:bottom .5s cubic-bezier(.4,0,.2,1); }
.vg-tower-word{ font-size:22px; font-weight:800; text-align:center; margin-bottom:14px; }
.vg-over .vc-h1{ font-family:inherit; }
@media(max-width:600px){ .vg-tower{ grid-template-columns:62px 1fr; } .vg-opts{ grid-template-columns:1fr; } .vg-pond{ grid-template-columns:1fr; } }

/* ==================== AI đặt câu (Nanh-gated) ==================== */
.vc-ai-cost{ font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; background:rgba(124,58,237,.14); color:#6d28d9; margin-left:8px; }
.ae-dark-mode .vc-ai-cost{ background:rgba(160,120,255,.2); color:#c4b0ff; }
.vc-mode-nanh{ font-size:11px; opacity:.9; margin-left:2px; }
/* Toggle 2 chế độ: Tự đặt câu (AI chấm) ⇄ Trợ giúp đặt câu (AI đặt giúp) */
.vc-ai-modes{ display:inline-flex; gap:4px; padding:4px; margin:2px 0 8px; border-radius:12px; background:rgba(124,58,237,.08); border:1px solid rgba(124,58,237,.16); }
.vc-ai-mode{ font:inherit; font-size:13px; font-weight:700; cursor:pointer; padding:7px 14px; border-radius:9px; border:1px solid transparent; background:transparent; color:#6b5f8a; display:inline-flex; align-items:center; gap:5px; transition:background .12s,color .12s,box-shadow .12s; }
.vc-ai-mode:hover{ color:#6d28d9; }
.vc-ai-mode.is-on{ background:linear-gradient(180deg,#8b5cf6,#7c3aed); color:#fff; box-shadow:0 2px 6px rgba(124,58,237,.35),inset 0 1px 0 rgba(255,255,255,.3); }
.vc-ai-mode-hint{ font-size:12.5px; line-height:1.5; color:#7a6f8c; margin:0 0 14px; }
.vc-ai-help-main{ font-size:19px; font-weight:700; line-height:1.5; padding:10px 14px; margin:2px 0 4px; border-radius:10px; background:rgba(124,58,237,.08); border-left:3px solid #7c3aed; color:#2c2540; }
.ae-dark-mode .vc-ai-modes{ background:rgba(160,120,255,.12); border-color:rgba(160,120,255,.22); }
.ae-dark-mode .vc-ai-mode{ color:#c9bde8; }
.ae-dark-mode .vc-ai-mode.is-on{ background:linear-gradient(180deg,#a78bfa,#8b5cf6); color:#1a1526; }
.ae-dark-mode .vc-ai-mode-hint{ color:#b9aecf; }
.ae-dark-mode .vc-ai-help-main{ background:rgba(160,120,255,.14); border-left-color:#a78bfa; color:#f0e9ff; }
.vc-ai-in{ width:100%; box-sizing:border-box; font:inherit; font-size:16px; line-height:1.6; padding:13px 15px; border-radius:12px; border:1px solid #d0c09a; background:rgba(255,255,255,.5); color:inherit; outline:none; resize:vertical; min-height:64px; }
.vc-ai-in:focus{ border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.2); }
.ae-dark-mode .vc-ai-in{ background:rgba(255,255,255,.06); border-color:rgba(255,214,150,.18); }
.vc-ai-fb{ margin-top:14px; padding:14px 16px; border-radius:12px; }
.vc-ai-score{ font-size:16px; font-weight:800; margin-bottom:6px; }
.vc-ai-note{ font-size:14px; line-height:1.55; }
.vc-ai-row{ font-size:13.5px; line-height:1.5; margin-top:8px; padding-top:8px; border-top:1px dashed rgba(0,0,0,.12); }
.ae-dark-mode .vc-ai-row{ border-top-color:rgba(255,255,255,.14); }
.vc-feedback.ok{ background:rgba(25,195,125,.14); color:#0d7a4f; }
.vc-feedback.no{ background:rgba(255,90,95,.12); color:#c0392b; }
.ae-dark-mode .vc-feedback.ok{ color:#5fe0a0; } .ae-dark-mode .vc-feedback.no{ color:#ff9a9e; }

/* ==================== Hội thoại AI ==================== */
.vc-chat-targets{ font-size:13px; opacity:.85; margin:2px 0 14px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.vc-chat-chip{ font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:999px; background:rgba(124,58,237,.12); color:#6d28d9; border:1px solid rgba(124,58,237,.3); }
.vc-chat-chip.used{ background:rgba(25,195,125,.16); color:#0d7a4f; border-color:rgba(25,195,125,.4); }
.ae-dark-mode .vc-chat-chip{ background:rgba(160,120,255,.18); color:#c4b0ff; } .ae-dark-mode .vc-chat-chip.used{ color:#5fe0a0; }
.vc-chat-msgs{ min-height:220px; max-height:min(52vh,440px); overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:6px 2px; }
.vc-chat-empty{ margin:auto; text-align:center; font-size:13.5px; opacity:.6; max-width:340px; line-height:1.6; }
.vc-msg{ max-width:80%; padding:11px 15px; border-radius:16px; font-size:14.5px; line-height:1.55; white-space:pre-wrap; }
.vc-msg-model{ align-self:flex-start; border-bottom-left-radius:5px; background:rgba(124,58,237,.1); }
.vc-msg-user{ align-self:flex-end; border-bottom-right-radius:5px; background:#6d28d9; color:#fff; }
.ae-dark-mode .vc-msg-model{ background:rgba(160,120,255,.16); }
.vc-msg-typing{ opacity:.6; letter-spacing:3px; animation:vgFloat 1s ease-in-out infinite; }
.vc-msg-vn{ margin-top:6px; padding-top:6px; border-top:1px dashed rgba(0,0,0,.14); font-size:12.5px; font-style:italic; opacity:.72; }
.ae-dark-mode .vc-msg-vn{ border-top-color:rgba(255,255,255,.16); }

/* «Sửa lại» — mượn của Alpha Dialogue. Nằm ngay dưới bong bóng của học viên,
   lệch phải cùng phía để đọc là biết đang sửa câu nào. Màu hổ phách chứ không
   đỏ: đây là gợi ý viết hay hơn, không phải chấm sai. */
.vc-msg-fix{ position:relative; align-self:flex-end; max-width:80%; margin-top:-2px; padding:10px 40px 10px 14px;
  border-radius:14px; border-left:3px solid #d97706; background:rgba(217,119,6,.10); font-size:14px; line-height:1.55; }
.vc-msg-fix-lbl{ font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#b45309; margin-bottom:3px; }
.vc-msg-fix-en{ font-weight:600; }
.vc-msg-fix-why{ margin-top:5px; font-size:12.5px; opacity:.8; }
.vc-msg-fix-spk{ position:absolute; top:8px; right:8px; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:rgba(217,119,6,.16); color:#b45309; cursor:pointer; font-size:14px; }
.vc-msg-fix-spk:hover{ background:rgba(217,119,6,.3); }
/* Dark: #b45309 trên nền tối là chữ chìm — kéo lên amber-400. */
.ae-dark-mode .vc-msg-fix{ background:rgba(251,191,36,.12); border-left-color:#fbbf24; }
.ae-dark-mode .vc-msg-fix-lbl,
.ae-dark-mode .vc-msg-fix-spk{ color:#fbbf24; }
.ae-dark-mode .vc-msg-fix-spk{ background:rgba(251,191,36,.18); }
.vc-chat-input{ display:flex; align-items:flex-end; gap:8px; margin-top:14px; }
.vc-chat-input textarea{ flex:1; box-sizing:border-box; font:inherit; font-size:15px; line-height:1.5; padding:11px 14px; border-radius:14px; border:1px solid #d0c09a; background:rgba(255,255,255,.5); color:inherit; outline:none; resize:none; max-height:120px; }
.vc-chat-input textarea:focus{ border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.18); }
.ae-dark-mode .vc-chat-input textarea{ background:rgba(255,255,255,.06); border-color:rgba(255,214,150,.18); }
.vc-chat-mic,.vc-chat-send{ width:44px; height:44px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; cursor:pointer; font-size:18px; padding:0; }
.vc-chat-mic{ border:1px solid #d0c09a; background:rgba(255,255,255,.5); color:inherit; }
.ae-dark-mode .vc-chat-mic{ background:rgba(255,255,255,.06); border-color:rgba(255,214,150,.18); }
.vc-chat-mic.rec{ background:#ff5a5f; color:#fff; border-color:#e0353b; animation:vgFloat .8s ease-in-out infinite; }
/* Đang gửi lên máy chép lời — khoá nút để không bấm chồng lượt */
.vc-chat-mic:disabled{ opacity:.5; cursor:progress; animation:none; }

/* ==================== Leaderboard (BXH) ==================== */
.vc-lb{ display:flex; flex-direction:column; gap:6px; }
.vc-lb-row{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:12px; }
.vc-lb-row:nth-child(odd){ background:rgba(120,90,40,.05); }
.ae-dark-mode .vc-lb-row:nth-child(odd){ background:rgba(255,255,255,.04); }
.vc-lb-me{ background:rgba(124,58,237,.12) !important; box-shadow:inset 0 0 0 1.5px rgba(124,58,237,.4); }
.ae-dark-mode .vc-lb-me{ background:rgba(160,120,255,.16) !important; }
.vc-lb-rank{ width:30px; text-align:center; font-size:17px; font-weight:800; flex:0 0 auto; }
.vc-lb-av{ width:34px; height:34px; border-radius:50%; flex:0 0 auto; object-fit:cover; }
.vc-lb-name{ flex:1; min-width:0; font-size:14.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vc-lb-you{ font-size:11.5px; font-weight:700; color:#6d28d9; } .ae-dark-mode .vc-lb-you{ color:#c4b0ff; }
.vc-lb-pts{ flex:0 0 auto; font-size:14px; font-weight:800; }
/* Trang Xếp hạng — hạng cá nhân + hoạt động */
.vc-lb-top{ display:grid; grid-template-columns:1.05fr 1fr; gap:16px; margin-bottom:16px; }
.vc-lb-hero{ display:flex; align-items:center; gap:20px; }
.vc-lb-hero-medal{ width:92px; height:92px; border-radius:50%; display:grid; place-items:center; font-size:44px; flex:0 0 auto; box-shadow:0 5px 14px rgba(150,110,30,.32),inset 0 2px 5px rgba(255,255,255,.55); }
.vc-lb-hero-main{ min-width:0; }
.vc-lb-hero-pts{ font-size:34px; font-weight:800; letter-spacing:-1px; line-height:1; } .vc-lb-hero-pts small{ font-size:20px; }
.vc-lb-hero-lbl{ font-size:15px; font-weight:700; margin-top:6px; }
.vc-lb-hero-sub{ font-size:13px; margin-top:8px; } .vc-lb-hero-reset{ font-size:11.5px; margin-top:7px; opacity:.72; display:flex; align-items:center; gap:5px; }
.vc-lb-act-row{ display:flex; gap:14px; margin:8px 0 16px; }
.vc-lb-act{ flex:1; text-align:center; padding:14px 10px; border-radius:14px; }
.vc-lb-act-val{ font-size:26px; font-weight:800; letter-spacing:-.5px; } .vc-lb-act-val small{ font-size:15px; opacity:.6; }
.vc-lb-act-lbl{ font-size:12px; margin-top:3px; opacity:.82; }
.vc-lb-legend{ display:flex; align-items:center; gap:6px; margin-top:11px; font-size:11.5px; opacity:.75; }
.vc-lb-note{ font-size:12px; font-weight:500; opacity:.55; margin-left:6px; }
.vc-lb-me-float{ margin-top:8px; }
/* Huy hiệu (màu cố định cả 2 skin) */
.vc-tier-gold{ background:radial-gradient(circle at 35% 30%,#fffbe8,#ffe08a 52%,#e0a92e); }
.vc-tier-silver{ background:radial-gradient(circle at 35% 30%,#ffffff,#e3e9f0 52%,#a8b3c4); }
.vc-tier-bronze{ background:radial-gradient(circle at 35% 30%,#fff5ec,#ecc19a 52%,#b5793f); }
@media(max-width:820px){ .vc-lb-top{ grid-template-columns:1fr; } }

@media(max-width:960px){
  .vc-topnav-main{ flex-wrap:wrap; padding:10px 14px; gap:10px; }
  .vc-topnav-layout .vc-search{ order:3; flex:1 1 100%; max-width:none; }
  .vc-topnav-layout .vc-brand-sub{ display:none; }
  .vc-tabs{ padding:0 12px 8px; }
  .vc-skin-switch button span{ display:none; }
  .vc-icon-btn#vcDarkBtn{ display:grid !important; }
}

/* ── Mobile: drawer LEATHER (tái dùng .vc-side gốc: brand + nav + đá/streak/user) ── */
.vc-nav-toggle{ display:none; }
.vc-tabs-backdrop{ display:none; }
.vc-mdrawer-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
/* Nút đóng drawer = CLASP bản gốc: flat icon sidebar · skeuo Ổ KHÓA đồng.
   TÂM nút CƯỠI mép phải drawer (skeuo override right:9px = trùng đường chỉ may). */
.vc-mdrawer-close{ position:absolute; top:50%; right:0; transform:translate(50%,-50%); z-index:6; width:36px; height:36px; border-radius:9px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.95); color:#4b5563; transition:transform .15s ease, background .15s ease, color .15s ease; box-shadow:0 2px 8px rgba(16,21,37,.14); }
.vc-mdrawer-close:hover{ transform:translate(50%,-50%) scale(1.06); }
.vc-side.vc-mdrawer .vc-mdrawer-close{ display:none; }   /* mặc định ẩn (drawer đóng = trượt ra ngoài, khỏi ló) */
.vc-side.vc-mdrawer.is-open .vc-mdrawer-close{ display:flex; }        /* chỉ hiện khi drawer mở, gài trên đường chỉ */
.vc-clasp-icon{ width:20px; height:20px; flex:0 0 auto; }
.vc-clasp-skeuo{ display:none; }
html.theme-skeuo .vc-clasp-flat{ display:none; }
html.theme-skeuo .vc-clasp-skeuo{ display:block; }
body.vc-nav-lock{ overflow:hidden; }
/* Desktop: drawer leather ẩn (điều hướng dùng tab ngang topnav) */
.vc-topnav-layout .vc-side.vc-mdrawer{ display:none; }
@media(max-width:768px){
  .vc-nav-toggle{ display:grid; place-items:center; width:40px; height:40px; font-size:22px; flex:0 0 auto; order:-1; }
  /* Ẩn tab ngang + 2 pill đá/streak trên topnav (đã có trong drawer); giữ skin-switch + dark */
  .vc-topnav-layout .vc-tabs{ display:none; }
  .vc-topnav-right .vc-nanh-pill,
  .vc-topnav-right .vc-streak-pill{ display:none; }
  /* Drawer leather trượt trái, full cao, đè topnav */
  .vc-topnav-layout .vc-side.vc-mdrawer{
    display:flex !important; position:fixed !important; top:0 !important; left:0 !important; bottom:0 !important; right:auto !important;
    width:min(300px,86vw) !important; height:100% !important; max-height:none !important;
    padding:16px 14px max(18px, env(safe-area-inset-bottom, 0px)) !important;
    overflow:visible;   /* cho chốt ổ khóa cưỡi mép — scroll nằm trong .vc-nav */
    transform:translateX(-100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
    z-index:130; box-shadow:0 12px 40px rgba(15,10,4,.4); visibility:visible !important; opacity:1 !important;
  }
  .admin-bar .vc-topnav-layout .vc-side.vc-mdrawer{ top:32px !important; }
  .vc-topnav-layout .vc-side.vc-mdrawer.is-open{ transform:translateX(0); }
  .vc-topnav-layout .vc-side.vc-mdrawer .vc-nav{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .vc-tabs-backdrop{ display:block; position:fixed; inset:0; z-index:125; background:rgba(15,10,4,.5); opacity:0; pointer-events:none; transition:opacity .25s; }
  .vc-tabs-backdrop.is-show{ opacity:1; pointer-events:auto; }
}
/* Desktop giữ nút X ẩn (chỉ dùng trong drawer mobile) */
@media(min-width:769px){ .vc-mdrawer-close{ display:none; } }

/* ==================== Đọc nhanh RSVP (speed) ==================== */
.vc-sr .vc-sr-ctl{ display:flex; align-items:center; justify-content:center; gap:14px; margin:6px 0 14px; }
.vc-sr-wpm{ text-align:center; min-width:110px; } .vc-sr-wpm b{ font-size:30px; font-weight:800; display:block; line-height:1; } .vc-sr-wpm small{ font-size:11.5px; opacity:.6; }
.vc-sr-stage{ min-height:190px; display:flex; align-items:center; justify-content:center; border:2px dashed rgba(0,0,0,.12); border-radius:14px; padding:18px; cursor:pointer; user-select:none; }
.vc-sr-hint{ font-size:13.5px; opacity:.65; line-height:1.7; text-align:center; }
.vc-sr-card{ width:100%; text-align:center; }
/* ORP reticle: 3 cột 1fr auto 1fr → chữ pivot nằm ĐÚNG tâm; guide tick trên/dưới */
.vc-sr-reticle{ position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline;
  font-size:clamp(30px,4.6vw,44px); font-weight:800; letter-spacing:-.3px; line-height:1.2; }
.vc-sr-t-a{ text-align:right; } .vc-sr-t-b{ text-align:left; }
.vc-sr-t-p{ text-align:center; color:#e0353b; }
.vc-sr-reticle::before, .vc-sr-reticle::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); width:2px; height:11px; background:rgba(224,53,59,.55); border-radius:2px; }
.vc-sr-reticle::before{ top:-15px; } .vc-sr-reticle::after{ bottom:-15px; }
.vc-sr-card .vc-sr-ipa{ font-size:16px; opacity:.6; margin-top:10px; font-style:italic; overflow:visible; white-space:normal; }
.vc-sr-card .vc-sr-vn{ font-size:18px; font-weight:600; margin-top:10px; max-width:none; overflow:visible; text-overflow:clip; white-space:normal; flex:none; }
.vc-sr-meta{ margin:10px 0 14px; font-size:12.5px; font-weight:700; opacity:.6; }
.vc-sr-passage{ font-size:15.5px; line-height:1.8; text-align:left; margin:0 0 14px; }
.ae-dark-mode .vc-sr-stage{ border-color:rgba(255,255,255,.14); }

/* ==================== Đổi hình nền ambient ==================== */
#vcBgLayer{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
#vcBgLayer .vc-bg-img{ position:absolute; inset:0; background-size:cover; background-position:center; }
#vcBgLayer iframe{ position:absolute; top:50%; left:50%; width:max(100vw,177.8vh); height:max(100vh,56.25vw); transform:translate(-50%,-50%); }
#vcBgLayer .vc-bg-shade{ position:absolute; inset:0; background:rgba(10,8,14,.42); }
body.vc-has-bg .vc-root, body.vc-has-bg .vc-root.vc-topnav-layout{ background:transparent !important; position:relative; z-index:1; }
body.vc-has-bg .vc-main{ background:transparent !important; }
#vcBgSnd{ position:fixed; right:18px; bottom:18px; z-index:60; width:46px; height:46px; border-radius:50%; border:0; cursor:pointer; font-size:20px; background:rgba(20,16,10,.72); color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.4); }
.vc-bg-modal{ position:fixed; inset:0; z-index:140; background:rgba(12,9,4,.55); display:flex; align-items:center; justify-content:center; padding:18px; }
.vc-bg-modal[hidden]{ display:none; }
.vc-bg-dialog{ width:min(560px,94vw); max-height:88vh; overflow-y:auto; }
.vc-bg-head{ display:flex; align-items:center; justify-content:space-between; font-size:16px; margin-bottom:6px; }
.vc-bg-lbl{ font-size:12.5px; font-weight:700; opacity:.7; margin:14px 0 8px; }
.vc-bg-row{ display:flex; gap:8px; }
.vc-bg-row input{ flex:1; padding:10px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.15); font:inherit; font-size:13px; }
.vc-bg-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.vc-bg-pre{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 6px; border-radius:12px; border:1px solid rgba(0,0,0,.1); background:rgba(0,0,0,.03); cursor:pointer; font:inherit; font-size:12px; font-weight:600; }
.vc-bg-pre span{ font-size:22px; }
.vc-bg-pre:hover{ transform:translateY(-2px); }
.vc-bg-note{ font-size:12px; opacity:.6; margin:12px 0; line-height:1.6; }
@media(max-width:600px){ .vc-bg-grid{ grid-template-columns:repeat(2,1fr); } }

/* ==================== Lộ trình (roadmap) ==================== */
.vc-rm-col{ margin-bottom:18px; }
.vc-rm-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.vc-rm-title{ font-size:19px; font-weight:800; }
.vc-rm-sub{ font-size:12.5px; opacity:.65; margin-top:3px; }
.vc-rm-colpct{ text-align:right; } .vc-rm-colpct b{ font-size:24px; font-weight:800; display:block; line-height:1; } .vc-rm-colpct small{ font-size:11px; opacity:.6; }
.vc-rm-colbar{ height:9px; border-radius:99px; background:rgba(0,0,0,.09); overflow:hidden; margin:12px 0 6px; }
.vc-rm-colbar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#7c3aed,#a78bfa); }
.vc-rm-panel.is-hidden{ display:none; }
/* Top tab (IELTS / HSK / …) + nhãn nhóm trong Lộ trình */
.vc-rm-toptabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; border-bottom:2px solid rgba(0,0,0,.08); padding-bottom:2px; }
.vc-rm-toptab{ display:inline-flex; align-items:center; gap:7px; padding:9px 20px; border:0; background:transparent; font:inherit; font-weight:800; font-size:15px; color:inherit; opacity:.55; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-4px; transition:.15s; }
.vc-rm-toptab .vc-rm-toptab-ic{ font-size:17px; }
.vc-rm-toptab:hover{ opacity:.85; }
.vc-rm-toptab.is-active{ opacity:1; border-bottom-color:#7c3aed; }
.vc-rm-tabgroup.is-hidden{ display:none; }
.vc-rm-grouplbl{ font-size:12px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; opacity:.55; margin:4px 2px 8px; }
html.theme-skeuo .vc-rm-grouplbl{ color:#5c3f16; opacity:1; text-shadow:0 1px 0 rgba(255,250,235,.4); }
html.theme-skeuo.ae-dark-mode .vc-rm-grouplbl{ color:#e6c98f; text-shadow:0 1px 1px rgba(0,0,0,.5); }
.vc-rm-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.vc-rm-tab{ display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px; border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.7); font:inherit; font-weight:700; font-size:13.5px; cursor:pointer; color:inherit; transition:.15s; }
.vc-rm-tab:hover{ border-color:rgba(124,58,237,.5); }
.vc-rm-tab.is-active{ background:#7c3aed; border-color:#7c3aed; color:#fff; }
.vc-rm-tab-pct{ font-size:11.5px; font-weight:800; padding:2px 8px; border-radius:99px; background:rgba(0,0,0,.1); }
.vc-rm-tab.is-active .vc-rm-tab-pct{ background:rgba(255,255,255,.22); }
/* Bản đồ hành trình kiểu game: đường dọc giữa + node QUÁI pixel zigzag 2 bên, cuối = BOSS + 🏰 */
.vc-rm-trail{ position:relative; margin-top:22px; padding:6px 0 4px; }
.vc-rm-trail::before{ content:''; position:absolute; top:0; bottom:44px; left:50%; width:5px; margin-left:-2.5px;
  background:repeating-linear-gradient(180deg, rgba(124,58,237,.5) 0 14px, transparent 14px 26px); border-radius:99px; }
.vc-rm-step{ position:relative; display:flex; align-items:center; gap:16px; margin:0 0 26px; width:50%; }
.vc-rm-step-l{ padding-right:52px; justify-content:flex-end; text-align:right; }
.vc-rm-step-r{ margin-left:50%; padding-left:52px; flex-direction:row-reverse; justify-content:flex-end; text-align:left; }
.vc-rm-orb{ position:absolute; top:50%; width:74px; height:74px; margin-top:-37px; border-radius:50%; z-index:2;
  display:grid; place-items:center; background:radial-gradient(circle at 35% 30%, #fff, #e8e2f5); border:3px solid #c4b5fd; box-shadow:0 4px 10px rgba(0,0,0,.18); }
.vc-rm-step-l .vc-rm-orb{ right:-37px; }
.vc-rm-step-r .vc-rm-orb{ left:-37px; }
.vc-rm-orb img{ width:52px; height:52px; image-rendering:pixelated; }
.vc-rm-step.is-done .vc-rm-orb{ border-color:#1f9d57; filter:grayscale(.45) brightness(1.05); }
.vc-rm-flag{ position:absolute; right:-4px; top:-4px; width:24px; height:24px; border-radius:50%; background:#1f9d57; color:#fff; font-weight:800; font-size:13px; display:grid; place-items:center; box-shadow:0 2px 4px rgba(0,0,0,.3); }
.vc-rm-step.is-cur .vc-rm-orb{ border-color:#f4b03c; animation:vcRmPulse 1.4s ease-in-out infinite; }
@keyframes vcRmPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(244,176,60,.55), 0 4px 10px rgba(0,0,0,.18) } 50%{ box-shadow:0 0 0 12px rgba(244,176,60,0), 0 4px 10px rgba(0,0,0,.18) } }
.vc-rm-step.is-boss .vc-rm-orb{ width:92px; height:92px; margin-top:-46px; border-color:#e0353b; }
.vc-rm-step-l.is-boss .vc-rm-orb{ right:-46px; } .vc-rm-step-r.is-boss .vc-rm-orb{ left:-46px; }
.vc-rm-step.is-boss .vc-rm-orb img{ width:68px; height:68px; }
.vc-rm-bosslbl{ position:absolute; bottom:-9px; left:50%; transform:translateX(-50%); background:#e0353b; color:#fff; font-size:9.5px; font-weight:800; letter-spacing:1px; padding:2px 9px; border-radius:99px; box-shadow:0 2px 4px rgba(0,0,0,.3); }
.vc-rm-card{ flex:0 1 340px; min-width:0; padding:13px 15px; border-radius:14px; border:1px solid rgba(0,0,0,.09); background:rgba(0,0,0,.025); }
.vc-rm-unit-name{ font-weight:800; font-size:14.5px; }
.vc-rm-unit-sub{ font-size:11.5px; opacity:.62; margin:3px 0 7px; }
.vc-rm-bar{ position:relative; height:7px; border-radius:99px; background:rgba(0,0,0,.08); overflow:hidden; }
.vc-rm-bar em{ position:absolute; inset:0 auto 0 0; background:rgba(124,58,237,.25); border-radius:99px; }
.vc-rm-bar i{ position:absolute; inset:0 auto 0 0; background:#7c3aed; border-radius:99px; z-index:1; }
.vc-rm-card-foot{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.vc-rm-step-l .vc-rm-card-foot{ justify-content:flex-end; }
.vc-rm-pct{ font-weight:800; font-size:14px; margin-right:auto; }
.vc-rm-step-l .vc-rm-pct{ margin-right:0; margin-left:auto; order:3; }
.vc-rm-btn{ padding:8px 12px; font-size:12.5px; }
.vc-rm-castle{ text-align:center; font-size:44px; filter:drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
@media(max-width:760px){
  .vc-rm-trail::before{ left:37px; }
  .vc-rm-step, .vc-rm-step-l, .vc-rm-step-r{ width:100%; margin-left:0; padding:0 0 0 88px; justify-content:flex-start; flex-direction:row; text-align:left; }
  .vc-rm-step-l .vc-rm-orb, .vc-rm-step-r .vc-rm-orb{ left:0; right:auto; }
  .vc-rm-step-l.is-boss .vc-rm-orb, .vc-rm-step-r.is-boss .vc-rm-orb{ left:-8px; }
  .vc-rm-step-l .vc-rm-card-foot{ justify-content:flex-start; }
  .vc-rm-step-l .vc-rm-pct{ margin:0 auto 0 0; order:0; }
  .vc-rm-castle{ text-align:left; padding-left:16px; }
}
/* ==================== Học qua YouTube ==================== */
/* CẠNH NHAU: video TRÁI (to) — phụ đề PHẢI (cuộn riêng) */
.vc-yt-view{ max-width:min(1480px,96vw) !important; }
.vc-yt-wrap{ display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:16px; align-items:start; }
.vc-yt-wrap[hidden]{ display:none !important; }   /* class display:grid đè [hidden] của UA → khung video giả hiện khi chưa mở video */
.vc-yt-frame{ position:relative; padding-top:56.25%; border-radius:12px; overflow:hidden; background:#000; }
.vc-yt-frame iframe{ position:absolute; inset:0; width:100%; height:100%; }
/* Đầu bảng phụ đề (panel hẹp bên phải): tiêu đề 1 hàng, 2 nút CHIA ĐỀU 1 hàng */
.vc-yt-tx-head{ display:flex; flex-direction:column; align-items:stretch; gap:10px; margin-bottom:10px; }
.vc-yt-tx-title{ display:flex; align-items:baseline; gap:8px; }
.vc-yt-actions{ display:flex; gap:8px; }
.vc-yt-actions .vc-btn{ flex:1 1 0; min-width:0; white-space:nowrap; font-size:12px; padding:9px 8px; gap:5px; }
.vc-yt-actions .vc-btn i{ font-size:15px; }
.vc-yt-free{ font-size:10px; font-weight:800; color:#1f9d57; background:rgba(31,157,87,.14); padding:1px 6px; border-radius:99px; }
.vc-yt-cost{ font-size:11px; opacity:.85; }
.vc-yt-tx-list{ max-height:min(60vh,600px); overflow-y:auto; padding-right:6px; scrollbar-width:thin; scrollbar-color:rgba(124,58,237,.3) transparent; }
.vc-yt-tx-list::-webkit-scrollbar{ width:7px; } .vc-yt-tx-list::-webkit-scrollbar-thumb{ background:rgba(124,58,237,.28); border-radius:99px; }
.vc-yt-seg{ display:flex; gap:10px; align-items:flex-start; padding:10px 10px; border-radius:12px; margin-bottom:2px; transition:background .15s, box-shadow .2s; }
.vc-yt-seg:hover{ background:rgba(124,58,237,.05); }
.vc-yt-t{ flex:0 0 auto; border:0; background:rgba(124,58,237,.12); color:#6d28d9; font:inherit; font-size:11px; font-weight:800; padding:4px 9px; border-radius:99px; cursor:pointer; letter-spacing:.3px; transition:.15s; }
.vc-yt-t:hover{ background:#7c3aed; color:#fff; }
.vc-yt-seg-tx{ flex:1; min-width:0; }
.vc-yt-en{ font-size:14px; line-height:1.65; color:#2b2a33; }
.vc-yt-w{ cursor:pointer; border-radius:4px; padding:0 1px; }
.vc-yt-w:hover{ background:rgba(124,58,237,.18); }
.vc-yt-vi{ font-size:13px; color:#6a6a78; font-style:italic; margin-top:4px; padding-left:10px; border-left:2px solid rgba(124,58,237,.28); }
.vc-yt-vi-btn{ flex:0 0 auto; border:1px solid rgba(124,58,237,.4); background:transparent; color:inherit; font:inherit; font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:7px; cursor:pointer; }
.vc-yt-pop{ position:fixed; inset:0; z-index:150; background:rgba(12,9,4,.5); display:flex; align-items:center; justify-content:center; padding:18px; }
.vc-yt-pop[hidden]{ display:none; }
.vc-yt-pop-in{ width:min(420px,94vw); }
.vc-yt-pop-term{ display:flex; align-items:center; gap:10px; font-size:22px; margin-bottom:8px; }
@media(max-width:900px){ .vc-yt-wrap{ grid-template-columns:1fr; } .vc-yt-tx-list{ max-height:340px; } }
.ae-dark-mode .vc-yt-seg{ border-bottom-color:rgba(255,255,255,.08); }

/* Nút Đổi hình nền có label */
.vc-bgbtn{ display:flex; align-items:center; gap:6px; padding:8px 13px; border-radius:999px; border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.75); font:inherit; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.vc-bgbtn i{ font-size:16px; }
@media(max-width:960px){ .vc-bgbtn span{ display:none; } .vc-bgbtn{ padding:8px 10px; } }

/* ── YouTube: history strip + dòng phụ đề đang chạy (active) ── */
.vc-yt-hist{ margin-bottom:14px; }
.vc-yt-hist-head{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:800; opacity:.92; margin-bottom:8px; }
.vc-yt-hist-head .vc-lr-sub{ opacity:.8; font-weight:600; }
.vc-yt-hist-row{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
.vc-yt-hist-card{ flex:0 0 148px; width:148px; text-align:left; border:1px solid rgba(0,0,0,.1); background:rgba(255,255,255,.7); border-radius:12px; padding:0 0 8px; cursor:pointer; overflow:hidden; font:inherit; transition:.15s; }
.vc-yt-hist-card:hover{ transform:translateY(-2px); border-color:rgba(124,58,237,.5); box-shadow:0 6px 14px rgba(0,0,0,.12); }
.vc-yt-hist-thumb{ position:relative; display:block; height:83px; background-size:cover; background-position:center; background-color:#000; }
.vc-yt-hist-badge{ position:absolute; top:5px; right:5px; background:#7c3aed; color:#fff; font-size:9.5px; font-weight:800; padding:1px 6px; border-radius:99px; }
.vc-yt-hist-badge-bi{ background:#1f9d57; }
.vc-yt-hist-title{ display:block; font-size:12px; font-weight:700; line-height:1.25; margin:6px 8px 2px; max-height:30px; overflow:hidden; }
.vc-yt-hist-sub{ display:block; font-size:11px; opacity:.55; margin:0 8px; }
.vc-yt-seg.is-active{ background:linear-gradient(90deg, rgba(124,58,237,.14), rgba(124,58,237,.05)); box-shadow:inset 4px 0 0 #7c3aed, 0 2px 10px rgba(124,58,237,.14); }
.vc-yt-reco-row{ padding-top:2px; }
.vc-yt-reco-row .vc-yt-hist-card{ flex-basis:184px; width:184px; }
.vc-yt-reco-badge{ right:auto; left:5px; bottom:5px; top:auto; background:rgba(20,15,8,.78); }
.vc-yt-reco-card .vc-yt-hist-sub i{ font-size:12px; vertical-align:-1px; }
.vc-yt-hist-sub .ti-brand-youtube, .vc-nb-src .ti-brand-youtube{ color:#ff0000; }
.vc-yt-reco{ margin-bottom:16px; }
.vc-yt-reco-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.vc-yt-reco-card{ text-align:left; border:1px solid rgba(0,0,0,.1); background:rgba(255,255,255,.7); border-radius:12px; padding:0 0 9px; cursor:pointer; overflow:hidden; font:inherit; transition:.15s; }
.vc-yt-reco-card:hover{ transform:translateY(-3px); border-color:rgba(124,58,237,.5); box-shadow:0 8px 18px rgba(0,0,0,.14); }
.vc-yt-reco-thumb{ position:relative; display:block; aspect-ratio:16/9; background-size:cover; background-position:center; background-color:#000; }
.vc-yt-reco-topic{ position:absolute; left:6px; bottom:6px; background:rgba(20,15,8,.72); color:#fff; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:99px; }
.vc-yt-reco-title{ display:block; font-size:12.5px; font-weight:700; line-height:1.3; margin:8px 10px 3px; max-height:48px; overflow:hidden; }
.vc-yt-reco-ch{ display:flex; align-items:center; gap:4px; font-size:11px; opacity:.6; margin:0 10px; }

.vc-yt-seg.is-active .vc-yt-en{ font-weight:700; color:#1c1b22; }
.vc-yt-seg.is-active .vc-yt-t{ background:#7c3aed; color:#fff; }

/* ── Icon "Học qua YouTube": FLAT = huy hiệu YouTube đỏ chính chủ (skeuo giữ 📺) ── */
.vc-yt-ico{ display:inline-flex; align-items:center; vertical-align:-1px; margin-left:4px; }
.vc-yt-badge{ display:inline-block; width:1.28em; height:.9em; background:#FF0000; border-radius:.28em; position:relative; box-shadow:0 1px 2px rgba(255,0,0,.35); }
.vc-yt-badge::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-38%,-50%); border-style:solid; border-width:.24em 0 .24em .4em; border-color:transparent transparent transparent #fff; }
.vc-yt-ico-tv{ display:none; }

/* ── Bộ sưu tập video đã xem (Video tab) — hàng card cuộn ngang, tái dùng vc-yt-hist-* ── */
.vc-yt-coll{ margin-bottom:16px; }
.vc-yt-coll .vc-yt-hist-head{ position:relative; padding-right:120px; }
.vc-yt-coll-more{ position:absolute; right:0; top:0; display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:800; color:#7c3aed; text-decoration:none; opacity:1; }
.vc-yt-coll-more:hover{ text-decoration:underline; }
.vc-yt-coll-badge{ background:#1f9d57; }

/* ── SỔ TAY từ vựng (notebook) ── */
.vc-nb-empty{ text-align:center; padding:40px 24px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.vc-nb-empty-ic{ font-size:52px; }
.vc-nb-toolbar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:14px; }
.vc-nb-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.vc-nb-chip{ padding:7px 13px; border-radius:999px; border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.7); font:inherit; font-weight:700; font-size:12.5px; cursor:pointer; }
.vc-nb-chip.is-active{ background:#7c3aed; border-color:#7c3aed; color:#fff; }
.vc-nb-search{ display:flex; align-items:center; gap:6px; padding:8px 13px; border-radius:10px; border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.7); }
.vc-nb-search input{ border:0; background:transparent; font:inherit; font-size:13.5px; outline:none; min-width:150px; }

.vc-nb{ position:relative; display:flex; border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.12); }
.vc-nb-binding{ flex:0 0 30px; display:flex; flex-direction:column; align-items:center; justify-content:space-around; padding:14px 0; background:linear-gradient(90deg,#e7e2d6,#f3efe6); border-right:1px solid rgba(0,0,0,.08); }
.vc-nb-binding span{ width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#c9c2b0); box-shadow:inset 0 -1px 2px rgba(0,0,0,.25); }
/* Chỉ 1 lề đỏ dọc — KHÔNG kẻ ngang cố định (kẻ ngang đè lên chữ). Phân dòng = border-bottom mỗi entry (nằm DƯỚI chữ). */
.vc-nb-page{ flex:1; min-width:0; position:relative; padding:8px 26px 26px 44px; background:#fffdf5;
  background-image:linear-gradient(90deg, transparent 30px, #e7b0a8 30px, #e7b0a8 32px, transparent 32px);
  background-repeat:no-repeat; }
.vc-nb-divider{ display:flex; align-items:center; gap:8px; margin:20px 0 8px; }
.vc-nb-sectoggle{ flex:1; min-width:0; display:flex; align-items:center; gap:9px; background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit; text-align:left; }
.vc-nb-chev{ flex:0 0 auto; font-size:16px; opacity:.55; transition:transform .2s; }
.vc-nb-sec:not(.is-collapsed) .vc-nb-chev{ transform:rotate(90deg); }
.vc-nb-sec-name{ font-size:12px; font-weight:800; letter-spacing:.5px; color:#8a6d2f; background:#fff6df; border:1px solid #e6d29a; padding:3px 12px; border-radius:99px; white-space:nowrap; }
.vc-nb-sec-count{ flex:0 0 auto; font-size:11.5px; font-weight:700; opacity:.55; }
.vc-nb-divline{ flex:1; height:1px; background:rgba(138,109,47,.25); }
.vc-nb-sec.is-collapsed .vc-nb-entry{ display:none !important; }
.vc-nb-sectoggle:hover .vc-nb-sec-name{ filter:brightness(.97); }
.vc-nb-secbtn{ flex:0 0 auto; width:26px; height:26px; border-radius:7px; border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.6); cursor:pointer; color:#8a6d2f; display:grid; place-items:center; font-size:13px; }
.vc-nb-secbtn:hover{ background:#fff; }
.vc-nb-secbtn-del{ color:#b64; }
.vc-nb-secbtn-del:hover{ background:rgba(200,60,60,.1); }
.vc-nb-entry{ padding:9px 6px 11px; border-bottom:1px dashed rgba(80,110,170,.35); }
.vc-nb-line1{ display:flex; align-items:center; gap:9px; }
.vc-nb-term{ font-size:19px; font-weight:800; color:#2b2a26; letter-spacing:.2px; }
.vc-nb-pos{ font-size:11px; font-weight:700; color:#7c3aed; background:rgba(124,58,237,.1); padding:2px 8px; border-radius:99px; }
.vc-nb-ipa{ font-size:13px; opacity:.6; font-style:italic; }
.vc-nb-spk{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid rgba(0,0,0,.12); background:#fff; cursor:pointer; display:grid; place-items:center; color:#7c3aed; }
.vc-nb-spk:hover{ background:#7c3aed; color:#fff; }
.vc-nb-del{ flex:0 0 auto; margin-left:auto; width:28px; height:28px; border-radius:8px; border:0; background:transparent; color:#b64; cursor:pointer; opacity:.5; }
.vc-nb-del:hover{ opacity:1; background:rgba(200,60,60,.1); }
.vc-nb-mean{ font-size:15px; font-weight:600; color:#3a3a34; margin:4px 0 0 39px; }
.vc-nb-ex{ font-size:13.5px; font-style:italic; opacity:.72; margin:3px 0 0 39px; }
.vc-nb-src{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:#c0392b; text-decoration:none; margin:6px 0 0 39px; opacity:.85; }
.vc-nb-src:hover{ text-decoration:underline; }
.vc-nb-empty-filter{ padding:30px; text-align:center; }
@media(max-width:640px){ .vc-nb-page{ padding-left:34px; } .vc-nb-mean,.vc-nb-ex,.vc-nb-src{ margin-left:0; } .vc-nb-binding{ flex-basis:20px; } }

/* Trắc nghiệm đồng nghĩa — giải thích sắc thái + ví dụ song ngữ */
.vc-syn-explain{ margin-top:14px; padding:12px 14px; border-radius:12px; background:rgba(124,58,237,.07); border:1px solid rgba(124,58,237,.18); text-align:left; animation:vcSynIn .25s ease; }
@keyframes vcSynIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.vc-syn-w{ font-size:15px; }
.vc-syn-nu{ font-size:13px; opacity:.8; margin-top:4px; }
.vc-syn-ex{ font-size:13px; font-style:italic; opacity:.75; margin-top:6px; }
.vc-syn-exvn{ font-style:normal; opacity:.9; }

/* Modal Thêm từ / Tạo sổ (Sổ tay) */
.vc-nb-add{ flex:0 0 auto; }
.vc-nb-modal{ position:fixed; inset:0; z-index:200; background:rgba(12,9,4,.5); display:flex; align-items:center; justify-content:center; padding:18px; }
.vc-nb-modal[hidden]{ display:none; }
.vc-nb-dialog{ width:min(440px,94vw); padding:20px 22px; }
.vc-nb-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.vc-nb-modal-head b{ font-size:18px; }
.vc-nb-field{ margin-bottom:12px; }
.vc-nb-field > label{ display:block; font-size:12.5px; font-weight:700; opacity:.7; margin-bottom:5px; }
.vc-nb-field input, .vc-nb-field select{ width:100%; box-sizing:border-box; padding:10px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.15); background:#fff; font:inherit; font-size:14px; outline:none; }
.vc-nb-field input:focus, .vc-nb-field select:focus{ border-color:#7c3aed; }
.ae-dark-mode .vc-nb-field input, .ae-dark-mode .vc-nb-field select{ background:rgba(255,255,255,.06); color:inherit; border-color:rgba(255,255,255,.18); }

/* ── vc-dd: dropdown custom theo theme (thay <select> hệ thống) + ô tìm sổ ── */
.vc-dd{ position:relative; }
.vc-dd-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.15); background:#fff; font:inherit; font-size:14px; font-weight:600; cursor:pointer; text-align:left; color:inherit; }
.vc-dd-lbl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vc-dd-btn .ti-chevron-down{ flex:0 0 auto; opacity:.55; transition:transform .15s; }
.vc-dd.is-open .vc-dd-btn{ border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.vc-dd.is-open .ti-chevron-down{ transform:rotate(180deg); }
.vc-dd-panel{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:90; background:#fff; border:1px solid rgba(0,0,0,.1); border-radius:12px; box-shadow:0 14px 34px rgba(20,15,40,.18); overflow:hidden; }
.vc-dd-search{ display:flex; align-items:center; gap:7px; padding:9px 12px; border-bottom:1px solid rgba(0,0,0,.08); }
.vc-dd-search i{ opacity:.5; font-size:14px; }
.vc-dd-search input{ border:0; outline:0; background:transparent; font:inherit; font-size:13.5px; width:100%; color:inherit; }
.vc-dd-list{ max-height:220px; overflow:auto; padding:6px; scrollbar-width:thin; }
.vc-dd-it{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:8px; padding:9px 10px; border:0; background:none; border-radius:8px; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; text-align:left; color:inherit; }
.vc-dd-it:hover{ background:rgba(124,58,237,.08); }
.vc-dd-it.is-sel{ background:rgba(124,58,237,.12); color:#5b21b6; }
.vc-dd-it .ti-check{ color:#7c3aed; flex:0 0 auto; }
.vc-dd-it.is-new{ margin-top:4px; padding-top:11px; border-top:1px dashed rgba(0,0,0,.14); border-radius:0 0 8px 8px; color:#7c3aed; }
.ae-dark-mode .vc-dd-btn, .ae-dark-mode .vc-dd-panel{ background:#262130; color:#ece8f4; border-color:rgba(255,255,255,.16); }
.ae-dark-mode .vc-dd-panel{ box-shadow:0 14px 34px rgba(0,0,0,.5); }
.ae-dark-mode .vc-dd-it:hover{ background:rgba(167,139,250,.14); }
.ae-dark-mode .vc-dd-it.is-sel{ background:rgba(167,139,250,.2); color:#d6c9ff; }
.ae-dark-mode .vc-dd-search{ border-bottom-color:rgba(255,255,255,.1); }

/* Tab Transcript đã lưu */
.vc-tr-list{ display:flex; flex-direction:column; gap:12px; }
.vc-tr-item{ padding:14px 16px; }
.vc-tr-row{ display:flex; gap:14px; align-items:flex-start; }
.vc-tr-thumb{ flex:0 0 128px; width:128px; aspect-ratio:16/9; border-radius:10px; background:#000 center/cover; display:grid; place-items:center; color:#fff; font-size:22px; text-decoration:none; }
.vc-tr-meta{ flex:1; min-width:0; }
.vc-tr-title{ font-weight:800; font-size:15px; line-height:1.3; }
.vc-tr-sub{ font-size:12.5px; opacity:.65; margin:4px 0 10px; }
.vc-tr-badge{ font-weight:700; color:#7c3aed; }
.vc-tr-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.vc-tr-actions .vc-btn{ padding:8px 12px; font-size:12.5px; }
.vc-tr-body{ margin-top:14px; padding-top:12px; border-top:1px dashed rgba(0,0,0,.12); max-height:420px; overflow-y:auto; }
.vc-tr-seg{ display:flex; gap:10px; padding:7px 2px; border-bottom:1px dashed rgba(0,0,0,.06); }
.vc-tr-t{ flex:0 0 auto; color:#6d28d9; font-size:11px; font-weight:700; padding-top:2px; }
.vc-tr-en{ font-size:14px; font-weight:600; }
.vc-tr-vi{ font-size:13px; opacity:.72; font-style:italic; margin-top:2px; }
@media(max-width:560px){ .vc-tr-thumb{ flex-basis:96px; width:96px; } }

/* Trò chơi — chọn bộ dạng THẺ (thay dropdown) */
/* ── Tìm bộ từ (view Trò chơi) ── */
.vc-gs-search{ display:flex; align-items:center; gap:9px; margin-top:12px; padding:9px 13px; border-radius:12px; border:2px solid rgba(0,0,0,.1); background:rgba(255,255,255,.8); }
.vc-gs-search:focus-within{ border-color:#4569d4; box-shadow:0 0 0 3px rgba(69,105,212,.15); }
.vc-gs-search .ti{ font-size:17px; opacity:.55; flex:0 0 auto; }
.vc-gs-search input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:14.5px; color:inherit; }
.vc-gs-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
/* input trong khung search KHÔNG được có ô riêng (dark-mode.css có rule global input{background:var(--dm-bg-input) !important}) */
.vc-gs-search input, html.ae-dark-mode .vc-gs-search input, html.theme-skeuo .vc-gs-search input, html.theme-skeuo.ae-dark-mode .vc-gs-search input{
  border:0 !important; background:transparent !important; background-color:transparent !important; box-shadow:none !important; border-radius:0 !important; padding:2px 0 !important; }
/* Flashcard "Đặt câu" — feedback chi tiết kiểu IELTS */
.vc-ai-fb .vc-ai-sec{ margin-top:12px; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; opacity:.75; }
.vc-ai-fb .vc-fw-formula{ margin-top:5px; }
.vc-ai-fb .vc-ai-dim{ font-size:12.5px; opacity:.72; margin-top:3px; }
.vc-ai-fb .vc-ai-strike{ opacity:.6; }
.vc-ai-fb .vc-ai-up{ color:#0e9f6e; }
html.ae-dark-mode .vc-ai-fb .vc-ai-up{ color:#5ee6b0; }
.vc-gs-search-count{ flex:0 0 auto; font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; background:rgba(69,105,212,.12); color:#4569d4; }
.vc-gs-empty{ margin-top:12px; padding:14px; border-radius:12px; background:rgba(0,0,0,.045); font-size:14px; text-align:center; }
.vc-gs-grp.is-hide, .vc-gs-card.is-hide, .vc-gs-tablbl.is-hide, .vc-gs-grouplbl.is-hide{ display:none !important; }
html.ae-dark-mode .vc-gs-search{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
html.ae-dark-mode .vc-gs-empty{ background:rgba(255,255,255,.06); }
.vc-gs-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:10px; margin-top:14px; max-height:340px; overflow-y:auto; padding:2px; }
.vc-gs-grp{ grid-column:1/-1; font-size:11.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; opacity:.55; margin:6px 0 -2px; }
.vc-gs-grp:first-child{ margin-top:0; }
/* Nhãn TAB (IELTS/HSK) + nhóm giáo trình trong picker Trò chơi */
.vc-gs-tablbl{ grid-column:1/-1; display:flex; align-items:center; gap:7px; font-size:14.5px; font-weight:800; margin:12px 0 2px; padding-bottom:5px; border-bottom:2px solid rgba(0,0,0,.1); }
.vc-gs-tablbl:first-child{ margin-top:0; }
.vc-gs-grouplbl{ grid-column:1/-1; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#7c3aed; opacity:.8; margin:6px 0 -2px; }
html.ae-dark-mode .vc-gs-tablbl{ border-bottom-color:rgba(255,255,255,.14); }
html.ae-dark-mode .vc-gs-grouplbl{ color:#a78bfa; }
html.theme-skeuo .vc-gs-tablbl{ border-bottom-color:rgba(200,150,60,.35); color:#4a3410; text-shadow:0 1px 0 rgba(255,250,235,.45); }
html.theme-skeuo .vc-gs-grouplbl{ color:#5c3f16; opacity:1; text-shadow:0 1px 0 rgba(255,250,235,.4); }
html.theme-skeuo.ae-dark-mode .vc-gs-tablbl{ color:#f0dcae; text-shadow:0 1px 1px rgba(0,0,0,.5); }
html.theme-skeuo.ae-dark-mode .vc-gs-grouplbl{ color:#e6c98f; text-shadow:0 1px 1px rgba(0,0,0,.5); }
.vc-gs-card{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:12px 13px; border-radius:13px; border:2px solid rgba(0,0,0,.1); background:rgba(255,255,255,.75); font:inherit; cursor:pointer; text-align:left; transition:.15s; }
.vc-gs-card:hover{ transform:translateY(-2px); border-color:rgba(124,58,237,.5); box-shadow:0 6px 14px rgba(0,0,0,.12); }
.vc-gs-card-ic{ font-size:19px; }
.vc-gs-card-name{ font-weight:800; font-size:13.5px; line-height:1.25; }
.vc-gs-card-count{ font-size:11.5px; opacity:.6; font-weight:700; }
.vc-gs-card.is-cur{ border-color:#7c3aed; background:rgba(124,58,237,.08); box-shadow:0 0 0 3px rgba(124,58,237,.15); }
.vc-gs-card.is-lock{ opacity:.55; cursor:pointer; filter:grayscale(.4); }
.vc-gs-card.is-lock:hover{ transform:none; border-color:#d6453c; box-shadow:none; }
/* DARK: card chọn bộ nền TRẮNG .75 + chữ bị global dark ép sáng → chữ trắng trên thẻ trắng = tàng hình.
   Tối hoá nền (cả flat + skeuo dark) cho chữ sáng đọc rõ. */
html.ae-dark-mode .vc-gs-card{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.14) !important; }
html.ae-dark-mode .vc-gs-card:hover{ border-color:rgba(167,139,250,.6) !important; box-shadow:0 6px 14px rgba(0,0,0,.4) !important; }
html.ae-dark-mode .vc-gs-card.is-cur{ background:rgba(124,58,237,.22) !important; border-color:#a78bfa !important; box-shadow:0 0 0 3px rgba(124,58,237,.3) !important; }
.vc-gs-card.is-rolling{ animation:vcGsRoll .22s ease; border-color:#f4b03c; }
@keyframes vcGsRoll{ 0%{ transform:scale(1) } 50%{ transform:scale(1.08) rotate(-2deg) } 100%{ transform:scale(1) } }

/* Transcript: từ click được (tra siêu tốc) */
.vc-tr-w{ cursor:pointer; border-radius:4px; padding:0 1px; }
.vc-tr-w:hover{ background:rgba(124,58,237,.18); }

/* ── SỔ TRANSCRIPT (tab riêng, kiểu sổ ghi chép da) ── */
.vc-trnb-page{ padding:22px 30px 26px 46px; }
.vc-trnb-head{ margin-bottom:8px; }
.vc-trnb-title{ font-family:Georgia,'Times New Roman',serif; font-size:22px; font-weight:800; color:#2b2a26; }
.vc-trnb-page .vc-tr-item{ background:none; box-shadow:none; padding:16px 4px; border-bottom:1px dashed rgba(80,110,170,.32); }
.vc-trnb-page .vc-tr-item:last-child{ border-bottom:0; }
.vc-trnb-page .vc-tr-row{ display:flex; gap:14px; align-items:flex-start; }
/* SKEUO DARK: giấy sổ đổi thành NÂU TỐI (walnut #2a2216) trong skeuo dark → chữ phải KEM SÁNG.
   (Trước ép chữ tối #2b2a26 = tối-trên-tối tàng hình — đó là bug anh thấy.) */
html.theme-skeuo.ae-dark-mode .vc-nb-page .vc-tr-title,
html.theme-skeuo.ae-dark-mode .vc-nb-page .vc-tr-en,
html.theme-skeuo.ae-dark-mode .vc-nb-page .vc-tr-t,
html.theme-skeuo.ae-dark-mode .vc-nb-page .vc-tr-w,
html.theme-skeuo.ae-dark-mode .vc-nb-page .vc-nb-term,
html.theme-skeuo.ae-dark-mode .vc-nb-page .vc-nb-mean,
html.theme-skeuo.ae-dark-mode .vc-nb-page .vc-nb-field{ color:#f1e6cd !important; }
html.theme-skeuo.ae-dark-mode .vc-nb-page .vc-tr-sub,
html.theme-skeuo.ae-dark-mode .vc-nb-page .vc-tr-vi,
html.theme-skeuo.ae-dark-mode .vc-nb-page .vc-lr-sub,
html.theme-skeuo.ae-dark-mode .vc-nb-page .vc-nb-ex,
html.theme-skeuo.ae-dark-mode .vc-nb-page .vc-nb-ipa,
html.theme-skeuo.ae-dark-mode .vc-nb-page .vc-nb-sec-count{ color:#c4b596 !important; }

/* FLAT: sổ transcript + sổ tay KHÔNG dùng giấy kem skeuo — panel PHẲNG, chữ theo theme
   (light=chữ tối/nền sáng, dark=chữ sáng/nền tối). Bỏ gáy + lề đỏ + nền kem. */
html:not(.theme-skeuo) .vc-nb{ background:rgba(255,255,255,.6); border:1px solid rgba(0,0,0,.08); box-shadow:0 6px 20px rgba(0,0,0,.08); }
html:not(.theme-skeuo).ae-dark-mode .vc-nb{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.1); box-shadow:0 6px 20px rgba(0,0,0,.3); }
html:not(.theme-skeuo) .vc-nb-binding{ display:none; }
html:not(.theme-skeuo) .vc-nb-page,
html:not(.theme-skeuo) .vc-trnb-page{ background:none; background-image:none; padding-left:24px; }
html:not(.theme-skeuo) .vc-nb-page .vc-nb-term,
html:not(.theme-skeuo) .vc-nb-page .vc-nb-mean,
html:not(.theme-skeuo) .vc-nb-page .vc-nb-ex,
html:not(.theme-skeuo) .vc-nb-page .vc-nb-field,
html:not(.theme-skeuo) .vc-nb-page .vc-trnb-title,
html:not(.theme-skeuo) .vc-nb-page .vc-tr-title,
html:not(.theme-skeuo) .vc-nb-page .vc-tr-sub,
html:not(.theme-skeuo) .vc-nb-page .vc-tr-en,
html:not(.theme-skeuo) .vc-nb-page .vc-tr-vi,
html:not(.theme-skeuo) .vc-nb-page .vc-tr-t,
html:not(.theme-skeuo) .vc-nb-page .vc-tr-w,
html:not(.theme-skeuo) .vc-nb-page .vc-lr-sub,
html:not(.theme-skeuo) .vc-nb-page .vc-nb-sec-count{ color:inherit; }
.vc-trnb-no{ flex:0 0 26px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:13px; background:rgba(124,58,237,.12); color:#6d28d9; margin-top:2px; }
.vc-trnb-page .vc-tr-thumb{ flex-basis:112px; width:112px; }
.vc-trnb-page .vc-tr-body{ margin-left:40px; }
@media(max-width:640px){ .vc-trnb-page{ padding-left:34px; } .vc-trnb-page .vc-tr-body{ margin-left:0; } .vc-trnb-no{ display:none; } }

/* Khung phụ đề video-đang-xem: modern premium (KHÁC sổ da của tab Sổ transcript) */
.vc-yt-player .vc-yt-frame{ box-shadow:0 10px 30px rgba(0,0,0,.28); }
.vc-yt-tx{ display:flex; flex-direction:column; }
.vc-yt-tx-head{ padding-bottom:12px; border-bottom:1px solid rgba(0,0,0,.08); margin-bottom:12px !important; }
.vc-yt-tx-title b{ font-size:15px; }
.vc-yt-tx-title b::before{ content:"💬 "; }

/* ── AI Đặt câu tự do (view-freewrite) ── theme-safe (inherit + accent, đọc rõ cả light/dark) */
.vc-fw-topic{ width:100%; padding:10px 14px; margin-bottom:10px; border-radius:10px; border:1.5px solid rgba(128,128,128,.32); background:transparent; color:inherit; font:inherit; font-size:14px; box-sizing:border-box; }
.vc-fw-topic:focus{ outline:none; border-color:#7c3aed; }
.vc-fw-result{ margin-top:14px; }
.vc-fw-scorebar{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
.vc-fw-score{ font-size:34px; font-weight:800; color:#7c3aed; line-height:1; } .vc-fw-score small{ font-size:16px; opacity:.6; font-weight:700; }
.vc-fw-band{ font-size:14px; opacity:.85; } .vc-fw-band b{ color:#7c3aed; }
.vc-fw-sec{ margin-top:12px; } .vc-fw-sec p{ margin:4px 0 0; line-height:1.55; }
.vc-fw-lbl{ font-size:12.5px; font-weight:800; letter-spacing:.3px; opacity:.72; text-transform:uppercase; }
.vc-fw-en{ font-style:italic; background:rgba(124,58,237,.10); border-left:3px solid #7c3aed; padding:8px 12px; border-radius:0 8px 8px 0; }
.vc-fw-up{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.vc-fw-up li{ font-size:14px; }
.vc-fw-up-from{ text-decoration:line-through; opacity:.6; }
.vc-fw-up-to{ font-weight:800; color:#16a34a; }
html.ae-dark-mode .vc-fw-up-to{ color:#4ade80; }
.vc-fw-up-note{ font-size:12.5px; opacity:.68; }

/* ── ⚙️ Cài đặt (modal bấm avatar) — theme-safe: inherit màu chữ, surface mờ theo skin ── */
.vc-pref-voices{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:9px; margin-bottom:14px; }
.vc-pref-voice{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 12px;
  border:1.5px solid rgba(128,128,128,.3); border-radius:12px; cursor:pointer; user-select:none; transition:.15s; background:rgba(128,128,128,.06); }
.vc-pref-voice:hover{ border-color:#7c3aed; }
.vc-pref-voice.is-on{ border-color:#7c3aed; background:rgba(124,58,237,.14); box-shadow:0 0 0 3px rgba(124,58,237,.15); }
.vc-pref-voice-name{ font-weight:700; font-size:13.5px; }
.vc-pref-voice-try{ flex:0 0 auto; width:30px; height:30px; border-radius:8px; border:1px solid rgba(128,128,128,.3);
  background:transparent; color:inherit; cursor:pointer; display:grid; place-items:center; font-size:15px; }
.vc-pref-voice-try:hover{ background:rgba(124,58,237,.15); border-color:#7c3aed; }
.vc-pref-voice-try.is-busy{ opacity:.45; pointer-events:none; }
.vc-pref-toggle{ display:flex; align-items:center; gap:11px; cursor:pointer; margin:2px 0 16px; font-size:14px; }
.vc-pref-toggle input{ display:none; }
.vc-pref-track{ flex:0 0 auto; width:44px; height:25px; border-radius:99px; background:rgba(128,128,128,.35); position:relative; transition:.2s; }
.vc-pref-track i{ position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.vc-pref-toggle input:checked + .vc-pref-track{ background:#7c3aed; }
.vc-pref-toggle input:checked + .vc-pref-track i{ left:22px; }
.vc-pref-status{ font-size:13px; font-weight:700; opacity:.85; }
.vc-topnav-right .vc-user{ border-radius:50%; } /* fix 10/07: thiếu scope làm pill user drawer thành OVAL */
.vc-user:hover .vc-av-img{ box-shadow:0 0 0 3px rgba(124,58,237,.45); border-radius:50%; }

/* ==================== MOBILE POLISH (fix 10/07) ==================== */
/* Avatar: khoá kích thước + bo tròn THEO THẺ IMG (không phụ thuộc class vc-av-img —
   filter get_avatar của theme từng đánh rơi class → ảnh custom hiện chữ nhật méo). */
.vc-user img{ width:34px !important; height:34px !important; border-radius:50% !important;
  object-fit:cover !important; flex:0 0 34px !important; max-width:none !important; }
.vc-side-foot .vc-user img{ width:40px !important; height:40px !important; flex-basis:40px !important; }
.vc-topnav-right .vc-user img{ width:36px !important; height:36px !important; flex-basis:36px !important; }

/* Topnav mobile: hàng nút gọn icon-only, cao đồng đều, search full-width hàng riêng. */
@media(max-width:768px){
  .vc-topnav-main{ flex-wrap:wrap; row-gap:8px; padding:10px 12px; gap:10px; }
  .vc-topnav-main .vc-search{ order:9; flex:1 1 100%; width:100%; }
  .vc-topnav-right{ margin-left:auto; gap:6px; align-items:center; flex-wrap:nowrap; }
  .vc-topnav-right .vc-bgbtn span,
  .vc-topnav-right .vc-skin-switch button span{ display:none; }
  .vc-topnav-right .vc-icon-btn,
  .vc-topnav-right .vc-bgbtn{ width:36px; height:36px; padding:0;
    display:inline-flex; align-items:center; justify-content:center; }
  .vc-topnav-right .vc-skin-switch{ height:36px; align-items:center; }
  .vc-topnav-right .vc-skin-switch button{ padding:6px 8px; }
  .vc-topnav-right .vc-user{ padding:2px; }
  .vc-topnav-right .vc-nanh-pill, .vc-topnav-right .vc-streak-pill{ height:36px; align-items:center; }
}

/* ==================== MOBILE POLISH v2 (fix 10/07, chỉnh theo anh) ==================== */
@media(max-width:768px){
  /* Pill user drawer: bo góc mềm (hết oval) — drawer GIỮ 1 cột kéo như cũ */
  .vc-side-foot .vc-user{ border-radius:14px !important; }
  /* Nút "Hình nền" icon-only vuông-bo khớp bộ icon-btn */
  .vc-topnav-right .vc-bgbtn{ border-radius:11px; }

  /* TOPNAV 1 HÀNG GỌN — hết "hàng nút tràn lơ lửng":
     hamburger + logo + [5 nút] cùng hàng 1 (ẩn chữ brand — tên có trong drawer),
     search full-width hàng 2. */
  .vc-topnav-main .vc-brand .vc-brand-text{ display:none; }
  .vc-topnav-main{ gap:8px; }
  .vc-topnav-right{ flex-wrap:nowrap; }
}

/* ==================== ĐẶT CÂU: song ngữ + ngữ pháp + từ nên học (10/07) ==================== */
.vc-fw-vn{ margin:4px 0 0; font-size:13.5px; font-style:italic; opacity:.78; }
.vc-fw-formula{ display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; font-weight:700;
  padding:6px 12px; border-radius:9px; background:rgba(124,58,237,.10); border:1px solid rgba(124,58,237,.25); margin:2px 0 6px; }
.vc-fw-tense{ font-size:12.5px; font-weight:700; opacity:.75; margin-bottom:4px; }
.vc-fw-vocab{ margin:6px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:8px; }
.vc-fw-vocab b{ font-size:15px; }
.vc-fw-ipa{ font-size:12.5px; opacity:.65; }
.vc-fw-vocab-ex{ font-size:13px; font-style:italic; opacity:.8; margin-top:2px; }
html.theme-skeuo .vc-fw-formula{ background:linear-gradient(180deg,#fdf6e3,#f0e6c8); border:1px solid #d8c89a; color:#6a4a12; box-shadow:inset 0 1px 0 #fff; }

/* ─── Bộ tiếng Trung (HSK) — flashcard: chữ Hán to rõ nét + pinyin nổi bật ───
   Class .vc-cjk do vocab-app.js gắn khi term chứa chữ Hán. Font ưu tiên bộ
   Hán có sẵn trên máy học sinh (Mac/Win/Android). */
.vc-card.vc-cjk .vc-word{
  font-size:clamp(68px,15vw,120px); letter-spacing:3px; line-height:1.05;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;
  justify-content:center; position:relative; width:100%;   /* chữ Hán CANH GIỮA thẻ */
}
/* Loa canh mép phải để không đẩy lệch chữ Hán */
.vc-card.vc-cjk .vc-word .vc-spk{ position:absolute; right:6px; top:50%; transform:translateY(-50%); }
.vc-card.vc-cjk .vc-front{ align-items:center; text-align:center; }   /* badge loại từ + pinyin + hint đều giữa */
.vc-card.vc-cjk .vc-ipa{           /* pinyin: to, không in nghiêng, màu nhấn, canh giữa */
  font-size:26px; font-style:normal !important; font-weight:600; letter-spacing:.5px; text-align:center; width:100%;
}
@media (max-width:640px){ .vc-card.vc-cjk .vc-word{ font-size:clamp(56px,20vw,96px); } }

/* ─── Tập viết chữ Hán (Hanzi Writer) ─────────────────────────────────────── */
.vc-hz-btn{ margin-left:6px; }
.vc-hz-modal{ position:fixed; inset:0; z-index:150; background:rgba(12,9,4,.55); display:flex; align-items:center; justify-content:center; padding:18px; }
.vc-hz-modal[hidden]{ display:none; }
.vc-hz-dialog{ width:min(680px,96vw); max-height:92vh; overflow:auto; border-radius:18px; padding:18px 20px; background:#fff !important; box-shadow:0 24px 60px -20px rgba(0,0,0,.55); color:#2f2a22; }
.vc-hz-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.vc-hz-head b{ font-size:20px; }
.vc-hz-modes{ display:flex; gap:8px; margin-bottom:14px; }
.vc-hz-mode{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:999px; border:1px solid #d9d3c4; background:#faf8f2; color:#4a4436; font-weight:600; cursor:pointer; }
.vc-hz-mode.is-on{ background:#b91d1c; border-color:#b91d1c; color:#fff; }
.vc-hz-grid{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.vc-hz-cell{ position:relative; }
.vc-hz-box{ position:relative; border:1.5px solid #e6dcbe; border-radius:12px; background:
  linear-gradient(#eee7d3,#eee7d3) center/100% 1px no-repeat,
  linear-gradient(#eee7d3,#eee7d3) center/1px 100% no-repeat,
  #fffdf6; box-shadow:inset 0 1px 0 #fff;
  touch-action:none; -ms-touch-action:none; user-select:none; -webkit-user-select:none; }
.vc-hz-box svg{ touch-action:none; }
.vc-hz-redo{ position:absolute; right:4px; bottom:4px; width:30px; height:30px; border-radius:8px; border:1px solid #d9d3c4; background:#fff; color:#7a715c; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.vc-hz-redo:hover{ background:#f4ecd8; color:#b91d1c; }
.vc-hz-tip{ margin:14px 2px 2px; font-size:13px; color:#8a8170; text-align:center; }
/* Dark mode */
.vc-hz-modal.is-dark .vc-hz-dialog{ background:#241e16; color:#ecdcb8; }
.vc-hz-modal.is-dark .vc-hz-box{ background:
  linear-gradient(rgba(255,236,200,.14),rgba(255,236,200,.14)) center/100% 1px no-repeat,
  linear-gradient(rgba(255,236,200,.14),rgba(255,236,200,.14)) center/1px 100% no-repeat,
  #1b160f; border-color:rgba(255,214,150,.18); }
.vc-hz-modal.is-dark .vc-hz-mode{ background:#2f2820; border-color:rgba(255,214,150,.2); color:#e6dcc0; }
.vc-hz-modal.is-dark .vc-hz-mode.is-on{ background:#b91d1c; border-color:#b91d1c; color:#fff; }
.vc-hz-modal.is-dark .vc-hz-redo{ background:#2f2820; border-color:rgba(255,214,150,.2); color:#cdbf9e; }

/* ─── Tập viết: ghim cạnh thẻ (inline) + toggle ─────────────────────────────── */
.vc-hz-splitrow{ display:flex; gap:22px; align-items:flex-start; justify-content:center; flex-wrap:wrap; }
.vc-hz-inline{ flex:0 0 auto; align-self:stretch; border:1px solid #e6dcbe; border-radius:16px; background:#fffdf6; padding:14px 16px; box-shadow:0 1px 1px rgba(0,0,0,.05); }
.vc-hz-inhead{ display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:15px; color:#5a5142; }
.vc-hz-inhead b{ display:flex; align-items:center; gap:6px; }
.vc-hz-inline .vc-hz-grid{ gap:12px; }
/* toggle "Ô tập viết cạnh thẻ" trong control bar */
.vc-hz-pin{ display:flex; width:fit-content; align-items:center; gap:6px; padding:7px 14px; margin:0 auto 14px; border-radius:999px; border:1px solid #d9d3c4; background:#faf8f2; color:#6a604c; font-weight:600; font-size:13px; cursor:pointer; }
.vc-hz-pin.is-on{ background:#b91d1c; border-color:#b91d1c; color:#fff; }
.vc-hz-pin[hidden]{ display:none; }
/* Dark */
html.ae-dark-mode .vc-hz-inline{ background:#1b160f; border-color:rgba(255,214,150,.18); }
html.ae-dark-mode .vc-hz-inhead{ color:#e6dcc0; }
html.ae-dark-mode .vc-hz-pin{ background:#2f2820; border-color:rgba(255,214,150,.2); color:#e6dcc0; }
html.ae-dark-mode .vc-hz-pin.is-on{ background:#b91d1c; border-color:#b91d1c; color:#fff; }
/* Mobile: ô xuống dưới thẻ, gọn */
@media (max-width:900px){ .vc-hz-inline{ width:100%; } }

/* Dark/skeuo cho top-tab Lộ trình */
html.ae-dark-mode .vc-rm-toptabs{ border-bottom-color:rgba(255,255,255,.12); }
html.ae-dark-mode:not(.theme-skeuo) .vc-rm-toptab.is-active{ border-bottom-color:#a78bfa; }
html.theme-skeuo .vc-rm-toptabs{ border-bottom-color:rgba(200,150,60,.3); }
html.theme-skeuo .vc-rm-toptab.is-active{ border-bottom-color:#c8963c; }

/* Nhãn tab/nhóm trong Bộ từ (wordsets) */
.vc-ws-tablbl{ display:flex; align-items:center; gap:8px; font-size:17px; font-weight:800; margin:22px 2px 10px; padding-bottom:7px; border-bottom:2px solid rgba(0,0,0,.1); }
.vc-ws-tablbl:first-child{ margin-top:4px; }
.vc-ws-grouplbl{ font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#7c3aed; opacity:.85; margin:14px 2px 6px; }
html.ae-dark-mode .vc-ws-tablbl{ border-bottom-color:rgba(255,255,255,.14); }
html.ae-dark-mode .vc-ws-grouplbl{ color:#a78bfa; }
html.theme-skeuo .vc-ws-tablbl{ border-bottom-color:rgba(200,150,60,.35); color:#4a3410; text-shadow:0 1px 0 rgba(255,250,235,.45); }
html.theme-skeuo .vc-ws-grouplbl{ color:#5c3f16; opacity:1; text-shadow:0 1px 0 rgba(255,250,235,.4); }
html.theme-skeuo.ae-dark-mode .vc-ws-tablbl{ color:#f0dcae; text-shadow:0 1px 1px rgba(0,0,0,.5); }
html.theme-skeuo.ae-dark-mode .vc-ws-grouplbl{ color:#e6c98f; text-shadow:0 1px 1px rgba(0,0,0,.5); }

/* ─── Tập viết — DARK MODE (inline + modal), thắng global dark-mode.css ─────── */
/* Ô viết nền tối để nét sáng (colors() dark) hiện rõ; áp cả inline lẫn modal */
html.ae-dark-mode .vc-hz-box{
  background:
    linear-gradient(rgba(255,236,200,.14),rgba(255,236,200,.14)) center/100% 1px no-repeat,
    linear-gradient(rgba(255,236,200,.14),rgba(255,236,200,.14)) center/1px 100% no-repeat,
    #1b160f !important;
  border-color:rgba(255,214,150,.2) !important;
}
/* Nút Xem nét / Luyện viết — tương phản đúng (không còn obscure) */
html.ae-dark-mode .vc-hz-mode{ background:#2f2820 !important; border:1px solid rgba(255,214,150,.24) !important; color:#ecdcb8 !important; }
html.ae-dark-mode .vc-hz-mode.is-on{ background:#b91d1c !important; border-color:#b91d1c !important; color:#fff !important; }
html.ae-dark-mode .vc-hz-inhead{ color:#ecdcb8 !important; }
html.ae-dark-mode .vc-hz-inline{ background:#241e16 !important; border-color:rgba(255,214,150,.16) !important; }
html.ae-dark-mode .vc-hz-tip{ color:#b8ad92 !important; }

/* FIX: ô Tập viết chỉ hiện ở mode Flashcard. Khi đổi sang Trắc nghiệm/Đồng nghĩa…,
   app set .vc-cardwrap[hidden]; inline là sibling trong splitrow nên phải ẩn theo. */
.vc-cardwrap[hidden] ~ .vc-hz-inline{ display:none !important; }

/* Nút 🔄 xem lại nét: CHỈ hiện ở "Xem nét"; ẩn ở "Luyện viết" (khỏi vướng khi vẽ) */
.vc-hz-grid.vc-hz-quiz .vc-hz-redo{ display:none !important; }

/* Nút 🔄 xem lại nét — DARK MODE (trước bị nền trắng, icon mờ → obscure) */
html.ae-dark-mode .vc-hz-redo{ background:#2f2820 !important; border:1px solid rgba(255,214,150,.28) !important; color:#f0e6d0 !important; }
html.ae-dark-mode .vc-hz-redo:hover{ background:#3a3226 !important; color:#ffd166 !important; }

/* ==================== GỘP FLASHCARD: sub-tab + search + Bộ của tôi ==================== */
/* Sub-tab: nằm là con ĐẦU của .vc-stage (align-items:center → tự căn giữa, CÙNG nền vân gỗ skeuo
   với nội dung → hết seam 2 dải gỗ). margin-bottom = cách page-head; stage padding-top = cách nav. */
.vc-subtabs{ display:inline-flex; gap:5px; padding:5px; margin:0 0 20px; border-radius:15px; background:rgba(124,58,237,.09); border:1px solid rgba(124,58,237,.14); }
.vc-subtab{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 20px; border-radius:11px; font-weight:700; font-size:14px; color:inherit; text-decoration:none; transition:.14s; white-space:nowrap; }
.vc-subtab:hover{ background:rgba(124,58,237,.1); }
.vc-subtab.is-active{ background:#7c3aed; color:#fff; box-shadow:0 2px 8px rgba(124,58,237,.35); }
.vc-subtab.is-active:hover{ background:#6d28d9; }
html.ae-dark-mode:not(.theme-skeuo) .vc-subtabs{ background:rgba(160,120,255,.12); border-color:rgba(160,120,255,.2); }
html.ae-dark-mode:not(.theme-skeuo) .vc-subtab{ color:#d9d3e8; }
html.ae-dark-mode:not(.theme-skeuo) .vc-subtab.is-active{ background:#7c3aed; color:#fff; }
html.theme-skeuo .vc-subtabs{ background:linear-gradient(180deg,#efe6d0,#e2d5b4); border:1px solid #cbb98f; box-shadow:inset 0 1px 2px rgba(120,90,40,.15); }
html.theme-skeuo .vc-subtab{ color:#5a4622; }
html.theme-skeuo .vc-subtab.is-active{ background:linear-gradient(180deg,#c8963c,#a9762a); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 6px rgba(120,80,20,.35); }
html.theme-skeuo.ae-dark-mode .vc-subtabs{ background:linear-gradient(180deg,#2a2118,#1f1810); border-color:rgba(255,214,150,.2); }
html.theme-skeuo.ae-dark-mode .vc-subtab{ color:#e8d7b0; }
html.theme-skeuo.ae-dark-mode .vc-subtab.is-active{ background:linear-gradient(180deg,#d3a24a,#a9762a); color:#2a1f08; }
@media (max-width:560px){ .vc-subtabs{ margin-bottom:14px; } .vc-subtab{ padding:9px 13px; font-size:13px; } .vc-subtab span{ display:none; } }

/* Search per-tab: nằm TRONG .vc-content nên tự khớp width khối nội dung (không full-bleed lệch). */
.vc-ws-searchbar{ display:flex; align-items:center; gap:12px; width:100%; margin:0 0 18px; }
.vc-ws-search{ flex:1 1 auto; }
.vc-ws-search input{ min-width:0; }
.vc-ws-search-count{ font-size:12.5px; font-weight:700; opacity:.7; white-space:nowrap; }
.vc-ws-noresult{ padding:16px 4px; opacity:.7; font-style:italic; }

.vc-myset-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.vc-myset-hint{ margin:0; font-size:13px; opacity:.72; }
.vc-myset-empty{ text-align:center; padding:34px 20px; }
.vc-myset-empty-ic{ font-size:44px; margin-bottom:6px; }
.vc-myset-empty h3{ margin:6px 0; }
.vc-myset-empty p{ opacity:.72; font-size:13.5px; margin:0 0 16px; }
.vc-myset-topbtns{ display:flex; gap:10px; flex-wrap:wrap; }

/* ── Trình tạo flashcard (Quizlet-style: ô từng thẻ + AI hint) ── */
.vc-cb-top{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.vc-cb-name{ flex:1 1 260px; min-width:0; font:inherit; font-size:17px; font-weight:700; padding:11px 15px; border-radius:12px; border:1px solid #d0c09a; background:rgba(255,255,255,.6); color:inherit; outline:none; }
.vc-cb-name:focus{ border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.18); }
.vc-cb-topbtns{ display:flex; gap:10px; flex-wrap:wrap; }
.vc-cb-hint{ font-size:12.5px; line-height:1.55; opacity:.72; margin:0 0 16px; }
.vc-cb-rows{ display:flex; flex-direction:column; gap:10px; }
.vc-cb-row{ display:flex; gap:10px; align-items:flex-start; background:rgba(124,58,237,.04); border:1px solid rgba(124,58,237,.12); border-radius:12px; padding:12px; }
.vc-cb-num{ flex:0 0 26px; text-align:center; font-weight:800; font-size:13px; opacity:.5; padding-top:10px; }
.vc-cb-fields{ flex:1 1 auto; min-width:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.vc-cb-fields input{ width:100%; box-sizing:border-box; font:inherit; font-size:14.5px; padding:10px 12px; border-radius:9px; border:1px solid #d0c09a; background:rgba(255,255,255,.7); color:inherit; outline:none; }
.vc-cb-fields input:focus{ border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.16); }
.vc-cb-term{ font-weight:700; }
.vc-cb-ex{ grid-column:1/-1; }
.vc-cb-extra{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; padding:2px 2px 0; }
.vc-cb-ipa{ font-size:13px; color:#1f6fcc; font-family:'Times New Roman',serif; }
.vc-cb-syn{ font-size:12.5px; color:#7c3aed; }
.vc-cb-exvn{ font-size:12.5px; opacity:.7; font-style:italic; flex-basis:100%; }
.vc-cb-del{ flex:0 0 auto; margin-top:6px; width:34px; height:34px; border-radius:9px; border:1px solid rgba(0,0,0,.1); background:rgba(255,255,255,.6); color:#c0392b; cursor:pointer; }
.vc-cb-del:hover{ background:#fdecea; border-color:#e0b4ae; }
.vc-cb-add{ margin-top:14px; }
.vc-cb-msg{ margin-top:14px; padding:11px 15px; border-radius:10px; font-weight:600; font-size:13.5px; }
.vc-cb-msg.is-ok{ background:rgba(31,157,87,.12); color:#1f7a47; }
.vc-cb-msg.is-bad{ background:rgba(214,54,56,.12); color:#c0392b; }
@media (max-width:640px){ .vc-cb-fields{ grid-template-columns:1fr; } }
/* Dark (flat) */
html.ae-dark-mode:not(.theme-skeuo) .vc-cb-name,
html.ae-dark-mode:not(.theme-skeuo) .vc-cb-fields input{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#e7e9f0; }
html.ae-dark-mode:not(.theme-skeuo) .vc-cb-row{ background:rgba(160,120,255,.07); border-color:rgba(160,120,255,.16); }
html.ae-dark-mode:not(.theme-skeuo) .vc-cb-del{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#ff9a8a; }
html.ae-dark-mode:not(.theme-skeuo) .vc-cb-ipa{ color:#7fbaff; }
html.ae-dark-mode:not(.theme-skeuo) .vc-cb-syn{ color:#c4b0ff; }
/* Skeuo */
html.theme-skeuo .vc-cb-name,
html.theme-skeuo .vc-cb-fields input{ background:linear-gradient(180deg,#fffdf7,#fbf4e3); border:1px solid #d8cba8; color:#3a2f1c; box-shadow:inset 0 1px 2px rgba(120,90,40,.12); }
html.theme-skeuo .vc-cb-row{ background:rgba(200,155,64,.08); border-color:#d8c89e; }
html.theme-skeuo.ae-dark-mode .vc-cb-name,
html.theme-skeuo.ae-dark-mode .vc-cb-fields input{ background:linear-gradient(180deg,#2f2820,#241e16); border-color:rgba(255,214,150,.2); color:#f0e6cf; box-shadow:none; }
html.theme-skeuo.ae-dark-mode .vc-cb-row{ background:rgba(255,214,150,.05); border-color:rgba(255,214,150,.16); }

/* ── DOCK GHI ÂM hội thoại từ vựng ────────────────────────────────────
   Dựng theo khuôn role-play bên Luyện Giao Tiếp (.cv-rec): cột sóng + đồng hồ,
   nút REC tròn to, dòng trạng thái. Trước đây chỗ này chỉ có nút mic 44px nhét
   cạnh ô gõ nên nhìn vẫn là khung chat gõ phím — cơ chế thu thì đã giống
   role-play từ lô trước, thiếu mỗi cái hình. */
.vc-rec{ display:flex; flex-direction:column; align-items:center; gap:9px;
  margin-top:16px; padding:16px 14px 14px; border-radius:16px;
  border:1px solid #e2d4b0; background:rgba(255,255,255,.42); }
.ae-dark-mode .vc-rec{ border-color:rgba(255,214,150,.16); background:rgba(255,255,255,.045); }

/* Sóng và đồng hồ XẾP DỌC, mỗi thứ tự căn giữa — nằm ngang hàng thì trục của
   cụm rơi vào khoảng giữa hai thứ, lệch khỏi trục nút REC ngay dưới (đồng hồ
   dạt phải, sóng dạt trái). Giữ đúng một trục cho cả ba. */
.vc-rec-meter{ display:flex; flex-direction:column; align-items:center; gap:5px; min-height:0; }
.vc-vu{ display:flex; align-items:flex-end; justify-content:center; gap:3px; height:30px; }
.vc-vu-b{ width:3px; height:6px; border-radius:2px; background:#c4b48f;
  transition:height .09s linear; will-change:height; }
.ae-dark-mode .vc-vu-b{ background:rgba(255,214,150,.42); }
/* Lúc chưa thu, dãy vạch 6px trông y như một hàng dấu chấm bỏ quên giữa khung —
   ẩn cả sóng lẫn đồng hồ, khi nào bấm nói mới hiện. */
.vc-rec:not(.is-rec) .vc-rec-meter{ display:none; }
.vc-rec-time{ display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline;
  font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; color:#7a6c4e; }
.vc-rec-time > :first-child{ grid-column:2; }
.vc-rec-max{ grid-column:3; justify-self:start; padding-left:5px; }
.ae-dark-mode .vc-rec-time{ color:#c9bda3; }
.vc-rec-max{ opacity:.6; font-weight:600; }

.vc-recbtn{ width:74px; height:74px; border-radius:50%; padding:0; cursor:pointer;
  display:grid; place-items:center; border:1px solid #d0c09a;
  background:linear-gradient(180deg,#fffdf7,#f3e9d2); color:#5b4a26;
  box-shadow:0 4px 14px rgba(120,90,30,.18), inset 0 1px 0 #fff;
  transition:transform .08s ease, box-shadow .16s ease, background .16s ease; }
.vc-recbtn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(120,90,30,.24), inset 0 1px 0 #fff; }
.vc-recbtn:active{ transform:translateY(1px); }
.vc-recbtn:disabled{ opacity:.55; cursor:default; transform:none; }
.vc-recbtn-in{ display:grid; place-items:center; font-size:28px; line-height:1; }
.vc-recbtn.rec{ background:radial-gradient(circle at 50% 32%, #f4564a, #c8231b);
  border-color:#a81b14; color:#fff;
  box-shadow:0 0 0 6px rgba(220,38,38,.16), 0 6px 18px rgba(160,20,20,.3); }
.ae-dark-mode .vc-recbtn{ background:linear-gradient(180deg,#3a352c,#2b2620);
  border-color:rgba(255,214,150,.22); color:#f0e6cf; }

.vc-rec-hint{ margin:0; font-size:13px; font-weight:600; color:#6d5f43; }
.ae-dark-mode .vc-rec-hint{ color:#d8cbb0; }
.vc-rec-kbd{ margin:0; font-size:11.5px; color:#94856a; }
.ae-dark-mode .vc-rec-kbd{ color:#9d917a; }
.vc-rec-kbd kbd{ font:inherit; font-weight:700; padding:1px 5px; border-radius:5px;
  border:1px solid #d9cba9; background:rgba(255,255,255,.6); }
.ae-dark-mode .vc-rec-kbd kbd{ border-color:rgba(255,214,150,.24); background:rgba(255,255,255,.07); }