/* MSH — Theo dõi Coaching & Checklist
 * Nhận diện: MSH (Sông Hồng) + Nguyễn Quốc Trung/DNTC kết hợp — ĐO TỪ TÀI LIỆU THẬT ĐÃ GỬI MSH:
 *   - "MSH - Sales Kit - Form 4 trang.pdf" (bản anh Trung chốt 05/09/2026): logo Sông Hồng góc trái,
 *     eyebrow đen "CÔNG TY CỔ PHẦN MAY SÔNG HỒNG", tiêu đề ĐỎ, gạch hồng mảnh dưới tiêu đề,
 *     bảng/hộp KHÔNG nền màu (chỉ viền đen), không số trang.
 *   - "04. MSH - Slide trình bày Sông Hồng Chuyển Dòng.pdf": thanh đỏ mảnh trên đầu trang, logo Sông Hồng,
 *     các trường mô tả kiểu "nhãn nhỏ chữ hoa màu đỏ phía trên — giá trị đen phía dưới/bên cạnh"
 *     (KÍNH GỬI / TRÌNH BÀY / PHẠM VI), tác giả "Nguyễn Quốc Trung" đứng cùng hàng với MSH.
 * Xem thêm quy ước [[kieu-trinh-bay-tai-lieu-in-msh]]: đỏ dùng cho tiêu đề, hồng chỉ ở logo/gạch kẻ,
 * chữ còn lại màu đen, hạn chế nền màu.
 */

:root {
  --nen: #f4f4f5;         /* nền trang — trung tính, KHÔNG phải màu thương hiệu */
  --nen-khoi: #ffffff;
  --vien: #d9dbe0;
  --den: #141414;         /* chữ chính — gần đen, theo đúng quy ước "chữ đen" */
  --chu-nhat: #5b6270;

  --do: #b42318;          /* đỏ tiêu đề — đo từ tài liệu gửi MSH */
  --do-nen: #ffffff;
  --hong: #eb268f;        /* hồng thương hiệu Sông Hồng — CHỈ dùng ở logo/gạch kẻ mảnh, không tô nền */
  --hong-nhat: #f05fa2;

  --xong: #1e8e5a;
  --bo-goc: 8px;

  /* Gradient đỏ→hồng cho các nút — anh Trung yêu cầu 14/09/2026. Hai đầu gradient LẤY ĐÚNG
     2 màu thương hiệu đã đo (--do, --hong), không thêm màu mới. */
  --grad-do-hong: linear-gradient(135deg, var(--do) 0%, var(--hong) 100%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--nen);
  color: var(--den);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.boc {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Thanh đỏ đầu trang — đo từ slide "Sông Hồng Chuyển Dòng" ---------- */
.vach-do-dinh-trang { height: 4px; background: var(--do); flex: none; }

/* Khối dính đầu trang — gộp thanh đỏ + header + tab + thanh công cụ thành MỘT khối,
   anh Trung yêu cầu 14/09/2026 "giữ các trường này cố định khi cuộn trang". Gộp vào 1 khối
   sticky thay vì sticky riêng từng phần — khỏi phải tự tính offset top của từng lớp chồng lên nhau
   (chiều cao header đổi theo màn hình hẹp/rộng, tính tay dễ sai và dễ lệch mỗi lần sửa CSS khác). */
.dau-trang-dinh {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
}

/* ---------- Đầu trang ---------- */
.dau-trang {
  background: var(--nen-khoi);
  border-bottom: 1px solid var(--hong);
}
/* Đầu trang CÂN ĐỐI 3 cột — anh Trung chốt 14/09/2026: logo hai bên cao bằng nhau (so theo
   CHIỀU CAO, không theo bề rộng, vì logo Sông Hồng khung đứng còn TRUNGNQ.vn khung dẹt ngang —
   ép cùng bề rộng sẽ ra 2 chiều cao lệch hẳn nhau, ép cùng chiều cao mới nhìn cân), tiêu đề nằm
   GIỮA thật sự (grid 1fr auto 1fr — canh giữa đúng bất kể logo hai bên rộng khác nhau bao nhiêu). */
.dau-trang-boc {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
}
.logo-song-hong { justify-self: start; height: 40px; width: auto; display: block; }
.ten-app { min-width: 0; text-align: center; }

.dau-trang-logo-phai { justify-self: end; display: flex; align-items: center; }
.dau-trang-logo-phai .logo-trungnq { height: 40px; width: auto; display: block; }
.nhan-cong-ty {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--den);
}
.ten-app strong {
  display: block;
  font-size: 19px;
  font-weight: 800;
  color: var(--do);
  margin-top: 1px;
}
.tin-nhiem-tac-gia {
  display: block;
  font-size: 12px;
  color: var(--chu-nhat);
  margin-top: 2px;
}

/* ---------- Thanh tab chuyển trang — nút "Đào tạo trực tiếp" cũ nâng thành tab riêng,
   anh Trung yêu cầu 14/09/2026 để học viên nhìn là thấy, không lẫn vào đám nút thao tác ---------- */
.thanh-tab { background: var(--nen-khoi); border-bottom: 1px solid var(--vien); }
.thanh-tab-boc { display: flex; gap: 4px; }
.tab {
  display: inline-flex; align-items: center;
  padding: 12px 18px;
  font-size: 14.5px; font-weight: 700;
  color: var(--chu-nhat);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
.tab:hover { color: var(--do); }
.tab.tab-dang-mo { color: var(--do); border-bottom-color: var(--do); cursor: default; }

/* ---------- Nút ---------- */
.nut {
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.nut-chinh { background: var(--grad-do-hong); color: #fff; }
.nut-chinh:hover { filter: brightness(0.92); }
.nut-phu {
  background: #fff; color: var(--do);
  border: 1.5px solid transparent;
  background-image: linear-gradient(#fff, #fff), var(--grad-do-hong);
  background-origin: border-box; background-clip: padding-box, border-box;
}
.nut-phu:hover { background-image: linear-gradient(var(--nen), var(--nen)), var(--grad-do-hong); }
a.nut { display: inline-flex; align-items: center; text-decoration: none; }

.dau-trang-nut { flex: none; display: flex; align-items: center; gap: 8px; }
.nut-xoa { background: #fff; color: var(--do); border: 1px solid var(--do); }
.nut-xoa:hover { background: #fdf1f0; }
.nut-nho {
  padding: 6px 12px;
  font-size: 12.5px;
  background: #fff;
  color: var(--do);
  border: 1px solid var(--do);
  border-radius: 999px;
}
.nut-nho:hover { background: #fdf1f0; }

/* ---------- Thanh công cụ — nay nằm trong khối dính đầu trang (.dau-trang-dinh), không còn ở <main> ---------- */
.thanh-cong-cu-vien { background: var(--nen-khoi); border-bottom: 1px solid var(--vien); }
.thanh-cong-cu {
  padding: 14px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.o-tim {
  flex: 1 1 240px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--vien);
  border-radius: 6px;
  font-size: 14px;
  background: var(--nen-khoi);
}
.bo-loc { display: flex; gap: 6px; flex-wrap: wrap; }
.loc {
  border: 1px solid var(--vien);
  background: var(--nen-khoi);
  color: var(--chu-nhat);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13px;
  cursor: pointer;
}
.loc.dang-chon { background: var(--grad-do-hong); color: #fff; border-color: transparent; }

/* Nút khoá/mở tick — xám khi đang khoá (trạng thái mặc định, an toàn), xanh khi đã mở */
.nut-khoa {
  border: 1px solid var(--vien); background: #fff; color: var(--chu-nhat);
  border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 700;
}
.nut-khoa:hover { background: var(--nen); }
.nut-khoa.nut-khoa-dang-mo { border-color: var(--xong); color: var(--xong); background: #eafaf2; }

.o-xong:disabled { cursor: not-allowed; opacity: 0.45; }
.dem { margin-left: 4px; font-weight: 700; }
.dem-do { color: var(--do); }
.loc.dang-chon .dem-do { color: #ffd9ea; }

/* ---------- Trường ngang / trường dọc — đo theo mẫu KÍNH GỬI / TRÌNH BÀY của slide MSH ---------- */
.nhan-truong {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--do);
}
.truong-ngang {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.truong-ngang .nhan-truong { flex: none; }
.gia-tri-ngang { font-size: 13.5px; font-weight: 700; color: var(--den); }

.truong-doc { display: flex; flex-direction: column; gap: 4px; }

/* ---------- Danh sách buổi (gộp) ---------- */
.danh-sach-buoi { display: flex; flex-direction: column; gap: 14px; margin: 16px 0 28px; }

.khoi-buoi {
  background: var(--nen-khoi);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  overflow: hidden;
}

.buoi-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 0;
}
.buoi-ngay-badge {
  border: 1px solid var(--vien);
  border-radius: 6px;
  padding: 4px 10px;
}
.buoi-thao-tac { flex: none; display: flex; align-items: center; gap: 8px; }
.buoi-thao-tac .nut-sua {
  border: 1px solid var(--do); background: #fff; cursor: pointer;
  font-size: 14px; color: var(--do); padding: 6px 9px; border-radius: 6px;
}
.buoi-thao-tac .nut-sua:hover { background: #fdf1f0; }

/* Dòng chú thích nội dung CHỈ hiện trên điện thoại — trên máy tính, nội dung đã là cột đầu
   của bảng (xem .cot-noi-dung); rowspan không có tác dụng khi bảng đổi thành thẻ trên điện thoại
   nên cần dòng riêng này để không mất ngữ cảnh (xem ghi chú trong app.js). */
.buoi-noi-dung-mobile { display: none; }
.buoi-noi-dung { font-size: 15.5px; font-weight: 700; color: var(--den); text-wrap: pretty; }

.cot-noi-dung {
  font-weight: 700;
  border-right: 1px solid var(--hong);
  width: 26%;
}

.bang-hanh-dong { width: 100%; border-collapse: collapse; }
.bang-hanh-dong thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--chu-nhat);
  padding: 9px 16px;
  border-bottom: 1px solid var(--vien);
  white-space: nowrap;
}
.bang-hanh-dong tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--vien);
  vertical-align: top;
  font-size: 14px;
}
.bang-hanh-dong tbody tr:last-child td { border-bottom: none; }
.bang-hanh-dong tbody tr:hover { background: var(--nen); cursor: pointer; }

.cot-xong { width: 40px; text-align: center; }
.cot-xong input { width: 18px; height: 18px; cursor: pointer; }

/* Nhãn trạng thái — viền màu chữ màu, KHÔNG tô nền (đúng quy ước "hạn chế nền màu") */
.nhan-trang-thai {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: #fff;
}
.nhan-da-xong { color: var(--xong); }
.nhan-qua-han { color: var(--do); }
.nhan-dang-lam { color: var(--chu-nhat); }

tr.dong-qua-han td.cot-han { color: var(--do); font-weight: 700; }
tr.dong-da-xong td.cot-mo-ta,
tr.dong-da-xong td.cot-nguoi { color: var(--chu-nhat); text-decoration: line-through; }

.rong-trang { padding: 40px 20px; text-align: center; color: var(--chu-nhat); }

/* Trang khung trống (vd "Nội dung đào tạo online" — chưa có nội dung) */
.khung-trong-trang { padding: 60px 20px; text-align: center; }
.khung-trong-icon { font-size: 40px; margin: 0 0 8px; }
.khung-trong-tieu-de { font-size: 18px; font-weight: 800; color: var(--do); margin: 0 0 8px; }
.khung-trong-mo-ta { color: var(--chu-nhat); max-width: 520px; margin: 0 auto; }

/* Khung buổi CHƯA có hành động — lịch tạo sẵn cho buổi sắp tới (xem app.js, "khungRong") */
.cho-dien { color: var(--chu-nhat); font-style: italic; font-weight: 400; }
.khoi-buoi-rong { border-style: dashed; }
.o-trong-hanh-dong { padding: 16px !important; text-align: center; color: var(--chu-nhat); font-style: italic; }

/* ---------- Chân trang — đo theo footer "SÔNG HỒNG · tên tài liệu" của Sales Kit, bỏ số trang ---------- */
.chan-trang {
  padding: 16px 0 40px;
  border-top: 1px solid var(--hong);
  margin-top: 8px;
}
.chan-trang-boc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding-top: 14px;
  color: var(--chu-nhat);
  font-size: 12px;
}
.chan-trang-logo { font-weight: 800; color: var(--hong); letter-spacing: 0.03em; }

/* ---------- Form trượt ---------- */
.man-che {
  position: fixed; inset: 0;
  background: rgba(20, 24, 33, 0.45);
  z-index: 20;
}
.form-truot {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(460px, 100%);
  background: var(--nen-khoi);
  z-index: 21;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 24px rgba(0,0,0,0.12);
}
.man-che.an, .form-truot.an { display: none !important; }

.form-dau {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 2px solid var(--hong);
  flex: none;
}
.form-dau h2 { margin: 0; font-size: 17px; color: var(--do); font-weight: 800; }
.nut-dong { border: none; background: transparent; font-size: 18px; cursor: pointer; color: var(--chu-nhat); }

#form-buoi { padding: 18px 20px; overflow-y: auto; }
.nhan { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; margin: 14px 0 6px; color: var(--den); }
.nhan:first-child { margin-top: 0; }
.nhan-nho { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--do); margin: 0 0 4px; }
.bat-buoc { color: var(--do); }
.nhan-checkbox { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.nhan-checkbox input { width: 17px; height: 17px; }
.nhan-checkbox-nho { font-size: 12.5px; font-weight: 500; }
.nhan-checkbox-nho input { width: 15px; height: 15px; }

#form-buoi input[type="text"],
#form-buoi input[type="date"],
#form-buoi textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--vien);
  border-radius: 6px;
  font-size: 16px; /* dưới 16px iOS tự phóng to trang khi focus */
  font-family: inherit;
  resize: vertical;
  color: var(--den);
}
#form-buoi input:focus, #form-buoi textarea:focus {
  outline: none;
  border-color: var(--do);
  box-shadow: 0 0 0 3px rgba(180,35,24,0.12);
}

.loi { color: var(--do); font-size: 12.5px; margin: 6px 0 0; }
.ghi-chu-nho { color: var(--chu-nhat); font-size: 12.5px; margin: 8px 0 0; font-style: italic; }
.ghi-chu-to { font-size: 13.5px; font-style: normal; margin: 0; }
.thanh-cong-cu-don { justify-content: space-between; }

/* Dòng chân card ở trang "Nội dung đào tạo online" — chỉ để BIẾT có bao nhiêu hành động, không
   bấm được gì ở đây (quản lý hành động là việc của tab "Hành động triển khai"). */
.buoi-chan-hd {
  padding: 8px 16px 12px;
  font-size: 12.5px;
  color: var(--chu-nhat);
  border-top: 1px solid var(--vien);
}
.an { display: none !important; }

.form-ngan-cach {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--hong);
  font-size: 13px; font-weight: 700;
}

.dong-hd-form {
  border: 1px solid var(--vien);
  border-radius: 6px;
  padding: 12px;
  margin-top: 10px;
  background: var(--nen);
}
.dong-hd-form-luoi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dong-hd-form-luoi > div:first-child { grid-column: 1 / -1; }
.dong-hd-form-phu {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px;
}
.nut-xoa-dong {
  border: none; background: transparent; color: var(--do);
  font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 4px 6px;
}
.nut-xoa-dong:hover { text-decoration: underline; }

.form-nut {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--vien);
}

/* ---------- Điện thoại ---------- */
@media (max-width: 760px) {
  .boc { padding: 0 14px; }

  /* Dưới 760px: bỏ lưới 3 cột, xếp dọc — logo Sông Hồng trên cùng, tiêu đề giữa, logo TRUNGNQ dưới
     cùng (đủ chỗ đọc tên chương trình dài, khỏi ép 3 cột chật trên màn hẹp). */
  .dau-trang-boc { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .ten-app { order: 2; }
  .logo-song-hong { order: 1; justify-self: unset; }
  .dau-trang-logo-phai { order: 3; justify-self: unset; }
  .ten-app strong { font-size: 17px; }

  .buoi-dau { flex-wrap: wrap; }

  .buoi-noi-dung-mobile {
    display: block;
    padding: 10px 16px 14px;
    border-bottom: 1px solid var(--hong);
  }

  .bang-hanh-dong thead { display: none; }
  /* Độ đặc trưng phải cao hơn ".bang-hanh-dong tbody td" (đã vấp đúng bẫy này ở lượt trước —
     xem mục 8.2 nhật ký dự án) — nếu chỉ viết ".cot-noi-dung{display:none}" thì luật chung
     "display:block" của "td" sẽ thắng, ô rowspan vẫn hiện ra đè lên thẻ đầu tiên của buổi. */
  .bang-hanh-dong tbody td.cot-noi-dung { display: none; } /* rowspan không còn ý nghĩa khi bảng đổi thành thẻ — dùng .buoi-noi-dung-mobile ở trên thay thế */
  .bang-hanh-dong, .bang-hanh-dong tbody { display: block; width: 100%; }
  .bang-hanh-dong tbody tr {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding: 12px 44px 12px 16px; /* chừa chỗ bên phải cho ô tick tuyệt đối */
    border-bottom: 1px solid var(--vien);
  }
  .bang-hanh-dong tbody tr:last-child { border-bottom: none; }
  .bang-hanh-dong tbody td {
    display: block;
    width: 100%;
    border-bottom: none;
    padding: 3px 0;
  }
  .bang-hanh-dong tbody td.cot-xong {
    position: absolute;
    top: 12px;
    right: 16px;
    width: auto;
    padding: 0;
  }
  .cot-mo-ta { font-weight: 600; }
  .cot-nguoi::before { content: "Phụ trách: "; color: var(--chu-nhat); font-weight: 600; }

  .dong-hd-form-luoi { grid-template-columns: 1fr; }
}