/* ==========================================================
   FUTA Land — Check-in Sự kiện
   Dùng chung cho index.html (trang đăng ký của khách) và checkin.html (app quét).

   Font: chỉ dùng font hệ thống. Không nạp font web nào — vừa chạy được
   offline, vừa tránh bẫy font thiếu tiếng Việt (chữ có dấu bị âm thầm
   đổi sang font khác, tiêu đề trộn hai kiểu chữ).
   line-height không bao giờ dưới 1.25 cho chữ lớn: tiếng Việt có dấu
   chồng hai tầng (ẵ, ế, ộ) sẽ bị cắt ngọn.
   ========================================================== */

:root {
  --xanh:        #0A7C3A;
  --xanh-dam:    #06592a;
  --xanh-nhat:   #E8F5EE;
  --vang:        #F5A623;   /* vàng cảnh báo — dùng cho app quét (màn "vé đã dùng") */
  --do:          #D93025;
  --do-nhat:     #FDECEA;
  --vang-nhat:   #FFF8E8;

  /* Vàng champagne + kem — tông sang lấy từ banner sự kiện FUTA.
     Dùng cho trang khách (index.html), KHÔNG dùng cho màu chức năng app quét. */
  --gold:        #C9A24B;
  --gold-sang:   #E6CF8E;
  --gold-dam:    #A67C22;
  --kem:         #F3E9C6;
  --kem-nhat:    #FBF7EB;
  --den:         #14181A;
  --xam:         #6B7280;
  --xam-nhat:    #F3F5F4;
  --vien:        #E2E6E4;
  --trang:       #FFFFFF;
  --bong:        0 2px 12px rgba(0,0,0,.08);
  --bo-goc:      14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font);
  color: var(--den);
  background: var(--xam-nhat);
  -webkit-text-size-adjust: 100%;
  line-height: 1.55;
}

button, input, select, textarea { font-family: inherit; font-size: 16px; }
/* 16px là ngưỡng để Safari iOS không tự phóng to trang khi bấm vào ô nhập */

h1, h2, h3 { line-height: 1.3; margin: 0; }
p { margin: 0 0 12px; }

.an { display: none !important; }
[hidden] { display: none !important; }

/* ---------- Nút ---------- */
.nut-chinh {
  display: block; width: 100%;
  padding: 15px 20px;
  background: var(--xanh); color: #fff;
  border: 0; border-radius: 12px;
  font-size: 17px; font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.nut-chinh:hover:not(:disabled) { background: var(--xanh-dam); }
.nut-chinh:disabled { background: #9CB5A6; cursor: not-allowed; }

.nut-phu {
  display: inline-block;
  padding: 11px 18px;
  background: transparent; color: var(--xanh);
  border: 2px solid var(--xanh); border-radius: 10px;
  font-size: 15px; font-weight: 700; cursor: pointer;
}
.nut-phu:hover { background: var(--xanh-nhat); }

/* ---------- Thông báo lỗi ---------- */
.hop-loi {
  background: var(--do-nhat);
  border-left: 4px solid var(--do);
  color: #8A1B12;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14.5px;
  margin-bottom: 14px;
}

/* ==========================================================
   A. MÀN ĐĂNG NHẬP (app quét)
   Tông sự kiện: nền xanh sâu + ánh vàng champagne + khung vàng mảnh,
   lấy đúng cặp màu của banner (chữ xanh trên nền vàng kem).
   ========================================================== */
.man-dang-nhap {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 18px;
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(230,207,142,.30), transparent 62%),
    radial-gradient(90% 60% at 100% 100%, rgba(201,162,75,.18), transparent 60%),
    linear-gradient(160deg, #0d8a41 0%, var(--xanh-dam) 62%, #04371a 100%);
}
/* Khung vàng mảnh ôm mép màn hình — echo viền vàng của banner sự kiện */
.man-dang-nhap::before {
  content: ''; position: absolute; inset: 10px;
  border: 1px solid rgba(230,207,142,.34);
  border-radius: 16px; pointer-events: none;
}
.the-dang-nhap {
  position: relative;
  width: 100%; max-width: 400px;
  background: var(--trang);
  border-radius: 18px;
  padding: 30px 26px;
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
  overflow: hidden;
}
/* Nẹp vàng trên đầu thẻ */
.the-dang-nhap::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold-dam), var(--gold-sang) 50%, var(--gold-dam));
}
.the-dang-nhap .logo { display: block; height: 46px; margin: 4px auto 14px; }
.the-dang-nhap .nhan-khu {
  display: block; text-align: center;
  font-size: 11px; letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--gold-dam); font-weight: 700; margin-bottom: 10px;
}
/* Hai vạch vàng hai bên nhãn — đồng bộ với trang khách */
.the-dang-nhap .nhan-khu::before,
.the-dang-nhap .nhan-khu::after {
  content: ''; display: inline-block; width: 22px; height: 1px;
  background: var(--gold); vertical-align: middle; margin: 0 9px 3px;
  opacity: .75;
}
.the-dang-nhap h1 {
  font-size: 21px; text-align: center; margin-bottom: 4px;
  color: var(--xanh-dam);
}
.the-dang-nhap .phu {
  text-align: center; color: var(--xam);
  font-size: 14.5px; margin-bottom: 20px;
}
/* Tên sự kiện đang trực — nổi trên nền kem để nhân viên đọc lướt là thấy */
.the-dang-nhap .phu.co-su-kien {
  background: var(--kem-nhat);
  border: 1px solid #EBDFB8;
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--xanh-dam); font-weight: 700;
}

.o-nhap { margin-bottom: 15px; }
.o-nhap label {
  display: block; font-size: 13.5px; font-weight: 700;
  color: #374151; margin-bottom: 6px;
}
.o-nhap input, .o-nhap select, .o-nhap textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--vien); border-radius: 10px;
  background: var(--trang); color: var(--den);
}
.o-nhap input:focus, .o-nhap select:focus, .o-nhap textarea:focus {
  outline: none; border-color: var(--xanh);
  box-shadow: 0 0 0 3px rgba(10,124,58,.13);
}
.o-nhap .goi-y { font-size: 12.5px; color: var(--xam); margin-top: 5px; }
.o-nhap input.ma-lon {
  text-align: center; letter-spacing: 5px;
  font-size: 22px; font-weight: 700; text-transform: uppercase;
}

/* ==========================================================
   B. APP QUÉT — bố cục chính
   ========================================================== */
.man-chinh {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  background: #000;
}

.thanh-tren {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: linear-gradient(135deg, #0d8a41 0%, var(--xanh) 45%, var(--xanh-dam) 100%);
  color: #fff;
  flex-shrink: 0;
  border-bottom: 2px solid var(--gold);
}
/* Logo trong "viên thuốc" trắng — logo FUTA là chữ xanh, đặt thẳng lên nền xanh sẽ chìm */
.thanh-tren .logo-nho {
  height: 30px; flex-shrink: 0;
  background: #fff; padding: 4px 8px; border-radius: 8px;
}
/* min-width:0 để tên sự kiện dài được cắt "…" thay vì đẩy văng con số bên phải */
.thanh-tren .tt-chu { min-width: 0; }
.thanh-tren .ten-sk {
  font-size: 14.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thanh-tren .truc {
  font-size: 12px; color: var(--gold-sang);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thanh-tren .dem {
  margin-left: auto;
  background: linear-gradient(135deg, var(--gold-sang), var(--gold));
  color: var(--xanh-dam);
  padding: 5px 12px; border-radius: 20px;
  font-size: 14px; font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.thanh-tren .nut-thoat {
  background: transparent; border: 0; color: rgba(255,255,255,.85);
  font-size: 20px; cursor: pointer; padding: 4px 6px; line-height: 1;
}
.thanh-tren .nut-thoat:hover { color: #fff; }

/* ---------- Vùng nội dung ---------- */
.vung-noi-dung { flex: 1; position: relative; overflow: hidden; }

/* Thẻ QUÉT ------------------------------------------------ */
.the-quet { position: absolute; inset: 0; background: #000; }
.the-quet video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.khung-ngam {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.khung-ngam .o-ngam {
  width: 68vw; max-width: 300px; aspect-ratio: 1;
  border-radius: 20px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.5);
  position: relative;
}
/* 4 góc chữ L — màu vàng champagne của sự kiện, nổi rõ trên mọi nền camera */
.khung-ngam .o-ngam::before,
.khung-ngam .o-ngam::after {
  content: ''; position: absolute; width: 42px; height: 42px;
  border: 4px solid var(--gold-sang); border-radius: 6px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
.khung-ngam .o-ngam::before {
  top: -3px; left: -3px; border-right: 0; border-bottom: 0;
}
.khung-ngam .o-ngam::after {
  bottom: -3px; right: -3px; border-left: 0; border-top: 0;
}

.chu-huong-dan {
  position: absolute; left: 50%; bottom: 92px;
  transform: translateX(-50%);
  text-align: center; color: #fff;
  font-size: 14.5px; padding: 8px 18px;
  max-width: calc(100% - 40px);
  background: rgba(6,42,22,.55);
  border: 1px solid rgba(230,207,142,.4);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.nut-noi {
  position: absolute; bottom: 20px;
  display: flex; gap: 10px; left: 0; right: 0;
  justify-content: center; padding: 0 16px;
}
.nut-noi button {
  background: rgba(255,255,255,.94); color: var(--den);
  border: 0; border-radius: 24px;
  padding: 12px 18px; font-size: 14.5px; font-weight: 700;
  cursor: pointer; box-shadow: var(--bong);
}
.nut-noi button.hoat-dong { background: var(--vang); color: #4a3200; }

.loi-camera {
  position: absolute; top: 50%; left: 16px; right: 16px;
  transform: translateY(-50%);
  background: var(--trang); border-radius: var(--bo-goc);
  border-top: 3px solid var(--do);
  padding: 20px 18px; text-align: center;
  font-size: 16px; color: #8A1B12;
  box-shadow: 0 10px 34px rgba(0,0,0,.4);
}
/* Nguyên nhân kỹ thuật để cỡ nhỏ, màu nhạt: nhân viên cổng không xử lý được
   nó, chỉ cần cho quản trị viên đọc khi gọi hỗ trợ. */
.loi-camera .lc-vi-sao {
  font-size: 13px; color: var(--xam); font-weight: 400;
  margin: 6px 0 12px; line-height: 1.5;
}
/* Việc phải làm mới là thứ cần đọc — để cỡ thường, màu chữ tối, nền kem */
.loi-camera .lc-lam-gi {
  font-size: 14.5px; color: #33404a; line-height: 1.6;
  background: var(--kem-nhat); border: 1px solid #EBDFB8;
  border-radius: 10px; padding: 11px 13px; margin: 0 0 14px;
  text-align: left;
}
.loi-camera .lc-nut { display: flex; flex-direction: column; gap: 9px; }
.loi-camera .lc-nut .nut-phu { width: 100%; }

/* Camera hỏng: khung ngắm, câu hướng dẫn và nút nổi đều vô nghĩa — chỉ còn
   hộp lỗi. Để lại chúng thì nhân viên thấy hai nút "nhập mã" giống nhau. */
.the-quet.camera-hong .khung-ngam,
.the-quet.camera-hong .chu-huong-dan,
.the-quet.camera-hong .nut-noi { display: none; }

/* ---------- Lớp kết quả quét ---------- */
.ket-qua {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 26px 22px; text-align: center;
  color: #fff;
  animation: hien-len .16s ease-out;
}
@keyframes hien-len { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* Màu KẾT QUẢ là màu CHỨC NĂNG, không phải màu thương hiệu:
   xanh = mời vào · hổ phách = vé đã dùng · đỏ = chặn.
   Vàng champagne chỉ được dùng làm viền/điểm nhấn, không đổi 3 màu này —
   nhân viên phải phân biệt được chỉ bằng liếc mắt, giữa nắng và đám đông. */
.ket-qua.thanh-cong { background: linear-gradient(165deg, #0d8a41 0%, var(--xanh-dam) 100%); }
.ket-qua.canh-bao   { background: linear-gradient(165deg, #F7B23F 0%, #D98A0B 100%); color: #4a3200; }
.ket-qua.that-bai   { background: linear-gradient(165deg, #E2453A 0%, #A81E15 100%); }
.ket-qua.dang-xu-ly { background: rgba(20,24,26,.94); }
/* Không thêm nẹp vàng ở đây: lớp kết quả nằm ngay dưới thanh trên (đã có viền
   vàng 2px), hai vạch sát nhau thành một vệt dày trông như lỗi render.
   Điểm nhấn vàng của màn kết quả nằm ở vòng tròn quanh biểu tượng. */

.kq-bieu-tuong {
  font-size: 62px; line-height: 1.2;
  width: 104px; height: 104px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  box-shadow: 0 0 0 2px rgba(230,207,142,.55);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; font-weight: 700;
}
.kq-tieu-de {
  font-size: 27px; font-weight: 800;
  letter-spacing: .5px; line-height: 1.3;
  margin-bottom: 6px;
}
.kq-ten {
  font-size: 21px; font-weight: 700;
  margin-bottom: 16px; line-height: 1.35;
}
.kq-chi-tiet { width: 100%; max-width: 340px; }
.kq-dong {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.25);
  font-size: 15px; text-align: left;
}
.kq-dong span { opacity: .85; }
.kq-huong-dan {
  font-size: 14.5px; opacity: .93;
  margin: 14px 0 0; line-height: 1.6;
}
.ket-qua .nut-phu {
  margin-top: 16px; border-color: currentColor; color: inherit;
  background: rgba(255,255,255,.16);
}
.nut-dong-kq {
  margin-top: 22px;
  background: rgba(255,255,255,.95); color: var(--den);
  border: 0; border-radius: 24px;
  padding: 13px 34px; font-size: 16px; font-weight: 700; cursor: pointer;
}

/* Thẻ TÌM & SỐ LIỆU -------------------------------------- */
.the-cuon {
  position: absolute; inset: 0;
  background: var(--kem-nhat);
  overflow-y: auto; padding: 16px 14px 24px;
  -webkit-overflow-scrolling: touch;
}

.o-tim {
  width: 100%; padding: 14px 16px;
  border: 1.5px solid #E6DCC0; border-radius: 12px;
  margin-bottom: 14px;
}
.o-tim:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,162,75,.18);
}

.the-khach {
  display: flex; align-items: center; gap: 12px;
  background: var(--trang); border-radius: 12px;
  border-left: 3px solid var(--gold);
  padding: 13px 15px; margin-bottom: 9px;
  box-shadow: 0 1px 5px rgba(120,90,20,.08);
}
/* Khách đã vào: nẹp chuyển xanh + mờ đi, để nhân viên lướt danh sách là thấy ngay */
.the-khach.da-vao { opacity: .62; border-left-color: var(--xanh); }
.tk-thongtin { flex: 1; min-width: 0; }
.tk-ten { font-weight: 700; font-size: 16px; line-height: 1.35; }
.tk-phu { font-size: 13px; color: var(--xam); margin-top: 2px; }
.nut-vao {
  background: var(--xanh); color: #fff; border: 0;
  border-radius: 9px; padding: 11px 16px;
  font-size: 14.5px; font-weight: 700; cursor: pointer; flex-shrink: 0;
}
.nhan-da-vao {
  font-size: 12.5px; color: var(--xanh); font-weight: 700;
  background: var(--xanh-nhat); padding: 6px 10px; border-radius: 8px;
  flex-shrink: 0; text-align: center;
}
.trong { color: var(--xam); text-align: center; padding: 26px 12px; font-size: 15px; }

/* ---------- Thống kê ---------- */
.luoi-so {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin-bottom: 16px;
}
.o-so {
  position: relative;
  background: var(--trang); border-radius: 12px;
  padding: 15px 14px; text-align: center;
  border: 1px solid #EFE6C9;
  box-shadow: 0 1px 5px rgba(120,90,20,.07);
  overflow: hidden;
}
.o-so::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-sang), var(--gold));
}
.o-so .con-so {
  font-size: 30px; font-weight: 800;
  color: var(--xanh); line-height: 1.25;
}
.o-so .nhan { font-size: 12.5px; color: var(--xam); margin-top: 2px; }
/* Ô phụ (tổng đăng ký / chưa đến) là số nền, không phải thành tích — để chữ tối
   và nẹp xám cho khỏi tranh chỗ với hai ô chính */
.o-so.phu .con-so { color: var(--den); }
.o-so.phu::before { background: var(--vien); }

.thanh-bao {
  background: var(--trang); border-radius: 12px;
  padding: 15px; margin-bottom: 16px;
  border: 1px solid #EFE6C9;
  box-shadow: 0 1px 5px rgba(120,90,20,.07);
}
.thanh-bao .dau-de {
  display: flex; justify-content: space-between;
  font-size: 13.5px; margin-bottom: 8px;
}
.thanh-bao .dau-de b { color: var(--xanh-dam); font-size: 15px; }
.ray { height: 10px; background: #EDE4CC; border-radius: 6px; overflow: hidden; }
.ray > div {
  height: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--xanh) 100%);
  border-radius: 6px; width: 0; transition: width .4s ease;
}

.dong-gan-day {
  display: flex; justify-content: space-between; gap: 10px;
  background: var(--trang); border-radius: 10px;
  border-left: 3px solid var(--xanh);
  padding: 11px 14px; margin-bottom: 7px;
  font-size: 14.5px;
}
.dong-gan-day span { color: var(--xam); font-size: 13px; white-space: nowrap; }

.tieu-de-muc {
  font-size: 13px; font-weight: 700; color: var(--gold-dam);
  text-transform: uppercase; letter-spacing: .6px;
  margin: 18px 0 9px;
}

/* ---------- Thanh thẻ dưới cùng ---------- */
.thanh-tab {
  display: flex; flex-shrink: 0;
  background: var(--trang);
  border-top: 1px solid var(--vien);
  padding-bottom: env(safe-area-inset-bottom);
}
.thanh-tab button {
  position: relative;
  flex: 1; background: none; border: 0;
  padding: 11px 4px 9px;
  font-size: 11.5px; color: var(--xam);
  cursor: pointer; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.thanh-tab button .bt { font-size: 21px; line-height: 1.1; }
.thanh-tab button.hoat-dong { color: var(--xanh-dam); }
/* Vạch vàng trên thẻ đang mở — dấu hiệu thứ hai bên cạnh màu chữ,
   để vẫn nhận ra được khi nhìn nghiêng ngoài nắng */
.thanh-tab button.hoat-dong::before {
  content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--gold-sang), var(--gold-dam));
}

/* ==========================================================
   C. TRANG ĐĂNG KÝ (khách hàng)
   ========================================================== */
.trang-khach { background: var(--xam-nhat); min-height: 100vh; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--xanh) 0%, var(--xanh-dam) 100%);
  color: #fff; text-align: center;
  padding: 48px 20px 56px;
  overflow: hidden;
  /* Viền vàng dưới hero — echo lại đường viền vàng của banner */
  border-bottom: 3px solid var(--gold);
}
/* Ánh vàng ấm góc trên (gợi lại vệt nắng trong banner) */
.hero::before {
  content: ''; position: absolute; top: -40%; right: -10%;
  width: 60%; height: 120%;
  background: radial-gradient(closest-side, rgba(230,207,142,.28), transparent 70%);
  pointer-events: none;
}
/* Khi có ảnh nền dự án: phủ ảnh + lớp tối để chữ luôn đọc được */
.hero.co-anh { background-size: cover; background-position: center; }
.hero-phu {
  position: absolute; inset: 0; pointer-events: none;
}
.hero.co-anh .hero-phu {
  background: linear-gradient(180deg, rgba(6,42,22,.68) 0%, rgba(6,42,22,.86) 100%);
}
.hero-noi { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }

/* Logo FUTA là chữ xanh đậm — trên nền xanh/ảnh sẽ chìm.
   Đặt trong "viên thuốc" nền trắng để luôn đọc được. */
.hero .logo {
  height: 46px; margin-bottom: 22px;
  background: #fff; padding: 7px 16px;
  border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.hero .nhan-moi {
  display: inline-block; font-size: 12px; letter-spacing: 3px;
  text-transform: uppercase; margin-bottom: 12px;
  color: var(--gold-sang); font-weight: 600;
}
/* Hai vạch vàng hai bên chữ "Trân trọng kính mời" */
.hero .nhan-moi::before,
.hero .nhan-moi::after {
  content: ''; display: inline-block; width: 26px; height: 1px;
  background: var(--gold-sang); vertical-align: middle; margin: 0 10px 3px;
  opacity: .8;
}
.hero h1 {
  font-size: 29px; font-weight: 800; line-height: 1.35;
  margin-bottom: 18px; text-shadow: 0 1px 12px rgba(0,0,0,.18);
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  justify-content: center; margin-bottom: 26px;
}
.hero-meta .hm-item { font-size: 15.5px; opacity: .96; line-height: 1.5; }
/* CTA vàng champagne, chữ xanh đậm — đúng tinh thần "chữ xanh trên nền vàng"
   của banner. */
.hero-cta {
  display: inline-block; text-decoration: none;
  background: linear-gradient(135deg, var(--gold-sang) 0%, var(--gold) 100%);
  color: var(--xanh-dam);
  font-size: 16.5px; font-weight: 800; letter-spacing: .2px;
  padding: 15px 36px; border-radius: 30px;
  box-shadow: 0 8px 22px rgba(166,124,34,.4);
  transition: transform .12s, box-shadow .12s;
}
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(166,124,34,.5); }

/* ---------- MỤC NỘI DUNG ---------- */
.muc { padding: 44px 20px; }
/* Nền kem nhạt xen kẽ trắng — echo tông kem của banner, sang hơn nền xám */
.muc-xam { background: var(--kem-nhat); }
.trang-khach { background: var(--trang); }
.khung-hep { max-width: 640px; margin: 0 auto; }
.khung-rong { max-width: 900px; margin: 0 auto; }
.muc-de {
  font-size: 22px; font-weight: 800; text-align: center;
  margin-bottom: 30px; color: var(--xanh-dam);
  position: relative; padding-bottom: 14px;
}
/* Vạch vàng ngắn dưới tiêu đề mục */
.muc-de::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 54px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-sang), var(--gold-dam));
}
.mo-ta {
  font-size: 17px; line-height: 1.75; color: #374151;
  text-align: center; margin: 0;
}

/* Vì sao nên tham dự */
.luoi-nhan {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.the-nhan {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border-radius: 12px;
  padding: 16px 18px;
  border: 1px solid #efe6c9;
  box-shadow: 0 1px 5px rgba(120,90,20,.06);
}
/* Chấm tick vàng viền — nổi bật kiểu premium trên nền kem */
.the-nhan .tn-tick {
  flex-shrink: 0; width: 27px; height: 27px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-sang), var(--gold)); color: var(--xanh-dam);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.the-nhan .tn-chu { font-size: 15.5px; line-height: 1.5; color: #1f2937; padding-top: 2px; }

/* Lịch trình */
.lich { border-left: 2px solid var(--vien); margin-left: 8px; }
.lich-dong {
  position: relative; display: flex; gap: 16px;
  padding: 0 0 22px 24px;
}
.lich-dong::before {
  content: ''; position: absolute; left: -7px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--xanh); border: 2px solid #fff;
}
.lich-dong:last-child { padding-bottom: 0; }
.lich-gio {
  flex-shrink: 0; font-weight: 800; color: var(--xanh);
  font-variant-numeric: tabular-nums; min-width: 52px;
}
.lich-viec { color: #1f2937; line-height: 1.5; }

/* Địa điểm + bản đồ */
.dd-ten { text-align: center; font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.dd-chi { text-align: center; color: var(--xam); font-size: 15px; margin: 0 0 12px; }
.dd-link {
  display: block; text-align: center; color: var(--xanh);
  font-weight: 700; font-size: 14.5px; text-decoration: none; margin-bottom: 16px;
}
.ban-do {
  border-radius: 14px; overflow: hidden;
  box-shadow: var(--bong); background: #e9edeb;
  aspect-ratio: 16 / 9;
}
.ban-do iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- HERO DẠNG ẢNH BANNER ---------- */
/* Khi sự kiện có ảnh banner: hiện nguyên ảnh (đã gồm đủ thông tin), ẩn hero chữ */
.hero-banner {
  display: block; line-height: 0; background: var(--xanh-dam);
  border-bottom: 3px solid var(--gold);
}
.hero-banner img { width: 100%; height: auto; display: block; }
/* Khi có banner ảnh: ẩn hero chữ VÀ ẩn logo ở footer — banner đã mang sẵn
   logo + thương hiệu, không lặp lại nữa (register.js gắn .co-banner lên <body>) */
.co-banner .hero { display: none; }
.co-banner .chan-logo { display: none; }

/* ---------- MỤC FORM ---------- */
.muc-form {
  padding: 48px 20px; position: relative;
  background: var(--kem-nhat);
  background-size: cover; background-position: center;
}
.khung {
  max-width: 520px; margin: 0 auto;
  padding: 0 16px;
}
/* Thẻ form: viền vàng mảnh + đầu thẻ xanh cho cảm giác "vé mời" cao cấp */
.muc-form .the-trang { border-top: 3px solid var(--gold); }
.the-trang h2 { color: var(--xanh-dam); }

/* Khi có ảnh render nền: phủ lớp xanh nhẹ + form kính mờ nổi lên trên */
.muc-form.co-nen::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,42,22,.55) 0%, rgba(6,42,22,.72) 100%);
}
.muc-form.co-nen .khung { position: relative; z-index: 1; }
.muc-form.co-nen .the-trang,
.muc-form.co-nen .the-ve {
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.55);
  border-top: 3px solid var(--gold);
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
/* Tiêu đề khu đăng ký nổi trên ảnh render */
.dangky-de {
  position: relative; z-index: 1; text-align: center; color: #fff;
  margin-bottom: 22px;
}
.co-nen .dangky-de { display: block; }
.dangky-de { display: none; }
.dangky-de .nhan {
  display: inline-block; font-size: 12px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--gold-sang); font-weight: 600; margin-bottom: 8px;
}
.dangky-de h2 { font-size: 26px; font-weight: 800; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
/* Khi tiêu đề đã nổi trên ảnh render thì bỏ tiêu đề trùng bên trong thẻ —
   hai dòng "Đăng ký tham dự" giống hệt nhau cách nhau vài phân trông như lỗi. */
.muc-form.co-nen .the-trang > h2 { display: none; }
.the-trang {
  background: var(--trang); border-radius: 18px;
  padding: 24px 22px; box-shadow: var(--bong);
}
.the-trang h2 { font-size: 19px; margin-bottom: 5px; }
.the-trang .phu { color: var(--xam); font-size: 14.5px; margin-bottom: 20px; }

.bat-buoc { color: var(--do); }

/* ---------- Hướng dẫn 3 bước ở đầu form ---------- */
/* Khách phải biết TRƯỚC khi điền là lát nữa sẽ phải tự lưu vé — báo sau khi
   đăng ký xong thì nhiều người đã đóng tab mất rồi. */
.huong-dan {
  counter-reset: buoc;
  list-style: none;
  margin: 0 0 20px; padding: 14px 16px 12px;
  background: var(--kem-nhat);
  border: 1px solid #EBDFB8;
  border-radius: 12px;
  font-size: 14.5px; line-height: 1.6; color: #33404a;
}
.huong-dan li {
  position: relative;
  padding-left: 34px; margin-bottom: 10px;
}
.huong-dan li:last-child { margin-bottom: 0; }
.huong-dan li::before {
  counter-increment: buoc; content: counter(buoc);
  position: absolute; left: 0; top: 1px;
  width: 23px; height: 23px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-sang), var(--gold));
  color: var(--xanh-dam); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.huong-dan li i { font-style: normal; color: var(--gold-dam); font-weight: 600; }
/* Dòng trấn an cuối — không đánh số, đây không phải một bước phải làm */
.huong-dan li.hd-nhe {
  counter-increment: none;
  padding-left: 34px; margin-top: 12px; padding-top: 11px;
  border-top: 1px dashed #E0D3AA;
  font-size: 13.5px; color: var(--xam);
}
.huong-dan li.hd-nhe::before {
  content: '?'; background: none; color: var(--gold-dam);
  border: 1.5px solid var(--gold); font-size: 13px;
}

/* Dòng nhắc dưới nút tải vé */
.ve-nhac {
  font-size: 13px; line-height: 1.55; color: var(--xam);
  text-align: center; margin: -2px 0 2px;
}
.ve-nhac:empty { display: none; }

/* Honeypot — bẫy bot, người thật không bao giờ thấy ô này */
.o-bay {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Thẻ vé sau khi đăng ký ---------- */
.the-ve {
  background: var(--trang); border-radius: 18px;
  box-shadow: var(--bong); overflow: hidden;
}
.ve-dau {
  background: var(--xanh); color: #fff;
  padding: 20px 22px; text-align: center;
}
.ve-dau .dau-tick { font-size: 40px; line-height: 1.2; }
.ve-dau h2 { font-size: 20px; margin-top: 6px; }

.ve-than { padding: 22px; text-align: center; }
.ve-qr-khung {
  border: 2px dashed var(--xanh); border-radius: 14px;
  padding: 18px; display: inline-block; margin-bottom: 14px;
}
#veQR {
  display: block; width: 220px; height: 220px;
  image-rendering: pixelated;
}
.ve-nhan-ma {
  font-size: 11.5px; color: var(--xam);
  text-transform: uppercase; letter-spacing: 1.4px; margin-top: 12px;
}
.ve-ma {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 25px; font-weight: 700; letter-spacing: 3px;
  color: var(--xanh); line-height: 1.4;
}

.ve-bang {
  width: 100%; margin: 18px 0 0;
  border-top: 1px solid var(--vien);
  font-size: 15px; text-align: left;
}
.ve-bang div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--vien);
}
/* Nhãn không được xuống dòng: "Thời gian" / "Địa điểm" vỡ làm hai dòng
   trong khi giá trị bên phải chỉ một dòng, nhìn như lỗi dàn trang. */
.ve-bang span { color: var(--xam); white-space: nowrap; }
.ve-bang b { text-align: right; }

.loi-nhan {
  padding: 13px 15px; border-radius: 10px;
  font-size: 14.5px; margin: 18px 0 0;
  text-align: left; line-height: 1.6;
}
.loi-nhan.thanh-cong {
  background: var(--xanh-nhat); border-left: 4px solid var(--xanh); color: #0a4d26;
}
.loi-nhan.luu-y {
  background: var(--vang-nhat); border-left: 4px solid var(--vang); color: #5a4a20;
}

.ve-chan {
  padding: 0 22px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.ve-chan a.nut-phu, .ve-chan button.nut-phu { text-align: center; text-decoration: none; }

.chan-trang {
  text-align: center;
  font-size: 13.5px; padding: 32px 20px 40px; line-height: 1.7;
  background: var(--xanh-dam); color: rgba(255,255,255,.85);
  border-top: 3px solid var(--gold);
}
.chan-trang .chan-logo {
  height: 38px; background: #fff; padding: 6px 14px;
  border-radius: 9px; margin-bottom: 14px;
}
.chan-trang p { margin: 4px 0; }
.chan-trang b { color: #fff; }
.chan-trang .chan-slogan { opacity: .7; font-size: 12.5px; margin-top: 8px; }

/* ---------- Màn hình rộng ---------- */
@media (min-width: 720px) {
  /* App quét là app ĐIỆN THOẠI. Trên laptop, kéo giãn cả màn hình thì khung
     ngắm QR to méo và danh sách khách dàn ngang khó đọc → đóng khung lại
     đúng tỷ lệ máy cầm tay, đặt giữa nền xanh sự kiện. */
  body:has(> .man-chinh:not([hidden])) {
    background:
      radial-gradient(100% 60% at 50% 0%, rgba(230,207,142,.22), transparent 60%),
      linear-gradient(160deg, var(--xanh-dam) 0%, #04371a 100%);
  }
  .man-chinh {
    max-width: 460px; margin: 0 auto;
    border-left: 1px solid rgba(230,207,142,.28);
    border-right: 1px solid rgba(230,207,142,.28);
    box-shadow: 0 0 60px rgba(0,0,0,.35);
  }
  .hero { padding: 60px 20px 66px; }
  .hero h1 { font-size: 36px; }
  .muc { padding: 56px 20px; }
}

/* ---------- Tôn trọng thiết lập giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}