/* =========================================================
   PHIÊN BẢN 8 — "Luật gia"
   Editorial hiện đại cho văn phòng luật sư với Be Vietnam Pro,
   tối ưu dấu tiếng Việt và giữ CTA có độ tương phản cao.

   Sáu palette tham khảo từ Beam Local và định hướng tối giản:
   01 Subdued & Professional  #F5F5EF #B69D74 #1F2839
   02 Cool Blues              #F4FBFD #60B3D1 #012641
   03 Times Changing          #F5F5F5 #1C2340 #50223C
   04 Minimalistic & Clean    #FAFAFC #D7D7D9 #161616
   05 Icy Blues               #F3EEED #567470 #0C2924
   06 Soft & Bold Blues       #BDD3DE #3F5866 #2A3A42
   ========================================================= */

html[data-v="8"] {
  --v8-soft: #f5f5ef;
  --v8-accent: #b69d74;
  --v8-deep: #1f2839;
  --v8-accent-ink: #1f2839;

  --bg: #ffffff;
  --bg-alt: var(--v8-soft);
  --surface: #ffffff;
  --ink: var(--v8-deep);
  --ink-2: color-mix(in srgb, var(--v8-deep) 82%, #ffffff);
  --muted: color-mix(in srgb, var(--v8-deep) 62%, #ffffff);
  --line: color-mix(in srgb, var(--v8-deep) 17%, #ffffff);
  --primary: var(--v8-deep);
  --primary-hover: color-mix(in srgb, var(--v8-deep) 86%, #000000);
  --on-primary: #ffffff;
  --accent: var(--v8-accent);
  --accent-soft: color-mix(in srgb, var(--v8-accent) 18%, #ffffff);
  --topbar-bg: var(--v8-deep);
  --topbar-ink: color-mix(in srgb, var(--v8-soft) 75%, transparent);
  --footer-bg: var(--v8-deep);
  --footer-ink: color-mix(in srgb, var(--v8-soft) 72%, transparent);
  --ph-bg: color-mix(in srgb, var(--v8-soft) 82%, var(--v8-deep));
  --ph-ink: color-mix(in srgb, var(--v8-deep) 52%, #ffffff);

  --f-head: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  --f-body: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  --head-weight: 750;
  --head-tracking: -.035em;
  --radius: 8px;
  --radius-lg: 14px;
  --btn-radius: 4px;
  --shadow: 0 18px 44px color-mix(in srgb, var(--v8-deep) 12%, transparent);
}

html[data-v="8"][data-palette="2"] {
  --v8-soft: #f4fbfd;
  --v8-accent: #60b3d1;
  --v8-deep: #012641;
  --v8-accent-ink: #012641;
}

html[data-v="8"][data-palette="3"] {
  --v8-soft: #f5f5f5;
  --v8-accent: #50223c;
  --v8-deep: #1c2340;
  --v8-accent-ink: #ffffff;
}

/* 04 Minimalistic & Clean — porcelain, silver grey and soft black. */
html[data-v="8"][data-palette="4"] {
  --v8-soft: #fafafc;
  --v8-accent: #d7d7d9;
  --v8-deep: #161616;
  --v8-accent-ink: #161616;
  --bg: #fafafc;
  --bg-alt: #f1f1f3;
  --surface: #ffffff;
  --ink: #161616;
  --ink-2: #4f4f52;
  --muted: #77777b;
  --line: #dedee1;
  --primary: #161616;
  --primary-hover: #303033;
  --accent: #8a8a8f;
  --accent-soft: #eeeeef;
  --topbar-bg: #fafafc;
  --topbar-ink: #5f5f63;
  --footer-bg: #f1f1f3;
  --footer-ink: #66666b;
  --ph-bg: #e8e8ea;
  --ph-ink: #77777b;
  --shadow: 0 12px 32px rgba(22, 22, 22, .08);
}

/* 05 Icy Blues — warm ice, muted teal and deep green-black. */
html[data-v="8"][data-palette="5"] {
  --v8-soft: #f3eeed;
  --v8-accent: #567470;
  --v8-deep: #0c2924;
  --v8-accent-ink: #ffffff;
  --bg: #fbf9f8;
  --bg-alt: #f3eeed;
  --surface: #ffffff;
  --ink: #0c2924;
  --ink-2: #405b57;
  --muted: #71817e;
  --line: #dce3e0;
  --primary: #0c2924;
  --primary-hover: #183d36;
  --on-primary: #ffffff;
  --accent: #567470;
  --accent-soft: #e7efed;
  --topbar-bg: #f3eeed;
  --topbar-ink: #405b57;
  --footer-bg: #eef3f1;
  --footer-ink: #61736e;
  --ph-bg: #dce8e5;
  --ph-ink: #61736e;
  --shadow: 0 12px 32px rgba(12,41,36,.08);
}

/* 06 Soft & Bold Blues — powder blue, slate and deep blue charcoal. */
html[data-v="8"][data-palette="6"] {
  --v8-soft: #bdd3de;
  --v8-accent: #3f5866;
  --v8-deep: #2a3a42;
  --v8-accent-ink: #ffffff;
  --bg: #ffffff;
  --bg-alt: #f4f7f8;
  --surface: #ffffff;
  --ink: #2a3a42;
  --ink-2: #4c606b;
  --muted: #71818a;
  --line: #d6e1e6;
  --primary: #2a3a42;
  --primary-hover: #3f5866;
  --on-primary: #ffffff;
  --accent: #3f5866;
  --accent-soft: #edf3f6;
  --topbar-bg: #f7f9fa;
  --topbar-ink: #4c606b;
  --footer-bg: #eef2f3;
  --footer-ink: #687a84;
  --ph-bg: #e3ecef;
  --ph-ink: #71818a;
  --shadow: 0 12px 32px rgba(42,58,66,.08);
}

html[data-v="8"] body { font-size: 16.5px; }
html[data-v="8"] h1,
html[data-v="8"] h2,
html[data-v="8"] h3,
html[data-v="8"] h4 { text-wrap: balance; }
html[data-v="8"] h1 { font-size: clamp(2.45rem, 4.7vw, 4.25rem); line-height: 1.08; }
html[data-v="8"] h2 { font-size: clamp(1.85rem, 2.9vw, 2.6rem); line-height: 1.18; }
html[data-v="8"] h3 { line-height: 1.28; }
html[data-v="8"] .btn { min-height: 46px; font-weight: 750; letter-spacing: -.01em; }
html[data-v="8"] .btn--primary { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
html[data-v="8"] .btn--primary:hover { transform: translateY(-1px); }

/* Header: tối giản, vạch màu tạo dấu ấn. */
html[data-v="8"] .topbar { border-bottom: 1px solid rgba(255, 255, 255, .1); }
html[data-v="8"] .header { background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); }
html[data-v="8"] .header__in { min-height: 82px; }
html[data-v="8"] .logo { gap: 13px; }
html[data-v="8"] .logo__mark {
  position: relative;
  width: 48px;
  height: 48px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: transparent;
  color: var(--primary);
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px color-mix(in srgb, var(--v8-accent) 48%, transparent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .04em;
}
html[data-v="8"] .logo__mark::before {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 10px;
  height: 1px;
  background: var(--accent);
}
html[data-v="8"] .logo__mark::after { display: none; }
html[data-v="8"] .logo__text { gap: 3px; }
html[data-v="8"] .logo__text b {
  color: var(--primary);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -.015em;
}
html[data-v="8"] .logo__text small { font-size: .73rem; letter-spacing: .005em; }
html[data-v="8"] .footer .logo__mark {
  color: #fff;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 4px var(--primary), inset 0 0 0 5px color-mix(in srgb, var(--v8-accent) 55%, transparent);
}
html[data-v="8"] .footer .logo__text b { color: #fff; }
html[data-v="8"] .nav__link { position: relative; border-radius: 0; font-weight: 650; }
html[data-v="8"] .nav__link:hover,
html[data-v="8"] .nav__item:hover > .nav__link { color: var(--primary); background: var(--bg-alt); }
html[data-v="8"] .nav__link.is-active { color: var(--primary); background: none; }
html[data-v="8"] .nav__link.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; background: var(--accent); }
html[data-v="8"] .dd { border-radius: 4px; border-top: 4px solid var(--accent); box-shadow: var(--shadow); }

/* Hero: editorial split với mảng màu hình học. */
html[data-v="8"] .hero { position: relative; overflow: hidden; background: var(--bg-alt); border: 0; }
html[data-v="8"] .hero::before { content: ""; position: absolute; width: min(42vw, 620px); aspect-ratio: 1; right: -8vw; top: -38%; border-radius: 50%; background: var(--accent); opacity: .18; }
html[data-v="8"] .hero::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 13px; background: var(--accent); }
html[data-v="8"] .hero__in { position: relative; z-index: 1; padding-top: clamp(58px, 7vw, 96px); padding-bottom: clamp(70px, 8vw, 112px); }
html[data-v="8"] .hero__kicker,
html[data-v="8"] .sh__label { display: inline-flex; align-items: center; gap: 10px; color: var(--primary); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
html[data-v="8"] .hero__kicker::before,
html[data-v="8"] .sh__label::before { content: ""; width: 28px; height: 2px; background: var(--accent); }
html[data-v="8"] .hero h1 { max-width: 760px; color: var(--primary); }
html[data-v="8"] .hero__lead { max-width: 680px; font-size: 1.12rem; }
html[data-v="8"] .hero__search { border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: 4px; box-shadow: 0 14px 36px color-mix(in srgb, var(--v8-deep) 10%, transparent); }
html[data-v="8"] .hero__popular a { text-decoration-color: var(--accent); }
html[data-v="8"] .hero__media { isolation: isolate; }
html[data-v="8"] .hero__media::before { content: ""; position: absolute; inset: 9% -7% -7% 16%; z-index: -1; border: 1px solid color-mix(in srgb, var(--v8-deep) 24%, transparent); }
html[data-v="8"] .hero__media .ph { border-radius: 2px; background: linear-gradient(145deg, var(--v8-deep), color-mix(in srgb, var(--v8-deep) 76%, var(--v8-accent))); color: color-mix(in srgb, var(--v8-soft) 72%, transparent); }
html[data-v="8"] .hero__card { right: -22px; bottom: 26px; left: auto; border-radius: 2px; border: 0; border-left: 5px solid var(--accent); background: var(--primary); color: #fff; box-shadow: var(--shadow); }
html[data-v="8"] .hero__card small { color: color-mix(in srgb, var(--v8-soft) 70%, transparent); }
html[data-v="8"] .hero__card .avatar { background: var(--accent); color: var(--v8-accent-ink); }

/* Dải xác thực. */
html[data-v="8"] .creds { background: var(--primary); color: #fff; border: 0; }
html[data-v="8"] .cred + .cred { border-left-color: rgba(255, 255, 255, .13); }
html[data-v="8"] .cred small { color: color-mix(in srgb, var(--v8-soft) 68%, transparent); }
html[data-v="8"] .cred__icon { border-radius: 2px; background: var(--accent); color: var(--v8-accent-ink); }

/* Cards và nội dung. */
html[data-v="8"] .section--alt { background: var(--bg-alt); }
html[data-v="8"] .area { position: relative; border-radius: 4px; border-color: var(--line); overflow: visible; transition: transform .22s, box-shadow .22s, border-color .22s; }
html[data-v="8"] .area::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 5px; background: var(--accent); }
html[data-v="8"] .area .ph { border-radius: 0; background: linear-gradient(145deg, var(--v8-soft), color-mix(in srgb, var(--v8-soft) 72%, var(--v8-accent))); }
html[data-v="8"] .area h3 { font-size: 1.28rem; letter-spacing: -.025em; }
html[data-v="8"] .area li { border-radius: 2px; background: var(--accent-soft); color: var(--primary); }
html[data-v="8"] .area:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: var(--shadow); }
html[data-v="8"] .post .ph,
html[data-v="8"] .course-card,
html[data-v="8"] .video-card .ph { border-radius: 4px; }
html[data-v="8"] .post .ph { border-bottom: 4px solid var(--accent); }
html[data-v="8"] .post h3 a:hover { color: var(--accent); }
html[data-v="8"] .badge,
html[data-v="8"] .chip { border-radius: 2px; }
html[data-v="8"] .badge { background: var(--accent-soft); color: var(--primary); }
html[data-v="8"] .chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
html[data-v="8"] .price { color: var(--primary); }

/* Quy trình và live dùng mảng tối để tạo nhịp chuyển. */
html[data-v="8"] .steps { gap: 0; background: var(--primary); padding: 34px 22px; }
html[data-v="8"] .step { position: relative; border: 0; border-radius: 0; background: transparent; padding: 8px 24px; }
html[data-v="8"] .step + .step { border-left: 1px solid rgba(255, 255, 255, .15); }
html[data-v="8"] .step__n { border-radius: 2px; background: var(--accent); color: var(--v8-accent-ink); font-family: var(--f-head); }
html[data-v="8"] .step h4 { color: #fff; }
html[data-v="8"] .step p { color: color-mix(in srgb, var(--v8-soft) 68%, transparent); }
html[data-v="8"] .live-feature { border: 0; border-radius: 4px; background: var(--primary); color: #fff; }
html[data-v="8"] .live-feature .ph { background: linear-gradient(145deg, color-mix(in srgb, var(--v8-deep) 82%, var(--v8-accent)), var(--v8-deep)); color: color-mix(in srgb, var(--v8-soft) 58%, transparent); }
html[data-v="8"] .live-feature h3 { color: #fff; }
html[data-v="8"] .live-feature .meta-list { color: color-mix(in srgb, var(--v8-soft) 78%, transparent); }
html[data-v="8"] .live-feature .meta-list .icon { color: var(--accent); }
html[data-v="8"] .live-feature .countdown div { border-radius: 2px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
html[data-v="8"] .live-feature .countdown b { color: #fff; }
html[data-v="8"] .live-feature .countdown small { color: color-mix(in srgb, var(--v8-soft) 62%, transparent); }
html[data-v="8"] .live-feature .btn--outline { color: #fff; border-color: rgba(255, 255, 255, .42); background: transparent; }

/* Trang con, form và CTA. */
html[data-v="8"] .page-head { position: relative; background: var(--bg-alt); border-bottom: 0; box-shadow: inset 0 -5px 0 var(--accent); }
html[data-v="8"] .page-head::after { content: ""; position: absolute; right: 7%; top: 22%; width: 110px; height: 110px; border-radius: 50%; border: 24px solid color-mix(in srgb, var(--v8-accent) 22%, transparent); }
html[data-v="8"] .page-head h1 { color: var(--primary); }
html[data-v="8"] .course-hero,
html[data-v="8"] .cta,
html[data-v="8"] .box--primary { background: var(--primary); border-color: var(--primary); border-radius: 4px; }
html[data-v="8"] .cta { position: relative; overflow: hidden; }
html[data-v="8"] .cta::after { content: ""; position: absolute; width: 190px; height: 190px; border-radius: 50%; right: -70px; top: -90px; background: var(--accent); opacity: .24; }
html[data-v="8"] .cta > * { position: relative; z-index: 1; }
html[data-v="8"] .form-card,
html[data-v="8"] .box,
html[data-v="8"] .contact-card,
html[data-v="8"] .price-card { border-radius: 4px; }
html[data-v="8"] .field input:focus,
html[data-v="8"] .field select:focus,
html[data-v="8"] .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
html[data-v="8"] .form-step__title span,
html[data-v="8"] .schedule__date { border-radius: 2px; background: var(--accent); color: var(--v8-accent-ink); }
html[data-v="8"] .acc__item.is-open { box-shadow: inset 4px 0 0 var(--accent); padding-left: 14px; }
html[data-v="8"] .tab.is-active,
html[data-v="8"] .toc a:hover,
html[data-v="8"] .toc a.is-active { border-color: var(--accent); color: var(--primary); }
html[data-v="8"] .progress i,
html[data-v="8"] .p-lesson.is-current { box-shadow: inset 3px 0 0 var(--accent); }
html[data-v="8"] .fab--chat { border-radius: 4px; }
html[data-v="8"] .chat { border-radius: 4px; }
html[data-v="8"] .chat__head { background: var(--primary); }
html[data-v="8"] .footer { border-top: 6px solid var(--accent); }

/* Bộ chọn các palette chỉ xuất hiện ở phiên bản 8. */
.palette-switcher { position: fixed; left: 20px; bottom: 20px; z-index: 96; display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 40px); padding: 6px; overflow-x: auto; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; background: rgba(20, 24, 32, .94); color: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .28); backdrop-filter: blur(12px); font: 600 12px/1.2 "Be Vietnam Pro", "Segoe UI", sans-serif; }
.palette-switcher__label { flex: none; padding: 0 8px; opacity: .62; text-transform: uppercase; letter-spacing: .08em; }
.palette-switcher button { display: flex; align-items: center; gap: 9px; flex: none; padding: 7px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; text-align: left; }
.palette-switcher button:hover { background: rgba(255, 255, 255, .09); }
.palette-switcher button.is-active { border-color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .12); }
.palette-switcher button b { display: block; font-size: .72rem; }
.palette-switcher button small { display: block; margin-top: 2px; opacity: .68; white-space: nowrap; font-size: .65rem; }
.palette-switcher__swatches { display: flex; width: 34px; height: 28px; overflow: hidden; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .26); }
.palette-switcher__swatches i { flex: 1; }
.palette-switcher .design-panel-toggle { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-color: rgba(255, 255, 255, .26); }
.design-panel-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
html.design-tools-collapsed .palette-switcher { bottom: 20px; width: auto; max-width: none; overflow: hidden; }
html.design-tools-collapsed .palette-switcher__label,
html.design-tools-collapsed .palette-switcher button[data-palette],
html.design-tools-collapsed .vswitch { display: none; }
html.design-tools-collapsed .design-panel-toggle svg { transform: rotate(180deg); }

@media (max-width: 1140px) {
  html[data-v="8"] .nav__link.is-active::after { display: none; }
}

@media (max-width: 960px) {
  html[data-v="8"] .hero__card { right: 12px; }
  html[data-v="8"] .steps { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  html[data-v="8"] .step:nth-child(3) { border-left: 0; }
}

@media (max-width: 640px) {
  html[data-v="8"] h1 { font-size: clamp(2.25rem, 10vw, 3.2rem); }
  html[data-v="8"] .hero::after { width: 7px; }
  html[data-v="8"] .steps { grid-template-columns: 1fr; padding: 26px 20px; }
  html[data-v="8"] .step,
  html[data-v="8"] .step + .step { border-left: 0; padding: 0; }
  html[data-v="8"] .page-head::after { display: none; }
  .palette-switcher { left: 12px; bottom: 14px; max-width: calc(100vw - 24px); }
  .palette-switcher__label,
  .palette-switcher button small { display: none; }
  .palette-switcher button { padding: 6px 8px; }
  html.design-tools-collapsed .palette-switcher { bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-v="8"] .area,
  html[data-v="8"] .btn { transform: none !important; }
}

/* Palette 04 overrides: flat minimalism, no dark AI-style bands or gradients. */
html[data-v="8"][data-palette="4"] .topbar { border-bottom: 1px solid #dedee1; }
html[data-v="8"][data-palette="4"] .header { background: #fff; border-bottom-color: #dedee1; }
html[data-v="8"][data-palette="4"] .logo__mark { width: 46px; height: 46px; border: 1px solid #161616; border-radius: 3px; background: #161616; color: #fff; box-shadow: none; font-family: "Be Vietnam Pro", "Segoe UI", sans-serif; }
html[data-v="8"][data-palette="4"] .logo__mark::before { display: none; }
html[data-v="8"][data-palette="4"] .logo__text b { color: #161616; font-family: "Be Vietnam Pro", "Segoe UI", sans-serif; }
html[data-v="8"][data-palette="4"] .nav__link.is-active { color: #161616; background: #eeeeef; box-shadow: inset 0 -2px 0 #161616; }
html[data-v="8"][data-palette="4"] .btn--primary,
html[data-v="8"][data-palette="4"] .header .btn--primary { color: #fff; background: #161616; border-color: #161616; box-shadow: none; }
html[data-v="8"][data-palette="4"] .btn--primary:hover { background: #303033; border-color: #303033; }

html[data-v="8"][data-palette="4"] .hero { background: #fafafc; }
html[data-v="8"][data-palette="4"] .hero::before { display: none; }
html[data-v="8"][data-palette="4"] .hero::after { width: 8px; background: #d7d7d9; }
html[data-v="8"][data-palette="4"] .hero__kicker { color: #161616; }
html[data-v="8"][data-palette="4"] .hero__kicker::before { background: #161616; }
html[data-v="8"][data-palette="4"] .hero__search { border-left-color: #161616; box-shadow: 0 10px 28px rgba(22,22,22,.06); }
html[data-v="8"][data-palette="4"] .hero__media::before { border-color: #d7d7d9; }
html[data-v="8"][data-palette="4"] .hero__media .ph { background: #d7d7d9; color: #66666b; }
html[data-v="8"][data-palette="4"] .hero__card { background: #161616; border-left-color: #d7d7d9; box-shadow: var(--shadow); }
html[data-v="8"][data-palette="4"] .hero__card .avatar { background: #d7d7d9; color: #161616; }

html[data-v="8"][data-palette="4"] .creds { color: #161616; background: #fafafc; border-top: 1px solid #dedee1; border-bottom: 1px solid #dedee1; }
html[data-v="8"][data-palette="4"] .cred + .cred { border-left-color: #dedee1; }
html[data-v="8"][data-palette="4"] .cred small { color: #77777b; }
html[data-v="8"][data-palette="4"] .cred__icon { background: #d7d7d9; color: #161616; }
html[data-v="8"][data-palette="4"] .section--alt,
html[data-v="8"][data-palette="4"] .page-head { background: #f1f1f3; }
html[data-v="8"][data-palette="4"] .area { border-color: #dedee1; box-shadow: none; }
html[data-v="8"][data-palette="4"] .area::before { height: 3px; background: #d7d7d9; }
html[data-v="8"][data-palette="4"] .area .ph { background: #e8e8ea; }
html[data-v="8"][data-palette="4"] .area li,
html[data-v="8"][data-palette="4"] .badge { color: #4f4f52; background: #eeeeef; border-color: #dedee1; }
html[data-v="8"][data-palette="4"] .area:hover { border-color: #99999e; box-shadow: 0 10px 26px rgba(22,22,22,.07); }
html[data-v="8"][data-palette="4"] .post h3 a:hover,
html[data-v="8"][data-palette="4"] .link { color: #161616; }

html[data-v="8"][data-palette="4"] .steps { background: #161616; }
html[data-v="8"][data-palette="4"] .step__n { background: #d7d7d9; color: #161616; }
html[data-v="8"][data-palette="4"] .live-feature { color: #161616; background: #eeeeef; border: 1px solid #dedee1; }
html[data-v="8"][data-palette="4"] .live-feature .ph { background: #d7d7d9; color: #66666b; }
html[data-v="8"][data-palette="4"] .live-feature h3 { color: #161616; }
html[data-v="8"][data-palette="4"] .live-feature .meta-list { color: #4f4f52; }
html[data-v="8"][data-palette="4"] .live-feature .meta-list .icon { color: #161616; }
html[data-v="8"][data-palette="4"] .live-feature .countdown div { background: #fafafc; border-color: #dedee1; }
html[data-v="8"][data-palette="4"] .live-feature .countdown b { color: #161616; }
html[data-v="8"][data-palette="4"] .live-feature .countdown small { color: #77777b; }
html[data-v="8"][data-palette="4"] .live-feature .btn--outline { color: #161616; border-color: #99999e; background: #fff; }
html[data-v="8"][data-palette="4"] .cta,
html[data-v="8"][data-palette="4"] .course-hero,
html[data-v="8"][data-palette="4"] .box--primary { color: #161616; background: #eeeeef; border-color: #dedee1; }
html[data-v="8"][data-palette="4"] .cta::after { display: none; }
html[data-v="8"][data-palette="4"] .course-hero h1,
html[data-v="8"][data-palette="4"] .course-hero p,
html[data-v="8"][data-palette="4"] .course-hero .crumbs { color: #161616; }
html[data-v="8"][data-palette="4"] .form-step__title span,
html[data-v="8"][data-palette="4"] .schedule__date { background: #161616; color: #fff; }
html[data-v="8"][data-palette="4"] .progress i { background: #161616; }
html[data-v="8"][data-palette="4"] .p-lesson.is-current { background: #eeeeef; box-shadow: inset 3px 0 0 #161616; }
html[data-v="8"][data-palette="4"] .chat__head,
html[data-v="8"][data-palette="4"] .fab--chat { background: #161616; }
html[data-v="8"][data-palette="4"] .footer { background: #f1f1f3; border-top: 3px solid #161616; }
html[data-v="8"][data-palette="4"] .footer .logo__mark { background: #161616; border-color: #161616; box-shadow: none; }
html[data-v="8"][data-palette="4"] .footer .logo__text b,
html[data-v="8"][data-palette="4"] .footer h5 { color: #161616; }
html[data-v="8"][data-palette="4"] .palette-switcher { background: #161616; border-color: #444448; }
html[data-v="8"][data-palette="4"] .cta .btn--ghost-light { color: #161616; border-color: #99999e; background: transparent; }
html[data-v="8"][data-palette="4"] .cta .btn--ghost-light:hover { background: #fff; border-color: #161616; }
html[data-v="8"][data-palette="4"] .topbar { border-bottom-color: #dedee1; }
html[data-v="8"][data-palette="4"] .topbar a:hover { color: #161616; }
html[data-v="8"][data-palette="4"] .footer { color: #66666b; }
html[data-v="8"][data-palette="4"] .footer__bottom { border-top-color: #dedee1; }
html[data-v="8"][data-palette="4"] .socials a { border-color: #cfcfd2; }
html[data-v="8"][data-palette="4"] .socials a:hover { border-color: #161616; }
html[data-v="8"][data-palette="4"] .subscribe input { border-color: #cfcfd2; background: #fff; color: #161616; }
html[data-v="8"][data-palette="4"] .subscribe input::placeholder { color: #77777b; }

/* Palettes 05–06: the same restrained editorial structure with their own tone. */
html[data-v="8"][data-palette="5"] .header,
html[data-v="8"][data-palette="6"] .header { background: #fff; }
html[data-v="8"][data-palette="5"] .logo__mark,
html[data-v="8"][data-palette="6"] .logo__mark { border-radius: 4px; background: var(--v8-deep); color: #fff; box-shadow: none; }
html[data-v="8"][data-palette="5"] .logo__mark::before,
html[data-v="8"][data-palette="6"] .logo__mark::before { display: none; }
html[data-v="8"][data-palette="5"] .logo__text b,
html[data-v="8"][data-palette="6"] .logo__text b { color: var(--v8-deep); font-family: "Be Vietnam Pro", "Segoe UI", sans-serif; }
html[data-v="8"][data-palette="5"] .nav__link.is-active,
html[data-v="8"][data-palette="6"] .nav__link.is-active { color: var(--v8-deep); background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--v8-accent); }
html[data-v="8"][data-palette="5"] .btn--primary,
html[data-v="8"][data-palette="5"] .header .btn--primary,
html[data-v="8"][data-palette="6"] .btn--primary,
html[data-v="8"][data-palette="6"] .header .btn--primary { background: var(--v8-deep); border-color: var(--v8-deep); box-shadow: none; }

html[data-v="8"][data-palette="5"] .hero,
html[data-v="8"][data-palette="6"] .hero { background: var(--v8-soft); }
html[data-v="8"][data-palette="5"] .hero::before,
html[data-v="8"][data-palette="6"] .hero::before { display: none; }
html[data-v="8"][data-palette="5"] .hero::after,
html[data-v="8"][data-palette="6"] .hero::after { width: 8px; background: var(--v8-accent); }
html[data-v="8"][data-palette="5"] .hero h1,
html[data-v="8"][data-palette="6"] .hero h1,
html[data-v="8"][data-palette="5"] .hero__kicker,
html[data-v="8"][data-palette="6"] .hero__kicker { color: var(--v8-deep); }
html[data-v="8"][data-palette="5"] .hero__search,
html[data-v="8"][data-palette="6"] .hero__search { border-left-color: var(--v8-accent); box-shadow: 0 10px 28px rgba(20,30,35,.06); }
html[data-v="8"][data-palette="5"] .hero__media::before,
html[data-v="8"][data-palette="6"] .hero__media::before { border-color: var(--v8-accent); opacity: .55; }
html[data-v="8"][data-palette="5"] .hero__media .ph,
html[data-v="8"][data-palette="6"] .hero__media .ph { background: var(--v8-accent); color: var(--v8-soft); }
html[data-v="8"][data-palette="5"] .hero__card,
html[data-v="8"][data-palette="6"] .hero__card { background: var(--v8-deep); border-left-color: var(--v8-accent); }

html[data-v="8"][data-palette="5"] .creds,
html[data-v="8"][data-palette="6"] .creds { color: var(--v8-deep); background: var(--v8-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
html[data-v="8"][data-palette="5"] .cred + .cred,
html[data-v="8"][data-palette="6"] .cred + .cred { border-left-color: var(--line); }
html[data-v="8"][data-palette="5"] .cred__icon,
html[data-v="8"][data-palette="6"] .cred__icon { background: var(--v8-accent); color: var(--v8-accent-ink); }
html[data-v="8"][data-palette="5"] .area .ph,
html[data-v="8"][data-palette="6"] .area .ph { background: var(--ph-bg); }
html[data-v="8"][data-palette="5"] .area::before,
html[data-v="8"][data-palette="6"] .area::before { height: 3px; background: var(--v8-accent); }
html[data-v="8"][data-palette="5"] .area li,
html[data-v="8"][data-palette="5"] .badge,
html[data-v="8"][data-palette="6"] .area li,
html[data-v="8"][data-palette="6"] .badge { color: var(--v8-deep); background: var(--accent-soft); border-color: var(--line); }
html[data-v="8"][data-palette="5"] .area:hover,
html[data-v="8"][data-palette="6"] .area:hover { border-color: var(--v8-accent); box-shadow: var(--shadow); }

html[data-v="8"][data-palette="5"] .steps,
html[data-v="8"][data-palette="6"] .steps { background: var(--v8-deep); }
html[data-v="8"][data-palette="5"] .step__n,
html[data-v="8"][data-palette="6"] .step__n { background: var(--v8-accent); color: var(--v8-accent-ink); }
html[data-v="8"][data-palette="5"] .live-feature,
html[data-v="8"][data-palette="6"] .live-feature { color: var(--v8-deep); background: var(--bg-alt); border: 1px solid var(--line); }
html[data-v="8"][data-palette="5"] .live-feature .ph,
html[data-v="8"][data-palette="6"] .live-feature .ph { background: var(--ph-bg); color: var(--ph-ink); }
html[data-v="8"][data-palette="5"] .live-feature h3,
html[data-v="8"][data-palette="6"] .live-feature h3 { color: var(--v8-deep); }
html[data-v="8"][data-palette="5"] .live-feature .meta-list,
html[data-v="8"][data-palette="6"] .live-feature .meta-list { color: var(--ink-2); }
html[data-v="8"][data-palette="5"] .live-feature .btn--outline,
html[data-v="8"][data-palette="6"] .live-feature .btn--outline { color: var(--v8-deep); border-color: var(--v8-accent); background: #fff; }
html[data-v="8"][data-palette="5"] .cta,
html[data-v="8"][data-palette="6"] .cta,
html[data-v="8"][data-palette="5"] .course-hero,
html[data-v="8"][data-palette="6"] .course-hero { color: var(--v8-deep); background: var(--bg-alt); border-color: var(--line); }
html[data-v="8"][data-palette="5"] .cta::after,
html[data-v="8"][data-palette="6"] .cta::after { display: none; }
html[data-v="8"][data-palette="5"] .chat__head,
html[data-v="8"][data-palette="5"] .fab--chat,
html[data-v="8"][data-palette="6"] .chat__head,
html[data-v="8"][data-palette="6"] .fab--chat { background: var(--v8-deep); }
html[data-v="8"][data-palette="5"] .footer,
html[data-v="8"][data-palette="6"] .footer { background: var(--footer-bg); border-top: 3px solid var(--v8-accent); }
html[data-v="8"][data-palette="5"] .footer .logo__mark,
html[data-v="8"][data-palette="6"] .footer .logo__mark { background: var(--v8-deep); border-color: var(--v8-deep); box-shadow: none; }

/* V4–V6 use an inset active treatment; remove the shared pseudo-underline so it
   cannot stack into a doubled or offset active state. */
html[data-v="8"][data-palette="4"] .nav__link.is-active::after,
html[data-v="8"][data-palette="5"] .nav__link.is-active::after,
html[data-v="8"][data-palette="6"] .nav__link.is-active::after { display: none; }

/* Palette 06 refinement: quiet editorial surfaces instead of large AI-like color blocks. */
html[data-v="8"][data-palette="6"] .topbar { border-bottom-color: #e2eaed; }
html[data-v="8"][data-palette="6"] .topbar a:hover { color: var(--v8-deep); }
html[data-v="8"][data-palette="6"] .hero {
  background: #f4f7f8;
  border-top: 1px solid #e2eaed;
}
html[data-v="8"][data-palette="6"] .hero::after { width: 5px; background: var(--v8-accent); }
html[data-v="8"][data-palette="6"] .hero__kicker::before,
html[data-v="8"][data-palette="6"] .sh__label::before { background: var(--v8-accent); }
html[data-v="8"][data-palette="6"] .hero__lead { color: #526873; }
html[data-v="8"][data-palette="6"] .hero__search { background: #fff; box-shadow: 0 8px 22px rgba(42,58,66,.07); }
html[data-v="8"][data-palette="6"] .hero__search .btn--primary,
html[data-v="8"][data-palette="6"] .hero__actions .btn--primary { background: var(--v8-accent); border-color: var(--v8-accent); }
html[data-v="8"][data-palette="6"] .hero__search .btn--primary:hover,
html[data-v="8"][data-palette="6"] .hero__actions .btn--primary:hover { background: var(--v8-deep); border-color: var(--v8-deep); }
html[data-v="8"][data-palette="6"] .hero__actions .btn--outline { color: var(--v8-deep); border-color: #aebfc7; background: #fff; }
html[data-v="8"][data-palette="6"] .hero__media .ph {
  background: #dce8ed;
  color: var(--v8-accent);
  border: 1px solid #b8cbd3;
}
html[data-v="8"][data-palette="6"] .hero__media::before { border-color: #9fb5bf; opacity: .7; }
html[data-v="8"][data-palette="6"] .hero__card {
  background: #fff;
  color: var(--v8-deep);
  border: 1px solid #d6e1e6;
  border-left: 4px solid var(--v8-accent);
  box-shadow: 0 12px 24px rgba(42,58,66,.12);
}
html[data-v="8"][data-palette="6"] .hero__card b { color: var(--v8-deep); }
html[data-v="8"][data-palette="6"] .hero__card small { color: var(--muted); }
html[data-v="8"][data-palette="6"] .hero__card .avatar { background: var(--v8-soft); color: var(--v8-deep); }

html[data-v="8"][data-palette="6"] .creds {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
html[data-v="8"][data-palette="6"] .cred small { color: var(--muted); }
html[data-v="8"][data-palette="6"] .cred__icon { background: var(--v8-soft); color: var(--v8-deep); }
html[data-v="8"][data-palette="6"] .steps {
  background: #edf2f4;
  border: 1px solid var(--line);
  color: var(--v8-deep);
}
html[data-v="8"][data-palette="6"] .step + .step { border-left-color: #cbd9de; }
html[data-v="8"][data-palette="6"] .step__n { background: var(--v8-accent); color: #fff; }
html[data-v="8"][data-palette="6"] .step h4 { color: var(--v8-deep); }
html[data-v="8"][data-palette="6"] .step p { color: var(--ink-2); }

html[data-v="8"][data-palette="6"] .area .ph,
html[data-v="8"][data-palette="6"] .live-feature .ph { background: #e3ecef; color: var(--ph-ink); }
html[data-v="8"][data-palette="6"] .section--alt { background: #f4f7f8; }
html[data-v="8"][data-palette="6"] .cta .btn--light {
  background: #fff;
  color: var(--v8-deep);
  border-color: #fff;
}
html[data-v="8"][data-palette="6"] .cta .btn--ghost-light {
  background: transparent;
  color: var(--v8-deep);
  border-color: #9fb5bf;
}
html[data-v="8"][data-palette="6"] .cta .btn--ghost-light:hover {
  background: #e8f0f2;
  border-color: var(--v8-accent);
}

/* Light course hero needs dark editorial type, never white-on-pale text. */
html[data-v="8"][data-palette="6"] .course-hero {
  color: var(--v8-deep);
  background: #edf3f5;
  border-color: var(--line);
}
html[data-v="8"][data-palette="6"] .course-hero h1 { color: var(--v8-deep); }
html[data-v="8"][data-palette="6"] .course-hero p { color: var(--ink-2); }
html[data-v="8"][data-palette="6"] .course-hero .crumbs { color: var(--muted); }
html[data-v="8"][data-palette="6"] .course-hero__meta { color: var(--ink-2); }

/* The footer is light in this palette, so its typography and dividers must be light-theme values too. */
html[data-v="8"][data-palette="6"] .footer {
  background: #eef2f3;
  color: #536871;
  border-top-color: var(--v8-accent);
}
html[data-v="8"][data-palette="6"] .footer .logo__text b,
html[data-v="8"][data-palette="6"] .footer h5 { color: var(--v8-deep); }
html[data-v="8"][data-palette="6"] .footer .logo__text small { color: #71818a; }
html[data-v="8"][data-palette="6"] .footer a:hover { color: var(--v8-deep); }
html[data-v="8"][data-palette="6"] .footer__bottom { border-top-color: #d1dde1; }
html[data-v="8"][data-palette="6"] .socials a { border-color: #c7d5da; }
html[data-v="8"][data-palette="6"] .socials a:hover { border-color: var(--v8-accent); }
html[data-v="8"][data-palette="6"] .subscribe input {
  border-color: #c7d5da;
  background: #fff;
  color: var(--v8-deep);
}
html[data-v="8"][data-palette="6"] .subscribe input::placeholder { color: var(--muted); }

/* Keep status badges calm against the muted blue system. */
html[data-v="8"][data-palette="6"] .badge--live { background: #f3e7e5; color: #7a4b48; }

/* Palette 05 uses light editorial surfaces as well; keep every text/button state readable. */
html[data-v="8"][data-palette="5"] .topbar { border-bottom-color: #dce3e0; }
html[data-v="8"][data-palette="5"] .topbar a:hover { color: var(--v8-deep); }
html[data-v="8"][data-palette="5"] .cta .btn--light {
  background: #fff;
  color: var(--v8-deep);
  border-color: #fff;
}
html[data-v="8"][data-palette="5"] .cta .btn--ghost-light {
  background: transparent;
  color: var(--v8-deep);
  border-color: #9ab2ad;
}
html[data-v="8"][data-palette="5"] .cta .btn--ghost-light:hover {
  background: #e7efed;
  border-color: var(--v8-accent);
}
html[data-v="8"][data-palette="5"] .course-hero {
  color: var(--v8-deep);
  background: #f3eeed;
  border-color: var(--line);
}
html[data-v="8"][data-palette="5"] .course-hero h1 { color: var(--v8-deep); }
html[data-v="8"][data-palette="5"] .course-hero p { color: var(--ink-2); }
html[data-v="8"][data-palette="5"] .course-hero .crumbs { color: var(--muted); }
html[data-v="8"][data-palette="5"] .course-hero__meta { color: var(--ink-2); }
html[data-v="8"][data-palette="5"] .footer {
  background: #eef3f1;
  color: #61736e;
  border-top-color: var(--v8-accent);
}
html[data-v="8"][data-palette="5"] .footer .logo__text b,
html[data-v="8"][data-palette="5"] .footer h5 { color: var(--v8-deep); }
html[data-v="8"][data-palette="5"] .footer .logo__text small { color: #71817e; }
html[data-v="8"][data-palette="5"] .footer a:hover { color: var(--v8-deep); }
html[data-v="8"][data-palette="5"] .footer__bottom { border-top-color: #d4dfdc; }
html[data-v="8"][data-palette="5"] .socials a { border-color: #cbd9d5; }
html[data-v="8"][data-palette="5"] .socials a:hover { border-color: var(--v8-accent); }
html[data-v="8"][data-palette="5"] .subscribe input {
  border-color: #cbd9d5;
  background: #fff;
  color: var(--v8-deep);
}
html[data-v="8"][data-palette="5"] .subscribe input::placeholder { color: var(--muted); }
html[data-v="8"][data-palette="5"] .badge--live { background: #f3e7e5; color: #7a4b48; }
html[data-v="8"][data-palette="5"] .live-feature .countdown div,
html[data-v="8"][data-palette="6"] .live-feature .countdown div { background: #fff; border-color: var(--line); }
html[data-v="8"][data-palette="5"] .live-feature .countdown b,
html[data-v="8"][data-palette="6"] .live-feature .countdown b { color: var(--v8-deep); }
html[data-v="8"][data-palette="5"] .live-feature .countdown small,
html[data-v="8"][data-palette="6"] .live-feature .countdown small { color: var(--muted); }

/* Palette 03 keeps its deep burgundy identity, but uses a lighter muted rose for
   icons so metadata remains readable on the navy live panel. */
html[data-v="8"][data-palette="3"] .live-feature .meta-list .icon { color: #c9a6b4; }
html[data-v="8"][data-palette="3"] .badge--live { background: #f3e7e5; color: #7a4b48; }

/* Footer social icons use an explicit surface, border and foreground for both
   dark and light palettes instead of relying on inherited footer colors. */
html[data-v="8"][data-palette] .footer .socials a {
  color: var(--v8-soft);
  background: color-mix(in srgb, var(--v8-soft) 8%, transparent);
  border-color: color-mix(in srgb, var(--v8-soft) 34%, transparent);
}
html[data-v="8"][data-palette] .footer .socials .icon { color: inherit; opacity: 1; }
html[data-v="8"][data-palette] .footer .socials a:hover {
  color: var(--v8-accent-ink);
  background: var(--v8-accent);
  border-color: var(--v8-accent);
}
html[data-v="8"][data-palette="4"] .footer .socials a,
html[data-v="8"][data-palette="5"] .footer .socials a,
html[data-v="8"][data-palette="6"] .footer .socials a {
  color: var(--v8-deep);
  background: #fff;
  border-color: var(--line);
}
html[data-v="8"][data-palette="4"] .footer .socials a:hover,
html[data-v="8"][data-palette="5"] .footer .socials a:hover,
html[data-v="8"][data-palette="6"] .footer .socials a:hover {
  color: #fff;
  background: var(--v8-deep);
  border-color: var(--v8-deep);
}