/* =========================================================================
   InnoSME Vietnam - Kiểu dùng chung cho website mẫu theo ngách

   Chỉ chứa phần "khung xe" (thanh demo, lưới cơ bản) dùng lại ở cả 20 giao
   diện ngành. Mỗi ngành tự viết thêm kiểu riêng cho bố cục đặc thù của mình
   ngay trong tệp demo/nganh-{mã}.php — không nhét kiểu riêng của ngành vào đây.

   @copyright Bản quyền thuộc về nhà phát triển. Phần mềm thương mại, không phải mã nguồn mở.
   ========================================================================= */

/* ------------------------------------------------- Thanh báo bản mẫu */
/* Một hàng ngang duy nhất ở khổ máy tính: nhãn bản mẫu bên trái, cụm lối đi bên
   phải. Chữ được cắt bằng dấu ba chấm thay vì cho xuống dòng, vì thanh này dính
   trên đỉnh — cao thêm một dòng là che mất đầu trang của website bên dưới. */
.dm-bang {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px; background: var(--ino-nen-dam); color: #fff; font-size: 13px;
}
.dm-bang strong { color: #fff; }
.dm-bang a { color: #fff; text-decoration: underline; }
.dm-nhan-mau {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-giua, .dm-phai { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.dm-giua { margin-left: auto; }
.dm-phai { padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .2); }
.dm-chon {
  max-width: 190px; padding: 5px 9px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1);
  color: #fff; font-size: 12.5px;
}
.dm-chon option { color: var(--ino-chu); }

/* Khổ hẹp: cho phép xuống dòng và giấu bớt phần phụ để thanh không chiếm hết màn */
@media (max-width: 1180px) {
  .dm-bang { flex-wrap: wrap; }
  .dm-nhan-mau { flex: 1 1 100%; }
  /* Cho hai cụm co và tự xuống dòng, nếu không chúng đẩy trang tràn ngang */
  .dm-giua, .dm-phai { flex-wrap: wrap; flex-shrink: 1; min-width: 0; }
  .dm-giua { margin-left: 0; }
}
@media (max-width: 620px) {
  /* Trên điện thoại thanh này chiếm tới ba dòng. Bỏ dính để nó cuộn đi, không
     chiếm mất một phần tư màn hình suốt cả trang. */
  .dm-bang { position: static; gap: 7px; padding: 8px 12px; }
  .dm-bang .dm-ve-nganh { display: none; }
  .dm-phai { padding-left: 0; border-left: 0; }
  .dm-chon { max-width: 100%; flex: 1 1 100%; }
}

/* Nút chuyển giữa hai tầng website mẫu — nổi hơn các liên kết còn lại vì đây là
   hành động chính chúng ta muốn khách bấm sau khi đã ưng phần nhìn. */
.dm-bang .dm-nut-tang {
  padding: 5px 12px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  font-weight: 700; font-size: 12.5px; background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .34);
}
.dm-bang .dm-nut-tang:hover { background: rgba(255, 255, 255, .3); text-decoration: none; }
/* Nút dẫn tới bản dùng thử — sáng hơn hẳn vì đây là hành động chúng ta muốn nhất */
.dm-bang .dm-nut-tang.noi-bat { background: #16A34A; border-color: #16A34A; }
.dm-bang .dm-nut-tang.noi-bat:hover { background: #15803D; }

/* ------------------------------------------------------- Khối cơ bản */
.dm-bia { padding: 52px 0 42px; background: var(--ino-nen-phu); border-bottom: 1px solid var(--ino-vien); }
.dm-bia h1 { font-size: clamp(27px, 3.3vw, 40px); font-weight: 800; letter-spacing: -.03em; margin: 10px 0 14px; }
.dm-bia p { max-width: 760px; color: var(--ino-chu-mo); font-size: 16.5px; }
.dm-nut-hang { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

.dm-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.dm-the {
  padding: 20px; border: 1px solid var(--ino-vien);
  border-radius: var(--ino-goc-nho); background: var(--ino-nen);
}
.dm-the h3 { margin: 0 0 6px; font-size: 16px; }
.dm-the p { margin: 0; font-size: 13.5px; color: var(--ino-chu-mo); line-height: 1.55; }

/* Quy trình dạng bước có số */
.dm-buoc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.dm-buoc li { position: relative; padding-top: 44px; }
.dm-so {
  position: absolute; top: 0; left: 0; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ino-chinh); color: #fff; font-weight: 800; font-size: 14px;
}
.dm-buoc p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ino-chu-mo); }

/* Bảng từ vựng của ngách */
.dm-tu-vung { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.dm-tu-vung div { padding: 14px 16px; border: 1px solid var(--ino-vien); border-radius: var(--ino-goc-nho); }
.dm-tu-vung small { display: block; font-size: 12px; color: var(--ino-chu-nhat); margin-bottom: 3px; }
.dm-tu-vung strong { font-size: 15px; color: var(--ino-chu); }

/* Tiêu đề chỉ dành cho trình đọc màn hình — dùng khi bố cục ngành không có
   chỗ đặt tiêu đề lớn hiển thị (ví dụ màn đầu chẻ đôi của ngành tuyển dụng),
   nhưng mỗi trang vẫn phải có đúng một thẻ h1 để đọc và tìm kiếm hiểu được. */
.dm-an {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------- Pop-up liên hệ trên trang mẫu */
/* Khung này nằm đè lên website của khách nên dùng bảng màu trung tính riêng,
   không mượn màu thương hiệu của trang bên dưới. */
.dm-lh {
  width: min(520px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px;
  background: #fff; color: #14202B; box-shadow: 0 30px 80px rgba(9, 20, 33, .35);
  font-family: inherit; font-size: 14.5px; line-height: 1.55;
}
.dm-lh::backdrop { background: rgba(9, 20, 33, .55); }
.dm-lh-hop { display: block; margin: 0; }
.dm-lh-dau { display: flex; gap: 12px; align-items: flex-start; padding: 20px 22px 14px; }
.dm-lh-dau h2 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.02em; color: #14202B; }
.dm-lh-dau p { margin: 0; font-size: 13.5px; color: #5A6B7A; }
.dm-lh-dong {
  margin-left: auto; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid #E1E8EF; background: #fff; color: #5A6B7A;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.dm-lh-dong:hover { background: #F2F5F8; color: #14202B; }

.dm-lh-than { padding: 4px 22px 6px; display: grid; gap: 12px; }
.dm-lh-hang { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dm-lh-truong { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dm-lh-truong label { font-size: 12.5px; font-weight: 600; color: #5A6B7A; }
.dm-lh-truong label span { color: #DC2626; }
.dm-lh-truong input, .dm-lh-truong textarea {
  width: 100%; padding: 9px 12px; border: 1px solid #E1E8EF; border-radius: 10px;
  background: #fff; color: #14202B; font-family: inherit; font-size: 14px; resize: vertical;
}
.dm-lh-truong input:focus, .dm-lh-truong textarea:focus {
  outline: 2px solid #2563EB; outline-offset: 1px; border-color: #2563EB;
}
.dm-lh-goi-y { margin: -4px 0 0; font-size: 12px; color: #8D9AA8; }
.dm-lh-bay { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.dm-lh-bao { margin: 0; font-size: 13.5px; font-weight: 600; min-height: 1px; }
.dm-lh-bao.ok { color: #15803D; }
.dm-lh-bao.loi { color: #B91C1C; }

.dm-lh-chan {
  display: flex; gap: 9px; justify-content: flex-end;
  padding: 14px 22px 20px; margin-top: 6px;
}
.dm-lh-nut {
  padding: 10px 18px; border-radius: 10px; border: 1px solid #E1E8EF; background: #fff;
  color: #14202B; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.dm-lh-nut:hover { background: #F2F5F8; }
.dm-lh-nut.chinh { background: #2563EB; border-color: #2563EB; color: #fff; }
.dm-lh-nut.chinh:hover { background: #1D4ED8; }
.dm-lh-nut[disabled] { opacity: .6; cursor: default; }

/* Nút mở pop-up là thẻ button nên phải gột sạch kiểu mặc định của trình duyệt */
.dm-bang button.dm-nut-tang { cursor: pointer; font-family: inherit; color: #fff; }

@media (max-width: 520px) {
  .dm-lh-hang { grid-template-columns: 1fr; }
}