/* ==========================================================================
   Học viện Đạo Thịnh Vượng · Giao diện V2
   Bộ token + thành phần dùng chung. Thay cho style.css cũ.
   HTML/CSS/JS thuần, không build. Thiết kế trước cho 375-390px.
   Quy tắc: nội dung bài, khóa mới chỉ dùng class có sẵn ở đây.
   Cần kiểu mới thì thêm vào tệp này trước (kèm thiết kế), không viết CSS rời.
   ========================================================================== */

/* ---------- 1. Token ---------- */
:root {
  /* Nền và bề mặt */
  --bg: #121211;
  --s1: #1B1B19;          /* thẻ */
  --s2: #242421;          /* ô trong thẻ, nút phụ, ô nhập */
  --s3: #302F2B;          /* rãnh tiến độ, mục chọn */
  --line: rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.13);

  /* Chữ (tương phản đo trên --s1) */
  --t1: #F3F0E9;          /* 15.6:1 */
  --t2: #BEB9AF;          /* 9.6:1 */
  --t3: #928D83;          /* 5.4:1 */

  /* Thương hiệu: vàng là màu hành động */
  --gold: #FFCC16;
  --gold-ink: #1C1500;
  --gold-soft: rgba(255,204,22,.10);
  --gold-line: rgba(255,204,22,.32);
  --orange: #F49425;      /* chấm báo mới */

  /* Trạng thái */
  --ok: #8BCB8F;   --ok-soft: rgba(139,203,143,.12);
  --warn: #F2A46B; --warn-soft: rgba(242,164,107,.12);

  /* Sắc phụ: ô biểu tượng và nhận diện khóa. Không dùng cho nút. */
  --hue-gold: #FFCC16;   --hue-gold-bg: rgba(255,204,22,.13);
  --hue-blue: #8DB4EE;   --hue-blue-bg: rgba(125,168,232,.15);
  --hue-violet: #BBA2EE; --hue-violet-bg: rgba(176,148,232,.15);
  --hue-green: #8BCB8F;  --hue-green-bg: rgba(139,203,143,.14);
  --hue-orange: #F6A24A; --hue-orange-bg: rgba(244,148,37,.15);

  /* Chữ: chỉ 400 / 500 / 600 */
  --font: 'Be Vietnam Pro', system-ui, sans-serif;
  --fs-display: 26px; --lh-display: 34px;   /* tiêu đề màn, 1 lần mỗi màn */
  --fs-h2: 18px;      --lh-h2: 26px;        /* tiêu đề khối */
  --fs-h3: 16px;      --lh-h3: 24px;        /* tên buổi, tên mục */
  --fs-body: 15px;    --lh-body: 24px;
  --fs-sm: 13px;      --lh-sm: 20px;        /* nhãn, thay mọi chữ IN HOA */
  --fs-xs: 12px;      --lh-xs: 18px;        /* chú thích */
  --fw-regular: 400; --fw-medium: 500; --fw-semi: 600;

  /* Khoảng cách bậc 4 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --gutter: 16px;          /* lề màn điện thoại */

  /* Bo góc */
  --r-sm: 12px;            /* nút, ô nhập */
  --r: 18px;               /* thẻ */
  --r-lg: 20px;            /* thẻ chính */
  --r-pill: 999px;

  /* Kích thước */
  --tap: 44px;             /* vùng bấm tối thiểu */
  --btn-h: 48px;
  --header-h: 60px;
  --tabbar-h: 76px;

  /* Chuyển động */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-pop: cubic-bezier(.2,.8,.3,1.2);
  --dur-fast: .25s; --dur: .5s; --dur-slow: 1s;
}

/* ---------- 2. Nền tảng ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--t1);
  font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

.t-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-semi); letter-spacing: -.015em; }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semi); letter-spacing: -.01em; }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semi); }
.t-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.t-xs { font-size: var(--fs-xs); line-height: var(--lh-xs); }
.t-label { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-medium); color: var(--t3); }
.t-2 { color: var(--t2); } .t-3 { color: var(--t3); } .t-gold { color: var(--gold); }
.num { font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-2); }

/* ---------- 3. Khung trang ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.app-main { padding: var(--sp-5) var(--gutter) 40px; display: flex; flex-direction: column; gap: var(--sp-4); }

.app-header {
  position: sticky; top: 0; z-index: 20; height: var(--header-h);
  padding: 0 6px 0 var(--gutter); display: flex; align-items: center; justify-content: space-between;
  background: rgba(18,18,17,.96); border-bottom: 1px solid var(--line);
}
.app-header img { height: 15px; width: auto; display: block; }
.icon-btn {
  width: var(--tap); height: var(--tap); border-radius: var(--r-sm); border: 0; background: none;
  display: inline-flex; align-items: center; justify-content: center; color: var(--t2); position: relative; cursor: pointer;
}
.icon-btn .dot { position: absolute; top: 11px; right: 12px; width: 7px; height: 7px; border-radius: 9px; background: var(--orange); box-shadow: 0 0 0 2px var(--bg); }

.tabbar {
  position: sticky; bottom: 0; z-index: 20; margin-top: auto; height: var(--tabbar-h);
  padding: 6px 4px calc(14px + env(safe-area-inset-bottom)); background: rgba(18,18,17,.97);
  border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
}
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: var(--fs-xs); line-height: 16px; font-weight: var(--fw-medium); color: var(--t3); }
.tab .tab-ico { width: 52px; height: 30px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; }
.tab[aria-current="page"] { color: var(--t1); font-weight: var(--fw-semi); }
.tab[aria-current="page"] .tab-ico { background: var(--gold-soft); color: var(--gold); }

/* Máy tính từ 1100px: thanh mục dưới thành cột trái */
@media (min-width: 1100px) {
  .app { flex-direction: row; flex-wrap: wrap; }
  .tabbar { display: none; }
  .sidebar { display: flex; }
  .app-main { flex: 999 1 560px; max-width: 1120px; padding: 32px 40px 56px; }
}
.sidebar { display: none; flex: 0 0 248px; flex-direction: column; gap: var(--sp-5); padding: var(--sp-6) var(--sp-4); border-right: 1px solid var(--line); }
.side-link { display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; padding: 6px 10px; border-radius: var(--r-sm); color: var(--t2); font-weight: var(--fw-medium); }
.side-link[aria-current="page"] { background: rgba(255,204,22,.08); color: var(--t1); font-weight: var(--fw-semi); }

.back-link { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); font-size: 14px; color: var(--t2); margin-left: -4px; align-self: flex-start; }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: 14px; }
.section-head .title { display: flex; align-items: center; gap: 10px; }

.app-footer { padding: var(--sp-6) var(--sp-5) 28px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--t3); text-align: center; }

/* Thanh chọn khóa: dính trên đầu, số liệu bên dưới thuộc riêng khóa đang chọn */
.course-switch { position: sticky; top: var(--header-h); z-index: 15; margin: 6px calc(-1 * var(--gutter)) 0; padding: 10px var(--gutter); background: rgba(18,18,17,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }

/* ---------- 4. Thẻ ---------- */
.card { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-5); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card--hero { border-color: var(--gold-line); border-radius: var(--r-lg); }   /* chỉ "Việc tiếp theo" và CTA chính */
.card--flush { gap: 0; padding-top: 6px; padding-bottom: 6px; }
.card--ghost { background: transparent; border-style: dashed; }
/* Thẻ dựng bằng <button> (dòng danh sách bấm được) phải kế thừa màu chữ và phông của trang: không đặt thì trình duyệt tô
   màu buttontext (đen) trên nền tối. Lỗi gặp ở Sales case: tên khách gần như không đọc được (bàn giao lần 2, A3). */
button.card { color: inherit; font: inherit; }
.card--hint { background: rgba(125,168,232,.06); border-color: rgba(125,168,232,.25); }
.card--caution { background: rgba(242,164,107,.08); border-color: rgba(242,164,107,.25); }

.list-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--line); min-height: 60px; }
.list-row:first-child { border-top: 0; }

.tile { background: var(--s1); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; align-items: center; gap: var(--sp-3); }
.tile .num { font-size: 20px; line-height: 26px; }
.tile-inset { background: var(--s2); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: var(--sp-2); }

/* ---------- 5. Ô biểu tượng và mã khóa ---------- */
.ico { width: 40px; height: 40px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex: none; background: var(--s2); color: var(--t2); font-size: 12px; font-weight: var(--fw-semi); }
.ico--sm { width: 32px; height: 32px; border-radius: 10px; }
.ico--lg { width: 48px; height: 48px; border-radius: 14px; }
.ico--gold   { background: var(--hue-gold-bg);   color: var(--hue-gold); }
.ico--blue   { background: var(--hue-blue-bg);   color: var(--hue-blue); }
.ico--violet { background: var(--hue-violet-bg); color: var(--hue-violet); }
.ico--green  { background: var(--hue-green-bg);  color: var(--hue-green); }
.ico--orange { background: var(--hue-orange-bg); color: var(--hue-orange); }
/* Mã khóa: <span class="ico course-code" data-hue="blue">TT</span>, hue lấy từ course.hue */
.course-code[data-hue="gold"]   { background: var(--hue-gold-bg);   color: var(--hue-gold); }
.course-code[data-hue="blue"]   { background: var(--hue-blue-bg);   color: var(--hue-blue); }
.course-code[data-hue="violet"] { background: var(--hue-violet-bg); color: var(--hue-violet); }
.course-code[data-hue="green"]  { background: var(--hue-green-bg);  color: var(--hue-green); }
.course-code[data-hue="orange"] { background: var(--hue-orange-bg); color: var(--hue-orange); }

/* ---------- 6. Nút, liên kết, nhãn ---------- */
.btn { height: var(--btn-h); border-radius: var(--r-sm); padding: 0 18px; font: var(--fw-semi) var(--fs-body)/1 var(--font); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); border: 0; cursor: pointer; width: 100%; transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast); }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--gold); color: var(--gold-ink); }          /* tối đa 1 nút vàng mỗi thẻ */
.btn--secondary { background: var(--s2); color: var(--t1); border: 1px solid var(--line-2); }
.btn--ghost { background: transparent; color: var(--t2); height: var(--tap); }
.btn--auto { width: auto; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--s2); color: var(--t3); border: 1px dashed var(--line-2); cursor: default; }
.link { color: var(--gold); font-weight: var(--fw-medium); font-size: 14px; display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); line-height: 1; font-weight: var(--fw-medium); white-space: nowrap; flex: none; }
.chip--mute { background: var(--s2); color: var(--t2); }    /* trạng thái buổi: trung tính */
.chip--new  { background: var(--gold-soft); color: var(--gold); }
.chip--ok   { background: var(--ok-soft); color: var(--ok); }
.chip--warn { background: var(--warn-soft); color: var(--warn); }

.seg { display: flex; background: var(--s2); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
.seg button { flex: 1; height: var(--tap); min-width: 72px; border: 0; border-radius: 10px; background: none; color: var(--t3); font: var(--fw-medium) var(--fs-sm) var(--font); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--s3); color: var(--t1); }
.course-switch .seg button { height: var(--tap); font-size: 14px; }
.course-switch .seg button[aria-selected="true"] { background: var(--gold); color: var(--gold-ink); font-weight: var(--fw-semi); }

.pills { display: flex; gap: var(--sp-2); overflow-x: auto; }
.pill { height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 0; background: var(--s2); color: var(--t2); font: var(--fw-medium) var(--fs-sm) var(--font); white-space: nowrap; cursor: pointer; }
.pill[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); font-weight: var(--fw-semi); }

/* ---------- 7. Tiến độ và checkpoint ---------- */
.bar { height: 6px; border-radius: var(--r-pill); background: var(--s3); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--gold); }

/* Vòng tiến độ: <svg> r=30, chu vi 188.5; stroke-dashoffset = 188.5 * (1 - đã học / mẫu số) */
.ring-arc { stroke: var(--gold); stroke-linecap: round; }

/* Nút buổi. Trạng thái từ progress, dùng chung mọi khóa */
.node { width: 32px; height: 32px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--fw-semi); flex: none; background: var(--bg); }
.node--done, .node--watch { background: var(--gold); color: var(--gold-ink); }      /* watch = buổi không có bài, đã mở tài nguyên: hiện biểu tượng phát */
.node--now  { border: 2px solid var(--gold); color: var(--gold); }                  /* việc tiếp theo */
.node--soon { border: 2px dashed var(--gold); color: var(--gold); }                 /* còn trong 7 ngày */
.node--miss { border: 1.5px solid #4A4842; color: var(--t3); }
.node--next { border: 1.5px dotted #4A4842; color: #6E6A62; }                       /* chưa diễn ra */
.node--holiday { border: 1.5px dashed #4A4842; color: var(--t3); }                 /* nghỉ, không đứt chuỗi */

/* Bố cục checkpoint theo độ dài khóa:
   <= 8 buổi: .steps-row (một hàng). > 8 buổi hoặc khóa đồng hành: .journey (dọc, 5 buổi gần nhất) */
.steps-row { position: relative; display: flex; justify-content: space-between; }
.steps-row::before { content: ""; position: absolute; left: 16px; right: 16px; top: 15px; height: 2px; background: var(--s3); }
.steps-row .fill { position: absolute; left: 16px; top: 15px; height: 2px; background: var(--gold); }
.steps-row .node { position: relative; }
.journey-item { display: grid; grid-template-columns: 32px minmax(0,1fr); column-gap: 14px; }
.journey-rail { display: flex; flex-direction: column; align-items: center; }
.journey-line { flex: 1; width: 2px; min-height: 14px; margin: 4px 0; border-radius: 2px; background: var(--s3); }
.journey-line--on { background: var(--gold); }
.journey-body { padding: 4px 0 18px; display: flex; flex-direction: column; gap: 2px; }

/* Lưới cả năm cho khóa đồng hành: mỗi hàng 1 tháng, mỗi ô 1 buổi */
.year-row { display: grid; grid-template-columns: 56px repeat(5, minmax(0,1fr)); gap: 6px; align-items: center; }
.year-cell { height: 26px; border-radius: 7px; }

/* ---------- 8. Ô nhập bài thực hành ---------- */
.practice-head { position: sticky; top: 0; z-index: 20; background: rgba(18,18,17,.97); border-bottom: 1px solid var(--line); padding: 6px 6px 12px; display: flex; flex-direction: column; gap: var(--sp-2); }
.step-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 4px; padding: 0 10px; }
.step-bars i { display: block; height: 4px; border-radius: 4px; background: var(--s3); }
.step-bars i.is-done { background: var(--gold); }
.step-bars i.is-current { background: var(--gold); opacity: .45; }
.save-state { font-size: var(--fs-xs); color: var(--ok); display: inline-flex; align-items: center; gap: 4px; }
.save-state--retry { color: var(--warn); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 14px; line-height: 21px; font-weight: var(--fw-medium); color: var(--t1); }
.field-hint, .field-count { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--t3); }
.field-count { text-align: right; }
.field-error { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--warn); }

.input, .textarea { width: 100%; border-radius: var(--r-sm); background: var(--s2); border: 1px solid var(--line-2); color: var(--t1); font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font); }
.input { height: var(--btn-h); padding: 0 14px; font-size: 16px; }      /* 16px để iOS không tự phóng to */
.textarea { min-height: 112px; padding: 12px 14px; resize: vertical; font-size: 16px; }
.input:focus, .textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--warn); }
.input--money { text-align: right; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.money-total { display: flex; justify-content: space-between; align-items: center; background: var(--s2); border-radius: var(--r-sm); padding: 14px 16px; }

.option { display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--s2); color: var(--t1); font: var(--fw-regular) 14px/21px var(--font); text-align: left; width: 100%; cursor: pointer; }
.option[aria-checked="true"] { border-color: var(--gold); background: rgba(255,204,22,.07); }
.option .radio { width: 20px; height: 20px; border-radius: var(--r-pill); border: 2px solid #5A574F; flex: none; display: flex; align-items: center; justify-content: center; }
.option[aria-checked="true"] .radio { border-color: var(--gold); }
.option[aria-checked="true"] .radio::after { content: ""; width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--gold); }
.option .check { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #5A574F; flex: none; display: flex; align-items: center; justify-content: center; color: var(--gold-ink); }
.option[aria-checked="true"] .check { background: var(--gold); border-color: var(--gold); }

.scale { display: grid; grid-template-columns: repeat(10, minmax(0,1fr)); gap: 4px; }
.scale button { height: var(--tap); border-radius: 10px; border: 0; padding: 0; background: var(--s2); color: var(--t2); font: var(--fw-semi) 14px var(--font); cursor: pointer; }
.scale button[aria-checked="true"] { background: var(--gold); color: var(--gold-ink); }

.rank-item { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 6px 6px 12px; border-radius: var(--r-sm); background: var(--s2); border: 1px solid var(--line-2); }
.rank-no { width: 26px; height: 26px; border-radius: 8px; background: var(--hue-gold-bg); color: var(--gold); font-size: 12px; font-weight: var(--fw-semi); display: flex; align-items: center; justify-content: center; flex: none; }

.compare { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-2); }
.compare .textarea { min-height: 80px; font-size: 14px; }
.compare .is-after { border-color: rgba(255,204,22,.35); }

.milestone { display: flex; align-items: flex-start; gap: var(--sp-3); }
.milestone-tag { width: 48px; height: 28px; border-radius: 8px; background: var(--s2); color: var(--t2); font-size: 12px; font-weight: var(--fw-semi); display: flex; align-items: center; justify-content: center; flex: none; }
.milestone:first-child .milestone-tag { background: var(--hue-gold-bg); color: var(--gold); }

.step-locked { background: transparent; border: 1px dashed var(--line-2); border-radius: var(--r); padding: 16px; display: flex; align-items: center; gap: var(--sp-3); }

/* ---------- 9. Chuyển động ---------- */
@keyframes dtv-rise   { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes dtv-swap   { from { opacity: 0; transform: translateX(14px); } }
@keyframes dtv-growX  { from { transform: scaleX(0); } }
@keyframes dtv-growY  { from { transform: scaleY(0); } }
@keyframes dtv-ring   { from { stroke-dashoffset: 188.5; } }
@keyframes dtv-draw   { from { stroke-dashoffset: 1; } }
@keyframes dtv-pop    { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); } }
@keyframes dtv-pulse  { 0% { box-shadow: 0 0 0 0 rgba(255,204,22,.45); } 100% { box-shadow: 0 0 0 12px rgba(255,204,22,0); } }
@keyframes dtv-shine  { 0% { background-position: -160px 0; } 60%, 100% { background-position: 420px 0; } }

@media (prefers-reduced-motion: no-preference) {
  .reveal          { animation: dtv-rise var(--dur) var(--ease-out) both; }      /* thẻ, khối */
  .reveal-x        { animation: dtv-swap .45s var(--ease-out) both; }            /* dòng danh sách, đổi khóa */
  .bar > i, .steps-row .fill { transform-origin: left; animation: dtv-growX .9s var(--ease-out) .2s both; }
  .ring-arc        { animation: dtv-ring 1.1s var(--ease-out) .2s both; }
  .chart-line      { animation: dtv-draw 1.2s var(--ease-out) .15s both; }      /* path cần pathLength="1" stroke-dasharray="1" */
  .chart-col       { transform-origin: bottom; animation: dtv-growY .6s var(--ease-out) both; }
  .node--done, .node--watch { animation: dtv-pop .45s var(--ease-pop) both; }
  .node--now, .node--soon   { animation: dtv-pulse 1.8s ease-out infinite; }
  .btn--primary.is-cta {
    background-image: linear-gradient(100deg, rgba(255,255,255,0) 0, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
    background-size: 140px 100%; background-repeat: no-repeat; animation: dtv-shine 3.2s ease-in-out 1s infinite;
  }
  /* Hiện dần khi vuốt (Chrome, Edge, Safari mới). Trình duyệt cũ dùng bản chạy lúc mở trang ở trên. */
  @supports (animation-timeline: view()) {
    .reveal   { animation: dtv-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
    .reveal-x { animation: dtv-swap linear both; animation-timeline: view(); animation-range: entry 0% cover 15%; }
    .bar > i, .steps-row .fill { animation: dtv-growX linear both; animation-timeline: view(); animation-range: entry 20% cover 40%; }
    .chart-line { animation: dtv-draw linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .chart-col  { animation: dtv-growY linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 10. Khung dùng chung: phần bổ sung khi dựng (16/10/2026) ----------
   Bản bàn giao: "thiếu kiểu nào thì thêm vào dtv-v2.css, đặt đúng mục, rồi báo lại". Các kiểu dưới đây
   lấy từ bản vẽ 14-menu và 03-tong-quan-desktop (bản vẽ viết inline style), chuyển thành class.

   Khung được app.js (renderHeader) gắn thẳng vào <body>: đầu trang là con đầu tiên, thanh mục dưới,
   cột trái và tấm Menu là con cuối. Các màn chưa làm lại vẫn nằm trong .wrap cũ ở giữa. */

/* Thanh mục dưới: cố định (fixed) thay vì sticky, vì màn chưa làm lại không có khung .app flex
   để margin-top:auto đẩy thanh xuống đáy. Chiều cao cộng vùng an toàn của iPhone, không ăn vào
   chỗ của biểu tượng như khi chỉ cộng vào padding. */
body.v2-khung { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
body.v2-khung .tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; margin: 0;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
.tab { min-height: var(--tap); }
.tab-ico svg, .side-link svg, .menu-item svg, .icon-btn svg { width: 22px; height: 22px; }
.side-link .ico svg, .menu-item .ico svg { width: 20px; height: 20px; }

/* Cột trái máy tính: cố định cạnh trái, nội dung cũ dịch sang phải. Đầu trang ẩn vì logo,
   Cập nhật và Đăng xuất đã nằm trong cột (bản vẽ 03-tong-quan-desktop không có đầu trang). */
@media (min-width: 1100px) {
  body.v2-khung { padding-bottom: 0; padding-left: 248px; }
  body.v2-khung .app-header { display: none; }
  body.v2-khung .sidebar {
    display: flex; position: fixed; top: 0; bottom: 0; left: 0; width: 248px;
    overflow-y: auto; z-index: 20; background: var(--bg);
  }
}
.sidebar-logo { height: 16px; width: auto; align-self: flex-start; margin: 4px 10px 8px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav--day { margin-top: auto; }
.side-link .ico { width: 32px; height: 32px; border-radius: 10px; }
.side-link .grow, .menu-item .grow { flex: 1; min-width: 0; }
.side-link:hover { background: var(--s1); color: var(--t1); }

/* Huy hiệu đếm tin mới (cam, giống chấm trên chuông). */
.badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--orange); color: var(--gold-ink); font-size: var(--fs-xs); font-weight: var(--fw-semi); display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* Mục nguy hiểm nhẹ: Đăng xuất. */
.is-warn { color: var(--warn) !important; }
.ico--warn { background: var(--warn-soft); color: var(--warn); }
.ico--mute { background: var(--s2); color: var(--t3); }

/* Menu: tấm trượt từ dưới lên, nền tối mờ phía sau. Bấm nền, nút đóng hoặc Esc để đóng. */
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.6); }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: calc(100% - 36px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--s1); border-radius: 24px 24px 0 0; border-top: 1px solid rgba(255,255,255,.08);
  padding: 10px 12px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column;
}
@media (min-width: 600px) { .sheet { left: 50%; right: auto; width: 440px; transform: translateX(-50%); } }
.sheet-grip { width: 40px; height: 4px; border-radius: 4px; background: #3A3934; align-self: center; margin-bottom: 6px; flex: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 10px 10px; }
.avatar { width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--s3); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-semi); font-size: 14px; flex: none; }
.menu-item { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 10px; border-radius: 14px; color: var(--t1); }
.menu-item:hover { background: rgba(255,255,255,.03); }
.menu-item[aria-current="page"] { background: rgba(255,204,22,.08); }
.menu-item .menu-ten { display: block; font-weight: var(--fw-medium); }
.menu-item[aria-current="page"] .menu-ten { font-weight: var(--fw-semi); }
.menu-item .menu-mo { display: block; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--t3); }
.menu-group { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--t3); padding: 14px 10px 4px; }
.menu-rule { height: 1px; background: var(--line); margin: 10px; }
html.menu-mo, html.menu-mo body { overflow: hidden; }

@keyframes dtv-sheet { from { transform: translateY(40px); opacity: 0; } }
@keyframes dtv-fade  { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .sheet:not([hidden]) { animation: dtv-sheet .45s cubic-bezier(.2,.8,.2,1) both; }
  .sheet-backdrop:not([hidden]) { animation: dtv-fade .3s ease both; }
  .sheet:not([hidden]) .menu-item { animation: dtv-swap .4s var(--ease-out) both; }
}
@media (min-width: 600px) and (prefers-reduced-motion: no-preference) {
  @keyframes dtv-sheet-giua { from { transform: translate(-50%, 40px); opacity: 0; } }
  .sheet:not([hidden]) { animation-name: dtv-sheet-giua; }
}

/* Lối lùi một cấp (thay dải đường dẫn cũ). */
.back-link svg { width: 20px; height: 20px; }
.khung-lui { padding: 0 0 4px; }

/* In: bỏ toàn bộ khung. */
@media print { .app-header, .tabbar, .sidebar, .sheet, .sheet-backdrop { display: none !important; } body.v2-khung { padding: 0 !important; } }

/* ---------- 11. Thành phần màn Tổng quan (bản vẽ 03-tong-quan, 03-tong-quan-desktop; thêm 16/10/2026) ----------
   Bản vẽ viết inline style; chuyển thành class dùng chung để Hồ sơ (11) và trang khóa (04) dùng lại. */
.app-main--v2 { max-width: 560px; margin: 0 auto; width: 100%; }
@media (min-width: 1100px) { .app-main--v2 { max-width: 1120px; padding: 32px 40px 56px; } }

/* Ba ô nhỏ trong thẻ chào (Đang học · Hôm nay · Buổi tới) */
.mini-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-2); }
.mini-3 > div { background: var(--s2); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.mini-3 .num { font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }

/* Dải 7 ngày qua: chỉ có học hay không (V2 mục 4.2), không cộng số việc */
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; }
.week-day { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--t3); }
.week-day .d { width: 34px; height: 34px; border-radius: var(--r-pill); border: 1.5px solid #3A3934; display: flex; align-items: center; justify-content: center; color: var(--gold-ink); }
.week-day .d svg { width: 16px; height: 16px; }
.week-day.is-on .d { background: var(--gold); border: 0; }
.week-day.is-today { color: var(--t1); font-weight: var(--fw-semi); }
.week-day.is-today:not(.is-on) .d { border: 2px solid var(--gold); }
.divider-top { padding-top: 14px; border-top: 1px solid var(--line); }

/* Dòng nhắc gấp trong thẻ Việc tiếp theo */
.urgent { display: flex; align-items: center; gap: var(--sp-2); background: rgba(255,204,22,.06); border-radius: 10px; padding: 8px 12px; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.urgent svg { width: 16px; height: 16px; color: var(--gold); flex: none; }

/* Vòng tiến độ 76px, chữ % ở giữa */
.ring { position: relative; width: 76px; height: 76px; flex: none; }
.ring svg { display: block; }
.ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-label .num { font-size: 20px; line-height: 22px; }
.ring-label small { font-size: 10px; line-height: 14px; color: var(--t3); }

/* Nút buổi: biểu tượng bên trong */
.node svg { width: 15px; height: 15px; }
.node--watch svg { width: 14px; height: 14px; }
.steps-row .fill { right: auto; }
.steps-nos { display: flex; justify-content: space-between; }
.steps-nos span { width: 32px; text-align: center; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--t3); }
.focus-line { display: flex; align-items: center; gap: 10px; background: rgba(255,204,22,.06); border-radius: 12px; padding: 10px 12px; }
.focus-line .dot-now { width: 10px; height: 10px; border-radius: var(--r-pill); border: 2px solid var(--gold); flex: none; }

/* Chú thích trạng thái nút */
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--t3); }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 9px; flex: none; display: inline-block; }
.legend .lg-done { background: var(--gold); }
.legend .lg-soon { border: 2px dashed var(--gold); }
.legend .lg-miss { border: 1.5px solid #4A4842; }
.legend svg { width: 12px; height: 12px; }

/* Biểu đồ đường số việc học mỗi ngày (một chuỗi, một khóa) */
.chart-line-svg { display: block; width: 100%; height: 130px; overflow: visible; }
.chart-area { fill: rgba(255,204,22,.12); }
.chart-line { fill: none; stroke: var(--gold); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart-grid { stroke: var(--s3); }
.chart-dot { fill: var(--gold); stroke: var(--s1); stroke-width: 2; }
.stat-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-2); }
.stat-3 .num { font-size: 22px; line-height: 28px; display: block; }
.data-table { display: flex; flex-direction: column; background: var(--s2); border-radius: var(--r-sm); padding: 4px 14px; }
.data-table > div { display: flex; justify-content: space-between; align-items: center; min-height: 40px; font-size: var(--fs-sm); }
.data-table > div + div { border-top: 1px solid var(--line); }
.toggle-btn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--t2); font: var(--fw-medium) 14px var(--font); cursor: pointer; align-self: flex-start; }
.toggle-btn svg { width: 16px; height: 16px; transition: transform var(--dur-fast); }
.toggle-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.live-dot { width: 6px; height: 6px; border-radius: 9px; background: var(--gold); }
@keyframes dtv-live { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: no-preference) { .live-dot { animation: dtv-live 1.6s ease-in-out infinite; } }
.link svg, .section-head svg, .list-row svg { width: 16px; height: 16px; }
.ico svg { width: 20px; height: 20px; }
.ico--sm svg { width: 16px; height: 16px; }

/* Lưới Tổng quan: điện thoại một cột theo thứ tự đọc; máy tính hai cột như bản vẽ 03-tong-quan-desktop */
.dash { display: flex; flex-direction: column; gap: var(--sp-4); }
.dash-block { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.dash-block > .section-head { margin-top: 14px; }
@media (min-width: 1100px) {
  /* Bản vẽ 03-tong-quan-desktop: lời chào | chọn khóa · Việc tiếp theo | tiến độ · Sổ tích lũy | Hoạt động học.
     Học một khóa (không có thanh chọn): lời chào | Việc tiếp theo. */
  .dash { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; align-items: start;
    grid-template-areas: "chao chon" "viec tiendo" "so hoatdong" "nhip nhip" "live ganday"; }
  .dash.mot-khoa { grid-template-areas: "chao viec" "tiendo so" "hoatdong hoatdong" "nhip nhip" "live ganday"; }
  /* Có thông điệp hôm nay (docs/92): ngay sau lời chào, cùng hàng đầu (Quỳnh 20/10: "đẩy thông điệp lên ngay sau chào").
     Việc tiếp theo xuống hàng hai bên trái; thanh chọn khóa nằm phải, ngay trên tiến độ nó điều khiển. Chỉ đổi lưới khi có câu. */
  .dash.co-td { grid-template-areas: "chao thongdiep" "viec chon" "viec tiendo" "so hoatdong" "nhip nhip" "live ganday"; }
  .dash.mot-khoa.co-td { grid-template-areas: "chao thongdiep" "viec tiendo" "so hoatdong" "nhip nhip" "live ganday"; }
  .dash-thongdiep { grid-area: thongdiep; align-self: stretch; }
  .dash-thongdiep .tdh-nut { margin-top: auto; }
  .dash-chon { align-self: end; justify-self: end; width: 100%; max-width: 420px; }
  .dash-nhip { grid-area: nhip; }
  .dash-chao { grid-area: chao; } .dash-viec { grid-area: viec; } .dash-chon { grid-area: chon; }
  .dash-tiendo { grid-area: tiendo; } .dash-so { grid-area: so; } .dash-hoatdong { grid-area: hoatdong; }
  .dash-live { grid-area: live; } .dash-ganday { grid-area: ganday; }
  .dash-block > .section-head { margin-top: 0; }
  .course-switch { position: static; margin: 0; padding: 0; background: none; backdrop-filter: none; border: 0; }
  .course-switch .seg { max-width: 420px; }
}
/* Biểu tượng trong nút và nhãn: biểu tượng V2 không mang width/height riêng, nên cỡ đặt ở đây (16/10/2026). */
.btn svg { width: 18px; height: 18px; flex: none; }
.chip svg { width: 14px; height: 14px; flex: none; }

/* ---------- 12. Hướng dẫn lần đầu (bản vẽ 15-huong-dan; thêm 16/10/2026) ----------
   Khung sáng viền vàng trượt theo từng bước, phần còn lại phủ tối; hộp lời giải thích NỀN SÁNG chữ tối để tách hẳn khỏi
   giao diện tối phía sau. assets/huong-dan.js dựng khung, đo vị trí, đặt hộp trên hoặc dưới vùng. */
.hd-lop { position: fixed; inset: 0; z-index: 1000; }
.hd-chan { position: absolute; inset: 0; }
.hd-lo {
  position: fixed; border-radius: 22px; border: 2px solid var(--gold); pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.74);
  transition: top .45s cubic-bezier(.3,.7,.2,1), left .45s cubic-bezier(.3,.7,.2,1), width .45s cubic-bezier(.3,.7,.2,1), height .45s cubic-bezier(.3,.7,.2,1);
}
.hd-bong {
  position: fixed; width: calc(100% - 32px); max-width: 358px; background: var(--t1); color: #1A1916;
  border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; outline: none;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  transition: top .45s cubic-bezier(.3,.7,.2,1), left .45s cubic-bezier(.3,.7,.2,1);
}
.hd-dau { display: flex; align-items: center; justify-content: space-between; }
.hd-dem { font-size: var(--fs-xs); line-height: 18px; font-weight: var(--fw-semi); color: #8A6A00; background: #FFE68A; border-radius: var(--r-pill); padding: 3px 10px; }
.hd-cham { display: flex; gap: 5px; }
.hd-cham i { width: 6px; height: 6px; border-radius: 6px; background: #C9C3B6; transition: width .3s; }
.hd-cham i.on { width: 18px; background: #1A1916; }
.hd-tieu-de { margin: 0; font-size: 17px; line-height: 24px; font-weight: var(--fw-semi); color: #1A1916; }
.hd-chu { margin: 0; font-size: 14px; line-height: 21px; color: #4A463E; }
.hd-nut { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hd-nut button { height: var(--tap); border-radius: var(--r-sm); padding: 0 18px; font: var(--fw-semi) 14px/1 var(--font); border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.hd-nut button svg { width: 16px; height: 16px; }
.hd-bo { background: none; color: #6B665C; padding: 0 !important; }
.hd-tiep { background: #1A1916; color: var(--gold); }
.hd-nut button:focus-visible { outline: 2px solid #1A1916; outline-offset: 2px; }
.hd-tuc .hd-lo, .hd-tuc .hd-bong { transition: none; }
@keyframes dtv-hd-ring { 0% { box-shadow: 0 0 0 9999px rgba(0,0,0,.74), 0 0 0 0 rgba(255,204,22,.5); } 100% { box-shadow: 0 0 0 9999px rgba(0,0,0,.74), 0 0 0 14px rgba(255,204,22,0); } }
@keyframes dtv-hd-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@media (prefers-reduced-motion: no-preference) {
  .hd-lo { animation: dtv-hd-ring 1.8s ease-out infinite; }
  .hd-bong.hd-moi { animation: dtv-hd-pop .4s cubic-bezier(.2,.8,.3,1.1) both; }
}
@media (prefers-reduced-motion: reduce) { .hd-lo, .hd-bong { transition: none; } }

/* Biểu đồ đường: nét giữ đúng độ dày khi khối giãn ngang (vector-effect), hiện dần từ trái sang bằng clip-path.
   Không dùng pathLength + stroke-dasharray: kết hợp với vector-effect làm nét đứt khúc trên màn rộng (rà chéo 16/10). */
.chart-duong { fill: none; stroke: var(--gold); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
@keyframes dtv-mo-trai { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: no-preference) {
  .chart-duong { animation: dtv-mo-trai 1.1s var(--ease-out) .15s both; }
  .chart-area { animation: dtv-fade .8s ease .6s both; }
}
/* Vùng bấm tối thiểu 44px (bản giao mục 8): dòng phụ dẫn link, nút 7/30 ở đầu khối. */
.link-phu { display: flex; align-items: center; justify-content: center; min-height: var(--tap); }
.section-head .seg button { height: var(--tap); }
/* In: giấy trắng, chữ tối. body.v2 có độ ưu tiên cao hơn luật in cũ trong style.css. */
@media print {
  body.v2 { background: #fff; color: #1a1a1a; }
  body.v2 .card, body.v2 .tile, body.v2 .mini-3 > div { background: #fff; border-color: #d8d8d8; }
  body.v2 .t-2, body.v2 .t-3 { color: #555; }
}

/* ---------- 13. Học viên mới (bản vẽ 02b-hoc-vien-moi; thêm 16/10/2026) ---------- */
.card--center { align-items: center; text-align: center; padding: 28px 20px; }
.ico--xl { width: 64px; height: 64px; border-radius: 20px; }
.ico--xl svg { width: 30px; height: 30px; }
.ico--tron { border-radius: var(--r-pill); }
.checklist .ck { display: flex; align-items: center; gap: var(--sp-3); min-height: 60px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--t1); }
.checklist .ck-dot { width: 26px; height: 26px; border-radius: var(--r-pill); flex: none; display: flex; align-items: center; justify-content: center; border: 1.5px solid #4A4842; }
.checklist .ck-dot svg { width: 14px; height: 14px; }
.checklist .ck.is-next .ck-dot { border: 2px solid var(--gold); }
.checklist .ck.is-done .ck-dot { background: var(--gold); color: var(--gold-ink); border: 0; }
.checklist .ck.is-done .ck-ten { color: var(--t2); text-decoration: line-through; font-weight: var(--fw-regular); }
.checklist .ck-ten { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-medium); }
.btn--secondary { text-decoration: none; }
@keyframes dtv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes dtv-tick { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } }
@media (prefers-reduced-motion: no-preference) {
  .float { animation: dtv-float 3.2s ease-in-out infinite; }
  .checklist .ck.is-done .ck-dot { animation: dtv-tick .4s var(--ease-pop) both; }
}

/* ---------- 14. Nhịp lớp · bảng chăm chỉ (bản vẽ 16-nhip-lop; thêm 16/10/2026) ---------- */
.avatar--lg { width: 44px; height: 44px; font-size: 15px; }
.avatar--sm { width: 36px; height: 36px; font-size: 13px; }
.avatar--toi { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(255,204,22,.6); }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding-top: 6px; }
.podium-col { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 104px; min-width: 0; }
.podium-col .ten { font-size: var(--fs-sm); font-weight: var(--fw-semi); text-align: center; overflow-wrap: anywhere; }
.podium-block { width: 100%; border-radius: 12px 12px 4px 4px; display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; font-weight: var(--fw-semi); font-size: 18px; background: var(--s3); color: var(--t1); }
.podium-col.is-1 .podium-block { background: var(--gold); color: var(--gold-ink); }
.podium-col.is-1 .avatar { background: rgba(255,204,22,.18); color: var(--gold); }
.rank-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--line); }
.rank-row .rk { width: 28px; font-size: 13px; color: var(--t3); font-variant-numeric: tabular-nums; text-align: center; flex: none; }
.rank-row.is-toi { background: rgba(255,204,22,.06); border-radius: 12px; border-top-color: transparent; padding-left: 4px; padding-right: 8px; }
.rank-row.is-toi .avatar { background: rgba(255,204,22,.18); color: var(--gold); }
.switch { width: 52px; height: 32px; border-radius: var(--r-pill); background: #3A3934; position: relative; border: 0; flex: none; cursor: pointer; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: var(--r-pill); background: var(--t3); transition: left .2s, background .2s; }
.switch[aria-checked="true"] { background: var(--gold); }
.switch[aria-checked="true"]::after { left: 23px; background: var(--gold-ink); }
.switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Vùng bấm công tắc 44px dù hình chỉ cao 32px: lớp ::before trong suốt phủ rộng ra 6px mỗi phía (rà chéo 16/10/2026). */
.switch::before { content: ""; position: absolute; inset: -6px -4px; }
.switch-wrap { display: inline-flex; align-items: center; min-height: var(--tap); }
@keyframes dtv-grow-up { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .podium-block { transform-origin: bottom; animation: dtv-grow-up .7s cubic-bezier(.2,.8,.2,1) both; }
  .podium-col .avatar { animation: dtv-pop .5s var(--ease-pop) both; }
  .rank-row { animation: dtv-swap .45s var(--ease-out) both; }
}
@media (min-width: 1100px) { .nhip { max-width: 720px; } }
/* Thẻ Nhịp lớp ở Tổng quan: điện thoại một dòng (.nhip-gon); máy tính mở rộng (.nhip-rong) có bục top 1-2-3 tuần
   (Quỳnh 16/10/2026: "màn PC thì show out rộng ... để có động lực"). */
.dash-nhip { padding: 16px 18px; color: inherit; text-decoration: none; }
.nhip-gon { display: flex; align-items: center; gap: 12px; }
.nhip-gon > svg { width: 16px; height: 16px; color: var(--t3); flex: none; }
.nhip-rong { display: none; }
@media (min-width: 1100px) {
  .dash-nhip { padding: 22px 24px; border-color: rgba(255,204,22,.28);
    background: radial-gradient(120% 140% at 100% 0%, rgba(255,204,22,.07) 0%, transparent 55%), var(--s1); }
  .dash-nhip:hover { border-color: rgba(255,204,22,.5); }
  .nhip-gon { display: none; }
  .nhip-rong { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: center; }
  .nhip-trai { display: flex; flex-direction: column; gap: 14px; }
  .nhip-so { display: flex; flex-direction: column; gap: 2px; }
  .nhip-so .num { font-size: 40px; line-height: 44px; color: var(--t1); }
  .nhip-toi { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--s2); }
  .nhip-phai { display: flex; flex-direction: column; gap: 10px; padding-left: 32px; border-left: 1px solid var(--line); }
  .nhip-phai .podium { justify-content: center; }
  .nhip-phai .podium-col { width: 120px; }
  .nhip-minh { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255,204,22,.06); }
  .nhip-trong { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 0; }
  .dash-nhip .link svg { width: 16px; height: 16px; }
}
.legend .lg-nghi { border: 1.5px dashed #4A4842; }

/* ---------- 15. Trang khóa và trang buổi (bản vẽ 04-trang-khoa, 05-trang-buoi; thêm 16/10/2026) ---------- */
.page-head { display: flex; flex-direction: column; gap: 6px; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--t3); }
.meta-row svg { width: 14px; height: 14px; }
.eyebrow-v2 { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-medium); color: var(--t3); }
.warn-box { display: flex; align-items: flex-start; gap: 10px; background: rgba(242,164,107,.08); border-radius: var(--r-sm); padding: 12px 14px; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.warn-box svg { width: 18px; height: 18px; color: var(--warn); flex: none; margin-top: 1px; }

/* Thẻ buổi */
.sess { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; color: var(--t1); text-decoration: none; min-width: 0; }
a.sess:hover { border-color: var(--line-2); }
.sess.is-noibat { border-color: var(--gold-line); }
.sess.is-khoa { opacity: .62; }
.sess .ico { font-variant-numeric: tabular-nums; }
.sess-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sess-res { display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-xs); color: var(--t3); }
.sess-res span { display: inline-flex; align-items: center; gap: 4px; }
.sess-res svg { width: 14px; height: 14px; }
.sess-note { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--gold); }
.sess-note svg { width: 16px; height: 16px; flex: none; }
.sess-list { display: flex; flex-direction: column; gap: 12px; }

/* Nhóm theo Season (Tinh Hoa): gấp mở bằng <details> của trình duyệt */
.season-v2 { background: transparent; border: 1px solid var(--line); border-radius: var(--r); }
.season-v2 > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 16px; cursor: pointer; font-weight: var(--fw-semi); }
.season-v2 > summary::-webkit-details-marker { display: none; }
.season-v2 > summary .grow { flex: 1; }
.season-v2 > summary svg { width: 18px; height: 18px; color: var(--t3); transition: transform var(--dur-fast); }
.season-v2[open] > summary svg { transform: rotate(180deg); }
.season-v2 > .sess-list { padding: 0 12px 12px; }

/* Trang buổi: danh sách tài nguyên, lối sang buổi khác */
.res-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); min-height: 72px; color: var(--t1); text-decoration: none; }
.res-row:first-child { border-top: 0; }
.res-row > svg { width: 18px; height: 18px; color: var(--t3); flex: none; }
.res-row.is-cho .ico { background: transparent; border: 1px dashed var(--line-2); color: var(--t3); }
.res-row.is-cho .res-ten { color: var(--t2); }
/* Điện thoại: chip chờ chỉ còn ổ khóa, nhường chỗ cho tên tài liệu (dòng chú thích đã nói khi nào có). */
@media (max-width: 479px) { .res-cho { padding: 0 8px; } .res-cho-chu { display: none; } }
.res-ten { font-weight: var(--fw-medium); }
.ring-sm { position: relative; width: 56px; height: 56px; flex: none; }
.ring-sm .num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; }
/* Vòng nhỏ r=22 có chu vi 138.2, không phải 188.5 của vòng 76px: chạy chung keyframes thì lóe ra một cung giả (rà chéo 16/10/2026). */
@keyframes dtv-ring-sm { from { stroke-dashoffset: 138.2; } }
@media (prefers-reduced-motion: no-preference) { .ring-sm .ring-arc { animation-name: dtv-ring-sm; } }
.ico--56 { width: 56px; height: 56px; border-radius: 16px; }
.ico--56 svg { width: 26px; height: 26px; }
.nav-buoi { display: flex; gap: 10px; }
.nav-buoi > * { flex: 1; min-width: 0; padding: 14px 16px; gap: 2px; text-decoration: none; color: var(--t1); }
.nav-buoi .is-het { opacity: .55; }
.nav-buoi .sau { text-align: right; }
/* Chọn khóa khi học từ 4 khóa: dải nút vuốt ngang, nút đang chọn vàng (cùng quy ước với thanh chia đều). */
.pills--khoa { scrollbar-width: none; -ms-overflow-style: none; padding: 2px 0; }
.pills--khoa::-webkit-scrollbar { display: none; }
.pills--khoa .pill { height: var(--tap); flex: none; }
.pill[aria-selected="true"] { background: var(--gold); color: var(--gold-ink); font-weight: var(--fw-semi); }

/* ---------- 16. Cập nhật mới (bản vẽ 10-cap-nhat; thêm 16/10/2026) ---------- */
.feed { display: grid; grid-template-columns: 40px minmax(0,1fr); column-gap: 14px; }
.feed-rail { display: flex; flex-direction: column; align-items: center; }
.feed-rail i { flex: 1; width: 2px; background: var(--s3); margin: 6px 0; border-radius: 2px; }
.feed-post { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; min-width: 0; }
.feed-post.is-moi { border-color: rgba(255,204,22,.28); }
.pill[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); font-weight: var(--fw-semi); }
.pills .pill { height: var(--tap); flex: none; }

/* ---------- 17. Live (bản vẽ 08-live; thêm 16/10/2026) ---------- */
.video-v2 { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--s1); border: 1px solid var(--line); }
.video-v2 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dem-o { flex: 1; background: var(--s2); border-radius: var(--r-sm); padding: 10px; text-align: center; display: flex; flex-direction: column; }
.dem-o .num { font-size: 22px; line-height: 28px; }
.ep-anh { width: 96px; height: 54px; border-radius: 10px; object-fit: cover; flex: none; background: var(--s2); }
.ep-ten { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 18. Xem thử (bản vẽ 13-xem-thu; thêm 16/10/2026) ---------- */
.xt-bia { position: relative; height: 320px; margin: calc(-1 * var(--sp-5)) calc(-1 * var(--gutter)) 0; overflow: hidden; background: var(--s2); }
.xt-bia::after { content: ""; position: absolute; inset: auto 0 0 0; height: 160px; background: linear-gradient(to bottom, rgba(18,18,17,0), var(--bg)); }
@media (min-width: 1100px) { .xt-bia { margin: 0; border-radius: var(--r-lg); } }
.cmp-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.cmp-o { border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--s1); border: 1px solid var(--line); min-width: 0; }
.cmp-o.is-vang { background: rgba(255,204,22,.06); border-color: rgba(255,204,22,.3); }
.li-v2 { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 21px; color: var(--t2); }
.li-v2 svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--gold); }
.xt-cho { aspect-ratio: 16 / 9; border-radius: 14px; background: var(--s2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 16px; }
/* Thanh nút dính cuối màn: ngay trên thanh mục dưới (điện thoại), sát đáy (máy tính, chừa cột trái). */
.cta-bar-v2 { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 19;
  padding: 12px 16px; background: rgba(18,18,17,.96); border-top: 1px solid rgba(255,204,22,.25); display: flex; flex-direction: column; gap: 6px; }
body.co-cta-bar { padding-bottom: calc(var(--tabbar-h) + 96px + env(safe-area-inset-bottom)); }
@media (min-width: 1100px) {
  .cta-bar-v2 { bottom: 0; left: 248px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .cta-bar-v2 .btn { max-width: 560px; margin: 0 auto; }
  body.co-cta-bar { padding-bottom: 110px; }
}
@keyframes dtv-len { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: no-preference) { .cta-bar-v2 { animation: dtv-len .5s cubic-bezier(.2,.8,.2,1) .6s both; } }

/* ---------- 19. Đăng nhập + Khóa học của tôi (bản vẽ 01, 01b, 02; thêm 16/10/2026) ---------- */
.dn { width: 100%; max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; padding-top: 24px; }
.dn-dau { display: flex; flex-direction: column; gap: 14px; }
.dn-dau--giua { align-items: center; text-align: center; gap: 18px; padding: 8px 8px 4px; }
.dn-ico { width: 60px; height: 60px; border-radius: 18px; }
.dn-ico svg { width: 28px; height: 28px; }
.dn-sang { box-shadow: 0 0 0 8px rgba(255,204,22,.05), 0 12px 40px -8px rgba(255,204,22,.35); }
.dn-mk { position: relative; }
.dn-mk .input { padding-right: 52px; }
.dn-mat { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: var(--tap); height: var(--tap); border: 0; background: none; color: var(--t3); display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 10px; }
.dn-mat svg { width: 20px; height: 20px; }
.dn-mat:focus-visible { outline: 2px solid var(--gold); }
.dn-link { justify-content: center; font-family: var(--font); line-height: 20px; border: 0; background: none; cursor: pointer; text-align: center; width: 100%; }
.dn-ke { flex: 1; height: 1px; background: var(--line); }
.dn-chua-tk { flex-direction: row; align-items: center; gap: 12px; cursor: pointer; color: inherit; font: inherit; text-align: left; width: 100%; }
.dn-chua-tk-chu { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dn-chua-tk > span:last-child svg { width: 18px; height: 18px; }
.dn-hoi { gap: 8px; }
.dn-hoi summary { min-height: 28px; display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: var(--fw-medium); list-style: none; }
.dn-hoi summary::-webkit-details-marker { display: none; }
.dn-hoi summary svg { width: 18px; height: 18px; color: var(--hue-blue); }
.dn-lui { margin-left: -8px; align-self: flex-start; }
.dn-manh { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dn-manh i { height: 4px; border-radius: 4px; background: var(--s3); transition: background .25s; }
.dn-manh[data-muc="1"] i:nth-child(1), .dn-manh[data-muc="2"] i:nth-child(-n+2), .dn-manh[data-muc="3"] i { background: var(--gold); }
.dn-nho { padding: 0; height: var(--tap); color: var(--t2); }
.dn-an { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.otp-o { height: 56px; border-radius: var(--r-sm); background: var(--s2); border: 1px solid var(--line-2); color: var(--t1); text-align: center;
  font: var(--fw-semi) 22px/1 var(--font); font-variant-numeric: tabular-nums; width: 100%; padding: 0; min-width: 0; }
.otp-o:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,204,22,.15); }
@media (prefers-reduced-motion: no-preference) { .otp-o { animation: dtv-rise .4s var(--ease-out) both; }
  .otp-o:nth-child(2) { animation-delay: .05s; } .otp-o:nth-child(3) { animation-delay: .1s; } .otp-o:nth-child(4) { animation-delay: .15s; }
  .otp-o:nth-child(5) { animation-delay: .2s; } .otp-o:nth-child(6) { animation-delay: .25s; } }

.kh-tiles { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.tile--doc { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; min-width: 0; }
.tile--doc .num { font-size: 20px; line-height: 24px; }
.kh-so { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; background: var(--s2); border-radius: 14px; padding: 12px; }
.kh-so > div { display: flex; flex-direction: column; min-width: 0; }
.kh-so .num { font-size: 17px; line-height: 24px; }
.srow { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.srow .ico { font-variant-numeric: tabular-nums; }
.srow-chu { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.srow-chu > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .chip { flex: none; }
.srow:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.kh-sap-het { display: flex; gap: 8px; align-items: flex-start; color: var(--warn); }
.kh-sap-het svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.kh-tin { flex-direction: row; align-items: center; gap: 12px; color: inherit; text-decoration: none; border-color: rgba(255,204,22,.25); }
.kh-tin-chu { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.kh-tin > span:last-child svg { width: 18px; height: 18px; }
.kh-moi { padding: 0; overflow: hidden; gap: 0; }
.kh-moi-anh { position: relative; height: 140px; }
.kh-moi-chip { position: absolute; left: 14px; top: 14px; background: rgba(18,18,17,.82); color: var(--t1); }
.kh-moi-than { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.kh-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; color: var(--t2); }
.kh-meta svg { width: 16px; height: 16px; color: var(--t3); flex: none; }
.kh-co-ma { font-family: var(--font); border: 0; background: none; padding: 0; min-height: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }
.kh-mo { align-items: flex-start; gap: 8px; cursor: pointer; color: inherit; font: inherit; text-align: left; width: 100%; }
.kh-khac { flex-direction: row; align-items: center; gap: 12px; }
@media (min-width: 1100px) {
  .dn { padding-top: 56px; }
  #courseList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
  #courseList > .kh-khac { grid-column: 1 / -1; }
}

/* ---------- 20. Hồ sơ (bản vẽ 11; thêm 16/10/2026) ---------- */
.input[readonly], .input[disabled] { color: var(--t2); }
.input[disabled] { opacity: .7; }
.hs-dau { flex-direction: row; align-items: center; gap: 14px; }
.hs-anh { width: 60px; height: 60px; border-radius: var(--r-pill); background: var(--s3); display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: var(--fw-semi); flex: none; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px rgba(255,204,22,.5); }
.hs-ten { font-size: 22px; line-height: 30px; overflow-wrap: anywhere; }
.hs-chon button { height: var(--tap); font-size: 14px; }
.hs-chon button[aria-selected="true"] { background: var(--gold); color: var(--gold-ink); font-weight: var(--fw-semi); }
.hs-dong-ho { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 4px; }
.hs-vong { position: relative; width: 220px; height: 120px; }
.hs-vong svg { display: block; }
.hs-vong-so { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; }
.hs-vong-so .num { font-size: 40px; line-height: 44px; }
.hs-dong-ho .chip { margin-top: 6px; }
.hs-phan { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.hs-cham { width: 26px; height: 26px; border-radius: 8px; }
.hs-cham i { width: 8px; height: 8px; border-radius: 9px; background: currentColor; }
.hs-khoa-v2 { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 0; color: inherit; text-decoration: none; }
.hs-khoa-v2 + .hs-khoa-v2 { border-top: 1px solid var(--line); }
.hs-khoa-v2 .ico { font-size: 13px; font-weight: var(--fw-semi); }
.hs-khoa-v2:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.card--flush > .srow:first-child { border-top: 0; }
.hs-doi { flex: none; padding: 0 16px; }
.hs-doi[aria-expanded="true"] { border-color: var(--gold); color: var(--gold); }
.hs-doi-khoi { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; padding: 14px; border-radius: var(--r-sm); background: var(--s2); border: 1px solid var(--line); }
.hs-doi-khoi.hidden { display: none; }
.hs-ma { letter-spacing: .3em; font-variant-numeric: tabular-nums; text-align: center; font-size: 20px; }
@keyframes dtv-cung { from { stroke-dashoffset: 1; } }
@media (prefers-reduced-motion: no-preference) { .hs-vong-cung { animation: dtv-cung 1.1s var(--ease-out) .2s both; } }
@media (min-width: 1100px) { .hs-trang { max-width: 760px; width: 100%; margin: 0 auto; } }
.hs-doi-khoi .input { background: var(--bg); }

/* Bìa thương hiệu dùng chung (biaThuongHieu trong app.js): hình vẽ thay ảnh người, không bao giờ cắt mặt ai. */
.bia-th { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 85% 100%, #2A2416 0%, var(--s2) 55%, var(--s1) 100%); }
.bia-th-hinh { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bia-th-logo { position: absolute; left: 16px; bottom: 14px; height: 13px; width: auto; opacity: .9; }
.xt-bia .bia-th-logo { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .bia-th-hinh circle[fill="#FFE27A"] { animation: dtv-lap-lanh 3.2s ease-in-out infinite; }
  .bia-th-hinh circle[fill="#FFE27A"]:nth-of-type(2n) { animation-delay: 1.4s; }
}
@keyframes dtv-lap-lanh { 50% { opacity: .25; } }

/* ---------- 21. Bài thực hành (bản vẽ 07; thêm 16/10/2026) ---------- */
.bt-dau { position: sticky; top: var(--header-h); z-index: 14; background: rgba(18,18,17,.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); padding: 4px var(--gutter) 10px; }
.bt-dau > * { max-width: 560px; margin-left: auto; margin-right: auto; }
.bt-dau .icon-btn { margin-left: -8px; }
.bt-dau-chu { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; flex: 1; }
.bt-luu { width: 92px; display: flex; justify-content: flex-end; align-items: center; gap: 4px; color: var(--hue-green); text-align: right; }
.bt-luu svg { width: 14px; height: 14px; flex: none; }
.bt-luu.is-loi { color: var(--warn); }
.bt-doan { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin-top: 8px; }
.bt-doan i { height: 4px; border-radius: 4px; background: var(--s3); transition: background .25s; }
.bt-doan i.d { background: var(--gold); }
.bt-doan i.c { background: rgba(255,204,22,.3); box-shadow: inset 0 0 0 1px var(--gold); }
.bt-tieu-de { font-size: 24px; line-height: 32px; font-weight: var(--fw-semi); letter-spacing: -.01em; }
.bt-map { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 4px; }
.bt-map > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 8px 4px; border-radius: 10px;
  background: var(--s1); border: 1px solid var(--line); min-width: 0; }
.bt-map-en { color: var(--t3); letter-spacing: .04em; }
.bt-map-vi { color: var(--t2); font-size: 11px; line-height: 15px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bt-map .is-nay { background: rgba(255,204,22,.13); border-color: rgba(255,204,22,.32); }
.bt-map .is-nay span { color: var(--gold); font-weight: var(--fw-semi); }
.bt-map .is-sau { border-style: dashed; }
.bt-tu-dien { border-top: 1px solid var(--line); padding-top: 6px; }
.bt-tu-dien summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; }
.bt-tu-dien b { color: var(--t1); font-weight: var(--fw-semi); }
.bt-y { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 21px; color: var(--t2); }
.bt-y svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--gold); }
.bt-ds { gap: 0; padding-top: 8px; padding-bottom: 8px; }
.bt-buoc-dong { display: flex; align-items: center; gap: 12px; min-height: 48px; width: 100%; background: none; border: 0; color: inherit;
  font: inherit; text-align: left; cursor: pointer; padding: 6px 0; }
.bt-buoc-dong.is-dang { background: rgba(255,204,22,.05); margin: 0 calc(-1 * var(--sp-5)); padding: 6px var(--sp-5); width: calc(100% + 2 * var(--sp-5)); }
.bt-buoc-dong:focus-visible, .bt-nhom-gap:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.bt-cham { width: 28px; height: 28px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; font-size: 12px;
  font-weight: var(--fw-semi); border: 1.5px solid #4A4842; color: var(--t3); flex: none; }
.bt-cham svg { width: 14px; height: 14px; }
.bt-cham.is-xong { background: var(--gold); color: var(--gold-ink); border: 0; }
.bt-cham.is-dang { border: 2px solid var(--gold); color: var(--gold); }
.bt-buoc-ten { flex: 1; min-width: 0; color: var(--t2); }
.bt-buoc-dong.is-dang .bt-buoc-ten { color: var(--t1); font-weight: var(--fw-semi); }
.bt-nhom-gap { display: flex; justify-content: space-between; align-items: center; min-height: 44px; width: 100%; border: 0; border-top: 1px solid var(--line);
  background: none; color: var(--t3); font: inherit; cursor: pointer; padding: 0; }
.bt-nhom-gap svg { width: 16px; height: 16px; }
.bt-ds-gap > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; cursor: pointer;
  padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--s1); }
.bt-ds-gap > summary::-webkit-details-marker { display: none; }
.bt-ds-gap > summary > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); }
.bt-ds-gap[open] > summary { border-color: rgba(255,204,22,.32); }
.bt-ds-gap > .bt-ds { margin-top: 8px; }
.bt-the { border-color: rgba(255,204,22,.32); }
.bt-so { font-size: 15px; font-weight: var(--fw-semi); }
/* Các khối câu hỏi bên trong thẻ bước: bỏ khung thẻ cũ, chỉ còn đường kẻ ngăn, để cả bước đọc thành MỘT thẻ như bản vẽ. */
.bt-the .card { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.bt-the > .card, .bt-the > .khoi-doc, .bt-the > .khoi-bang, .bt-the > .ds-identity { padding-top: 14px; border-top: 1px solid var(--line); }
.bt-the .q { font-size: 15px; line-height: 23px; font-weight: var(--fw-semi); color: var(--t1); }
.bt-the input[type="text"], .bt-the textarea, .bt-the select { width: 100%; border-radius: var(--r-sm); background: var(--s2); border: 1px solid var(--line-2);
  color: var(--t1); font: var(--fw-regular) 16px/24px var(--font); padding: 12px 14px; }
.bt-the input[type="text"] { height: var(--btn-h); padding: 0 14px; }
.bt-the input:focus, .bt-the textarea:focus, .bt-the select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.bt-tong-ket { gap: 0; }
.bt-tong-ket .summary-item .k { letter-spacing: 0; text-transform: none; font-size: 13px; color: var(--t3); }
.bt-the input[type="checkbox"], .bt-the input[type="radio"], .bt-tong-ket ~ .card input[type="checkbox"], body.v2 .kem-so-do input { accent-color: var(--gold); }
.bt-nut2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bt-nut2 .btn { padding: 0 10px; }
.bt-nut2 .btn svg { width: 18px; height: 18px; flex: none; }
.bt-rieng-tu b { color: var(--t2); font-weight: var(--fw-medium); }
.bt-tinh-than { text-align: center; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
.bt-tt-en { font-style: italic; color: var(--gold); font-weight: var(--fw-medium); }
.bt-xong { gap: 12px; }
@media (min-width: 1100px) { .bt-dau { top: 0; } .bt-dau > * { max-width: 720px; } .bt-trang { max-width: 720px; } }
@media print { .bt-dau { display: none !important; } }
/* ---------- 22. Quản trị · Sales case (bản vẽ A3; thêm 16/10/2026) ---------- */
.t-violet { color: var(--hue-violet); }
.stage-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
.stage-tabs::-webkit-scrollbar { display: none; }
.stage-tabs button { flex: none; height: 42px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--s1); color: var(--t2);
  font: var(--fw-medium) 14px var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.stage-tabs button[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: var(--fw-semi); }
.stage-tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.stage-tabs .n { font-variant-numeric: tabular-nums; font-size: 12px; opacity: .75; }
.sc-layout { display: flex; flex-direction: column; gap: 16px; }
.sc-ds { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.case-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line);
  cursor: pointer; width: 100%; text-align: left; color: inherit; font: inherit; }
.case-row:hover { border-color: var(--line-2); }
.case-row[aria-pressed="true"] { border-color: rgba(255,204,22,.45); background: rgba(255,204,22,.05); }
.case-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.case-chu { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.case-chu > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Số điện thoại khách ở Sales case: bôi đen chép được, kể cả trong thẻ dạng nút (Quỳnh 16/10/2026: chép số tìm Zalo). */
.case-sdt { -webkit-user-select: text; user-select: text; font-variant-numeric: tabular-nums; }
.case-ten { font-weight: var(--fw-semi); }
.case-phai { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; text-align: right; }
.sc-aside { gap: 16px; scroll-margin-top: calc(var(--header-h) + 12px); }
.sc-aside > * { flex-shrink: 0; }   /* khung dính có max-height + cuộn trong: không cho nút, hộp bị bóp dẹt */
.avatar--xl { width: 52px; height: 52px; font-size: 18px; }
.sc-ten { font-weight: var(--fw-semi); font-size: 17px; line-height: 25px; overflow-wrap: anywhere; }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.info-cell { background: var(--s2); border-radius: var(--r-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.info-cell--full { grid-column: 1 / -1; }
.sc-buoc { display: flex; flex-direction: column; }
.sc-buoc-dong { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; }
.sc-buoc-cot { display: flex; flex-direction: column; align-items: center; }
.sc-cham { width: 28px; height: 28px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: var(--fw-semi);
  background: var(--bg); color: var(--t3); border: 1.5px solid #4A4842; flex: none; }
.sc-cham svg { width: 14px; height: 14px; }
.sc-ke { flex: 1; width: 2px; margin: 3px auto; min-height: 14px; border-radius: 2px; background: var(--s3); }
.sc-buoc-chu { padding: 3px 0 14px; display: flex; flex-direction: column; color: var(--t3); }
.sc-buoc-dong.is-xong .sc-cham { background: var(--gold); color: var(--gold-ink); border: 0; }
.sc-buoc-dong.is-xong .sc-ke { background: var(--gold); }
.sc-buoc-dong.is-xong .sc-buoc-chu > :first-child { color: var(--t1); }
.sc-buoc-dong.is-dang .sc-cham { border: 2px solid var(--gold); color: var(--gold); }
.sc-buoc-dong.is-dang .sc-buoc-chu > :first-child { color: var(--gold); }
.next-box { display: flex; flex-direction: column; gap: 8px; background: rgba(255,204,22,.06); border: 1px solid rgba(255,204,22,.25); border-radius: 14px; padding: 14px; }
.sc-hanh-dong { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-hanh-dong .btn--primary { flex: 1 1 100%; }
.sc-goi { flex: 1 1 0; min-width: 0; padding: 0 12px; gap: 8px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-goi svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 599px) { .sc-hanh-dong .sc-goi { flex: 1 1 100%; } }   /* điện thoại: nút Gọi đủ chỗ cho cả số */
.sc-khac > summary, .sc-gap > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; }
.sc-khac > summary::-webkit-details-marker, .sc-gap > summary::-webkit-details-marker { display: none; }
.sc-khac > summary svg, .sc-gap > summary svg { width: 16px; height: 16px; flex: none; color: var(--t3); transition: transform .2s var(--ease-out); }
.sc-khac[open] > summary svg, .sc-gap[open] > summary svg { transform: rotate(180deg); }
.sc-khac { border-top: 1px solid var(--line); padding-top: 12px; }
.sc-khac > summary { color: var(--t2); min-height: 40px; }
.sc-gap { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--s1); scroll-margin-top: calc(var(--header-h) + 12px); }
.sc-gap > summary { min-height: 46px; padding: 0 14px; font-weight: var(--fw-medium); font-size: 14px; }
.sc-gap[open] > summary { border-bottom: 1px solid var(--line); }
.sc-ruot { padding: 12px 14px 14px; }
.sc-ruot select.input { height: var(--btn-h); padding: 0 12px; }
.sc-ruot input.input { height: var(--btn-h); padding: 0 14px; }
.sc-dong-phu { padding-top: 6px; border-top: 1px solid var(--line); }
@media (max-width: 599px) {
  /* Điện thoại: tuổi đơn xuống dưới tên, bỏ chip giai đoạn (đã lọc theo giai đoạn rồi), chữ phụ được xuống dòng. */
  .case-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: start; }
  .case-phai { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; text-align: left; }
  .case-phai .chip:not(.is-trung) { display: none; }
  .case-phai:empty { display: none; }
  .case-chu > span:not(.case-ten) { white-space: normal; }
}
@media (min-width: 1100px) {
  .stage-tabs { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .sc-layout { flex-direction: row; align-items: flex-start; gap: 20px; }
  .sc-ds { flex: 1 1 420px; }
  .sc-aside { flex: 0 1 440px; max-width: 440px; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
}
/* ---------- 23. Quản trị · Báo cáo lớp học (bản vẽ A1; thêm 16/10/2026) ---------- */
.t-1 { color: var(--t1); }
.bc-dau { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; }
.bc-lai { background: none; border: 0; padding: 0; font: inherit; color: var(--gold); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bc-lai:disabled { color: var(--t3); cursor: default; text-decoration: none; }
.bc-loc { gap: 10px; }
.bc-loc select.input { height: 42px; padding: 0 12px; width: auto; min-width: 180px; font-size: 14px; }
/* Xuống dòng, KHÔNG cuộn ngang: cuộn ngang thì tab Quyền (thứ đáng soát nhất) nằm ngoài màn 375px và không ai biết nó có. */
.bc-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 12px; scroll-margin-top: calc(var(--header-h) + 8px); }
.bc-tabs button, .bc-tabs a { flex: none; height: 42px; padding: 0 14px; border-radius: var(--r-sm); border: 0; background: none; color: var(--t2);
  font: var(--fw-medium) 14px var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.bc-tabs button.on { background: var(--gold); color: var(--gold-ink); font-weight: var(--fw-semi); }
.bc-tabs button:focus-visible, .bc-tabs a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bc-tabs .cnt { font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }
.bc-tabs .bc-tab-hv { margin-left: auto; }
/* Điện thoại: một hàng tab cuộn ngang như Sales case, không gãy hai hàng (17/10/2026). */
@media (max-width: 699px) {
  .bc-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 12px; }
  .bc-tabs::-webkit-scrollbar { display: none; }
}
.bc-tabs .bc-tab-hv svg { width: 16px; height: 16px; }
#noiDung { overflow-anchor: none; }
.bc-panel { gap: 18px; }
.bc-luoi2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 18px; align-items: start; }
.bc-h2 { font-size: 18px; line-height: 26px; }
.bc-so-lon { font-size: 64px; line-height: 64px; }
.bc-so-pt { font-size: 26px; font-weight: var(--fw-semi); }
.bc-so-vua { font-size: 22px; line-height: 28px; }
.bc-bar { height: 8px; }
.bc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bc-tiles .num { font-size: 24px; line-height: 30px; }
.bc-tiles .bc-tien { font-size: 18px; line-height: 26px; white-space: nowrap; }
/* Số tiền không bẻ giữa số: khung hẹp thì ô tiền chiếm trọn một hàng. */
@media (max-width: 599px) { .bc-tiles .tile--tien { grid-column: 1 / -1; } }
.bc-tiles .ico--warn svg, .bc-tiles .ico--mute svg { width: 20px; height: 20px; }
@media (min-width: 1100px) { .bc-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bc-lr { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.bc-buoi-dau { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.bc-buoi-ten { min-width: 0; }
/* Thanh ba đoạn xếp chồng: đoạn cách nhau 2px bằng nền thẻ (dataviz: khe giữa các phần), đầu thanh bo tròn. */
.bc-bar3 { display: flex; gap: 2px; height: 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--s1); }
.bc-bar3 > i { display: block; height: 100%; min-width: 2px; }
/* Học viên theo khóa: nền nhạt là "có quyền vào", phần vàng đè lên là "đang học". */
.bc-bar-chong { position: relative; height: 8px; border-radius: var(--r-pill); background: var(--s2); overflow: hidden; }
.bc-bar-chong > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-pill); }
.bc-bar-chong .bc-nen { background: var(--s3); }
.bc-bar-chong .bc-tren { background: var(--gold); }
.bc-chu-giai { gap: 12px; flex-wrap: wrap; }
.bc-chu-giai span { display: inline-flex; align-items: center; gap: 6px; }
.bc-chu-giai i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.bc-chu-giai i.tron { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--hue-blue); background: var(--s1); }
.bc-y { padding: 12px 14px; border-radius: var(--r-sm); background: var(--s2); }
.bc-y a { white-space: nowrap; }
/* Cột theo ngày: thanh số người đăng nhập; chấm tròn xanh là người có hoạt động. Bo 4px ở đầu cột, vuông ở chân. */
.bc-cot-vung { height: 160px; display: flex; align-items: flex-end; gap: 6px; border-bottom: 1px solid var(--line); padding-top: 18px; }
.bc-cot { flex: 1 1 0; min-width: 0; height: 100%; position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline: none; }
.bc-cot > i { display: block; width: 100%; background: #8A7428; border-radius: 5px 5px 0 0; transform-origin: bottom; }
.bc-cot.is-nay > i { background: var(--gold); }
.bc-cot.is-0 > i { background: var(--s3); }
.bc-cot:hover > i, .bc-cot:focus-visible > i { filter: brightness(1.2); }
.bc-cot:focus-visible { box-shadow: 0 0 0 2px var(--gold); border-radius: 4px; }
.bc-cot-so { font-size: 12px; line-height: 16px; font-weight: var(--fw-semi); color: var(--t1); margin-bottom: 2px; }
.bc-cot-so:empty { display: none; }
.bc-cham { position: absolute; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; border: 2px solid var(--hue-blue); background: var(--s1); }
.bc-cot-goi-y { text-align: center; flex: 1; min-width: 0; }
@media (prefers-reduced-motion: no-preference) {
  .bc-cot > i { animation: bc-len .6s var(--ease-out) both; }
  .bc-bar > i, .bc-bar-chong > i { transform-origin: left; animation: bc-ngang .8s var(--ease-out) .1s both; }
}
@keyframes bc-len { from { transform: scaleY(0); } }
@keyframes bc-ngang { from { transform: scaleX(0); } }
.bc-bang summary { cursor: pointer; padding: 6px 0; }
.bc-bang table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.bc-bang th, .bc-bang td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.bc-bang th { color: var(--t3); font-weight: var(--fw-semi); font-size: 12px; }
.bc-bang .n { text-align: right; font-variant-numeric: tabular-nums; }
.bc-tim { height: 40px; width: 220px; max-width: 100%; padding: 0 12px; font-size: 14px; }
#bllCsv { white-space: nowrap; height: 40px; }
.bc-bll-dau { display: none; }
.bc-bll-dong { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; padding: 14px 0; border-top: 1px solid var(--line); align-items: center; }
.bc-bll-dong > :first-child { grid-column: 1 / -1; }
.bc-bll-dong > :last-child { grid-column: 1 / -1; }
.bc-bll-dong.is-mo { opacity: .5; }
.bc-nhan-nho { color: var(--t3); font-size: 12px; }
.bc-trang-so { padding-top: 12px; border-top: 1px solid var(--line); gap: 10px; }
.bc-q-dong { min-height: 72px; padding: 12px 0; border-top: 1px solid var(--line); gap: 12px; }
.bc-bll { container-type: inline-size; }
@container (min-width: 680px) {
  .bc-bll-dau { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, .6fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; padding-bottom: 8px; }
  .bc-bll-dong { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, .6fr) minmax(0, 1fr) minmax(0, 1.3fr); }
  .bc-bll-dong > :first-child, .bc-bll-dong > :last-child { grid-column: auto; }
  .bc-nhan-nho { display: none; }
}
/* ---------- 24. Quản trị · Theo dõi học viên (bản vẽ A2; thêm 16/10/2026) ---------- */
.td-trang { --hue-red: #F48A7C; --hue-red-bg: rgba(242,106,90,.14); }
.td-cong-cu { gap: 8px; flex-wrap: wrap; width: 100%; }
.td-cong-cu select.input { height: 40px; width: auto; min-width: 150px; flex: 0 0 auto; padding: 0 12px; font-size: 14px; }
.td-cong-cu input.bc-tim { flex: 1 1 160px; width: auto; min-width: 0; }
.td-cong-cu .btn { flex: 0 0 auto; }
@media (min-width: 900px) { .td-cong-cu { width: auto; flex-wrap: nowrap; } .td-cong-cu input.bc-tim { flex: 0 1 220px; } }
#csv { white-space: nowrap; height: 40px; }
.td-canh { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 16px; flex-wrap: wrap; color: var(--t3); }
.td-canh.is-co { padding: 10px 14px; border-radius: var(--r-sm); background: var(--warn-soft); border: 1px solid rgba(242,164,107,.25); color: var(--warn); }
.td-canh svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.td-nhom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .td-nhom { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .td-nhom { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.td-q { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; background: var(--s1); border: 1px solid var(--line);
  text-align: left; cursor: pointer; color: var(--t1); font: inherit; min-width: 0; transition: border-color .2s, background .2s; }
.td-q:hover { border-color: var(--line-2); }
.td-q[aria-selected="true"] { border-color: var(--gold); background: rgba(255,204,22,.06); }
.td-q:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.td-q-so { font-size: 22px; line-height: 28px; }
.td-nut2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.td-nut2 .btn { width: 100%; padding: 0 10px; }
@media (max-width: 699px) {
  /* Điện thoại: thẻ nhóm gọn (số + tên), dòng gợi ý đã có ở câu luật ngay dưới. */
  .td-q { padding: 10px 12px; gap: 2px; border-radius: 14px; }
  .td-q > .t-xs { display: none; }
  .td-q .td-cham { width: 22px; height: 22px; border-radius: 7px; }
  .td-q .td-cham::after { inset: 7px; }
  .td-q-so { font-size: 18px; line-height: 24px; }
}
.td-cham { width: 28px; height: 28px; border-radius: 9px; flex: none; position: relative; }
.td-cham::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: currentColor; }
[data-hue="red"].td-cham, .td-chip[data-hue="red"] { background: var(--hue-red-bg); color: var(--hue-red); }
[data-hue="orange"].td-cham, .td-chip[data-hue="orange"] { background: var(--hue-orange-bg); color: var(--hue-orange); }
[data-hue="gold"].td-cham, .td-chip[data-hue="gold"] { background: var(--hue-gold-bg); color: var(--hue-gold); }
[data-hue="green"].td-cham, .td-chip[data-hue="green"] { background: var(--hue-green-bg); color: var(--hue-green); }
[data-hue="violet"].td-cham, .td-chip[data-hue="violet"] { background: var(--hue-violet-bg); color: var(--hue-violet); }
[data-hue="blue"].td-cham, .td-chip[data-hue="blue"] { background: var(--hue-blue-bg); color: var(--hue-blue); }
[data-hue="mute"].td-cham, .td-chip[data-hue="mute"] { background: var(--s2); color: var(--t2); }
.td-ds { gap: 0; min-width: 0; flex: 1 1 auto; }
.td-ds > .between { padding-top: 12px; }
/* Điện thoại / khung hẹp: tên + ngày vắng một hàng, ba ô số một hàng có nhãn nhỏ. Cột "Việc nên làm" chỉ hiện khi đang tìm
   (danh sách lẫn nhiều nhóm); xem một nhóm thì nhóm đã ghi ở ô đang chọn (17/10/2026, Quỳnh: dàn trang gọn). */
.td-hang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "ten ten vang" "diem bai xem"; gap: 8px 12px; align-items: start; }
.td-ds.is-tim .td-hang { grid-template-areas: "ten ten vang" "diem bai xem" "nhom nhom nhom"; }
.td-c-ten { grid-area: ten; } .td-c-diem { grid-area: diem; } .td-c-bai { grid-area: bai; } .td-c-xem { grid-area: xem; }
.td-c-vang { grid-area: vang; justify-self: end; text-align: right; white-space: nowrap; }
.td-c-nhom { grid-area: nhom; display: none; }
.td-ds.is-tim .td-c-nhom { display: block; }
.td-dau { display: none; }
.td-dong { min-height: 64px; padding: 10px 12px; margin: 0 -12px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; background: none;
  color: inherit; font: inherit; text-align: left; width: calc(100% + 24px); border-top: 1px solid var(--line); }
.td-dong:hover { background: rgba(255,255,255,.02); }
.td-dong[aria-pressed="true"] { background: rgba(255,204,22,.06); border-color: rgba(255,204,22,.3); }
.td-dong:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.td-ten { font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-phu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-nho { color: var(--t3); font-size: 12px; line-height: 18px; font-weight: var(--fw-regular); }
/* Ô số: mỗi khóa một dòng, mã khóa (TT, TH) đứng đầu, cùng cỡ 13px cho mọi số (17/10/2026). */
.td-dks { gap: 2px; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.td-dk { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; min-width: 0; }
.td-mk { font-size: 11px; font-weight: var(--fw-semi); color: var(--t3); min-width: 20px; letter-spacing: .02em; }
.td-dodot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--hue-orange); align-self: center; flex: none; margin-left: -2px; }
.td-chu-giai { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 12px; }
.td-chu-giai:empty { display: none; }
.td-chu-giai > span { display: inline-flex; align-items: center; gap: 6px; }
.td-chu-giai .td-mk { min-width: 0; }
.td-do { color: var(--hue-red); }
.td-so { font-size: 20px; line-height: 26px; }
.td-dots { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; }
.td-dots > i { display: block; height: 22px; border-radius: 5px; background: var(--s3); }
.td-dots > i.is-co { background: var(--gold); }
.td-lienlac { overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.td-buoi { padding: 8px 0; border-top: 1px solid var(--line); gap: 10px; }
.td-chua { background: var(--warn-soft); color: var(--warn); }
.td-xh { height: 32px; width: auto; padding: 0 8px; font-size: 13px; }
.td-tin .textarea { min-height: 96px; font-size: 14px; line-height: 21px; }
.td-bai { border-top: 1px solid var(--line); padding: 6px 0; }
.td-bai summary { cursor: pointer; padding: 6px 0; }
.td-cau { margin: 8px 0; font-size: 14px; line-height: 22px; white-space: pre-wrap; color: var(--t2); }
.td-cau b { color: var(--t3); font-size: 12px; font-weight: var(--fw-semi); }
.td-phan-bo > summary { list-style: none; cursor: pointer; }
.td-phan-bo > summary::-webkit-details-marker { display: none; }
.td-phan-bo > summary svg { width: 16px; height: 16px; color: var(--t3); }
.td-pb { height: 120px; display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid var(--line); }
.td-pb-cot { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; position: relative; }
.td-pb-cot > i { display: block; width: 100%; background: #8A7428; border-radius: 4px 4px 0 0; }
.td-pb-cot.is-nguong::before { content: ''; position: absolute; left: -2px; top: 0; bottom: 0; border-left: 1px dashed var(--gold); }
/* Lưới 6 cột theo BỀ RỘNG KHUNG danh sách (container query), không theo cửa sổ: từ 900-1300px cửa sổ, khung danh sách
   còn hẹp vì cột menu và khung chi tiết, 6 cột bị ép tràn chip và thanh (rà chéo 16/10 khuya). */
.td-ds { container-type: inline-size; }
@container (min-width: 540px) {
  .td-hang { grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); grid-template-areas: "ten diem bai xem vang"; align-items: center; }
  /* Đang tìm, khung còn hẹp: chip nhóm nằm dưới tên, không chen thêm cột. */
  .td-ds.is-tim .td-hang { grid-template-areas: "ten diem bai xem vang" "nhom diem bai xem vang"; }
  .td-ds.is-tim .td-dau { grid-template-areas: "ten diem bai xem vang"; }
  .td-ds.is-tim .td-dau .td-c-nhom { display: none; }
  .td-ds.is-tim .td-dong .td-c-nhom { padding-left: 42px; }
  .td-c-vang { justify-self: start; text-align: left; }
  .td-dong .td-chip { white-space: normal; height: auto; min-height: 24px; padding: 3px 8px; line-height: 16px; }
  .td-dau { display: grid; padding: 0 0 10px; }
  .td-dau > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .td-nho { display: none; }
}
@container (min-width: 720px) {
  .td-ds.is-tim .td-hang { grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr) minmax(0, 1.3fr); grid-template-areas: "ten diem bai xem vang nhom"; }
  .td-ds.is-tim .td-dau .td-c-nhom { display: block; }
  .td-ds.is-tim .td-dong .td-c-nhom { padding-left: 0; }
}
@media (min-width: 1100px) { .td-trang .sc-aside { flex: 0 1 420px; max-width: 420px; } }
/* Số đếm cạnh mục quản trị trên menu (bản vẽ A1/A2). */
.menu-dem { height: 22px; padding: 0 8px; font-variant-numeric: tabular-nums; }
/* Cột trái máy tính: số đếm gắn lên góc biểu tượng, để "Theo dõi học viên" không gãy hai dòng (17/10/2026). */
.side-link { position: relative; }
.side-link .menu-dem { position: absolute; left: 30px; top: 4px; height: 18px; min-width: 18px; padding: 0 5px; font-size: 11px;
  justify-content: center; box-shadow: 0 0 0 2px var(--bg); }

/* ── 25. Trợ lý học tập AI (16/10/2026 tối; assets/app.js ganTroLy) ──
   Nút nổi vàng góc dưới phải, nằm trên thanh mục dưới ở điện thoại; khung chat là tấm trượt từ dưới (điện thoại) hoặc
   ô nổi 400px (từ 700px). Tin của học viên viền vàng nhạt bên phải, của trợ lý nền s2 bên trái. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tl-nut { position: fixed; right: var(--gutter); bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); z-index: 30;
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: var(--r-pill);
  background: var(--gold); color: var(--gold-ink); font: var(--fw-semi) var(--fs-sm)/1 var(--font); cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.tl-nut svg { width: 20px; height: 20px; }
.tl-nut:focus-visible { outline: 2px solid var(--t1); outline-offset: 3px; }
body.co-cta-bar .tl-nut { bottom: calc(var(--tabbar-h) + 104px + env(safe-area-inset-bottom)); }
/* Chừa chỗ cuối trang để nút nổi không che phần tử cuối (điện thoại; máy tính có lề rộng). */
@media (max-width: 1099px) { body.co-tro-ly:not(.co-cta-bar) .app-main { padding-bottom: 72px; } }
@media (min-width: 1100px) { .tl-nut, body.co-cta-bar .tl-nut { bottom: 24px; right: 24px; } body.co-cta-bar .tl-nut { bottom: 104px; } }
.tl-bang { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: min(80vh, 640px); height: min(80dvh, 640px); display: flex; flex-direction: column;
  background: var(--s1); border: 1px solid var(--line-2); border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -16px 48px rgba(0,0,0,.5); padding-bottom: env(safe-area-inset-bottom); }
.tl-bang[hidden] { display: none; }
@media (min-width: 700px) { .tl-bang { left: auto; right: 24px; bottom: 24px; width: 400px; border-bottom: 1px solid var(--line-2); border-radius: var(--r-lg); } }
.tl-dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px 10px 16px; border-bottom: 1px solid var(--line); }
.tl-ds { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.tl-tin { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: var(--fs-body); line-height: var(--lh-body); white-space: pre-wrap;
  overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.tl-tin--hv { align-self: flex-end; background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--t1); border-bottom-right-radius: 4px; }
.tl-tin--tl { align-self: flex-start; background: var(--s2); color: var(--t1); border-bottom-left-radius: 4px; }
.tl-tin.is-cho:empty::after { content: 'Đang nghĩ...'; color: var(--t3); }
.tl-goi-y { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-goi-y-nut { height: auto; min-height: 32px; padding: 6px 12px; white-space: normal; text-align: left; cursor: pointer; border: 1px solid var(--line-2); color: var(--t2); background: transparent; font: inherit; font-size: var(--fs-sm); }
.tl-nhap { display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px 8px; border-top: 1px solid var(--line); }
.tl-nhap .textarea { flex: 1; min-height: 48px; max-height: 120px; resize: none; }
.tl-chu-y { padding: 0 16px 12px; }
@media (prefers-reduced-motion: no-preference) { .tl-bang:not([hidden]) { animation: tl-len var(--dur-fast) var(--ease-out); } }
@keyframes tl-len { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── 26. Thông điệp hôm nay ở Tổng quan (20/10/2026; docs/92-thong-diep-moi-ngay.md, ảnh ở assets/anh-thong-diep.js) ──
   Cùng họ với ảnh tải về: nền tối, dấu ngoặc kép vàng lớn, quầng sáng vàng dâng từ đáy như bình minh. KHÔNG nút vàng đặc
   (nút vàng duy nhất thuộc Việc tiếp theo); "Tải ảnh" là nút phụ viền vàng.
   Hiệu ứng (bản 20/10 chiều, Quỳnh: "tăng hiệu ứng hiển thị cho thu hút"): khi thẻ vào tầm mắt (.dang-hien, gắn ở
   tong-quan.html ganHieuUng), từng chữ hiện dần như mực ngấm, quầng bình minh sáng dần, gạch vàng kéo ra khi chữ cuối hiện.
   Một lần, không lặp. Chữ chỉ bị giấu khi có lớp .cho-hien (JS chắc chắn sẽ gỡ) và máy không bật giảm chuyển động. */
.dash-thongdiep { position: relative; overflow: hidden; isolation: isolate; gap: 14px; border-color: rgba(255,204,22,.22); background: var(--s1); }
.dash-thongdiep::before { content: ''; position: absolute; left: -25%; right: -25%; bottom: -35%; height: 105%; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 62% at 30% 88%, rgba(255,204,22,.22) 0%, rgba(255,204,22,.07) 48%, rgba(255,204,22,0) 72%); }
.tdh-nhan { font-weight: var(--fw-medium); letter-spacing: .02em; }
.tdh-cau { margin: 0; font-size: 21px; line-height: 31px; font-weight: var(--fw-semi); color: var(--t1); letter-spacing: -.01em;
  user-select: text; -webkit-user-select: text; text-wrap: pretty; }
.tdh-cau::before { content: '\201C'; display: block; height: 30px; margin-bottom: 2px; font-size: 68px; line-height: 64px; color: var(--gold); }
.tdh-w { display: inline-block; }
.tdh-vach { display: block; width: 56px; height: 3px; border-radius: 2px; background: var(--gold); margin-top: -2px; }
/* Thử hôm nay (21/10/2026, Quỳnh: "một việc nhỏ làm ngay trong ngày, nối với câu chính, nằm trong khung dưới câu chính"):
   ô tối hơn nền thẻ, nhãn vàng nhỏ, chữ thường; không in lên ảnh tải về. */
.tdh-thu { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(22,22,22,.6); }
.tdh-thu-nhan { color: var(--gold); font-weight: var(--fw-medium); letter-spacing: .02em; }
.tdh-thu-viec { margin: 0; font-size: 15px; line-height: 23px; color: var(--t1); text-wrap: pretty; }
.tdh-nut { gap: 8px; flex-wrap: wrap; }
.tdh-nut .btn { height: 42px; font-size: 14px; }
.tdh-nut .tdh-tai { border-color: var(--gold-line); color: var(--gold); background: var(--gold-soft); }
.tdh-nut .tdh-tai:hover { border-color: var(--gold); }
.tdh-bao:empty { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .dash-thongdiep.cho-hien::before { opacity: .35; transform: translateY(14%); transition: opacity 1.8s var(--ease-out) .15s, transform 1.8s var(--ease-out) .15s; }
  .dash-thongdiep.cho-hien.dang-hien::before { opacity: 1; transform: none; }
  .dash-thongdiep.cho-hien .tdh-cau::before { opacity: 0; transform: scale(.55); transform-origin: 0 70%; }
  .dash-thongdiep.cho-hien.dang-hien .tdh-cau::before { animation: tdh-ngoac .7s var(--ease-pop) forwards; }
  .dash-thongdiep.cho-hien .tdh-w { opacity: 0; transform: translateY(.35em); filter: blur(6px); }
  .dash-thongdiep.cho-hien.dang-hien .tdh-w { animation: tdh-hien .9s var(--ease-out) forwards; animation-delay: calc(.25s + var(--i) * 60ms); }
  .dash-thongdiep.cho-hien .tdh-vach { transform: scaleX(0); transform-origin: left; }
  .dash-thongdiep.cho-hien.dang-hien .tdh-vach { animation: tdh-vach .8s var(--ease-out) forwards; animation-delay: calc(.6s + var(--n) * 60ms); }
  .dash-thongdiep.cho-hien .tdh-thu { opacity: 0; transform: translateY(8px); }
  .dash-thongdiep.cho-hien.dang-hien .tdh-thu { animation: tdh-ngoac .7s var(--ease-out) forwards; animation-delay: calc(.9s + var(--n) * 60ms); }
}
@keyframes tdh-hien { to { opacity: 1; transform: none; filter: none; } }
@keyframes tdh-ngoac { to { opacity: 1; transform: none; } }
@keyframes tdh-vach { to { transform: none; } }
@media (min-width: 1100px) {
  .dash-thongdiep { padding: 26px 30px; }
  .tdh-cau { font-size: 26px; line-height: 38px; max-width: 30em; }
  .tdh-cau::before { font-size: 80px; line-height: 74px; height: 34px; }
  .tdh-thu { max-width: 46em; }
  .tdh-thu-viec { font-size: 16px; line-height: 25px; }
}
/* Hộp xem ảnh (máy không chia sẻ được tệp ảnh): ảnh vừa khung, chạm giữ để lưu. */
.tdh-anh { display: block; width: 100%; max-width: 360px; height: auto; margin: 4px auto 0; border-radius: 12px; -webkit-touch-callout: default; }
@media (min-width: 1100px) {
  .dash-thongdiep { padding: 24px 28px; }
  .tdh-cau { font-size: 22px; line-height: 33px; max-width: 46em; }
}

/* ── 27. Bên trong học viện: trang đăng nhập cho người CHƯA là học viên (21/10/2026, docs/10 mục 21/10) ──
   Khách bấm link trong câu chốt sales thấy ngay dưới khung đăng nhập: thông điệp hôm nay chạy thật (thẻ dùng lại lớp mục 26,
   điểm nhấn duy nhất có chuyển động), ba khối mang đúng ba chữ của câu chốt kèm ảnh màn thật, và một nút vàng nhắn Zalo
   Admin. Ảnh đặt trong khung bo góc như màn điện thoại, cắt bỏ thanh mục dưới, mờ dần ở đáy. Máy tính (từ 1100px): phần này
   trải rộng ra khỏi cột đăng nhập 440px, ba khối thành ba cột. */
.gt { display: flex; flex-direction: column; gap: 32px; margin-top: 12px; padding-top: 32px; border-top: 1px solid var(--line); }
.gt-mo { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.gt-nhan { color: var(--gold); font-weight: var(--fw-medium); letter-spacing: .02em; }
.gt-tieu-de { margin: 0; font-size: 26px; line-height: 32px; font-weight: var(--fw-semi); letter-spacing: -.015em; color: var(--t1); }
.gt-hom-nay { display: flex; flex-direction: column; gap: 12px; }
.gt-hom-nay-chu b { font-weight: var(--fw-semi); }
.gt-td { text-align: left; }
.gt-ba { display: flex; flex-direction: column; gap: 36px; }
.gt-khoi { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.gt-chu { display: flex; flex-direction: column; gap: 6px; }
.gt-khoi-ten { margin: 0; font-size: 18px; line-height: 26px; font-weight: var(--fw-semi); letter-spacing: -.01em; color: var(--t1); text-wrap: balance; }
.gt-anh { position: relative; align-self: center; width: min(280px, 84%); aspect-ratio: 585 / 960; overflow: hidden;
  border-radius: 28px; border: 1px solid var(--line-2); background: var(--s1);
  box-shadow: 0 0 0 6px rgba(255,255,255,.025), 0 28px 60px -28px rgba(0,0,0,.8); }
.gt-anh img { display: block; width: 100%; height: auto; }
.gt-anh::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(18,18,17,0), var(--bg)); }
.gt-moi { align-self: center; color: var(--gold); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(255,204,22,.4); padding: 6px 4px; }
.gt-moi:hover { text-decoration-color: var(--gold); }
.gt-moi:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
#gioiThieu { scroll-margin-top: 16px; }
/* Màn đầu "Học": lớp Zoom anh Nam dạy (21/10 chiều), ảnh 4:5 dùng lại từ trang bán, khung 4:5 riêng; mờ đáy ít để còn thấy thanh
   phát của bản ghi. */
.gt-khoi--dau .gt-anh { aspect-ratio: 840 / 1050; width: min(320px, 92%); }
.gt-khoi--dau .gt-anh::after { height: 40px; }
.gt-chot { align-items: center; text-align: center; gap: 12px; border-color: rgba(255,204,22,.22); }
.gt-chot .gt-nut { width: 100%; }
@media (min-width: 1100px) {
  .gt { width: min(1040px, calc(100vw - 80px)); margin-left: calc(50% - min(520px, 50vw - 40px)); gap: 44px; padding-top: 44px; }
  .gt-mo { max-width: 620px; margin: 0 auto; }
  .gt-tieu-de { font-size: 32px; line-height: 40px; }
  .gt-hom-nay { width: 100%; max-width: 760px; margin: 0 auto; }
  .gt-ba { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .gt-khoi { justify-content: space-between; }
  .gt-anh { width: 100%; max-width: 300px; }
  .gt-khoi--dau { grid-column: 1 / -1; display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: center; column-gap: 56px;
    padding-bottom: 12px; }
  .gt-khoi--dau .gt-anh { order: -1; width: 100%; max-width: 320px; }
  .gt-khoi--dau .gt-chu { max-width: 520px; gap: 10px; }
  .gt-khoi--dau .gt-khoi-ten { font-size: 28px; line-height: 36px; }
  .gt-chot { width: 100%; max-width: 560px; margin: 0 auto; }
}