/* NDH Academy — Component library (components/button, card, badges, forms...) */

/* Button — 1 primary duy nhất, còn lại outline/ghost, cùng bộ radius/height */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 48px;
  padding-inline: var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border: 1px solid transparent;
  transition: background var(--duration-micro) var(--ease-out),
              border-color var(--duration-micro) var(--ease-out),
              transform var(--duration-micro) var(--ease-out),
              box-shadow var(--duration-micro) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--sm { height: 40px; padding-inline: var(--space-4); }

.btn--primary {
  background: var(--color-neutral-900);
  color: var(--text-inverse);
}
.btn--primary:hover { background: var(--color-neutral-800); }

.btn--accent {
  background: var(--color-primary-600);
  color: var(--text-inverse);
  box-shadow: var(--shadow-accent);
}
.btn--accent:hover { background: var(--color-primary-700); }

.btn--outline {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-primary);
}
.btn--outline:hover { border-color: var(--color-neutral-900); }

.btn--outline-invert {
  background: transparent;
  border-color: rgba(255,255,255,0.3);
  color: var(--text-inverse);
}
.btn--outline-invert:hover { border-color: rgba(255,255,255,0.7); }

.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  height: auto;
  padding: 0;
  font-weight: var(--font-weight-medium);
}
.btn--block { width: 100%; }

/* Icon button (giỏ hàng, thông báo...) */
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: var(--bg-page);
  color: var(--text-primary);
  transition: border-color var(--duration-micro) var(--ease-out);
}
.icon-btn:hover { border-color: var(--color-neutral-900); }
.icon-btn .dot {
  position: absolute;
  top: -2px; right: -2px;
  width: 16px; height: 16px;
  border-radius: var(--radius-full);
  background: var(--color-primary-600);
  color: var(--text-inverse);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-page);
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 22px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.badge--accent { background: var(--color-primary-600); color: var(--text-inverse); }
.badge--ink { background: var(--color-neutral-900); color: var(--text-inverse); }
.badge--outline { background: transparent; border: 1px solid var(--border-default); color: var(--text-secondary); text-transform: none; letter-spacing: 0; font-weight: var(--font-weight-medium); }
.badge--success { background: rgba(22,163,74,0.1); color: var(--color-success); }
.badge--progress { background: rgba(79,70,229,0.12); color: var(--color-primary-700); }
.badge--warning { background: rgba(217,119,6,0.12); color: var(--color-warning); }
.badge--danger { background: rgba(220,38,38,0.1); color: var(--color-error); }

/* Card */
.card {
  background: var(--bg-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Course card */
.course-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--duration-page) var(--ease-out), transform var(--duration-page) var(--ease-out);
}
.course-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.course-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-neutral-900);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-300);
}
.course-card__media .badge { position: absolute; top: var(--space-3); left: var(--space-3); }
.course-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.course-card__category { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.course-card__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); font-family: var(--font-body); }
.course-card__meta { display: flex; align-items: center; gap: var(--space-4); font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: auto; }
.course-card__footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-3); border-top: 1px solid var(--border-default); }
.course-card__price { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.course-card__price del { color: var(--text-secondary); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); margin-left: var(--space-2); }

/* Rating */
.rating { display: inline-flex; align-items: center; gap: 4px; color: var(--color-primary-600); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.rating svg { width: 14px; height: 14px; }
.rating span { color: var(--text-secondary); font-weight: var(--font-weight-regular); }

/* Avatar */
.avatar { border-radius: var(--radius-full); background: var(--color-neutral-200); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); color: var(--color-neutral-700); font-weight: 600; overflow: hidden; }

/* Progress bar */
.progress { height: 6px; border-radius: var(--radius-full); background: var(--color-neutral-200); overflow: hidden; }
.progress__fill { height: 100%; background: var(--color-primary-500); border-radius: var(--radius-full); }

/* Stat */
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat__value { font-family: var(--font-heading); font-size: var(--font-size-3xl); font-weight: 700; }
.stat__label { font-size: var(--font-size-sm); color: var(--text-secondary); }

/* Feature icon tile */
.icon-tile {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-neutral-900);
  color: var(--color-primary-400);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.icon-tile svg { width: 24px; height: 24px; }
/* Icon trang trí cạnh tiêu đề trang — ẩn trước khi hàng flex-wrap bị vỡ dòng, tránh icon rơi lẻ loi xuống dưới đoạn mô tả */
@media (max-width: 900px) { .page-hero-icon { display: none; } }

/* Form */
.field { display: flex; flex-direction: column; gap: var(--space-2); text-align: left; }
.field label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.field input {
  height: 48px;
  padding-inline: var(--space-4);
  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);
  transition: border-color var(--duration-micro) var(--ease-out);
}
.field input:focus { border-color: var(--color-neutral-900); outline: none; }
.field input::placeholder { color: var(--color-neutral-400); }
.field textarea {
  min-height: 100px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  font-size: var(--font-size-base);
  font-family: inherit;
  resize: vertical;
  background: var(--bg-page);
  color: var(--text-primary);
}
.field textarea:focus { border-color: var(--color-neutral-900); outline: none; }
.field textarea::placeholder { color: var(--color-neutral-400); }

/* Divider with text */
.divider-text { display: flex; align-items: center; gap: var(--space-3); color: var(--text-secondary); font-size: var(--font-size-sm); }
.divider-text::before, .divider-text::after { content: ''; flex: 1; height: 1px; background: var(--border-default); }

/* ===== Breadcrumb ===== */
.breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--space-6); flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--text-primary); }
.breadcrumb__sep { color: var(--color-neutral-300); }
.breadcrumb__current { color: var(--text-primary); font-weight: var(--font-weight-medium); }

/* ===== Select field (sort dropdowns...) ===== */
.select-field {
  height: 44px; padding-inline: var(--space-4) var(--space-8);
  border-radius: var(--radius-md); border: 1px solid var(--border-default);
  background: var(--bg-page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/14px;
  font-size: var(--font-size-sm); font-family: inherit; color: var(--text-primary);
  appearance: none; -webkit-appearance: none;
}

/* ===== Catalog layout: filter panel + course grid =====
   Bộ lọc co giãn theo % chiều rộng khả dụng (không cố định cứng),
   để không chèn ép lưới khóa học trên màn hình laptop 13-15". */
.catalog-layout { display: grid; grid-template-columns: clamp(216px, 19vw, 280px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (max-width: 1024px) { .catalog-layout { grid-template-columns: minmax(0, 1fr); } }

.filter-panel {
  background: var(--bg-page); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  padding: var(--space-6); position: sticky; top: calc(80px + var(--space-6));
}
.filter-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.filter-panel__head h3 { font-size: var(--font-size-base); }
.filter-panel__clear { font-size: var(--font-size-sm); color: var(--color-primary-600); font-weight: var(--font-weight-medium); background: none; border: none; font-family: inherit; }
.filter-panel__close { display: none; }

.filter-group { padding-block: var(--space-5, 20px); }
.filter-group + .filter-group { border-top: 1px solid var(--border-default); }
.filter-group__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); display: block; }

.checkbox-row { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-2); font-size: var(--font-size-sm); cursor: pointer; }
.checkbox-row input { width: 16px; height: 16px; accent-color: var(--color-primary-600); flex-shrink: 0; }
.checkbox-row span { flex: 1; color: var(--text-primary); }
.checkbox-row small { color: var(--text-secondary); }
.checkbox-row .rating { pointer-events: none; }

@media (max-width: 1024px) {
  .filter-panel {
    position: fixed; inset: 0 0 0 auto; width: 320px; max-width: 88vw; height: 100vh; z-index: 70;
    border-radius: 0; overflow-y: auto; transform: translateX(100%);
    transition: transform var(--duration-page) var(--ease-out);
    box-shadow: var(--shadow-lg);
  }
  .filter-panel.is-open { transform: translateX(0); }
  .filter-panel__close { display: inline-flex; }
}

.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.catalog-toolbar__count { font-size: var(--font-size-sm); color: var(--text-secondary); }
.catalog-toolbar__right { display: flex; align-items: center; gap: var(--space-3); }
.filter-mobile-toggle { display: none; }
@media (max-width: 1024px) { .filter-mobile-toggle { display: inline-flex; } }

/* ===== Pagination ===== */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-12); }
.pagination button {
  width: 40px; height: 40px; border-radius: var(--radius-md); border: 1px solid var(--border-default);
  background: var(--bg-page); display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); font-family: inherit; color: var(--text-primary);
}
.pagination button.is-active { background: var(--color-neutral-900); border-color: var(--color-neutral-900); color: #fff; }
.pagination button:hover:not(.is-active):not(:disabled) { border-color: var(--color-neutral-900); }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }
.pagination__dots { border: none !important; background: none !important; }

.filter-backdrop { display: none; position: fixed; inset: 0; background: rgba(10,9,6,0.5); z-index: 65; }
.filter-backdrop.is-open { display: block; }

/* ===== Course detail: hero banner ===== */
.course-detail-hero {
  background: var(--color-neutral-900); color: var(--text-inverse); border-radius: var(--radius-lg);
  padding: var(--space-12); position: relative; overflow: hidden;
}
.course-detail-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(500px 360px at 90% 10%, rgba(99,102,241,0.18), transparent 70%);
  pointer-events: none;
}
.course-detail-hero__body { position: relative; max-width: 720px; }
.course-detail-hero__badges { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.course-detail-hero__badges .badge--outline { border-color: rgba(255,255,255,0.24); color: var(--text-inverse-secondary); }
.course-detail-hero__title { font-size: clamp(26px, 3vw, 38px); color: var(--text-inverse); }
.course-detail-hero__desc { margin-top: var(--space-3); color: var(--text-inverse-secondary); font-size: var(--font-size-lg); }
.course-detail-hero__meta { display: flex; flex-wrap: wrap; row-gap: var(--space-2); column-gap: var(--space-5, 20px); margin-top: var(--space-6); font-size: var(--font-size-sm); color: var(--text-inverse-secondary); align-items: center; }
.course-detail-hero__meta strong { color: var(--text-inverse); }
.course-detail-hero__meta .rating { color: var(--color-primary-300); }
.course-detail-hero__meta .rating span { color: var(--text-inverse-secondary); }
.course-detail-hero__instructor { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }
.course-detail-hero__instructor .avatar { width: 40px; height: 40px; background: rgba(255,255,255,0.14); color: #fff; }
.course-detail-hero__instructor span { display: block; font-size: 12px; color: var(--text-inverse-secondary); }
.course-detail-hero__instructor strong { color: var(--text-inverse); font-size: var(--font-size-sm); }

/* ===== Course detail: layout main + sticky buy card =====
   Thẻ mua khóa học co giãn theo % chiều rộng khả dụng, tránh chiếm quá nhiều
   chỗ trên màn hình laptop 13-15" (đồng bộ cách làm với trang chủ). */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 380px); gap: var(--space-6); align-items: start; margin-top: var(--space-8); }
@media (max-width: 1024px) { .detail-layout { grid-template-columns: minmax(0, 1fr); } }

.buy-card { background: var(--bg-page); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; position: sticky; top: calc(80px + var(--space-6)); }
.buy-card__media { aspect-ratio: 16/10; background: var(--color-neutral-900); display: flex; align-items: center; justify-content: center; color: var(--color-primary-300); position: relative; }
.buy-card__play { width: 56px; height: 56px; border-radius: var(--radius-full); background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; color: #fff; }
.buy-card__body { padding: var(--space-6); }
.buy-card__price { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.buy-card__price strong { font-size: var(--font-size-3xl); font-family: var(--font-heading); }
.buy-card__price del { color: var(--text-secondary); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); }
.buy-card__discount { color: var(--color-error); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); margin-top: var(--space-1); }
.buy-card__actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5, 20px); }
.buy-card__row { display: flex; gap: var(--space-3); }
.buy-card__row .btn--outline { flex: 1; }
.buy-card__includes { 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); }
.buy-card__includes li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-sm); color: var(--text-secondary); }
.buy-card__includes svg { width: 16px; height: 16px; color: var(--color-primary-600); flex-shrink: 0; }

/* ===== Tabs content panels ===== */
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ===== Checklist (Bạn sẽ học được gì) ===== */
.checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.checklist li { display: flex; gap: var(--space-3); font-size: var(--font-size-sm); }
.checklist svg { width: 18px; height: 18px; color: var(--color-success); flex-shrink: 0; margin-top: 2px; }
@media (max-width: 640px) { .checklist { grid-template-columns: 1fr; } }

/* ===== Curriculum accordion ===== */
.accordion-item { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.accordion-item + .accordion-item { margin-top: var(--space-3); }
.accordion-item__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5, 20px); background: var(--bg-surface); border: none; text-align: left; font-family: inherit; }
.accordion-item__head-left { display: flex; flex-direction: column; gap: 2px; }
.accordion-item__head strong { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.accordion-item__head small { font-size: 12px; color: var(--text-secondary); }
.accordion-item__chevron { transition: transform var(--duration-micro) var(--ease-out); flex-shrink: 0; color: var(--text-secondary); }
.accordion-item.is-open .accordion-item__chevron { transform: rotate(180deg); }
.accordion-item__body { max-height: 0; overflow: hidden; transition: max-height var(--duration-page) var(--ease-out); }
.accordion-item.is-open .accordion-item__body { max-height: 700px; }
.lesson-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5, 20px); font-size: var(--font-size-sm); color: var(--text-secondary); }
.lesson-row + .lesson-row { border-top: 1px solid var(--border-default); }
.lesson-row svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-neutral-400); }
.lesson-row__title { flex: 1; color: var(--text-primary); }
.lesson-row.is-preview .lesson-row__title { color: var(--color-primary-600); }
.lesson-row time { font-size: 12px; color: var(--text-secondary); flex-shrink: 0; }

/* ===== Cart page ===== */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 380px); gap: var(--space-6); align-items: start; margin-top: var(--space-8); }
@media (max-width: 1024px) { .cart-layout { grid-template-columns: minmax(0, 1fr); } }

.cart-callout { display: flex; align-items: center; gap: var(--space-4); background: rgba(22,163,74,0.07); border: 1px solid rgba(22,163,74,0.24); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5, 20px); margin-bottom: var(--space-6); }
.cart-callout__icon { width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-success); color: var(--text-inverse); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cart-callout__icon svg { width: 20px; height: 20px; }
.cart-callout strong { display: block; font-size: var(--font-size-sm); color: var(--color-success); }
.cart-callout span { font-size: 12px; color: var(--text-secondary); }

.cart-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-default); margin-bottom: var(--space-2); }
.cart-toolbar__select { display: flex; align-items: center; gap: var(--space-4); font-size: var(--font-size-sm); }
.cart-toolbar__select label { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; font-weight: var(--font-weight-medium); }
.cart-toolbar__select input { width: 16px; height: 16px; accent-color: var(--color-primary-600); }
.cart-toolbar__clear { display: flex; align-items: center; gap: 6px; background: none; border: none; font-family: inherit; font-size: var(--font-size-sm); color: var(--text-secondary); }
.cart-toolbar__clear:hover { color: var(--color-error); }
.cart-toolbar__clear svg { width: 14px; height: 14px; }

.cart-item { display: flex; align-items: flex-start; gap: var(--space-5, 20px); padding: var(--space-5, 20px) 0; border-bottom: 1px solid var(--border-default); }
.cart-item__check { padding-top: var(--space-1); flex-shrink: 0; }
.cart-item__check input { width: 18px; height: 18px; accent-color: var(--color-primary-600); }
.cart-item__media { width: 140px; 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; position: relative; overflow: hidden; }
.cart-item__media svg { width: 36px; height: 36px; }
.cart-item__media .badge { position: absolute; top: var(--space-2); left: var(--space-2); }
.cart-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cart-item__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.cart-item__instructor { font-size: var(--font-size-sm); color: var(--text-secondary); }
.cart-item__meta { font-size: var(--font-size-sm); color: var(--text-secondary); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cart-item__tags { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: 2px; }
.cart-item__actions { display: flex; gap: var(--space-4); margin-top: auto; padding-top: var(--space-2); font-size: var(--font-size-sm); }
.cart-item__actions button { background: none; border: none; font-family: inherit; font-size: inherit; color: var(--text-secondary); padding: 0; }
.cart-item__actions button:hover { color: var(--text-primary); }
.cart-item__actions .cart-item__remove:hover { color: var(--color-error); }
.cart-item__price-col { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 130px; }
.cart-item__price { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.cart-item__price-old { font-size: var(--font-size-sm); color: var(--text-secondary); text-decoration: line-through; }
.cart-item__discount { font-size: 12px; font-weight: var(--font-weight-semibold); color: var(--color-success); }

@media (max-width: 640px) {
  .cart-item { flex-wrap: wrap; }
  .cart-item__media { width: 104px; }
  .cart-item__price-col { flex-direction: row; align-items: baseline; gap: var(--space-2); margin-left: calc(18px + var(--space-5, 20px)); text-align: left; min-width: 0; }
}

.order-summary { position: sticky; top: calc(80px + var(--space-6)); }
.order-summary__row { display: flex; align-items: center; justify-content: space-between; font-size: var(--font-size-sm); padding-block: var(--space-2); gap: var(--space-3); }
.order-summary__row span:first-child { color: var(--text-secondary); }
.order-summary__row.is-discount span:last-child { color: var(--color-success); font-weight: var(--font-weight-semibold); }
.order-summary__code { color: var(--color-primary-600); font-weight: var(--font-weight-medium); display: flex; align-items: center; gap: 4px; background: none; border: none; font-family: inherit; font-size: inherit; padding: 0; }
.order-summary__total { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-4); margin-top: var(--space-2); border-top: 1px solid var(--border-default); }
.order-summary__total-value { font-size: var(--font-size-2xl); font-family: var(--font-heading); color: var(--color-primary-700); }
.order-summary__savings { margin-top: var(--space-3); background: rgba(22,163,74,0.08); color: var(--color-success); border-radius: var(--radius-sm); padding: var(--space-3); font-size: 13px; display: flex; align-items: flex-start; gap: var(--space-2); }
.order-summary__savings svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

.coupon-field { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.coupon-field input { flex: 1; min-width: 0; height: 44px; padding-inline: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-default); font-family: inherit; font-size: var(--font-size-sm); background: var(--bg-page); color: var(--text-primary); }
.coupon-field input:focus { border-color: var(--color-neutral-900); outline: none; }
.coupon-field .btn { height: 44px; padding-inline: var(--space-4); flex-shrink: 0; }
.coupon-note { font-size: 12px; margin-top: var(--space-2); color: var(--text-secondary); }
.coupon-note.is-error { color: var(--color-error); }
.coupon-note.is-success { color: var(--color-success); }

.payment-icons-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.payment-icons-row span { height: 26px; padding-inline: var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--border-default); font-size: 11px; font-weight: var(--font-weight-semibold); color: var(--text-secondary); display: flex; align-items: center; }

/* ===== Đơn hàng của tôi ===== */
.orders-toolbar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-8); flex-wrap: wrap; }
.orders-toolbar .header-search { flex: 1 1 260px; max-width: none; }

.order-card { border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--bg-page); }
.order-card + .order-card { margin-top: var(--space-5, 20px); }
.order-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5, 20px); }
.order-card__main { display: flex; align-items: flex-start; gap: var(--space-5, 20px); flex-wrap: wrap; }
.order-card__media {
  width: 64px; height: 64px; 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;
}
.order-card__media svg { width: 28px; height: 28px; }
.order-card__content { flex: 1 1 260px; min-width: 0; }
.order-card__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.order-card__instructor { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: 2px; }
.order-card__submeta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5, 20px); margin-top: var(--space-3); font-size: 12px; color: var(--text-secondary); }
.order-card__submeta strong { color: var(--text-primary); font-weight: var(--font-weight-medium); }
.order-card__aside { flex: 0 0 200px; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); text-align: right; }
.order-card__price { font-size: var(--font-size-lg); font-weight: 700; font-family: var(--font-heading); }
.order-card__price-old { font-size: 12px; color: var(--text-secondary); text-decoration: line-through; margin-right: var(--space-2); }
.order-card__payment { font-size: 12px; color: var(--text-secondary); }
.order-card__aside .btn { width: 100%; }
@media (max-width: 640px) {
  .order-card__aside { flex: 1 1 100%; align-items: flex-start; text-align: left; margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border-default); }
  .order-card__aside .btn { width: auto; }
}

.order-overview__row { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); }
.order-overview__row + .order-overview__row { border-top: 1px solid var(--border-default); }
.order-overview__icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.order-overview__icon svg { width: 16px; height: 16px; }
.order-overview__label { flex: 1; font-size: var(--font-size-sm); color: var(--text-secondary); }
.order-overview__value { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.order-overview__row.is-warning .order-overview__icon { background: rgba(217,119,6,0.12); color: var(--color-warning); }
.order-overview__row.is-progress .order-overview__icon { background: rgba(79,70,229,0.12); color: var(--color-primary-700); }
.order-overview__row.is-success .order-overview__icon { background: rgba(22,163,74,0.1); color: var(--color-success); }
.order-overview__row.is-danger .order-overview__icon { background: rgba(220,38,38,0.1); color: var(--color-error); }

.support-widget-row { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--font-size-sm); padding-block: var(--space-2); }
.support-widget-row svg { width: 16px; height: 16px; color: var(--color-primary-600); flex-shrink: 0; margin-top: 2px; }
.support-widget-row a { min-width: 0; overflow-wrap: anywhere; }
.support-widget-row a:hover { color: var(--color-primary-600); }

/* ===== Lịch sử học: 4 thẻ số liệu tổng quan ===== */
.history-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin-bottom: var(--space-8); }
.history-stat { text-align: center; padding: var(--space-6); }
.history-stat__icon { width: 48px; height: 48px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-3); background: var(--bg-surface); color: var(--text-secondary); }
.history-stat__icon svg { width: 22px; height: 22px; }
.history-stat--progress .history-stat__icon { background: rgba(79,70,229,0.12); color: var(--color-primary-700); }
.history-stat--success .history-stat__icon { background: rgba(22,163,74,0.1); color: var(--color-success); }
.history-stat--warning .history-stat__icon { background: rgba(217,119,6,0.12); color: var(--color-warning); }
.history-stat--danger .history-stat__icon { background: rgba(220,38,38,0.1); color: var(--color-error); }
.history-stat__value { display: block; font-family: var(--font-heading); font-size: var(--font-size-3xl); font-weight: 700; }
.history-stat__label { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: 2px; }
@container home-main (max-width: 768px) { .history-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .history-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Lịch sử học: dòng hoạt động gần đây ===== */
.activity-row { display: flex; align-items: flex-start; gap: var(--space-3); padding-block: var(--space-3); }
.activity-row + .activity-row { border-top: 1px solid var(--border-default); }
.activity-row__icon { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--bg-surface); color: var(--color-primary-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.activity-row__icon svg { width: 15px; height: 15px; }
.activity-row__text { font-size: var(--font-size-sm); color: var(--text-primary); }
.activity-row__time { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* Empty cart state */
.empty-cart { display: none; flex-direction: column; align-items: center; text-align: center; padding: var(--space-24) var(--space-6); }
.empty-cart.is-visible { display: flex; }
.empty-cart__icon { width: 88px; height: 88px; border-radius: var(--radius-full); background: var(--bg-surface); color: var(--color-neutral-400); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-6); }
.empty-cart__icon svg { width: 40px; height: 40px; }
.empty-cart p { margin-top: var(--space-2); color: var(--text-secondary); max-width: 360px; }
.empty-cart .btn { margin-top: var(--space-6); }

/* ===== Checkout: stepper (Giỏ hàng → Thanh toán → Hoàn tất) =====
   Dùng chung giữa gio-hang.html, thanh-toan.html, thanh-toan-thanh-cong.html
   để người dùng luôn thấy mình đang ở đâu trong luồng (ux-rules.md #4, #6). */
.checkout-steps { display: flex; align-items: flex-start; max-width: 560px; margin: 0 auto var(--space-10, 40px); }
.checkout-step { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.checkout-step__circle {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  border: 2px solid var(--border-default); background: var(--bg-page); color: var(--text-secondary);
  transition: background var(--duration-micro) var(--ease-out), border-color var(--duration-micro) var(--ease-out);
}
.checkout-step__circle svg { width: 16px; height: 16px; }
.checkout-step__label { font-size: var(--font-size-sm); color: var(--text-secondary); white-space: nowrap; }
.checkout-step.is-done .checkout-step__circle { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.checkout-step.is-done .checkout-step__label { color: var(--text-primary); }
.checkout-step.is-active .checkout-step__circle { background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff; box-shadow: 0 0 0 4px rgba(99,102,241,0.16); }
.checkout-step.is-active .checkout-step__label { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.checkout-step-line { flex: 1 1 auto; height: 2px; background: var(--border-default); margin: 15px var(--space-3) 0; }
.checkout-step-line.is-complete { background: var(--color-success); }
@media (max-width: 560px) { .checkout-step__label { display: none; } }

/* ===== Checkout: layout danh sách phương thức + panel chi tiết ===== */
.checkout-main-grid { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (max-width: 860px) { .checkout-main-grid { grid-template-columns: minmax(0, 1fr); } }

/* ===== Checkout: chọn phương thức thanh toán ===== */
.pay-method-list { display: flex; flex-direction: column; gap: var(--space-3); }
.pay-method {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5, 20px);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-micro) var(--ease-out), background var(--duration-micro) var(--ease-out);
}
.pay-method:hover { border-color: var(--color-neutral-400); }
.pay-method input[type='radio'] { width: 18px; height: 18px; accent-color: var(--color-primary-600); flex-shrink: 0; }
.pay-method__icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--bg-surface); color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pay-method__icon svg { width: 20px; height: 20px; }
.pay-method__body { flex: 1; min-width: 0; }
.pay-method__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.pay-method__desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.pay-method__brands { display: flex; gap: 6px; flex-shrink: 0; }
.pay-method__brands span { height: 22px; padding-inline: var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--border-default); font-size: 10px; font-weight: var(--font-weight-semibold); color: var(--text-secondary); display: flex; align-items: center; }
.pay-method.is-selected { border-color: var(--color-primary-500); background: rgba(99,102,241,0.06); }
.pay-method.is-selected .pay-method__icon { background: var(--color-primary-600); color: #fff; }
@media (max-width: 560px) { .pay-method__brands { display: none; } }

/* ===== Checkout: panel phương thức (đổi theo lựa chọn) ===== */
.pay-panel { display: none; }
.pay-panel.is-active { display: block; }

/* Panel QR (SePay) */
.qr-panel { border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-8); text-align: center; }
.qr-panel__brand { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); color: var(--color-primary-700); }
.qr-panel__brand svg { width: 22px; height: 22px; }
.qr-panel__desc { color: var(--text-secondary); font-size: var(--font-size-sm); max-width: 360px; margin: var(--space-2) auto 0; }
.qr-panel__code { width: 220px; height: 220px; margin: var(--space-6) auto 0; border-radius: var(--radius-md); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; padding: var(--space-3); }
.qr-panel__code svg { width: 100%; height: 100%; }
.qr-panel__amount { margin-top: var(--space-5, 20px); }
.qr-panel__amount span { display: block; font-size: var(--font-size-sm); color: var(--text-secondary); }
.qr-panel__amount strong { font-size: var(--font-size-3xl); font-family: var(--font-heading); color: var(--color-primary-700); }
.qr-panel__order { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--font-size-sm); color: var(--text-secondary); }
.qr-panel__order button { background: none; border: none; color: var(--text-secondary); display: flex; padding: 0; }
.qr-panel__order button:hover { color: var(--color-primary-600); }
.qr-panel__timer { margin-top: var(--space-6); background: var(--bg-surface); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.qr-panel__timer svg { width: 16px; height: 16px; flex-shrink: 0; }
.qr-panel__timer strong { color: var(--color-primary-700); font-variant-numeric: tabular-nums; }
.qr-panel__help { margin-top: var(--space-6); font-size: var(--font-size-sm); color: var(--text-secondary); }
.qr-panel__help a { color: var(--color-primary-600); font-weight: var(--font-weight-medium); }
.qr-panel__confirm { margin-top: var(--space-6); }

/* Panel ngân hàng (ATM/Internet Banking) */
.bank-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.bank-tile { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-secondary); }
.bank-tile:hover { border-color: var(--color-primary-400); color: var(--text-primary); }
.bank-tile.is-selected { border-color: var(--color-primary-500); background: rgba(99,102,241,0.06); color: var(--color-primary-700); }
.bank-tile__mark { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--color-neutral-900); color: var(--color-primary-300); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: var(--font-weight-bold); }
@container home-main (max-width: 640px) { .bank-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bank-grid { grid-template-columns: repeat(2, 1fr); } }

/* Panel ví điện tử */
.wallet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.wallet-tile { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-5, 20px); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-secondary); }
.wallet-tile:hover { border-color: var(--color-primary-400); color: var(--text-primary); }
.wallet-tile.is-selected { border-color: var(--color-primary-500); background: rgba(99,102,241,0.06); color: var(--color-primary-700); }
@container home-main (max-width: 640px) { .wallet-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .wallet-grid { grid-template-columns: 1fr; } }

/* Panel thẻ tín dụng/ghi nợ */
.card-form { display: flex; flex-direction: column; gap: var(--space-4); }
.card-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) { .card-form__row { grid-template-columns: 1fr; } }

/* ===== Checkout: hướng dẫn từng bước ===== */
.steps-guide { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-6); }
.steps-guide__item { text-align: center; }
.steps-guide__icon { position: relative; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--bg-surface); color: var(--color-primary-600); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-3); }
.steps-guide__icon svg { width: 24px; height: 24px; }
.steps-guide__num { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-neutral-900); color: #fff; font-size: 11px; font-weight: var(--font-weight-bold); display: flex; align-items: center; justify-content: center; }
.steps-guide__item h4 { font-size: var(--font-size-sm); margin-bottom: 4px; }
.steps-guide__item p { font-size: 12px; color: var(--text-secondary); }
@media (max-width: 900px) { .steps-guide { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-8); } }
@media (max-width: 560px) { .steps-guide { grid-template-columns: 1fr; } }

/* ===== Trang thanh toán thành công ===== */
.success-hero { text-align: center; padding-block: var(--space-8) var(--space-4); max-width: 560px; margin-inline: auto; }
.success-hero__icon { position: relative; width: 80px; height: 80px; border-radius: 50%; background: rgba(22,163,74,0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-6); }
.success-hero__icon::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(22,163,74,0.22); }
.success-hero__icon svg { width: 38px; height: 38px; color: var(--color-success); }
.success-hero h1 { font-size: var(--font-size-3xl); color: var(--color-success); }
.success-hero p { margin-top: var(--space-3); color: var(--text-secondary); }

.tx-detail { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.tx-detail__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5, 20px); font-size: var(--font-size-sm); }
.tx-detail__row + .tx-detail__row { border-top: 1px solid var(--border-default); }
.tx-detail__row span:first-child { color: var(--text-secondary); flex-shrink: 0; }
.tx-detail__row span:last-child { font-weight: var(--font-weight-semibold); text-align: right; display: flex; align-items: center; gap: 6px; }
.tx-detail__row button { background: none; border: none; color: var(--text-secondary); display: flex; padding: 0; }
.tx-detail__row button:hover { color: var(--color-primary-600); }

.enrolled-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; }
.enrolled-row + .enrolled-row { border-top: 1px solid var(--border-default); }
.enrolled-row__media { width: 64px; height: 64px; border-radius: var(--radius-sm); background: var(--color-neutral-900); color: var(--color-primary-300); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.enrolled-row__media svg { width: 26px; height: 26px; }
.enrolled-row__body { flex: 1; min-width: 0; }
.enrolled-row__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.enrolled-row__instructor { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.enrolled-row .btn { flex-shrink: 0; }
@media (max-width: 560px) { .enrolled-row { flex-wrap: wrap; } .enrolled-row .btn { margin-left: calc(64px + var(--space-4)); } }

.trust-badges-row { display: flex; align-items: center; gap: var(--space-5, 20px); flex-wrap: wrap; }
.trust-badges-row span { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: var(--font-weight-semibold); color: var(--text-secondary); }
.trust-badges-row svg { width: 16px; height: 16px; color: var(--color-success); flex-shrink: 0; }

/* ===== Rating summary + breakdown bars ===== */
.rating-summary { display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap; }
.rating-summary__score { text-align: center; }
.rating-summary__score strong { font-size: var(--font-size-5xl); font-family: var(--font-heading); display: block; line-height: 1; }
.rating-summary__score .rating { justify-content: center; margin-top: var(--space-2); }
.rating-summary__score p { margin-top: var(--space-1); font-size: var(--font-size-sm); color: var(--text-secondary); }
.rating-summary__bars { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: var(--space-2); }
.rating-bar { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-sm); color: var(--text-secondary); }
.rating-bar__track { flex: 1; height: 8px; border-radius: var(--radius-full); background: var(--color-neutral-200); overflow: hidden; }
.rating-bar__fill { height: 100%; background: var(--color-primary-500); border-radius: var(--radius-full); }

/* ===== Modal (dialog) — dùng chung cho chi tiết chứng chỉ, xác minh... =====
   Luôn có nút đóng rõ ràng + đóng bằng click nền/phím Esc (ux-rules.md #4). */
body.has-modal-open { overflow: hidden; }
.modal-backdrop {
  display: none; position: fixed; inset: 0; z-index: 90;
  background: rgba(13, 15, 30, 0.6);
  align-items: center; justify-content: center;
  padding: var(--space-6); overflow-y: auto;
}
.modal-backdrop.is-open { display: flex; }
.modal {
  position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - var(--space-12));
  overflow-y: auto; background: var(--bg-page); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: modal-in var(--duration-page) var(--ease-out);
}
.modal--lg { max-width: 720px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.modal__close {
  position: absolute; top: var(--space-4); right: var(--space-4); z-index: 2;
  width: 36px; height: 36px; border-radius: var(--radius-full);
  border: 1px solid var(--border-default); background: var(--bg-page); color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
}
.modal__close:hover { border-color: var(--color-neutral-900); color: var(--text-primary); }
.modal__close svg { width: 16px; height: 16px; }
.modal__head { padding: var(--space-6) var(--space-8); border-bottom: 1px solid var(--border-default); padding-right: var(--space-12); }
.modal__head h3 { font-size: var(--font-size-xl); }
.modal__head p { margin-top: var(--space-1); font-size: var(--font-size-sm); color: var(--text-secondary); }
.modal__body { padding: var(--space-8); }
.modal__foot { padding: var(--space-5, 20px) var(--space-8); border-top: 1px solid var(--border-default); display: flex; gap: var(--space-3); justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 640px) {
  .modal__head, .modal__body, .modal__foot { padding-inline: var(--space-5, 20px); }
  .modal__foot { flex-direction: column-reverse; }
  .modal__foot .btn { width: 100%; }
}

/* ===== Certificate frame — dùng cho khối chứng chỉ nổi bật + trong modal chi tiết =====
   Đây là "tờ giấy chứng chỉ" mô phỏng bản in vật lý nên cố tình dùng bảng màu vàng-kem
   cố định (không đổi theo dark mode) + cặp font Playfair Display/Alex Brush riêng cho
   component này — ngoại lệ có chủ đích, không lan sang các thành phần UI khác của site. */
.cert-frame {
  --cert-gold-dark: #8a621f;
  --cert-gold: #b8863b;
  --cert-gold-light: #f3d98a;
  --cert-ink: #1c1a16;
  position: relative;
  isolation: isolate;
  background: #fffdf8;
  border: 2px solid var(--cert-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-10, 40px);
  overflow: hidden;
  text-align: center;
}
.cert-frame::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--cert-gold-light); border-radius: calc(var(--radius-lg) - 6px); pointer-events: none; }
.cert-frame__corner { position: absolute; width: 130px; height: 130px; overflow: hidden; pointer-events: none; z-index: 0; }
.cert-frame__corner--tl { top: -2px; left: -2px; }
.cert-frame__corner--br { bottom: -2px; right: -2px; transform: rotate(180deg); }
.cert-frame__corner::before {
  content: ''; position: absolute; top: 32px; left: -40px; width: 220px; height: 38px;
  background: linear-gradient(120deg, var(--cert-gold-dark), var(--cert-gold-light) 45%, var(--cert-gold));
  transform: rotate(-45deg);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.cert-frame__corner::after {
  content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0;
  border-style: solid; border-width: 44px 44px 0 0; border-color: rgba(0, 0, 0, 0.05) transparent transparent transparent;
}
.cert-frame__ribbon {
  position: absolute; top: 0; right: var(--space-10, 40px); width: 44px; padding: var(--space-3) 0 var(--space-4);
  background: var(--color-primary-600); color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 10px; font-weight: var(--font-weight-semibold);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
  z-index: 2;
}
.cert-frame__ribbon svg { width: 16px; height: 16px; }
.cert-frame__brand { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--space-2); }
.cert-frame__brand .brand__mark { width: 30px; height: 30px; font-size: 13px; }
.cert-frame__brand .brand__name { font-size: var(--font-size-base); color: var(--cert-ink); }
.cert-frame__kicker {
  position: relative; z-index: 1; margin-top: var(--space-7);
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-size: clamp(26px, 4vw, 38px); font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--cert-ink);
}
.cert-frame__sub {
  position: relative; z-index: 1; display: inline-block; margin-top: 8px; padding-bottom: var(--space-3);
  font-size: 11px; font-weight: var(--font-weight-semibold); color: var(--cert-gold-dark);
  text-transform: uppercase; letter-spacing: 0.3em; border-bottom: 1px solid var(--cert-gold-light);
}
.cert-frame__line {
  position: relative; z-index: 1; margin-top: var(--space-8);
  font-size: 12px; font-weight: var(--font-weight-semibold); color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.2em;
}
.cert-frame__name {
  position: relative; z-index: 1; display: inline-block; margin-top: var(--space-2); padding-bottom: var(--space-2);
  font-family: 'Alex Brush', 'Brush Script MT', cursive; font-weight: 400;
  font-size: clamp(38px, 6vw, 64px); line-height: 1.2;
  background: linear-gradient(120deg, var(--cert-gold-dark), var(--cert-gold) 45%, var(--cert-gold-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cert-frame__line--course { margin-top: var(--space-6); }
.cert-frame__course { position: relative; z-index: 1; margin-top: var(--space-2); font-size: var(--font-size-2xl); max-width: 520px; margin-inline: auto; color: var(--cert-ink); }
.cert-frame__desc { position: relative; z-index: 1; margin-top: var(--space-3); font-size: var(--font-size-sm); color: var(--text-secondary); max-width: 460px; margin-inline: auto; }
.cert-frame__foot { position: relative; z-index: 1; margin-top: var(--space-10, 40px); display: flex; align-items: center; justify-content: center; gap: var(--space-8); max-width: 420px; margin-inline: auto; }
.cert-frame__foot-col { flex: 1; min-width: 0; }
.cert-frame__foot-col--date { padding-right: var(--space-8); border-right: 1px solid var(--cert-gold-light); }
.cert-frame__foot-value { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--cert-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cert-frame__foot-col--sign .cert-frame__foot-value { font-family: 'Alex Brush', cursive; font-weight: 400; font-size: 22px; line-height: 1.3; color: var(--cert-gold-dark); white-space: normal; overflow: visible; text-overflow: clip; }
.cert-frame__foot-line { display: block; width: 80%; max-width: 160px; height: 1px; margin: var(--space-2) auto 6px; background: var(--cert-gold-light); }
.cert-frame__foot-label { display: block; font-size: 10px; font-weight: var(--font-weight-semibold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.16em; }
.cert-frame__foot-sub { display: block; margin-top: 2px; font-size: 10px; color: var(--text-secondary); }
@media (max-width: 640px) {
  .cert-frame { padding: var(--space-8) var(--space-5, 20px); }
  .cert-frame__foot { flex-direction: column; gap: var(--space-5); max-width: none; }
  .cert-frame__foot-col--date { padding-right: 0; border-right: none; }
  .cert-frame__corner { width: 74px; height: 74px; }
  .cert-frame__corner::before { top: 18px; left: -30px; width: 140px; height: 24px; }
  .cert-frame__corner::after { border-width: 26px 26px 0 0; }
}

/* Khối thông tin chi tiết bên dưới cert-frame trong modal */
.cert-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.cert-info-grid div { border-top: 1px solid var(--border-default); padding-top: var(--space-3); }
.cert-info-grid span { display: block; font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.cert-info-grid strong { display: block; margin-top: 4px; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
@media (max-width: 560px) { .cert-info-grid { grid-template-columns: 1fr; } }

/* ===== Danh sách chứng chỉ đã đạt (cert-item) ===== */
.cert-item { display: flex; align-items: center; gap: var(--space-5, 20px); padding: var(--space-5, 20px) 0; background: none; border: none; width: 100%; text-align: left; font-family: inherit; cursor: pointer; }
.cert-item + .cert-item { border-top: 1px solid var(--border-default); }
.cert-item:hover .cert-item__title { color: var(--color-primary-600); }
.cert-item__media { width: 56px; height: 56px; border-radius: var(--radius-md); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cert-item__media svg { width: 26px; height: 26px; }
.cert-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cert-item__category { font-size: 12px; font-weight: var(--font-weight-semibold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.cert-item__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); transition: color var(--duration-micro) var(--ease-out); }
.cert-item__meta { font-size: 12px; color: var(--text-secondary); }
.cert-item__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.cert-item__actions .icon-btn { width: 36px; height: 36px; }
.cert-item__actions .icon-btn svg { width: 15px; height: 15px; }
@media (max-width: 640px) {
  .cert-item { flex-wrap: wrap; }
  .cert-item__actions { width: 100%; }
}

/* ===== Khóa học đang học — chưa đủ điều kiện cấp chứng chỉ (locked) ===== */
.cert-locked-item { display: flex; align-items: center; gap: var(--space-5, 20px); padding: var(--space-5, 20px) 0; }
.cert-locked-item + .cert-locked-item { border-top: 1px solid var(--border-default); }
.cert-locked-item__media { position: relative; width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--bg-surface); color: var(--color-neutral-400); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cert-locked-item__media svg { width: 24px; height: 24px; }
.cert-locked-item__lock { position: absolute; bottom: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-neutral-900); color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-page); }
.cert-locked-item__lock svg { width: 10px; height: 10px; }
.cert-locked-item__body { flex: 1; min-width: 0; }
.cert-locked-item__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.cert-locked-item__progress { display: flex; align-items: center; gap: var(--space-3); margin-top: 6px; max-width: 320px; }
.cert-locked-item__progress .progress { flex: 1; }
.cert-locked-item__progress span { font-size: 12px; font-weight: var(--font-weight-semibold); color: var(--text-secondary); flex-shrink: 0; }
.cert-locked-item__note { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.cert-locked-item__cta { flex-shrink: 0; }
@media (max-width: 640px) {
  .cert-locked-item { flex-wrap: wrap; }
  .cert-locked-item__cta { width: 100%; }
}

/* ===== Chuyên ngành (specialization) — nhóm nhiều chứng chỉ liên quan ===== */
.spec-card { border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); height: 100%; }
.spec-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.spec-card__stack { display: flex; flex-shrink: 0; }
.spec-card__stack span { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-page); margin-left: -10px; }
.spec-card__stack span:first-child { margin-left: 0; }
.spec-card__stack svg { width: 16px; height: 16px; }
.spec-card__title { font-size: var(--font-size-lg); }
.spec-card__desc { font-size: var(--font-size-sm); color: var(--text-secondary); }
.spec-card__courses { display: flex; flex-direction: column; gap: var(--space-2); }
.spec-card__course-row { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--text-secondary); }
.spec-card__course-row svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--color-neutral-300); }
.spec-card__course-row.is-done { color: var(--text-primary); }
.spec-card__course-row.is-done svg { color: var(--color-success); }
.spec-card__foot { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* ===== Tổng quan chứng chỉ (aside) — lưới stat rút gọn ===== */
.cert-overview-total { text-align: center; padding-bottom: var(--space-5, 20px); margin-bottom: var(--space-5, 20px); border-bottom: 1px solid var(--border-default); }
.cert-overview-total strong { display: block; font-family: var(--font-heading); font-size: var(--font-size-5xl); line-height: 1; color: var(--color-primary-700); }
.cert-overview-total span { font-size: var(--font-size-sm); color: var(--text-secondary); }
.cert-overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.cert-overview-grid .stat__value { font-size: var(--font-size-xl); }

/* ===== Vòng tiến trình tròn (progress ring) — SVG, không cần JS để hiển thị %  ===== */
.progress-ring { position: relative; width: 104px; height: 104px; margin-inline: auto; }
.progress-ring svg { transform: rotate(-90deg); }
.progress-ring circle { fill: none; stroke-width: 8; }
.progress-ring circle.progress-ring__track { stroke: var(--color-neutral-200); }
.progress-ring circle.progress-ring__fill { stroke: var(--color-primary-600); stroke-linecap: round; transition: stroke-dashoffset var(--duration-page) var(--ease-out); }
.progress-ring__value { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.progress-ring__value strong { font-size: var(--font-size-xl); font-family: var(--font-heading); }
.progress-ring__value span { font-size: 10px; color: var(--text-secondary); }

/* ===== Xác minh chứng chỉ — ô nhập + kết quả phản hồi tức thời (ux-rules.md #3) ===== */
.verify-input-row { display: flex; gap: var(--space-2); }
.verify-input-row input { flex: 1; min-width: 0; height: 44px; padding-inline: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-default); font-family: inherit; font-size: var(--font-size-sm); background: var(--bg-page); color: var(--text-primary); }
.verify-input-row input:focus { border-color: var(--color-neutral-900); outline: none; }
.verify-input-row .btn { flex-shrink: 0; height: 44px; padding-inline: var(--space-4); }
.verify-result { margin-top: var(--space-4); border-radius: var(--radius-md); padding: var(--space-4); display: none; gap: var(--space-3); align-items: flex-start; }
.verify-result.is-visible { display: flex; }
.verify-result.is-valid { background: rgba(22,163,74,0.07); border: 1px solid rgba(22,163,74,0.24); }
.verify-result.is-invalid { background: rgba(220,38,38,0.06); border: 1px solid rgba(220,38,38,0.22); }
.verify-result__icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.verify-result.is-valid .verify-result__icon { background: var(--color-success); color: #fff; }
.verify-result.is-invalid .verify-result__icon { background: var(--color-error); color: #fff; }
.verify-result__icon svg { width: 16px; height: 16px; }
.verify-result__body { min-width: 0; }
.verify-result__body strong { display: block; font-size: var(--font-size-sm); }
.verify-result__body p { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.verify-result__meta { margin-top: var(--space-3); font-size: 12px; color: var(--text-secondary); display: flex; flex-direction: column; gap: 3px; padding-top: var(--space-3); border-top: 1px solid rgba(22,163,74,0.18); }
.verify-result__meta strong { color: var(--text-primary); font-weight: var(--font-weight-medium); }

/* ===== Empty state (generic — chưa có chứng chỉ nào) ===== */
.empty-state { display: none; flex-direction: column; align-items: center; text-align: center; padding: var(--space-24) var(--space-6); }
.empty-state.is-visible { display: flex; }
.empty-state__icon { width: 88px; height: 88px; border-radius: 50%; background: var(--bg-surface); color: var(--color-neutral-400); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-6); }
.empty-state__icon svg { width: 40px; height: 40px; }
.empty-state h3 { font-size: var(--font-size-xl); }
.empty-state p { margin-top: var(--space-2); color: var(--text-secondary); max-width: 380px; }
.empty-state .btn { margin-top: var(--space-6); }

/* Trang chứng chỉ — bật thử trạng thái rỗng qua ?trang-thai=trong (xem chung-chi.html) */
[data-cert-page].is-empty-demo .cert-has-data { display: none; }
[data-cert-page].is-empty-demo .empty-state { display: flex; }
[data-cert-page].is-empty-demo .cert-hide-when-empty { display: none; }

/* ================================================================
   LỘ TRÌNH HỌC (lo-trinh-hoc.html)
   ================================================================ */

/* Hero lộ trình — tái dùng .course-detail-hero (tông tối + glow indigo),
   bổ sung thanh tiến độ tổng + mốc ngày bắt đầu/dự kiến hoàn thành. */
.path-hero__progress { margin-top: var(--space-8); max-width: 560px; }
.path-hero__progress-row { display: flex; align-items: center; justify-content: space-between; font-size: var(--font-size-sm); color: var(--text-inverse-secondary); margin-bottom: var(--space-2); }
.path-hero__progress-row strong { color: var(--text-inverse); font-size: var(--font-size-lg); }
.progress--invert { background: rgba(255,255,255,0.16); }
.progress--invert .progress__fill { background: var(--color-primary-400); }
.path-hero__dates { display: flex; gap: var(--space-8); margin-top: var(--space-6); flex-wrap: wrap; }
.path-hero__dates div span { display: block; font-size: 12px; color: var(--text-inverse-secondary); }
.path-hero__dates div strong { display: block; margin-top: 2px; font-size: var(--font-size-sm); color: var(--text-inverse); }
@media (max-width: 640px) { .path-hero__dates { gap: var(--space-6); } }

/* Toolbar phía trên danh sách giai đoạn (mở rộng/thu gọn tất cả) */
.path-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }

/* Danh sách giai đoạn dạng timeline — số thứ tự + đường nối dọc bên trái,
   accordion nội dung bài học bên phải (tái dùng .accordion-item/.lesson-row). */
.path-stage-list { display: flex; flex-direction: column; }
.path-stage { display: flex; gap: var(--space-5, 20px); align-items: flex-start; }
.path-stage__rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; padding-top: 2px; }
.path-stage__num {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  background: var(--bg-page); border: 2px solid var(--border-default); color: var(--text-secondary);
}
.path-stage__num svg { width: 14px; height: 14px; }
.path-stage__line { flex: 1; width: 2px; background: var(--border-default); margin-block: 4px; min-height: 24px; }
.path-stage:last-child .path-stage__line { display: none; }
.path-stage__body { flex: 1; min-width: 0; padding-bottom: var(--space-6); }
.path-stage.is-done .path-stage__num { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.path-stage.is-done .path-stage__line { background: var(--color-success); }
.path-stage.is-active .path-stage__num { background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff; box-shadow: 0 0 0 4px rgba(99,102,241,0.16); }

/* Trạng thái từng bài học trong lesson-row: hoàn thành / đang học / chưa mở khoá */
.lesson-row.is-done svg { color: var(--color-success); }
.lesson-row.is-done .lesson-row__title { color: var(--text-primary); }
.lesson-row.is-current { background: var(--color-primary-50); margin-inline: calc(-1 * var(--space-5, 20px)); padding-inline: var(--space-5, 20px); }
.lesson-row.is-current svg { color: var(--color-primary-600); }
.lesson-row.is-current .lesson-row__title { color: var(--color-primary-700); font-weight: var(--font-weight-semibold); }
.lesson-row.is-locked svg { color: var(--color-neutral-300); }
.lesson-row.is-locked .lesson-row__title { color: var(--color-neutral-400); }
.lesson-row.is-locked time { visibility: hidden; }

/* Widget "Tổng quan tiến độ" — progress-ring + danh sách số liệu (tái dùng .widget-list-row) */
.progress-overview { display: flex; flex-direction: column; align-items: center; }
.progress-overview__list { width: 100%; margin-top: var(--space-6); }

/* Widget "Lịch học của tôi" — chú thích màu bên dưới lưới lịch */
.calendar-legend { display: flex; gap: var(--space-4); margin-top: var(--space-4); flex-wrap: wrap; }
.calendar-legend span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.calendar-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--color-primary-500); font-style: normal; }
.calendar-legend i.is-done-dot { background: var(--color-success); }

/* Tab "Thành tích" của lộ trình — lưới huy hiệu đạt được / chưa mở khoá */
.achievement-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5, 20px); }
.achv-tile { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); }
.achv-tile__icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.achv-tile__icon svg { width: 24px; height: 24px; }
.achv-tile strong { font-size: var(--font-size-sm); }
.achv-tile span { font-size: 12px; color: var(--text-secondary); }
.achv-tile__date { color: var(--color-success); font-weight: var(--font-weight-medium); }
.achv-tile.is-locked { opacity: 0.55; }
.achv-tile.is-locked .achv-tile__icon { background: var(--bg-surface); color: var(--color-neutral-400); }
@container home-main (max-width: 900px) { .achievement-grid { grid-template-columns: repeat(2, 1fr); } }
@container home-main (max-width: 480px) { .achievement-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .achievement-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .achievement-grid { grid-template-columns: 1fr; } }

/* Trạng thái rỗng — chưa tham gia lộ trình nào, xem thử qua ?trang-thai=trong */
[data-path-page].is-empty-demo .path-has-data { display: none; }

/* ===== Trang "Yêu thích" ===== */
/* Nút trái tim (bỏ yêu thích) nổi góc phải trên media của course-card */
.course-card__wishlist {
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2;
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.92); border: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary-600);
  transition: transform var(--duration-micro) var(--ease-out);
}
.course-card__wishlist svg { width: 16px; height: 16px; }
.course-card__wishlist.is-active svg { fill: currentColor; }
.course-card__wishlist:hover { transform: scale(1.08); }

/* Lưới thẻ tài liệu (PDF/ZIP...) đã lưu */
.doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@container home-main (max-width: 900px) { .doc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .doc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .doc-grid { grid-template-columns: minmax(0,1fr); } }
.doc-card {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5, 20px); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  transition: border-color var(--duration-micro) var(--ease-out), box-shadow var(--duration-micro) var(--ease-out);
}
.doc-card:hover { border-color: var(--color-neutral-900); box-shadow: var(--shadow-sm); }
.doc-card__icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.doc-card__icon svg { width: 22px; height: 22px; }
.doc-card__icon--pdf { background: rgba(220,38,38,0.1); color: var(--color-error); }
.doc-card__icon--zip { background: rgba(217,119,6,0.12); color: var(--color-warning); }
.doc-card__body { min-width: 0; }
.doc-card__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-card__meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* Widget "Bộ sưu tập của bạn" — tái dùng .continue-item nhưng đếm số mục thay vì tiến độ */
.collection-item { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); }
.collection-item + .collection-item { border-top: 1px solid var(--border-default); }
.collection-item__icon { width: 40px; height: 40px; 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; }
.collection-item__icon svg { width: 18px; height: 18px; }
.collection-item__body { flex: 1; min-width: 0; }
.collection-item__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.collection-item__count { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* Widget quảng bá app (QR + nút store) trong .promo-widget */
.promo-widget__qr { width: 96px; height: 96px; background: #fff; border-radius: var(--radius-md); padding: var(--space-2); margin-top: var(--space-5, 20px); flex-shrink: 0; }
.promo-widget__qr svg { width: 100%; height: 100%; }
.promo-widget__row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.store-badges { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-width: 120px; }
.store-badge {
  display: flex; align-items: center; gap: var(--space-2);
  border: 1px solid rgba(255,255,255,0.24); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); color: var(--text-inverse);
  transition: border-color var(--duration-micro) var(--ease-out);
}
.store-badge:hover { border-color: rgba(255,255,255,0.6); }
.store-badge svg { width: 18px; height: 18px; flex-shrink: 0; }
.store-badge span { display: block; font-size: 9px; color: var(--text-inverse-secondary); line-height: 1.2; }
.store-badge strong { display: block; font-size: 12px; font-weight: var(--font-weight-semibold); line-height: 1.3; }
[data-path-page].is-empty-demo .empty-state { display: flex; }

/* ===== Trang Thông báo ===== */
.notif-list-card { padding: 0 var(--space-6); }
.notif-item { display: flex; align-items: flex-start; gap: var(--space-4); padding-block: var(--space-5); }
.notif-item + .notif-item { border-top: 1px solid var(--border-default); }
.notif-item__body { flex: 1; min-width: 0; }
.notif-item__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.notif-item__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.notif-item__course { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-primary-600); margin-top: 2px; }
.notif-item__desc { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: 4px; }
.notif-item__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); flex-shrink: 0; }
.notif-item__time { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.notif-item__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary-600); flex-shrink: 0; }

/* Bộ lọc thông báo (aside) — danh sách radio tĩnh, tái dùng bảng màu cat-icon */
.filter-radio-list { display: flex; flex-direction: column; gap: var(--space-1); }
.filter-radio { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-2); border-radius: var(--radius-md); cursor: pointer; font-size: var(--font-size-sm); color: var(--text-secondary); }
.filter-radio:hover { background: var(--bg-surface); }
.filter-radio input[type='radio'] { width: 16px; height: 16px; accent-color: var(--color-primary-600); flex-shrink: 0; }
.filter-radio.is-active { color: var(--text-primary); font-weight: var(--font-weight-medium); background: var(--bg-surface); }

/* Widget "Bật thông báo" — tái dùng .promo-widget với icon tròn thay QR */
.promo-widget__icon { width: 56px; height: 56px; border-radius: var(--radius-full); background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.promo-widget__icon svg { width: 26px; height: 26px; }