/* =====================================================================
   TOEX Study Club — đồng bộ màu & linh vật cho các trang con (đặt CUỐI cùng trong <head>)
   Đổi biến màu riêng của từng trang theo vai trò, không thay đổi bố cục/nội dung.
   ===================================================================== */

/* ---------- biến màu riêng của từng file css cũ → bảng màu mới ---------- */
:root {
  /* practice.css */
  --moss: var(--toex-forest);
  --herb-50: var(--toex-cream); --herb-100: var(--toex-sage);
  --herb-500: var(--toex-moss); --herb-600: var(--toex-forest); --herb-700: var(--toex-forest);
  /* login.css / videos.css / stories.css */
  --moss-dark: var(--toex-forest);
  --orange: var(--toex-honey);
  --forest: var(--toex-forest);
  --blue1: var(--toex-forest); --blue2: var(--toex-forest);
  --yellow: var(--toex-peach);
}
.about-page { --moss2: var(--toex-moss); --cream2: var(--toex-cream); --paper: var(--toex-paper); --orange2: #F07A3C; }

/* linh vật dùng chung: không méo, không cắt tai */
.sc-head-mascot, .sc-intro-mascot, .sc-roadmap-mascot, .login-fox, .sc-cover img, .sc-side-cover img, .sc-lesson-crew img {
  display: inline-block; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
}

/* ---------- CÁC TRANG LUYỆN TẬP (practice-*.html, orientation.html) ---------- */
body:has(.p-nav), body:has([data-p-nav]) { background: var(--toex-cream); color: var(--toex-ink); }
.p-nav { background: rgba(255, 252, 244, .9); border-bottom-color: rgba(40, 42, 34, .12); }
.p-logo { color: var(--tx-forest, var(--toex-forest)); }
.p-logo-mark { background: var(--toex-forest); }
.p-pill { background: rgba(52, 75, 50, .08); color: var(--toex-ink); }
.p-pill:hover { background: rgba(52, 75, 50, .14); }
.p-chip-badge { background: var(--toex-sage); color: var(--tx-forest, var(--toex-forest)); border: 2px solid var(--toex-ink); }
.p-toast { background: var(--toex-forest); color: var(--toex-cream); }
.ls-glow, .ls-blob { display: none; } /* bỏ lớp phát sáng trang trí */
.sc-head-mascot { width: clamp(64px, 9vw, 120px); margin: 4px 0 6px; }
.ls-btn { border-radius: var(--toex-radius-pill); }
.ls-btn.dark, .ls-btn:hover { background: var(--toex-forest); color: var(--toex-cream); border-color: var(--toex-forest); }
/* trang định hướng: Rùa thay cuốn sổ minh hoạ */
.notebook.sc-intro-mascot { width: min(300px, 80%); justify-self: center; }

/* ---------- ĐĂNG NHẬP ---------- */
body:has(.login-fox) {
  background-color: var(--toex-cream);
  background-image: var(--toex-grid); background-size: var(--toex-grid-size);
}
.login-fox { width: 160px; margin-bottom: -18px; position: relative; z-index: 0; }
.card:has(.card-head) { border: var(--toex-border); border-radius: var(--toex-radius-panel); box-shadow: var(--toex-shadow); }
.card-head { background: var(--toex-forest); }
.brand-mark { background: var(--toex-honey); }
.brand-text small { color: var(--toex-peach); }
.tabs button[aria-selected="true"] { color: var(--tx-forest, var(--toex-forest)); }
.submit { background: var(--toex-forest); color: var(--toex-cream); border: var(--toex-border); box-shadow: var(--toex-shadow); border-radius: var(--toex-radius-pill); }
.submit:hover { background: var(--toex-forest); transform: translate(-1px, -1px); }
.google { border: var(--toex-border); box-shadow: 3px 3px 0 var(--toex-ink); }
.input { border-radius: var(--toex-radius-input); }
.input:focus-within { border-color: var(--toex-forest); color: var(--tx-forest, var(--toex-forest)); box-shadow: 0 0 0 3px rgba(233, 162, 59, .45); }
.msg { color: var(--toex-error); }
.forgot, .msg.info a, .back:hover { color: var(--tx-forest, var(--toex-forest)); }

/* ---------- GIỚI THIỆU (about) ---------- */
.sc-roadmap-mascot { display: block; width: clamp(80px, 10vw, 128px); margin: 0 auto 8px; }
.sc-lesson-crew { display: flex; justify-content: center; gap: clamp(8px, 2vw, 24px); margin: 8px 0 20px; }
.sc-lesson-crew img { width: clamp(72px, 10vw, 120px); }

/* ---------- BÀI VIẾT (blog) ---------- */
.blog-page { background: var(--toex-cream); }
.blog-nav { background: rgba(255, 252, 244, .9); }
.blog-logo { color: var(--tx-forest, var(--toex-forest)); }
.blog-logo em { color: var(--toex-moss); }
.blog-hero {
  color: var(--toex-ink); padding-bottom: 40px;
  background-color: var(--toex-peach); background-image: var(--toex-grid); background-size: var(--toex-grid-size);
  border-bottom: var(--toex-border);
}
.blog-hero-glow { display: none; }
.blog-hero h1 { color: var(--toex-ink); }
.blog-hero h1 span { color: var(--tx-forest, var(--toex-forest)); }
.blog-hero p { color: var(--toex-ink); }
.blog-badge { background: var(--toex-paper); color: var(--tx-forest, var(--toex-forest)); border: var(--toex-border); }
.sc-cover { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 3vw, 40px); margin-top: 24px; }
.sc-cover img { width: clamp(120px, 16vw, 190px); }

/* ---------- VIDEO ---------- */
body:has(.vid-layout) {
  background-color: var(--toex-cream);
  background-image: var(--toex-grid); background-size: var(--toex-grid-size);
}
.vid-side { border-color: var(--toex-ink); box-shadow: var(--toex-shadow); border-radius: var(--toex-radius-card); }
.sc-side-cover { display: flex; justify-content: center; align-items: flex-end; gap: 4px; margin: -6px 0 6px; padding-bottom: 10px; border-bottom: 2px dashed rgba(40, 42, 34, .2); }
.sc-side-cover img { width: 46%; max-width: 104px; }

/* ---------- CÂU CHUYỆN HỌC VIÊN ---------- */
.back-home { background: var(--toex-forest); color: var(--toex-cream); border: var(--toex-border); box-shadow: 3px 3px 0 var(--toex-ink); }

@media (max-width: 767px) {
  .sc-head-mascot { width: 72px; }
  .sc-side-cover img { max-width: 80px; }
}

/* trang Phát âm có nền xám riêng */
body:has(.lab-head) { background: var(--toex-cream); }

/* ---------- v3 retro tương phản cao: lộ trình 3 cấp dùng màu cầu vồng gốc (courses.json) ---------- */
.about-page .level-tab {
  color: var(--v3-ink, #121212); border: 3px solid var(--v3-ink, #121212) !important; border-radius: 16px 16px 6px 6px;
  box-shadow: 4px 4px 0 var(--v3-ink, #121212); opacity: 1;
}
.about-page .level-tab.active { box-shadow: 6px 6px 0 var(--v3-ink, #121212); transform: translateY(-3px); }
.about-page .level-tab small, .about-page .level-tab strong i, .about-page .level-tab strong em { opacity: 1; }
.about-page .level-panel { border: 3px solid var(--v3-ink, #121212); box-shadow: 5px 5px 0 var(--v3-ink, #121212); }
/* chữ từng dùng màu cấp (vàng/xanh nhạt trên nền sáng) → mực đen để đủ tương phản; màu cấp chuyển thành nền/viền */
.about-page .lp-top em, .about-page .io-box b, .about-page .io-box > span, .about-page .lp-price b,
.about-page .lp-classes b, .about-page .skill-box q { color: var(--v3-ink, #121212); }
.about-page .lp-classes a, .about-page .skill-box h4 i, .about-page .lp-toggle.open, .about-page .cd-cta {
  color: var(--v3-ink, #121212); border: 2px solid var(--v3-ink, #121212);
}
/* thẻ TEST (Luyện Listening): 4 màu cầu vồng, viền mực, số đề kiểu chữ hiển thị trắng viền đen */
.test-card { color: var(--v3-ink, #121212); border: 3px solid var(--v3-ink, #121212); box-shadow: 5px 5px 0 var(--v3-ink, #121212); }
.test-card:hover { box-shadow: 7px 7px 0 var(--v3-ink, #121212); }
.test-card h4 {
  font-family: "Fraunces", "Plus Jakarta Sans", serif; font-weight: 900; font-variation-settings: "SOFT" 100;
  color: #fff; -webkit-text-stroke: 2.5px var(--v3-ink, #121212); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--v3-ink, #121212);
}
.test-card .tc-top, .test-card .tc-stats { opacity: 1; font-weight: 700; }
.test-card .tc-stats i { background: rgba(18,18,18,.35); }
.test-card .tc-actions a { border: 2px solid var(--v3-ink, #121212); color: var(--v3-ink, #121212); }
.test-card .tc-top, .test-card .tc-top *, .test-card .tc-stats, .test-card .tc-stats * { color: var(--v3-ink, #121212) !important; }
/* Bài viết + Video: viền mực + bóng cứng đồng bộ hệ v3 */
.blog-page .post-card, .blog-page .post-featured, .post-grid > *, .vid-grid > *, .teacher-card, .vid-side, .notice {
  border: 3px solid var(--v3-ink, #121212) !important; box-shadow: 5px 5px 0 var(--v3-ink, #121212) !important;
}
.blog-page .post-filters button, .blog-filters button, .cat-btn { border: 2px solid var(--v3-ink, #121212) !important; color: var(--v3-ink, #121212); }
.sc-side-cover img:nth-child(2) { display: none; } /* sidebar video: giữ 1 linh vật */
.sc-side-cover img:first-child { width: clamp(90px, 9vw, 120px); }
.blog-tabs button { border: 2px solid var(--v3-ink, #121212) !important; color: var(--v3-ink, #121212); } .blog-tabs button.active { box-shadow: 3px 3px 0 var(--v3-ink, #121212); }
/* soát v3 vòng cuối: cấp đang chọn nổi hơn, khoảng cách tab đều, nút thẻ TEST đậm hơn */
.about-page .level-scroller { gap: 12px; }
.about-page .level-tab.active { outline: 3px solid var(--v3-ink, #121212); outline-offset: 3px; transform: translateY(-4px); }
.test-card .tc-actions a { background: #F7F0DF; box-shadow: 2px 2px 0 var(--v3-ink, #121212); }
/* soát toàn web: thẻ bài nổi bật cùng kiểu viền/bóng với thẻ bài thường */
.blog-page .post-featured { border-radius: 20px; overflow: hidden; }
.blog-page .post-featured:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--v3-ink, #121212) !important; }
.blog-page .post-featured .cover { border-right: 3px solid var(--v3-ink, #121212); }
@media (max-width: 700px) { .blog-page .post-featured .cover { border-right: 0; border-bottom: 3px solid var(--v3-ink, #121212); } }

/* =====================================================================
   v3 — RETRO TƯƠNG PHẢN CAO cho các trang phụ (cùng chuẩn trang chủ / Giới thiệu)
   ===================================================================== */
:root {
  --v3-olive: #728A46; --v3-red: #D56461; --v3-orange: #E58344; --v3-yellow: #EBC24F; --v3-green: #8AAB70;
  --v3-cta: #F07A3C; --v3-ink: #121212; --v3-cream: #F7F0DF; --v3-paper: #FFFDF8;
  --v3-red-t: #F6D4C4; --v3-green-t: #DCE8D0; --v3-yellow-t: #F8E7B5; --v3-orange-t: #F5D9BF;
  --v3-grid: linear-gradient(to right, rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.15) 1px, transparent 1px);
  --v3-display: "Fraunces", "Plus Jakarta Sans", serif;
}
/* tiêu đề hiển thị: Fraunces trắng viền mực + bóng cứng (trên nền olive) */
.v3-display-light {
  font-family: var(--v3-display) !important; font-weight: 900 !important; font-style: normal; font-variation-settings: "SOFT" 100;
  letter-spacing: -.01em !important; word-spacing: .08em; color: #fff !important;
  -webkit-text-stroke: 3px var(--v3-ink); paint-order: stroke fill; text-shadow: 4px 5px 0 var(--v3-ink);
}

/* ---------- Blog: đầu trang olive lưới ---------- */
.blog-page { background: var(--v3-cream); }
.blog-nav { background: rgba(247, 240, 223, .94); border-bottom: 3px solid var(--v3-ink); }
.blog-hero { background-color: var(--v3-olive); background-image: var(--v3-grid); background-size: 32px 32px; border-bottom: 3px solid var(--v3-ink); }
.blog-hero h1 { font-family: var(--v3-display); font-weight: 900; font-variation-settings: "SOFT" 100; letter-spacing: -.01em; word-spacing: .08em;
  color: #fff; -webkit-text-stroke: 3px var(--v3-ink); paint-order: stroke fill; text-shadow: 4px 5px 0 var(--v3-ink); font-size: clamp(40px, 6vw, 72px); }
.blog-hero h1 span { display: inline-block; color: #fff; background: var(--v3-yellow); border: 3px solid var(--v3-ink); border-radius: 12px; padding: 0 .25em .05em; transform: rotate(-2deg); box-shadow: 5px 5px 0 var(--v3-ink); text-shadow: 3px 4px 0 var(--v3-ink); }
.blog-hero p { display: inline-block; max-width: 640px; background: var(--v3-cream); border: 2px solid var(--v3-ink); border-radius: 14px; padding: 12px 18px; box-shadow: 4px 4px 0 var(--v3-ink); font-weight: 600; color: var(--v3-ink); }
.blog-badge { background: var(--v3-yellow); color: var(--v3-ink); border: 2px solid var(--v3-ink); box-shadow: 3px 3px 0 var(--v3-ink); font-weight: 800; }
.blog-page .post-filters button.active, .blog-tabs button.active, .cat-btn.active { background: var(--v3-ink) !important; color: #fff !important; }
.blog-search { border: 2px solid var(--v3-ink) !important; background: var(--v3-paper) !important; }
.blog-page .post-card h3, .blog-page .post-featured h2, .blog-page .post-featured h3 { color: var(--v3-ink); }
.blog-subscribe { background-color: var(--v3-olive); background-image: var(--v3-grid); background-size: 32px 32px; border-top: 3px solid var(--v3-ink); border-bottom: 3px solid var(--v3-ink); }
.blog-subscribe h2 { font-family: var(--v3-display); font-weight: 900; font-variation-settings: "SOFT" 100; word-spacing: .06em; color: #fff; -webkit-text-stroke: 2px var(--v3-ink); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--v3-ink); }
.blog-subscribe > p { color: #fff; font-weight: 600; text-shadow: 1px 1px 0 rgba(0,0,0,.35); }
.blog-subscribe > svg { color: #fff; }
.sub-form input { background: var(--v3-paper) !important; color: var(--v3-ink) !important; border: 3px solid var(--v3-ink) !important; }
.sub-form input::placeholder { color: var(--tx-muted, #6B5A44) !important; }
.sub-form button { background: var(--v3-cta); color: var(--v3-ink); border: 3px solid var(--v3-ink); box-shadow: 4px 4px 0 var(--v3-ink); font-weight: 800; }
.blog-nav .nav-pill { background: var(--v3-paper); border: 2px solid var(--v3-ink); color: var(--v3-ink); box-shadow: 2px 2px 0 var(--v3-ink); }
.blog-hero h1, .blog-subscribe h2 { text-wrap: balance; }

/* ---------- Trang luyện tập (body.v3): khung chung ---------- */
body.v3 { background: var(--v3-cream) !important; color: var(--v3-ink); }
body.v3 .p-nav { background: rgba(247, 240, 223, .94); border-bottom: 3px solid var(--v3-ink); box-shadow: none; }
body.v3 .p-pill, body.v3 .p-user { background: var(--v3-paper); color: var(--v3-ink); border: 2px solid var(--v3-ink); box-shadow: 2px 2px 0 var(--v3-ink); }
body.v3 .p-back { color: var(--v3-ink); }
body.v3 .p-chip-badge { background: var(--v3-yellow); color: var(--v3-ink); border: 2px solid var(--v3-ink); box-shadow: 3px 3px 0 var(--v3-ink); }
body.v3 h1 {
  font-family: var(--v3-display) !important; font-weight: 900 !important; font-variation-settings: "SOFT" 100;
  letter-spacing: -.01em !important; word-spacing: .06em; color: var(--v3-ink) !important; text-wrap: balance;
}
body.v3 h1 span:not([class]) { display: inline-block; color: var(--v3-ink) !important; background: var(--v3-yellow); border: 3px solid var(--v3-ink); border-radius: 12px; padding: 0 .22em .04em; transform: rotate(-2deg); box-shadow: 4px 4px 0 var(--v3-ink); -webkit-text-fill-color: currentColor; }
/* thẻ chung: kem viền mực + bóng cứng */
body.v3 .v3-card { background: var(--v3-paper) !important; border: 3px solid var(--v3-ink) !important; box-shadow: 5px 5px 0 var(--v3-ink) !important; }

/* ---------- Reading ---------- */
.v3-reading .rd-head h1 { font-size: clamp(36px, 4.4vw, 54px); }
.v3-reading .rd-head p { color: var(--v3-ink); font-weight: 600; }
.v3-reading .banner { background-color: var(--v3-olive); background-image: var(--v3-grid); background-size: 32px 32px; border: 3px solid var(--v3-ink); box-shadow: 6px 6px 0 var(--v3-ink); }
.v3-reading .banner h2 { font-family: var(--v3-display); font-weight: 900; font-variation-settings: "SOFT" 100; color: #fff; -webkit-text-stroke: 2px var(--v3-ink); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--v3-ink); }
.v3-reading .banner mark { background: var(--v3-red); border: 3px solid var(--v3-ink); box-shadow: 3px 3px 0 var(--v3-ink); }
.v3-reading .banner mark.g { background: var(--v3-green); }
.v3-reading .banner em { font-family: var(--v3-display); color: var(--v3-yellow); }
.v3-reading .banner p { color: var(--v3-ink); background: var(--v3-cream); border: 2px solid var(--v3-ink); border-radius: 12px; padding: 10px 14px; font-weight: 600; box-shadow: 3px 3px 0 var(--v3-ink); }
.v3-reading .banner-btn { background: var(--v3-cta); border: 3px solid var(--v3-ink); box-shadow: 4px 4px 0 var(--v3-ink); color: var(--v3-ink); }
.v3-reading .banner-btn i { border: 2px solid var(--v3-ink); color: var(--v3-ink); }
.v3-reading .s1, .v3-reading .s6 { background: var(--v3-red); } .v3-reading .s3 { background: var(--v3-yellow); }
.v3-reading .s2, .v3-reading .s5 { background: var(--v3-ink); } .v3-reading .s4 { background: var(--v3-cream); }
.v3-reading .shapes i { border: 3px solid var(--v3-ink); }
.v3-reading .stat, .v3-reading .filter, .v3-reading .tcard { background: var(--v3-paper); border: 3px solid var(--v3-ink); box-shadow: 4px 4px 0 var(--v3-ink); }
.v3-reading .tcard:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--v3-ink); }
.v3-reading .stat i { border: 2px solid var(--v3-ink); }
.v3-reading .stat small, .v3-reading .filter-top h3, .v3-reading .filter-body small, .v3-reading .filter-top button { color: var(--v3-ink); }
.v3-reading .qchips button, .v3-reading .ychips button, .v3-reading .src-tabs button, .v3-reading .pager button { border: 2px solid var(--v3-ink); color: var(--v3-ink); background: var(--v3-paper); }
.v3-reading .qchips button.on, .v3-reading .ychips button.active, .v3-reading .src-tabs button.active, .v3-reading .pager button.active { background: var(--v3-ink); color: #fff; border-color: var(--v3-ink); box-shadow: 3px 3px 0 var(--v3-olive); }
.v3-reading .sort, .v3-reading .search input { border: 2px solid var(--v3-ink); background: var(--v3-paper); color: var(--v3-ink); }
.v3-reading .ribbon { background: var(--v3-yellow); color: var(--v3-ink); border: 2px solid var(--v3-ink); border-top: 0; }
.v3-reading .cover { border: 2px solid var(--v3-ink); box-shadow: 3px 3px 0 var(--v3-ink); }
.v3-reading .tc-head h3 { font-family: var(--v3-display); font-weight: 900; color: var(--v3-ink); }
.v3-reading .band { background: var(--v3-yellow); color: var(--v3-ink); border: 2px solid var(--v3-ink); }
.v3-reading .real { background: var(--v3-green); color: var(--v3-ink); border: 2px solid var(--v3-ink); }
.v3-reading .parts li { background: var(--v3-cream); border: 2px solid var(--v3-ink); color: var(--v3-ink); }
.v3-reading .parts li b { background: var(--v3-yellow); color: var(--v3-ink); border: 2px solid var(--v3-ink); }
.v3-reading .parts li span:last-child { border: 2px solid var(--v3-ink); color: var(--v3-ink); }
.v3-reading .tc-btns a { border: 3px solid var(--v3-ink); box-shadow: 3px 3px 0 var(--v3-ink); color: var(--v3-ink); }
.v3-reading .tc-btns .light { background: var(--v3-paper); }
.v3-reading .tc-btns .dark { background: var(--v3-cta); }

/* ---------- Listening ---------- */
.v3-listening .ls-glow, .v3-listening .ls-blob { display: none; }
.v3-listening .ls-head h1 { font-size: clamp(40px, 4.6vw, 58px); }
.v3-listening .ls-head p, .v3-listening .sec-desc, .v3-listening .lib-more p { color: var(--v3-ink); font-weight: 600; }
.v3-listening .ls-btn { border: 3px solid var(--v3-ink); background: var(--v3-paper); color: var(--v3-ink); box-shadow: 4px 4px 0 var(--v3-ink); }
.v3-listening .ls-btn:hover { background: var(--v3-yellow); color: var(--v3-ink); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--v3-ink); }
.v3-listening .ls-btn .ic { background: var(--v3-cream); border: 2px solid var(--v3-ink); }
.v3-listening .ls-btn.dark { background: var(--v3-cta); color: var(--v3-ink); border-color: var(--v3-ink); box-shadow: 4px 4px 0 var(--v3-ink); }
.v3-listening .ls-btn.dark .ic { background: #fff; }
.v3-listening .sec-title h2, .v3-listening .book-head h3 { font-family: var(--v3-display); font-weight: 900; font-variation-settings: "SOFT" 100; letter-spacing: .01em; color: var(--v3-ink); text-transform: none; }
.v3-listening .sec-title h2 { font-size: clamp(24px, 2.4vw, 30px); }
.v3-listening .divider, .v3-listening .lib-bar, .v3-listening .lib-more { border-color: var(--v3-ink); border-width: 2px; }
.v3-listening .lib-tabs button { border: 2px solid var(--v3-ink); color: var(--v3-ink); background: var(--v3-paper); }
.v3-listening .lib-tabs button.active { background: var(--v3-ink); color: #fff; }
.v3-listening .lib-search input { border: 2px solid var(--v3-ink); background: var(--v3-paper); }
.v3-listening .lib-row { background: var(--v3-paper); border: 3px solid var(--v3-ink); box-shadow: 4px 4px 0 var(--v3-ink); }
.v3-listening .lib-row:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--v3-ink); }
.v3-listening .lib-cover { border: 2px solid var(--v3-ink); box-shadow: 2px 2px 0 var(--v3-ink); }
.v3-listening .lib-row h4 { color: var(--v3-ink); }
.v3-listening .lib-row p, .v3-listening .lib-row .go { color: var(--v3-ink); }
.v3-listening .lib-row .go { border: 2px solid var(--v3-ink); }
.v3-listening .lib-more a { border: 3px solid var(--v3-ink); color: var(--v3-ink); background: var(--v3-yellow); box-shadow: 4px 4px 0 var(--v3-ink); }

/* ---------- Grammar: giữ nền olive lưới, panel kem ---------- */
body.v3.v3-grammar { background-color: var(--v3-olive) !important; background-image: var(--v3-grid) !important; background-size: 32px 32px !important; }
.v3-grammar .panel { background: var(--v3-paper); border-color: var(--v3-ink); box-shadow: 6px 6px 0 var(--v3-ink); }
.v3-grammar .panel h1 { text-transform: none; font-size: clamp(34px, 4vw, 50px); }
.v3-grammar .panel h2 { font-family: var(--v3-display); font-weight: 900; font-variation-settings: "SOFT" 100; text-transform: none; font-size: clamp(24px, 2.6vw, 32px); color: var(--v3-ink); }
.v3-grammar .panel .kick { display: inline-block; color: var(--v3-ink); background: var(--v3-yellow); border: 2px solid var(--v3-ink); border-radius: 999px; padding: 3px 12px; letter-spacing: .18em; }
.v3-grammar .panel .lead, .v3-grammar .adv p, .v3-grammar .topic i, .v3-grammar .adv .go { color: var(--v3-ink); }
.v3-grammar .topic, .v3-grammar .adv a { background: var(--v3-cream); border-color: var(--v3-ink); color: var(--v3-ink); }
.v3-grammar .topic b { background: var(--v3-yellow); }
.v3-grammar .adv .lv { background: var(--v3-green); }
.v3-grammar .topics .topic:nth-child(4n+1) b { background: var(--v3-red); } .v3-grammar .topics .topic:nth-child(4n+2) b { background: var(--v3-orange); }
.v3-grammar .topics .topic:nth-child(4n+3) b { background: var(--v3-yellow); } .v3-grammar .topics .topic:nth-child(4n+4) b { background: var(--v3-green); }

/* ---------- Speaking (Pronunciation Lab): ô bento màu cầu vồng v3 ---------- */
.v3-speaking .lab-head p { color: var(--v3-ink); font-weight: 600; }
.v3-speaking .lab-stat { background: var(--v3-paper); border: 3px solid var(--v3-ink); box-shadow: 4px 4px 0 var(--v3-ink); }
.v3-speaking .lab-stat small { color: var(--v3-ink); }
.v3-speaking .tile { border: 3px solid var(--v3-ink); border-radius: 24px; box-shadow: 6px 6px 0 var(--v3-ink); }
.v3-speaking .tile:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--v3-ink); }
.v3-speaking .tile h3 { font-family: var(--v3-display); font-weight: 900; font-variation-settings: "SOFT" 100; text-transform: none; color: var(--v3-ink) !important; letter-spacing: -.005em; }
.v3-speaking .tile p, .v3-speaking .tile h4 { color: var(--v3-ink) !important; }
.v3-speaking .t-tall { background: var(--v3-green-t); }
.v3-speaking .t-pink { background: var(--v3-red-t); }
.v3-speaking .t-green { background-color: var(--v3-olive); background-image: var(--v3-grid); background-size: 28px 28px; }
.v3-speaking .t-green h3 { color: #fff !important; -webkit-text-stroke: 2px var(--v3-ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--v3-ink); }
.v3-speaking .t-green p { color: #fff !important; font-weight: 600; }
.v3-speaking .t-yellow { background: var(--v3-yellow); }
.v3-speaking .t-orange { background: var(--v3-orange-t); }
.v3-speaking .t-lime { background: var(--v3-green); }
.v3-speaking .t-full { background: var(--v3-yellow-t); }
.v3-speaking .t-lime .dark { background: var(--v3-ink); border: 0; }
.v3-speaking .t-lime .dark b { font-family: var(--v3-display); font-weight: 900; }
.v3-speaking .t-tall .nav, .v3-speaking .t-pink .card, .v3-speaking .yt, .v3-speaking .score, .v3-speaking .dub { border: 2px solid var(--v3-ink); box-shadow: 4px 4px 0 var(--v3-ink); background: var(--v3-paper); }
.v3-speaking .ipa-book i, .v3-speaking .cards i { border: 2px solid var(--v3-ink); box-shadow: 3px 3px 0 var(--v3-ink); }
.v3-speaking .ipa-book .b1 { background: var(--v3-olive); } .v3-speaking .ipa-book .b2 { background: var(--v3-yellow); color: var(--v3-ink); }
.v3-speaking .cards .c1 { background: var(--v3-red); } .v3-speaking .cards .c2 { background: var(--v3-yellow); }
.v3-speaking .t-tall .nav span, .v3-speaking .t-tall .nav span.on { color: var(--v3-ink); }
.v3-speaking .t-full .new { background: var(--v3-ink); }
.v3-speaking .t-pink .card button { background: var(--v3-cta); color: var(--v3-ink); border: 2px solid var(--v3-ink); }

/* ---------- Vocabulary ---------- */
.v3-vocabulary .strip { background: var(--v3-paper); border: 3px solid var(--v3-ink); box-shadow: 5px 5px 0 var(--v3-ink); }
.v3-vocabulary .strip div { border-left-width: 2px; border-left-color: var(--v3-ink); }
.v3-vocabulary .strip div:first-child { border-left: 0; }
.v3-vocabulary .strip span { color: var(--v3-ink); font-weight: 800; }
.v3-vocabulary .vc-text p { color: var(--v3-ink); }
.v3-vocabulary .vc-text em, .v3-vocabulary .tip i { color: var(--tx-muted, #5C4D3C); }
.v3-vocabulary .vc-text u { text-decoration: underline 3px var(--v3-yellow); text-decoration-skip-ink: none; }
.v3-vocabulary .tip { background: var(--v3-yellow-t); border: 3px solid var(--v3-ink); box-shadow: 4px 4px 0 var(--v3-ink); color: var(--v3-ink); }
.v3-vocabulary .tip::after { display: none; }
.v3-vocabulary .res { border-top: 3px dashed var(--v3-ink); }
.v3-vocabulary .res-top h2 { font-family: var(--v3-display); font-weight: 900; font-variation-settings: "SOFT" 100; color: var(--v3-ink); }
.v3-vocabulary .res-top p { color: var(--v3-ink); }
.v3-vocabulary .res-btns a, .v3-vocabulary .res-btns a.violet { background: var(--v3-paper); border: 2px solid var(--v3-ink); color: var(--v3-ink); box-shadow: 3px 3px 0 var(--v3-ink); }
.v3-vocabulary .rc-orange { background: var(--v3-orange); border: 3px solid var(--v3-ink); box-shadow: 6px 6px 0 var(--v3-ink); color: var(--v3-ink); }
.v3-vocabulary .rc-orange h3, .v3-vocabulary .rc-green h3 { font-family: var(--v3-display); font-weight: 900; font-variation-settings: "SOFT" 100; }
.v3-vocabulary .rc-orange p, .v3-vocabulary .rc-orange small { opacity: 1; font-weight: 600; }
.v3-vocabulary .rc-orange a, .v3-vocabulary .rc-green a { background: var(--v3-paper); color: var(--v3-ink); border: 2px solid var(--v3-ink); box-shadow: 3px 3px 0 var(--v3-ink); }
.v3-vocabulary .rc-orange .foot span { background: var(--v3-paper); border: 2px solid var(--v3-ink); }
.v3-vocabulary .rc-green { background-color: var(--v3-olive); background-image: var(--v3-grid); background-size: 32px 32px; border: 3px solid var(--v3-ink); box-shadow: 6px 6px 0 var(--v3-ink); }
.v3-vocabulary .rc-green h3 { color: #fff; -webkit-text-stroke: 2px var(--v3-ink); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--v3-ink); }
.v3-vocabulary .rc-green p { opacity: 1; font-weight: 600; }
.v3-vocabulary .rc-green small { background: var(--v3-yellow); color: var(--v3-ink); border: 2px solid var(--v3-ink); }
.v3-vocabulary .rc-green .bubble { border: 2px solid var(--v3-ink); }

/* ---------- Writing (Thư viện giải đề) ---------- */
.v3-writing .wr-head h1 { font-size: clamp(36px, 4.4vw, 54px); }
.v3-writing .wr-card { border: 3px solid var(--v3-ink); box-shadow: 6px 6px 0 var(--v3-ink); border-radius: 20px; }
.v3-writing .wr-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--v3-ink); }
.v3-writing .wr-card:nth-child(1) { background: var(--v3-green) !important; } .v3-writing .wr-card:nth-child(2) { background: var(--v3-orange) !important; }
.v3-writing .wr-card:nth-child(3) { background: var(--v3-yellow) !important; } .v3-writing .wr-card:nth-child(4) { background: var(--v3-red) !important; }
.v3-writing .wr-card .geo { opacity: .4; }
.v3-writing .wr-card h2 { font-family: var(--v3-display); font-weight: 900; font-variation-settings: "SOFT" 100; color: #fff !important; -webkit-text-stroke: 2.5px var(--v3-ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--v3-ink); }
.v3-writing .wr-card p { color: var(--v3-ink) !important; font-weight: 600; background: var(--v3-cream); border: 2px solid var(--v3-ink); border-radius: 12px; padding: 10px 14px; box-shadow: 3px 3px 0 var(--v3-ink); width: fit-content; max-width: 100%; }
.v3-writing .wr-card button { background: var(--v3-cta); color: var(--v3-ink); border: 3px solid var(--v3-ink); box-shadow: 4px 4px 0 var(--v3-ink); }

/* ---------- Orientation (Định hướng tự học) ---------- */
.v3-orientation .or-hero { background-color: var(--v3-olive); background-image: var(--v3-grid); background-size: 32px 32px; border-bottom: 3px solid var(--v3-ink); }
.v3-orientation .or-hero h1 { color: #fff !important; -webkit-text-stroke: 3px var(--v3-ink); paint-order: stroke fill; text-shadow: 5px 6px 0 var(--v3-ink); }
.v3-orientation .or-hero h1 .l2 { font-family: var(--v3-display); font-style: normal; color: var(--v3-yellow); }
.v3-orientation .or-hero .hl::before { display: none; }
.v3-orientation .or-hero .sub { color: var(--v3-ink); background: var(--v3-cream); border: 3px solid var(--v3-ink); border-radius: 14px; padding: 4px 16px; box-shadow: 4px 4px 0 var(--v3-ink); font-family: var(--v3-display); font-weight: 900; }
.v3-orientation .or-hero .sub::before { display: none; }
.v3-orientation .or-hero .love { color: #fff; font-weight: 700; text-shadow: 1px 1px 0 var(--v3-ink); }
.v3-orientation .or-hero .love span::before { display: none; }
.v3-orientation .or-marquee { background: var(--v3-ink); border-bottom: 3px solid var(--v3-ink); }
.v3-orientation .intro p { color: var(--v3-ink); }
.v3-orientation .intro u { text-decoration-color: var(--v3-yellow); text-decoration-thickness: 4px; text-decoration-skip-ink: none; }
.v3-orientation .old, .v3-orientation .club { background: var(--v3-paper); border: 3px solid var(--v3-ink); box-shadow: 6px 6px 0 var(--v3-ink); }
.v3-orientation .old .tag, .v3-orientation .club .tag { background: var(--v3-yellow); color: var(--v3-ink); border: 2px solid var(--v3-ink); }
.v3-orientation .old h2, .v3-orientation .time h2, .v3-orientation .club h2, .v3-orientation .stage h3 { font-family: var(--v3-display); font-weight: 900; font-variation-settings: "SOFT" 100; color: var(--v3-ink); }
.v3-orientation .old h2 em, .v3-orientation .time h2 em { font-family: var(--v3-display); font-style: normal; color: var(--v3-ink); }
.v3-orientation .old h2 em::before { background: var(--v3-yellow); }
.v3-orientation .old .video { border: 3px solid var(--v3-ink); }
.v3-orientation .time { background: var(--v3-paper); border: 3px solid var(--v3-ink); box-shadow: 6px 6px 0 var(--v3-ink); }
.v3-orientation .time-top > div > p, .v3-orientation .time .src, .v3-orientation .trow.head span, .v3-orientation .trow > i, .v3-orientation .cell.note { color: var(--v3-ink); }
.v3-orientation .thumb { background: var(--v3-yellow-t); border: 2px solid var(--v3-ink); box-shadow: 3px 3px 0 var(--v3-ink); }
.v3-orientation .thumb small { background: var(--v3-ink); }
.v3-orientation .thumb p { color: var(--v3-ink); } .v3-orientation .thumb p b { color: var(--v3-ink); }
.v3-orientation .cell { background: var(--v3-cream); border: 2px solid var(--v3-ink); color: var(--v3-ink); }
.v3-orientation .cell.lvl { background: var(--v3-yellow); color: var(--v3-ink); border-color: var(--v3-ink); }
.v3-orientation .stage { border: 3px solid var(--v3-ink); box-shadow: 5px 5px 0 var(--v3-ink); --s-c: var(--v3-ink); }
.v3-orientation .stage:nth-child(1) { background: var(--v3-red-t); } .v3-orientation .stage:nth-child(2) { background: var(--v3-yellow-t); }
.v3-orientation .stage:nth-child(3) { background: var(--v3-green-t); } .v3-orientation .stage:nth-child(4) { background: var(--v3-orange-t); }
.v3-orientation .stage:nth-child(1) li::before { background: var(--v3-red); } .v3-orientation .stage:nth-child(2) li::before { background: var(--v3-yellow); }
.v3-orientation .stage:nth-child(3) li::before { background: var(--v3-green); } .v3-orientation .stage:nth-child(4) li::before { background: var(--v3-orange); }
.v3-orientation .stage li::before { opacity: 1; border: 2px solid var(--v3-ink); }
.v3-orientation .stage li { color: var(--v3-ink); }
.v3-orientation .stage-top span { background: var(--v3-paper); border: 2px solid var(--v3-ink); }
.v3-orientation .stage a { background: var(--v3-paper); border: 2px solid var(--v3-ink); box-shadow: 3px 3px 0 var(--v3-ink); color: var(--v3-ink); font-weight: 800; }
.v3-orientation .club .lead, .v3-orientation .club .desc { color: var(--v3-ink); }
.v3-orientation .club .join { background: var(--v3-cta); color: var(--v3-ink); border: 3px solid var(--v3-ink); box-shadow: 4px 4px 0 var(--v3-ink); }
.v3-orientation .club-art .card { background-color: var(--v3-olive); background-image: var(--v3-grid); background-size: 28px 28px; border: 3px solid var(--v3-ink); box-shadow: 5px 5px 0 var(--v3-ink); }
.v3-orientation .club-art .card b { font-family: var(--v3-display); font-weight: 900; -webkit-text-stroke: 1.5px var(--v3-ink); paint-order: stroke fill; text-shadow: 2px 3px 0 var(--v3-ink); }
.v3-orientation .club-art .card a { background: var(--v3-yellow); color: var(--v3-ink); border: 2px solid var(--v3-ink); }
.v3-orientation .club-art .note { border: 2px solid var(--v3-ink); box-shadow: 4px 4px 0 var(--v3-ink); background: var(--v3-red-t); color: var(--v3-ink); }
.v3-orientation .or-foot { border-top: 3px solid var(--v3-ink); }
.v3-orientation .stage small { color: var(--v3-ink); }
.v3-orientation .or-hero .deco { display: none; }
.v3-orientation .old h2 em::before { display: none; }
.v3-orientation .old h2 em { background: var(--v3-yellow); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .18em; display: inline; }
@media (max-width: 700px) {
  .v3-reading .toolbar { flex-direction: column; align-items: stretch; }
  .v3-reading .ychips { flex: none; }
  .v3-reading .ychips button { white-space: nowrap; }
  .v3-reading .search, .v3-reading .search input { width: 100%; }
}

/* =====================================================================
   ĐỒNG BỘ TOÀN WEB: thang xám lạnh (slate) → xám ấm theo nền kem v3; xanh herb → olive v3
   ===================================================================== */
:root {
  --slate-50: #FBF7EE; --slate-100: #EFE6D3; --slate-200: #E0D3BA; --slate-400: #7A6A54;
  --slate-500: #6B5A44; --slate-600: #4E4234; --slate-700: #3D352B; --slate-800: #262019; --slate-900: var(--v3-ink, #121212);
  --herb-50: #F8E7B5; --herb-100: #E0D3BA; --herb-500: #728A46; --herb-600: #5F7438; --herb-700: #4A5A2E;
  --moss: #344B32;
}

/* ---------- Đăng nhập ---------- */
body.v3.v3-login { background-color: var(--v3-olive) !important; background-image: var(--v3-grid) !important; background-size: 32px 32px !important; }
.v3-login .card { background: var(--v3-paper); }
.v3-login .card-head { background: var(--v3-ink); }
.v3-login .card-body h1, .v3-login h1 { font-size: 26px; }
.v3-login .input { border: 2px solid var(--v3-ink); background: var(--v3-paper); color: var(--v3-ink); }
.v3-login .input:focus-within { border-color: var(--v3-ink); box-shadow: 3px 3px 0 var(--v3-ink); }
.v3-login .google { border: 3px solid var(--v3-ink) !important; box-shadow: 4px 4px 0 var(--v3-ink) !important; }
.v3-login .rec { background: var(--v3-yellow); color: var(--v3-ink); border: 2px solid var(--v3-ink); }
.v3-login .submit { background: var(--v3-cta); color: var(--v3-ink); border: 3px solid var(--v3-ink); box-shadow: 4px 4px 0 var(--v3-ink); font-weight: 800; }
.v3-login .submit:hover { background: var(--v3-cta); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--v3-ink); }
.v3-login .forgot { color: var(--v3-ink); text-decoration: underline 2px var(--v3-yellow); }
.v3-login .back { color: #fff; background: var(--v3-ink); padding: 8px 16px; border-radius: 999px; }
.v3-login .lang { background: var(--v3-paper); border: 2px solid var(--v3-ink); color: var(--v3-ink); box-shadow: 2px 2px 0 var(--v3-ink); }
.v3-login .tabs { background: rgba(255,255,255,.18); }

/* ---------- Video: khung giáo viên olive lưới, tiêu đề Fraunces ---------- */
.v3-videos .side-head h1 { font-size: 22px; line-height: 1.1; }
.v3-videos .side-logo, .v3-videos .side-nav button.active { background: var(--v3-ink); }
.v3-videos .side-promo { background: var(--v3-ink); }
.v3-videos .side-promo small { background: var(--v3-yellow); }
.v3-videos .teacher-card { background-color: var(--v3-olive) !important; background-image: var(--v3-grid); background-size: 32px 32px; }
.v3-videos .teacher-card h2 { font-family: var(--v3-display); font-weight: 900; font-variation-settings: "SOFT" 100; color: #fff; -webkit-text-stroke: 2px var(--v3-ink); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--v3-ink); word-spacing: .06em; }
.v3-videos .teacher-card ul { color: var(--v3-ink); background: var(--v3-cream); border: 2px solid var(--v3-ink); border-radius: 14px; padding: 12px 16px 12px 34px; box-shadow: 3px 3px 0 var(--v3-ink); font-weight: 600; }
.v3-videos .notice { background: var(--v3-orange-t) !important; }
.v3-videos .soc-btn { border: 2px solid var(--v3-ink); color: var(--v3-ink); box-shadow: 2px 2px 0 var(--v3-ink); }

/* ---------- Câu chuyện học viên: khối tiêu đề thành thẻ kem, nút v3 ---------- */
.v3-stories #titleblock { background: var(--v3-paper); border: 3px solid var(--v3-ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--v3-ink); padding: 18px 22px 20px; }
.v3-stories .title { font-family: var(--v3-display) !important; font-weight: 900 !important; color: var(--v3-ink) !important; }
.v3-stories .title .accent { color: var(--v3-olive); }
.v3-stories .eyebrow, .v3-stories .subtitle { color: var(--v3-ink); }
.v3-stories .eyebrow .rule { background: var(--v3-ink); }
.v3-stories .back-home { background: var(--v3-ink); border: 2px solid var(--v3-ink); box-shadow: 3px 3px 0 var(--v3-olive); }
.v3-stories .lang-pill { background: var(--v3-paper); border: 2px solid var(--v3-ink); box-shadow: 2px 2px 0 var(--v3-ink); }
.v3-stories #hint, .v3-stories #counter { color: var(--v3-ink); }
.v3-stories #hint, .v3-stories #counter { background: var(--v3-paper); border: 2px solid var(--v3-ink); box-shadow: 2px 2px 0 var(--v3-ink); }
.v3-listening .lib-cover { color: var(--v3-ink); }
/* biểu tượng tròn/vuông nhỏ: nền tint cầu vồng, nét mực */
.v3-reading .stat i { color: var(--v3-ink) !important; }
.v3-reading .stat:nth-child(1) i { background: var(--v3-yellow-t) !important; } .v3-reading .stat:nth-child(2) i { background: var(--v3-orange-t) !important; }
.v3-reading .stat:nth-child(3) i { background: var(--v3-green-t) !important; } .v3-reading .stat:nth-child(4) i { background: var(--v3-red-t) !important; }
.v3-grammar .adv .ic { color: var(--v3-ink) !important; }
.v3-grammar .adv a:nth-child(4n+1) .ic { background: var(--v3-red-t) !important; } .v3-grammar .adv a:nth-child(4n+2) .ic { background: var(--v3-orange-t) !important; }
.v3-grammar .adv a:nth-child(4n+3) .ic { background: var(--v3-yellow-t) !important; } .v3-grammar .adv a:nth-child(4n+4) .ic { background: var(--v3-green-t) !important; }
.v3-speaking .lab-stat .ico, .v3-speaking .lab-stat svg { color: var(--v3-ink) !important; }
/* điện thoại: nút lọc chủ đề blog xuống dòng thay vì trượt ngang khuất */
@media (max-width: 700px) { .blog-page .blog-tabs { flex-wrap: wrap; overflow: visible; gap: 8px; } .blog-page .blog-tabs button { padding: 8px 14px; } }
/* laptop nhỏ / máy tính bảng ngang: lưới đề nghe 2 cột để nút "Thi thật" không bị cắt */
@media (max-width: 1180px) { .v3-listening .test-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v3-listening .tc-actions a { min-width: 0; }
/* máy tính bảng: ô bento phát âm 2 cột cho thoáng */
@media (min-width: 768px) and (max-width: 1000px) {
  .v3-speaking .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; grid-auto-flow: dense; }
  .v3-speaking .tile { min-height: 280px; }
  .v3-speaking .t-tall { grid-row: auto; }
  .v3-speaking .t-wide, .v3-speaking .t-full { grid-column: 1 / -1; }
}
/* điện thoại: nút thẻ đề nghe không tràn khi chữ dài (bản EN "Exam Mode") */
@media (max-width: 420px) {
  .v3-listening .tc-actions a { padding: 10px 6px; }
  .v3-listening .tc-actions a > svg { display: none; }
  .v3-listening .tc-actions a span { min-width: 0; white-space: nowrap; font-size: 12px; }
}
@media (max-width: 639px) { .v3-listening .test-grid { grid-template-columns: 1fr; } } /* điện thoại: thẻ đề 1 cột (đè luật 2 cột của máy tính bảng) */

/* logo chính thức TOEX (assets/toex-logo.svg, 2026-10-07): ô kem viền mực để vàng + xanh của logo nổi rõ */
.logo-mark, .p-logo-mark, .brand-mark { background: #FFFDF8 !important; border: 2px solid var(--v3-ink, #121212) !important; box-shadow: 2px 2px 0 var(--v3-ink, #121212) !important; }
.logo-mark img, .p-logo-mark img { width: 32px; height: 32px; display: block; }
.brand-mark img { width: 26px; height: 26px; display: block; }
html[data-theme="dark"] :is(.logo-mark, .p-logo-mark, .brand-mark) { background: #FFFDF8 !important; }