/* ==================================================================
   Thành phần giao diện dùng chung
   ================================================================== */

/* ---------------------------- Nút --------------------------- */

.nut {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.62em 1.25em;
  border-radius: var(--r);
  border: 1px solid var(--vien-dam);
  background: var(--nen-the);
  color: var(--chu);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.16s, color 0.16s, border-color 0.16s, transform 0.1s, box-shadow 0.16s;
  white-space: nowrap;
}

.nut:hover:not(:disabled) {
  border-color: var(--vang);
  background: var(--vang-mo);
  color: var(--chu);
}

.nut:active:not(:disabled) { transform: translateY(1px); }

.nut:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.nut-chinh {
  background: linear-gradient(175deg, var(--son-sang), var(--son) 55%, var(--son-dam));
  border-color: var(--son-dam);
  color: #fff5e8;
  box-shadow: var(--bong-1), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.nut-chinh:hover:not(:disabled) {
  background: linear-gradient(175deg, var(--son), var(--son-dam));
  color: #fff5e8;
  border-color: var(--son-dam);
  box-shadow: var(--bong-2), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.nut-vang {
  background: linear-gradient(175deg, var(--vang-sang), var(--vang) 60%, var(--vang-dam));
  border-color: var(--vang-dam);
  color: #33260a;
  box-shadow: var(--bong-1), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.nut-vang:hover:not(:disabled) { filter: brightness(1.05); color: #33260a; }

.nut-nhe {
  background: transparent;
  border-color: transparent;
  color: var(--chu-phu);
  padding-inline: 0.7em;
}

.nut-nhe:hover:not(:disabled) {
  background: var(--vang-mo);
  color: var(--chu);
  border-color: transparent;
}

.nut-nguy {
  border-color: color-mix(in srgb, var(--son) 45%, transparent);
  color: var(--son);
}

.nut-nguy:hover:not(:disabled) {
  background: var(--son);
  color: #fff5e8;
  border-color: var(--son);
}

.nut-nho { font-size: 0.82rem; padding: 0.4em 0.8em; }
.nut-to { font-size: 1rem; padding: 0.8em 1.7em; }
.nut-rong { width: 100%; }

.nhom-nut { display: flex; gap: 0.55rem; flex-wrap: wrap; }

/* --------------------------- Thẻ ---------------------------- */

.the {
  background: var(--nen-the);
  border: 1px solid var(--vien);
  border-radius: var(--r-lg);
  padding: 1.35rem 1.5rem;
  box-shadow: var(--bong-1);
  position: relative;
}

.the-nhan {
  position: absolute;
  top: -0.62rem;
  left: 1.35rem;
  background: var(--nen-the);
  padding-inline: 0.6rem;
  color: var(--son);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Thẻ nổi bật: dải son bên trái */
.the-trong {
  border-left: 3px solid var(--son);
}

.the-vang { border-color: var(--vang); box-shadow: var(--bong-1), 0 0 0 3px var(--vang-mo); }

/* --------------------------- Huy hiệu ------------------------ */

.huy {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-ui);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.22em 0.65em;
  border-radius: 100px;
  border: 1px solid var(--vien-dam);
  background: var(--vang-mo);
  color: var(--chu-phu);
  white-space: nowrap;
}

.huy-son { background: var(--son-mo); border-color: color-mix(in srgb, var(--son) 40%, transparent); color: var(--son); }
.huy-vang { background: var(--vang-mo); border-color: var(--vang); color: var(--vang-dam); }
.huy-lam { background: color-mix(in srgb, var(--lam) 12%, transparent); border-color: color-mix(in srgb, var(--lam) 40%, transparent); color: var(--lam); }
.huy-la { background: color-mix(in srgb, var(--la) 12%, transparent); border-color: color-mix(in srgb, var(--la) 40%, transparent); color: var(--la); }

/* "Đời thứ N" — con dấu tròn nhỏ */
.doi-so {
  display: inline-grid;
  place-items: center;
  min-width: 2.1rem;
  height: 2.1rem;
  padding-inline: 0.4rem;
  border-radius: 50%;
  background: var(--son);
  color: #fff5e8;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 0 0 2.5px var(--nen-the), 0 0 0 4px var(--vang);
  flex: none;
}

/* ------------------------- Biểu mẫu -------------------------- */

.truong {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.truong > label,
.nhan-truong {
  font-family: var(--font-ui);
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--chu-phu);
  text-transform: uppercase;
}

input[type='text'],
input[type='password'],
input[type='number'],
input[type='date'],
input[type='email'],
input[type='tel'],
input[type='search'],
select,
textarea {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  color: var(--chu);
  background: var(--giay-sang);
  border: 1px solid var(--vien-dam);
  border-radius: var(--r);
  padding: 0.58em 0.75em;
  width: 100%;
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}

:root[data-theme='toi'] input,
:root[data-theme='toi'] select,
:root[data-theme='toi'] textarea {
  background: var(--giay-nhat);
  color-scheme: dark;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--vang);
  box-shadow: 0 0 0 3px var(--vang-mo);
  background: var(--nen-the);
}

textarea { resize: vertical; min-height: 5.5rem; line-height: 1.7; }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--chu-mo) 50%),
    linear-gradient(135deg, var(--chu-mo) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.hop-chon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  cursor: pointer;
}

.hop-chon input[type='checkbox'],
.hop-chon input[type='radio'] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--son);
  flex: none;
  cursor: pointer;
}

.luoi-truong {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 0.9rem 1.1rem;
}

.goi-y-truong { font-size: 0.78rem; color: var(--chu-mo); font-family: var(--font-ui); }

fieldset {
  border: 1px solid var(--vien);
  border-radius: var(--r);
  padding: 1rem 1.15rem 1.2rem;
  margin: 0 0 1.1rem;
}

legend {
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--son);
  padding-inline: 0.5rem;
}

/* -------------------------- Bảng ----------------------------- */

.bang-bao { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--vien); }

table.bang {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  background: var(--nen-the);
}

table.bang th {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--son);
  background: var(--vang-mo);
  padding: 0.7rem 0.85rem;
  white-space: nowrap;
  border-bottom: 1.5px solid var(--vang);
}

table.bang td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--vien);
  vertical-align: top;
}

table.bang tbody tr:last-child td { border-bottom: none; }
table.bang tbody tr:hover { background: var(--vang-mo); }

/* -------------------------- Thông báo ------------------------ */

.bao-tin {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.8rem 1rem;
  border-radius: var(--r);
  border: 1px solid var(--vien-dam);
  background: var(--vang-mo);
  font-size: 0.93rem;
  line-height: 1.6;
}

.bao-tin-loi { border-color: var(--son); background: var(--son-mo); color: var(--son-dam); }
:root[data-theme='toi'] .bao-tin-loi { color: var(--son-sang); }
.bao-tin-ok { border-color: var(--la); background: color-mix(in srgb, var(--la) 12%, transparent); }

/* Thông báo nổi góc màn hình */
/* Đặt bên trái: góc dưới phải là chỗ của nút "Lưu" trong các hộp thoại,
   thông báo nổi mà nằm đó sẽ che mất nút. */
#khay-thong-bao {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: min(94vw, 380px);
  pointer-events: none;
}

.thong-bao { pointer-events: auto; }

.thong-bao {
  background: var(--nen-the);
  border: 1px solid var(--vien-dam);
  border-left: 4px solid var(--vang);
  border-radius: var(--r);
  padding: 0.75rem 1rem;
  box-shadow: var(--bong-2);
  font-size: 0.92rem;
  animation: truot-vao 0.28s ease-out;
}

.thong-bao.loi { border-left-color: var(--son); }
.thong-bao.ok { border-left-color: var(--la); }

@keyframes truot-vao {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: none; }
}

/* -------------------------- Hộp thoại ------------------------ */

.man-che {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(42, 33, 24, 0.55);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 1rem;
  animation: hien 0.2s ease-out;
  overflow-y: auto;
}

@keyframes hien { from { opacity: 0; } to { opacity: 1; } }

.hop-thoai {
  background: var(--nen-the);
  border: 1px solid var(--vang);
  border-radius: var(--r-lg);
  box-shadow: var(--bong-3);
  width: min(100%, 760px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  animation: noi-len 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
  margin: auto;
}

.hop-thoai.rong { width: min(100%, 1020px); }
.hop-thoai.gon { width: min(100%, 480px); }

@keyframes noi-len {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.hop-thoai-dau {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.4rem;
  border-bottom: 1px solid var(--vien);
  background: linear-gradient(var(--vang-mo), transparent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.hop-thoai-dau h3 { margin: 0; flex: 1; font-size: 1.2rem; }

.hop-thoai-than {
  padding: 1.3rem 1.4rem;
  overflow-y: auto;
  flex: 1;
}

.hop-thoai-chan {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.95rem 1.4rem;
  border-top: 1px solid var(--vien);
  background: var(--giay-nhat);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  flex-wrap: wrap;
}

.nut-dong {
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--chu-mo);
  cursor: pointer;
  padding: 0.15rem 0.45rem;
  border-radius: var(--r-sm);
}

.nut-dong:hover { color: var(--son); background: var(--son-mo); }

/* -------------------------- Chân dung ------------------------ */

.chan-dung {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--vang);
  background: var(--giay-nhat);
  flex: none;
  box-shadow: var(--bong-1);
}

.chan-dung.to { width: 132px; height: 132px; border-width: 3px; }
.chan-dung.nho { width: 40px; height: 40px; }

/* Ảnh thay thế khi không có: chữ cái đầu trên nền gỗ */
.chan-dung-chu {
  display: grid;
  place-items: center;
  font-family: var(--font-title);
  font-weight: 700;
  color: var(--nen-the);
  background: linear-gradient(150deg, var(--go), var(--go-dam));
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}

.chan-dung-chu.to { font-size: 3rem; }
.chan-dung-chu.nho { font-size: 0.95rem; }
.chan-dung-chu.nu { background: linear-gradient(150deg, var(--son), var(--son-dam)); }

/* -------------------------- Trạng thái ----------------------- */

.trong-rong {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--chu-mo);
}

.trong-rong .bieu-tuong { font-size: 2.4rem; opacity: 0.4; margin-bottom: 0.5rem; }

.dang-tai {
  display: grid;
  place-items: center;
  padding: 4rem 1rem;
  gap: 1rem;
  color: var(--chu-mo);
}

.vong-quay {
  width: 34px;
  height: 34px;
  border: 3px solid var(--vien-dam);
  border-top-color: var(--son);
  border-radius: 50%;
  animation: quay 0.85s linear infinite;
}

@keyframes quay { to { transform: rotate(360deg); } }

/* --------------------------- Tab ----------------------------- */

.thanh-tab {
  display: flex;
  gap: 0.2rem;
  border-bottom: 1px solid var(--vien-dam);
  overflow-x: auto;
  scrollbar-width: thin;
}

.tab {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.65em 1.1em;
  border: none;
  background: none;
  color: var(--chu-phu);
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}

.tab:hover { color: var(--son); }
.tab[aria-selected='true'] { color: var(--son); border-bottom-color: var(--son); }

/* ------------------------ Thanh cuộn ------------------------- */

* { scrollbar-width: thin; scrollbar-color: var(--vien-dam) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--vien-dam); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--go); background-clip: content-box; }

/* Hoa sen trong huy hiệu "Đã khuất" */
.huy .dau-da-mat.ct { flex: none; }

/* ======================= Kho tư liệu ============================== */

/* Ô chọn tệp đính kèm (video, PDF…) */
.tep-o {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  border: 1px dashed var(--vien-dam);
  border-radius: var(--r);
  padding: 0.6rem 0.75rem;
  background: var(--giay-nhat);
}

.tep-o .tep-ten {
  flex: 1 1 12rem;
  min-width: 0;
  font-size: 0.88rem;
  color: var(--chu-phu);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.45;
}

/* Thanh tiến trình tải lên — video 300MB không có nó thì tưởng máy treo */
.tien-trinh {
  flex: 1 1 100%;
  height: 6px;
  border-radius: 4px;
  background: var(--vien);
  overflow: hidden;
}

.tien-trinh > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--son), var(--vang));
  transition: width 0.15s linear;
}

/* Thanh sức chứa kho */
.kho-thanh {
  height: 14px;
  border-radius: 8px;
  background: var(--giay-nhat);
  border: 1px solid var(--vien-dam);
  overflow: hidden;
}

.kho-thanh > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--la), var(--vang));
  transition: width 0.3s;
}

.kho-thanh > span.day { background: linear-gradient(90deg, var(--son), var(--son-dam)); }

/* Trình phát video tải lên */
.video-ta {
  width: 100%;
  max-height: 70vh;
  border-radius: var(--r);
  background: #000;
  display: block;
}

/* Khung nhúng YouTube/Drive — giữ tỷ lệ 16:9 ở mọi bề ngang */
.khung-nhung {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
}

.khung-nhung iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ======================= Thư mục tư liệu ========================== */

/* --- Trong Quản trị: danh sách thư mục dạng hàng --- */
.luoi-thu-muc { display: grid; gap: 0.6rem; }

.the-thu-muc {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid var(--vien);
  border-left: 3px solid var(--vang);
  border-radius: var(--r);
  padding: 0.6rem 0.85rem;
  background: var(--nen-the);
}

.the-thu-muc .tm-than { flex: 1; min-width: 0; }
.the-thu-muc .tm-than strong { display: block; line-height: 1.4; }

.the-thu-muc .tm-bia,
.o-thu-muc .tm-bia {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: var(--r);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--giay-nhat);
  border: 1px solid var(--vien);
  font-size: 1.5rem;
}

.the-thu-muc .tm-bia img,
.o-thu-muc .tm-bia img { width: 100%; height: 100%; object-fit: cover; }

/* Thanh tiến trình khi tải cả tập ảnh */
.tai-hang-loat { margin-top: 0.8rem; }
.tai-hang-loat .tien-trinh { flex: none; margin-bottom: 0.35rem; }

/* --- Phía người xem: thư mục dạng ô --- */
.luoi-thu-muc-xem {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 0.9rem;
}

.o-thu-muc {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--vien);
  border-radius: var(--r-lg);
  background: var(--nen-the);
  padding: 0.7rem;
  box-shadow: var(--bong-1);
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.12s;
}

.o-thu-muc:hover {
  border-color: var(--vang);
  box-shadow: var(--bong-2);
  transform: translateY(-2px);
}

.o-thu-muc .tm-bia {
  width: 100%;
  height: 116px;
  margin-bottom: 0.55rem;
  font-size: 2rem;
}

.o-thu-muc .tm-ten {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.96rem;
  line-height: 1.36;
  /* Tên sự kiện có thể dài — cho hai dòng rồi mới cắt */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.o-thu-muc .tm-phu {
  font-family: var(--font-ui);
  font-size: 0.73rem;
  color: var(--chu-mo);
  margin-top: 0.2rem;
  line-height: 1.4;
}

@media (max-width: 560px) {
  /* Thẻ thư mục ở phía người xem dùng CHUNG một kiểu với máy tính — cùng bìa
     116px, cùng khoảng cách, cùng cỡ chữ. Chỉ số cột là tự đổi theo bề ngang
     màn hình, đó là điều không tránh được. Trước đây tôi thu bìa còn 96px và
     bóp khoảng cách lại, làm giao diện điện thoại trông khác hẳn bản web.
     Chỉ hàng thư mục TRONG QUẢN TRỊ mới cần xuống dòng cho vừa màn. */
  .the-thu-muc { flex-wrap: wrap; }
  .the-thu-muc .tm-than { flex: 1 1 100%; order: 2; }
}

/* Tiêu đề năm nằm chung lưới với các ô thư mục — phải chiếm trọn một hàng,
   nếu không nó sẽ chen vào làm một ô. */
.luoi-thu-muc-xem .moc-nam {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0.1rem;
}

.luoi-thu-muc-xem .moc-nam:first-child { margin-top: 0; }

/* Nút "Xem thêm" dưới mỗi khu */
.xem-them {
  margin-top: 1rem;
  border-style: dashed;
  color: var(--son);
  font-size: 0.88rem;
}

.xem-them:hover:not(:disabled) {
  border-style: solid;
  background: var(--son-mo);
  border-color: var(--son);
  color: var(--son);
}

/* Huy hiệu liệt sĩ: nền son, sao vàng — đúng sắc cờ Tổ quốc */
.huy-ls {
  background: var(--son-mo);
  border-color: color-mix(in srgb, var(--son) 55%, transparent);
  color: var(--son);
  font-weight: 600;
}

.huy .dau-liet-si.ct { flex: none; }