/* O ngay co su kien la the <a>: phai co dau hieu bam duoc, neu khong nguoi
   ta khong biet la bam duoc. */
a.cal-c{cursor:pointer}
a.cal-c:hover{background:var(--accent-soft);border-color:var(--accent)}

/* ---------- TRANG GIỚI THIỆU = trang bán hàng (27/9) ----------------- */
/* Chữ đen cực đậm, điểm nhấn xanh lá trầm của logo, thẻ trắng nổi trên nền lưới. */
.gt2{max-width:1120px;margin:0 auto}
.gt-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;
  align-items:center;padding:14px 0 38px}
@media(max-width:900px){.gt-hero{grid-template-columns:minmax(0,1fr);gap:28px}}
.gt-nhan{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase}
.gt-nhan::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--vang);
  box-shadow:0 0 0 4px var(--accent-soft)}
.gt-h1{margin:20px 0 18px;font-size:clamp(46px,7.6vw,96px);line-height:.94;font-weight:800;
  letter-spacing:-.035em;text-transform:uppercase}
/* Chữ in hoa có dấu (Ế, Ổ, Ỳ; chấm dưới Ộ, Ọ) cần khoảng dòng rộng hơn, không
   thì dấu dòng dưới đâm vào chữ dòng trên. Tên không dấu như "1-1-1 BUSINESS"
   giữ khít cho đậm chất tiêu đề. */
.gt-h1.co-dau{line-height:1.12}
.gt-h1 b{display:block;font-weight:800}
.gt-h1 em{display:block;font-style:normal;color:var(--vang-dam)}
.gt-mo{font-size:18px;line-height:1.6;color:var(--muted);max-width:34em;margin:0 0 16px}
.gt-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.gt-meta span{font-size:13px;padding:5px 12px;border-radius:999px;background:var(--bg);color:var(--muted)}
.gt-hanh{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.btn.gt-nut{font-size:16px;padding:15px 26px;border-radius:14px;
  box-shadow:0 14px 30px -14px color-mix(in srgb,var(--vang) 85%,transparent)}
.gt-xem{font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--vang)}
/* Khung LỘ TRÌNH bên phải: ba con số lớn, rồi các buổi nối nhau thành một
   đường. Số to chỉ dùng CHỮ SỐ — chữ in hoa cỡ lớn có dấu đâm vào nhau. */
.gt-tu{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);
  border-radius:26px;padding:26px 26px 24px;box-shadow:0 34px 60px -34px rgba(0,0,0,.3)}
.gt-tu::after{content:"";position:absolute;inset:auto 0 0;height:34%;pointer-events:none;
  background:linear-gradient(to top,color-mix(in srgb,var(--vang) 24%,transparent),transparent)}
.gt-tu-dau{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:12px;font-weight:700;
  line-height:1.5;letter-spacing:.16em;text-transform:uppercase}
.gt-tu-dau::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--vang);
  box-shadow:0 0 0 4px var(--accent-soft)}
.gt-so{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:0 0 22px;
  border:1px solid var(--line);border-radius:16px;background:var(--bg)}
.gt-so div{display:grid;gap:6px;align-content:start;padding:14px 16px;min-width:0}
.gt-so div+div{border-left:1px solid var(--line)}
.gt-so b{font-size:clamp(30px,3.4vw,42px);font-weight:800;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.gt-so span{font-size:12.5px;line-height:1.35;color:var(--muted)}
.gt-so .xanh b{color:var(--vang-dam)}
.gt-lt{list-style:none;margin:0;padding:0;position:relative;z-index:1}
.gt-lt li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;padding:0 0 16px}
.gt-lt li:last-child{padding-bottom:0}
/* Đường nối từ vòng số này xuống vòng số kế. */
.gt-lt li:not(:last-child)::before{content:"";position:absolute;left:17px;top:40px;bottom:4px;width:2px;
  border-radius:2px;background:color-mix(in srgb,var(--vang) 45%,var(--line))}
.gt-lt-so{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--vang);
  color:var(--tren-vang);font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
.gt-lt-noi{display:grid;gap:4px;align-content:start;padding-top:7px;min-width:0}
.gt-lt-ten{font-size:15px;font-weight:700;line-height:1.4;color:var(--ink);text-decoration:none}
a.gt-lt-ten:hover{text-decoration:underline;text-decoration-color:var(--vang);text-underline-offset:3px}
.gt-lt-phu{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.gt-lt-them .gt-lt-so{background:var(--accent-soft);color:var(--accent)}
.gt-lt-xem{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;background:var(--vang);
  color:var(--tren-vang);font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}
.gt-lt-xem:hover{background:var(--vang-dam)}
.gt-bai-ten .gt-lt-xem{margin-left:8px}
.gt-bai-ten a{color:inherit;text-decoration:none}
.gt-bai-ten a:hover{text-decoration:underline;text-decoration-color:var(--vang)}
.gt-tu-bia{position:relative;z-index:1;border-radius:16px;overflow:hidden}
/* Các khúc bên dưới */
.gt-phan{padding:36px 0;border-top:1px solid var(--line)}
.gt-mac{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.gt-h2{font-size:clamp(26px,3.4vw,38px);line-height:1.12;font-weight:800;letter-spacing:-.02em;margin:0 0 22px}
/* Chữ giới thiệu để rộng và thoáng — đây là phần người lạ ĐỌC, không phải
   phần họ liếc. 66 ký tự một dòng là ngưỡng dễ đọc nhất. */
.gt-noi{max-width:66ch;font-size:18px;line-height:1.75;margin:0}
.gt-noi p{margin:0 0 14px}
.gt-noi h2,.gt-noi h3{margin:22px 0 8px}
.gt-noi ul{padding-left:20px;margin:0 0 14px}
.gt-noi li{margin:5px 0}
.gt-mod{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:12px}
.gt-mod-ten{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 18px;
  font-weight:700;background:var(--bg)}
.gt-bai{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:13px 18px;border-top:1px solid var(--line)}
.gt-bai-so{font-weight:800;color:var(--vang-dam);font-variant-numeric:tabular-nums}
.gt-bai-ten{font-weight:600;min-width:0}
.gt-bai-ten .pill{margin-left:8px}
.gt-bai-tg{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.gt-loi-ich{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:900px){.gt-loi-ich{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.gt-loi-ich{grid-template-columns:minmax(0,1fr)}}
.gt-li{display:grid;gap:6px;align-content:start;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:18px}
.gt-li i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:6px;
  background:var(--accent-soft);color:var(--accent)}
.gt-li i svg{width:20px;height:20px}
.gt-li b{font-size:15.5px}
.gt-li span{font-size:13.5px;line-height:1.5;color:var(--muted)}
.gt-qua{display:grid;gap:12px;margin-top:14px;padding:20px 22px;border-radius:18px;background:#111;color:#fff}
.gt-qua b{font-size:17px}
.gt-qua div{display:flex;flex-wrap:wrap;gap:8px}
.gt-qua span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1)}
.gt-qua span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--mau)}
.gt-nguoi{display:flex;gap:20px;align-items:center}
.av.av-lon{width:72px;height:72px;font-size:24px;flex:none}
.gt-gia-khoi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:26px;align-items:center;
  background:var(--panel);border:2px solid var(--vang);border-radius:22px;padding:26px 28px}
@media(max-width:900px){.gt-gia-khoi{grid-template-columns:minmax(0,1fr)}}
.gt-gia{font-size:clamp(34px,4.4vw,48px);font-weight:800;letter-spacing:-.03em;margin:0;line-height:1.1}
.gt-gom{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14.5px}
.gt-gom li{display:flex;gap:10px;align-items:baseline}
.gt-gom li::before{content:"✓";flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:var(--vang);color:var(--tren-vang);font-size:11px;font-weight:800;transform:translateY(2px)}
.gt-hoi{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:10px}
.gt-hoi summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:12px;
  padding:16px 18px;font-weight:700}
.gt-hoi summary::-webkit-details-marker{display:none}
.gt-hoi summary::after{content:"+";color:var(--accent);font-weight:800}
.gt-hoi[open] summary::after{content:"–"}
.gt-hoi p{margin:0;padding:0 18px 16px;color:var(--muted);line-height:1.6}
.gt-cuoi{text-align:center;padding:44px 0 12px;border-top:1px solid var(--line)}
.gt-cuoi h2{margin:0 0 18px;font-size:clamp(30px,4.4vw,48px);font-weight:800;letter-spacing:-.03em;
  text-transform:uppercase;line-height:1.15}
.gt-cuoi h2 em{font-style:normal;color:var(--vang-dam)}

/* ---------- NHÃN Ở TRANG GIỚI THIỆU --------------------------------- */
.nhan-hang{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 16px}
.nhan{font-size:12px;padding:3px 10px;border:1px solid var(--line);
      border-radius:12px;color:var(--muted);background:var(--bg)}

/* ---------- TIN NHẮN (kiểu Messenger / Zalo) ------------------------ */
.tn-nut{position:relative;font-size:16px}
/* Huy hiệu ĐỎ như Facebook, có viền màu nền để tách khỏi biểu tượng bên dưới.
   Trước là màu nhấn (cam) — cùng màu biểu tượng nên lẫn vào, không ai để ý. */
.tn-so{position:absolute;top:-6px;right:-9px;min-width:18px;height:18px;padding:0 5px;
  background:var(--do);color:#fff;border-radius:9px;font-size:11px;
  font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--nen)}
@keyframes tn-nay{0%{transform:scale(.3)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.tn-so.nay{animation:tn-nay .45s ease-out}
@keyframes chuong-rung{0%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}
  30%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-7deg)}
  75%{transform:rotate(3deg)}}
.chuong.rung svg{animation:chuong-rung .9s ease-in-out;transform-origin:50% 10%}

/* Khung thả xuống ở chuông. Đặt tuyệt đối trong .who nên không chiếm chỗ
   trong hàng flex của cụm góc phải. Chữ đặt lại: .who là 13px xám. */
.tb-khung{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:380px;
  max-width:calc(100vw - 32px);max-height:min(72vh,580px);overflow-y:auto;padding:10px 8px;
  font-size:15px;color:var(--ink);text-align:left;
  box-shadow:0 14px 36px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.06)}
.tb-khung[hidden]{display:none}
.tb-dau{display:flex;justify-content:space-between;align-items:center;padding:2px 8px 8px}
.tb-dau b{font-size:18px;letter-spacing:-.01em}
.tb-dau a{font-size:13.5px;color:var(--accent);font-weight:600}
.tb-dau a:hover{text-decoration:underline}
.tb-khung .tn-d.tb-d{padding:9px 8px;border-top:0;border-radius:12px}
.tb-khung .tn-d.tb-d.moi{background:var(--accent-soft)}
.tb-khung .tb-d.moi .tb-icon{background:var(--panel)}
.tb-khung .tb-d.moi::after{content:"";flex:none;width:10px;height:10px;border-radius:50%;
  background:var(--do)}
.tb-khung .tb-trong{margin:8px}
@media(max-width:600px){
  .tb-khung{position:fixed;left:8px;right:8px;top:62px;width:auto;max-width:none}
}

/* Popup GÓC PHẢI TRÊN, ngay dưới cụm chuông · thư: thông báo bật ra sát chỗ
   nó sẽ nằm lại sau khi tắt, mắt không phải chạy chéo màn hình. Vị trí đứng
   được đặt lại trong hienToast() để không đè lên thanh đầu trang. Bấm vào là
   tới đúng chỗ; tự tắt sau 8 giây, rê chuột vào thì giữ lại. */
.toast-khu{position:fixed;right:16px;top:16px;z-index:1000;display:flex;
  flex-direction:column;gap:10px;max-width:calc(100vw - 32px)}
.toast{display:flex;align-items:flex-start;width:360px;max-width:100%;background:var(--panel);
  color:var(--ink);border:1px solid var(--line);border-radius:12px;font-size:14px;line-height:1.45;
  box-shadow:0 14px 36px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.08);animation:toast-vao .28s ease-out}
.toast-mo{flex:1;min-width:0;display:flex;gap:11px;align-items:center;padding:12px 4px 12px 13px;
  border-radius:12px}
.toast-mo[href]:hover{background:var(--bg)}
.toast-icon{flex:none;position:relative;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;font-size:19px;background:var(--accent-soft)}
.toast-icon.av{background:var(--accent);color:#fff;font-size:13px;font-weight:700}
.toast-icon::after{content:"";position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;
  border-radius:50%;background:var(--do);border:2px solid var(--panel)}
.toast-than{min-width:0}
.toast-chu{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word}
.toast-chu b{font-weight:600}
.toast-gio{display:block;font-size:12px;color:var(--accent);font-weight:600;margin-top:1px}
.toast-x{flex:none;margin:8px 8px 0 0;width:28px;height:28px;border:0;border-radius:50%;
  background:none;color:var(--muted);font-size:19px;line-height:1;cursor:pointer}
.toast-x:hover{background:var(--line);color:var(--ink)}
.toast.ra{animation:toast-ra .25s ease-in forwards}
@keyframes toast-vao{from{transform:translateY(-18px);opacity:0}to{transform:none;opacity:1}}
@keyframes toast-ra{to{transform:translateX(28px);opacity:0}}
/* Điện thoại: trải hết bề ngang, sát mép trên như thông báo đẩy của máy. */
@media(max-width:600px){
  .toast-khu{left:8px;right:8px;top:8px;max-width:none}
  .toast{width:auto}
}
@media(prefers-reduced-motion:reduce){
  .tn-so.nay,.chuong.rung svg,.toast,.toast.ra{animation:none}
}
.tn-d{display:flex;gap:11px;align-items:center;padding:11px 0;text-decoration:none;
  color:inherit;border-top:1px solid var(--line)}
.tn-d:first-child{border-top:0;padding-top:0}
/* Lối nhắn cho đội ngũ ở Tin nhắn — học viên không có danh sách thành viên. */
.tn-doi-ngu{margin-top:12px}
.tn-d:hover{background:var(--bg)}
.tn-d.moi .p-who{font-weight:700}

/* ---------- CHUÔNG THÔNG BÁO --------------------------------------- */
.chuong svg{display:block}
.tb-icon{flex:none;width:36px;height:36px;border-radius:12px;background:var(--bg);
  display:grid;place-items:center;font-size:16px;line-height:1}
.tb-chu{font-size:14.5px;line-height:1.45}
.tb-chu b{font-weight:600}
.tb-d.moi .tb-chu{font-weight:600}
.tb-d.moi .tb-icon{background:var(--accent-soft)}
.tb-moi{color:var(--accent)}
/* Thông báo dẫn tới đúng chỗ bằng #neo: tô nền chỗ đó để mắt thấy ngay,
   và chừa khoảng trên để nó không dính sát mép màn hình. */
.cmt:target,.mod:target,.mem-d:target,.card:target{background:var(--accent-soft);
  scroll-margin-top:24px;transition:background .6s}
.tn-dau{display:flex;gap:12px;align-items:center;margin-bottom:12px}

/* Khung hội thoại: nền phẳng, KHÔNG viền thẻ. Bong bóng tự phân biệt được
   ai nói, thêm một cái khung bao quanh chỉ làm rối. */
.tn-khung{display:flex;flex-direction:column;gap:2px;padding:4px 2px 10px;
  max-height:min(56vh,460px);overflow-y:auto;scroll-behavior:smooth}
.tn-trong{text-align:center;color:var(--muted);font-size:13.5px;padding:40px 0;line-height:1.7}

.tn-hang{display:flex;align-items:flex-end;gap:7px;max-width:78%}
.tn-hang.ho{align-self:flex-start}
.tn-hang.toi{align-self:flex-end;flex-direction:row-reverse}
/* Chỗ trống giữ đúng bề ngang của avatar cho các tin GIỮA cụm, để mép bong
   bóng thẳng hàng thay vì so le. */
.tn-av{flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;
  background:var(--accent);margin-bottom:1px}
.tn-av:empty{background:none}

.tn-bong{padding:8px 13px;border-radius:17px;font-size:14.5px;line-height:1.45;
  word-break:break-word;white-space:pre-wrap}
.tn-hang.ho .tn-bong{background:var(--bg);border:1px solid var(--line);
  border-bottom-left-radius:17px}
/* Tin của mình: cam NHẠT chữ tối — trước là cam đậm chữ trắng, chói khi đọc
   một cuộc dài. Pha từ màu nhấn nên chế độ tối tự ra tông tương ứng. */
.tn-hang.toi .tn-bong{background:color-mix(in srgb,var(--accent) 35%,var(--panel));color:var(--ink)}
/* Đuôi nhọn CHỈ ở tin cuối mỗi cụm — đó là thứ làm cụm trông liền một khối. */
.tn-hang.cuoi.ho .tn-bong{border-bottom-left-radius:5px}
.tn-hang.cuoi.toi .tn-bong{border-bottom-right-radius:5px}
/* Tin vừa bấm gửi, máy chủ chưa xác nhận: nhạt đi một chút. */
.tn-hang.dang-gui{opacity:.6}
/* Dấu ⋯ của MỘT tin: chỉ hiện khi rê chuột vào đúng tin đó. Hiện thường trực
   thì mỗi bong bóng đeo thêm một dấu, cả khung chat đọc rối hẳn. */
.tn-menu{margin:0 0 2px;opacity:0;transition:opacity .12s}
.tn-hang:hover .tn-menu,.tn-menu[open],.tn-menu:focus-within{opacity:1}
@media(hover:none){.tn-menu{opacity:1}}
.tn-menu>summary{width:24px;height:24px;font-size:15px}
/* Khung chat cuộn được (overflow-y:auto) nên khung thả xuống bị mép dưới cắt
   cụt. Mở NGƯỢC LÊN TRÊN: chat luôn cuộn sẵn xuống đáy, mà tin mới nhất —
   thứ hay phải sửa hoặc thu hồi nhất — thì nằm sát mép dưới. */
.tn-menu .menu-o{top:auto;bottom:calc(100% + 6px);min-width:136px}
/* Tin CỦA MÌNH xếp ngược dòng (row-reverse) nên dấu ⋯ nằm bên TRÁI bong bóng;
   để khung thả xuống neo phải thì nó chạy ra ngoài mép trái màn hình. */
.tn-hang.toi .tn-menu .menu-o{right:auto;left:0}
/* Nhãn "đã sửa" nằm trong bong bóng nên lấy luôn màu chữ của bong bóng —
   dùng var(--muted) thì trên nền cam nhạt đọc không ra. */
.tn-daSua{font-size:11.5px;margin-left:7px;opacity:.6}
.tn-hang.dang-sua{max-width:min(92%,520px)}
.tn-sua-o{flex:1;min-width:0}
.tn-sua-o textarea{width:100%;font:inherit;font-size:14.5px;padding:9px 13px;
  border-radius:14px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);resize:vertical}
.tn-sua-o .crow{margin-top:7px;justify-content:flex-end}
/* Chỗ của ô soạn khi một trong hai bên đã chặn. */
.tn-chan{text-align:center;color:var(--muted);font-size:13.5px;line-height:1.6;
  border-top:1px solid var(--line);margin-top:10px;padding:13px 0 4px}
.tn-chan form{margin-top:9px}

.tn-gio{font-size:11px;color:var(--muted);margin:1px 0 9px;padding:0 4px}
.tn-gio.toi{align-self:flex-end}
.tn-gio.ho{align-self:flex-start;margin-left:33px}

/* Ô soạn dính đáy, bo tròn, nút gửi nằm trong — đúng dáng Messenger/Zalo. */
.tn-soan{display:flex;gap:8px;align-items:flex-end;position:sticky;bottom:0;
  background:var(--nen);padding:10px 0 4px}
.tn-soan textarea{flex:1;font:inherit;font-size:14.5px;line-height:1.45;
  padding:10px 15px;border:1px solid var(--line);border-radius:12px;resize:none;
  background:var(--panel);color:var(--ink);max-height:120px;overflow-y:auto}
.tn-soan textarea:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
.tn-gui{flex:0 0 auto;width:38px;height:38px;border-radius:12px;border:0;
  background:var(--accent);color:#fff;font-size:15px;cursor:pointer;
  display:grid;place-items:center;padding:0}
.tn-gui:hover{filter:brightness(1.1)}

/* ---------- THÀNH VIÊN (một người một DÒNG) ------------------------ */
/* Thẻ hai cột cũ cao gần 200px mỗi người: xem 10 người phải cuộn ba màn.
   Một dòng một người thì cả nhóm nhỏ nằm gọn trong một màn hình. */
.mem-ds{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;margin-top:14px}
/* Flex có xuống dòng, KHÔNG phải lưới 5 cột. Khung danh sách nằm trong .feed
   nên rộng tối đa 730px, mà góc nhìn quản trị có 3 nút -> một dòng cần ~900px.
   Lưới cũ không có chỗ để lùi, nên cột nút bị overflow:hidden của .mem-ds cắt
   mất — kể cả nút "Xóa". Flex thì hàng nút tự xuống dòng khi hết chỗ; học
   viên thường chỉ có một nút "Nhắn tin" nên vẫn nằm gọn MỘT dòng như cũ. */
.mem-d{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:13px 18px;
  border-top:1px solid var(--line)}
.mem-d>.av{flex:none}
/* Ô tìm ẩn dòng bằng thuộc tính hidden — nhưng .mem-d tự đặt display:flex (và grid trên
   điện thoại) nên đè mất [hidden] của trình duyệt; phải ẩn lại ở đây. Dòng
   HIỆN đầu tiên bỏ vạch trên — :first-child có thể là một dòng đang ẩn. */
.mem-d[hidden],#tv-trong[hidden]{display:none}
.mem-d:nth-child(1 of .mem-d:not([hidden])){border-top:0}
.mem-d:hover{background:var(--bg)}
.av.lon{width:40px;height:40px;font-size:13px;position:relative;background:var(--accent-soft);
  color:var(--accent)}
.lvl-nho{position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:9.5px;font-weight:700;font-style:normal;
  display:grid;place-items:center;border:2px solid var(--panel)}
.mem-ten{flex:1.5 1 170px;min-width:0}
.mem-ten .p-bio{margin:3px 0 0;font-size:12.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mem-tt{flex:1 1 130px;font-size:12.5px;color:var(--muted);min-width:0}
.mem-tt em{display:block;font-style:normal;margin-top:2px}
.mem-so{display:flex;gap:14px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.mem-so b{color:var(--ink);font-weight:600}
.mem-nut{display:flex;flex-wrap:wrap;gap:6px;align-items:center;white-space:nowrap;
  margin-left:auto}
/* minmax(0,1fr), không phải 1fr: 1fr không co dưới bề rộng chữ dài nhất (dòng
   "Quyền từ .env..." không xuống dòng), nên cả cột 2 phình ra và bị cắt mép phải. */
@media(max-width:900px){
  .mem-d{display:grid;grid-template-columns:44px minmax(0,1fr);row-gap:8px}
  .mem-tt,.mem-so,.mem-nut{grid-column:2}
  .mem-nut{margin-left:0}
}


.dem-hang{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dem{display:flex;flex-direction:column;gap:1px;padding:7px 14px;border-radius:12px;
     text-decoration:none;color:inherit;border:1px solid transparent}
.dem:hover{background:var(--bg)}
.dem.on{background:var(--accent-soft);border-color:var(--accent)}
.dem b{font-size:17px;line-height:1.1}
.dem span{font-size:12px;color:var(--muted)}
.mem-tim{margin-left:auto;flex:1 1 200px;min-width:0}
.mem-tim input{width:100%;padding:8px 11px;border:1px solid var(--line);
               border-radius:12px;font:inherit;font-size:13px}
.p-tay{font-size:12px;color:var(--muted);margin-top:1px}
.p-bio{font-size:13px;margin:5px 0 6px;line-height:1.45}
.on-cham,.off-cham{display:inline-block;width:7px;height:7px;border-radius:50%;
                   margin-right:5px;vertical-align:middle}
.on-cham{background:var(--ok)}
.off-cham{background:var(--lock);opacity:.5}

/* ---------- TRẠNG THÁI RỖNG ---------------------------------------- */
/* Không chiếm hết màn hình: nói thiếu gì và làm gì tiếp, rồi thôi. */
.trong{text-align:center;padding:32px 24px}
.trong-1{margin:0;font-size:16px;font-weight:600}
.trong-2{margin:6px auto 14px;font-size:13.5px;color:var(--muted);max-width:44ch;
line-height:1.6}

/* ---------- BÀN PHÍM: viền focus thấy được ------------------------- */
/* Thiếu cái này thì người dùng bàn phím (và trình đọc màn hình) không biết
   con trỏ đang ở đâu — trình duyệt có viền mặc định nhưng nó chìm trên nền
   sáng và biến mất hẳn ở các nút đã đặt lại nền. */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible{
outline:2px solid var(--accent);outline-offset:2px;border-radius:12px}
.chip:focus-visible,.act:focus-visible{outline-offset:1px}

/* ---------- MENU BA CHẤM ------------------------------------------- */
.menu{position:relative;margin-left:auto}
.menu>summary{list-style:none;cursor:pointer;width:28px;height:28px;border-radius:12px;
  display:grid;place-items:center;font-size:17px;line-height:1;color:var(--muted);
  user-select:none}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary:hover{background:var(--bg);color:var(--ink)}
.menu[open]>summary{background:var(--bg);color:var(--ink)}
.menu-o{position:absolute;right:0;top:32px;z-index:30;min-width:158px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);padding:5px;display:flex;flex-direction:column}
.menu-o a,.menu-o button{display:block;width:100%;text-align:left;font:inherit;
  font-size:13.5px;padding:8px 11px;border:0;border-radius:12px;background:none;
  color:var(--ink);cursor:pointer}
.menu-o a:hover,.menu-o button:hover{background:var(--bg)}
.menu-o .nguy{color:var(--accent)}
.menu-o form{margin:0}

/* ---------- BỐ CỤC HAI CỘT (theo preview đã duyệt) ------------------ */
.hai-cot{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start}
.cot-chinh{min-width:0}
.cot-chinh .feed{max-width:none;margin:0}
@media(max-width:900px){
  .hai-cot{grid-template-columns:1fr}
  /* Trên màn hẹp thẻ cộng đồng xuống DƯỚI feed.
     Ban đầu tôi để nó lên trên với lý lẽ "người mới cần biết đây là chỗ gì".
     Sai đối tượng: trang này là nơi THÀNH VIÊN vào mỗi ngày, và họ vào để
     đọc bài. Người mới lần đầu thì vào trang Giới thiệu, không vào đây. */
  .ben-phai{order:2;position:static}
}
.ben-phai{position:sticky;top:14px}
.bp-nhan{margin:0 0 8px;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.bp{overflow:hidden;padding:0}
.bp-bia{height:112px;display:grid;place-items:center;padding:14px;text-align:center;
  background:linear-gradient(135deg,var(--bia,#f0b429),color-mix(in srgb,var(--bia,#f0b429) 62%,#000))}
.bp-bia span{color:#fff;font-weight:800;font-size:14px;line-height:1.3;
  text-shadow:0 1px 3px rgba(0,0,0,.35)}
.bp-than{padding:15px 16px 16px}
.bp-than h3{margin:0;font-size:16px;line-height:1.3}
.bp-phu{margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.bp-so{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:13px 0}
.bp-so div{flex:1;text-align:center;padding:9px 0}
.bp-so b{display:block;font-size:17px;font-variant-numeric:tabular-nums}
.bp-so span{font-size:11px;color:var(--muted)}
.bp-nut{display:block;text-align:center;background:var(--vang);color:var(--tren-vang);
  border-radius:12px;padding:11px;font-size:15px;font-weight:700}
.bp-nut:hover{background:var(--vang-dam)}
.bp-avs{display:flex;padding:0 16px 14px}
.av{position:relative;width:28px;height:28px;border-radius:50%;background:#d9d5cc;
  color:#5a564d;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
/* position:relative KHÔNG được bỏ. Huy hiệu cấp bên trong dùng
   position:absolute; thiếu mốc định vị ở đây thì nó nhảy ra phần tử có định
   vị gần nhất — tức là cả trang — và 55 huy hiệu dồn hết vào mép phải màn
   hình, kéo theo 3px tràn ngang. */
.bp-avs .av{margin-right:-7px;border:2px solid var(--panel)}
.bp-avs .av.them{background:var(--line);color:var(--muted)}

/* Ô tìm trên thanh trên cùng, như preview. */
.tim{flex:1 1 220px;max-width:460px;position:relative;margin:0}
.tim input{width:100%;font:inherit;font-size:13.5px;padding:8px 12px 8px 32px;
  border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.tim input:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
.tim span{position:absolute;left:11px;top:7px;color:var(--muted);font-size:15px}
.brand{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none}
.brand img{width:38px;height:38px;border-radius:50%;flex:none;display:block}
@media(max-width:620px){.tim{order:3;flex-basis:100%;max-width:none}}

/* ---------- BẢNG ĐIỀU KHIỂN ---------------------------------------- */
.bdk-dau{display:flex;gap:14px;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:18px}
.bdk-ten p{margin:0;font-size:14px;font-weight:600}

/* Bộ lọc kỳ nằm MỘT HÀNG ngay trên số liệu — đọc số mà không thấy nó thuộc
   khoảng thời gian nào thì con số vô nghĩa. */
.bdk-chips{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.bdk-chip{font-size:13px;padding:6px 13px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel);color:var(--muted)}
.bdk-chip:hover{border-color:var(--muted);color:var(--ink)}
.bdk-chip.on{background:var(--ink);border-color:var(--ink);color:var(--panel);font-weight:600}
.bdk-tuychon{display:flex;gap:5px;align-items:center;margin-left:4px;
  padding:3px 4px 3px 8px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel)}
.bdk-tuychon.on{border-color:var(--ink)}
.bdk-tuychon input{font:inherit;font-size:12.5px;border:0;background:none;
  color:var(--ink);padding:2px;width:112px}
.bdk-tuychon input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:4px}
.bdk-tuychon span{color:var(--muted);font-size:12px}
.bdk-tuychon button{font:inherit;font-size:12.5px;font-weight:600;border:0;cursor:pointer;
  background:var(--ink);color:var(--panel);border-radius:12px;padding:5px 12px}

/* Ô chỉ số: NHÃN trước, số sau. Đọc theo thứ tự "cái gì — bao nhiêu", chứ
   không phải thấy một con số trần rồi mới đi tìm nó là gì. */
.bdk-luoi{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.bdk-o{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px 15px;display:flex;flex-direction:column;gap:1px}
.bdk-o>span{font-size:12px;color:var(--muted);letter-spacing:.01em}
.bdk-o>b{font-size:26px;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.bdk-o>em{font-size:11.5px;color:var(--muted);font-style:normal;margin-top:1px}
.bdk-o.tong>b{font-size:22px;font-weight:600}

/* Mũi tên so với kỳ trước. Màu KHÔNG phải thứ duy nhất phân biệt — có dấu
   + / − và ký hiệu ▲ ▼ đi kèm, để người không phân biệt được màu vẫn đọc ra. */
.bdk-d{font-style:normal;font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums;margin-top:2px}
.bdk-d.len::before{content:"▲ "}
.bdk-d.xuong::before{content:"▼ "}
.bdk-d.bang::before{content:"= "}
.bdk-d.len{color:var(--ok)}
.bdk-d.xuong{color:var(--accent)}
.bdk-d.bang,.bdk-d.moi{color:var(--muted);font-weight:500}

.bdk-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.05em;
  text-transform:uppercase;margin:26px 0 10px}
.bdk-h span,.bdk-h a{font-size:12px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--muted)}
.bdk-h a{color:var(--accent);margin-left:auto}

/* Biểu đồ: không bọc trong thẻ có viền — viền quanh viền làm rối, và lưới
   bên trong đã đủ tách nó khỏi phần xung quanh. */
.bdk-do{margin:22px 0 0;padding:0}
.bdk-do figcaption{font-size:13px;font-weight:600;margin-bottom:8px}
.bdk-do figcaption span{display:block;font-weight:400;font-size:12px;
  color:var(--muted);margin-top:1px}
.bdk-do svg{width:100%;height:auto;display:block;overflow:visible}
.bdk-do path{transition:opacity .12s}
.bdk-do svg:hover path{opacity:.45}
.bdk-do svg path:hover{opacity:1}

/* ---------- QUẢN TRỊ NẰM TRONG TRANG (không còn tab riêng) ---------- */
/* .kh.kh-them, KHÔNG phải .kh-them: khối .kh của lưới lớp học khai báo SAU và
   đặt display:block, nên lớp đơn bị đè — chữ nằm trên đỉnh thẻ thay vì ở giữa. */
.kh.kh-them{display:grid;place-items:center;min-height:190px;text-align:center;
  border-style:dashed;border-width:2px;color:var(--muted)}
.kh-them:hover{border-color:var(--accent);color:var(--accent)}
.kh-them span{display:block;font-size:30px;line-height:1;margin-bottom:6px}
/* Khối quản trị phải TRÔNG KHÁC phần nội dung, nếu không người quản trị
   nhầm nó là thứ học viên cũng nhìn thấy. */
.qt-khoi{border-style:dashed;background:var(--bg)}
.qt-khoi select{flex:1 1 220px;min-width:0;max-width:100%;font:inherit;font-size:14px;
  padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink)}
.qt-phan{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
/* ---------- KÉO THẢ ĐỔI THỨ TỰ ------------------------------------- */
/* Tay cầm chỉ hiện khi JS đã gắn xong (.keo-duoc) và chỉ trên máy có chuột:
   kéo thả HTML5 không chạy trên điện thoại, ở đó vẫn phải là hai nút ↑↓. */
.keo{display:none}
.keo-duoc .keo{display:inline-block;cursor:grab;color:var(--muted);
  padding:0 6px;font-size:15px;line-height:1;user-select:none}
.keo-duoc .keo:active{cursor:grabbing}
/* Bật kéo thả thì ↑↓ ẩn đi — nhưng ẩn kiểu VẪN TAB TỚI ĐƯỢC rồi hiện lại khi
   có focus. display:none là cắt luôn đường của người dùng bàn phím, những
   người không kéo thả được. */
.keo-duoc .doi-cho{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.keo-duoc .doi-cho:focus-within{position:static;width:auto;height:auto;
  clip:auto;white-space:normal}
.qt-ds>[data-hang].dang-keo{opacity:.4}
.qt-ds.dang-luu{opacity:.55;pointer-events:none}

/* ---------- BẢNG XẾP HẠNG (bố cục theo WIPA) ----------------------- */
.bxh-the{display:grid;grid-template-columns:226px minmax(0,1fr);gap:26px;align-items:start}
@media(max-width:820px){.bxh-the{grid-template-columns:1fr}}

.bxh-toi{text-align:center;padding:4px 0}
.av.khong-lo{width:108px;height:108px;font-size:31px;margin:0 auto 12px;position:relative;
  background:var(--accent-soft);color:var(--accent)}
.lvl-nho.lon{width:32px;height:32px;font-size:14px;right:2px;bottom:2px;border-width:3px}
.bxh-toi-ten{font-size:18px;font-weight:700;letter-spacing:-.01em}
.bxh-toi-cap{font-size:13.5px;color:var(--accent);font-weight:600;margin-top:3px}
.bxh-toi-con{font-size:13px;color:var(--muted);margin-top:7px}
.bxh-toi-con b{color:var(--ink)}
.bxh-toi-con a{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;
  border:1px solid var(--line);font-size:10px;color:var(--muted);margin-left:3px;
  vertical-align:middle;text-decoration:none}

/* Thang cấp chia HAI cột — 9 cấp xếp dọc một cột làm thẻ cao gấp đôi. */
.bxh-thang{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
@media(max-width:640px){.bxh-thang{grid-template-columns:1fr}}
.cap-d{display:flex;gap:11px;align-items:flex-start;padding:9px 0}
.cap-d.toi{background:var(--accent-soft);margin:0 -10px;padding-left:10px;
  padding-right:10px;border-radius:12px}
.cap-hieu{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;
  place-items:center;font-size:12px;font-weight:700;background:var(--bg);
  border:1px solid var(--line);color:var(--muted)}
.cap-hieu.dat{background:var(--accent);border-color:var(--accent);color:#fff}
.cap-chu{min-width:0;padding-top:1px}
.cap-ten{font-size:13.5px;font-weight:600;line-height:1.35}
.cap-mo{font-size:12px;color:var(--muted);margin-top:1px;line-height:1.4}
.cap-mo b{color:var(--accent);font-weight:600}
.cap-pct{font-size:12px;color:var(--muted);margin-top:1px}

.bxh-chan{font-size:12.5px;color:var(--muted);font-style:italic;margin:14px 0 0}

/* ĐÚNG ba cột: auto-fit tự bẻ cột thứ ba xuống dòng khi trang chỉ rộng
   730px, làm bảng "mọi thời điểm" nằm lẻ loi một mình bên dưới. */
.bxh-luoi{display:grid;gap:18px;margin-top:16px;
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.bxh-luoi{grid-template-columns:1fr}}
.bxh-cot h2{font-size:15px;margin:0 0 4px;padding-bottom:10px;
  border-bottom:1px solid var(--line)}
.bxh-d{display:grid;grid-template-columns:28px 30px minmax(0,1fr) auto;gap:10px;
  align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.bxh-d:first-of-type{border-top:0}
.bxh-d.toi{background:var(--accent-soft);margin:0 -10px;padding-left:10px;
  padding-right:10px;border-radius:12px}
.bxh-ten{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
/* HẠNG: chỉ ba người đầu đeo HUY CHƯƠNG (vòng kim loại + dải ruy băng dưới
   chân), từ hạng 4 trở đi chỉ còn con số trần. Trước đây ai cũng đeo một vòng
   tròn xám như nhau nên nhìn lướt không ra ai đứng đầu.

   Ruy băng vẽ bằng ::before với z-index:-1 nên nằm SAU nền của chính vòng
   tròn — phần bị vòng tròn che thì khuất, phần thò ra dưới chân thì thấy.
   Không đặt z-index lên .rank, vì làm vậy là tạo tầng xếp mới và ruy băng sẽ
   bị chính nó che mất. */
.rank{width:27px;height:35px;padding-bottom:8px;display:grid;place-items:center;
  font-size:13px;font-weight:600;color:var(--muted)}
/* Hình huy chương (vòng tròn + hai dải ruy băng) cắt bằng mask từ một SVG
   nhỏ nằm ngay trong CSS. Thử vẽ ruy băng bằng ::before z-index:-1 thì nó
   chui ra sau nền của cả thẻ .card và mất tăm; còn vẽ đè lên thì thành hình
   quả trứng. Mask cắt đúng một mảnh, màu vẫn là var(--huy) nên đổi màu chỉ
   phải sửa một chỗ. */
.rank.h1,.rank.h2,.rank.h3{font-weight:700;font-size:12.5px;color:#fff;
  background:var(--huy);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 31'><path d='M6 13 L2 30 L12 25 L22 30 L18 13 Z'/><circle cx='12' cy='12' r='12'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 31'><path d='M6 13 L2 30 L12 25 L22 30 L18 13 Z'/><circle cx='12' cy='12' r='12'/></svg>") center/contain no-repeat}
.rank.h1{--huy:#e3a81f}
.rank.h2{--huy:#a8b0b8}
.rank.h3{--huy:#bf8150}
.bxh-cot .av{width:30px;height:30px;font-size:11px}
/* Dòng trống để ba bảng bằng số dòng: nhạt đi, không tranh chú ý với dòng thật. */
.bxh-trong{opacity:.35}
.bxh-trong .av{background:var(--line)}

/* ---------- LƯỚI LỚP HỌC (giống Classroom của Skool) ---------------- */
/* Rộng hơn bảng tin (.feed 730px) cho đủ 3 cột như Skool; màn hẹp thì 2 rồi 1. */
.kh-trang{max-width:1080px;margin:0 auto}
.kh-luoi{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.kh-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.kh-luoi{grid-template-columns:minmax(0,1fr)}}
.kh{display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;
    overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s}
a.kh:hover{box-shadow:0 6px 20px rgba(0,0,0,.10);transform:translateY(-2px)}
/* Khóa chưa mở: làm nhạt đi để nhìn phát biết, nhưng vẫn đọc được chữ. */
.kh.dong{opacity:.72}
.kh-bia{aspect-ratio:16/9;background:var(--bia,#6b7280) center/cover no-repeat;
        display:flex;align-items:center;justify-content:center;padding:14px;text-align:center}
/* Có ảnh thì phủ một lớp tối mỏng: ảnh nào cũng có thể sáng trắng đúng chỗ
   chữ, mà chữ tên khóa thì luôn màu trắng. */
.kh-bia.co-anh,.mau-xem.co-anh{box-shadow:inset 0 0 0 100vmax rgba(0,0,0,.30)}
/* Bìa TỰ VẼ cho khóa chưa tải ảnh: nền màu khóa chuyển đậm dần, lưới chấm,
   huy hiệu doanh nghiệp (111, PHT…) cỡ lớn chỉ vẽ nét, tên khóa. --chu do máy
   chủ chọn: nền sáng thì chữ tối, còn lại chữ trắng. Trình duyệt cũ không hiểu
   cqw / color-mix thì bỏ qua các dòng đó và rơi về nền màu trơn như trước. */
.kh-bia.tu-ve{position:relative;display:block;padding:0;overflow:hidden;container-type:inline-size;
  text-align:left;color:var(--chu,#fff);
  background:
    radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--chu,#fff) 16%,transparent) 1px,transparent 1.6px) 0 0/14px 14px,
    linear-gradient(140deg,color-mix(in srgb,var(--bia) 82%,#fff) 0%,var(--bia) 48%,color-mix(in srgb,var(--bia) 72%,#000) 100%)}
.bia-so{position:absolute;right:-4cqw;bottom:-11cqw;font-size:46cqw;font-weight:700;line-height:1;
  letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--chu,#fff) 26%,transparent);
  user-select:none;pointer-events:none}
.bia-tren{position:absolute;left:6cqw;right:6cqw;top:6cqw;display:flex;justify-content:space-between;
  align-items:center;gap:8px;font-size:clamp(9px,3.1cqw,12px);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;opacity:.82}
.bia-tren>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bia-bai{flex:none;letter-spacing:.04em;text-transform:none;font-weight:600;padding:3px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--chu,#fff) 16%,transparent)}
/* Có ảnh thì ảnh thắng bìa vẽ: trả kích thước nền về cover (lớp lưới chấm của
   .tu-ve đặt 14px, ảnh sẽ bị lát thành ô nhỏ) và ẩn chữ vẽ. Khung Xem trước thẻ
   đổi qua lại hai kiểu ngay khi tải / gỡ ảnh. */
.kh-bia.tu-ve.co-anh{background-size:cover;background-position:center;background-repeat:no-repeat}
.kh-bia.tu-ve.co-anh>*{display:none}
/* padding-top chừa chỗ cho dấu tiếng Việt chồng trên chữ hoa (Ể, Ố): khung
   cắt overflow mà sát quá là mất dấu ở dòng đầu. */
.bia-ten{position:absolute;left:6cqw;right:30cqw;bottom:6cqw;margin:0;font-size:clamp(15px,6.6cqw,26px);
  line-height:1.2;padding-top:.14em;font-weight:700;letter-spacing:-.01em;text-wrap:balance;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.kh-than{padding:12px 14px 14px}
.kh-ten{font-weight:700;font-size:15px;line-height:1.35}
.kh-phu{font-size:13px;color:var(--muted);margin:3px 0 10px;line-height:1.4}
.kh-chan{display:flex;justify-content:space-between;align-items:center;
         margin-top:8px;font-size:12px;color:var(--muted)}
.kh-khoa{font-weight:600}
/* Form khóa học: ô màu gợi ý + bảng màu tự chọn + xem trước đúng dáng thẻ. */
.mau-chon{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 10px}
.mau-o{width:30px;height:30px;border-radius:12px;border:2px solid var(--panel);padding:0;
  box-shadow:0 0 0 1px var(--line);cursor:pointer}
.mau-o.on{box-shadow:0 0 0 2px var(--ink)}
.mau-tu{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer}
.compose .mau-tu input{width:34px;height:30px;margin:0;padding:0;border-radius:12px;cursor:pointer}
.mau-xem{width:280px;max-width:100%;aspect-ratio:16/9;border-radius:12px;display:grid;
  place-items:center;padding:12px;margin:4px 0 12px;text-align:center;
  background:var(--bia) center/cover no-repeat}
/* Hàng nút tải ảnh. Cả khối ẩn khi không có JS: thu nhỏ ảnh và mã hóa đều
   làm ở trình duyệt, không có JS thì không gửi được gì. */
.anh-hang{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:4px 0 10px}
.anh-hang .p-meta{margin:0}
/* Ô chọn luật rộng hết khung như các ô nhập khác; để mặc định (inline) thì
   nhãn "Màu nền thẻ" bên dưới bị kéo lên đứng cạnh nó. */
.kh-form select{display:block;width:100%;padding:10px 12px;margin-bottom:8px}

.kh-them-tuy{margin:4px 0 12px;border-top:1px solid var(--line);padding-top:10px}
.kh-them-tuy summary{cursor:pointer;margin-bottom:8px}

/* --nen la nen TRANG; --bg la nen CHIM (hover, o nhap, khoi quan tri). Tach
   hai bien vi trang da trang tinh: dung chung mot bien thi moi hieu ung hover
   va o nhap thanh trang-tren-trang, nhin nhu mat han. */
:root{--nen:#fbf9f5;--bg:#f4f0ea;--panel:#fff;--ink:#111111;--muted:#5f6368;--line:#e8e2d8;
/* Mau nhan (link, chu nhan, o dang chon): hong dat DAM #9a5d4e (tong voi con duong
   trong logo), dat ~5:1 tren nen nga. Hong dat goc #d8b6ad lam chu thi doc khong noi. */
--accent:#9a5d4e;--accent-soft:#f6e9e3;--ok:#2f7d4f;--lock:#9a9691;
/* Do cua huy hieu chua doc (mau Facebook). Chu trang tren nen nay dat 4,6:1. */
--do:#e41e3f;
/* Nut chinh, tab dang chon, nut ten minh: xanh la tram #36594c cua logo Duong Ve Nha
   (9/10/2026; truoc la xanh la chanh 1-1-1, truoc nua vang WIPA). Chu tren nen nay
   dung --tren-vang (nga, ~7:1). Ten bien van la --vang cho khoi sua ca tram cho. */
--vang:#36594c;--vang-dam:#2a473b;--tren-vang:#faf7f2;
/* O luoi mo tren nen nga. */
--o-nen:#f1ece4;
/* Mau chu tab CHUA chon. Skool dung #909090, nhung tren nen trang no chi dat
   do tuong phan 3,2:1 -- duoi muc 4,5:1 de doc chu nho. Nang len #6b7280 cung
   mau chu phu (4,8:1). Tach bien rieng vi che toi can gia tri khac. */
--tab-mo:#5f6368;
/* Ban do: bien, dat lien, vien, luoi toa do. */
--bien:#eaf1f6;--dat:#dfe8dc;--vien-dat:#9fb39a;--luoi:#c9d6de}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
--nen:#14130f;--bg:#14130f;--panel:#1c1b17;--ink:#f0ece4;--muted:#a09b91;--line:#2f2d27;
--accent:#e3b3a2;--accent-soft:#2b1e1a;--ok:#6fbf8c;--lock:#6b675f;
--vang:#d9b48c;--vang-dam:#e8c9a4;--tren-vang:#1a1712;--tab-mo:#8b867d;--o-nen:#1b1c18;
--bien:#10181f;--dat:#1e2a20;--vien-dat:#3c5241;--luoi:#243038}}
*{box-sizing:border-box}
/* Be Vietnam Pro: kiểu chữ dựng riêng cho tiếng Việt — dấu mũ, dấu móc và
   dấu thanh không chồng lên nhau ở cỡ nhỏ như phần lớn font Latin. Tải hỏng
   thì rơi về Segoe UI, vẫn đọc được tiếng Việt tử tế. */
body{margin:0;background:var(--nen);color:var(--ink);
/* Lưới ô 80px thật mờ — cùng chất với trang bán hàng 1-1-1. Thẻ, bài viết đều
   nền trắng đè lên nên chữ không bao giờ nằm trên nét lưới. */
background-image:linear-gradient(var(--o-nen) 1px,transparent 1px),
  linear-gradient(90deg,var(--o-nen) 1px,transparent 1px);
background-size:80px 80px;
font:15.5px/1.65 "Be Vietnam Pro","Segoe UI",-apple-system,BlinkMacSystemFont,
system-ui,sans-serif;-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility}
h1{font-size:25px;line-height:1.25;letter-spacing:-.02em;font-weight:700}
h2{font-size:18px;line-height:1.3;letter-spacing:-.01em;font-weight:600}
h3{font-size:16px;line-height:1.35;font-weight:600}
/* Số liệu xếp cột phải thẳng hàng — chữ số đẳng chiều rộng. */
b,strong,.pts,.rank{font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
/* Rộng 1400 thay vì 1180: ở màn hình 1080p trở lên, 1180 để lại hai dải
   trống rất lớn hai bên mà nội dung thì bị nén. */
.wrap{max-width:1400px;margin:0 auto;padding-block:18px;padding-left:24px;padding-right:24px}
@media(max-width:700px){.wrap{padding-left:16px;padding-right:16px}}
.top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:22px}
.brand{font-weight:700;letter-spacing:.1em;font-size:15px;text-transform:uppercase}
/* Phần số đầu tên (1-1-1) tô xanh thương hiệu — logo được miễn luật tương phản. */
.brand b{color:var(--vang-dam);font-weight:700}
.who{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  position:relative}
/* Cụm góc phải (thư · tên · đăng xuất): 13px lọt thỏm cạnh logo 17px và thanh
   tab 16px. Phải viết .who .tab / .who .tn-nut: .tab khai báo SAU .tn-nut nên
   đè mất cỡ 16px của biểu tượng thư, làm nó bé hơn cả chữ bên cạnh. */
.who .tab,.who .act{font-size:15px}
.who .tn-nut{font-size:20px;line-height:1;color:var(--accent)}
/* Tên người dùng thành thẻ vàng cùng màu logo: nhìn là biết đang đăng nhập bằng
   ai. Chữ tối trên nền vàng, như --vang đã dặn. "Đăng xuất" cố ý giữ xám —
   nút phụ, tô màu thì mắt bị kéo về nó trước. */
.who .ten-toi{background:var(--vang);color:var(--tren-vang);font-weight:600}
.who .ten-toi:hover{background:var(--vang-dam)}
/* Huy hiệu "Đơn chờ" của admin: nền nhấn nhạt, khác hẳn thẻ tên vàng. */
.who .don-cho{background:var(--accent-soft);color:var(--accent);font-weight:600}
.who .don-cho b{font-variant-numeric:tabular-nums;margin-left:2px}
.who .don-cho:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.who select{font:inherit;font-size:13px;padding:4px 8px;border-radius:12px;
border:1px solid var(--line);background:var(--panel);color:var(--ink);max-width:100%}
.grid{display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:start}
/* Mobile: NỘI DUNG lên trước, mục lục xuống dưới. Chỉ đổi số cột là chưa đủ —
   mục lục 45 bài sẽ đẩy video xuống dưới 5 màn hình. */
@media(max-width:860px){
.grid{grid-template-columns:1fr;gap:16px}
.outline{order:2}
.col-main{order:1}
}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
h1{font-size:24px;line-height:1.25;margin:0 0 6px;letter-spacing:-.02em}
h2{font-size:15px;margin:0 0 10px;letter-spacing:-.01em}
.sub{color:var(--muted);margin:0 0 18px}
.mod{margin-bottom:18px}
.mod-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
font-weight:650;font-size:13px;text-transform:uppercase;letter-spacing:.06em;
color:var(--muted);margin-bottom:8px}
.les{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:12px;
border:1px solid transparent;margin-bottom:3px}
.les:hover{background:var(--accent-soft)}
.les.cur{background:var(--accent-soft);border-color:var(--accent)}
.les.lock{opacity:.55}
.les.lock:hover{background:transparent}
.dot{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);
margin-top:2px;display:grid;place-items:center;font-size:10px;color:#fff}
.dot.done{background:var(--ok);border-color:var(--ok)}
.dot.lk{border-style:dashed}
.les-t{flex:1;min-width:0}
.les-n{font-size:14px}
.les-m{font-size:12px;color:var(--muted);margin-top:1px}
.pill{display:inline-block;font-size:11px;padding:1px 7px;border-radius:12px;
background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);
vertical-align:middle;margin-left:5px}
.bar{height:6px;background:var(--line);border-radius:99px;overflow:hidden;margin:10px 0 4px}
.bar>i{display:block;height:100%;background:var(--ok);transition:width .3s}
.stat{font-size:12px;color:var(--muted)}
.player{position:relative;aspect-ratio:16/9;max-width:100%;background:#000;
border-radius:12px;overflow:hidden}
.player iframe{width:100%;height:100%;border:0;display:block}
/* đặt trên thanh điều khiển YouTube (~40px) để không đè lên nút của họ */
.mark{position:absolute;right:10px;bottom:48px;z-index:5;pointer-events:none;
font-size:11px;color:#fff;opacity:.35;text-shadow:0 1px 3px rgba(0,0,0,.9);
padding:3px 8px;border-radius:6px}
.locked-box{aspect-ratio:16/9;display:grid;place-items:center;text-align:center;
background:var(--panel);border:1px dashed var(--line);border-radius:12px;padding:20px}
.btn{display:inline-block;font:inherit;font-size:14px;padding:9px 16px;border-radius:12px;
border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.btn.pri{background:var(--vang);border-color:var(--vang);color:var(--tren-vang);font-weight:700}
.btn.pri:hover{background:var(--vang-dam);border-color:var(--vang-dam)}
/* Nút "Đánh dấu hoàn thành": vàng khi chưa xong, xanh lá khi đã xong. */
.btn.xong{background:var(--ok);border-color:var(--ok);color:#fff;font-weight:600}
.nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px;flex-wrap:wrap}
/* mô tả phụ dưới video — thứ cấp */
.body-md{color:var(--muted);margin-top:14px;font-size:14px}
/* nội dung CHÍNH của bài đọc — không dùng chung style với mô tả phụ */
.lesson-body{color:var(--ink);margin-top:16px;font-size:16px;line-height:1.7}
.body-md>:first-child,.lesson-body>:first-child{margin-top:0}
.body-md>:last-child,.lesson-body>:last-child{margin-bottom:0}
.body-md p,.lesson-body p{margin:0 0 12px}
.lesson-body h2{font-size:19px;margin:24px 0 8px;letter-spacing:-.01em}
.lesson-body h3{font-size:16px;margin:20px 0 6px}
.lesson-body h4{font-size:15px;margin:16px 0 6px}
.body-md ul,.body-md ol,.lesson-body ul,.lesson-body ol{margin:0 0 12px;padding-left:22px}
.body-md li,.lesson-body li{margin-bottom:5px}
.body-md a,.lesson-body a{color:var(--accent);text-decoration:underline}
.body-md code,.lesson-body code{background:var(--accent-soft);color:var(--accent);
padding:1px 5px;border-radius:5px;font-size:.9em}
/* mục lục: gập được trên mobile, luôn mở + không bấm được trên desktop */
.outline>summary{list-style:none;cursor:pointer;display:flex;gap:8px;
justify-content:space-between;align-items:center;font-weight:650;font-size:15px}
.outline>summary::-webkit-details-marker{display:none}
.outline>summary::after{content:'▾';color:var(--muted);font-size:12px}
.outline[open]>summary::after{content:'▴'}
@media(min-width:861px){.outline>summary{cursor:default;pointer-events:none}
.outline>summary::after{display:none}}
.note{font-size:12px;color:var(--muted);margin-top:22px;padding-top:14px;
border-top:1px solid var(--line)}
/* ----------------------------------------------------------- cộng đồng */
.tab{font-size:13px;padding:6px 12px;border-radius:12px;color:var(--muted)}
.tab:hover{background:var(--accent-soft)}
.tab.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.feed{max-width:730px;margin:0 auto}
/* Bảng xếp hạng cần chỗ cho BA cột cạnh nhau; 730px chỉ đủ hai, cột thứ ba
   rơi xuống dòng dưới. */
.feed-rong{max-width:1120px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
/* Khối lọc có nền + nhãn riêng để KHÔNG bị đọc nhầm thành thanh tab thứ hai */
.loc{background:var(--panel);border:1px solid var(--line);border-radius:12px;
padding:12px 14px;margin-bottom:16px}
.chip{font-size:13px;padding:5px 12px;border-radius:12px;border:1px solid var(--line);
background:var(--panel);color:var(--muted)}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.post{background:var(--panel);border:1px solid var(--line);border-radius:12px;
padding:14px 18px 12px;margin-bottom:16px;transition:border-color .12s}
.post:hover{border-color:#cfcabf}
.p-head{display:flex;gap:10px;align-items:center;margin-bottom:8px}
/* Avatar đầu bài chỉ 28px: huy hiệu 17px mặc định che mất chữ cái thứ hai của
   tên viết tắt ("QT" chỉ còn "Q"). Thu nhỏ và đẩy ra góc ngoài. */
.p-head .lvl-nho{width:14px;height:14px;font-size:8.5px;right:-5px;bottom:-5px;
border-width:1.5px}
.p-ai{min-width:0;line-height:1.3}
/* Chủ đề bấm được để lọc — trước đây nó chỉ là chữ, người ta bấm vào
   không có gì xảy ra nên tưởng hỏng. */
.p-cat{color:var(--accent);font-weight:500}
.p-cat:hover{text-decoration:underline}
.lvl{flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);
color:var(--accent);border:1px solid var(--accent);display:grid;place-items:center;
font-size:12px;font-weight:700}
.p-who{font-size:13px;font-weight:600}
.p-meta{font-size:12px;color:var(--muted)}
.p-pin{margin-left:auto;flex:none;font-size:11px;color:var(--accent);
border:1px solid var(--accent);border-radius:12px;padding:1px 8px}
/* Tiêu đề phải ÁP ĐẢO phần siêu dữ liệu: 18.5px/700 so với 12.5px của dòng
   thời gian · chủ đề. Trước đây 17px/650 cạnh 13px — hai dòng gần bằng nhau
   nên mắt không biết đọc cái nào trước. */
.p-title{display:block;font-size:18.5px;font-weight:700;line-height:1.35;
letter-spacing:-.015em;margin-bottom:4px}
.p-title:hover{color:var(--accent)}
.p-ex{font-size:14px;color:var(--muted);line-height:1.55;margin:0 0 10px}
/* Hàng tương tác: KHÔNG còn chìm ở đáy thẻ. Nút thích và bình luận có nền
   riêng nên nhìn ra ngay là bấm được, thay vì trông như chữ mô tả. */
.p-foot{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted);
border-top:1px solid var(--line);padding-top:8px;margin-top:2px;flex-wrap:wrap}
.p-foot>span:not([class]){margin-left:4px;font-size:12.5px}
.act{display:inline-flex;gap:6px;align-items:center;font:inherit;font-size:13px;
padding:6px 11px;border-radius:12px;transition:background .12s,color .12s;
background:none;border:0;padding:4px 8px;border-radius:12px;color:var(--muted);cursor:pointer}
.act:hover{background:var(--accent-soft);color:var(--accent)}
.act.on{color:var(--accent);font-weight:600}
.cmt{display:flex;gap:10px;padding:13px 0;border-top:1px solid var(--line)}
.cmt-b{flex:1;min-width:0}
.compose{padding:14px 16px}
.soan-dau{display:flex;gap:11px;align-items:center;margin-bottom:9px}
.soan-dau .av{flex:none}
.soan-dau input{margin:0;font-size:15.5px!important;font-weight:500}
/* Chủ đề + nút Đăng bài nằm góc phải dưới ô viết, như cũ khi còn dòng gợi ý
   cú pháp bên trái. */
.soan-chan{display:flex;gap:12px;align-items:center;justify-content:flex-end;
flex-wrap:wrap;margin-top:9px}
/* Vùng chạm trên điện thoại: ngón tay cần ít nhất 40px. Ở máy tính con trỏ
   chuột nhỏ nên 29px vẫn bấm trúng, nhưng trên màn cảm ứng thì trượt. */
@media(max-width:768px){
  /* Cả CHIỀU CAO lẫn BỀ NGANG đều phải đủ. Nút "♥ 4" chỉ rộng 33px nên dù
     cao 40px vẫn khó bấm trúng bằng ngón tay. */
  .act,.chip{min-height:40px;min-width:40px;padding-top:9px;padding-bottom:9px;
    justify-content:center}
  .btn{min-height:44px}
  .menu>summary{width:40px;height:40px}
}
.compose input,.compose textarea{width:100%;font:inherit;font-size:14px;padding:10px 12px;
border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);
margin-bottom:8px}
.compose textarea{min-height:72px;resize:vertical;line-height:1.55;margin-bottom:0}
/* Ô TICK không phải ô nhập chữ. Luật width:100% ngay trên biến nó thành một
   khung chạy hết bề ngang, dấu tick bé xíu trôi ra giữa dòng còn chữ rơi
   xuống dưới — đúng cái ô "Cho học thử" trong form Sửa bài. */
.compose input[type=checkbox]{width:18px;height:18px;flex:none;margin:0;padding:0;
  border:0;background:none;accent-color:var(--accent);cursor:pointer}
.tick{display:inline-flex;align-items:center;gap:9px;cursor:pointer;line-height:1.4}
.compose select{font:inherit;font-size:14px;padding:8px 10px;border-radius:12px;
border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.crow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* ------------------------------------------------------- hướng dẫn */
.hd h2{font-size:18px;margin:0 0 12px;letter-spacing:-.01em}
.hd ul,.hd ol{margin:10px 0;padding-left:22px}
.hd li{margin-bottom:7px}
.hd p{margin:0 0 10px}
.hd code{background:var(--accent-soft);color:var(--accent);
padding:1px 5px;border-radius:5px;font-size:.9em}
.hd ol.buoc li{margin-bottom:10px}
/* ------------------------------------------------------- thanh toán */
.pay-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
border-bottom:1px solid var(--line);font-size:14px}
.pay-row:last-child{border-bottom:0}
.pay-row b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px}
.ma-don{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:26px;
font-weight:700;letter-spacing:.08em;color:var(--accent);text-align:center;
background:var(--accent-soft);border:1px dashed var(--accent);border-radius:12px;
padding:14px;margin:12px 0}
.tt{display:inline-block;font-size:12px;padding:2px 10px;border-radius:12px;border:1px solid}
.tt.pending{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.tt.paid{color:var(--ok);border-color:var(--ok)}
.tt.cancelled,.tt.refunded,.tt.het{color:var(--muted);border-color:var(--line)}
.don-xn{flex:1 1 320px}
.don-xn input{flex:1 1 170px;min-width:0;font:inherit;font-size:14px;padding:8px 12px;
border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink)}
/* thanh tab: chiếm trọn một dòng riêng, không chen với tên người xem */
/* Thanh tab — moi so o day deu DO tu Skool, khong uoc luong:
     chu 16px · dam 500 · gach chan 4px · tab thuong #909090
     · dem 0 16px · cao 40px · tab dau bo dem trai de thang hang voi ten.
   Cuon ngang thay vi xuong dong: Skool giu tab tren DUNG MOT hang, xuong
   dong lam thanh tab cao gap doi va day ca trang xuong. */
.tabs{display:flex;flex-basis:100%;margin-top:6px;gap:0;
      overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tabs::-webkit-scrollbar{display:none}
/* Thanh cuộn bị ẩn, nên trên điện thoại (8 tab ~880px trong khung ~340px) không
   có gì báo còn tab bên phải. Làm mờ dần mép phải để gợi ý "vuốt tiếp". Khoảng
   đệm ::after rộng đúng bằng vùng mờ: vuốt hết thì tab cuối ra khỏi vùng mờ, và
   khi đủ chỗ (máy tính) thì tab cuối không bao giờ chạm tới vùng mờ. */
.tabs{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
      mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.tabs::after{content:"";flex:0 0 28px}
/* (7/10) Mờ 28px quá nhẹ: ảnh chụp điện thoại cho thấy chữ "Lịch" bị cắt mà
   không ai nhận ra còn tab phía sau. Khi JS chạy (.san-sang) thì bỏ vùng mờ cố
   định, chỉ mờ ĐÚNG phía còn tab (.con-trai / .con-phai, JS gắn khi cuộn) và
   hiện nút tròn ‹ › ở phía đó. Không có JS thì vẫn là vùng mờ mép phải ở trên. */
.tabs-khung{position:relative;flex-basis:100%;min-width:0}
.tabs-khung.san-sang .tabs{-webkit-mask-image:none;mask-image:none}
.tabs-khung.san-sang.con-phai .tabs{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent)}
.tabs-khung.san-sang.con-trai .tabs{
  -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 64px),transparent);
          mask-image:linear-gradient(to left,#000 calc(100% - 64px),transparent)}
.tabs-khung.san-sang.con-trai.con-phai .tabs{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 64px,#000 calc(100% - 64px),transparent);
          mask-image:linear-gradient(to right,transparent,#000 64px,#000 calc(100% - 64px),transparent)}
.tabs-mui{display:none;position:absolute;top:10px;z-index:1;width:32px;height:32px;
  align-items:center;justify-content:center;padding:0 0 3px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
  font:inherit;font-size:22px;line-height:1;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.12)}
.tabs-mui.trai{left:0}
.tabs-mui.phai{right:0}
.tabs-khung.con-trai .tabs-mui.trai,.tabs-khung.con-phai .tabs-mui.phai{display:flex}
.tabs .tab{display:flex;align-items:center;height:40px;padding:0 16px;
  font-size:16px;font-weight:500;color:var(--tab-mo);white-space:nowrap;
  border-bottom:4px solid transparent;border-radius:0;background:none}
.tabs .tab:first-child{padding-left:0}
.tabs .tab:hover{color:var(--ink);background:none}
.tabs .tab.on{color:var(--ink);border-bottom-color:var(--vang);
              background:none;font-weight:700}
/* Điện thoại: tab gọn hơn một chút để thấy trọn được nhiều tab hơn. */
@media(max-width:600px){.tabs .tab{padding:0 12px;font-size:15px}}
/* Tab Quản trị (chỉ admin) dạt hẳn sang phải, có vạch ngăn: tách công cụ
   quản trị khỏi các tab mà học viên cũng thấy. */
.tabs .tab.qt{margin-left:auto;gap:7px}
.tabs .tab.qt::before{content:"";width:1px;height:18px;background:var(--line);margin-right:14px}
/* Hàng nút con trong khu Quản trị: Số liệu · Đơn hàng · Doanh nghiệp. */
.qt-phu{display:flex;gap:6px;flex-wrap:wrap;margin:0 auto 18px;max-width:1120px}
.qt-phu a{font-size:13.5px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);color:var(--muted);text-decoration:none;display:inline-flex;align-items:center}
.qt-phu a:hover{color:var(--ink);border-color:var(--muted)}
.qt-phu a.on{background:var(--ink);border-color:var(--ink);color:var(--nen);font-weight:600}
.qt-phu b{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:999px;
  background:var(--do);color:#fff;font-size:11px;margin-left:6px;padding:0 5px}
/* Nút chuyển Danh sách / Bản đồ ở tab Thành viên (Bản đồ không còn là tab). */
.cong-tac{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;
  background:var(--panel);margin:0 0 14px}
.cong-tac a{font-size:13px;padding:6px 16px;border-radius:999px;color:var(--muted);text-decoration:none}
.cong-tac a:hover{color:var(--ink)}
.cong-tac a.on{background:var(--vang);color:var(--tren-vang);font-weight:700}
/* ---------------------------------------------------------- thành viên */
.mem-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:10px}
.mem{display:flex;gap:10px;align-items:flex-start}
/* ----------------------------------------------------------------- lịch */
.cal-h,.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-h{font-size:11px;color:var(--muted);text-transform:uppercase;
letter-spacing:.06em;margin:14px 0 6px;text-align:center}
.cal-c{min-height:40px;display:grid;place-items:center;position:relative;
border-radius:12px;font-size:13px;color:var(--muted)}
.cal-c.out{visibility:hidden}
.cal-c.has{color:var(--ink);font-weight:600;background:var(--accent-soft)}
.cal-c.today{outline:1.5px solid var(--accent);color:var(--accent);font-weight:700}
.cal-d{position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;
background:var(--accent)}
.ev-k{flex:none;font-size:11px;padding:3px 9px;border-radius:12px;
background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent)}
.ev-k.dl{background:transparent;color:var(--muted);border-color:var(--line)}
/* -------------------------------------------------------- xếp hạng, KPI */
.rank{flex:none;width:22px;text-align:center;font-size:13px;color:var(--muted);
align-self:center}
.rank.top{color:var(--accent);font-weight:700}
.pts{margin-left:auto;align-self:center;font-weight:700;font-size:15px;color:var(--accent)}
.kpi{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px;padding-top:16px;
border-top:1px solid var(--line)}
.kpi div{display:flex;flex-direction:column}
.kpi b{font-size:22px;letter-spacing:-.02em}
.kpi span{font-size:12px;color:var(--muted)}
/* Bản đồ giữ tỉ lệ thật và co theo ô chứa; danh sách tỉnh nằm CẠNH nó chứ
   không nhồi nhãn vào trong hình — Hà Nội và Hải Phòng cách nhau 0,2 vĩ độ
   nên nhãn trong hình luôn đè lên nhau dù đẩy kiểu gì. */
.map{flex:0 0 340px;width:340px;max-width:100%;height:auto}
.map-ten{font-weight:600;fill:var(--ink);stroke:var(--panel);stroke-width:3px;
stroke-linejoin:round;paint-order:stroke;pointer-events:none}
@media(max-width:820px){.map{flex:1 1 100%;width:100%}}
/* ------------------------------------------------ affiliate */
.aff-link{display:flex;gap:8px;flex-wrap:wrap}
.aff-link input{flex:1;min-width:220px;font-family:ui-monospace,Menlo,Consolas,monospace;
font-size:13px;background:var(--bg)}
.aff-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:16px 0 6px}
.aff-so{background:var(--bg);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.aff-so span{font-size:12px;color:var(--muted)}
.aff-so b{font-size:20px;font-weight:600}
.aff-dong{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.aff-pill{font-size:12px;padding:3px 10px;border-radius:999px;white-space:nowrap;background:var(--bg);color:var(--muted)}
.aff-pill.cho{background:var(--accent-soft);color:var(--accent)}
.aff-pill.giu{background:var(--bg);color:var(--ink)}
.aff-pill.xong{background:color-mix(in srgb,var(--ok) 14%,var(--panel));color:var(--ok)}
.aff-bat{display:flex;align-items:center;gap:8px;font-weight:600;margin:4px 0 10px}
.aff-bat input{width:auto;margin:0}
/* Mời bằng email (tab Thành viên, chỉ quản trị): mặc định thu gọn thành một
   dòng — mở tab là để xem thành viên, không phải để gặp ngay một form lớn. */
.moi-hop{padding:0;overflow:hidden}
.moi-hop>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer}
.moi-hop>summary::-webkit-details-marker{display:none}
.moi-hop>summary:hover .moi-mo{border-color:var(--accent);color:var(--accent)}
.moi-bieu{width:38px;height:38px;border-radius:12px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-size:17px;flex:none}
.moi-tieu{flex:1;min-width:0;display:grid;gap:1px}
.moi-tieu b{font-size:15px}
.moi-tieu span{font-size:13px;color:var(--muted)}
.moi-mo{flex:none;font-size:13.5px;padding:7px 14px}
.moi-hop[open] .moi-mo-mo,.moi-hop:not([open]) .moi-mo-dong{display:none}
.moi-than{border-top:1px solid var(--line)}
.moi-form{padding:16px}
.moi-luoi{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px}
@media(max-width:760px){.moi-luoi{grid-template-columns:minmax(0,1fr)}}
.moi-nhan{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
.moi-tuy{font-weight:400;font-size:12px;color:var(--muted);margin-left:4px}
.moi-goi-y{font-size:12px;color:var(--muted);margin:6px 0 14px;line-height:1.45}
.moi-ds-khoa{display:grid;gap:6px;max-height:330px;overflow:auto}
.moi-khoa-o{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);
  border-radius:12px;cursor:pointer;font-size:13.5px;line-height:1.35;background:var(--panel);
  transition:border-color .12s,background .12s}
.moi-khoa-o:hover{border-color:var(--muted)}
.moi-khoa-o:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.moi-cham{width:10px;height:10px;border-radius:3px;background:var(--mau,#6b7280);flex:none}
.moi-chan{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.moi-luat{font-size:12px;color:var(--muted);line-height:1.45;flex:1;min-width:220px}
.moi-bao{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
  background:var(--bg);border-radius:999px;padding:5px 11px}
.moi-ds{border-top:1px solid var(--line);padding:6px 16px 10px}
.moi-ds-tieu{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;
  letter-spacing:.05em;margin:10px 0 2px}
.moi-ds-tieu em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--ok);margin-left:8px}
.moi-hang{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.moi-ds-tieu+.moi-hang{border-top:0}
.moi-hang .av{flex:none}
.moi-hang-noi{flex:1;min-width:180px}
.moi-hang-noi b{display:block;font-size:14px;overflow-wrap:anywhere}
.moi-hang-noi span{font-size:12px;color:var(--muted)}
.moi-nut{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
.moi-nut form{display:inline}
.sk-hang{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:560px){.sk-hang{grid-template-columns:minmax(0,1fr)}}
.act.xong{color:var(--ok);font-weight:600}
.aff-da-tra{margin:0 0 8px;color:var(--ok);font-weight:600;font-size:14px}

/* ------------------------------------------------ tổng quan */
.tq{max-width:900px;margin:0 auto}
.tq-luoi{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
.tq-luoi.tq-hai{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:720px){.tq-luoi,.tq-luoi.tq-hai{grid-template-columns:minmax(0,1fr)}}
.tq-o{margin:0}
.tq-nhan{font-size:12px;color:var(--muted);margin:0 0 8px;font-weight:600;letter-spacing:.2px}
.tq-tieu{font-size:17px;font-weight:600;color:var(--ink);text-decoration:none}
.tq-tieu:hover{text-decoration:underline}
.tq-so{font-size:24px;font-weight:700;margin:0}
.tq-thanh{height:7px;border-radius:999px;background:var(--bg);overflow:hidden}
.tq-thanh i{display:block;height:100%;background:var(--vang-dam);border-radius:999px}
.tq-hang{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.tq-hang>span{flex:1;min-width:160px;font-size:14px}
.tq-day{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:14px;font-size:14px}
.tq-ma{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:var(--muted)}
.tq-dong{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line);
font-size:14px;color:inherit;text-decoration:none}
.tq-dong:first-of-type{border-top:0;padding-top:0}
.tq-dong:hover>span:last-child>span:first-child{text-decoration:underline}
.tq-ngay{min-width:38px;text-align:center;font-size:17px;font-weight:700;line-height:1.1}
.tq-ngay small{display:block;font-size:11px;font-weight:600;color:var(--accent)}

/* ------------------------------------------------ thẻ: bóng nhẹ + hover */
/* Nền trang giờ trắng như nền thẻ, nên thẻ tách khỏi nền nhờ viền + bóng nhẹ.
   Khối này PHẢI nằm cuối: .kh và .post khai báo transition riêng ở trên, đặt
   khối này sớm hơn thì bị chúng đè. transform giữ trong danh sách cho hiệu
   ứng nhấc thẻ khóa học (a.kh:hover) vẫn chạy mượt. */
.card,.post,.loc,.mem-ds,.bdk-o,.kh{box-shadow:0 1px 3px rgba(0,0,0,.05);
transition:box-shadow .15s,border-color .15s,transform .15s}
.card:hover,.post:hover,.loc:hover,.mem-ds:hover,.bdk-o:hover,.kh:hover{
box-shadow:0 4px 12px rgba(0,0,0,.08)}

/* Dấu * cạnh nhãn ô bắt buộc — JS chung trong layout.js tự gắn. */
.bat-buoc{color:var(--do);font-weight:700}
/* Trang "Không tìm thấy trang" (cả khi không có quyền mở) — server.js. */
.khong-thay{max-width:460px;margin:48px auto;text-align:center}
.khong-thay h1{font-size:22px;margin:0 0 6px}
.khong-thay .btn{margin-top:14px}
/* Nút icon (ICON trong components/common.js): ô vuông bấm dễ, chữ nằm ở title. */
.act.icon{padding:6px;border-radius:10px;line-height:0}
.act.icon svg{display:block}
.act.icon.do:hover{background:color-mix(in srgb,var(--do) 12%,transparent);color:var(--do)}