/*
 * Reset, typography, header, footer, container, sidebar pillar — dùng chung
 * mọi trang. Port từ code-ui/bessleader-2-study.html + bessleader-4-som-0-v4.html.
 * Xem code-ui/UI-DESIGN-STANDARDS.md — teal accent dùng cho icon, số trang trí,
 * kicker và viền; teal brand dùng riêng cho surface CTA chính.
 *
 * Responsive: thang breakpoint 1279/1023/767/479 khai ở tokens.css, mọi rule
 * theo bậc nằm ở cuối file này (mục "Responsive") và cuối mỗi page CSS —
 * không rải rác giữa các component. Xem UI-DESIGN-STANDARDS.md §14.
 */

/* Self-hosted fonts: chỉ Latin + Vietnamese để giảm payload, không gọi Google Fonts. */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-400-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-500-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-600-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-700-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-800-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/eb-garamond-600-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/eb-garamond-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/eb-garamond-700-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/eb-garamond-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* SVG thay cho icon font: giữ class cũ để toàn bộ component CSS tiếp tục dùng. */
.material-symbols-outlined {
  box-sizing: content-box;
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  font-size: 24px;
  line-height: 1;
  vertical-align: -0.125em;
}

:root {
  --bess-light-editorial-gradient:
    radial-gradient(115% 100% at 0% 100%, rgb(178 185 194 / 84%) 0%, transparent 58%),
    radial-gradient(85% 90% at 100% 0%, rgb(255 255 255 / 54%) 0%, transparent 62%),
    linear-gradient(135deg, #e7e9ec 0%, #d5d9de 52%, #c5cbd2 100%);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--subnav-height) + 28px);
  background: var(--page);
}

body {
  margin: 0;
  color: var(--white);
  background: var(--page);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /*
   * Lưới an toàn chống cuộn ngang, KHÔNG phải chỗ để giấu lỗi tràn: mọi khối
   * tràn thật vẫn phải sửa tại gốc (dùng padding thay margin âm, min-width:0
   * cho grid/flex item). `clip` chứ không phải `hidden` — `hidden` biến body
   * thành scroll container và làm hỏng position:sticky của header/subnav.
   */
  overflow-x: clip;
}

b,
strong { font-weight: var(--font-weight-bold); }

/* Ngoại lệ font duy nhất của card khoá học dọc: chỉ riêng tiêu đề. */

body.is-modal-open { overflow: hidden; }

/*
 * Scrollbar tối đen toàn site — áp dụng mọi khu vực (site chính, modal,
 * sidebar Tutor override, v.v.) vì đây là selector `*` specificity thấp nhất
 * (0,0,1 cho phần ::-webkit-scrollbar-*), mọi rule scrollbar cụ thể hơn ở nơi
 * khác (vd .ask-dialog, .category-nav ẩn scrollbar) vẫn thắng bất kể thứ tự
 * nạp file. Theme không có khu vực nền sáng nào (toàn bộ token đều tối,
 * tokens.css) nên 1 tông duy nhất là đủ, không cần biến theo từng surface.
 */
html {
  scrollbar-color: rgb(255 255 255 / 0.22) var(--surface);
  scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--surface); }
*::-webkit-scrollbar-thumb { border: 2px solid var(--surface); border-radius: 999px; background: rgb(255 255 255 / 0.22); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / 0.38); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: var(--surface); }

a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; width: 100%; }

:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}

/* ==================================================
   Button system — 7 variants allowed across the public theme
   ================================================== */

.bess-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border: 2px solid transparent;
  border-radius: 6px;
  color: var(--button-color);
  background: var(--button-background);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.bess-button:hover { text-decoration: none; transform: translateY(-1px); }
.bess-button:focus-visible { outline-color: var(--teal-accent); }
.bess-button[disabled],
.bess-button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

.skip-link {
  position: fixed;
  z-index: calc(var(--z-modal) + 1);
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border: 2px solid var(--white);
  border-radius: 6px;
  color: var(--white);
  background: #111418;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(calc(-100% - 14px));
  transition: transform 160ms ease;
}

.skip-link:focus { transform: translateY(0); }

/* 1 — CTA primary: solid teal brand, white content. */
.bess-button--brand {
  --button-color: var(--teal-brand-ink);
  --button-background: var(--teal-brand);
  border-color: var(--teal-brand);
}
.bess-button--brand:hover,
.bess-button--brand:focus-visible {
  --button-background: var(--teal-brand-hover);
  border-color: var(--teal-brand-hover);
  color: var(--teal-brand-ink);
  box-shadow: 0 8px 24px rgb(0 170 161 / 0.28);
}

/* 2 — strong secondary CTA: solid white, dark text. */
.bess-button--white {
  --button-color: #101012;
  --button-background: var(--white);
  border-color: var(--white);
}
.bess-button--white:hover,
.bess-button--white:focus-visible {
  border-color: #e2e3e6;
  color: #101012;
  background: #e2e3e6;
}

/* 3 — normal secondary CTA: solid gray, white text. */
.bess-button--gray {
  --button-color: var(--white);
  --button-background: var(--button-gray);
  border-color: var(--button-gray);
}
.bess-button--gray:hover,
.bess-button--gray:focus-visible {
  border-color: var(--button-gray-hover);
  color: var(--white);
  background: var(--button-gray-hover);
}

/* 4 — rare secondary CTA: transparent, teal accent border, white text. */
.bess-button--outline-accent {
  --button-color: var(--white);
  --button-background: transparent;
  border-color: var(--teal-accent);
}
.bess-button--outline-accent:hover,
.bess-button--outline-accent:focus-visible {
  border-color: var(--teal-accent-hover);
  color: var(--white);
  background: rgb(0 170 161 / 0.16);
}

/* 5 — rare secondary CTA: transparent, gray border, white text. */
.bess-button--outline-muted {
  --button-color: var(--white);
  --button-background: transparent;
  border-color: var(--button-gray-border);
}
.bess-button--outline-muted:hover,
.bess-button--outline-muted:focus-visible {
  border-color: var(--button-gray-border-hover);
  color: var(--white);
  background: rgb(255 255 255 / 0.06);
}

/* 6 + 7 — text-only actions: no background, border or component padding. */
.bess-button--text-white,
.bess-button--text-accent {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.bess-button--text-white { --button-color: var(--white); }
.bess-button--text-white:hover,
.bess-button--text-white:focus-visible { color: var(--white); text-decoration: none; transform: none; }
.bess-button--text-accent { --button-color: var(--white); }
.bess-button--text-accent:hover,
.bess-button--text-accent:focus-visible { color: var(--white); text-decoration: none; transform: none; }

/*
 * Nguồn duy nhất tạo lề trái/phải của trang. --gutter tự co theo breakpoint
 * (tokens.css) nên .shell không cần media query riêng — mọi trang thừa hưởng
 * cùng một lề, không nơi nào được viết số cứng thay thế.
 */
.shell {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
}

/* Bộ màu nền sáng dùng chung cho các vùng đọc dài và trang thông tin. */
.bess-light-surface {
  --panel-bg: #ffffff;
  --panel-ink: #15161a;
  --panel-body: #43454c;
  --panel-muted: #797c85;
  --panel-line: rgb(0 0 0 / 0.08);
  color: var(--panel-ink);
  background: var(--panel-bg);
}

/*
 * Khối tràn viền (dải cuộn ngang nằm ngoài .shell nhưng phải thẳng hàng với
 * nội dung trong .shell) dùng `padding-inline: var(--bleed-inset)` — KHÔNG
 * dùng margin âm. Margin âm trên phần tử rộng 100% làm box rộng hơn viewport
 * và gây cuộn ngang toàn trang. Xem .content-shelf__track (page-home.css).
 */

/* ---------- Header ---------- */

/*
 * KHÔNG transition height: header này position:sticky và đổi chiều cao ngay
 * lúc user đang chủ động cuộn (xem .is-condensed bên dưới + header-condense.js).
 * Animate `height` trong lúc đó tạo ra 2 nguồn chuyển động chồng lên nhau mỗi
 * frame — vị trí sticky tính lại theo scrollY hiện tại VÀ kích thước box tính
 * lại theo % tiến độ transition — 2 nguồn này không đồng bộ nên nội dung dưới
 * header giật/nhảy đúng lúc đổi trạng thái (đã kiểm chứng: bỏ transition là hết
 * hẳn). Đổi chiều cao tức thời trong 1 frame loại bỏ triệt để nguồn giật này.
 */
.site-header {
  position: relative;
  z-index: var(--z-header);
  height: var(--header-height);
  background: rgb(0 0 0 / 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* Header chính luôn nằm trong document flow và cuộn khỏi màn hình trên mọi trang. */

/*
 * Masthead: 5 vùng là con TRỰC TIẾP của cùng một grid (logo / tiêu đề / mua
 * gói / menu chính / nhóm tài khoản). Không lồng wrapper vì trạng thái rút gọn
 * khi cuộn chỉ đổi grid-template-areas để xếp lại cả 5 vùng về 1 hàng — có
 * wrapper thì phải nhân bản markup ở 2 chỗ.
 *
 * 2 hàng cùng chia 3 cột giống hệt nhau: hàng 1 = tiêu đề/tagline (cột 2) + nút
 * mua gói/gia hạn (cột 3); hàng 2 = menu chính (cột 2) + nhóm tài khoản, đăng
 * nhập/thành viên + tìm kiếm/menu (cột 3). Cột 3 tự co theo item RỘNG NHẤT
 * trong 2 hàng nên nút mua gói và nhóm tài khoản luôn thẳng mép phải với nhau.
 *
 * Cột 1 = 25% và không có gap để cạnh trái của tiêu đề, menu chính (và tiêu đề
 * khi rút gọn) đều thẳng nhau. Chiều cao hàng 1 cố định 64px, hàng 2 ăn phần
 * còn lại của --header-height nên đổi token là đổi được cả header.
 */
.masthead {
  position: relative;
  display: grid;
  height: 100%;
  grid-template-columns: 25% minmax(0, 1fr) auto;
  grid-template-rows: 64px minmax(0, 1fr);
  grid-template-areas:
    "brand title tools"
    "brand nav   account";
  column-gap: 0;
}

.masthead__brand {
  grid-area: brand;
  align-self: stretch;
  gap: 0;
  min-width: 0;
}

.masthead__logo {
  display: block;
  width: auto;
  height: 73px;
  object-fit: contain;
}

/*
 * .masthead__title là ô 64px của grid (hàng 1) — CĂN GIỮA cả khối tiêu đề theo
 * chiều dọc và giữ border-bottom ở đúng ranh giới hàng 1/hàng 2. Nội dung thật
 * (tên trang + câu mô tả) nằm trong .masthead__title-row lồng bên trong — xem
 * comment ở đó để rõ vì sao phải tách 2 tầng.
 *
 * Đường kẻ ngăn 2 hàng đặt trên chính ô này (không phải trên .masthead-row) vì
 * ô này đã trải hết 2 cột phải, đường kẻ chạy đủ tới mép phải kể cả phần nằm
 * dưới 2 icon.
 */
.masthead__title {
  grid-area: title;
  align-self: stretch;
  display: flex;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  color: var(--white);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
}

/*
 * Dòng chữ thật: tên trang + câu mô tả canh theo BASELINE với nhau (giống 2
 * chữ chạy chung 1 dòng văn bản thật, không phải 2 khối trùng tâm rồi lệch
 * baseline vì cỡ chữ khác nhau).
 *
 * PHẢI tách ra khỏi .masthead__title (không gộp align-items:baseline thẳng lên
 * ô 64px) — đã kiểm chứng trong trình duyệt: align-items:baseline tự neo cả
 * dòng lên sát mép TRÊN của box chứa nó, không tự căn giữa được. Nên tầng
 * ngoài (.masthead__title) lo căn giữa cả khối bằng align-items:center (hoạt
 * động đúng vì ở tầng đó chỉ có 1 item duy nhất — chính .masthead__title-row),
 * tầng trong lo baseline giữa 2 chữ.
 */
.masthead__title-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}

.masthead__title-link { position: relative; flex: 0 0 auto; }
.masthead__title-link::after { position: absolute; inset: -10px -8px; content: ""; }

/*
 * Câu mô tả cùng font-family với tên trang (thừa hưởng qua 2 tầng div), riêng
 * cỡ chữ/weight/độ sáng đổi khác để làm phụ đề — không dùng chung số với tên
 * trang nữa.
 *
 * Ẩn hẳn dưới 1200px thay vì cắt bằng dấu ba chấm. Một câu giới thiệu bị cắt
 * giữa chừng ("…đào tạo nhà điều hành chuyên…") không truyền đạt được gì mà vẫn
 * chiếm chỗ — thà không hiện. Số 1200 đo thực tế: câu cần 476px, chỗ trống trong
 * ô tiêu đề vừa đúng 476px tại 1160px (không còn dư một pixel nào) và 569px tại
 * 1216px. Lấy 1200 để còn ~60px dư phòng khi font render lệch đi chút.
 *
 * text-overflow vẫn giữ làm lưới an toàn cho trường hợp sau này đổi câu dài hơn.
 */
.masthead__tagline {
  min-width: 0;
  overflow: hidden;
  color: rgb(255 255 255 / 0.55);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  font-size: 15px;
}

@media (max-width: 1199px) {
  .masthead__tagline { display: none; }
}

/*
 * Ô grid bình thường (không còn cần neo tuyệt đối — tiêu đề và mua gói giờ mỗi
 * bên 1 cột riêng, không phải tranh chỗ nhau nữa). padding-left giữ khoảng cách
 * tối thiểu với tiêu đề/tagline khi nó chạy dài gần hết cột 2.
 *
 * border-bottom giống hệt .masthead__title bên trái — cả 2 ô cùng hàng 1, cùng
 * chạm mốc 64px, đường kẻ ngăn hàng 1/hàng 2 phải chạy liền một mạch qua cả
 * logo lẫn khối phải, không đứt đoạn ở chỗ nối giữa tiêu đề và mua gói.
 */
.masthead__tools {
  grid-area: tools;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  padding-left: 24px;
  border-bottom: 1px solid var(--line);
}

/*
 * Nhóm mua gói ở hàng 2, thẳng mép phải với nhóm đăng nhập/tài khoản của hàng 1
 * (cùng cột grid). padding-left giữ khoảng cách tối thiểu với mục menu cuối khi
 * menu dài ra.
 */
.masthead__account {
  grid-area: account;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-left: 24px;
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.brand-icon { display: block; flex: 0 0 auto; width: 28px; height: 28px; object-fit: contain; }
.brand-icon[hidden] { display: none; }

/*
 * gap cố định 24px, KHÔNG dùng clamp() theo viewport: menu phải đứng yên tuyệt
 * đối theo chiều ngang khi header rút gọn lúc cuộn (xem .is-condensed bên dưới).
 * gap co theo vw thì mỗi lần đổi bậc màn hình các mục lại trượt một ít.
 */
.primary-nav {
  grid-area: nav;
  display: flex;
  align-items: stretch;
  align-self: stretch;
  min-width: 0;
  gap: 24px;
}

/*
 * Mục menu dùng CHUNG hệ màu + hiệu ứng hover với nút Đăng nhập / mua gói: chữ
 * trắng, hover mờ đi 0.7. Khác duy nhất là weight 500 (2 nút kia 700) để hàng
 * menu nhẹ hơn nhóm hành động. Hover KHÔNG dùng gạch chân — hàng menu nằm sát
 * đáy header nên gạch chân trùng vị trí đường viền đáy, nhìn như header bị nứt.
 *
 * KHÔNG có style riêng cho trang đang xem — chỉ hover. Thuộc tính
 * aria-current="page" vẫn giữ trong markup cho screen reader, chỉ không style.
 */
.primary-nav > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 180ms ease;
}

.primary-nav > a:hover,
.primary-nav > a:focus-visible { opacity: 0.7; }

/*
 * Đăng nhập + nút Thành viên PHẢI trông y hệt nhau — chỉ khác ở icon người của
 * bản đã đăng nhập. Vì vậy 2 selector này luôn đi cùng nhau: sửa cỡ chữ / màu
 * cho cái này thì cái kia đổi theo, không tách ra được.
 *
 * Scope theo .member-menu--primary (biến thể variant của template-part, xem
 * template-parts/member/menu.php) chứ KHÔNG theo .masthead__tools/__account —
 * nút này đã đổi chỗ giữa 2 hàng vài lần rồi, scope theo class riêng của chính
 * nó thì lần sau di chuyển không phải sửa lại từng selector.
 *
 * PHẢI giữ tiền tố .site-header dù trông thừa: khối "Member account popup" bên
 * dưới file cũng định nghĩa .member-menu--primary (dùng chung cho cả Membership
 * Flow) với ĐÚNG SỐ LỚP như ở đây nếu bỏ tiền tố — cùng độ đặc thù thì ai đứng
 * sau trong file thắng, mà khối kia đứng sau. Thêm .site-header nâng lên 3 lớp
 * để chắc chắn thắng bất kể thứ tự.
 */
.masthead__login,
.site-header .member-menu--primary .member-menu-trigger {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 180ms ease;
}

.masthead__login:hover,
.site-header .member-menu--primary .member-menu-trigger:hover,
.site-header .member-menu--primary.is-open .member-menu-trigger { opacity: 0.7; }

/* Icon người là điểm khác duy nhất; cỡ icon canh theo chiều cao chữ 14px. */
.site-header .member-menu--primary .member-menu-trigger__icon { font-size: 18px; }
/*
 * 110px chứ không phải 150px như bản dùng chung: tên dài làm nhóm tài khoản nở
 * thêm ~40px, đủ để hàng rút gọn không còn chỗ cho mục menu cuối (xem phép tính
 * ở khối .is-condensed). Tên đầy đủ vẫn hiện trong popover tài khoản.
 */
.site-header .member-menu--primary .member-menu-trigger__name { max-width: 110px; }

/* Badge Premium làm nút Thành viên khác hẳn nút Đăng nhập — trạng thái gói đã
   hiện đầy đủ trong popover tài khoản, không cần nhắc lại ở header. */
.site-header .member-menu--primary .member-badge { display: none; }

/*
 * Bản dùng chung của .member-menu--primary kéo giãn hết chiều cao header và tự
 * đẩy sang phải (thiết kế cho header 1 hàng cũ). Trong masthead thì
 * .masthead__tools đã lo cả 2 việc đó, giữ lại sẽ làm vùng bấm cao hơn hẳn link
 * Đăng nhập.
 */
.site-header .member-menu--primary {
  align-self: center;
  margin-left: 0;
}

.site-header .member-menu--primary .member-menu-trigger { height: auto; min-height: var(--tap-min); }

/*
 * Diện mạo nền/màu/bo góc/hover đến từ .bess-button.bess-button--brand (khối
 * "Button system" đầu file). Nút này ở hàng 2 (grid-area "account"), cao 56px
 * (--header-height 120px trừ 64px hàng 1, xem tokens.css). Vẫn override xuống
 * thấp hơn min-height 44px mặc định của bess-button — nút cỡ chuẩn tuy vừa vặn
 * nhưng chỉ còn ~6px khoảng thở mỗi bên, nhìn chật; giữ nút thấp/hẹp hơn cho dư
 * khoảng trống rõ ràng, vẫn còn padding để trông đúng là 1 cái nút.
 */
.header-cta {
  flex: 0 0 auto;
  min-height: var(--tap-min);
  padding: 0 16px;
}

/*
 * Nút icon chưa wire hành vi (disabled) nhưng vẫn phải hiện đúng như mockup —
 * bỏ mọi style mặc định của <button> để nó nhìn y hệt icon link.
 */
.masthead__icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  color: var(--white);
  background: none;
  cursor: pointer;
}

.masthead__icon[disabled] { cursor: default; opacity: 1; }

/*
 * Hamburger thật (mở/đóng menu chính ở mobile). Ẩn hẳn từ 768px trở lên: bậc đó
 * menu luôn hiện sẵn ở hàng 2 nên nút này không có việc gì để làm — display:none
 * cũng loại nó khỏi thứ tự Tab, không để lại nút "câm" cho bàn phím.
 */
.masthead__nav-toggle { display: none; }

.masthead__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/*
 * Trạng thái rút gọn khi cuộn (chỉ có tác dụng ở trang có header dính — trang
 * chủ và single blog; header-condense.js tự kiểm tra position:sticky trước khi
 * gắn listener). Logo ẩn, tiêu đề chuyển xuống đúng chỗ logo vừa để trống,
 * menu chính và nút mua gói dồn lên cùng hàng đó.
 *
 * .masthead__tools (đăng nhập/tài khoản + 2 icon) ẨN HẲN khi rút gọn — bên
 * phải lúc cuộn xuống chỉ cần đúng 1 CTA (mua gói/gia hạn) là đủ, không cần cả
 * cụm tài khoản đi theo. Đây là quyết định khác hẳn hàng 2 lúc chưa cuộn (vẫn
 * hiện đủ cả 2 nhóm) nên KHÔNG dùng chung 1 rule ẩn/hiện.
 *
 * Cột 1 GIỮ NGUYÊN 25% khi rút gọn (không đổi sang auto): menu chính phải đứng
 * yên theo chiều ngang lúc header co lại — mắt đang bám vào hàng menu, nó nhảy
 * sang trái ~130px thì cảm giác như trang vừa đổi bố cục chứ không phải header
 * thu gọn. Chỉ có tiêu đề dịch chuyển, và là dịch theo chiều dọc lên chỗ logo.
 *
 * Hàng rút gọn xếp: tiêu đề | menu | mua gói. Chỉ còn 3 vùng (bỏ "tools") nên
 * đổi cả grid-template-columns về 3 cột, khớp đúng cấu trúc của .masthead lúc
 * chưa rút gọn — cột 3 tự co theo đúng bề rộng nút mua gói.
 *
 * min-width là số đo thực tế theo trường hợp XẤU NHẤT (tên gói/nhãn CTA dài
 * nhất): menu 520px + nút mua gói (nút chuẩn, có padding) 182px = 702px phải
 * lọt trong 75% .shell còn lại sau cột tiêu đề 25%. Đo được mục menu cuối bắt
 * đầu bị cắt quanh vw ≈ 920px; chốt 1000px để còn ~80px dư an toàn (font render
 * lệch giữa các trình duyệt). Thêm mục menu hoặc đổi nhãn CTA dài ra đều phải
 * đo lại ngưỡng này.
 */
@media (min-width: 1000px) {
  .site-header.is-condensed {
    height: var(--header-height-condensed);
  }

  .site-header.is-condensed .masthead {
    grid-template-columns: 25% minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "title nav account";
  }

  .site-header.is-condensed .masthead__brand { display: none; }
  .site-header.is-condensed .masthead__tools { display: none; }

  .site-header.is-condensed .masthead__title {
    border-bottom: 0;
    font-size: 18px;
  }

  /*
   * Câu mô tả chỉ có ở trạng thái đầy đủ. Khi rút gọn, cột 1 chỉ rộng 25% và
   * phải chứa vừa tên trang — thêm câu này vào thì hoặc nó bị cắt còn vài chữ
   * vô nghĩa, hoặc phải nới cột 1 và làm menu trượt ngang (đúng thứ đã bỏ công
   * giữ đứng yên).
   */
  .site-header.is-condensed .masthead__tagline { display: none; }

  /*
   * KHÔNG đổi gap ở đây — gap của .primary-nav cố định 24px ở mọi bậc và mọi
   * trạng thái, nếu rút gọn mà bóp gap thì mục thứ 2 trở đi vẫn trượt ngang dù
   * mục đầu đứng yên. overflow: hidden là chốt an toàn cuối: tên thành viên dài
   * bất thường làm nhóm tài khoản nở ra thì mục menu cuối bị cắt bớt, không đè
   * lên nút Đăng nhập / mua gói.
   */
  .site-header.is-condensed .primary-nav { overflow: hidden; }
}

/* ---------- Member account popup — dùng chung header chính + Membership Flow ---------- */

.member-menu {
  position: relative;
  z-index: calc(var(--z-header) + 1);
  min-width: 0;
}
.member-menu.is-open { z-index: var(--z-modal); }

.member-menu--primary {
  display: flex;
  flex: 0 1 auto;
  align-self: stretch;
  margin-left: auto;
}

.member-menu-trigger {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  color: var(--body);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color 180ms ease;
}

.member-menu--primary .member-menu-trigger { height: 100%; }
.member-menu-trigger:hover,
.member-menu.is-open .member-menu-trigger { color: var(--white); }

.member-menu-trigger__icon {
  flex: 0 0 auto;
  color: currentColor;
  font-size: 22px;
}
.member-menu-trigger__name {
  min-width: 0;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-badge {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 20px;
  align-items: center;
  padding: 0 7px;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.member-badge.is-premium { border-color: var(--teal); color: var(--white); }
.member-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(320px, calc(100vw - var(--gutter) * 2));
  max-height: calc(100dvh - 96px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--white);
  background: #14151a;
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.56);
}

.member-popover[hidden] { display: none; }
.member-account-backdrop {
  position: fixed;
  z-index: var(--z-modal-backdrop);
  inset: 0;
  background: rgb(0 0 0 / 0.76);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.member-account-backdrop[hidden] { display: none; }
html.has-member-account-open { overflow: hidden; }

.member-account-popup {
  position: fixed;
  z-index: var(--z-modal);
  top: 50%;
  right: auto;
  left: 50%;
  width: min(1040px, calc(100vw - 32px));
  height: min(720px, calc(100dvh - 96px));
  max-height: calc(100dvh - 96px);
  overflow: hidden;
  transform: translate(-50%, -50%);
}
.member-account-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); height: 100%; }
.member-account-tabs {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding: 14px 10px;
  border-right: 1px solid var(--line);
  background: #1b1c21;
}
.member-account-tablist { display: grid; gap: 4px; }
.member-account-tabs button,
.member-account-tabs a {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--body);
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.member-account-tabs button:hover,
.member-account-tabs button:focus-visible,
.member-account-tabs a:hover { border-color: var(--line); color: var(--white); background: #1b1c21; outline: 0; }
.member-account-tabs button[aria-selected="true"] { border-color: #3a3b42; color: var(--white); background: #292a30; }
.member-account-tabs .material-symbols-outlined { flex: 0 0 auto; color: currentColor; font-size: 18px; }
.member-account-tabs .member-account-tabs__close {
  width: 36px;
  min-height: 36px;
  justify-content: center;
  margin: 0 0 12px 2px;
  padding: 0;
}
.member-account-tabs__logout { position: relative; margin-top: auto; }
.member-account-tabs__logout::before {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  left: 0;
  border-top: 1px solid var(--line);
  content: "";
}
.member-account-content { min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; background: #0d0e11; }
.member-account-view[hidden] { display: none; }
.member-account-view { min-height: 100%; }
.member-account-identity {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.member-account-identity img { width: 56px; height: 56px; border: 1px solid var(--line); border-radius: 50%; object-fit: cover; }
.member-account-identity div { display: grid; min-width: 0; gap: 4px; }
.member-account-identity strong,
.member-account-identity div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-account-identity strong { font-size: 14px; }
.member-account-identity div span { color: var(--muted); font-size: 10px; }

@media (max-width: 767px) {
  .member-account-popup {
    inset: 8px;
    width: auto;
    height: auto;
    max-height: none;
    transform: none !important;
  }
  .member-account-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .member-account-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 6px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .member-account-tablist { grid-column: 1 / 4; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .member-account-tabs button,
  .member-account-tabs a { min-height: 54px; flex-direction: column; justify-content: center; gap: 3px; padding: 5px; font-size: 8px; text-align: center; }
  .member-account-tabs .member-account-tabs__close { grid-column: 1 / -1; width: 36px; min-height: 36px; margin: 0; padding: 0; }
  .member-account-tabs__logout { grid-column: 4; margin-top: 0; }
  .member-account-tabs__logout::before { display: none; }
  .member-account-content { padding: 8px; }
  .member-account-identity { grid-template-columns: 48px minmax(0, 1fr); }
  .member-account-identity img { width: 48px; height: 48px; }
  .member-account-identity > .profile-membership-badge { grid-column: 2; justify-self: start; }
}

/* ---------- Header navigation v2: 3 dropdown menus ---------- */

.primary-nav__item { display: flex; align-items: stretch; }
.primary-nav__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 0;
  color: var(--white);
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 180ms ease;
}
.primary-nav__trigger[aria-current="page"]::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--teal);
  content: "";
}
.primary-nav__trigger:hover,
.primary-nav__trigger:focus-visible,
.primary-nav__item.is-open .primary-nav__trigger { opacity: .7; }
.primary-nav__link { text-decoration: none; }
.primary-nav__chevron { display: block; flex: 0 0 auto; width: auto; height: auto; margin-left: 6px; margin-top: 1px; font-size: 18px; line-height: 1; transition: transform 160ms ease; }
.primary-nav__item.is-open .primary-nav__chevron { transform: rotate(180deg); }
.site-header.is-condensed .primary-nav { overflow: visible; }

/* JS khóa hành vi cuộn nhưng giữ scrollbar viewport để layout không đổi chiều rộng. */
body.is-nav-dropdown-open {
  overscroll-behavior: none;
}

.nav-dropdown {
  position: absolute;
  z-index: calc(var(--z-header) + 2);
  top: 100%;
  right: auto;
  left: 0;
  width: min(820px, calc(100vw - 32px));
  max-height: none;
  overflow: visible;
  border-top: 1px solid #dedede;
  color: #1f1f1f;
  background: #fff;
  box-shadow: 0 18px 38px rgb(0 0 0 / 22%);
}
.nav-dropdown[hidden] { display: none; }
.nav-dropdown__inner { padding: 28px 30px 32px; }
.nav-dropdown a { color: #111; font-weight: 600; }
.nav-dropdown__all { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #171717; font-size: 16px; font-weight: 600; }
.nav-dropdown .nav-dropdown__all--primary.bess-button--brand {
  width: auto;
  align-self: flex-start;
  min-height: 36px;
  padding: 0 16px;
  border: 2px solid var(--teal-brand);
  border-radius: 6px;
  color: var(--teal-brand-ink);
  background: var(--teal-brand);
  font-size: 13px;
  font-weight: 800;
}
.nav-dropdown .nav-dropdown__all--primary.bess-button--brand:hover,
.nav-dropdown .nav-dropdown__all--primary.bess-button--brand:focus-visible {
  border-color: var(--teal-brand-hover);
  color: var(--teal-brand-ink);
  background: var(--teal-brand-hover);
  text-decoration: none;
}
.nav-dropdown__all--primary .material-symbols-outlined { font-size: 18px; transition: transform 180ms ease; }
.nav-dropdown__all--primary:hover .material-symbols-outlined { transform: translateX(3px); }
.roadmap-menu__header { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 24px; border-bottom: 1px solid #dedede; }
.roadmap-menu__all-label--mobile { display: none; }
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible { color: #111; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.nav-dropdown__empty { margin: 20px 0 0; color: #666; }

.nav-dropdown--roadmap .nav-dropdown__inner {
  display: flex;
  height: min(680px, calc(100vh - var(--header-height) - 16px));
  max-height: calc(100vh - var(--header-height) - 16px);
  flex-direction: column;
  overflow: hidden;
}
.roadmap-menu__desktop { display: grid; min-height: 0; flex: 1 1 auto; grid-template-columns: minmax(245px, .85fr) minmax(360px, 1.5fr); gap: 34px; }
.roadmap-menu__stages { padding: 0px 24px 0 0; border-right: 1px solid #dedede; }
.roadmap-menu__stage { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #ececec; }
.roadmap-menu__stage > a { display: grid; flex: 1; gap: 3px; padding: 12px 0; color: #111; font-weight: 600; }
.roadmap-menu__stage > a span { color: #777; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.roadmap-menu__stage > span { opacity: 0; transform: translateX(-5px); transition: 160ms ease; }
.roadmap-menu__stage:hover > a,
.roadmap-menu__stage.is-active > a { color: var(--brand); }
.roadmap-menu__stage:hover > span,
.roadmap-menu__stage.is-active > span { opacity: 1; transform: none; }
.roadmap-menu__modules { min-width: 0; min-height: 0; padding-top: 24px; overflow: hidden; }
.roadmap-menu__module-group { display: flex; height: 100%; min-height: 0; flex-direction: column; }
.roadmap-menu__module-group[hidden] { display: none; }
.roadmap-menu__module-group > p { margin: 0 0 4px; color: #777; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.roadmap-menu__module-group > h2 { margin: 0 0 16px; font-size: 24px; line-height: 1.25; }
.roadmap-menu__module-group > h2 a { color: #1f1f1f; }
.roadmap-menu__module-links {
  display: grid;
  min-height: 0;
  padding-right: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  grid-template-columns: minmax(0, 1fr);
  scrollbar-color: #b7b9bc #fff;
  scrollbar-width: thin;
}
.roadmap-menu__module-links::-webkit-scrollbar { width: 8px; }
.roadmap-menu__module-links::-webkit-scrollbar-track { border-radius: 999px; background: #fff; }
.roadmap-menu__module-links::-webkit-scrollbar-thumb { border: 2px solid #fff; border-radius: 999px; background: #b7b9bc; }
.roadmap-menu__module-links::-webkit-scrollbar-thumb:hover { background: #96999d; }
.roadmap-menu__module-links a,
.nav-dropdown__links a { padding: 9px 0; border-bottom: 1px solid #ececec; color: #111; line-height: 1.45; }
.roadmap-menu__module-links a { display: flex; align-items: baseline; gap: 10px; }
.roadmap-menu__module-code { flex: 0 0 82px; width: 82px; color: #777; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.roadmap-menu__module-name { color: #111; }
.roadmap-menu__module-links a:hover { color: #111; }
.roadmap-menu__module-links a:hover .roadmap-menu__module-code { color: #777; text-decoration: none; }
.roadmap-menu__module-links a:hover .roadmap-menu__module-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.nav-dropdown__links a:hover { color: #111; }
.roadmap-menu__mobile { display: none; }

.nav-dropdown--compact { right: auto; left: 0; width: min(430px, calc(100vw - 32px)); }
.nav-dropdown--compact .nav-dropdown__inner { padding: 24px 28px 28px; }
.nav-dropdown__links { display: grid; margin-top: 8px; }
.nav-dropdown__inner.nav-dropdown__links { margin-top: 0; }
.nav-dropdown__external-icon { margin-left: 5px; font-size: 16px; vertical-align: -3px; }

@media (max-width: 1023px) and (min-width: 768px) {
	.primary-nav { gap: 14px; }
	.primary-nav__trigger { font-size: 13px; }
	.nav-dropdown,
	.nav-dropdown--compact { left: 0; }
}

@media (max-width: 899px) and (min-width: 768px) {
	.primary-nav { gap: 8px; }
	.primary-nav__trigger { font-size: 11px; }
	.masthead__account { padding-left: 8px; }
	.header-cta { padding-inline: 10px; font-size: 11px; }
}

@media (max-width: 767px) {
  .primary-nav__item { display: block; border-top: 1px solid rgb(255 255 255 / 12%); }
  .primary-nav__item:first-child { border-top: 0; }
  .primary-nav__trigger { width: 100%; min-height: var(--tap-min); justify-content: space-between; padding: 10px 0; font-size: 15px; }
  .nav-dropdown,
  .nav-dropdown--compact { position: static; width: auto; max-height: none; border: 0; box-shadow: none; }
  .nav-dropdown--compact,
  .nav-dropdown--compact .nav-dropdown__inner { color: var(--white); background: #111315; }
  .nav-dropdown--compact { border-top: 1px solid rgb(255 255 255 / 12%); }
  .nav-dropdown--roadmap .nav-dropdown__inner { display: block; height: auto; max-height: none; overflow: visible; }
  .nav-dropdown__inner,
  .nav-dropdown--compact .nav-dropdown__inner { padding: 14px 16px 18px; }
  .roadmap-menu__header { display: block; padding: 0 0 12px; border-bottom: 0; }
  .roadmap-menu__all-label--desktop { display: none; }
  .roadmap-menu__all-label--mobile { display: inline; }
  .nav-dropdown__all { font-size: 14px; }
  .nav-dropdown .nav-dropdown__all--primary.bess-button--brand { width: 100%; align-self: stretch; min-height: var(--tap-min); padding: 0 14px; }
  .roadmap-menu__desktop { display: none; }
  .roadmap-menu__mobile { display: grid; }
  .roadmap-menu__mobile details { border-bottom: 1px solid #e6e6e6; }
  .roadmap-menu__mobile summary { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 16px; color: #222; cursor: pointer; list-style: none; font-weight: 600; }
  .roadmap-menu__mobile summary::-webkit-details-marker { display: none; }
  .roadmap-menu__mobile summary span:first-child { display: grid; gap: 2px; }
  .roadmap-menu__mobile summary small { color: #777; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
  .roadmap-menu__mobile details[open] summary > span:last-child { transform: rotate(45deg); }
  .roadmap-menu__mobile details > div { display: grid; padding: 0 0 12px 12px; }
  .roadmap-menu__mobile details a,
  .nav-dropdown__links a { padding: 8px 0; border-bottom: 1px solid #ececec; color: #111; font-size: 13px; }
  .nav-dropdown--compact .nav-dropdown__links a { border-bottom-color: rgb(255 255 255 / 12%); color: rgb(255 255 255 / 88%); }
  .nav-dropdown--compact .nav-dropdown__links a:hover,
  .nav-dropdown--compact .nav-dropdown__links a:focus-visible { color: #fff; }
  .roadmap-menu__mobile .roadmap-menu__stage-link { color: var(--brand); font-weight: 700; }
  .nav-dropdown__links { margin-top: 0; }
}

@media (max-width: 479px) {
  .member-account-tabs [data-mobile-label] { font-size: 0; }
  .member-account-tabs [data-mobile-label]::after { content: attr(data-mobile-label); font-size: 8px; }
}

/* ---------- Page heading (hero nhỏ đầu trang nội dung) ---------- */

.page-heading {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 288px;
  max-width: none;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  padding-top: clamp(48px, 5vw, 72px);
  padding-bottom: clamp(40px, 4vw, 56px);
}

.page-kicker {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.page-title-wrap {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.page-title {
  max-width: 720px;
  margin: 0;
  font-size: clamp(40px, 4vw, 50px);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -0.045em;
}

.page-intro {
  max-width: 700px;
  margin: 18px 0 0;
  color: var(--body);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
}

/*
 * CTA tuỳ chọn dưới caption hero (page-hero.php $args['cta_label']) — hiện chỉ
 * /ask dùng (nút "Gửi câu hỏi tại đây"), nhưng đặt cạnh .page-intro vì cùng
 * thuộc hero dùng chung /course, /doc, /tool, /ask.
 */
.page-hero-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.page-hero-cta .material-symbols-outlined { font-size: 18px; transition: transform 180ms ease; }
.page-hero-cta:hover .material-symbols-outlined { transform: translateX(3px); }
.page-hero-cta-note { max-width: 320px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; text-wrap: balance;}

/* ---------- Sidebar cấu trúc (dùng chung /course, /doc, /tool, /ask) ---------- */

.category-sidebar {
  position: sticky;
  z-index: var(--z-sidebar);
  top: 0;
  min-width: 0;
  height: var(--subnav-height);
  margin-bottom: 36px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgb(0 0 0 / 0.94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* Carousel giữ đủ icon + nhãn loại + tên pillar trong một thanh gọn. */
.category-sidebar.is-carousel { height: 80px; }

/* Loại thường: khi thanh đã dính (is-stuck, do scrollspy.js gắn) thì thu lại
   còn pill (32px icon + 8px padding trên dưới) cộng đúng 9px hở trên/dưới.
   Lúc chưa dính vẫn giữ nguyên --subnav-height như cũ.

   margin-bottom bù lại ĐÚNG phần chiều cao vừa mất, để tổng chỗ thanh chiếm
   trong luồng không đổi: nếu nội dung bên dưới dịch lên 22px thì trình duyệt
   sẽ neo lại vị trí cuộn, trang tự trượt qua mốc dính và thanh nhấp nháy
   to/nhỏ liên tục ngay tại ranh giới. */
.category-sidebar { transition: height 180ms ease; }

.category-sidebar.is-stuck:not(.is-carousel) {
  height: 66px;
  margin-bottom: calc(64px + var(--subnav-height) - 66px);
}

.category-heading { display: none; }

.category-nav-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
}

.category-nav {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 0;
  height: 100%;
  min-width: 0;
}

.category-link {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  margin: 10px 0;
  padding: 10px 0;
  border-radius: 6px;
  color: var(--muted);
  background: rgb(255 255 255 / 0.09);
  transition: color 180ms ease, background-color 180ms ease, gap 200ms ease, padding 200ms ease, margin 200ms ease;
}

.category-link:hover { background: rgb(255 255 255 / 0.12); }
.category-link.is-active { background: rgb(255 255 255 / 0.16); }

.category-icon {
  display: grid;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--white);
  transition: width 200ms ease, height 200ms ease;
}

.category-icon .material-symbols-outlined {
  font-size: 26px;
}

.category-icon--number {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.category-name {
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-wrap: balance;
  transition: font-size 200ms ease, line-height 200ms ease;
}

.category-name-line { display: block; }

.category-name-lead {
  color: rgb(255 255 255 / 0.48);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Chiều cao pill = chiều cao thanh trừ margin dọc (link bị stretch theo .category-nav),
   nên muốn pill thấp hơn thì nới margin chứ không phải giảm padding. Biến thể
   carousel giữ nguyên vì thanh của nó vốn đã thấp (80px). */
.is-stuck .category-nav-wrap:not(.is-carousel) .category-link {
  margin: 9px 0;
  padding: 8px 0;
}

.category-name-detail {
  margin-top: 1px;
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Chỉ /career bật carousel: icon nhỏ hơn, item tự co theo tên và cuộn ngang. */
.category-icon-flat {
  display: grid;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--white);
}

.category-icon-flat .material-symbols-outlined {
  font-size: 22px;
}

.category-nav-wrap.is-carousel .category-nav {
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.category-nav-wrap.is-carousel .category-nav::-webkit-scrollbar { display: none; }

.category-nav-wrap.is-carousel .category-link {
  flex: 0 0 auto;
  gap: 8px;
  padding: 10px 20px;
  text-align: center;
  white-space: nowrap;
  scroll-snap-align: start;
}

.category-nav-wrap.is-carousel .category-link.is-active { color: var(--white); }

.category-nav-wrap.is-carousel .category-name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-align: left;
	text-wrap: nowrap;
}

.category-nav-arrow {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--white);
  background: rgb(255 255 255 / 0.09);
  cursor: pointer;
  transition: background-color 180ms ease, opacity 180ms ease;
}

.category-nav-arrow:hover { background: rgb(255 255 255 / 0.16); }
.category-nav-arrow:disabled { display: none; }

.category-nav-arrow .material-symbols-outlined {
  font-size: 20px;
}

.category-nav-wrap.has-overflow .category-nav-arrow { display: grid; }
.category-nav-wrap.has-overflow .category-nav-arrow:disabled { display: none; }

/*
 * Dưới khổ nội dung chuẩn, sáu mục catalog không còn đủ chỗ để chia đều.
 * Chuyển riêng nav Course/Doc/Tool/Ask sang dải ngang sớm hơn mobile để tên
 * mục giữ nguyên độ dễ đọc; desktop >= 1200px vẫn dùng bố cục chia đều.
 */
@media (max-width: 1279px) {
  .category-sidebar--catalog-nav .category-nav {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .category-sidebar--catalog-nav .category-nav::-webkit-scrollbar { display: none; }

  .category-sidebar--catalog-nav .category-link,
  .category-sidebar--catalog-nav.is-stuck .category-nav-wrap:not(.is-carousel) .category-link {
    min-width: max-content;
    flex: 0 0 auto;
    gap: 8px;
    padding-inline: 18px;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: #050606;
}

.footer-main {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 64px);
  padding: 88px 0;
}

.footer-brand__identity { display: inline-flex; width: fit-content; }
.footer-brand__logo { display: block; width: auto; height: 92px; object-fit: contain; }

.footer-brand .footer-brand__product {
  margin: 22px 0 7px;
  color: var(--white);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.25;
}

.footer-brand .footer-brand__description {
  max-width: 310px;
  margin: 0;
  color: var(--body);
  font-size: 13px;
  line-height: 1.7;
}

.footer-column h3 {
  margin: 2px 0 16px;
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.footer-column a {
  position: relative;
  display: block;
  width: fit-content;
  margin-top: 11px;
  color: var(--white);
  font-size: 13px;
  line-height: 1.5;
  transition: color 160ms ease;
}

.footer-column a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.footer-column a:hover,
.footer-column a:focus-visible { color: var(--white); }
.footer-column a:hover::after,
.footer-column a:focus-visible::after { transform: scaleX(1); }

.footer-trial-cta { margin-top: 22px; }
.footer-trial-cta .material-symbols-outlined { font-size: 18px; }

.member-menu--footer {
  display: block;
  width: fit-content;
  margin-top: 11px;
}
.member-menu--footer .member-menu-trigger {
  position: relative;
  display: block;
  width: fit-content;
  padding: 0;
  color: var(--white);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}
.member-menu--footer .member-menu-trigger::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}
.member-menu--footer .member-menu-trigger:hover::after,
.member-menu--footer .member-menu-trigger:focus-visible::after,
.member-menu--footer.is-open .member-menu-trigger::after { transform: scaleX(1); }

.footer-bottom {
  display: flex;
  min-height: 55px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgb(255 255 255 / 0.06);
  color: var(--muted);
  font-size: 13px;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 19px;
}

.footer-social a {
  color: var(--muted);
  transition: color 160ms ease;
}

.footer-social a:hover,
.footer-social a:focus-visible { color: var(--white); }

/* ---------- Breadcrumb ---------- */

.breadcrumb { min-width: 0; }

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.breadcrumb__item { display: inline-flex; align-items: center; gap: 7px; }

.breadcrumb__separator { color: rgb(255 255 255 / 0.3); font-size: 15px; }

.breadcrumb__link { color: var(--body); transition: color 150ms ease; }
.breadcrumb__link:hover { color: var(--white); }
.breadcrumb__current { color: #747780; }

/* ---------- Section headers ---------- */

.section-header {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  width: 100%;
  align-items: start;
  gap: 16px;
  margin-bottom: 32px;
}

.section-header__number {
  color: var(--white);
  font-size: clamp(24px, 1.8vw, 28px);
  font-weight: 800;
  line-height: 1.15;
	letter-spacing: -0.035em;
}

.section-header.section-header--progress-number {
  grid-template-columns: max-content minmax(0, 1fr);
}

.section-header__number--progress {
  display: inline-flex;
  align-items: baseline;
}

.section-header__number-total {
  color: rgb(255 255 255 / 0.38);
  font-size: 0.38em;
  font-weight: 700;
  line-height: 1;
}

.section-header__copy { min-width: 0; }
.section-header.section-header--without-number { grid-template-columns: minmax(0, 1fr); }

.section-header__title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.section-header__description {
  margin: 9px 0 0;
  color: var(--body);
  font-size: 16px;
  line-height: 1.5;
}

/* ---------- Sub-section header ---------- */

.sub-section + .sub-section { margin-top: 40px; }
.sub-section { padding-top: 28px; border-top: 1px solid var(--line); }
.sub-section.is-untitled { padding-top: 0; border-top: 0; }

.sub-section-header {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  width: 100%;
  align-items: start;
  gap: 16px;
  margin: 0 auto 28px;
}

.sub-section-header__code,
.sub-section-header__title {
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.sub-section-header__code { line-height: 1.15; letter-spacing: -0.035em; }
.sub-section-header__title { margin: 0; }

/* ---------- Section header loại 2 ---------- */

.section-header-2 {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.section-header-2__title {
  margin: 0;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.section-header-2__cta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--white);
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  transition: color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.section-header-2__cta:hover { color: var(--white); transform: none; }
.section-header-2__cta .material-symbols-outlined { font-size: 16px; transition: transform 180ms ease; }
.section-header-2__cta:hover .material-symbols-outlined { transform: translateX(3px); }

/* ---------- Content grid ---------- */

.content-grid {
  display: grid;
  width: 100%;
  gap: var(--space-grid);
}

.content-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.content-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.content-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }

.content-empty-state {
  display: grid;
  min-height: 180px;
  place-items: center;
  align-content: center;
  gap: 10px;
  margin: 0 0 64px;
  border: 1px dashed var(--line);
  color: var(--muted);
  text-align: center;
}

.content-empty-state .material-symbols-outlined { font-size: 30px; }
.content-empty-state p { margin: 0; }

/*
 * Thang cột chuẩn — 1 nơi duy nhất quyết định số cột theo bậc màn hình:
 *
 *             XL   LG   MD   SM   XS
 *   --4        4    4    3    2    2      (poster A4, bìa sách, card vuông)
 *   --5        5    4    3    2    1      (card bài viết 16:9 + tiêu đề + trích)
 *
 * Giữ 2 cột ở XS cho --4 vì card poster/bìa vẫn đọc tốt ở ~150px và người
 * dùng thấy được nhiều lựa chọn hơn trong một màn (cùng cách MasterClass làm
 * trên mobile). Card bài viết có tiêu đề + trích dẫn nên về 1 cột ở XS.
 *
 * Loại card dày nội dung (tool-card) ghi đè bậc riêng trong page CSS của
 * chính nó — không thêm biến thể mới ở đây.
 */
@media (max-width: 1279px) {
  .content-grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .content-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .content-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-grid); }
}

@media (max-width: 767px) {
	.content-grid--3,
	.content-grid--4,
  .content-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479px) {
	.content-grid--3,
	.content-grid--5 { grid-template-columns: 1fr; }
}

/* ==================================================
   Sân khấu khoá — thay vùng nội dung chính khi chưa đủ quyền
   ==================================================
   Dùng chung trang bài học Tutor + trang tài liệu (template-parts/layout/
   locked-stage.php). Giữ đúng khung 16:9 của video/tài liệu thật để layout
   không nhảy khi user mở khoá xong và nội dung thật thế chỗ.

   Icon dùng neutral muted theo tone; CTA membership dùng surface teal brand.
   ================================================== */

.locked-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 78dvh;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgb(255 255 255 / 0.12), transparent 58%),
    #202329;
}

/* Thumbnail thật của khoá học/tài liệu, dùng chung cho cả gate đăng nhập và
 * gate membership. Scale dư ra để mép ảnh không lộ khoảng trống khi blur. */
.locked-stage__backdrop {
  position: absolute;
  z-index: -2;
  inset: -18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(13px) brightness(0.5) saturate(0.78);
  transform: scale(1.06);
}

.locked-stage.has-backdrop::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 50% 22%, rgb(255 255 255 / 0.13), transparent 52%),
    linear-gradient(180deg, rgb(9 11 14 / 0.42), rgb(5 6 8 / 0.72));
}

/* ==================================================
   Access gate — nội dung chuẩn của mọi UI khoá
   ==================================================
   Wrapper từng trang sở hữu kích thước/vị trí. Component này sở hữu icon,
   copy và CTA; chỉ màu chữ đổi giữa tone tối và sáng.
   ================================================== */

.access-gate {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  min-height: 360px;
  max-width: 520px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 5vw, 56px);
  border: 1px solid;
  border-radius: 8px;
  text-align: center;
}

.locked-stage--document {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: 210 / 297;
}

.locked-stage__frame {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
}

.access-gate__icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 2px solid currentcolor;
  border-radius: 50%;
  background: transparent;
}

.access-gate__icon .material-symbols-outlined { font-size: 28px; }

.access-gate__title {
  margin: 20px 0 0;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.access-gate__body {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.65;
}

.access-gate--dark { border-color: rgb(255 255 255 / 0.22); background: rgb(0 0 0 / 0.2); }
.access-gate--dark .access-gate__icon { color: rgb(255 255 255 / 0.58); }
.access-gate--dark .access-gate__title { color: var(--white); }
.access-gate--dark .access-gate__body { color: var(--body); }
.access-gate--light { border-color: rgb(21 22 26 / 0.16); background: var(--panel-bg, #fff); }
.access-gate--light .access-gate__icon { color: rgb(21 22 26 / 0.5); }
.access-gate--light .access-gate__title { color: var(--panel-ink, #15161a); }
.access-gate--light .access-gate__body { color: var(--panel-body, #43454c); }

/*
 * Khung chung cho nút CTA của sân khấu khoá — kiểu (màu/viền) do chính nút
 * quyết định: .btn-google (đăng nhập) hoặc .is-membership (mua gói).
 */
.access-gate__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  margin-top: 22px;
  padding: 0 22px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
}

.access-gate__cta.is-membership {
  border: 2px solid var(--teal-brand);
  color: var(--teal-brand-ink);
  background: var(--teal-brand);
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.access-gate__cta.is-membership:hover { border-color: var(--teal-brand-hover); color: var(--teal-brand-ink); background: var(--teal-brand-hover); transform: translateY(-1px); }
.access-gate__cta.is-back .material-symbols-outlined { font-size: 18px; }
.access-gate__cta.is-download .material-symbols-outlined { font-size: 18px; }

/*
 * Trạng thái "chỉ có bản tải về" (document-download-notice.php) — KHÔNG phải
 * khoá: user đã đủ quyền, tài liệu có sẵn thật, chỉ khác định dạng truy cập.
 * Icon dùng teal accent thay vì muted mặc định của pending/login/membership
 * để báo tin tốt ngay từ cái nhìn đầu, tránh cảm giác "bị chặn".
 */
.access-gate.is-download .access-gate__icon {
  color: var(--teal-accent);
  border-color: var(--teal-accent);
}

/*
 * Ghi chú tải về (điều kiện file/định dạng/mật khẩu...) — thông tin quan
 * trọng, dễ bị bỏ lỡ nếu chỉ là dòng chữ muted nhỏ như trước. Đóng khung
 * callout viền + nền teal accent nhạt để mắt dừng lại trước khi bấm tải,
 * icon "info" củng cố đây là ghi chú cần đọc chứ không phải mô tả phụ.
 */
.access-gate__note {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid rgb(56 217 211 / 0.35);
  border-radius: 6px;
  background: rgb(56 217 211 / 0.1);
  color: var(--body);
  font-size: 12.5px;
  line-height: 1.55;
  text-align: center;
}
.access-gate__note .material-symbols-outlined { flex: none; font-size: 16px; color: var(--teal-accent); }

/* Nút Google vẫn trắng đúng guideline; trên tone sáng cần viền/bóng để đọc được
   ranh giới, không đổi nhận diện của hành động đăng nhập. */
.access-gate--light .btn-google {
  border-color: rgb(21 22 26 / 0.16);
  box-shadow: 0 2px 8px rgb(21 22 26 / 0.08);
}
.access-gate--light .btn-google:hover { border-color: rgb(21 22 26 / 0.28); background: var(--white); }

/* ==================================================
   Nút đăng nhập Google — template-parts/layout/google-login-button.php
   ==================================================
   Nền trắng + chữ đen + logo Google, ĐỐI LẬP có chủ đích với nút "Mua gói"
   (nền teal brand): hai hành động khác hẳn nhau về bản chất
   (miễn phí vs trả tiền) nên không được trông giống nhau. Trên nền tối của
   theme, khối trắng đặc cũng là thứ nổi nhất — đúng vì đây là hành động ta
   muốn người dùng chọn trước.

   Đây là ngoại lệ duy nhất của "không dùng nền sáng": logo Google buộc phải
   đặt trên nền trắng theo brand guideline của Google, không được đổi màu.
   ================================================== */

.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border: 2px solid var(--white);
  border-radius: 6px;
  color: #15161a;
  background: var(--white);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.btn-google:hover {
  border-color: rgb(255 255 255 / 0.82);
  background: rgb(255 255 255 / 0.88);
  transform: translateY(-1px);
}

.btn-google__mark {
  display: grid;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  place-items: center;
}

.btn-google__mark svg { width: 18px; height: 18px; }

/* Full width — dùng trong popup và ở màn hẹp. */
.btn-google.is-block { display: flex; width: 100%; }

/* ==================================================
   Thanh CTA (text trái + nút phải) — template-parts/layout/cta-bar.php
   ==================================================
   Chỉ còn một cách neo: `--page`, dính đáy viewport, dùng ở trang chủ và 4
   trang danh mục chính. Variant `--panel` (dính đáy khối cha, dưới bản xem
   trước tài liệu) đã gỡ cùng lúc với nhánh xem trước — xem cta-bar.php.
   ================================================== */

.cta-bar {
  z-index: var(--z-cta);
  border-top: 1px solid var(--line);
  background: #191a1df2;
}

.cta-bar--page {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(calc(100% + 8px));
  pointer-events: none;
  will-change: opacity, transform;
  transition: opacity 480ms ease-out, transform 640ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 640ms;
}

.cta-bar--page.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.cta-bar__inner {
  display: flex;
  width: min(100% - var(--gutter) * 2, var(--container));
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-inline: auto;
  padding-block: 14px;
}

.cta-bar__copy { min-width: 0; flex: 1 1 auto; }

.cta-bar__text {
  margin: 0;
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.cta-bar__note {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.cta-bar__cta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 2px solid var(--teal-brand);
  border-radius: 6px;
  color: var(--teal-brand-ink);
  background: var(--teal-brand);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.cta-bar__cta:hover { border-color: var(--teal-brand-hover); color: var(--teal-brand-ink); background: var(--teal-brand-hover); transform: translateY(-1px); }

/* ---------- Modal mời đăng nhập xem thử (bấm card đang khoá) ---------- */

.access-invite {
  position: fixed;
  z-index: var(--z-modal);
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgb(0 0 0 / 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.access-invite[hidden] { display: none; }

/*
 * Dialog giữ nền xám sáng hơn surface trang để tách rõ khối có CTA đăng nhập;
 * teal-brand chỉ dành cho surface CTA mua gói, không trang trí nền modal.
 */
.access-invite-dialog {
  position: relative;
  width: min(460px, 100%);
  padding: 36px 34px 32px;
  border: 1px solid rgb(255 255 255 / 0.13);
  border-radius: 10px;
  background: #24272e;
  box-shadow: 0 34px 100px rgb(0 0 0 / 0.72);
  text-align: center;
}

.access-invite-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: 50%;
  color: rgb(255 255 255 / 0.78);
  background: rgb(255 255 255 / 0.04);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.access-invite-kicker {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.access-invite-title {
  margin: 12px 0 0;
  color: var(--white);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.access-invite-body {
  margin: 10px 0 0;
  color: var(--body);
  font-size: 13.5px;
  line-height: 1.65;
}

/* Chỉ còn ĐÚNG MỘT hành động (nút Google) — nút "Để sau" đã bỏ vì nút X ở
   góc, bấm nền và Esc đều đóng được rồi; thêm nút từ chối chỉ làm loãng
   tiêu điểm. Xem template-parts/modals/access-invite.php. */
.access-invite-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: 24px;
}

/* ---------- Modal "Gửi câu hỏi" (dùng chung mọi trang có CTA đặt câu hỏi) ---------- */

.ask-modal {
  position: fixed;
  z-index: var(--z-modal);
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgb(0 0 0 / 0.76);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.ask-modal[hidden] { display: none; }

.ask-dialog {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100dvh - 56px);
  overflow: auto;
  padding: 42px 46px 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1b1c21;
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.56);
  scrollbar-color: rgb(255 255 255 / 0.22) #1b1c21;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.ask-dialog::-webkit-scrollbar { width: 10px; }
.ask-dialog::-webkit-scrollbar-track { border-radius: 0 8px 8px 0; background: #1b1c21; }
.ask-dialog::-webkit-scrollbar-thumb { border: 3px solid #1b1c21; border-radius: 999px; background: rgb(255 255 255 / 0.22); background-clip: padding-box; }
.ask-dialog::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / 0.38); background-clip: padding-box; }
.ask-dialog::-webkit-scrollbar-corner { background: #1b1c21; }

.ask-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: 50%;
  color: rgb(255 255 255 / 0.78);
  background: #292a30;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.ask-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ask-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-accent);
}

.ask-title {
  max-width: 570px;
  margin: 12px 0 0;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

/* Modal dùng đúng access-gate canonical; class chỉ điều chỉnh kích thước theo
   surface của dialog, không tạo lại icon/copy/CTA riêng. */
.ask-access-gate { min-height: 300px; max-width: none; margin-top: 32px; }

.ask-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.ask-identity {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #14151a;
}

.ask-avatar {
  display: block;
  width: 42px;
  height: 42px;
  border: 2px solid rgb(56 217 211 / 0.28);
  border-radius: 50%;
  background: #1b1c21;
  object-fit: cover;
}

.ask-identity-copy { display: grid; min-width: 0; gap: 2px; }
.ask-identity-label { color: rgb(255 255 255 / 0.38); font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ask-identity-name { color: rgb(255 255 255 / 0.86); font-size: 12px; font-weight: 700; }
.ask-identity-email { overflow: hidden; color: rgb(255 255 255 / 0.5); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.ask-identity-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgb(255 255 255 / 0.48);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.ask-identity-status::before { content: ""; width: 5px; height: 5px; border: 2px solid var(--teal); border-radius: 50%; background: transparent; }

.ask-field { display: grid; gap: 8px; }
.ask-field-full { grid-column: 1 / -1; }
.ask-label { color: rgb(255 255 255 / 0.72); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ask-optional { color: rgb(255 255 255 / 0.42); font-weight: var(--font-weight-regular); }

.ask-textarea {
  width: 100%;
  min-height: 78px;
  padding: 13px 14px;
  border: 2px solid rgb(255 255 255 / 0.14);
  border-radius: 6px;
  color: var(--white);
  background: #14151a;
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  outline: 0;
  resize: vertical;
  transition: border-color 160ms ease, background-color 160ms ease;
}

#ask-question { font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: -0.015em; }
#ask-question::placeholder { color: rgb(255 255 255 / 0.32); font-weight: 600; }
.ask-textarea.is-detail { min-height: 142px; }
.ask-textarea:focus { border-color: var(--teal); background: #191a1f; }

.ask-actions { display: flex; grid-column: 1 / -1; align-items: center; gap: 20px; margin-top: 4px; }

.ask-submit {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 20px;
  border: 1px solid var(--white);
  border-radius: 6px;
  color: #101012;
  background: var(--white);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.ask-submit:hover { border-color: #d7d7da; background: #d7d7da; }
.ask-submit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ask-submit .material-symbols-outlined { width: 18px; height: 18px; fill: currentColor; stroke: none; font-size: 18px; }

.ask-note { position: relative; margin: 0; padding-left: 16px; color: rgb(255 255 255 / 0.78); font-size: 10px; line-height: 1.55; }
.ask-note::before { content: "✦"; position: absolute; top: 0; left: 0; color: var(--teal); font-size: 9px; }

.ask-form.is-sent > .ask-identity,
.ask-form.is-sent > .ask-field,
.ask-form.is-sent > .ask-actions { display: none; }

.content-request-login { display: grid; gap: 16px; margin-top: 28px; padding: 28px; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 8px; background: rgb(255 255 255 / 0.04); }
.content-request-login h3, .content-request-login p { margin: 0; }
.content-request-login p { color: var(--muted); line-height: 1.65; }
.content-request-formats { min-width: 0; margin: 0; padding: 0; border: 0; }
.content-request-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.content-request-option {
  position: relative;
  display: grid;
  min-height: 82px;
  grid-template-columns: 24px 32px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.13);
  border-radius: 8px;
  color: rgb(255 255 255 / 0.88);
  background: rgb(255 255 255 / 0.025);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.content-request-option:hover { border-color: rgb(255 255 255 / 0.28); background: rgb(255 255 255 / 0.055); transform: translateY(-1px); }
.content-request-option:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 3px; }
.content-request-option:has(input:checked) { border-color: var(--teal); color: var(--white); background: linear-gradient(135deg, rgb(45 210 201 / 0.15), rgb(45 210 201 / 0.045)); }
.content-request-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.content-request-option__check { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgb(255 255 255 / 0.26); border-radius: 5px; color: #111216; background: transparent; transition: border-color 160ms ease, background-color 160ms ease; }
.content-request-option__check .material-symbols-outlined { width: 16px; height: 16px; opacity: 0; transform: scale(.7); font-size: 16px; transition: opacity 160ms ease, transform 160ms ease; }
.content-request-option input:checked + .content-request-option__check { border-color: var(--teal); background: var(--teal); }
.content-request-option input:checked + .content-request-option__check .material-symbols-outlined { opacity: 1; transform: scale(1); }
.content-request-option__icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: rgb(255 255 255 / 0.55); background: rgb(255 255 255 / 0.07); }
.content-request-option__icon .material-symbols-outlined { width: 18px; height: 18px; font-size: 18px; }
.content-request-option:has(input:checked) .content-request-option__icon { color: var(--teal); background: rgb(45 210 201 / 0.13); }
.content-request-option strong { font-size: 13px; font-weight: 700; }

.ask-success-view { display: grid; grid-column: 1 / -1; justify-items: center; padding: 20px 0 4px; text-align: center; }
.ask-success-view[hidden] { display: none; }

.ask-success-icon {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 2px solid rgb(56 217 211 / 0.42);
  border-radius: 50%;
  color: var(--teal);
  background: #14151a;
}

.ask-success-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ask-success-kicker { margin-top: 22px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
.ask-success-title { max-width: 520px; margin: 8px 0 0; font-size: 27px; font-weight: 800; line-height: 1.25; letter-spacing: -0.035em; }
.ask-success-copy { max-width: 520px; margin: 11px 0 0; color: rgb(255 255 255 / 0.62); font-size: 12px; line-height: 1.65; }

.ask-success-question {
  width: min(520px, 100%);
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 7px;
  background: #14151a;
  text-align: left;
}

.ask-success-question-label { display: block; color: rgb(255 255 255 / 0.4); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ask-success-question-text { display: block; margin-top: 7px; color: rgb(255 255 255 / 0.88); font-size: 14px; font-weight: 600; line-height: 1.55; }

.ask-success-next {
  display: flex;
  width: min(520px, 100%);
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: rgb(255 255 255 / 0.72);
  font-size: 10px;
  line-height: 1.5;
  text-align: left;
}

.ask-success-next svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--teal); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ask-success-actions { display: flex; align-items: center; gap: 12px; margin-top: 26px; }

.ask-success-secondary {
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 6px;
  color: rgb(255 255 255 / 0.78);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

/*
 * Ask modal ở MD trở xuống. `.ask-form` là grid 2 cột: dưới ~900px mỗi cột
 * chỉ còn hơn 100px nên phải về 1 cột sớm (MD), không đợi tới mobile. Từ SM
 * chuyển hẳn sang sheet full-screen để form nhập liệu có đủ bề ngang — nhập
 * văn bản dài trên hộp hẹp là điểm rơi lớn nhất của flow này.
 */
@media (max-width: 1023px) {
  .ask-form { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .ask-modal { padding: 0; }

  .ask-dialog {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    padding: 26px var(--gutter) 32px;
  }

  /*
   * Nút đóng chuyển sang fixed: dialog giờ chiếm trọn màn và tự cuộn, nếu để
   * absolute thì nút trôi mất khi người dùng cuộn xuống ô nhập bối cảnh và
   * không còn lối thoát nào ngoài nút Back của trình duyệt. Cần nền đục vì
   * nó nằm đè lên nội dung đang cuộn phía dưới.
   */
  .ask-close { position: fixed; top: 12px; right: 12px; background: #292a30; }
  .ask-title { margin-top: 10px; font-size: clamp(21px, 6vw, 26px); }

  /* Trạng thái "Đã xác thực" xuống dòng riêng — cột thứ 3 không đủ chỗ. */
  .ask-identity { grid-template-columns: 40px minmax(0, 1fr); }
  .ask-identity-status { grid-column: 1 / -1; }

  .ask-textarea.is-detail { min-height: 110px; }
  .content-request-options { grid-template-columns: minmax(0, 1fr); }
  .content-request-option { min-height: 68px; }

  /* Nút gửi full width + ghi chú xuống dưới, thay vì đứng cạnh nhau bị bóp. */
  .ask-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .ask-submit { width: 100%; }

  .ask-success-title { font-size: 22px; }
  .ask-success-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .ask-success-secondary { width: 100%; }
}

/* ==================================================
   Responsive — thang bậc 1279 / 1023 / 767 / 479 (tokens.css)
   Thứ tự: LG → MD → SM → XS → lớp năng lực thiết bị.
   ================================================== */

/* ---------- LG (<= 1279px): laptop nhỏ ---------- */

@media (max-width: 1279px) {
  .masthead__logo { height: 62px; }
  .masthead__title { font-size: 20px; }
  .masthead__tools,
  .masthead__account { gap: 16px; padding-left: 20px; }
}

/* ---------- MD (<= 1023px): tablet ngang ---------- */

@media (max-width: 1023px) {
  /*
   * Cột logo đổi từ 25% sang số cố định: dưới 1024px thì 25% chỉ còn ~230px,
   * không đủ cho cả logo lẫn tiêu đề khi rút gọn. Mockup ẩn hẳn hàng menu ở
   * bậc này, nhưng ở đây menu là điều hướng chính duy nhất (nút hamburger chưa
   * wire) nên phải giữ lại.
   */
  .masthead { grid-template-columns: 200px minmax(0, 1fr) auto; }
  .masthead__logo { height: 52px; }
  .masthead__title { font-size: 18px; }
  .masthead__tools,
  .masthead__account { gap: 14px; padding-left: 16px; }
  .site-header.is-condensed .masthead__title { font-size: 17px; }
  .primary-nav > a { font-size: 14px; }

  .footer-main { gap: 32px 40px; padding: 72px 0; }
  .section-header__description { font-size: 15px; }
}

/* ---------- SM (<= 767px): tablet dọc / mobile lớn ---------- */

@media (max-width: 767px) {
  /*
   * Header 2 hàng: hàng 1 thương hiệu + đăng nhập + CTA, hàng 2 tiêu đề 2 dòng
   * (tên trang trên, câu mô tả dưới) bên trái + hamburger bám mép phải. Menu
   * chính KHÔNG còn hiện sẵn ở hàng 2 nữa — nó thành panel xổ xuống dưới header,
   * chỉ mở khi bấm hamburger (xem .site-header.is-nav-open bên dưới).
   *
   * Vì sao bỏ dải cuộn ngang cũ: hàng 2 chỉ có 1 chỗ, mà 6 mục menu cuộn ngang
   * thì phần lớn mục nằm khuất ngoài màn hình — người dùng phải vuốt mới biết
   * site có gì. Đưa menu vào panel dọc thì cả 6 mục hiện cùng lúc lúc mở, và
   * hàng 2 trả lại cho danh tính trang (tên + mô tả) vốn đang bị ẩn hoàn toàn
   * trên mobile.
   *
   * 60px + 48px = --header-height (108px) khai ở tokens.css. Sửa 1 trong 3 số
   * thì phải sửa cả 3.
   *
   * Bậc này KHÔNG dùng grid masthead của desktop: 3 vùng của hàng 2 (tiêu đề,
   * hamburger, panel menu) đều neo tuyệt đối theo .masthead, hàng 1 là flex.
   *
   * Không cần vô hiệu hoá .is-condensed ở đây: bộ rule rút gọn nằm trong
   * @media (min-width: 1000px) nên không bao giờ chạm tới bậc này.
   */
  .site-header { height: var(--header-height); }

  .masthead {
    position: relative;
    display: flex;
    grid-template-areas: none;
    align-items: center;
    height: auto;
    gap: 10px;
    padding-block: var(--masthead-mobile-row-padding);
  }

  .masthead__brand { display: inline-flex; flex: 0 0 auto; }
  .masthead__logo { height: var(--masthead-mobile-logo-height); }

  /*
   * Tiêu đề chiếm nửa trái hàng 2. Neo tuyệt đối (không phải ô grid) vì hàng 1
   * đã là flex — xem comment đầu khối. Tràn ra ngoài lề .shell rồi padding vào
   * lại đúng bằng --gutter để đường kẻ ngăn 2 hàng chạy hết bề ngang màn hình,
   * y như dải nav cũ từng làm.
   *
   * padding-right chừa đúng bề rộng hamburger + 8px thở: câu mô tả dài hơn chỗ
   * trống sẽ cắt bằng ellipsis (đã khai ở .masthead__tagline) chứ không chui
   * xuống dưới nút.
   */
  .masthead__title {
    display: flex;
    position: absolute;
    top: 100%;
    right: calc(-1 * var(--gutter));
    left: calc(-1 * var(--gutter));
    min-height: var(--masthead-mobile-title-row);
    height: auto;
    align-items: center;
    padding-block: 10px;
    padding-left: var(--gutter);
    padding-right: calc(var(--gutter) + 44px);
    border-top: 0;
    border-bottom: 0;
    font-size: 16px;
  }

  .masthead__title::before {
    position: absolute;
    top: 0;
    right: var(--gutter);
    left: var(--gutter);
    height: 1px;
    background: var(--line);
    content: "";
  }

  /*
   * Mobile xếp DỌC: tên trang trên, câu mô tả dưới. Chiều ngang ở đây không đủ
   * cho 2 chữ nằm cạnh nhau (chỉ riêng câu mô tả đã dài hơn cả màn hình), nên
   * baseline của desktop mất nghĩa — đổi sang align-items: flex-start để 2 dòng
   * thẳng lề trái với nhau và thẳng với logo hàng trên.
   */
  .masthead__title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
  }

  .masthead__title-link { max-width: 100%; line-height: 1.15; }

  /*
   * Hiện lại câu mô tả (bị ẩn từ bậc 1199px trở xuống vì trên desktop nó nằm
   * CÙNG DÒNG với tên trang và không đủ chỗ). Ở đây nó có riêng một dòng nên
   * chỗ trống không còn là vấn đề — chỉ cần hạ cỡ chữ cho ra dáng phụ đề.
   * Rule này phải đứng SAU khối @media (max-width: 1199px) trong file.
   */
  .masthead__tagline {
    display: block;
    max-width: 100%;
    font-size: 12px;
    line-height: 1.2;
  }

  /*
   * Hamburger bám mép phải hàng 2, cùng chiều cao 48px với ô tiêu đề nên cả
   * chiều cao hàng là vùng bấm (rộng 44px = --tap-min, đủ chuẩn chạm).
   */
  .masthead__nav-toggle {
    display: inline-flex;
    position: absolute;
    top: calc(var(--masthead-mobile-logo-height) + var(--masthead-mobile-row-padding) + var(--masthead-mobile-row-padding));
    right: 0;
    width: 44px;
    height: var(--masthead-mobile-title-row);
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    border: 0;
    color: var(--white);
    background: none;
    cursor: pointer;
  }

  .masthead__nav-toggle-icon {
    width: 24px;
    height: 24px;
    font-size: 28px;
    line-height: 24px;
  }

  /*
   * Mở/đóng dùng CHUNG một nút; icon đổi sang dấu X khi đang mở để trạng thái
   * nhìn ra ngay. Hai <path> đứng sẵn trong markup và chỉ ẩn/hiện, KHÔNG dùng
   * thuộc tính CSS `d` — `d` mới được hỗ trợ gần đây và trình duyệt nào chưa
   * hiểu thì icon kẹt nguyên hình hamburger lúc menu đang mở.
   */
  .masthead__nav-toggle .is-close,
  .site-header.is-nav-open .masthead__nav-toggle .is-open { display: none; }
  .site-header.is-nav-open .masthead__nav-toggle .is-close { display: block; }

  /*
   * Cả 2 icon chưa wire hành vi nhưng khối này luôn có nội dung khác thật sự
   * bấm được (đăng nhập hoặc tên thành viên không bao giờ vắng mặt cả hai) nên
   * .masthead__tools là ô grow bình thường, đẩy cả cụm sát mép phải — không cần
   * trick display:contents như .masthead__account bên dưới.
   */
  .masthead__icon { display: none; }
  .masthead__tools {
    flex: 1 1 auto;
    gap: 10px;
    padding-left: 0;
    border-bottom: 0;
  }

  /*
   * Mua gói CÓ THỂ vắng mặt (Premium không thấy CTA). display: contents chứ
   * KHÔNG phải display: none — ẩn cả khối thì lúc CTA có hiện cũng bị ẩn theo.
   * contents xoá hẳn cái hộp khi rỗng: để nguyên thì gap 10px của .masthead vẫn
   * tính cho nó, đẩy nút mua gói (nếu có) thụt vào 10px so với mép phải không
   * cần thiết khi tools đã tự đẩy sát mép rồi.
   */
  .masthead__account { display: contents; }

  .brand { font-size: 18px; }
  /* Đăng nhập và nút Thành viên phải cùng cỡ chữ ở MỌI bậc, không chỉ desktop. */
  .masthead__login,
  .site-header .member-menu--primary .member-menu-trigger { align-self: center; font-size: 12px; }
  .site-header .member-menu--primary .member-menu-trigger__icon { font-size: 16px; }
  .site-header .member-menu--primary .member-menu-trigger { min-height: var(--tap-min); }
  .header-cta { min-height: var(--tap-min); padding-inline: 12px; font-size: 12px; }

  /* .masthead__tools đã lo phần đẩy về phải; member-menu chỉ cần co được. */
  .site-header .member-menu--primary { flex: 0 1 auto; align-self: stretch; justify-content: flex-end; }
  .site-header .member-menu--primary .member-menu-trigger { max-width: 100%; }
  .site-header .member-menu--primary .member-menu-trigger__name { max-width: 90px; }

  /*
   * Panel menu xổ xuống NGAY DƯỚI header (top = --header-height, tức đáy hàng
   * 2), tràn hết bề ngang màn hình. Mặc định display:none — chỉ hiện khi
   * header có .is-nav-open do header-nav.js gắn.
   *
   * display:none chứ không phải chỉ trượt ra ngoài màn hình: các mục menu bị ẩn
   * phải nằm ngoài thứ tự Tab và ngoài tầm đọc của screen reader khi menu đang
   * đóng, không thì người dùng bàn phím vẫn Tab được vào cái panel không ai
   * thấy.
   *
   * Panel ĐÈ LÊN nội dung trang (position:absolute, không đẩy layout) và vì vậy
   * phải có nền đục riêng — nền của .site-header không kéo dài xuống tới đây.
   * Nền đặc hơn header (0.96 vs 0.92) vì phía sau nó là nội dung trang thật,
   * không phải khoảng trống đầu trang.
   */
  .primary-nav {
    display: none;
    position: absolute;
    top: var(--header-height);
    /* Tràn ra khỏi lề .shell để panel chạm đúng 2 mép màn hình. */
    right: calc(-1 * var(--gutter));
    left: calc(-1 * var(--gutter));
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--gutter) 12px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgb(0 0 0 / 0.96);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    /* Panel dài hơn viewport (màn hình thấp, xoay ngang) thì tự cuộn dọc trong
       chính nó, không đẩy mục cuối ra ngoài tầm với. */
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-header.is-nav-open .primary-nav { display: flex; }

  /*
   * Mỗi mục một dòng, cao 44px (--tap-min) và trải hết bề ngang panel để cả
   * dòng là vùng bấm — trên mobile ngón tay không nhắm vào đúng mấy chữ được.
   * Chữ thẳng lề với tên trang ở hàng 2 và logo ở hàng 1 (cùng --gutter).
   */
  .primary-nav > a {
    flex: 0 0 auto;
    min-width: 0;
    min-height: var(--tap-min);
    justify-content: flex-start;
    margin-right: 0;
    padding-block: 10px;
    padding-inline: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 15px;
  }

  .primary-nav > a + a { border-top: 1px solid rgb(255 255 255 / 0.12); }

  /* Hero trang danh mục */
  .page-heading { min-height: 0; padding-top: 36px; padding-bottom: 30px; }
  .page-kicker { margin-bottom: 10px; font-size: 10px; }
  .page-title { font-size: clamp(30px, 8.5vw, 42px); }
  .page-intro { margin-top: 14px; font-size: 14px; line-height: 1.6; }
  .page-hero-cta-row { gap: 10px; margin-top: 20px; }
  .page-hero-cta-note { max-width: none; font-size: 12px; }

  /*
   * Thanh chủ đề: ở SM MỌI biến thể đều cuộn ngang, không riêng biến thể
   * carousel (>= 6 mục). Kiểu chia đều cột chỉ hợp lý khi mỗi cột còn đủ
   * ~150px; dưới 768px thì 4 mục đã xuống dưới 90px/mục.
   */
  .category-sidebar,
  .category-sidebar.is-stuck:not(.is-carousel) {
    height: var(--subnav-height);
    margin-bottom: var(--space-block);
    margin-inline: calc(-1 * var(--gutter));
  }

  .category-sidebar.is-carousel { height: var(--subnav-height); }

  .category-nav {
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: var(--gutter);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .category-nav::-webkit-scrollbar { display: none; }

  .category-link,
  .is-stuck .category-nav-wrap:not(.is-carousel) .category-link {
    flex: 0 0 auto;
    gap: 8px;
    margin: 8px 0;
    padding: 8px 14px;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .category-icon { width: 26px; height: 26px; }
  .category-icon .material-symbols-outlined { font-size: 20px; }
  .category-icon--number { font-size: 16px; }

  .category-name-detail { font-size: 13px; }
  .category-nav-wrap.is-carousel .category-name { font-size: 13px; }

  /* Dải đã tràn hết bề ngang màn hình nên không còn chỗ đặt mũi tên mà không
     đè lên mục đầu/cuối — dưới 768px chỉ dùng vuốt/cuộn. */
  .category-nav-wrap.has-overflow .category-nav-arrow { display: none; }

  /* Section header — thu cột số và bậc chữ, giữ nguyên cấu trúc 2 cột. */
  .section-header { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; margin-bottom: 24px; }
  .section-header__number { font-size: 22px; }
  .section-header__title { font-size: 22px; }
  .section-header__prefix,
  .section-header__subject { display: block; }
  .section-header__prefix { margin-bottom: 2px; }
  .section-header__description { margin-top: 6px; font-size: 14px; }

  .sub-section + .sub-section { margin-top: 40px; }
  .sub-section { padding-top: 24px; }
  .sub-section-header { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; margin-bottom: 20px; }
  .sub-section-header__code,
  .sub-section-header__title { font-size: 17px; }

  .section-header-2 { gap: 14px; margin-bottom: 22px; padding-bottom: 14px; }
  .section-header-2__title { font-size: 21px; }

  .breadcrumb__list { gap: 6px; font-size: 11px; }
  .content-empty-state { margin-bottom: var(--space-block); }

  /* Sân khấu khoá: bỏ khung 16:9 cố định — ở màn hẹp khung đó chỉ còn ~200px
     cao, không đủ chứa icon + tiêu đề 2 dòng + mô tả + nút. Cho cao theo nội
     dung với chiều cao tối thiểu vừa đủ để vẫn ra dáng "một vùng nội dung". */
  .locked-stage--video { aspect-ratio: auto; min-height: 62vw; max-height: none; }
  .locked-stage--document { min-height: 0; }
  .locked-stage .access-gate { width: calc(100% - 32px); height: auto; min-height: auto; margin-block: 16px; padding: 28px 20px; }
  .locked-stage .access-gate__icon { width: 46px; height: 46px; }
  .locked-stage .access-gate__icon .material-symbols-outlined { font-size: 24px; }
  .locked-stage .access-gate__title { margin-top: 16px; }
  .locked-stage .access-gate__body { font-size: 13.5px; }
  .locked-stage .access-gate__cta { width: 100%; margin-top: 18px; }

  /* Mobile vẫn giữ thông điệp trái và CTA phải như desktop. */
  .cta-bar__inner { flex-direction: row; align-items: center; gap: 12px; padding-block: 10px; }
  .cta-bar__text { font-size: 12px; line-height: 1.4; }
  .cta-bar__note { margin-top: 2px; font-size: 10px; line-height: 1.35; }
  .cta-bar__cta { width: auto; min-height: var(--tap-min); padding-inline: 14px; font-size: 11.5px; }

  .access-invite { padding: 20px; }
  .access-invite-dialog { padding: 30px 22px 26px; }
  .access-invite-title { font-size: 19px; }

  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 32px; padding: 56px 0; }
  .footer-brand {
    grid-column: 1 / -1;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
  }
  .footer-brand__identity {
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
  }
  .footer-brand__logo { height: 76px; }
  .footer-brand .footer-brand__product { margin-top: 20px; font-size: 20px; }
}

/* ---------- XS (<= 479px): mobile ---------- */

@media (max-width: 479px) {
  .brand { font-size: 17px; }
  .brand-icon { width: 24px; height: 24px; }
  .masthead__logo { height: var(--masthead-mobile-logo-height); }
  .masthead__login,
  .site-header .member-menu--primary .member-menu-trigger { font-size: 11px; }
  .header-cta { width: auto; min-width: 0; min-height: var(--tap-min); padding-inline: 10px; font-size: 11px; white-space: nowrap; }
  .header-cta__label { max-width: none; line-height: 1.2; text-align: center; }
  .site-header .member-menu--primary .member-menu-trigger { gap: 4px; }
  .member-menu--primary .member-menu-trigger__icon { font-size: 20px; }
  .site-header .member-menu--primary .member-menu-trigger__name { max-width: 46px; font-size: 10px; }
  .member-menu--primary .member-badge { min-height: 18px; padding-inline: 5px; font-size: 7px; }

  /* Trong header chính, icon + tên phải theo cỡ chữ của nút Đăng nhập (11px)
     chứ không theo bộ số của Membership Flow ở 4 dòng trên. */
  .site-header .member-menu--primary .member-menu-trigger__icon { font-size: 15px; }
  .site-header .member-menu--primary .member-menu-trigger__name { font-size: inherit; }

  /*
   * Bậc hẹp nhất: chỗ trống cho câu mô tả chỉ còn ~(vw - 16*2 - 44)px. Hạ cỡ
   * chữ để câu 54 ký tự vẫn đủ chỗ ở 360px thay vì bị ellipsis cắt mất mấy chữ
   * cuối; tên trang hạ theo để giữ đúng bậc chênh lệch giữa 2 dòng.
   */
  .masthead__title { font-size: 15px; }
  .masthead__tagline { font-size: 11px; }

  .primary-nav > a { font-size: 14px; }

  /* Tiêu đề + CTA "Xem tất cả" không còn đủ chỗ đứng cạnh nhau — cho xuống
     dòng thay vì bóp nút, nút vẫn giữ nguyên kích thước bấm được. */
  .section-header-2 { flex-wrap: wrap; }
  .section-header-2__title { flex: 1 1 100%; font-size: 20px; }

  /* Điện thoại hẹp chỉ giữ thông điệp chính + CTA; câu liệt kê dài làm thanh
     dính đáy cao thêm một dòng và che nhiều nội dung đang đọc. */
  .cta-bar__note { display: none; }

  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; padding: 42px 0 36px; }
  .footer-brand { grid-column: 1 / -1; padding-bottom: 22px; }
  .footer-brand__identity { padding-bottom: 18px; }
  .footer-brand__logo { height: 68px; }
  .footer-brand .footer-brand__product { margin-top: 18px; font-size: 19px; }
  .footer-bottom { min-height: 0; align-items: flex-start; flex-direction: column; gap: 12px; padding: 18px 0; }
}

/* ==================================================
   Lớp cảm ứng — thiết bị KHÔNG hover được (tablet, mobile)
   ==================================================
   Quy tắc bắt buộc (UI-DESIGN-STANDARDS.md §14.4): mọi affordance chỉ xuất
   hiện khi hover phải có bản "luôn hiện" ở đây. Người dùng cảm ứng không có
   cách nào khám phá ra một nút chỉ hiện lúc rê chuột.

   Dùng (hover: none) chứ KHÔNG dùng max-width — đây là năng lực thiết bị,
   không phải kích thước màn: laptop có màn cảm ứng vẫn có chuột nên vẫn là
   (hover: hover) và giữ nguyên trải nghiệm desktop.

   Mỗi page CSS tự có khối (hover: none) riêng cho card của trang đó — page
   CSS nạp sau base.css nên rule ở đây sẽ thua nếu cùng specificity. */

@media (hover: none) {
  /* :hover "dính" sau khi nhấc tay — bỏ hẳn phần dịch chuyển. */
  .header-cta:hover,
  .section-header-2__cta:hover { transform: none; }

  /* Vuốt ngang là thao tác tự nhiên trên cảm ứng; mũi tên chỉ có nghĩa với
     chuột và còn che mất mục đầu/cuối của dải. */
  .category-nav-wrap.has-overflow .category-nav-arrow { display: none; }

  /* Vùng bấm tối thiểu 44px (WCAG 2.5.5) cho các nút icon nhỏ. */
  .access-invite-close,
  .ask-close { width: var(--tap-min); height: var(--tap-min); }

  .footer-column a { padding-block: 4px; }
  /* Các CTA phân quyền: bỏ hiệu ứng hover bị kẹt sau khi chạm. Bản thân
     chúng đã là nút đặc/viền rõ nên không cần thêm affordance. */
  .access-gate__cta:hover,
  .cta-bar__cta:hover,
  .btn-google:hover { transform: none; }
  .btn-google:hover { border-color: var(--white); background: var(--white); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/*
 * Trailer Course chèn vào entry-box gốc của Tutor — xem template-parts/layout/
 * video-embed.php. aspect-ratio thay vì padding-bottom hack, đủ dùng vì nơi
 * render (card sidebar của Tutor) đã có width cố định.
 */
.bess-video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 16px; overflow: hidden; border-radius: 4px; }
.bess-video-embed iframe, .bess-video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bess-video-empty { display: none; }

/* ---------- 404 ---------- */

.not-found-page {
  display: grid;
  min-height: min(620px, calc(100dvh - 180px));
  place-items: center;
  padding-block: clamp(40px, 8vw, 88px);
}

.not-found-panel {
  display: flex;
  width: min(620px, 100%);
  min-height: 360px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 6vw, 64px);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
  background: rgb(255 255 255 / 0.025);
}

.not-found-panel__code { margin: 0; color: rgb(255 255 255 / 0.5); font-size: 13px; font-weight: 800; letter-spacing: 0.16em; }
.not-found-panel h1 { margin: 14px 0 0; color: var(--white); font-size: clamp(26px, 4vw, 40px); line-height: 1.2; }
.not-found-panel__body { max-width: 460px; margin: 12px 0 0; color: var(--body); font-size: 14px; line-height: 1.65; }
.not-found-panel__cta { margin-top: 26px; }

/* ---------- Semantic button adapters for legacy component class names ---------- */

.access-gate__cta.bess-button--brand,
.cta-bar__cta.bess-button--brand {
  border-color: var(--teal-brand);
  color: var(--teal-brand-ink);
  background: var(--teal-brand);
}

.access-gate__cta.bess-button--brand:hover,
.cta-bar__cta.bess-button--brand:hover {
  border-color: var(--teal-brand-hover);
  color: var(--teal-brand-ink);
  background: var(--teal-brand-hover);
}

.section-header-2__cta.bess-button--text-accent {
  min-height: 0;
  padding: 0;
  border: 0;
  color: var(--white);
  background: transparent;
}
.section-header-2__cta.bess-button--text-accent:hover { color: var(--white); }

@media (max-width: 1023px) {
  .section-header-2__cta.bess-button--text-accent {
    min-height: var(--tap-min);
    padding-block: 10px;
  }

  .footer-column a,
  .member-menu--footer .member-menu-trigger,
  .footer-social a {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
  }
}

.btn-google.bess-button--white,
.ask-submit.bess-button--white {
  border-color: var(--white);
  color: #101012;
  background: var(--white);
}
.btn-google.bess-button--white:hover,
.ask-submit.bess-button--white:hover {
  border-color: #e2e3e6;
  color: #101012;
  background: #e2e3e6;
}

.ask-success-secondary.bess-button--outline-muted {
  border-color: var(--button-gray-border);
  color: var(--white);
  background: transparent;
}
.ask-success-secondary.bess-button--outline-muted:hover {
  border-color: var(--button-gray-border-hover);
  color: var(--white);
  background: rgb(255 255 255 / 0.06);
}


@media (hover: none) {
  .bess-button:hover { transform: none; }
}

/* ---------- Learning cards v2 (old card system intentionally preserved) ---------- */

.learning-card {
  display: grid;
  min-width: 0;
  height: 100%;
  align-content: start;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #202124;
  background: transparent;
  text-decoration: none;
  transition: transform 220ms ease;
}
.learning-card:hover { transform: translateY(-2px); }
.learning-card__media { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #e8eaed; transition: border-color 200ms ease; }
.learning-card:hover .learning-card__media { border-color: rgb(255 255 255 / 48%); }
.learning-card__media > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 320ms ease; }
.learning-card:hover .learning-card__media > img { transform: scale(1.025); }
.learning-card__play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 50%;
  color: #fff;
  background: rgb(10 11 13 / 62%);
  box-shadow: 0 6px 18px rgb(0 0 0 / 24%);
  pointer-events: none;
  place-items: center;
  transform: translate(-50%, -50%);
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
  backdrop-filter: blur(4px);
}
.learning-card__play svg { width: 21px; height: 21px; fill: currentColor; transform: translateX(1px); }
.learning-card:hover .learning-card__play { border-color: #fff; background: rgb(10 11 13 / 78%); transform: translate(-50%, -50%) scale(1.06); }
.learning-card__placeholder { display: grid; width: 100%; height: 100%; place-items: center; background: linear-gradient(145deg, #25282b, #101112); color: rgb(255 255 255 / 58%); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.learning-card__copy { display: grid; min-width: 0; align-content: start; gap: 7px; padding-top: 13px; }
.learning-card__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; }
.learning-card__title { font-size: 17px; line-height: 1.4; }
.learning-card__meta { color: #62666b; font-size: 12px; line-height: 1.45; }

.learning-card__metrics { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 7px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 32%); }
.learning-card__metrics span { display: grid; gap: 1px; color: rgb(255 255 255 / 72%); font-size: 9px; line-height: 1.25; }
.learning-card__metrics b { color: #fff; font-size: 15px; }

.learning-card--landscape .learning-card__media { aspect-ratio: 16 / 9; }
.learning-card--lesson {
  grid-template-rows: minmax(92px, 1fr) auto;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgb(29 29 31 / 14%);
  border-radius: 10px;
  color: #1d1d1f;
  background: linear-gradient(180deg, #fff 0%, #f7f8f9 46%, #eceef1 100%);
  box-shadow: 0 1px 1px rgb(0 0 0 / 5%), 0 14px 34px rgb(0 0 0 / 28%);
  transition: border-color 200ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.learning-card--lesson:hover { border-color: rgb(29 29 31 / 28%); background: linear-gradient(180deg, #fff 0%, #f7f8f9 46%, #eceef1 100%); box-shadow: 0 1px 1px rgb(0 0 0 / 5%), 0 20px 44px rgb(0 0 0 / 38%); }
.learning-card--lesson .learning-card__copy { order: -1; padding-top: 0; }
.learning-card--lesson .learning-card__media { border-color: rgb(29 29 31 / 14%); border-radius: 7px; }
.learning-card--lesson:hover .learning-card__media { border-color: rgb(29 29 31 / 28%); }
.learning-card--lesson .learning-card__title { color: #1d1d1f; font-size: 17px; }
.learning-card--lesson .learning-card__meta { color: #6e6e73; }
.lesson-card__number { display: none; color: #6e6e73; font-size: 11px; font-weight: 800; line-height: 1; }
.lesson-card__duration {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 8px;
  padding: 5px 7px;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 5px;
  color: #fff;
  background: rgb(10 11 13 / 78%);
  box-shadow: 0 3px 10px rgb(0 0 0 / 22%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.learning-card--asset .learning-card__media { display: grid; aspect-ratio: 16 / 9; padding: 5%; place-items: center; border-color: var(--line); background: #f4f5f6; box-shadow: none; }
.learning-card--asset .learning-card__media > img { object-fit: contain; }
.learning-card--asset:hover .learning-card__media > img { transform: none; }
.learning-card--asset .learning-card__title { font-size: 15px; }

@media (max-width: 767px) {
  .learning-card__media { border-radius: 8px; }
  .learning-card__play { width: 42px; height: 42px; }
  .learning-card__play svg { width: 18px; height: 18px; }
  .learning-card--lesson { grid-template-rows: minmax(84px, 1fr) auto; gap: 10px; padding: 10px; }
  .learning-card--lesson .learning-card__media { border-radius: 6px; }
}

.learning-closing-cta { padding: clamp(68px, 8vw, 104px) 0; border-top: 1px solid var(--line); color: var(--white); background: var(--surface); }
.learning-closing-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.learning-closing-cta__inner p { margin: 0 0 18px; color: var(--body); font-size: 16px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.learning-closing-cta__inner h2 { max-width: 720px; margin: 0; font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -.04em; line-height: 1.12; }
.learning-closing-cta__inner div > span { display: block; max-width: 720px; margin-top: 14px; color: var(--body); line-height: 1.65; }
.learning-closing-cta__inner > a { flex: 0 0 auto; }

@media (max-width: 767px) {
  .learning-closing-cta__inner { align-items: flex-start; flex-direction: column; }
}