/* NDH Academy — Layout sections (header, hero, footer...) */

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-header);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-default);
}
.site-header__row {
  display: flex; align-items: center; gap: var(--space-8);
  height: 84px;
}
.brand { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.brand__mark {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--color-neutral-900);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary-400);
  font-family: var(--font-heading); font-weight: 700; font-size: 18px;
}
.brand__mark--image { background: transparent; object-fit: contain; }
.brand__name { font-family: var(--font-heading); font-weight: 700; font-size: var(--font-size-xl); line-height: 1; }
.brand__tagline { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }

.main-nav { display: flex; align-items: center; gap: var(--space-8); }
.main-nav a { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-secondary); transition: color var(--duration-micro); }
.main-nav a:hover, .main-nav a.is-active { color: var(--text-primary); }

.header-search { flex: 1; max-width: 380px; position: relative; }
.header-search input {
  width: 100%; height: 44px; border-radius: var(--radius-full);
  border: 1px solid var(--border-default); background: var(--bg-surface);
  padding-inline: var(--space-4) 44px; font-size: var(--font-size-sm); font-family: inherit;
}
.header-search svg { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-secondary); }

.header-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.header-user { display: flex; align-items: center; gap: var(--space-2); padding-left: var(--space-3); border-left: 1px solid var(--border-default); }
.header-user .avatar { width: 40px; height: 40px; font-size: 14px; }
.header-user__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1.2; }
.header-user__role { font-size: 12px; color: var(--text-secondary); }
.nav-toggle {
  display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: none;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.mobile-nav {
  display: none;
  position: fixed; inset: 84px 0 0 0; z-index: 40;
  background: var(--bg-page); padding: var(--space-6);
  overflow-y: auto;
}
.mobile-nav.is-open { display: block; }
.mobile-nav a { display: block; padding: var(--space-4) 0; font-size: var(--font-size-lg); border-bottom: 1px solid var(--border-default); }

@media (max-width: 1024px) {
  .main-nav, .header-search { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 560px) {
  .header-actions > .btn { display: none; }
}

/* Reveal có chủ đích (animation-rules.md #1, #3) */
.js-reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.js-reveal.is-visible { opacity: 1; transform: none; }

/* ===== Hero ===== */
.hero {
  position: relative;
  background: var(--color-neutral-900);
  color: var(--text-inverse);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 400px at 85% 20%, rgba(99,102,241,0.16), transparent 70%),
    radial-gradient(500px 500px at 100% 100%, rgba(99,102,241,0.10), transparent 70%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-16);
  align-items: center;
  padding-block: var(--space-32);
}
.hero__eyebrow { color: var(--color-primary-400); }
.hero__eyebrow::before { background: var(--color-primary-400); }
.hero__title { font-size: clamp(36px, 4.2vw, 60px); margin-top: var(--space-4); }
.hero__title em { color: var(--color-primary-400); font-style: normal; }
.hero__desc { margin-top: var(--space-5, 20px); font-size: var(--font-size-lg); color: var(--text-inverse-secondary); max-width: 480px; }
.hero__actions { display: flex; gap: var(--space-4); margin-top: var(--space-8); }
.hero__stats { display: flex; gap: var(--space-8); margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid rgba(255,255,255,0.12); }
.hero__stats .stat__value { color: var(--text-inverse); }
.hero__stats .stat__label { color: var(--text-inverse-secondary); }

.hero__visual { position: relative; aspect-ratio: 4/5; }
.hero__frame {
  position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
  display: flex; align-items: center; justify-content: center;
}
.hero__frame svg { width: 45%; color: rgba(129,140,248,0.55); }
.hero__float-card {
  position: absolute;
  background: var(--bg-page);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
  max-width: 230px;
}
.hero__float-card--top { top: -6%; left: -8%; }
.hero__float-card--bottom { bottom: -6%; right: -8%; }
.hero__float-card strong { display: block; font-size: var(--font-size-sm); }
.hero__float-card span { font-size: 12px; color: var(--text-secondary); }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; padding-block: var(--space-24); }
  .hero__visual { width: 100%; max-width: 340px; margin-inline: auto; }
  .hero__stats { flex-wrap: wrap; row-gap: var(--space-6); }
}
@media (max-width: 560px) {
  .hero__float-card { max-width: 180px; padding: var(--space-3); }
  .hero__float-card--top { top: 4%; left: 4%; }
  .hero__float-card--bottom { bottom: 4%; right: 4%; }
}

/* ===== Category grid ===== */
.category-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-6); }
.category-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  transition: border-color var(--duration-micro), box-shadow var(--duration-micro);
}
.category-card:hover { border-color: var(--color-primary-300); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.category-card__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.category-card__count { font-size: 12px; color: var(--text-secondary); }

/* Icon phân loại danh mục — màu chỉ để gắn nhãn phân biệt danh mục, không phải accent thương hiệu */
.cat-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cat-icon svg { width: 22px; height: 22px; }
.cat-icon--blue   { background: var(--tag-blue-bg);   color: var(--tag-blue-fg); }
.cat-icon--purple { background: var(--tag-purple-bg); color: var(--tag-purple-fg); }
.cat-icon--orange { background: var(--tag-orange-bg); color: var(--tag-orange-fg); }
.cat-icon--teal   { background: var(--tag-teal-bg);   color: var(--tag-teal-fg); }
.cat-icon--rose   { background: var(--tag-rose-bg);   color: var(--tag-rose-fg); }
.cat-icon--green  { background: var(--tag-green-bg);  color: var(--tag-green-fg); }
.cat-icon--amber  { background: var(--tag-amber-bg);  color: var(--tag-amber-fg); }
.cat-icon--indigo { background: var(--tag-indigo-bg); color: var(--tag-indigo-fg); }
@container home-main (max-width: 900px) { .category-grid { grid-template-columns: repeat(3, 1fr); } }
@container home-main (max-width: 480px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .category-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== Course grid + tabs ===== */
.section-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--border-default); margin-bottom: var(--space-8); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  border: none; background: none; font-family: inherit;
  padding: var(--space-3) var(--space-1); margin-right: var(--space-6);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-secondary);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--duration-micro);
  white-space: nowrap; flex-shrink: 0;
}
.tabs button.is-active { color: var(--text-primary); border-color: var(--color-primary-500); font-weight: var(--font-weight-semibold); }
.course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
@container home-main (max-width: 1100px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@container home-main (max-width: 560px) { .course-grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 1100px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .course-grid { grid-template-columns: minmax(0,1fr); } }

/* ===== Why choose ===== */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.feature-item { display: flex; gap: var(--space-4); }
.feature-item h3 { font-size: var(--font-size-lg); font-family: var(--font-body); }
.feature-item p { margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--font-size-sm); }
@container home-main (max-width: 900px) { .feature-grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 900px) { .feature-grid { grid-template-columns: minmax(0,1fr); } }

/* ===== Instructor spotlight ===== */
.instructor-section { background: var(--bg-surface); }
.instructor-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-16); align-items: center; }
.instructor-portrait {
  aspect-ratio: 3/4; border-radius: var(--radius-lg);
  background: var(--color-neutral-900);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary-400);
  position: relative;
}
.instructor-portrait svg { width: 30%; }
.instructor-badge {
  position: absolute; bottom: var(--space-4); left: var(--space-4); right: var(--space-4);
  background: var(--bg-page); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: var(--space-4); display: flex; justify-content: space-between; gap: var(--space-3);
}
.instructor-badge .stat__value { font-size: var(--font-size-2xl); }
.instructor-quote { font-family: var(--font-heading); font-size: var(--font-size-2xl); line-height: 1.4; margin-top: var(--space-6); }
.instructor-credentials { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
@media (max-width: 900px) { .instructor-grid { grid-template-columns: 1fr; } }

/* ===== Testimonials ===== */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.testimonial-card { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.testimonial-card__quote { color: var(--text-primary); font-size: var(--font-size-base); }
.testimonial-card__person { display: flex; align-items: center; gap: var(--space-3); }
.testimonial-card__person .avatar { width: 44px; height: 44px; font-size: 14px; }
@container home-main (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* ===== CTA banner ===== */
.cta-banner {
  background: var(--color-neutral-900);
  color: var(--text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-16);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(500px 300px at 90% 0%, rgba(99,102,241,0.22), transparent 70%);
}
.cta-banner__content { position: relative; max-width: 520px; }
.cta-banner h2 { color: var(--text-inverse); font-size: var(--font-size-3xl); }
.cta-banner p { color: var(--text-inverse-secondary); margin-top: var(--space-3); }
.cta-banner__actions { position: relative; display: flex; gap: var(--space-4); flex-shrink: 0; }
@media (max-width: 800px) { .cta-banner { flex-direction: column; align-items: flex-start; padding: var(--space-8); } }

/* ===== Footer ===== */
.site-footer { background: var(--color-neutral-950); color: var(--text-inverse-secondary); padding-block: var(--space-12) var(--space-4); }
.site-footer > .content-pad { padding-top: 0; padding-bottom: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-8); }
.footer-grid h4 { color: var(--text-inverse); font-size: var(--font-size-sm); font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-4); }
.footer-grid ul li { margin-bottom: var(--space-3); font-size: var(--font-size-sm); }
.footer-grid a:hover { color: var(--text-inverse); }
.footer-brand p { margin-top: var(--space-4); max-width: 280px; font-size: var(--font-size-sm); }
.footer-contact li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--font-size-sm); }
.footer-contact svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--color-primary-400); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,0.1); font-size: var(--font-size-sm); flex-wrap: wrap; gap: var(--space-4); }
.social-row { display: flex; gap: var(--space-3); }
.social-row a { width: 36px; height: 36px; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; }
.payment-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.payment-row span {
  height: 24px; padding-inline: var(--space-2); border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.08); color: var(--text-inverse-secondary);
  font-size: 10px; font-weight: var(--font-weight-semibold); letter-spacing: 0.02em;
  display: flex; align-items: center;
}
@media (max-width: 900px) {
  .site-footer { padding-block: var(--space-8) var(--space-3); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .footer-bottom { margin-top: var(--space-4); padding-top: var(--space-3); }
}
@media (max-width: 640px) {
  .site-footer { padding-block: var(--space-6) var(--space-3); }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-8); column-gap: var(--space-4); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: none; }
  .footer-bottom { margin-top: var(--space-4); padding-top: var(--space-3); justify-content: center; text-align: center; }
}

/* ===== Auth pages (Đăng ký / Đăng nhập) =====
   Layout tách đôi: bên trái giới thiệu thương hiệu + lợi ích (tối, tái dùng
   phong cách home-hero), bên phải là form — chỉ một mục tiêu duy nhất trên
   màn hình (ux-rules.md #1), ẩn cột giới thiệu ở tablet trở xuống để form
   không bị ép hẹp. */
.auth-page { min-height: 100vh; display: flex; flex-direction: column; }
.auth-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-8); }
.auth-topbar__hint { font-size: var(--font-size-sm); color: var(--text-secondary); }
.auth-topbar__hint a { color: var(--color-primary-600); font-weight: var(--font-weight-semibold); margin-left: var(--space-1); }
@media (max-width: 640px) { .auth-topbar { padding: var(--space-4); } }

.auth-layout { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.auth-visual {
  position: relative;
  background: var(--color-neutral-900);
  color: var(--text-inverse);
  display: flex; align-items: center;
  padding: var(--space-16);
  overflow: hidden;
}
.auth-visual::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(560px 400px at 85% 15%, rgba(99,102,241,0.2), transparent 70%);
  pointer-events: none;
}
.auth-visual__content { position: relative; max-width: 440px; margin-inline: auto; }
.auth-visual__content .eyebrow { color: var(--color-primary-300); }
.auth-visual__content .eyebrow::before { background: var(--color-primary-400); }
.auth-visual__title { margin-top: var(--space-4); font-size: clamp(28px, 3vw, 38px); color: var(--text-inverse); }
.auth-visual__title em { color: var(--color-primary-400); font-style: normal; }
.auth-visual__desc { margin-top: var(--space-3); color: var(--text-inverse-secondary); font-size: var(--font-size-lg); }

.auth-benefit-list { margin-top: var(--space-10, 40px); display: flex; flex-direction: column; gap: var(--space-6); }
.auth-benefit { display: flex; gap: var(--space-4); align-items: flex-start; }
.auth-benefit__icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); flex-shrink: 0;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center; color: var(--color-primary-300);
}
.auth-benefit__icon svg { width: 20px; height: 20px; }
.auth-benefit strong { display: block; color: var(--text-inverse); font-size: var(--font-size-sm); }
.auth-benefit span { font-size: var(--font-size-sm); color: var(--text-inverse-secondary); }

.auth-visual__stats { display: flex; gap: var(--space-8); margin-top: var(--space-10, 40px); padding-top: var(--space-8); border-top: 1px solid rgba(255,255,255,0.12); }
.auth-visual__stats .stat__value { color: var(--text-inverse); font-size: var(--font-size-2xl); }
.auth-visual__stats .stat__label { color: var(--text-inverse-secondary); }

@media (max-width: 1024px) {
  .auth-layout { grid-template-columns: minmax(0, 1fr); }
  .auth-visual { display: none; }
}

.auth-form-panel { display: flex; align-items: center; justify-content: center; padding: var(--space-12) var(--space-8); }
.auth-card { width: 100%; max-width: 440px; }
.auth-card__head h2 { font-size: var(--font-size-3xl); }
.auth-card__head p { margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--font-size-sm); }
.auth-card__head a { color: var(--color-primary-600); font-weight: var(--font-weight-semibold); }

.social-auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-8); }
.social-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 400px) { .social-auth-row { grid-template-columns: 1fr; } }

.auth-form-panel .divider-text { margin-block: var(--space-6); }
.auth-form .field { margin-bottom: var(--space-5, 20px); }
.auth-form__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.auth-form__row .checkbox-row { padding-block: 0; }
.auth-form__forgot { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-primary-600); white-space: nowrap; }
.auth-form__forgot:hover { color: var(--color-primary-700); }
.field.is-error input { border-color: var(--color-error); }
.field__error { display: none; font-size: 12px; color: var(--color-error); }
.field.is-error .field__error { display: block; }

.password-field { position: relative; }
.password-field input { padding-right: 48px; }
.password-toggle {
  position: absolute; right: 4px; top: 4px; bottom: 4px; width: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text-secondary);
}
.password-toggle:hover { color: var(--text-primary); }
.password-toggle svg { width: 18px; height: 18px; }

.password-strength { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.password-strength__track { flex: 1; height: 4px; border-radius: var(--radius-full); background: var(--color-neutral-200); overflow: hidden; }
.password-strength__fill { display: block; height: 100%; width: 0%; border-radius: var(--radius-full); background: var(--color-neutral-300); transition: width var(--duration-micro) var(--ease-out), background var(--duration-micro) var(--ease-out); }
.password-strength__label { font-size: 12px; color: var(--text-secondary); flex-shrink: 0; min-width: 64px; text-align: right; }

.checkbox-row--terms { align-items: flex-start; padding-block: var(--space-2) var(--space-5, 20px); }
.checkbox-row--terms input { margin-top: 3px; }
.checkbox-row--terms a { color: var(--color-primary-600); font-weight: var(--font-weight-medium); }
.checkbox-row--terms.is-error span { color: var(--color-error); }

.auth-card__foot { margin-top: var(--space-6); text-align: center; font-size: 12px; color: var(--text-secondary); }

/* ===== Blog listing & bài viết chi tiết ===== */

/* Pill-style topic tabs (biến thể của .tabs cho trang blog, tái dùng JS lọc theo data-tab) */
.tabs--pills { border-bottom: none; gap: var(--space-3); margin-bottom: var(--space-10, 40px); flex-wrap: wrap; }
.tabs--pills button {
  display: flex; align-items: center; gap: var(--space-2);
  margin-right: 0; margin-bottom: 0;
  padding: var(--space-3) var(--space-5, 20px);
  border: 1px solid var(--border-default); border-radius: var(--radius-full);
  color: var(--text-secondary); font-weight: var(--font-weight-medium);
}
.tabs--pills button svg { width: 16px; height: 16px; }
.tabs--pills button.is-active { background: var(--color-neutral-900); border-color: var(--color-neutral-900); color: var(--text-inverse); }

/* Bài viết nổi bật */
.featured-post { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.featured-post__media { position: relative; background: var(--color-neutral-900); color: var(--color-primary-300); display: flex; align-items: center; justify-content: center; min-height: 280px; }
.featured-post__media svg { width: 30%; max-width: 96px; }
.featured-post__body { padding: var(--space-8) var(--space-8) var(--space-8) 0; display: flex; flex-direction: column; }
.featured-post__title { font-size: var(--font-size-2xl); margin-top: var(--space-3); }
.featured-post__desc { margin-top: var(--space-3); color: var(--text-secondary); }
.featured-post__foot { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; }
.featured-post__foot .avatar { width: 36px; height: 36px; font-size: 13px; }
.featured-post__author strong { display: block; font-size: var(--font-size-sm); }
.featured-post__author span { font-size: 12px; color: var(--text-secondary); }
.featured-post__foot .btn { margin-left: auto; }
@media (max-width: 900px) {
  .featured-post { grid-template-columns: minmax(0,1fr); }
  .featured-post__body { padding: var(--space-6); }
  .featured-post__media { min-height: 220px; }
}

/* Meta cho thẻ bài viết (tái dùng cấu trúc .course-card) */
.post-card__meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: auto; }

/* Bộ sưu tập nổi bật */
.collection-card {
  position: relative; border-radius: var(--radius-lg); padding: var(--space-6);
  background: var(--color-neutral-900); color: var(--text-inverse); overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-8); min-height: 150px;
}
.collection-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(200px 140px at 100% 0%, var(--collection-glow, rgba(99,102,241,0.28)), transparent 70%); }
.collection-card * { position: relative; }
.collection-card__icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); }
.collection-card__icon svg { width: 22px; height: 22px; }
.collection-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.collection-card h3 { font-size: var(--font-size-lg); color: var(--text-inverse); }
.collection-card span { font-size: var(--font-size-sm); color: var(--text-inverse-secondary); }
.collection-card__arrow { width: 32px; height: 32px; border-radius: var(--radius-full); background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.collection-card--green { --collection-glow: rgba(16,185,129,0.28); }
.collection-card--blue { --collection-glow: rgba(37,99,235,0.28); }
.collection-card--amber { --collection-glow: rgba(217,119,6,0.28); }
.collection-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@container home-main (max-width: 900px) { .collection-grid { grid-template-columns: repeat(2, 1fr); } }
@container home-main (max-width: 560px) { .collection-grid { grid-template-columns: minmax(0,1fr); } }
/* Trang không nằm trong .home-main (không có container "home-main") vẫn cần fallback theo viewport —
   cùng ngưỡng với container query ở trên để tránh 2 cơ chế cho kết quả khác nhau. */
@media (max-width: 900px) { .collection-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .collection-grid { grid-template-columns: minmax(0,1fr); } }

/* Tác giả nổi bật */
.author-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5, 20px); border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.author-card .avatar { width: 52px; height: 52px; font-size: 15px; }
.author-card__body { min-width: 0; flex: 1; }
.author-card__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.author-card__role { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.author-card__stat { font-size: 12px; color: var(--text-secondary); margin-top: var(--space-2); display: flex; align-items: center; gap: 4px; }
.author-card__stat strong { color: var(--text-primary); }
.author-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@container home-main (max-width: 900px) { .author-grid { grid-template-columns: repeat(2, 1fr); } }
@container home-main (max-width: 560px) { .author-grid { grid-template-columns: minmax(0,1fr); } }
/* Trang không nằm trong .home-main (không có container "home-main") vẫn cần fallback theo viewport —
   cùng ngưỡng với container query ở trên để tránh 2 cơ chế cho kết quả khác nhau. */
@media (max-width: 900px) { .author-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .author-grid { grid-template-columns: minmax(0,1fr); } }

/* Danh sách trong widget (danh mục / chủ đề phổ biến) */
.widget-list-row { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-3); font-size: var(--font-size-sm); }
.widget-list-row + .widget-list-row { border-top: 1px solid var(--border-default); }
.widget-list-row span:last-child { color: var(--text-secondary); font-size: var(--font-size-xs); }
.tag-pill-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Form đăng ký nhận bản tin (dùng chung .promo-widget) */
.newsletter-form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5, 20px); }
.newsletter-form input { height: 46px; padding-inline: var(--space-4); border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: #fff; font-family: inherit; font-size: var(--font-size-sm); }
.newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-form small { font-size: 11px; color: var(--text-inverse-secondary); }

/* ===== Bài viết chi tiết ===== */
.article-head__badges { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.article-head__title { font-size: clamp(26px, 3vw, 36px); }
.article-head__desc { margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--font-size-lg); max-width: 760px; }
.article-head__meta { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--border-default); flex-wrap: wrap; }
.article-head__author { display: flex; align-items: center; gap: var(--space-3); }
.article-head__author .avatar { width: 44px; height: 44px; font-size: 14px; }
.article-head__author strong { display: flex; align-items: center; gap: 4px; font-size: var(--font-size-sm); }
.article-head__author strong svg { width: 14px; height: 14px; color: var(--color-primary-500); }
.article-head__author span { display: block; font-size: 12px; color: var(--text-secondary); }
.article-head__stats { display: flex; gap: var(--space-4); font-size: var(--font-size-sm); color: var(--text-secondary); }
.article-head__actions { display: flex; gap: var(--space-2); margin-left: auto; }
@media (max-width: 640px) { .article-head__actions { margin-left: 0; width: 100%; } }

.article-cover { aspect-ratio: 21/9; border-radius: var(--radius-lg); background: var(--color-neutral-900); color: var(--color-primary-300); display: flex; align-items: center; justify-content: center; margin-top: var(--space-8); }
.article-cover svg { width: 15%; max-width: 84px; }

.article-body { margin-top: var(--space-8); color: var(--text-primary); font-size: var(--font-size-base); max-width: 760px; }
.article-body > p { color: var(--text-secondary); margin-bottom: var(--space-5, 20px); }
.article-body h2 { font-size: var(--font-size-2xl); margin-top: var(--space-12); margin-bottom: var(--space-4); scroll-margin-top: 104px; }
.article-body h3 { font-size: var(--font-size-lg); margin-top: var(--space-8); margin-bottom: var(--space-3); }
.article-body .plain-list { display: flex; flex-direction: column; gap: var(--space-2); color: var(--text-secondary); font-size: var(--font-size-sm); padding-left: var(--space-5, 20px); list-style: disc; margin-bottom: var(--space-5, 20px); }

.callout { display: flex; gap: var(--space-4); border-radius: var(--radius-md); padding: var(--space-5, 20px); margin-block: var(--space-6); border: 1px solid; }
.callout__icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.callout__icon svg { width: 18px; height: 18px; }
.callout h4 { font-size: var(--font-size-sm); margin-bottom: 4px; }
.callout p { font-size: var(--font-size-sm); color: var(--text-secondary); }
.callout--tip { background: var(--color-primary-50); border-color: var(--color-primary-100); }
.callout--tip .callout__icon { background: var(--color-primary-100); color: var(--color-primary-600); }
.callout--success { background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.2); }
.callout--success .callout__icon { background: rgba(22,163,74,0.14); color: var(--color-success); }

.skill-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-block: var(--space-6); }
.skill-tile { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-4); text-align: center; }
.skill-tile .icon-tile { margin-inline: auto; margin-bottom: var(--space-3); width: 44px; height: 44px; }
.skill-tile .icon-tile svg { width: 20px; height: 20px; }
.skill-tile strong { display: block; font-size: var(--font-size-sm); }
.skill-tile p { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
@media (max-width: 640px) { .skill-grid { grid-template-columns: repeat(2, 1fr); } }

.inline-course-promo { display: flex; align-items: center; gap: var(--space-5, 20px); background: var(--color-primary-50); border: 1px solid var(--color-primary-100); border-radius: var(--radius-lg); padding: var(--space-5, 20px); margin-block: var(--space-8); }
.inline-course-promo__media { width: 96px; aspect-ratio: 1/1; border-radius: var(--radius-md); background: var(--color-neutral-900); color: var(--color-primary-300); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.inline-course-promo__body { flex: 1; min-width: 0; }
.inline-course-promo__eyebrow { font-size: 11px; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-primary-600); }
.inline-course-promo__title { font-size: var(--font-size-lg); margin-top: 4px; }
.inline-course-promo__meta { display: flex; gap: var(--space-3); font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: var(--space-2); flex-wrap: wrap; }
.inline-course-promo__price { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-3); }
.inline-course-promo__price strong { font-size: var(--font-size-lg); }
.inline-course-promo__price del { font-size: var(--font-size-sm); color: var(--text-secondary); }
@media (max-width: 640px) { .inline-course-promo { flex-direction: column; align-items: flex-start; } }

.feedback-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-5, 20px); margin-top: var(--space-10, 40px); }
.feedback-row__stars { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.feedback-row__stars svg { width: 18px; height: 18px; color: var(--color-primary-500); }
.feedback-row__share { display: flex; align-items: center; gap: var(--space-3); }
.feedback-row__share a { width: 36px; height: 36px; border-radius: var(--radius-full); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }

.author-bio { display: flex; gap: var(--space-5, 20px); align-items: flex-start; border-top: 1px solid var(--border-default); padding-top: var(--space-8); margin-top: var(--space-8); flex-wrap: wrap; }
.author-bio .avatar { width: 64px; height: 64px; font-size: 18px; }
.author-bio__body { flex: 1; min-width: 220px; }
.author-bio__name { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-lg); }
.author-bio__name svg { width: 16px; height: 16px; color: var(--color-primary-500); }
.author-bio__role { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: 2px; }
.author-bio__text { margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--font-size-sm); }
.author-bio__stats { display: flex; gap: var(--space-8); margin-top: var(--space-4); }
.author-bio__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-5, 20px); flex-wrap: wrap; }

/* Mục lục bài viết */
.toc-widget nav { display: flex; flex-direction: column; gap: 2px; }
.toc-widget a { display: block; padding: var(--space-2) var(--space-3); border-left: 2px solid var(--border-default); font-size: var(--font-size-sm); color: var(--text-secondary); }
.toc-widget a.is-active { border-color: var(--color-primary-500); color: var(--color-primary-600); font-weight: var(--font-weight-semibold); background: var(--color-primary-50); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* Tài liệu tải miễn phí */
.resource-row { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); }
.resource-row + .resource-row { border-top: 1px solid var(--border-default); }
.resource-row__icon { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--color-primary-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.resource-row__icon svg { width: 17px; height: 17px; }
.resource-row__body { flex: 1; min-width: 0; }
.resource-row__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.resource-row__meta { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.resource-row__action { color: var(--text-secondary); flex-shrink: 0; }

/* ================================================================
   HỒ SƠ CÁ NHÂN / QUẢN LÝ HỌC TẬP (ho-so-ca-nhan.html)
   ================================================================ */

/* Profile hero — cùng tông với .home-hero (neutral-900 + glow indigo) để nhất quán toàn site */
.profile-hero {
  position: relative;
  background: var(--color-neutral-900);
  color: var(--text-inverse);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: var(--space-8);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
}
.profile-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(480px 320px at 95% 0%, rgba(99,102,241,0.2), transparent 70%);
  pointer-events: none;
}
.profile-hero__body { position: relative; display: flex; align-items: center; gap: var(--space-6); min-width: 0; }
.profile-hero__avatar-wrap { position: relative; flex-shrink: 0; }
.profile-hero__avatar { width: 88px; height: 88px; font-size: var(--font-size-2xl); background: var(--color-primary-600); color: var(--text-inverse); border: 3px solid rgba(255,255,255,0.16); }
.profile-hero__avatar-edit {
  position: absolute; right: -2px; bottom: -2px;
  width: 28px; height: 28px; border-radius: var(--radius-full);
  background: var(--color-primary-600); color: #fff; border: 2px solid var(--color-neutral-900);
  display: flex; align-items: center; justify-content: center;
}
.profile-hero__name-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.profile-hero__name-row h1 { font-size: var(--font-size-2xl); color: var(--text-inverse); }
.profile-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-5, 20px); margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--text-inverse-secondary); }
.profile-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.profile-hero__bio { margin-top: var(--space-3); color: var(--text-inverse-secondary); font-size: var(--font-size-sm); max-width: 460px; }
.profile-hero__since { display: block; margin-top: var(--space-2); font-size: 12px; color: rgba(255,255,255,0.5); }
.profile-hero__edit-btn { position: relative; flex-shrink: 0; }
@media (max-width: 720px) {
  .profile-hero { padding: var(--space-6); }
  .profile-hero__body { flex-direction: column; align-items: flex-start; }
}

/* Stats row */
.profile-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5, 20px); margin-top: var(--space-8); }
.profile-stat { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5, 20px); min-width: 0; }
.profile-stat__icon { width: 44px; height: 44px; border-radius: var(--radius-md); flex-shrink: 0; }
.profile-stat__icon svg { width: 20px; height: 20px; }
.profile-stat .stat { min-width: 0; }
.profile-stat .stat__value { font-size: var(--font-size-2xl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-stat .stat__label { overflow-wrap: break-word; }
@container home-main (max-width: 900px) { .profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container home-main (max-width: 560px) { .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Course progress row (khóa học của tôi — dạng danh sách ngang) */
.course-progress-row { display: flex; align-items: center; gap: var(--space-5, 20px); padding: var(--space-5, 20px) 0; }
.course-progress-row + .course-progress-row { border-top: 1px solid var(--border-default); }
.course-progress-row__media {
  width: 88px; aspect-ratio: 16/10; border-radius: var(--radius-md);
  background: var(--color-neutral-900); color: var(--color-primary-300);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.course-progress-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.course-progress-row__category { font-size: 12px; font-weight: var(--font-weight-semibold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.course-progress-row__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); font-family: var(--font-body); }
.course-progress-row__progress { display: flex; align-items: center; gap: var(--space-3); margin-top: 2px; max-width: 320px; }
.course-progress-row__progress .progress { flex: 1; }
.course-progress-row__progress span { font-size: 12px; font-weight: var(--font-weight-semibold); color: var(--text-secondary); flex-shrink: 0; }
.course-progress-row__next { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.course-progress-row__cta { flex-shrink: 0; }
@media (max-width: 640px) {
  .course-progress-row { flex-wrap: wrap; }
  .course-progress-row__cta { width: 100%; }
}

/* Streak widget */
.streak-count { display: flex; align-items: center; gap: var(--space-3); }
.streak-count__icon { width: 44px; height: 44px; border-radius: var(--radius-full); background: rgba(217,119,6,0.1); color: var(--color-warning); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.streak-count strong { display: block; font-family: var(--font-heading); font-size: var(--font-size-2xl); line-height: 1.1; }
.streak-count span { font-size: var(--font-size-sm); color: var(--text-secondary); }
.streak-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: var(--space-5, 20px); }
.streak-day {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding-block: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
}
.streak-day span { font-size: 11px; color: var(--text-secondary); font-weight: var(--font-weight-semibold); }
.streak-day svg { color: var(--color-neutral-300); }
.streak-day.is-done { background: rgba(22,163,74,0.08); }
.streak-day.is-done svg { color: var(--color-success); }
.streak-day.is-today { background: var(--color-primary-600); }
.streak-day.is-today span { color: rgba(255,255,255,0.8); }
.streak-day.is-today svg { color: #fff; }
.streak-day.is-pending svg { display: none; }
.streak-note { margin-top: var(--space-4); font-size: var(--font-size-sm); color: var(--text-secondary); }

/* Upcoming schedule widget */
.schedule-item { display: flex; align-items: flex-start; gap: var(--space-3); padding-block: var(--space-3); }
.schedule-item + .schedule-item { border-top: 1px solid var(--border-default); }
.schedule-item__date {
  width: 44px; flex-shrink: 0; text-align: center;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  padding-block: 6px;
}
.schedule-item__date strong { display: block; font-family: var(--font-heading); font-size: var(--font-size-lg); line-height: 1.1; }
.schedule-item__date span { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; }
.schedule-item__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.schedule-item__meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

/* Achievements widget */
.achievement-item { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); }
.achievement-item + .achievement-item { border-top: 1px solid var(--border-default); }
.achievement-item__icon { width: 36px; height: 36px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.achievement-item strong { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.achievement-item span { font-size: 12px; color: var(--text-secondary); }

/* Benefit grid — tái dùng achievement-item nhưng bố trí dạng lưới ngang cho
   khối lợi ích full-width (thay vì danh sách dọc trong 1 cột phụ hẹp) */
.benefit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.benefit-grid .achievement-item { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding-block: 0; border-top: none; }
.benefit-grid .achievement-item__icon { width: 44px; height: 44px; }
.benefit-grid .achievement-item__icon svg { width: 20px; height: 20px; }
@media (max-width: 900px) { .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .benefit-grid { grid-template-columns: minmax(0, 1fr); } }

/* Weekly study time chart */
.week-chart__total { display: flex; flex-direction: column; margin-bottom: var(--space-5, 20px); }
.week-chart__total strong { font-family: var(--font-heading); font-size: var(--font-size-2xl); }
.week-chart__total span { font-size: var(--font-size-sm); color: var(--text-secondary); }
.week-chart { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: var(--space-2); height: 120px; }
.week-chart__bar {
  height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  position: relative;
}
.week-chart__bar::before {
  content: '';
  display: block; width: 100%; height: var(--bar-h, 10%);
  background: var(--color-primary-200); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.week-chart__bar.is-peak::before { background: var(--color-primary-600); }
.week-chart__bar span { position: absolute; bottom: -20px; font-size: 11px; color: var(--text-secondary); }

/* ===== Trang Sự kiện ===== */

/* Hero — biến thể màu của .home-hero, dùng gradient primary thay vì nền tối trung tính */
.events-hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; padding: var(--space-12); color: var(--text-inverse); background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-900)); }
.events-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(480px 320px at 88% 12%, rgba(255,255,255,0.18), transparent 70%); pointer-events: none; }
.events-hero__grid { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-12); align-items: center; }
.events-hero__title { font-size: clamp(28px, 3.2vw, 40px); color: var(--text-inverse); }
.events-hero__desc { margin-top: var(--space-3); color: var(--text-inverse-secondary); max-width: 460px; }
.events-hero__actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-8); flex-wrap: wrap; }
.events-hero__visual { position: relative; aspect-ratio: 4/3; }
.events-hero__frame { position: absolute; inset: 0; border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.22); background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02)); display: flex; align-items: center; justify-content: center; }
.events-hero__frame svg { width: 34%; color: rgba(255,255,255,0.7); }
.events-hero__frame .ndh-image-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.events-hero__frame-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.contact-office__frame .ndh-image-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.contact-office__frame-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.events-hero__float { position: absolute; bottom: -8%; right: -6%; background: var(--bg-page); color: var(--text-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-4); display: flex; align-items: center; gap: var(--space-3); max-width: 220px; }
.events-hero__float strong { display: block; font-size: var(--font-size-sm); }
.events-hero__float span { font-size: 12px; color: var(--text-secondary); }
@media (max-width: 900px) {
  .events-hero__grid { grid-template-columns: minmax(0,1fr); }
  .events-hero__visual { width: 100%; max-width: 320px; margin: var(--space-8) auto 0; }
}
@media (max-width: 640px) { .events-hero { padding: var(--space-6); } }

/* Thanh tìm kiếm + bộ lọc phía trên hero */
.events-search-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-8); }
.events-search-row .header-search { flex: 1; min-width: 220px; max-width: none; }
.events-search-row .select-field { flex-shrink: 0; min-width: 180px; }
/* .header-search bị ẩn dưới 1024px bởi quy tắc chung của site-header (marketing nav) — khôi phục hiển thị riêng cho thanh tìm kiếm trang Sự kiện */
@media (max-width: 1024px) { .events-search-row .header-search { display: block; } }

/* Bộ lọc nhanh theo loại sự kiện — tái dùng .category-card, thêm trạng thái đang chọn */
.category-card.is-active { border-color: var(--color-primary-500); background: var(--color-primary-50); }

/* Thẻ sự kiện nổi bật — tái dùng khung .course-card */
.event-meta-row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--text-secondary); }
.event-meta-row svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--color-neutral-400); }
.event-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-default); }
.event-card__location { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.event-card__location svg { width: 14px; height: 14px; flex-shrink: 0; }
.event-card__price { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); margin-top: 2px; }
.event-card__price.is-free { color: var(--color-success); }

/* Danh sách "Sự kiện sắp diễn ra" — hàng ngang: ô ngày + nội dung + giá/đăng ký */
.event-list-row { display: flex; align-items: center; gap: var(--space-5, 20px); padding: var(--space-5, 20px) 0; border-bottom: 1px solid var(--border-default); }
.event-list-row:last-child { border-bottom: none; }
.event-list-row__date { flex-shrink: 0; width: 60px; text-align: center; }
.event-list-row__date strong { display: block; font-size: var(--font-size-2xl); font-family: var(--font-heading); line-height: 1; color: var(--color-primary-700); }
.event-list-row__date span { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; }
.event-list-row__icon { width: 48px; height: 48px; border-radius: var(--radius-md); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.event-list-row__icon svg { width: 22px; height: 22px; }
.event-list-row__body { flex: 1; min-width: 0; }
.event-list-row__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.event-list-row__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: 4px; font-size: var(--font-size-sm); color: var(--text-secondary); }
.event-list-row__meta span { display: flex; align-items: center; gap: 6px; }
.event-list-row__meta svg { width: 14px; height: 14px; flex-shrink: 0; }
.event-list-row__action { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.event-list-row__action strong { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.event-list-row__action strong.is-free { color: var(--color-success); }
@media (max-width: 640px) {
  .event-list-row { flex-wrap: wrap; }
  .event-list-row__action { flex-direction: row; align-items: center; margin-left: calc(60px + var(--space-5, 20px)); width: calc(100% - 60px - var(--space-5, 20px)); justify-content: space-between; }
}

/* Widget "Sự kiện được quan tâm" — danh sách xếp hạng */
.ranked-row { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); }
.ranked-row + .ranked-row { border-top: 1px solid var(--border-default); }
.ranked-row__num { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-surface); color: var(--text-secondary); font-size: 12px; font-weight: var(--font-weight-bold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ranked-row:first-child .ranked-row__num { background: var(--color-primary-600); color: #fff; }
.ranked-row__media { width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--color-neutral-900); color: var(--color-primary-300); display: flex; align-items: center; justify-content: center; }
.ranked-row__media svg { width: 18px; height: 18px; }
.ranked-row__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.ranked-row__meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* ================================================================
   TRANG GIỚI THIỆU (gioi-thieu.html)
   ================================================================ */

/* Sứ mệnh / Tầm nhìn / Giá trị cốt lõi — tái dùng .card, thêm bố cục icon + nội dung */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.value-card { padding: var(--space-8); }
.value-card .icon-tile { margin-bottom: var(--space-5, 20px); }
.value-card h3 { font-size: var(--font-size-lg); }
.value-card p { margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--font-size-sm); }
.value-card__list { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.value-card__list li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--text-secondary); }
.value-card__list svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--color-primary-600); }
@media (max-width: 900px) { .value-grid { grid-template-columns: minmax(0,1fr); } }

/* Dải số liệu — biến thể màu đặc primary, dùng cho điểm nhấn giữa trang */
.stats-band {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-8);
  background: var(--color-primary-600); border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-10, 40px);
}
.stats-band .stat { flex-direction: row; align-items: center; gap: var(--space-4); }
.stats-band .stat__value { color: #fff; }
.stats-band .stat__label { color: rgba(255,255,255,0.75); }
.stats-band__icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: rgba(255,255,255,0.16); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stats-band__icon svg { width: 20px; height: 20px; }
@media (max-width: 900px) { .stats-band { justify-content: flex-start; } }

/* Hành trình phát triển — timeline ngang, thu gọn thành 2 cột ở tablet */
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-6); position: relative; }
.timeline::before { content: ''; position: absolute; top: 22px; left: 0; right: 0; height: 1px; background: var(--border-default); }
.timeline-item { position: relative; padding-top: var(--space-16); }
.timeline-item__dot {
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 44px; height: 44px; border-radius: var(--radius-full);
  background: var(--bg-page); border: 1px solid var(--border-default);
  display: flex; align-items: center; justify-content: center; color: var(--color-primary-600);
}
.timeline-item__dot svg { width: 20px; height: 20px; }
.timeline-item.is-current .timeline-item__dot { background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff; }
.timeline-item__year { font-family: var(--font-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.timeline-item__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-primary-600); margin-top: 2px; }
.timeline-item p { margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--text-secondary); }
@media (max-width: 900px) {
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-10, 40px); }
  .timeline::before { display: none; }
}

/* ===== Hỏi đáp (Q&A) ===== */
.qa-hero-icon { position: relative; width: 90px; height: 74px; flex-shrink: 0; display: none; }
@media (min-width: 769px) { .qa-hero-icon { display: block; } }
.qa-hero-icon span { position: absolute; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.qa-hero-icon svg { width: 55%; height: 55%; }
.qa-hero-icon__b1 { width: 56px; height: 46px; left: 0; top: 16px; background: var(--tag-purple-bg); color: var(--tag-purple-fg); border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 4px; transform: rotate(-6deg); }
.qa-hero-icon__b2 { width: 42px; height: 36px; left: 46px; top: 0; background: var(--tag-rose-bg); color: var(--tag-rose-fg); border-radius: var(--radius-md) var(--radius-md) 4px var(--radius-md); transform: rotate(8deg); }
.qa-hero-icon__b3 { width: 32px; height: 32px; left: 56px; top: 42px; background: var(--tag-amber-bg); color: var(--tag-amber-fg); border-radius: 50%; }

.qa-search { display: flex; gap: var(--space-3); }
.qa-search input {
  flex: 1; height: 52px; padding-inline: var(--space-5, 20px);
  border-radius: var(--radius-md); border: 1px solid var(--border-default);
  font-size: var(--font-size-base); font-family: inherit; background: var(--bg-page); color: var(--text-primary);
}
.qa-search input:focus { outline: none; border-color: var(--color-primary-500); }
.qa-search input::placeholder { color: var(--color-neutral-400); }
.qa-search button { flex-shrink: 0; padding-inline: var(--space-8); }
@media (max-width: 480px) { .qa-search { flex-direction: column; } }

.qa-filter-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); }
@container home-main (max-width: 900px) { .qa-filter-grid { grid-template-columns: repeat(3, 1fr); } }
@container home-main (max-width: 480px) { .qa-filter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .qa-filter-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .qa-filter-grid { grid-template-columns: repeat(2, 1fr); } }
.qa-filter-tile {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center;
  padding: var(--space-5, 20px) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-page); font-family: inherit; cursor: pointer;
  transition: border-color var(--duration-micro) var(--ease-out), background var(--duration-micro) var(--ease-out);
}
.qa-filter-tile:hover { border-color: var(--color-primary-400); }
.qa-filter-tile.is-active { border-color: var(--color-primary-500); background: rgba(99,102,241,0.06); }
.qa-filter-tile__icon { width: 40px; height: 40px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; background: var(--bg-surface); color: var(--text-secondary); }
.qa-filter-tile.is-active .qa-filter-tile__icon { background: var(--color-primary-600); color: #fff; }
.qa-filter-tile__icon svg { width: 20px; height: 20px; }
.qa-filter-tile strong { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.qa-filter-tile span { font-size: 12px; color: var(--text-secondary); }

/* Danh sách câu hỏi (tái dùng .accordion-item, chỉ nới max-height phần trả lời) */
.qa-item .accordion-item__body { padding: 0 var(--space-5, 20px); font-size: var(--font-size-sm); color: var(--text-secondary); line-height: var(--line-height-body); }
.qa-item.is-open .accordion-item__body { max-height: 420px; padding-bottom: var(--space-5, 20px); }

/* Widget "Bạn cần hỗ trợ nhanh?" */
.qa-support-row { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); }
.qa-support-row + .qa-support-row { border-top: 1px solid var(--border-default); }
.qa-support-row__icon { width: 38px; height: 38px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qa-support-row__icon svg { width: 18px; height: 18px; }
.qa-support-row__body { flex: 1; min-width: 0; }
.qa-support-row__body strong { display: block; font-size: var(--font-size-sm); }
.qa-support-row__body span { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); margin-top: 2px; overflow-wrap: anywhere; }
.qa-support-row__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); flex-shrink: 0; }
.qa-support-row__chevron { color: var(--color-neutral-300); flex-shrink: 0; }

/* Widget "Câu hỏi được quan tâm" */
.qa-rank-row { display: flex; align-items: flex-start; gap: var(--space-3); padding-block: var(--space-3); }
.qa-rank-row + .qa-rank-row { border-top: 1px solid var(--border-default); }
.qa-rank-row__num { width: 22px; height: 22px; border-radius: 50%; background: var(--color-primary-50); color: var(--color-primary-700); font-size: 12px; font-weight: var(--font-weight-bold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.qa-rank-row__body { min-width: 0; }
.qa-rank-row__body a { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); }
.qa-rank-row__body a:hover { color: var(--color-primary-600); }
.qa-rank-row__views { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.qa-rank-row__views svg { width: 13px; height: 13px; }

/* Widget "Đặt câu hỏi" */
.qa-ask-form { display: flex; flex-direction: column; gap: var(--space-4); }
.qa-ask-form textarea {
  min-height: 104px; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); border: 1px solid var(--border-default);
  font-size: var(--font-size-sm); font-family: inherit; resize: vertical; background: var(--bg-page); color: var(--text-primary);
}
.qa-ask-form textarea:focus { outline: none; border-color: var(--color-neutral-900); }
.qa-ask-form textarea::placeholder { color: var(--color-neutral-400); }
@media (max-width: 560px) { .timeline { grid-template-columns: minmax(0,1fr); } }

/* ===================================================================
   NÂNG CẤP GÓI (Upgrade / Pricing)
   =================================================================== */

/* Dải tính năng nổi bật dưới tiêu đề trang */
.plan-highlights { display: flex; flex-wrap: wrap; gap: var(--space-5, 20px); margin-top: var(--space-4); }
.plan-highlights__item { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: var(--font-weight-medium); }
.plan-highlights__item svg { width: 16px; height: 16px; color: var(--color-primary-600); flex-shrink: 0; }

/* Banner gói hiện tại */
.current-plan-banner {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-5, 20px) var(--space-6);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  background: var(--bg-surface); margin-bottom: var(--space-8);
}
.current-plan-banner__icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-neutral-900); color: var(--color-primary-300); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.current-plan-banner__body { flex: 1; min-width: 200px; }
.current-plan-banner__body strong { font-size: var(--font-size-sm); }
.current-plan-banner__body span { display: block; font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

/* Công tắc chu kỳ thanh toán (tháng / năm) */
.billing-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--radius-full); background: var(--bg-surface); border: 1px solid var(--border-default); }
.billing-toggle button {
  position: relative; border: none; background: none; cursor: pointer; font-family: inherit;
  height: 40px; padding-inline: var(--space-5, 20px); border-radius: var(--radius-full);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: var(--space-2);
  transition: background var(--duration-micro) var(--ease-out), color var(--duration-micro) var(--ease-out);
}
.billing-toggle button.is-active { background: var(--color-neutral-900); color: var(--text-inverse); }
.billing-toggle__save { height: 18px; padding-inline: 6px; border-radius: var(--radius-sm); background: var(--color-success); color: #fff; font-size: 10px; font-weight: var(--font-weight-bold); display: inline-flex; align-items: center; }
.billing-toggle button.is-active .billing-toggle__save { background: rgba(255,255,255,0.2); }

/* Toolbar tiêu đề + toggle */
.plan-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-8); }

/* Lưới các gói */
.plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; }
@media (max-width: 1200px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .plan-grid { grid-template-columns: minmax(0, 1fr); } }

.plan-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-page); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-sm);
}
.plan-card--current { border-color: var(--color-neutral-900); }
.plan-card--featured { border-color: var(--color-primary-500); box-shadow: var(--shadow-lg); }
.plan-card__ribbon {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  height: 26px; padding-inline: var(--space-4); border-radius: var(--radius-full);
  background: var(--color-primary-600); color: #fff; font-size: 11px; font-weight: var(--font-weight-bold);
  display: flex; align-items: center; white-space: nowrap; box-shadow: var(--shadow-accent);
}
.plan-card__name { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.plan-card__desc { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.plan-card__price-wrap { margin-top: var(--space-5, 20px); min-height: 74px; }
.plan-card__price { display: none; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan-card__price.is-active { display: flex; }
.plan-card__price-old { font-size: var(--font-size-sm); color: var(--text-secondary); text-decoration: line-through; }
.plan-card__price-value { font-family: var(--font-heading); font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); }
.plan-card__price-period { font-size: var(--font-size-sm); color: var(--text-secondary); }
.plan-card__price-note { display: block; width: 100%; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.plan-card__cta { margin-top: var(--space-5, 20px); }
.plan-card__cta[disabled], .plan-card__cta.is-disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
.plan-card__features { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border-default); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.plan-feature { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--font-size-sm); }
.plan-feature svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: var(--color-success); }
.plan-feature--off { color: var(--color-neutral-400); }
.plan-feature--off svg { color: var(--color-neutral-300); }

/* Bảng so sánh chi tiết */
.compare-wrap { overflow-x: auto; border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.compare-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--font-size-sm); }
.compare-table th, .compare-table td { padding: var(--space-4) var(--space-5, 20px); text-align: center; border-bottom: 1px solid var(--border-default); white-space: nowrap; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table thead th { background: var(--bg-surface); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; color: var(--text-secondary); font-weight: var(--font-weight-medium); white-space: normal; }
.compare-table td.is-featured, .compare-table th.is-featured { background: rgba(99,102,241,0.06); }
.compare-table td svg { width: 17px; height: 17px; }
.compare-table td svg.icon-yes { color: var(--color-success); }
.compare-table td svg.icon-no { color: var(--color-neutral-300); }

/* "Tất cả gói đều bao gồm" */
.plan-includes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6); text-align: center; }
@media (max-width: 900px) { .plan-includes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan-include { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.plan-include .icon-tile { margin-inline: auto; }
.plan-include strong { font-size: var(--font-size-sm); }
.plan-include span { font-size: 12px; color: var(--text-secondary); }

/* Thẻ ưu đãi có đếm ngược (aside) */
.offer-card { border-radius: var(--radius-lg); padding: var(--space-6); color: #fff; background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-800)); position: relative; overflow: hidden; }
.offer-card__eyebrow { font-size: 12px; font-weight: var(--font-weight-semibold); opacity: 0.8; }
.offer-card__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin-top: 4px; }
.offer-countdown { display: flex; gap: var(--space-2); margin: var(--space-5, 20px) 0; }
.offer-countdown__seg { flex: 1; background: rgba(255,255,255,0.14); border-radius: var(--radius-sm); padding: var(--space-2) 0; text-align: center; }
.offer-countdown__seg strong { display: block; font-family: var(--font-heading); font-size: var(--font-size-lg); }
.offer-countdown__seg span { font-size: 10px; opacity: 0.75; }
.offer-card .btn { width: 100%; background: #fff; color: var(--color-primary-700); box-shadow: none; }

/* ===================================================================
   Cài đặt tài khoản — hàng tuỳ chọn dùng chung cho các tab cài đặt
=================================================================== */
.settings-row { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-4); }
.settings-row + .settings-row { border-top: 1px solid var(--border-default); }
.settings-row__icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.settings-row__icon svg { width: 18px; height: 18px; }
.settings-row__body { flex: 1; min-width: 0; }
.settings-row__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.settings-row__desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.settings-row__control { flex-shrink: 0; }
.settings-row__control .select-field { min-width: 210px; }
@media (max-width: 640px) {
  .settings-row { flex-wrap: wrap; }
  .settings-row__control { width: 100%; margin-left: 56px; }
  .settings-row__control .select-field { width: 100%; }
}

/* Ảnh đại diện — tab Hồ sơ cá nhân */
.settings-avatar-row { display: flex; align-items: center; gap: var(--space-5, 20px); margin-bottom: var(--space-6); }
.settings-avatar-row .avatar { width: 76px; height: 76px; font-size: var(--font-size-xl); }
.settings-avatar-row__actions { display: flex; gap: var(--space-3); }

/* Thiết bị đăng nhập / thẻ thanh toán đã lưu — tab Bảo mật, Thanh toán */
.device-row { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-4); }
.device-row + .device-row { border-top: 1px solid var(--border-default); }
.device-row__icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.device-row__icon svg { width: 18px; height: 18px; }
.device-row__body { flex: 1; min-width: 0; }
.device-row__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.device-row__meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.device-row__side { flex-shrink: 0; font-size: 12px; color: var(--text-secondary); text-align: right; }

/* Liên kết tài khoản mạng xã hội — tab Kết nối */
.connect-row { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); }
.connect-row + .connect-row { border-top: 1px solid var(--border-default); }
.connect-row__icon { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--bg-surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.connect-row__body { flex: 1; min-width: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.connect-row__meta { display: block; font-size: 12px; color: var(--text-secondary); font-weight: var(--font-weight-regular); margin-top: 1px; }

/* Ma trận bật/tắt loại thông báo — tab Thông báo */
.notif-matrix__head, .notif-matrix__row { display: grid; grid-template-columns: 1fr 64px 64px; align-items: center; gap: var(--space-3); padding-block: var(--space-3); }
.notif-matrix__row { border-top: 1px solid var(--border-default); }
.notif-matrix__head span { font-size: 11px; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); text-align: center; }
.notif-matrix__head span:first-child { text-align: left; }
.notif-matrix__row .switch { margin-inline: auto; }
@media (max-width: 560px) { .notif-matrix__head, .notif-matrix__row { grid-template-columns: 1fr 48px 48px; } }

/* Hàng cảnh báo (xoá tài khoản / đặt lại mặc định) */
.danger-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.offer-card .btn:hover { background: var(--color-neutral-100); }

/* ===================================================================
   Trang tĩnh dùng chung: Tuyển dụng, Điều khoản, Chính sách, Trợ giúp,
   Hướng dẫn thanh toán, Câu hỏi thường gặp, Liên hệ, Giảng viên, Danh mục
=================================================================== */

/* Mục lục (TOC) sticky — Điều khoản / Chính sách bảo mật */
.static-toc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.static-toc a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--font-size-sm); color: var(--text-secondary); text-decoration: none; }
.static-toc a:hover { background: var(--bg-surface); color: var(--text-primary); }
.static-toc a.is-active { background: var(--color-primary-50); color: var(--color-primary-700); font-weight: var(--font-weight-medium); }
[data-theme='dark'] .static-toc a.is-active { background: rgba(99,102,241,0.16); }

/* Từng điều khoản/mục chính sách — nội dung tĩnh, không cần accordion */
.policy-section { padding-block: var(--space-8); border-bottom: 1px solid var(--border-default); scroll-margin-top: 96px; }
.policy-section:first-child { padding-top: 0; }
.policy-section:last-child { border-bottom: none; padding-bottom: 0; }
.policy-section__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.policy-section__head h2 { font-size: var(--font-size-xl); }
.policy-section p { color: var(--text-secondary); }
.policy-section p + p { margin-top: var(--space-3); }
.policy-section ol, .policy-section ul { margin-top: var(--space-3); padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); color: var(--text-secondary); }
.policy-section ol { list-style: decimal; }
.policy-section ul { list-style: disc; }

/* Ô đồng ý điều khoản (cuối trang Điều khoản sử dụng) */
.policy-agree { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-6); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-surface); margin-top: var(--space-8); }
.policy-agree label { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-sm); }
.policy-agree input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-primary-600); }

/* Ô tile thông tin (chủ đề trợ giúp / kênh liên hệ) — icon + tiêu đề + mô tả + chevron */
.tile-link-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.tile-link-card { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5, 20px); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-page); text-decoration: none; color: inherit; transition: border-color var(--duration-micro) var(--ease-out), transform var(--duration-micro) var(--ease-out); }
.tile-link-card:hover { border-color: var(--color-primary-300); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.tile-link-card__body { flex: 1; min-width: 0; }
.tile-link-card__body strong { display: block; font-size: var(--font-size-base); margin-bottom: 2px; }
.tile-link-card__body span { font-size: var(--font-size-sm); color: var(--text-secondary); }
.tile-link-card__chevron { flex-shrink: 0; color: var(--text-secondary); margin-top: 4px; }
@container home-main (max-width: 900px) { .tile-link-grid { grid-template-columns: repeat(2, 1fr); } }
@container home-main (max-width: 640px) { .tile-link-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .tile-link-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tile-link-grid { grid-template-columns: 1fr; } }

/* Danh sách công việc đang tuyển — Tuyển dụng */
.job-row { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-5, 20px); }
.job-row + .job-row { border-top: 1px solid var(--border-default); }
.job-row__body { flex: 1; min-width: 0; }
.job-row__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.job-row__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--text-secondary); }
.job-row__meta span { display: inline-flex; align-items: center; gap: 4px; }
.job-row__meta svg { width: 14px; height: 14px; flex-shrink: 0; }
.job-row__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
@media (max-width: 640px) { .job-row { flex-wrap: wrap; } .job-row__action { width: 100%; } .job-row__action .btn { width: 100%; } }

/* Quy trình theo chiều ngang, nối bằng mũi tên — Hướng dẫn thanh toán */
.process-steps-h { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); align-items: start; }
.process-step-h { text-align: center; position: relative; }
.process-step-h__icon { width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--color-primary-50); color: var(--color-primary-600); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-3); }
.process-step-h__icon svg { width: 22px; height: 22px; }
.process-step-h strong { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.process-step-h p { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.process-steps-h__arrow { position: absolute; top: 26px; left: calc(50% + 40px); right: calc(-50% + 40px); color: var(--color-neutral-300); }
.process-step-h:last-child .process-steps-h__arrow { display: none; }
@container home-main (max-width: 760px) { .process-steps-h { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-4); } .process-steps-h__arrow { display: none; } }
@media (max-width: 760px) { .process-steps-h { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-4); } .process-steps-h__arrow { display: none; } }

/* Quy trình theo chiều dọc, có nối bằng đường kẻ — Tuyển dụng */
.process-steps-v { display: flex; flex-direction: column; }
.process-step-v { display: flex; gap: var(--space-4); padding-bottom: var(--space-8); position: relative; }
.process-step-v:last-child { padding-bottom: 0; }
.process-step-v::before { content: ''; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--border-default); }
.process-step-v:last-child::before { display: none; }
.process-step-v__num { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--color-primary-600); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); position: relative; z-index: 1; }
.process-step-v__body strong { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.process-step-v__body p { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: 2px; }

/* Trạng thái hệ thống (chấm màu + nhãn) — Trung tâm trợ giúp */
.status-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); font-size: var(--font-size-sm); }
.status-row + .status-row { border-top: 1px solid var(--border-default); }
.status-row__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); flex-shrink: 0; }
.status-row__label { flex: 1; }
.status-row__ok { color: var(--color-success); font-size: 12px; font-weight: var(--font-weight-medium); }

/* Lưới đội ngũ giảng viên / cố vấn — Giảng viên */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.team-card { border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-6); text-align: center; background: var(--bg-page); transition: border-color var(--duration-micro) var(--ease-out), transform var(--duration-micro) var(--ease-out); }
.team-card:hover { border-color: var(--color-primary-300); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.team-card__avatar { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto var(--space-4); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: #fff; background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700)); }
.team-card__name { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); display: flex; align-items: center; justify-content: center; gap: 4px; }
.team-card__name svg { width: 15px; height: 15px; color: var(--color-primary-600); }
.team-card__role { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: 2px; }
.team-card__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
.team-card__stats { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-default); font-size: 12px; color: var(--text-secondary); }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }

/* Thư viện danh mục đầy đủ — trang Tất cả danh mục */
.cat-directory-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.cat-directory-card { display: flex; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-page); }
.cat-directory-card__body { flex: 1; min-width: 0; }
.cat-directory-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cat-directory-card__head h3 { font-size: var(--font-size-lg); }
.cat-directory-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.cat-directory-card__tags a { font-size: var(--font-size-sm); color: var(--text-secondary); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-full); padding: 6px 14px; text-decoration: none; }
.cat-directory-card__tags a:hover { border-color: var(--color-primary-300); color: var(--color-primary-700); }
@media (max-width: 760px) { .cat-directory-grid { grid-template-columns: 1fr; } }