/* ══════════════════════════════════════════════════════════════════════════
   ⛔⛔ BẢN CHỤP NGUYÊN VĂN — ⛔ ĐỪNG SỬA TỆP NÀY.
   Nguồn: ~/meslab-v2/src/app/chat-bach-khoa.css, commit 052a98d, chụp 14/10/2026.
   Chụp từ COMMIT chứ ⛔ không từ thư mục làm việc, để ⛔ không dính bản nháp
   chưa xong của phiên UX/UI.

   Vì sao chép nguyên tệp: anh Tuấn 14/10 muốn trường «áp áo thiết kế meslab.org
   triệt để». Phỏng theo bằng mắt thì sớm muộn lệch; dùng chính tệp thì trường
   mặc y hệt áo của cộng đồng.

   Chỉnh riêng cho trường thì viết vào m-school.css, ⛔ không viết vào đây.
   meslab.org đổi áo thì chụp lại bằng một lệnh:
     git -C ~/meslab-v2 show HEAD:src/app/chat-bach-khoa.css > ~/m-school/web/tai-nguyen/chat-bach-khoa.css
   (rồi dán lại khối ghi chú này lên đầu). dung-web.py tự báo khi hai bản lệch nhau.
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   CHẤT BÁCH KHOA — áo mới của trang cộng đồng meslab.org (anh Tuấn chốt 11/10/2026)
   ══════════════════════════════════════════════════════════════════════════
   Màu: cam đỏ + đen (màu logo), vàng làm điểm nhấn.
   Phông: tiêu đề Bricolage Grotesque · thân bài Be Vietnam Pro · ghi chú tay Shantell Sans.
   Nét riêng: giấy kẻ ô kỹ thuật · thẻ viền đen có bóng đen đổ lệch · biểu tượng tự vẽ
   (mảng màu lệch phía sau, nét đen phía trước) · ghi chú viết tay nghiêng nhẹ.
   ⛔ Đùa nhẹ nhưng câu chữ vẫn thẳng, đọc một lần là hiểu.
   Bản phác gốc: ~/ux-ui-design/meslab-org-phac/khuon.html · sổ: ~/ux-ui-design/BAN-GIAO.md mục D.
   ⛔ Mọi lớp ở đây mang tiền tố `bk-` để không đụng lớp Tailwind của các trang cũ.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --bk-cam: #ff6a1a;
  --bk-cam-dam: #e8501a;
  --bk-do: #e0283c;
  --bk-vang: #ffb51f;
  --bk-den: #1b1b1b;
  --bk-den-nhat: #4a4a4a;
  --bk-kem: #fff6ee;
  --bk-kem2: #ffe9d6;
  --bk-vien: #f1d8c4;
  --bk-bo: 22px;
}

.bk { font-family: var(--font-bvp), 'Be Vietnam Pro', system-ui, sans-serif; color: var(--bk-den); }
.bk-td, .bk h1, .bk h2, .bk h3 { font-family: var(--font-bricolage), 'Bricolage Grotesque', sans-serif; letter-spacing: -0.02em; }
.bk-tay { font-family: var(--font-shantell), 'Shantell Sans', cursive; font-weight: 700; }
.bk-nhan-cam { font-family: var(--font-shantell), 'Shantell Sans', cursive; font-weight: 700; color: var(--bk-cam-dam); }
.bk-khung { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.bk-giay {
  background-color: var(--bk-kem);
  background-image: linear-gradient(rgba(232, 80, 26, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 80, 26, .07) 1px, transparent 1px);
  background-size: 22px 22px;
}
.bk a { color: inherit; text-decoration: none; }

/* biểu tượng tự vẽ — ⛔ viết `.bk-lot` / `.bk-net` trần: viết `.bk-ic .bk-lot` thì
   luật KHÔNG ăn vào bên trong <use> (phần tử nằm trong <symbol>, không nằm dưới .bk-ic) */
.bk-ic { width: 26px; height: 26px; flex: none; overflow: visible; }
.bk-lot { fill: var(--lot, var(--bk-cam)); }
.bk-net { fill: none; stroke: var(--bk-den); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* thẻ viền đen bóng lệch */
.bk-the { background: #fff; border: 2px solid var(--bk-den); border-radius: var(--bk-bo); box-shadow: 5px 5px 0 var(--bk-den); }
.bk-nut {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 14px; padding: 9px 16px;
  border-radius: 12px; color: #fff; border: 2px solid var(--bk-den); box-shadow: 3px 3px 0 var(--bk-den);
  transition: transform .15s, box-shadow .15s; white-space: nowrap;
}
.bk-nut:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--bk-den); }
/* ⛔ TƯƠNG PHẢN (đo 11/10/2026): chữ TRẮNG trên cam #ff6a1a chỉ được 2,87:1, cần 4,5.
   Giữ nguyên nền cam của thương hiệu, đổi chữ sang mực → 6,01:1. Khi rê chuột nền đậm
   lại thành #e8501a thì chữ mực được 4,30:1, nên giữ nền cam nhạt và chỉ đổi bóng. */
.bk-nut-cam { background: var(--bk-cam); color: var(--bk-den); }
.bk-nut-cam:hover { background: var(--bk-cam); box-shadow: 4px 4px 0 var(--bk-den); }
.bk-nut-den { background: var(--bk-den); } .bk-nut-den:hover { background: #000; }
.bk-nut-trang { background: #fff; color: var(--bk-den); }

/* ───────── THANH MENU ───────── */
.bk-dau-trang { position: sticky; top: 0; z-index: 50; background: rgba(255, 246, 238, .95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(27, 27, 27, .18); box-shadow: 0 2px 10px rgba(120, 50, 10, .05); } /* anh Tuấn 11/10: gạch dưới menu mảnh và nhạt đi, đừng đen đậm */
.bk-dau-trang .bk-khung { display: flex; align-items: center; gap: 18px; height: 66px; }
.bk-logo { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.bk-logo img { height: 34px; width: auto; display: block; }
.bk-logo span { font-family: var(--font-shantell), cursive; font-weight: 700; font-size: 13px; color: var(--bk-do); transform: rotate(-4deg); margin-top: 10px; }
.bk-menu { display: flex; gap: 6px; align-items: center; margin-left: auto; list-style: none; margin-bottom: 0; padding: 0; }
.bk-menu > li { position: relative; }
.bk-muc {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 12px; font-weight: 700;
  font-size: 14.5px; transition: .15s; border: 2px solid transparent; line-height: 1.2; white-space: nowrap;
}
.bk-muc .bk-ic { width: 20px; height: 20px; }
.bk-muc:hover, .bk-muc[data-dang='1'] { background: #fff; border-color: var(--bk-den); }
.bk-muc.bk-nut-den { border-color: var(--bk-den); box-shadow: 3px 3px 0 var(--bk-den); color: #fff; }
.bk-muc.bk-nut-cam { border-color: var(--bk-den); box-shadow: 3px 3px 0 var(--bk-den); color: var(--bk-den); }
.bk-muc.bk-nut-den:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--bk-den); color: #fff; }
.bk-muc.bk-nut-cam:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--bk-den); color: var(--bk-den); }
.bk-xo {
  position: absolute; top: calc(100% + 10px); left: 0; background: #fff; border: 2px solid var(--bk-den); border-radius: 16px;
  box-shadow: 6px 6px 0 var(--bk-den); padding: 8px; width: 340px; z-index: 60;
}
.bk-xo a { display: flex; gap: 12px; padding: 10px; border-radius: 10px; align-items: flex-start; }
.bk-xo a:hover { background: var(--bk-kem); }
.bk-xo .bk-ic { width: 34px; height: 34px; }
.bk-xo b { display: block; font-size: 14.5px; }
.bk-xo small { display: block; font-size: 13px; color: var(--bk-den-nhat); line-height: 1.4; }
.bk-nut-dt {
  display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--bk-den);
  background: #fff; box-shadow: 3px 3px 0 var(--bk-den); place-items: center;
}
.bk-tk { margin-left: 4px; }
.bk-dt-panel { display: none; }

/* ───────── TRANG CHỦ ───────── */
.bk-dau-khoi { padding-top: 32px; padding-bottom: 18px; }
.bk-luoi-dau { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.bk-tin { padding: 20px 22px 12px; display: flex; flex-direction: column; }
.bk-tin-dau { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bk-tin-dau h2 { font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 10px; margin: 0; }
.bk-cham-song { width: 11px; height: 11px; border-radius: 50%; background: var(--bk-do); animation: bk-dap 1.8s infinite; }
@keyframes bk-dap { 0% { box-shadow: 0 0 0 0 rgba(224, 40, 60, .55) } 70% { box-shadow: 0 0 0 10px rgba(224, 40, 60, 0) } 100% { box-shadow: 0 0 0 0 rgba(224, 40, 60, 0) } }
.bk-tin ul { list-style: none; margin: 0; padding: 0; }
.bk-tin li a { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 11px 6px; border-top: 1.5px dashed var(--bk-vien); border-radius: 10px; }
.bk-tin li:first-child a { border-top: 0; }
.bk-tin li a:hover { background: var(--bk-kem); }
.bk-tin li .bk-tin-dong { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 11px 6px; border-top: 1.5px dashed var(--bk-vien); }
.bk-tin li:first-child .bk-tin-dong { border-top: 0; }
/* lớp phủ để cả ô bấm được — chỉ bật trên điện thoại, máy tính thì bấm từng dòng bên trong */
.bk-o-phu { display: none; }
.bk-ngay { text-align: center; border-radius: 10px; padding: 6px 0; background: var(--bk-den); color: #fff; font-family: var(--font-bricolage), sans-serif; font-weight: 800; line-height: 1.05; font-size: 20px; align-self: start; }
.bk-ngay small { display: block; font-size: 11.5px; font-weight: 700; color: var(--bk-vang); font-family: ui-monospace, Menlo, monospace; letter-spacing: .01em; white-space: nowrap; }
.bk-nhan { display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 9px; border-radius: 999px; margin-bottom: 4px; letter-spacing: .02em; border: 1.5px solid currentColor; }
.bk-tin li b { display: block; font-size: 15px; line-height: 1.38; font-weight: 600; }

.bk-hinh {
  position: relative; overflow: hidden; color: #fff; display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  grid-template-rows: 1fr auto; min-height: 100%; transition: transform .15s, box-shadow .15s;
  background: linear-gradient(135deg, #ff7a1f 0%, #ff5a1a 60%, #e0283c 100%);
}
.bk-hinh::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .15) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .15) 1px, transparent 1px); background-size: 22px 22px; }
.bk-hinh:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--bk-den); }
.bk-hinh > svg { position: relative; grid-column: 2; grid-row: 1 / 3; width: 100%; height: 100%; align-self: center; min-height: 0; }
.bk-hinh-chu { position: relative; grid-column: 1; grid-row: 1; padding: 24px 0 0 24px; }
.bk-hinh-chu p { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bk-den); margin: 0; }
.bk-hinh-chu h1 { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.05; font-weight: 800; margin: 8px 0 0; color: #fff; text-shadow: 3px 3px 0 var(--bk-den); }
.bk-hinh-chan { position: relative; grid-column: 1; grid-row: 2; padding: 0 0 22px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.bk-hinh-chan .bk-tay { color: var(--bk-den); font-size: 15px; transform: rotate(-4deg); margin-left: 6px; }

.bk-luoi-muc { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 8px; padding-bottom: 36px; }
.bk-o-muc { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.bk-o-dau { display: flex; align-items: center; gap: 12px; }
.bk-o-dau .bk-ic { width: 44px; height: 44px; }
.bk-o-dau h3 { font-size: 21px; font-weight: 800; margin: 0; }
.bk-o-dau small { display: block; font-size: 13px; color: var(--bk-den-nhat); font-weight: 500; }
.bk-o-dau .bk-di { margin-left: auto; font-weight: 800; font-size: 13.5px; color: var(--bk-cam-dam); white-space: nowrap; }
.bk-o-muc .bk-ghi { position: absolute; right: 18px; top: -14px; background: var(--bk-vang); color: var(--bk-den); font-size: 13px; padding: 2px 10px; border-radius: 8px; border: 1.5px solid var(--bk-den); transform: rotate(3deg); }
.bk-ds-tl { display: grid; gap: 8px; }
.bk-dong-tl { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; background: var(--bk-kem); border: 1.5px solid transparent; }
.bk-dong-tl:hover { border-color: var(--bk-den); }
.bk-dong-tl i { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 3px 7px; border-radius: 6px; background: var(--bk-den); color: #fff; flex: none; letter-spacing: .03em; }
.bk-dong-tl b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.bk-vd3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bk-anh-vd { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; background: #f5d6c2; border: 1.5px solid var(--bk-den); display: block; }
.bk-anh-vd img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-anh-vd::after {
  content: ''; position: absolute; left: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--bk-den);
  background: var(--bk-cam) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 2.5l4 2.5-4 2.5z' fill='white'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.bk-vd3 b, .bk-luoi-vd b { font-size: 12.5px; line-height: 1.3; margin-top: 6px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bk-diem { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-diem div { background: var(--bk-kem); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.bk-diem div b { display: block; font-family: var(--font-bricolage), sans-serif; font-size: 22px; font-weight: 800; color: var(--bk-do); }

/* ───────── TRANG TRONG ───────── */
.bk-dau-trong { padding-top: 46px; padding-bottom: 28px; } /* ⛔ chỉ trên/dưới: viết `padding: 30px 0` là đè mất lề trái phải của .bk-khung */
.bk-dau-trong .bk-lop { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bk-do); margin: 0; }
.bk-dau-trong h1 { font-size: clamp(29px, 4vw, 42px); font-weight: 800; line-height: 1.08; margin: 6px 0 8px; }
.bk-dau-trong .bk-mo-ta { font-size: 16px; color: var(--bk-den-nhat); max-width: 680px; line-height: 1.6; }
.bk-the-kenh { overflow: hidden; margin-bottom: 22px; }
.bk-kenh-dau { display: flex; align-items: center; gap: 14px; padding: 16px 20px; color: #fff; border-bottom: 2px solid var(--bk-den); }
.bk-kenh-dau .bk-av { width: 52px; height: 52px; border-radius: 14px; background: #fff; display: grid; place-items: center; flex: none; border: 2px solid var(--bk-den); }
.bk-kenh-dau .bk-av .bk-ic { width: 32px; height: 32px; }
.bk-kenh-dau h2 { font-size: 22px; font-weight: 800; text-shadow: 2px 2px 0 rgba(0, 0, 0, .35); margin: 0; }
.bk-kenh-dau small { font-weight: 600; display: block; }
.bk-kenh-dau a { margin-left: auto; font-size: 13px; font-weight: 700; background: #fff; color: var(--bk-den); border: 1.5px solid var(--bk-den); padding: 6px 12px; border-radius: 10px; white-space: nowrap; }
.bk-cho-ai { padding: 12px 20px; font-size: 14px; color: var(--bk-den-nhat); background: var(--bk-kem); border-bottom: 1.5px dashed var(--bk-vien); }
.bk-cho-ai b { color: var(--bk-den); }
.bk-ds + .bk-ds { border-top: 1.5px dashed var(--bk-vien); }
.bk-ds > button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 20px; text-align: left; font-weight: 700; font-size: 15.5px; background: none; border: 0; cursor: pointer; color: inherit; }
.bk-ds > button:hover { background: var(--bk-kem); }
.bk-ds > button .bk-so { margin-left: auto; font-size: 12.5px; font-weight: 700; background: var(--bk-kem2); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.bk-ds > button .bk-xoay { transition: .2s; color: var(--bk-cam-dam); font-size: 12px; }
.bk-ds[data-mo='1'] > button .bk-xoay { transform: rotate(90deg); }
.bk-ds-than { padding: 4px 20px 20px; }
.bk-may-chieu { border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; margin-bottom: 12px; border: 2px solid var(--bk-den); }
.bk-may-chieu iframe { width: 100%; height: 100%; border: 0; display: block; }
.bk-luoi-vd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bk-luoi-vd button { text-align: left; padding: 0; background: none; border: 0; cursor: pointer; color: inherit; }
.bk-luoi-vd button[data-dang='1'] .bk-anh-vd { outline: 3px solid var(--bk-do); outline-offset: 2px; }
.bk-podcast { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--bk-vang); }
.bk-podcast .bk-ic { width: 52px; height: 52px; }
.bk-podcast h2 { font-size: 21px; font-weight: 800; margin: 0; }
.bk-podcast p { font-size: 14px; margin: 2px 0 0; }
.bk-podcast .bk-nut { margin-left: auto; }

.bk-bd-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 44px; }
.bk-bd { padding: 22px; }
.bk-bd h2 { font-size: 22px; font-weight: 800; margin: 0 0 2px; }
.bk-bd > p { color: var(--bk-den-nhat); font-size: 14px; margin: 0 0 12px; }
.bk-nhanh { border-left: 3px solid var(--bk-cam); padding-left: 14px; margin: 14px 0 0 6px; }
.bk-nhanh > a { font-weight: 800; font-size: 16px; display: inline-flex; gap: 10px; align-items: center; }
.bk-nhanh > a .bk-ic { width: 24px; height: 24px; }
.bk-nhanh ul { list-style: none; margin: 6px 0 0; padding: 0; }
.bk-nhanh li a { display: block; font-size: 14px; padding: 3px 0; color: var(--bk-den-nhat); }
.bk-nhanh li a:hover, .bk-nhanh > a:hover { color: var(--bk-cam-dam); }
.bk-hst { display: grid; gap: 10px; }
.bk-hst a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 12px; background: var(--bk-kem); border: 1.5px solid transparent; }
.bk-hst a:hover { border-color: var(--bk-den); }
.bk-hst .bk-ic { width: 40px; height: 40px; }
.bk-hst b { display: block; font-size: 15px; }
.bk-hst span { font-size: 13px; color: var(--bk-den-nhat); }
.bk-hst em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--bk-den-nhat); white-space: nowrap; }
.bk-sap { background: var(--bk-vang); color: var(--bk-den); padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; margin-left: 6px; }


/* ───────── THƯ VIỆN: thanh ngăn · dòng tài liệu có nhãn dán · ghi chú ───────── */
.bk-ngan { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.bk-ngan a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; border: 2px solid var(--bk-den); background: #fff; font-weight: 700; font-size: 14px; }
.bk-ngan a .bk-ic { width: 22px; height: 22px; }
.bk-ngan a[data-dang='1'] { background: var(--bk-den); color: #fff; box-shadow: 3px 3px 0 var(--bk-cam); }
.bk-ngan a[data-dang='1'] .bk-net { stroke: #fff; }
.bk-ds-hang { overflow: hidden; margin-bottom: 22px; }
.bk-hang { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 20px; transition: background .15s; }
.bk-hang + .bk-hang { border-top: 1.5px dashed var(--bk-vien); }
.bk-hang:hover { background: var(--bk-kem); }
.bk-hang[data-mau='1'] { background: repeating-linear-gradient(-45deg, #fff, #fff 10px, #fffaf2 10px, #fffaf2 20px); }
.bk-nhan-dan { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 84px; height: 72px; border-radius: 14px; border: 2px solid var(--bk-den); box-shadow: 3px 3px 0 var(--bk-den); color: #fff; }
.bk-nhan-dan .bk-ic { width: 30px; height: 30px; }
.bk-nhan-dan .bk-net { stroke: var(--bk-den); }
.bk-nhan-dan i { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; background: var(--bk-den); padding: 1px 6px; border-radius: 5px; }
.bk-hang-than h3 { font-size: 18px; font-weight: 800; margin: 0 0 3px; line-height: 1.25; }
.bk-hang-than p { font-size: 14px; color: var(--bk-den-nhat); margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bk-hang-than small { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--bk-cam-dam); background: var(--bk-kem2); padding: 2px 9px; border-radius: 999px; }
.bk-hang-nut { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.bk-hang-nut .bk-nut { font-size: 13px; padding: 7px 13px; }
.bk-vi-du { display: inline-block; vertical-align: middle; margin-left: 8px; font-family: var(--font-bvp), sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; background: var(--bk-vang); color: var(--bk-den); border: 1.5px solid var(--bk-den); padding: 0 7px; border-radius: 6px; transform: rotate(-3deg); }
.bk-tieu-khoi { font-size: 22px; font-weight: 800; margin: 8px 0 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bk-tieu-khoi .bk-tay { font-size: 14px; color: var(--bk-do); transform: rotate(-3deg); display: inline-block; }
.bk-them-dong { margin: -6px 20px 14px 130px; padding-top: 10px; border-top: 1.5px dashed var(--bk-vien); font-size: 13px; color: var(--bk-den-nhat); line-height: 1.55; }
.bk-them-dong a { color: var(--bk-cam-dam); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.bk-loc { margin-bottom: 14px; }
.bk-loc input { width: 100%; max-width: 480px; border: 2px solid var(--bk-den); border-radius: 12px; padding: 10px 14px; font: inherit; font-size: 15px; background: #fff; box-shadow: 3px 3px 0 var(--bk-den); outline: none; }
.bk-loc input:focus { box-shadow: 3px 3px 0 var(--bk-cam); }
.bk-chip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bk-chip button { font: inherit; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--bk-den); background: #fff; cursor: pointer; color: var(--bk-den); }
.bk-chip button[aria-pressed='true'] { background: var(--bk-cam); color: var(--bk-den); } /* chữ trắng trên cam chỉ 2,87:1 */
.bk-trong { padding: 22px; font-size: 16px; color: var(--bk-den-nhat); margin: 0; }
.bk-giay-nho { position: relative; max-width: 620px; margin: 6px 0 44px auto; background: #fff3c4; border: 1.5px solid var(--bk-den); padding: 14px 18px; border-radius: 4px 14px 14px 14px; transform: rotate(-1deg); box-shadow: 4px 4px 0 var(--bk-den); font-size: 15px; line-height: 1.55; font-weight: 500; }
.bk-giay-nho a { color: var(--bk-do); text-decoration: underline; text-underline-offset: 2px; }
.bk-luoi-cau-lenh { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 26px; }
.bk-cau-lenh { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.bk-cau-lenh h3 { font-size: 18px; font-weight: 800; margin: 0; }
.bk-cau-lenh p { font-size: 14px; color: var(--bk-den-nhat); margin: 0; }
.bk-cau-lenh pre { white-space: pre-wrap; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; background: var(--bk-kem); border: 1.5px dashed var(--bk-vien); border-radius: 10px; padding: 10px 12px; margin: 0; max-height: 180px; overflow: auto; }
.bk-cau-lenh .bk-nut { align-self: flex-start; }
.bk-ve { display: inline-flex; gap: 6px; font-weight: 700; color: var(--bk-cam-dam); font-size: 14px; margin-bottom: 4px; }


/* ───────── TRANG VĂN BẢN (phạm vi · minh bạch · quyền riêng tư) ───────── */
.bk-cap-nhat { font-size: 13px; color: var(--bk-den-nhat); margin: 6px 0 0; }
.bk-tom-gon { background: #fff3c4; border: 1.5px solid var(--bk-den); border-radius: 4px 16px 16px 16px; box-shadow: 4px 4px 0 var(--bk-den); padding: 14px 20px; margin-bottom: 24px; transform: rotate(-.6deg); max-width: 860px; }
.bk-tom-gon > b { color: var(--bk-do); font-size: 16px; display: block; margin-bottom: 4px; }
.bk-tom-gon ul { margin: 0; padding-left: 20px; }
.bk-tom-gon li { font-size: 15px; line-height: 1.55; padding: 2px 0; }
.bk-vb-luoi { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 26px; align-items: start; padding-bottom: 44px; }
.bk-muc-luc { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 2px; }
.bk-muc-luc b { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--bk-do); margin-bottom: 6px; }
.bk-muc-luc a { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.bk-muc-luc a:hover { background: #fff; }
.bk-muc-luc a span { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--bk-den); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.bk-vb-muc { position: relative; padding: 22px 24px 18px 24px; margin-bottom: 20px; scroll-margin-top: 86px; }
.bk-so-muc { position: absolute; top: -14px; left: 18px; width: 36px; height: 36px; border-radius: 10px; border: 2px solid var(--bk-den); box-shadow: 2px 2px 0 var(--bk-den); color: #fff; font-family: var(--font-bricolage), sans-serif; font-weight: 800; font-size: 18px; display: grid; place-items: center; }
.bk-vb-muc h2 { font-size: 21px; font-weight: 800; margin: 8px 0 8px; }
.bk-vb-than { font-size: 15px; line-height: 1.7; color: #2b2b2b; }
.bk-vb-than p { margin: 0 0 10px; }
.bk-vb-than ul { margin: 0 0 10px; padding-left: 20px; }
.bk-vb-than li { padding: 3px 0; }
.bk-vb-than b { color: var(--bk-den); }
.bk-vb-than a { color: var(--bk-cam-dam); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.bk-o-nho { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 6px 0 10px; }
.bk-o-nho div { background: var(--bk-kem); border-radius: 12px; padding: 12px 14px; border: 1.5px solid transparent; }
.bk-o-nho div b { display: block; font-family: var(--font-bricolage), sans-serif; font-size: 16px; margin-bottom: 4px; }
.bk-o-nho div small { display: block; font-size: 13.5px; line-height: 1.5; color: var(--bk-den-nhat); }
.bk-xem-them { font-size: 14px; color: var(--bk-den-nhat); margin: 4px 0 0; }
.bk-xem-them a { color: var(--bk-cam-dam); font-weight: 700; }


/* ───────── BẢN TIN ───────── */
.bk-tin-dau a { font-size: 13.5px; font-weight: 700; color: var(--bk-cam-dam); }
.bk-tin-ngay { display: block; margin-top: 4px; font-size: 12px; color: var(--bk-den-nhat); font-weight: 600; }
.bk-bai-tin { max-width: 760px; padding: 26px 30px 28px; margin: 10px 0 24px; }
.bk-bai-tin-dau { display: flex; gap: 12px; align-items: center; font-size: 13px; font-weight: 700; color: var(--bk-den-nhat); margin: 0 0 6px; }
.bk-bai-tin-dau .bk-nhan { margin: 0; }
.bk-bai-tin h1 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; line-height: 1.15; margin: 0 0 14px; }
.bk-bai-tin p { font-size: 16.5px; line-height: 1.7; margin: 0 0 12px; color: #2b2b2b; }
.bk-bai-tin .bk-nut { margin-top: 8px; }
.bk-tin-khac { max-width: 760px; display: grid; gap: 8px; }
.bk-tin-khac > b { color: var(--bk-do); font-size: 15px; }
.bk-tin-khac .bk-dong-tl { background: #fff; border: 1.5px solid var(--bk-den); }

/* ───────── CHÂN TRANG ───────── */
.bk-chan { background: var(--bk-den); color: #e9e9e9; padding: 40px 0 26px; font-size: 14px; border-top: 4px solid var(--bk-cam); }
.bk-chan-luoi { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; margin-bottom: 26px; }
.bk-chan h4 { color: var(--bk-vang); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 10px; font-family: var(--font-bvp), sans-serif; }
.bk-chan ul { list-style: none; margin: 0; padding: 0; }
.bk-chan li a { display: block; padding: 3px 0; color: #cfcfcf; }
.bk-chan li a:hover { color: var(--bk-cam); }
.bk-chan .bk-moi { color: var(--bk-cam); font-weight: 800; }
.bk-chan .bk-oc { font-family: var(--font-shantell), cursive; color: var(--bk-vang); margin-top: 12px; font-size: 14px; line-height: 1.5; max-width: 340px; }
.bk-chan-day { border-top: 1px solid #333; padding-top: 14px; font-size: 12.5px; color: #8d8d8d; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bk-chan-day a { color: #8d8d8d; } .bk-chan-day a:hover { color: var(--bk-cam); }

/* ───────── ĐIỆN THOẠI ───────── */
@media (max-width: 860px) {
  /* ⛔⛔ BẪY ĐÃ TRẢ GIÁ — chữ nằm TRONG <svg> có viewBox cố định thì co theo hình.
     Đo thật trên máy 11/10/2026 ở khung 375px: hình đầu trang chủ co còn 0,381 lần,
     nên nhãn khai báo 13px hiện ra chỉ 5,0px, chữ "MES LAB" 20px còn 7,6px.
     Trên máy tính vẫn đẹp nên nhìn bằng mắt không thấy.
     Bên meslab.vn đã xử đúng cách này từ trước (ao-cong-ty.css: .v-quang-ba svg text).
     Hình vẫn còn 5 biểu tượng trên quỹ đạo; tiêu đề h1 bên cạnh đã nói đủ ý. */
  .bk-hinh > svg text { display: none; }
  .bk-menu, .bk-tk { display: none; }
  .bk-nut-dt { display: grid; }
  .bk-dt-panel {
    display: flex; flex-direction: column; gap: 8px; position: absolute; top: 66px; left: 0; right: 0; background: var(--bk-kem);
    padding: 12px 16px 18px; border-bottom: 1px solid rgba(27, 27, 27, .18); max-height: calc(100vh - 66px); overflow-y: auto;
  }
  .bk-dt-panel .bk-muc { width: 100%; padding: 12px 14px; font-size: 16px; background: #fff; border-color: var(--bk-den); }
  .bk-dt-panel .bk-muc.bk-nut-cam { background: var(--bk-cam); } .bk-dt-panel .bk-muc.bk-nut-den { background: var(--bk-den); }
  .bk-dt-con { display: flex; flex-direction: column; padding-left: 14px; gap: 2px; }
  .bk-dt-con a { padding: 8px 6px; font-weight: 600; font-size: 15px; }
  .bk-khung { padding: 0 16px; }
  .bk-logo img { height: 28px; }
  .bk-dau-khoi { padding-top: 18px; padding-bottom: 10px; }
  .bk-dau-trong { padding-top: 30px; }
  .bk-luoi-dau { grid-template-columns: 1fr; gap: 14px; }
  .bk-hinh { order: -1; min-height: 0; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .bk-hinh-chu { padding: 14px 0 0 14px; }
  .bk-hinh-chu p { display: none; }
  .bk-hinh-chu h1 { font-size: 21px; line-height: 1.12; text-shadow: 2px 2px 0 var(--bk-den); }
  .bk-hinh-chan { padding: 10px 0 14px 14px; }
  .bk-hinh-chan .bk-tay { display: none; }
  .bk-hinh-chan .bk-nut { font-size: 12.5px; padding: 7px 12px; }
  .bk-hinh > svg { padding: 6px 6px 6px 0; }
  .bk-tin { padding: 12px 14px 6px; }
  .bk-tin-dau h2 { font-size: 19px; }
  .bk-tin li a, .bk-tin li .bk-tin-dong { grid-template-columns: 52px 1fr; gap: 10px; padding: 8px 4px; }
  .bk-o-phu { display: block; position: absolute; inset: 0; z-index: 2; border-radius: var(--bk-bo); }
  .bk-ngay { font-size: 17px; }
  .bk-ngay small { font-size: 10.5px; }
  .bk-tin .bk-nhan { display: none; }
  .bk-tin li b { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bk-tin li:nth-child(n+4) { display: none; }
  .bk-luoi-muc { gap: 12px; padding-bottom: 24px; }
  .bk-o-muc { padding: 13px; gap: 8px; }
  .bk-o-dau { flex-direction: column; align-items: flex-start; gap: 6px; }
  .bk-o-dau .bk-ic { width: 36px; height: 36px; }
  .bk-o-dau h3 { font-size: 17px; }
  .bk-o-dau small { font-size: 12px; line-height: 1.35; }
  .bk-o-dau .bk-di, .bk-o-muc .bk-ghi, .bk-o-muc .bk-an-dt { display: none !important; }
  .bk-chan-luoi { grid-template-columns: 1fr 1fr; }
  .bk-chan-luoi > div:first-child { grid-column: 1 / -1; }
  .bk-luoi-vd { grid-template-columns: 1fr 1fr; }
  .bk-bd-luoi { grid-template-columns: 1fr; }
  .bk-hst a { grid-template-columns: 40px minmax(0, 1fr); }
  .bk-hst em { grid-column: 2; margin-top: -6px; }
  .bk-kenh-dau { flex-wrap: wrap; }
  .bk-kenh-dau a { margin-left: 66px; }
  .bk-podcast { flex-wrap: wrap; }
  .bk-podcast .bk-nut { margin-left: 68px; }
  .bk-hang { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px; align-items: start; }
  .bk-dau-trong .bk-mo-ta { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .bk-dau-trong .bk-mo-ta.bk-mo-ta-du { display: block; overflow: visible; -webkit-line-clamp: unset; line-clamp: unset; } /* trang văn bản pháp lý: không cắt */
  .bk-nhan-dan { width: 60px; height: 56px; }
  .bk-nhan-dan .bk-ic { width: 24px; height: 24px; }
  .bk-nhan-dan i { font-size: 9px; padding: 1px 4px; }
  .bk-hang-than h3 { font-size: 16px; }
  .bk-hang-nut { grid-column: 2; justify-content: flex-start; }
  .bk-them-dong { margin: -4px 14px 12px; }
  .bk-luoi-cau-lenh { grid-template-columns: 1fr; }
  .bk-giay-nho { margin-right: 4px; }
  .bk-ngan { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-right: -16px; padding-right: 16px; }
  .bk-ngan a { flex: none; }
  .bk-vb-luoi { grid-template-columns: 1fr; }
  .bk-bai-tin { padding: 20px 16px 22px; }
  .bk-bai-tin p { font-size: 16px; }
  .bk-muc-luc { display: none; }
  .bk-vb-muc { padding: 20px 16px 14px; }
  .bk-tom-gon { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-cham-song { animation: none; }
  .bk-hinh, .bk-nut, .bk-muc { transition: none; }
}

/* ══ TIẾT CHẾ ĐƯỜNG BAO (anh Tuấn 11/10) — danh sách một khung · trong khung không viền ·
   thẻ lặp lại viền mảnh không bóng · chỉ khối chính giữ viền đậm + bóng ══ */
.bk-anh-vd{border:0}
.bk-nhan-dan{border:0;box-shadow:none}
.bk-tin-khac .bk-dong-tl{border:0;background:#fff}
.bk-cau-lenh pre{border:0}
.bk-vb-muc{border:1px solid rgba(27,27,27,.18);box-shadow:none}
.bk-cau-lenh{border:1px solid rgba(27,27,27,.18);box-shadow:none}
.bk-the-kenh .bk-av{border:0}
/* bốn ô mục ở trang chủ (Thư viện · Kênh video · m.school · Diễn đàn) là thẻ lặp lại → viền mảnh, không bóng.
   Chỉ khối tin mới và khối hình cam giữ viền đậm + bóng (anh Tuấn duyệt 11/10 khuya, phiếu hỏi C1) */
.bk-the.bk-o-muc{border:1px solid rgba(27,27,27,.18);box-shadow:none}
.bk-ngan a{border-width:1.5px}
/* nút trong từng dòng tài liệu: lặp lại nhiều dòng nên không bóng; «Tải về» thành chữ gạch chân */
.bk-hang-nut .bk-nut{box-shadow:none}
.bk-hang-nut .bk-nut:hover{transform:none;box-shadow:none}
.bk-hang-nut .bk-nut-trang{border-color:transparent;background:transparent;text-decoration:underline;text-underline-offset:3px;padding-left:6px;padding-right:6px}

/* ── Dùng được bằng bàn phím: viền tiêu điểm phải THẤY ĐƯỢC ──
   ⛔ Trước 11/10/2026 cả tệp không có luật nào; ô tìm kiếm còn `outline:none`
      nên người dùng bàn phím không biết mình đang đứng ở đâu. */
.bk a:focus-visible, .bk button:focus-visible, .bk input:focus-visible,
.bk textarea:focus-visible, .bk select:focus-visible, .bk [tabindex]:focus-visible,
.bk-dau-trang a:focus-visible, .bk-dau-trang button:focus-visible,
.bk-chan a:focus-visible, .bk-loc input:focus-visible {
  outline: 3px solid var(--bk-do); outline-offset: 2px; border-radius: 8px;
}