/* Trang công khai (nhánh A), nhận diện "Cây Mạch Pha Lê". Token ở site.css. */

/* Thuộc tính hidden luôn thắng display của lớp (JS ẩn/hiện bước, khối chỉ đoàn, chỉ khi cần xe). */
[hidden] { display: none !important; }

/* Trang chủ: hero nền đêm. Chữ trái, cây mạch pha lê phải (ảnh đã mờ biên về #101D48 nên ghép liền nền).
   Màn hẹp: cây nằm sau chữ, lớp phủ đêm giữ chữ đủ tương phản. */
main:has(> .hero) { padding-top: 0; }
.hero {
  position: relative; overflow: hidden; isolation: isolate; color-scheme: dark;
  padding: var(--s6) 0 var(--s6);
  background: var(--dem);
  color: var(--chu-sang);
}
.hero .khung { position: relative; }
.hero-chu { position: relative; min-width: 0; }
.hero-cay {
  position: absolute; z-index: -2; top: 0; right: -34%; width: 96%; max-width: 520px; height: auto;
  pointer-events: none; user-select: none;
  /* mờ biên: ảnh nén lệch màu nhẹ so với nền, không để lộ khung chữ nhật */
  -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent);
  mask-image: radial-gradient(closest-side, #000 82%, transparent);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--dem) 30%, rgb(16 29 72 / 0.72) 62%, rgb(16 29 72 / 0.45)),
              linear-gradient(0deg, var(--dem) 25%, transparent 70%);
}
.hero-ten {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 var(--c-nhan)/1.3 var(--font); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tin-hieu);
}
/* Đỉnh cây: điểm hổ phách duy nhất */
.hero-ten::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ho-phach); box-shadow: 0 0 0 5px rgb(255 181 71 / 0.2); }

/* Chủ đề: hai dòng, dòng hai màu cyan; chữ hoa bằng CSS, line-height dư cho dấu chồng */
.chu-de {
  margin: var(--s4) 0 var(--s4);
  font: 700 clamp(28px, 8.2vw, 60px)/1.16 var(--font-hien-thi);
  letter-spacing: -0.01em; text-transform: uppercase;
}
.chu-de > span { display: block; }
.chu-de-2 { color: var(--tin-hieu); }
.hero-phu { font: 600 17px/1.45 var(--font); margin-bottom: var(--s5); color: var(--chu-sang); }

/* Mốc: lưới 2×2 */
.moc { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 var(--s5); border-top: 1px solid var(--soi); }
.moc > div { padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--soi); }
.moc > div:nth-child(odd) { border-right: 1px solid var(--soi); }
.moc > div:nth-child(even) { padding-left: var(--s4); }
.moc dt { font: 600 var(--c-nhan)/1.3 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--chu-sang-phu); }
.moc dd { margin: var(--s1) 0 0; font: 700 19px/1.25 var(--font-hien-thi); color: var(--chu-sang); }
.moc dd small { display: block; margin-top: 2px; font: 500 var(--c-nhan)/1.35 var(--font); color: var(--chu-sang-phu); }

/* Nút trên nền đêm: nút chính cyan chữ navy (10:1), không dùng nền chuyển màu dưới chữ */
.hero-nut { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.hero-nut .nut { min-height: 56px; font-size: 18px; font-weight: 700; border-radius: 999px; background: var(--tin-hieu); border-color: var(--tin-hieu); color: var(--ink); }
.hero-nut .nut:hover { background: #7BE6F2; border-color: #7BE6F2; }
.hero-nut .nut-phu { border-radius: 999px; background: transparent; color: var(--chu-sang); border-color: var(--soi-sang); }
.hero-nut .nut-phu:hover { background: var(--muc-2); }
.hero-nut .thong-bao { margin: 0; background: var(--muc-2); color: var(--chu-sang); border-left-color: var(--tin-hieu); }
.mui-ten { width: 22px; height: 22px; flex: none; }
.hero-danh-cho { font-size: var(--c-nho); color: var(--chu-sang-phu); margin-bottom: var(--s2); }
.nganh { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.nganh li {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 5px 12px 5px 10px; border: 1px solid var(--soi-sang); border-radius: 999px;
  font-size: var(--c-nho); font-weight: 500; color: var(--chu-sang); background: rgb(16 29 72 / 0.6);
}
.nganh li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tin-hieu); }

/* Mục nội dung trên nền giấy */
.muc { padding-top: var(--s6); }
.muc h2 { font-size: 26px; margin-bottom: var(--s4); }
.muc p { max-width: 68ch; }
.lich { position: relative; list-style: none; margin: 0 0 var(--s3); padding: 0 0 0 30px; }
.lich::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: 34px; width: 2px; background: var(--rule); }
.lich li { position: relative; padding-bottom: var(--s4); font-weight: 500; }
.lich li::before { content: ""; position: absolute; left: -30px; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--tin-hieu-dam); }
.lich li:first-child::before { background: var(--tin-hieu-dam); }
.lich-ngay { display: block; font: 600 var(--c-nhan)/1.4 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tin-hieu-dam); }
.lich-ten { display: block; font-weight: 600; }
.lich-buoi { display: grid; grid-template-columns: 76px 1fr; gap: var(--s1) var(--s3); margin: var(--s2) 0 0; font-size: var(--c-nho); font-weight: 400; }
.lich-buoi > div { display: contents; }
.lich-buoi dt { font: 600 13px/1.6 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lich-buoi dd { margin: 0; }

/* Lịch trình thu gọn ở đầu form đăng ký */
.hop-lich { margin: 0 0 var(--s5); padding: 0 var(--s4); border: 1px solid var(--rule); border-radius: var(--bo-khoi); background: var(--subtle); }
.hop-lich summary { min-height: var(--cham-toi-thieu); display: flex; align-items: center; font-weight: 600; color: var(--tin-hieu-dam); cursor: pointer; }
.hop-lich[open] summary { margin-bottom: var(--s2); }
.hop-lich .lich li::before { background: var(--subtle); }
.hop-lich .lich li:first-child::before { background: var(--tin-hieu-dam); }

.hoi-dap { border-bottom: 1px solid var(--rule); }
.hoi-dap summary { min-height: var(--cham-toi-thieu); display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.hoi-dap p { padding-left: var(--s4); }

.van-ban ul { padding-left: var(--s5); }

/* Nội dung từ thư mời BTC */
.loi-moi { display: grid; gap: var(--s5); align-items: center; }
.loi-moi-dan { font: 600 19px/1.5 var(--font); }
.loi-moi-nut { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.loi-moi-nut .nut, .loi-moi-nut .nut-phu { min-height: var(--cham-toi-thieu); padding: 0 var(--s5); font-weight: 700; }
.loi-moi-anh { display: block; justify-self: center; width: min(100%, 320px); border-radius: var(--bo-khoi); overflow: hidden; box-shadow: 0 10px 30px rgb(10 22 40 / 0.22); }
.loi-moi-anh img { display: block; width: 100%; }
.loi-moi-anh:focus-visible { outline-offset: 4px; }

.tru-cot, .kinh-moi { list-style: none; margin: 0; padding: 0; }
.tru-cot { display: grid; gap: var(--s3); }
.tru-cot li { padding: var(--s4); border: 1px solid var(--rule); border-top: 3px solid var(--tin-hieu-dam); border-radius: var(--bo-khoi); background: var(--surface); }
.tru-cot h3 { margin-bottom: var(--s2); font-size: 18px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--tin-hieu-dam); }
.tru-cot p { margin: 0; font-size: var(--c-nho); }

.chuong-trinh { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); counter-reset: ct; }
.chuong-trinh li {
  display: flex; align-items: center; gap: var(--s3); counter-increment: ct;
  padding: var(--s3) var(--s4); border-radius: var(--bo-khoi); background: var(--dem); color: var(--chu-sang); font-weight: 600;
}
.chuong-trinh li::before {
  content: counter(ct, decimal-leading-zero); flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--tin-hieu); color: var(--tin-hieu); font: 700 14px/1 var(--font-ma);
}

.kinh-moi li { position: relative; padding: var(--s2) 0 var(--s2) 34px; border-bottom: 1px solid var(--rule); }
.kinh-moi li:last-child { border-bottom: 0; }
.kinh-moi li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: var(--tin-hieu-dam); box-shadow: 0 0 0 4px var(--tin-hieu-nen); }

/* Trang thư mời: ảnh nguyên bản, cột đăng ký bên cạnh trên màn rộng */
.thu-moi { display: grid; gap: var(--s5); padding-top: var(--s5); padding-bottom: var(--s6); }
.thu-moi h1 { margin-bottom: var(--s2); }
.nhan-muc { margin-bottom: var(--s2); font: 600 var(--c-nhan)/1.3 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tin-hieu-dam); }
.thu-moi-anh { margin: 0 calc(-1 * var(--s4)); }
.thu-moi-anh img { display: block; width: 100%; }
.thu-moi-ben { display: grid; gap: var(--s4); align-content: start; }
.thu-moi-ben .nut, .thu-moi-ben .nut-phu { min-height: 56px; font-size: 18px; font-weight: 700; }
.thu-moi-ben .nut { background: var(--tin-hieu-dam); border-color: var(--tin-hieu-dam); }
.thu-moi-ben .nut:hover { background: var(--tin-hieu-dam-2); border-color: var(--tin-hieu-dam-2); }
.thu-moi-qr { display: flex; gap: var(--s4); align-items: center; padding: var(--s4); border: 1px solid var(--rule); border-radius: var(--bo-khoi); background: var(--subtle); }
.thu-moi-qr .qr { flex: none; width: 132px; background: #FFFFFF; border-radius: var(--bo-o); }
.thu-moi-qr .qr svg { display: block; width: 100%; height: auto; }
.thu-moi-qr p { margin: 0; font-weight: 600; }
.thu-moi-qr a { font-weight: 500; font-size: var(--c-nho); overflow-wrap: anywhere; }

@media (min-width: 640px) {
  .tru-cot { grid-template-columns: repeat(2, 1fr); }
  .chuong-trinh { grid-template-columns: repeat(2, 1fr); }
  .thu-moi-anh { margin: 0; }
  .thu-moi-anh img { border-radius: var(--bo-khoi); box-shadow: 0 10px 30px rgb(10 22 40 / 0.22); }
}

@media (min-width: 900px) {
  .loi-moi { grid-template-columns: 1fr 300px; gap: var(--s7); }
  .tru-cot { grid-template-columns: repeat(5, 1fr); }
  .tru-cot h3 { font-size: 16px; }
  .hero-phu { font-size: 19px; }
  .thu-moi { grid-template-columns: minmax(0, 640px) minmax(260px, 340px); justify-content: center; column-gap: var(--s6); }
  .thu-moi-dau { grid-column: 1 / -1; }
  .thu-moi-ben { position: sticky; top: var(--s5); }
  .thu-moi-qr { flex-direction: column; text-align: center; }
  .thu-moi-qr .qr { width: 180px; }
}

@media (min-width: 900px) {
  .hero { padding: var(--s7) 0; }
  .hero::before { display: none; }
  .hero .khung { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: var(--s5); }
  .hero-cay { position: static; z-index: auto; order: 2; width: 100%; max-width: 520px; justify-self: end; }
  .hero-nut { display: flex; flex-wrap: wrap; }
  .hero-nut .nut { padding: 0 28px; }
}

/* Form đăng ký */
.form-dang-ky fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-dang-ky .buoc { margin-bottom: var(--s6); }
.form-dang-ky .buoc > legend { padding: 0; margin-bottom: var(--s4); }
.form-dang-ky .buoc > legend h2 { margin: 0; }
.form-dang-ky .buoc > legend h2:focus { outline: none; }
.buoc-hien-tai { font-weight: 600; color: var(--tin-hieu-dam); margin-bottom: var(--s5); }
.bat-buoc { color: var(--danger); }

.nhom-chon { margin-bottom: var(--s5); }
.nhom-chon > legend { font-weight: 600; padding: 0; margin-bottom: var(--s2); }
.nhom-chon .goi-y { display: block; font-size: var(--c-nho); color: var(--muted); }
.hang-chon { display: flex; flex-wrap: wrap; gap: 0 var(--s2); }
.hang-chon .the-chon { flex: 1 1 120px; }
/* Nhóm chọn nhiều có nhãn dài: một cột trong thẻ đại biểu ở màn hẹp, tránh nhãn vỡ từng chữ */
.nhom-chon[data-nhieu] .hang-chon .the-chon { flex-basis: 150px; }
.hang-chon .o-tick { flex: 1 1 160px; }
.o-tick { margin-bottom: 0; }
.o-tick .the-chon { margin-bottom: var(--s1); }
/* Khối "Đoàn" mở ra như một nhánh nối từ thẻ đã chọn */
.nhom-chon:has(+ .chi-doan:not([hidden])) { margin-bottom: 0; }
.chi-doan { position: relative; margin: 0 0 var(--s5) 26px; padding: var(--s5) 0 var(--s1) var(--s5); border-left: 2px solid var(--tin-hieu-dam); }
.chi-doan::after { content: ""; position: absolute; left: -7px; bottom: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--tin-hieu-dam); }
.dong-y .goi-y { font-size: var(--c-nho); color: var(--muted); }

.dai-bieu h3 { margin-bottom: var(--s4); }

.hoa-don { margin-bottom: var(--s4); }
.hoa-don summary { min-height: var(--cham-toi-thieu); display: flex; align-items: center; font-weight: 600; cursor: pointer; }

.bang-tom-tat { width: 100%; border-collapse: collapse; margin-bottom: var(--s4); font-size: var(--c-nho); }
.bang-tom-tat th, .bang-tom-tat td { text-align: left; vertical-align: top; padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.bang-tom-tat td { overflow-wrap: anywhere; white-space: pre-line; }
.bang-tom-tat th { width: 40%; padding-right: var(--s3); color: var(--muted); font-weight: 500; }

.cf-turnstile { margin: var(--s4) 0 var(--s2); min-height: 65px; }
#turnstile-loi { display: block; font-size: var(--c-nho); color: var(--danger); }

.nut-buoc { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); margin-top: var(--s5); }
.nut-buoc .nut { min-height: 56px; padding: 0 28px; font-weight: 700; }
.nut-buoc .nut:only-child { margin-left: auto; }

/* Đăng ký của tôi: nền giấy xám, thẻ trắng; dòng nội dung chuyển khoản nổi bật */
main:has(> .cua-toi) { background: var(--subtle); }
.cua-toi > .khoi:first-of-type { border-top: 4px solid var(--tin-hieu-dam); }
.cua-toi h1 { margin: 0 0 var(--s2); font: 600 17px/1.3 var(--font); color: var(--muted); }
.cua-toi h1 .ma { display: block; margin-top: var(--s1); font-size: 36px; font-weight: 700; line-height: 1.1; color: var(--ink); letter-spacing: 0.08em; }
.han { display: block; margin-top: var(--s2); font-size: var(--c-nho); color: var(--muted); }
.thanh-toan .khoi-qr { margin-bottom: var(--s3); }
.o-sao-chep:has([id="tt-noi-dung"]) { grid-template-columns: 1fr; gap: var(--s2); margin-top: var(--s4); padding: var(--s4); border: 2px solid var(--tin-hieu-dam); border-radius: var(--bo-khoi); background: var(--tin-hieu-nen); }
.o-sao-chep:has([id="tt-noi-dung"]) .nhan { color: var(--tin-hieu-dam); }
.o-sao-chep:has([id="tt-noi-dung"]) .gia-tri { font-size: 26px; font-weight: 700; letter-spacing: 0.04em; }
.o-sao-chep:has([id="tt-noi-dung"]) .nut-phu { width: 100%; min-height: var(--cham-toi-thieu); font-size: 17px; }
.o-sao-chep:has([id="tt-noi-dung"]) .nut-phu:not([data-da-chep]) { background: var(--ink); border-color: var(--ink); color: var(--chu-sang); }
.giu-noi-dung { display: flex; gap: var(--s2); align-items: flex-start; margin: var(--s3) 0; padding: var(--s3); border-radius: var(--bo-o); background: var(--cho-nen); color: var(--cho); font-weight: 600; }
.giu-noi-dung::before { content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; border: 2px solid currentColor; font: 800 12px/1 var(--font); }
.ds-dai-bieu { list-style: none; padding: 0; margin: 0; }
.ds-dai-bieu li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.ds-dai-bieu li:last-child { border-bottom: 0; }
.ds-dai-bieu p { margin: 0 0 var(--s1); }
.yeu-cau details { margin-bottom: var(--s3); }
.yeu-cau summary { list-style: none; }
.yeu-cau summary::-webkit-details-marker { display: none; }
.yeu-cau details[open] > summary { margin-bottom: var(--s3); }
.yeu-cau form { padding: var(--s3) 0 var(--s2); }

/* Đăng ký thi đấu: mỗi lượt một dòng, nút Rút bên phải; Đồng ý/Từ chối cạnh nhau */
.the-thao fieldset { border: 0; padding: 0; margin: 0 0 var(--s5); min-width: 0; }
.the-thao .luot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); padding-top: var(--s2); }
.the-thao .luot p { margin: 0; }
.the-thao .luot form, .nut-cap form { margin: 0; }
.nut-cap { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Mẫu BTC: khẩu hiệu, lời mở đầu trên /dang-ky, lời cảm ơn sau khi gửi. */
/* Tiêu đề form theo cách viết BTC: chữ hoa bằng CSS, chữ gốc giữ thường cho trình đọc màn hình */
.chu-hoa { text-transform: uppercase; }
.khau-hieu { margin: 0 0 var(--s3); font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.loi-mo-dau { margin-bottom: var(--s4); }
.loi-mo-dau p, .loi-cam-on p { margin: 0 0 var(--s2); }