/*
 * TS Course Lite 0.7.0 – frontend.css
 * Viết lại từ bản thiết kế docs/design/css/style.css theo BEM tiền tố tscl-.
 * KHÔNG style thẻ toàn cục: mọi rule nằm trong .tscl-wrap. Màu là biến CSS trên .tscl-wrap
 * (Cài đặt → Giao diện ghi đè --tscl-primary / --tscl-accent / --tscl-bg qua inline style).
 * Breakpoint: 960 / 720 / 600 (kiểm 360px).
 */

/* ------------------------------------------------------------------ */
/* Biến và nền tảng                                                     */
/* ------------------------------------------------------------------ */
.tscl-wrap {
	--tscl-primary: #7a2e2a;
	--tscl-primary-hover: #5e2320;
	--tscl-accent: #b8862b;
	--tscl-gold: #f2c76b;
	--tscl-gold-hover: #d09b36;
	--tscl-bg: #f7f2ea;
	--tscl-surface: #fbf6ee;
	--tscl-surface-2: #efe7dc;
	--tscl-surface-3: #f2e6d3;
	--tscl-border: #e3d9cb;
	--tscl-border-strong: #c9b9a3;
	--tscl-border-dotted: #d8ccbb;
	--tscl-text: #2b2320;
	--tscl-text-soft: #584b42;
	--tscl-text-mid: #3d322c;
	--tscl-muted: #8a7a6a;
	--tscl-dark: #2b2320;
	--tscl-dark-border: #4d4139;
	--tscl-dark-muted: #b3a48f;
	--tscl-dark-text: #d9cdbd;
	--tscl-on-dark: #fbf6ee;
	--tscl-stage: #120d0b;
	--tscl-success: #3f6b3a;
	--tscl-success-bg: #e6efe3;
	--tscl-success-border: #9fb89a;
	--tscl-danger: #8a1f1f;
	--tscl-danger-bg: #fbeaea;
	--tscl-danger-border: #efc5c5;
	--tscl-font-head: 'Lora', Georgia, serif;
	--tscl-font-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--tscl-radius: 2px;
	--tscl-sticky-top: 0px;
	font-family: var(--tscl-font-body);
	color: var(--tscl-text);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}
.tscl-wrap *,
.tscl-wrap *::before,
.tscl-wrap *::after { box-sizing: border-box; }
.tscl-wrap:not(.tscl-wrap--inline) { background: var(--tscl-bg); }
.tscl-wrap a { color: inherit; text-decoration: none; }
.tscl-wrap a:hover { color: var(--tscl-primary); }
.tscl-wrap img { max-width: 100%; height: auto; }
.tscl-wrap button,
.tscl-wrap input,
.tscl-wrap select,
.tscl-wrap textarea { font-family: inherit; }
.tscl-wrap h1,
.tscl-wrap h2,
.tscl-wrap h3,
.tscl-wrap h4 { font-family: var(--tscl-font-head); color: var(--tscl-text); margin: 0; line-height: 1.25; font-weight: 700; text-wrap: pretty; }
.tscl-wrap .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

.tscl-wrap .tscl-container { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.tscl-page-archive > .tscl-container,
.tscl-page-instructors > .tscl-container { padding-top: 24px; padding-bottom: 64px; }

.tscl-wrap .tscl-empty { padding: 24px; border: 1px dashed var(--tscl-border-strong); background: var(--tscl-surface); color: var(--tscl-muted); text-align: center; margin: 16px 0; font-size: 14px; }
.tscl-wrap .tscl-notice { padding: 14px 18px; background: var(--tscl-surface-2); border-left: 3px solid var(--tscl-primary); font-size: 14px; margin: 16px auto; }
.tscl-wrap .tscl-muted { color: var(--tscl-muted); }
.tscl-wrap .tscl-small { font-size: 13px; }

/* Kicker, tag, badge */
.tscl-wrap .tscl-kicker { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--tscl-primary); margin-bottom: 8px; }
.tscl-wrap .tscl-kicker--accent { color: var(--tscl-accent); letter-spacing: 0.18em; }
.tscl-wrap .tscl-kicker--gold { color: var(--tscl-gold); letter-spacing: 0.18em; }
.tscl-wrap .tscl-tag { display: inline-block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--tscl-dark); background: var(--tscl-gold); padding: 5px 10px; border-radius: var(--tscl-radius); }
.tscl-wrap .tscl-badge { display: inline-block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; padding: 4px 8px; border-radius: var(--tscl-radius); line-height: 1.3; white-space: nowrap; }
.tscl-wrap .tscl-badge--free { background: var(--tscl-success-bg); color: var(--tscl-success); }
.tscl-wrap .tscl-badge--assigned { background: var(--tscl-surface-2); color: var(--tscl-primary); }
.tscl-wrap .tscl-badge--granted { background: var(--tscl-gold); color: var(--tscl-dark); }

/* Nút */
.tscl-wrap .tscl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 1px solid transparent; border-radius: var(--tscl-radius); font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.tscl-wrap .tscl-btn--primary { background: var(--tscl-primary); border-color: var(--tscl-primary); color: var(--tscl-on-dark); }
.tscl-wrap .tscl-btn--primary:hover { background: var(--tscl-primary-hover); border-color: var(--tscl-primary-hover); color: var(--tscl-on-dark); }
.tscl-wrap .tscl-btn--gold { background: var(--tscl-accent); border-color: var(--tscl-accent); color: var(--tscl-dark); }
.tscl-wrap .tscl-btn--gold:hover { background: var(--tscl-gold-hover); border-color: var(--tscl-gold-hover); color: var(--tscl-dark); }
.tscl-wrap .tscl-btn--outline { background: var(--tscl-surface); border-color: var(--tscl-border-strong); color: var(--tscl-text); }
.tscl-wrap .tscl-btn--outline:hover { border-color: var(--tscl-primary); color: var(--tscl-primary); }
.tscl-wrap .tscl-btn--sm { padding: 8px 14px; font-size: 13px; }
.tscl-wrap .tscl-btn--block { display: flex; width: 100%; }
.tscl-wrap .tscl-btn.is-disabled { opacity: 0.55; pointer-events: none; cursor: default; }
.tscl-wrap .tscl-btn:focus-visible { outline: 2px solid var(--tscl-accent); outline-offset: 2px; }

/* Breadcrumb */
.tscl-wrap .tscl-crumbs { font-size: 13px; color: var(--tscl-muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tscl-wrap .tscl-crumbs__link { color: var(--tscl-muted); }
.tscl-wrap .tscl-crumbs__link:hover { color: var(--tscl-primary); }
.tscl-wrap .tscl-crumbs__current { color: var(--tscl-text); }

/* Tiêu đề mục */
.tscl-wrap .tscl-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.tscl-wrap .tscl-section-head--between { justify-content: space-between; align-items: baseline; flex-wrap: wrap; margin-bottom: 14px; }
.tscl-wrap .tscl-section-head__title { font-size: 24px; margin: 0; }
.tscl-wrap .tscl-section-head__title--primary { color: var(--tscl-primary); }
.tscl-wrap .tscl-section-head__rule { flex: 1; height: 1px; background: var(--tscl-border-strong); }
.tscl-wrap .tscl-section-head__meta { font-size: 13px; color: var(--tscl-muted); white-space: nowrap; }

/* Thanh tiến độ */
.tscl-wrap .tscl-progress { display: block; height: 4px; background: var(--tscl-border); border-radius: 2px; overflow: hidden; }
.tscl-wrap .tscl-progress__bar { display: block; height: 100%; background: var(--tscl-accent); transition: width 0.3s; }
.tscl-wrap .tscl-progress--dark { background: var(--tscl-dark-border); }
.tscl-wrap .tscl-progress--dark .tscl-progress__bar { background: var(--tscl-gold); }

/* Ảnh đại diện */
.tscl-wrap .tscl-avatar { position: relative; display: block; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--tscl-surface-2); width: 44px; height: 44px; }
.tscl-wrap .tscl-avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.tscl-wrap .tscl-avatar__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--tscl-font-head); font-weight: 700; color: var(--tscl-primary); font-size: 45%; }
.tscl-wrap .tscl-avatar--28 { width: 28px; height: 28px; font-size: 28px; }
.tscl-wrap .tscl-avatar--44 { width: 44px; height: 44px; font-size: 44px; }
.tscl-wrap .tscl-avatar--48 { width: 48px; height: 48px; font-size: 48px; }
.tscl-wrap .tscl-avatar--64 { width: 64px; height: 64px; font-size: 64px; }
.tscl-wrap .tscl-avatar--96 { width: 96px; height: 96px; font-size: 96px; }
.tscl-wrap .tscl-avatar--148 { width: 148px; height: 148px; font-size: 148px; }
.tscl-wrap .tscl-avatar--ring { border: 2px solid var(--tscl-accent); }
.tscl-wrap .tscl-avatar--148.tscl-avatar--ring { border-width: 3px; }

/* ------------------------------------------------------------------ */
/* Trang danh sách khoá học                                             */
/* ------------------------------------------------------------------ */
.tscl-wrap .tscl-archive__head { padding: 24px 0 28px; border-bottom: 1px solid var(--tscl-border); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.tscl-wrap .tscl-archive__intro { max-width: 680px; }
.tscl-wrap .tscl-archive__title { font-size: clamp(34px, 4vw, 48px); line-height: 1.1; margin: 0 0 12px; color: var(--tscl-primary); }
.tscl-wrap .tscl-archive__desc { font-size: 16px; line-height: 1.65; color: var(--tscl-text-soft); margin: 0; text-wrap: pretty; }
.tscl-wrap .tscl-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.tscl-wrap .tscl-stat__num { font-family: var(--tscl-font-head); font-size: 28px; font-weight: 700; color: var(--tscl-text); line-height: 1; }
.tscl-wrap .tscl-stat__label { font-size: 12px; color: var(--tscl-muted); margin-top: 4px; }

/* Tiếp tục học */
.tscl-wrap .tscl-continue { padding: 28px 0; border-bottom: 1px solid var(--tscl-border); }
.tscl-wrap .tscl-resume-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; }
.tscl-wrap .tscl-resume { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; background: var(--tscl-surface); border: 1px solid var(--tscl-border); padding: 12px; color: var(--tscl-text); transition: border-color 0.15s; }
.tscl-wrap .tscl-resume:hover { border-color: var(--tscl-primary); color: var(--tscl-text); }
.tscl-wrap .tscl-resume__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tscl-surface-2); }
.tscl-wrap .tscl-resume__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tscl-wrap .tscl-resume__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(43, 35, 32, 0.25); }
.tscl-wrap .tscl-resume__play { width: 36px; height: 36px; border-radius: 50%; background: rgba(251, 246, 238, 0.92); display: flex; align-items: center; justify-content: center; color: var(--tscl-primary); }
.tscl-wrap .tscl-resume__badge { position: absolute; top: 8px; left: 8px; }
.tscl-wrap .tscl-resume__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tscl-wrap .tscl-resume__title { font-family: var(--tscl-font-head); font-weight: 700; font-size: 16px; line-height: 1.3; }
.tscl-wrap .tscl-resume__next { font-size: 12px; color: var(--tscl-muted); }
.tscl-wrap .tscl-resume__label { font-size: 12px; color: var(--tscl-text-soft); font-weight: 600; }

/* Bộ lọc */
.tscl-wrap .tscl-filter { padding: 24px 0 8px; display: flex; flex-direction: column; gap: 14px; margin: 0; }
.tscl-wrap .tscl-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tscl-wrap .tscl-chip { display: inline-block; font-size: 13px; padding: 8px 14px; border: 1px solid var(--tscl-border-strong); background: transparent; color: var(--tscl-text-soft); border-radius: 999px; cursor: pointer; font-weight: 500; line-height: 1.2; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.tscl-wrap .tscl-chip:hover { border-color: var(--tscl-primary); color: var(--tscl-primary); }
.tscl-wrap .tscl-chip.is-active { background: var(--tscl-primary); border-color: var(--tscl-primary); color: var(--tscl-on-dark); }
.tscl-wrap .tscl-chips--small .tscl-chip { font-size: 12px; padding: 5px 10px; }
.tscl-wrap .tscl-filter__row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tscl-wrap .tscl-search { display: flex; align-items: center; border: 1px solid var(--tscl-border-strong); background: var(--tscl-surface); border-radius: var(--tscl-radius); flex: 1 1 240px; max-width: 360px; margin: 0; }
.tscl-wrap .tscl-search__icon { margin-left: 12px; flex-shrink: 0; color: var(--tscl-muted); }
.tscl-wrap .tscl-search__input { flex: 1; min-width: 0; border: none; background: transparent; padding: 10px 12px; font-size: 14px; outline: none; color: var(--tscl-text); box-shadow: none; margin: 0; }
.tscl-wrap .tscl-select { font-size: 13px; padding: 10px 32px 10px 12px; border: 1px solid var(--tscl-border-strong); background: var(--tscl-surface); color: var(--tscl-text); border-radius: var(--tscl-radius); max-width: 100%; line-height: 1.3; }
.tscl-wrap .tscl-select--end { margin-left: auto; }
.tscl-wrap .tscl-filter__count { font-size: 14px; color: var(--tscl-muted); }

/* Lưới và thẻ khoá */
.tscl-wrap .tscl-grid { display: grid; gap: 24px; padding-top: 8px; }
.tscl-wrap .tscl-grid--1 { grid-template-columns: minmax(0, 1fr); }
.tscl-wrap .tscl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tscl-wrap .tscl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tscl-wrap .tscl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tscl-wrap .tscl-card { display: flex; flex-direction: column; background: var(--tscl-surface); border: 1px solid var(--tscl-border); min-width: 0; color: var(--tscl-text); transition: border-color 0.15s; }
.tscl-wrap .tscl-card:hover { border-color: var(--tscl-primary); }
.tscl-wrap .tscl-card__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tscl-surface-2); }
.tscl-wrap .tscl-card__img,
.tscl-wrap .tscl-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tscl-wrap .tscl-card__placeholder { position: absolute; inset: 0; display: block; background: linear-gradient(135deg, var(--tscl-surface-2), var(--tscl-border-strong)); }
.tscl-wrap .tscl-card__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(43, 35, 32, 0) 50%, rgba(43, 35, 32, 0.55)); }
.tscl-wrap .tscl-card__play { width: 52px; height: 52px; border-radius: 50%; background: rgba(251, 246, 238, 0.92); display: flex; align-items: center; justify-content: center; color: var(--tscl-primary); }
.tscl-wrap .tscl-card__badge { position: absolute; top: 10px; left: 10px; }
.tscl-wrap .tscl-card__dur { position: absolute; right: 10px; bottom: 10px; background: rgba(43, 35, 32, 0.88); color: var(--tscl-on-dark); font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: var(--tscl-radius); }
.tscl-wrap .tscl-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tscl-wrap .tscl-card__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--tscl-primary); }
.tscl-wrap .tscl-card__dot { color: #b3a08b; }
.tscl-wrap .tscl-card__level { color: var(--tscl-muted); }
.tscl-wrap .tscl-card__title { font-size: 19px; line-height: 1.3; margin: 0; }
.tscl-wrap .tscl-card__title a { color: var(--tscl-text); }
.tscl-wrap .tscl-card__title a:hover { color: var(--tscl-primary); }
.tscl-wrap .tscl-card__desc { font-size: 14px; line-height: 1.55; color: var(--tscl-text-soft); margin: 0; text-wrap: pretty; }
.tscl-wrap .tscl-card__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--tscl-border); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tscl-wrap .tscl-card__teacher { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--tscl-text); }
.tscl-wrap .tscl-card__name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tscl-wrap .tscl-card__stats { font-size: 12px; color: var(--tscl-muted); white-space: nowrap; }
.tscl-wrap .tscl-card--compact .tscl-card__title { font-size: 17px; }

/* Phân trang */
.tscl-wrap .tscl-pager { display: flex; gap: 6px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.tscl-wrap .tscl-pager .page-numbers { min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; border: 1px solid var(--tscl-border); background: var(--tscl-surface); color: var(--tscl-text); border-radius: var(--tscl-radius); }
.tscl-wrap .tscl-pager a.page-numbers:hover { border-color: var(--tscl-primary); color: var(--tscl-primary); }
.tscl-wrap .tscl-pager .page-numbers.current { border-color: var(--tscl-primary); background: var(--tscl-primary); color: var(--tscl-on-dark); }
.tscl-wrap .tscl-pager .page-numbers.dots { border-color: transparent; background: transparent; }

/* Khối CTA */
.tscl-wrap .tscl-cta { margin-top: 56px; padding: 28px 32px; background: var(--tscl-primary); color: var(--tscl-on-dark); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.tscl-wrap .tscl-cta__body { max-width: 620px; }
.tscl-wrap .tscl-cta__text { font-family: var(--tscl-font-head); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.35; }
.tscl-wrap .tscl-cta .tscl-btn--gold { background: var(--tscl-gold); border-color: var(--tscl-gold); }
.tscl-wrap .tscl-cta .tscl-btn--gold:hover { background: var(--tscl-gold-hover); border-color: var(--tscl-gold-hover); }

/* ------------------------------------------------------------------ */
/* Hero tối (chi tiết khoá, giảng viên)                                 */
/* ------------------------------------------------------------------ */
.tscl-wrap .tscl-hero { background: var(--tscl-dark); color: var(--tscl-on-dark); }
.tscl-wrap .tscl-hero__inner { padding-top: 24px; padding-bottom: 44px; }
.tscl-wrap .tscl-hero .tscl-crumbs { color: var(--tscl-dark-muted); margin-bottom: 28px; }
.tscl-wrap .tscl-hero .tscl-crumbs__link { color: var(--tscl-dark-muted); }
.tscl-wrap .tscl-hero .tscl-crumbs__link:hover { color: var(--tscl-gold); }
.tscl-wrap .tscl-hero .tscl-crumbs__current { color: var(--tscl-on-dark); }
.tscl-wrap .tscl-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.tscl-wrap .tscl-hero__text { min-width: 0; }
.tscl-wrap .tscl-hero__tags { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.tscl-wrap .tscl-hero__sub { font-size: 13px; color: var(--tscl-dark-text); }
.tscl-wrap .tscl-hero__title { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.15; margin: 0 0 16px; color: var(--tscl-on-dark); }
.tscl-wrap .tscl-hero__desc { font-size: 17px; line-height: 1.65; color: var(--tscl-dark-text); margin: 0 0 24px; max-width: 600px; text-wrap: pretty; }
.tscl-wrap .tscl-hero__teacher { display: inline-flex; align-items: center; gap: 12px; color: var(--tscl-on-dark); margin: 0 24px 24px 0; }
.tscl-wrap .tscl-hero__teacher:hover { color: var(--tscl-gold); }
.tscl-wrap .tscl-hero__teacher-kicker { display: block; font-size: 12px; color: var(--tscl-dark-muted); }
.tscl-wrap .tscl-hero__teacher-name { font-size: 15px; font-weight: 600; }
.tscl-wrap .tscl-hero__stats { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; color: var(--tscl-dark-text); padding-top: 20px; border-top: 1px solid var(--tscl-dark-border); }
.tscl-wrap .tscl-hero__stats b { color: var(--tscl-on-dark); font-weight: 600; }
.tscl-wrap .tscl-hero__media-col { min-width: 0; }
.tscl-wrap .tscl-hero__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
.tscl-wrap .tscl-hero__poster,
.tscl-wrap .tscl-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tscl-wrap .tscl-hero__play { position: absolute; inset: 0; border: none; background: rgba(43, 35, 32, 0.35); color: var(--tscl-on-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; padding: 0; width: 100%; transition: background 0.15s; }
.tscl-wrap .tscl-hero__play:hover { background: rgba(43, 35, 32, 0.2); }
.tscl-wrap .tscl-hero__play-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--tscl-on-dark); display: flex; align-items: center; justify-content: center; color: var(--tscl-primary); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.tscl-wrap .tscl-hero__play-label { font-size: 14px; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.tscl-wrap .tscl-hero__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.tscl-wrap .tscl-hero__cta { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.tscl-wrap .tscl-hero__cta-btn { width: 100%; padding: 15px 22px; font-size: 15px; font-weight: 700; white-space: normal; text-align: center; }
.tscl-wrap .tscl-hero__hint { font-size: 13px; color: var(--tscl-dark-muted); margin: 0; }
.tscl-wrap .tscl-hero__progress { display: flex; flex-direction: column; gap: 6px; }

.tscl-wrap .tscl-hero--person .tscl-hero__inner { padding-bottom: 40px; }
.tscl-wrap .tscl-hero__person { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.tscl-wrap .tscl-hero__person-body { flex: 1 1 320px; min-width: 0; }
.tscl-wrap .tscl-hero__person .tscl-hero__title { font-size: clamp(32px, 4vw, 46px); line-height: 1.1; margin: 0 0 12px; }
.tscl-wrap .tscl-hero__person .tscl-hero__desc { font-size: 16px; margin: 0; max-width: 640px; }
.tscl-wrap .tscl-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0 16px; margin-top: 32px; border-top: 1px solid var(--tscl-dark-border); }
.tscl-wrap .tscl-figure { padding: 18px 0 0; }
.tscl-wrap .tscl-figure__num { font-family: var(--tscl-font-head); font-size: 30px; font-weight: 700; color: var(--tscl-gold); line-height: 1; }
.tscl-wrap .tscl-figure__label { font-size: 12px; color: var(--tscl-dark-muted); margin-top: 6px; }

/* ------------------------------------------------------------------ */
/* Chi tiết khoá                                                        */
/* ------------------------------------------------------------------ */
.tscl-wrap .tscl-course__layout { padding-top: 40px; padding-bottom: 64px; }
.tscl-wrap .tscl-course__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; }
.tscl-wrap .tscl-course__main { min-width: 0; display: flex; flex-direction: column; gap: 44px; }
.tscl-wrap .tscl-course__side { min-width: 0; }
.tscl-wrap .tscl-course__sticky { position: sticky; top: calc(var(--tscl-sticky-top) + 24px); display: flex; flex-direction: column; gap: 20px; }
.tscl-wrap .tscl-box { border: 1px solid var(--tscl-border); background: var(--tscl-surface); padding: 22px 24px; }
.tscl-wrap .tscl-box__title { font-size: 22px; margin: 0 0 16px; }
.tscl-wrap .tscl-box__cta { margin-top: 18px; }
.tscl-wrap .tscl-kv { margin: 0; display: flex; flex-direction: column; font-size: 14px; }
.tscl-wrap .tscl-kv__row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dotted var(--tscl-border-dotted); }
.tscl-wrap .tscl-kv__row:last-child { border-bottom: none; }
.tscl-wrap .tscl-kv__key { color: var(--tscl-muted); font-weight: 400; }
.tscl-wrap .tscl-kv__val { font-weight: 600; text-align: right; margin: 0; }

.tscl-wrap .tscl-outcomes { padding: 24px 28px; }
.tscl-wrap .tscl-outcomes__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px 28px; }
.tscl-wrap .tscl-outcomes__item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.5; color: var(--tscl-text-mid); }
.tscl-wrap .tscl-outcomes__check { color: var(--tscl-accent); font-weight: 700; }

/* Danh sách bài (chi tiết khoá, shortcode) */
.tscl-wrap .tscl-lessons { list-style: none; margin: 0; padding: 0; border: 1px solid var(--tscl-border); background: var(--tscl-surface); }
.tscl-wrap .tscl-lesson { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 20px 13px 17px; border-top: 1px solid var(--tscl-surface-2); border-left: 3px solid transparent; font-size: 14px; margin: 0; }
.tscl-wrap .tscl-lesson:first-child { border-top: none; }
.tscl-wrap .tscl-lesson__icon { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--tscl-border-strong); display: flex; align-items: center; justify-content: center; color: var(--tscl-primary); font-size: 12px; font-weight: 700; flex-shrink: 0; }
.tscl-wrap .tscl-lesson.is-done .tscl-lesson__icon { background: var(--tscl-primary); border-color: var(--tscl-primary); color: var(--tscl-on-dark); }
.tscl-wrap .tscl-lesson.is-locked { color: var(--tscl-muted); }
.tscl-wrap .tscl-lesson.is-locked .tscl-lesson__icon { color: var(--tscl-muted); }
.tscl-wrap .tscl-lesson.is-current { background: var(--tscl-surface-3); border-left-color: var(--tscl-primary); }
.tscl-wrap .tscl-lesson.is-current .tscl-lesson__label { font-weight: 600; }
.tscl-wrap .tscl-lesson__label { min-width: 0; line-height: 1.4; color: inherit; }
.tscl-wrap .tscl-lesson__label:hover { color: var(--tscl-primary); }
.tscl-wrap .tscl-lesson__dur { font-size: 13px; color: var(--tscl-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tscl-wrap .tscl-curriculum__total { padding: 12px 20px; background: var(--tscl-surface-2); border: 1px solid var(--tscl-border); border-top: none; font-size: 13px; font-weight: 700; text-align: right; }
.tscl-wrap .tscl-curriculum__locked { display: flex; gap: 12px; align-items: center; padding: 16px 20px; border: 1px solid var(--tscl-border); background: var(--tscl-surface); font-size: 14px; color: var(--tscl-text-soft); margin: 0; }

/* Văn bản dài */
.tscl-wrap .tscl-prose { font-family: var(--tscl-font-head); font-size: 18px; line-height: 1.8; color: var(--tscl-text); max-width: 700px; }
.tscl-wrap .tscl-prose p { margin: 0 0 1em; text-wrap: pretty; }
.tscl-wrap .tscl-prose p:last-child { margin-bottom: 0; }
.tscl-wrap .tscl-prose h2,
.tscl-wrap .tscl-prose h3,
.tscl-wrap .tscl-prose h4 { color: var(--tscl-primary); margin: 1.6em 0 0.6em; line-height: 1.3; }
.tscl-wrap .tscl-prose h2 { font-size: 24px; }
.tscl-wrap .tscl-prose h3 { font-size: 20px; }
.tscl-wrap .tscl-prose h4 { font-size: 18px; }
.tscl-wrap .tscl-prose ul,
.tscl-wrap .tscl-prose ol { margin: 0 0 1em; padding-left: 1.4em; }
.tscl-wrap .tscl-prose li { margin-bottom: 0.4em; }
.tscl-wrap .tscl-prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--tscl-accent); font-style: italic; font-size: 1.1em; line-height: 1.6; color: var(--tscl-text-mid); }
.tscl-wrap .tscl-prose a { color: var(--tscl-primary); text-decoration: underline; text-underline-offset: 2px; }
.tscl-wrap .tscl-prose img,
.tscl-wrap .tscl-prose iframe,
.tscl-wrap .tscl-prose video { max-width: 100%; }
.tscl-wrap .tscl-prose figure { margin: 1.6em 0; }
.tscl-wrap .tscl-prose figcaption { font-family: var(--tscl-font-body); font-size: 13px; color: var(--tscl-muted); margin-top: 10px; font-style: italic; }
.tscl-wrap .tscl-prose table { width: 100%; border-collapse: collapse; font-family: var(--tscl-font-body); font-size: 15px; }
.tscl-wrap .tscl-prose td,
.tscl-wrap .tscl-prose th { padding: 8px 10px; border-bottom: 1px solid var(--tscl-border); text-align: left; }
.tscl-wrap .tscl-prose--lesson { font-size: 17px; }

.tscl-wrap .tscl-audience { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.6; color: var(--tscl-text-mid); }
.tscl-wrap .tscl-audience li::before { content: '· '; color: var(--tscl-accent); font-weight: 700; }

/* Khối giảng viên */
.tscl-wrap .tscl-teachers--card { display: flex; flex-direction: column; gap: 16px; }
.tscl-wrap .tscl-teacher-box { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 24px; border: 1px solid var(--tscl-border); background: var(--tscl-surface); }
.tscl-wrap .tscl-teacher-box__body { min-width: 0; }
.tscl-wrap .tscl-teacher-box__name { font-family: var(--tscl-font-head); font-size: 21px; font-weight: 700; display: inline-block; color: var(--tscl-text); }
.tscl-wrap .tscl-teacher-box__stats { font-size: 13px; color: var(--tscl-muted); margin: 4px 0 10px; }
.tscl-wrap .tscl-teacher-box__bio { font-size: 14px; line-height: 1.65; color: var(--tscl-text-soft); margin: 0 0 12px; text-wrap: pretty; }

/* Người (hàng gọn, thẻ) */
.tscl-wrap .tscl-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.tscl-wrap .tscl-person { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--tscl-border); background: var(--tscl-surface); color: var(--tscl-text); min-width: 0; transition: border-color 0.15s; }
.tscl-wrap .tscl-person--card:hover { border-color: var(--tscl-primary); color: var(--tscl-text); }
.tscl-wrap .tscl-person__body { min-width: 0; display: flex; flex-direction: column; }
.tscl-wrap .tscl-person__name { font-family: var(--tscl-font-head); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--tscl-text); }
.tscl-wrap .tscl-person--row .tscl-person__name { font-family: var(--tscl-font-body); font-size: 15px; font-weight: 600; }
.tscl-wrap .tscl-person__sub { font-size: 13px; color: var(--tscl-muted); margin-top: 2px; }
.tscl-wrap .tscl-teachers--list { display: flex; flex-direction: column; gap: 12px; }

.tscl-wrap .tscl-related { margin-top: 56px; }

/* ------------------------------------------------------------------ */
/* Tab dùng chung                                                       */
/* ------------------------------------------------------------------ */
.tscl-wrap .tscl-tabbar-outer { border-bottom: 1px solid var(--tscl-border); background: var(--tscl-bg); }
.tscl-wrap .tscl-tabbar { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tscl-wrap .tscl-tabbar::-webkit-scrollbar { display: none; }
.tscl-wrap .tscl-account .tscl-tabbar,
.tscl-wrap .tscl-tabbar--compact { border-bottom: 1px solid var(--tscl-border); }
.tscl-wrap .tscl-tab { display: inline-block; font-size: 15px; font-weight: 600; padding: 16px 16px; border: none; background: transparent; cursor: pointer; color: var(--tscl-text-soft); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; line-height: 1.3; }
.tscl-wrap .tscl-tab:hover { color: var(--tscl-primary); }
.tscl-wrap .tscl-tab.is-active { color: var(--tscl-primary); border-bottom-color: var(--tscl-primary); }
.tscl-wrap .tscl-tabbar--compact .tscl-tab { font-size: 14px; padding: 12px 14px; }
.tscl-wrap .tscl-tab-panel[hidden] { display: none; }
.tscl-wrap .tscl-instructor__main { padding-top: 32px; padding-bottom: 64px; }
.tscl-wrap .tscl-two-col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; }
.tscl-wrap .tscl-two-col__side { display: flex; flex-direction: column; gap: 20px; }

/* ------------------------------------------------------------------ */
/* Trang học                                                            */
/* ------------------------------------------------------------------ */
.tscl-wrap .tscl-learn { display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; min-height: 60vh; }
.tscl-wrap .tscl-learn__main { min-width: 0; }
.tscl-wrap .tscl-learn__stage { background: var(--tscl-stage); }
.tscl-wrap .tscl-learn__stage[hidden] { display: none; }
.tscl-wrap .tscl-learn__stage-inner { max-width: 1280px; margin: 0 auto; }
.tscl-wrap .tscl-learn__video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.tscl-wrap .tscl-learn__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.tscl-wrap .tscl-learn__video .tscl-screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--tscl-dark-text); font-size: 14px; padding: 24px; }
.tscl-wrap .tscl-overlay { position: absolute; inset: 0; z-index: 2; border: none; background: rgba(18, 13, 11, 0.45); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--tscl-on-dark); padding: 0; width: 100%; transition: background 0.15s; }
.tscl-wrap .tscl-overlay:hover { background: rgba(18, 13, 11, 0.3); }
.tscl-wrap .tscl-overlay__play { width: 80px; height: 80px; border-radius: 50%; background: var(--tscl-on-dark); display: flex; align-items: center; justify-content: center; color: var(--tscl-primary); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.tscl-wrap .tscl-overlay__label { font-size: 15px; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.tscl-wrap .tscl-watermark { position: absolute; z-index: 3; top: 10%; left: 10%; pointer-events: none; color: rgba(255, 255, 255, 0.55); font-size: 12px; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); transition: top 1s, left 1s; }
.tscl-wrap .tscl-watermark[hidden] { display: none; }

.tscl-wrap .tscl-learn__body { max-width: 900px; margin: 0 auto; padding: 24px 24px 56px; }
.tscl-wrap .tscl-learn__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.tscl-wrap .tscl-learn__headtext { min-width: 0; flex: 1 1 320px; }
.tscl-wrap .tscl-learn__kicker { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tscl-primary); font-weight: 700; margin-bottom: 6px; }
.tscl-wrap .tscl-learn__kicker a { color: var(--tscl-primary); }
.tscl-wrap .tscl-learn__kicker a:hover { color: var(--tscl-primary-hover); text-decoration: underline; }
.tscl-wrap .tscl-learn__title { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; margin: 0; }
.tscl-wrap .tscl-done { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 1px solid var(--tscl-border-strong); background: var(--tscl-surface); color: var(--tscl-text); font-size: 14px; font-weight: 600; border-radius: var(--tscl-radius); cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.tscl-wrap .tscl-done:hover { border-color: var(--tscl-primary); color: var(--tscl-primary); }
.tscl-wrap .tscl-done.is-done { background: var(--tscl-surface-2); color: var(--tscl-success); border-color: var(--tscl-success-border); cursor: default; }
.tscl-wrap .tscl-done:disabled { opacity: 0.6; cursor: wait; }
.tscl-wrap .tscl-learn__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 20px 0 4px; flex-wrap: wrap; }
.tscl-wrap .tscl-learn__sidebtn { display: none; }
.tscl-wrap .tscl-learn__tabs { margin-top: 24px; }
.tscl-wrap .tscl-learn__tabs .tscl-tab-panel { padding-top: 24px; }
.tscl-wrap .tscl-learn__teachers { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.tscl-wrap .tscl-files { display: flex; flex-direction: column; }
.tscl-wrap .tscl-file { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--tscl-border); color: var(--tscl-text); }
.tscl-wrap .tscl-file:hover { color: var(--tscl-text); }
.tscl-wrap .tscl-file:hover .tscl-file__name { color: var(--tscl-primary); }
.tscl-wrap .tscl-file__type { width: 44px; height: 44px; background: var(--tscl-surface-2); color: var(--tscl-primary); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; border-radius: var(--tscl-radius); overflow: hidden; }
.tscl-wrap .tscl-file__body { min-width: 0; display: flex; flex-direction: column; }
.tscl-wrap .tscl-file__name { font-weight: 600; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.tscl-wrap .tscl-file__meta { font-size: 12px; color: var(--tscl-muted); margin-top: 2px; }
.tscl-wrap .tscl-file__dl { font-size: 13px; font-weight: 600; color: var(--tscl-primary); white-space: nowrap; }
.tscl-wrap .tscl-files__note { font-size: 12px; color: var(--tscl-muted); margin: 12px 0 0; }

.tscl-wrap .tscl-learn__sidebar { background: var(--tscl-surface); border-left: 1px solid var(--tscl-border); min-width: 0; position: sticky; top: var(--tscl-sticky-top); max-height: calc(100vh - var(--tscl-sticky-top)); overflow-y: auto; }
.tscl-wrap .tscl-learn__sidebar-head { padding: 18px 20px; border-bottom: 1px solid var(--tscl-border); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tscl-wrap .tscl-learn__sidebar-title { font-family: var(--tscl-font-head); font-size: 18px; font-weight: 700; }
.tscl-wrap .tscl-learn__progress { font-size: 12px; color: var(--tscl-muted); white-space: nowrap; font-weight: 600; }
.tscl-wrap .tscl-learn__list { list-style: none; margin: 0; padding: 0; }
.tscl-wrap .tscl-learn__item { margin: 0; border-bottom: 1px solid var(--tscl-surface-2); border-left: 3px solid transparent; }
.tscl-wrap .tscl-learn__item > a,
.tscl-wrap .tscl-learn__item > span { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 20px 12px 17px; color: var(--tscl-text); }
.tscl-wrap .tscl-learn__item > a:hover { background: var(--tscl-surface-2); color: var(--tscl-text); }
.tscl-wrap .tscl-learn__item.is-current { background: var(--tscl-surface-3); border-left-color: var(--tscl-primary); }
.tscl-wrap .tscl-learn__item.is-current .tscl-learn__label { font-weight: 600; }
.tscl-wrap .tscl-learn__item.is-locked { opacity: 0.6; }
.tscl-wrap .tscl-learn__dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--tscl-border-strong); color: var(--tscl-primary); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; margin-top: 1px; }
.tscl-wrap .tscl-learn__item.is-current .tscl-learn__dot { border-color: var(--tscl-primary); }
.tscl-wrap .tscl-learn__item.is-done .tscl-learn__dot { border-color: var(--tscl-primary); background: var(--tscl-primary); color: var(--tscl-on-dark); }
.tscl-wrap .tscl-learn__label { font-size: 14px; line-height: 1.45; min-width: 0; }
.tscl-wrap .tscl-learn__dur { font-size: 12px; color: var(--tscl-muted); font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; }
.tscl-wrap .tscl-learn__empty { padding: 16px 20px; font-size: 13px; color: var(--tscl-muted); }

/* Màn hình lỗi, toast */
.tscl-wrap .tscl-screen--error { padding: 40px 24px; text-align: center; border: 1px solid var(--tscl-border); background: var(--tscl-surface); }
.tscl-wrap .tscl-screen__title { font-size: 24px; margin: 0 0 10px; color: var(--tscl-primary); }
.tscl-wrap .tscl-screen__text { font-size: 15px; color: var(--tscl-text-soft); margin: 0 0 20px; }
.tscl-wrap .tscl-screen__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tscl-wrap .tscl-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); background: var(--tscl-dark); color: var(--tscl-on-dark); padding: 10px 16px; font-size: 14px; border-radius: var(--tscl-radius); opacity: 0; transition: opacity 0.25s, transform 0.25s; z-index: 9999; max-width: calc(100vw - 32px); }
.tscl-wrap .tscl-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.tscl-wrap .tscl-toast.is-error { background: var(--tscl-danger); }

/* ------------------------------------------------------------------ */
/* Khoá / đăng nhập                                                     */
/* ------------------------------------------------------------------ */
.tscl-wrap .tscl-locked { text-align: center; padding: 32px 24px; border: 1px solid var(--tscl-border); background: var(--tscl-surface); }
.tscl-wrap .tscl-locked__icon { color: var(--tscl-primary); display: inline-flex; }
.tscl-wrap .tscl-locked__message { font-size: 15px; margin: 10px 0 16px; color: var(--tscl-text-soft); }

/* Form tài khoản */
.tscl-wrap .tscl-auth { max-width: 440px; margin: 0 auto; padding: 28px 28px 24px; border: 1px solid var(--tscl-border); border-top: 3px solid var(--tscl-primary); background: var(--tscl-surface); }
.tscl-wrap .tscl-auth-title { font-size: 24px; margin: 0 0 18px; }
.tscl-wrap .tscl-auth p { margin: 0; }
.tscl-wrap .tscl-field { display: block; margin: 0 0 14px; }
.tscl-wrap .tscl-field label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 13px; color: var(--tscl-text-soft); }
.tscl-wrap .tscl-field input[type="text"],
.tscl-wrap .tscl-field input[type="email"],
.tscl-wrap .tscl-field input[type="tel"],
.tscl-wrap .tscl-field input[type="password"] { width: 100%; padding: 11px 12px; border: 1px solid var(--tscl-border-strong); border-radius: var(--tscl-radius); background: #fff; color: var(--tscl-text); font-size: 15px; line-height: 1.4; margin: 0; }
.tscl-wrap .tscl-field input:focus { outline: none; border-color: var(--tscl-primary); box-shadow: 0 0 0 3px rgba(122, 46, 42, 0.15); }
.tscl-wrap .tscl-field-check label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: var(--tscl-text); }
.tscl-wrap .tscl-field input.tscl-field-static { background: var(--tscl-surface-2); color: var(--tscl-muted); cursor: not-allowed; }
.tscl-wrap .tscl-form-errors,
.tscl-wrap .tscl-form-notices { margin: 0 0 14px; padding: 10px 14px 10px 28px; border-radius: var(--tscl-radius); font-size: 14px; }
.tscl-wrap .tscl-form-errors { background: var(--tscl-danger-bg); color: var(--tscl-danger); border: 1px solid var(--tscl-danger-border); }
.tscl-wrap .tscl-form-notices { background: var(--tscl-success-bg); color: var(--tscl-success); border: 1px solid var(--tscl-success-border); }
.tscl-wrap .tscl-auth-links { margin: 12px 0 0; font-size: 14px; text-align: center; color: var(--tscl-text-soft); }
.tscl-wrap .tscl-auth-links a { color: var(--tscl-primary); }
.tscl-wrap .tscl-auth-logged-in,
.tscl-wrap .tscl-auth-closed { text-align: center; }
.tscl-wrap .tscl-auth-logged-in p,
.tscl-wrap .tscl-auth-closed p { margin: 0 0 12px; }
.tscl-wrap .tscl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.tscl-wrap .tscl-pw-wrap { position: relative; display: block; }
.tscl-wrap .tscl-pw-wrap input { padding-right: 64px !important; }
.tscl-wrap .tscl-pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 4px 10px; border: 0; border-radius: var(--tscl-radius); background: var(--tscl-surface-2); color: var(--tscl-primary); font-size: 12px; font-weight: 600; cursor: pointer; line-height: 1.4; }
.tscl-wrap .tscl-pw-toggle:hover { background: var(--tscl-border); }

/* Trang tài khoản */
.tscl-wrap .tscl-account { max-width: 1140px; margin: 0 auto; }
.tscl-wrap .tscl-account__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.tscl-wrap .tscl-account__title { font-size: 26px; margin: 0; }
.tscl-wrap .tscl-account__email { margin: 4px 0 0; font-size: 13px; color: var(--tscl-muted); }
.tscl-wrap .tscl-account .tscl-tab-panel { padding-top: 24px; }
.tscl-wrap .tscl-tab-panel .tscl-auth { margin: 0; }
.tscl-wrap .tscl-my-courses .tscl-resume-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

/* ------------------------------------------------------------------ */
/* Responsive                                                           */
/* ------------------------------------------------------------------ */
@media (max-width: 1100px) {
	.tscl-wrap .tscl-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
	.tscl-wrap .tscl-grid--3,
	.tscl-wrap .tscl-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tscl-wrap .tscl-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.tscl-wrap .tscl-course__grid,
	.tscl-wrap .tscl-two-col { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.tscl-wrap .tscl-course__sticky { position: static; }
	.tscl-wrap .tscl-learn { grid-template-columns: minmax(0, 1fr); }
	.tscl-wrap .tscl-learn__sidebar { position: static; max-height: none; border-left: none; border-top: 1px solid var(--tscl-border); }
	.tscl-wrap .tscl-learn__sidebtn { display: inline-flex; }
}

@media (max-width: 720px) {
	.tscl-wrap .tscl-container { padding-left: 16px; padding-right: 16px; }
	.tscl-page-archive > .tscl-container,
	.tscl-page-instructors > .tscl-container { padding-top: 16px; padding-bottom: 48px; }
	.tscl-wrap .tscl-archive__head { align-items: flex-start; padding: 16px 0 20px; }
	.tscl-wrap .tscl-stats { gap: 20px; }
	.tscl-wrap .tscl-stat__num { font-size: 24px; }
	.tscl-wrap .tscl-hero__inner { padding-top: 16px; padding-bottom: 32px; }
	.tscl-wrap .tscl-hero .tscl-crumbs { margin-bottom: 20px; }
	.tscl-wrap .tscl-hero__stats { gap: 14px 20px; }
	.tscl-wrap .tscl-hero__person { gap: 20px; }
	.tscl-wrap .tscl-avatar--148 { width: 110px; height: 110px; font-size: 110px; }
	.tscl-wrap .tscl-course__layout { padding-top: 28px; padding-bottom: 48px; }
	.tscl-wrap .tscl-course__main { gap: 32px; }
	.tscl-wrap .tscl-box,
	.tscl-wrap .tscl-outcomes { padding: 18px 18px; }
	.tscl-wrap .tscl-teacher-box { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 18px; }
	.tscl-wrap .tscl-teacher-box .tscl-avatar--96 { width: 64px; height: 64px; font-size: 64px; }
	.tscl-wrap .tscl-prose { font-size: 17px; }
	.tscl-wrap .tscl-cta { padding: 22px 20px; margin-top: 40px; }
	.tscl-wrap .tscl-cta .tscl-btn { width: 100%; }
	.tscl-wrap .tscl-learn__body { padding: 16px 16px 40px; }
	.tscl-wrap .tscl-learn__item > a,
	.tscl-wrap .tscl-learn__item > span { padding: 12px 16px 12px 13px; }
	.tscl-wrap .tscl-learn__sidebar-head { padding: 14px 16px; }
	.tscl-wrap .tscl-tab { padding: 14px 12px; font-size: 14px; }
	.tscl-wrap .tscl-related { margin-top: 40px; }
	.tscl-wrap .tscl-auth { padding: 20px 16px 18px; }
	.tscl-wrap .tscl-select--end { margin-left: 0; }
}

@media (max-width: 600px) {
	.tscl-wrap .tscl-grid--2,
	.tscl-wrap .tscl-grid--3,
	.tscl-wrap .tscl-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.tscl-wrap .tscl-search { max-width: none; flex-basis: 100%; }
	.tscl-wrap .tscl-filter__row .tscl-select { flex: 1 1 calc(50% - 5px); min-width: 0; }
	.tscl-wrap .tscl-resume { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
	.tscl-wrap .tscl-resume__title { font-size: 15px; }
	.tscl-wrap .tscl-card__foot { flex-wrap: wrap; }
	.tscl-wrap .tscl-hero__stats { font-size: 13px; }
	.tscl-wrap .tscl-hero__cta-btn { padding: 14px 16px; font-size: 14px; }
	.tscl-wrap .tscl-lesson { padding: 12px 14px 12px 11px; gap: 10px; grid-template-columns: 24px minmax(0, 1fr) auto; }
	.tscl-wrap .tscl-curriculum__total { padding: 10px 14px; }
	.tscl-wrap .tscl-learn__nav .tscl-btn { flex: 1 1 auto; }
	.tscl-wrap .tscl-learn__head .tscl-done { width: 100%; justify-content: center; }
	.tscl-wrap .tscl-file { grid-template-columns: 40px minmax(0, 1fr); }
	.tscl-wrap .tscl-file__type { width: 40px; height: 40px; }
	.tscl-wrap .tscl-file__dl { grid-column: 2; }
	.tscl-wrap .tscl-people { grid-template-columns: minmax(0, 1fr); }
	.tscl-wrap .tscl-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tscl-wrap .tscl-screen__actions .tscl-btn { width: 100%; }
}