/* ============================================================
   web.css — bố cục bản web: dải nhắc, header, điều hướng trái,
   vùng nội dung. Chuẩn dựng 1440 × 900, kiểm thêm 1280 × 800.
   ============================================================ */

body.web {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */
.dinh {
  display: flex;
  align-items: center;
  gap: var(--kc-6);
  height: var(--cao-header);
  padding: 0 var(--kc-6);
  background: var(--n-mat);
  border-bottom: var(--vien) solid var(--v-dam);
  position: sticky;
  top: 0;
  z-index: 20;
}

.dinh__ten {
  display: flex;
  align-items: baseline;
  gap: var(--kc-4);
  font-size: var(--cc-5);
  font-weight: var(--dam-manh);
  color: var(--ch-chinh);
  letter-spacing: -0.005em;
}
.dinh__ten a { color: inherit; }
.dinh__ten a:hover { border-bottom-color: transparent; }

.nhan-ban-mau {
  font-size: var(--cc-1);
  font-weight: var(--dam-vua);
  letter-spacing: 0.02em;
  color: var(--ch-phu);
  border: var(--vien) solid var(--v-dam);
  border-radius: var(--bo-1);
  padding: 1px var(--kc-3);
}

.dinh__giua { margin-left: auto; }

.dinh__phai {
  display: flex;
  align-items: center;
  gap: var(--kc-5);
}

/* Hai bộ chọn này là công cụ của bản mẫu, không phải tính năng:
   vai trò đang xem, và trạng thái màn hình đang xem. */
.chon-vai-tro,
.chon-che-do {
  display: flex;
  align-items: center;
  gap: var(--kc-4);
  font-size: var(--cc-2);
  color: var(--ch-mo);
  white-space: nowrap;
}
.chon-vai-tro .o-chon,
.chon-che-do .o-chon { height: 28px; font-size: var(--cc-3); }

/* ------------------------------------------------------------
   Khung: điều hướng trái + nội dung
   ------------------------------------------------------------ */
.khung {
  flex: 1;
  display: grid;
  grid-template-columns: var(--rong-dieu-huong) minmax(0, 1fr);
  align-items: start;
}

.dieu-huong {
  position: sticky;
  /* Dải nhắc dữ liệu giả cuộn đi cùng trang, chỉ header dính; nên điều
     hướng dính ngay dưới header, không cộng chiều cao dải nhắc. */
  top: var(--cao-header);
  align-self: start;
  height: calc(100vh - var(--cao-header));
  overflow-y: auto;
  padding: var(--kc-6) var(--kc-5) var(--kc-9);
  border-right: var(--vien) solid var(--v-nhat);
  background: var(--n-nen);
}

.dieu-huong__nhom { margin-bottom: var(--kc-7); }
.dieu-huong__nhom-ten {
  display: flex;
  align-items: center;
  gap: var(--kc-4);
  font-size: var(--cc-2);
  font-weight: var(--dam-manh);
  color: var(--ch-phu);
  padding: 0 var(--kc-4);
  margin-bottom: var(--kc-4);
}
.dieu-huong a,
.dieu-huong span.muc {
  display: flex;
  align-items: center;
  gap: var(--kc-4);
  padding: var(--kc-3) var(--kc-4);
  border-radius: var(--bo-2);
  font-size: var(--cc-3);
  color: var(--ch-phu);
  border-bottom: 0;
  margin-bottom: 1px;
}
.dieu-huong a:hover { background: var(--n-mat-2); color: var(--ch-chinh); }
.dieu-huong a[aria-current="page"] {
  background: var(--n-mat-3);
  color: var(--ch-chinh);
  font-weight: var(--dam-vua);
}
.dieu-huong span.muc { color: var(--ch-mo); cursor: default; }
.dieu-huong .chua-dung {
  margin-left: auto;
  font-size: var(--cc-1);
  font-weight: var(--dam-thuong);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ch-mo);
  border: var(--vien) solid var(--v-nhat);
  border-radius: var(--bo-1);
  padding: 0 var(--kc-3);
  line-height: 15px;
}
.dieu-huong__nhom:has(.chua-dung) span.muc { opacity: 0.62; }

/* ------------------------------------------------------------
   Nội dung
   ------------------------------------------------------------ */
.noi-dung {
  padding: var(--kc-8) var(--kc-9) var(--kc-11);
  min-width: 0;
}

.dau-trang {
  display: flex;
  align-items: flex-start;
  gap: var(--kc-6);
  margin-bottom: var(--kc-8);
}
.dau-trang__chu { flex: 1; min-width: 0; }
.dau-trang__mo-ta {
  margin: var(--kc-3) 0 0;
  max-width: 82ch;
  color: var(--ch-phu);
  font-size: var(--cc-3);
}
.dau-trang .nhom-nut { padding-top: var(--kc-2); }

.duong-dan {
  display: flex;
  align-items: center;
  gap: var(--kc-3);
  font-size: var(--cc-2);
  color: var(--ch-mo);
  margin-bottom: var(--kc-4);
}

/* Mục trong trang bảng mẫu */
.muc-mau { margin-bottom: var(--kc-11); scroll-margin-top: calc(var(--cao-header) + var(--kc-8)); }
.muc-mau > h2 { margin-bottom: var(--kc-3); }
.muc-mau__dan {
  color: var(--ch-phu);
  font-size: var(--cc-3);
  margin-bottom: var(--kc-6);
  max-width: 82ch;
}

.luoi-hai { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kc-6); }
.luoi-ba { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kc-6); }

/* Bảng trình bày thang (cỡ chữ, khoảng cách) */
.bang-thang td { vertical-align: middle; }
.bang-thang .mau-kc { background: var(--tt-tin-chu); height: 10px; border-radius: 2px; opacity: 0.55; }

@media (max-width: 1320px) {
  .noi-dung { padding: var(--kc-8) var(--kc-7) var(--kc-11); }
  .luoi-ba { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------
   Hai cột làm việc: danh sách bên trái, chi tiết bên phải
   ------------------------------------------------------------ */
.doi-cot {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--kc-6);
  align-items: start;
}
.doi-cot__trai { position: sticky; top: calc(var(--cao-header) + var(--kc-8)); }

@media (max-width: 1320px) {
  .doi-cot { grid-template-columns: 262px minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .doi-cot { grid-template-columns: minmax(0, 1fr); }
  .doi-cot__trai { position: static; }
}