/* Lop trang CU: moi trang con dung <main class="trang"> (mac dinh cua base.html, block main_class).
   Chep nguyen van tu app.css cu (dot T5, lane uit5 04/10) khi lane uxkhung tach khung chung: chu,
   bang, form, nut cua cac trang chua dung lai. Moi luat nam duoi main.trang nen KHONG cham trang
   moi (<main class="khung-trang">). Khi khong con trang nao dung lop trang, main go dong nap tep
   nay trong base.html va xoa tep. */

/* soat dep 05/10 (goi G5): le trang, co chu, tieu de, duong dan va nut cua trang cu ANH XA ve
   dung thanh phan khung v2 (.khung-trang, --fs-h1, .duong-dan, .btn) de chuyen tu man moi sang
   man cu khong nhay vi tri tieu de, khong doi co nut. Bo cuc rieng tung trang giu nguyen. */
main.trang { width: 100%; max-width: 1280px; margin: 0; padding: 20px 28px 40px; font-size: var(--fs-md); }
main.trang h1 { font-size: var(--fs-h1); font-weight: var(--fw-h1); letter-spacing: -.01em; line-height: var(--lh-tieu-de); margin: 0 0 14px; }
main.trang h1 .ma { font-size: var(--fs-md); font-weight: var(--fw-vua); margin-left: 6px; }
main.trang h2 { font-size: var(--fs-xl); margin-top: 1.6em; }
main.trang h3 { font-size: var(--fs-lg); }
main.trang a { color: var(--nhan); }
main.trang table { border-collapse: collapse; width: 100%; margin: 8px 0 16px; background: var(--surface); }
/* chi ke ngang manh, khong ke doc; tieu de cot khong viet hoa */
main.trang th, main.trang td { border: 0; border-bottom: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
main.trang th { background: var(--head); color: var(--muted); border-bottom-color: var(--line-strong); font-weight: var(--fw-dam); font-family: var(--font); font-size: var(--fs-nhan); }
main.trang .bang-cuon { overflow-x: auto; }
main.trang .ghi-chu { color: var(--muted); }
main.trang .o-tim { width: 100%; max-width: 480px; padding: 8px 10px; font-size: 15px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); }
main.trang .nut-mo-nhanh { display: inline-block; height: auto; white-space: normal; line-height: var(--lh-dong); background: none; border: none; box-shadow: none; text-shadow: none; font-size: var(--fs-lg); cursor: pointer; padding: 4px 0; margin: 0; text-align: left; color: var(--ink); }
main.trang .nut-mo-nhanh:hover { background: none; color: var(--nhan); box-shadow: none; filter: none; }
main.trang .nut-mo-nhanh .mui-ten { display: inline-block; transition: transform var(--t-nhanh) var(--ease); }
main.trang .nut-mo-nhanh.dang-mo .mui-ten { transform: rotate(90deg); }
main.trang .ma { color: var(--ink-soft); font-weight: var(--fw-vua); font-variant-numeric: tabular-nums; font-family: var(--font); }

/* duong dan cu "<nav class=duong-dan>Kho » <strong>...</strong></nav>": mat chu nhu .duong-dan moi */
main.trang .duong-dan { margin-bottom: 4px; }
main.trang .duong-dan strong { color: var(--ink-2); font-weight: var(--fw-vua); }
main.trang form label { display: block; margin: 10px 0; font-weight: var(--fw-dam); }
main.trang form input, main.trang form select, main.trang form textarea {
  display: block; width: 100%; max-width: 420px; margin-top: 4px; padding: 0 var(--k3); height: var(--h-ctl); font-size: var(--fs-md);
  border: 1px solid var(--vien-o); border-radius: var(--r-ctl); font-weight: var(--fw-thuong); background: var(--surface); font-family: var(--font);
}
main.trang form textarea { height: auto; padding: 7px var(--k3); line-height: var(--lh-van); }
main.trang form input:hover, main.trang form select:hover, main.trang form textarea:hover { border-color: var(--chu-phu); }
main.trang form input:focus-visible, main.trang form select:focus-visible, main.trang form textarea:focus-visible { border-color: var(--sel-bar); }
main.trang form input::placeholder, main.trang form textarea::placeholder { color: var(--cho-o); opacity: 1; }
main.trang form [aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
main.trang form input[type=checkbox], main.trang form input[type=radio] { display: inline; width: auto; margin: 0 6px 0 0; }
/* nut: mac dinh VIEN (nut phu). To dac mau nhan chi nut gui form chinh va .nut.chinh (them
   .phu de ha ve vien); do gach chi cho .nut-nguy-hiem (vien do, hover nen do nhat). */
/* khung v2 (05/10/2026): nut cu mang mat nut phang cua app.css (token --btn-*, --accent-grad) */
/* soat dep V4: cung khuon .btn (cao --h-ctl 32px, dem 13px, chu --fs-md): .nut = .btn,
   .nut.chinh / nut gui form = .btn.chinh, .nut-nguy-hiem = .btn.nguy.vien. */
main.trang button, main.trang .nut {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--k2); height: var(--h-ctl); margin-top: 10px; padding: 0 var(--k4);
  font-size: var(--fs-md); line-height: 1; white-space: nowrap; vertical-align: middle; background: var(--btn-bg);
  color: var(--ink); border: 1px solid var(--btn-line); border-bottom-color: var(--btn-line-dn); border-radius: var(--r-ctl); cursor: pointer;
  text-decoration: none; font-weight: var(--fw-dam); font-family: var(--font); box-shadow: var(--btn-shadow);
  transition: transform var(--t-nhanh) var(--ease), box-shadow var(--t-nhanh) var(--ease), filter var(--t-nhanh) var(--ease);
}
/* nut khung v2 (.btn) dat trong trang cu: giu dung khuon .btn, khong bi luat tren them le */
main.trang .btn { margin-top: 0; }
main.trang button:hover, main.trang .nut:hover { color: var(--ink); background: var(--vien); }
main.trang button:active, main.trang .nut:active { transform: var(--lun); }
main.trang button[type=submit]:not(.phu):not(.nut-nguy-hiem), main.trang .nut.chinh {
  background: var(--accent-grad); border-color: var(--accent-deep); color: var(--accent-ink); font-weight: var(--fw-dam);
}
main.trang button[type=submit]:not(.phu):not(.nut-nguy-hiem):hover, main.trang .nut.chinh:hover { background: var(--chinh-dam); color: var(--accent-ink); }
main.trang button[disabled], main.trang .nut-mo { color: var(--chu-phu); background: var(--be-mat-2); border-color: transparent; cursor: not-allowed; transform: none; }
main.trang .nut-nguy-hiem { background: var(--btn-bg); border-color: var(--danger-line); color: var(--danger); }
main.trang .nut-nguy-hiem:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-hover); }
main.trang fieldset { border: 1px solid var(--line-strong); border-radius: var(--r-box); background: var(--surface); padding: 6px 14px 12px; margin: 0 0 12px; }
main.trang legend { padding: 0 6px; font-weight: var(--fw-dam-nhat); font-family: var(--font); font-size: var(--fs-sm); }

main.trang .loi { color: var(--red); font-weight: var(--fw-dam); }
main.trang .thanh-cong { color: var(--done); font-weight: var(--fw-dam); }
main.trang .canh-bao { color: var(--gold-fill); font-weight: var(--fw-dam); }
@media print {
  .thanh-ben, main.trang form, main.trang .nut, main.trang button { display: none !important; }
  body { background: #fff; }
  main.trang { max-width: none; }
}