/* ==========================================================================
   assets/css/campaign.css — Theme "Navy" CHỈ cho các trang "Đợt thu thập" mới
   (campaign.php). KHÔNG thay thế assets/css/app.css cũ (đang dùng tông đỏ
   #8a0e20 cho form khuôn mặt gốc /index.php — giữ nguyên, không đụng).
   Dùng lại ĐÚNG tên class của app.css gốc (.wrap,.header,.card,.field,.btn,
   .cam-stage...) để tái sử dụng nguyên vẹn phần DOM/JS camera đã chạy tốt,
   chỉ đổi bảng màu sang xanh navy theo yêu cầu (tham khảo tông
   thethao.phuonganlac.com).
   ========================================================================== */
:root{
  --red:#0b2a4a; --red-2:#123a63; --red-3:#1c4c7c;   /* giữ tên biến --red* để
       tương thích ngược với mọi chỗ đang dùng var(--red...), chỉ đổi GIÁ TRỊ
       sang navy — tránh phải sửa lại toàn bộ CSS bên dưới */
  --gold:#c89b3c;
  --ink:#16233a; --muted:#5b6b82; --line:#d7e0ec;
  --bg:#f4f7fb; --card:#ffffff; --ok:#128a4a; --warn:#b9770e;
  --radius:16px; --shadow:0 10px 30px rgba(11,42,74,.10);
  font-synthesis:none;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Segoe UI',system-ui,-apple-system,'Roboto',Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:720px;margin:0 auto;padding:22px 16px 60px}
.header{
  background:linear-gradient(135deg,var(--red),var(--red-3));
  color:#fff;border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow);
  position:relative;overflow:hidden;border-bottom:3px solid var(--gold);
  text-align:center;
}
.header::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);}
.header .emblem{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 12px;
  color:var(--gold)}
.header .emblem.emblem-logo{width:64px;height:64px;background:rgba(255,255,255,.92);
  box-shadow:0 4px 14px rgba(0,0,0,.18)}
.header .emblem.emblem-logo img{width:78%;height:78%;object-fit:contain}
.header .org-line{margin:0 0 4px;font-size:14.5px;font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;opacity:.92}
.header h1{margin:0;font-size:22px;font-weight:700;letter-spacing:.2px}
.header .sub{margin:8px 0 0;font-size:16px;opacity:.95}
.header .intro{margin:14px 0 0;font-size:15px;opacity:.9;
  background:rgba(255,255,255,.12);padding:10px 14px;border-radius:10px;display:inline-block;text-align:left}

.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px;margin-top:18px}
.section-title{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--red);margin:0 0 14px;display:flex;align-items:center;gap:8px}
.field{margin-bottom:20px}
.field label{display:block;font-size:16px;font-weight:600;margin-bottom:7px;color:#333}
.field .req{color:var(--gold)}
.field-help{font-size:14px;color:var(--muted);margin-top:-4px;margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;
  font-size:17px;font-family:inherit;background:#fbfbfc;transition:border .15s,box-shadow .15s;color:var(--ink);min-height:52px}
.field textarea{min-height:90px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--red-2);
  box-shadow:0 0 0 4px rgba(18,58,99,.12);background:#fff}
.hint{font-size:14px;color:var(--muted);margin-top:6px}

/* Báo lỗi tiếng Việt tại chỗ (thay cho popup trình duyệt, có thể hiện tiếng Anh) */
.field.field-error input,.field.field-error select,.field.field-error textarea{
  border-color:#c0392b;background:#fff7f6;box-shadow:0 0 0 4px rgba(192,57,43,.10)}
.field.field-error .radio-group,.field.field-error .checkbox-group{
  border:1.5px solid #c0392b;border-radius:12px;padding:10px;background:#fff7f6}
.field-error-msg{color:#c0392b;font-size:14px;font-weight:600;margin-top:6px}

.form-section{margin:26px 0 4px;padding-top:18px;border-top:1px solid var(--line);
  color:var(--red);font-size:17px;font-weight:700}
.card>.form-section:first-child{border-top:none;padding-top:0;margin-top:0}
.form-section-help{color:var(--muted);font-size:13.5px;margin:2px 0 12px}

.radio-group,.checkbox-group{display:flex;flex-direction:column;gap:10px}
/* min-width:0 — lỗi CSS flexbox kinh điển: phần tử con trong flex container mặc định
   KHÔNG co nhỏ hơn kích thước tự nhiên của nội dung bên trong nó (min-width:auto ngầm định),
   khiến khối "Khác, ghi rõ" (chứa ô nhập text) bị đẩy TRÀN RA NGOÀI 2 bên khung .checkbox-group
   dù bản thân ô nhập đã đặt width:100% đúng — vì 100% đó tính theo kích thước ĐÃ BỊ tràn của
   khung cha, không phải kích thước khung cha lẽ ra phải có. min-width:0 buộc phần tử flex co
   đúng theo khung cha, width:100% bên trong mới tính đúng. */
.radio-item,.checkbox-item{min-width:0}
/* Bố cục TABLE (không dùng flexbox) — 2 lần tự vẽ nút chọn bằng CSS trước đó (appearance:none,
   rồi ẩn input tự vẽ span riêng) đều bị lệch/méo thật trên máy người dùng (đã xác nhận qua
   ảnh chụp thật, không phải suy đoán). Đổi hẳn hướng tiếp cận: KHÔNG tự vẽ hình nữa — dùng lại
   ĐÚNG nút radio/checkbox gốc của hệ điều hành (không set width/height ép buộc pixel làm méo
   tỷ lệ — nguyên nhân gây oval ở lần 2), chỉ phóng to đều bằng transform:scale (giữ nguyên tỷ
   lệ gốc trình duyệt tự vẽ, không thể méo). Việc CĂN THẲNG HÀNG giữa nút và chữ giao hẳn cho
   display:table-cell + vertical-align:middle — kỹ thuật căn giữa cũ và bền nhất của CSS,
   đảm bảo đúng trên mọi trình duyệt kể cả các máy/app trong ứng dụng (Zalo, Facebook...). */
.radio-item,.checkbox-item{display:table;width:100%;border-collapse:collapse;padding:0;
  border:1.5px solid var(--line);border-radius:12px;font-size:16px;line-height:1.45;cursor:pointer;
  transition:border-color .15s,background .15s}
.radio-item:hover,.checkbox-item:hover{border-color:var(--red-3);background:var(--bg)}
.check-cell,.text-cell{display:table-cell;vertical-align:middle}
.check-cell{width:1%;white-space:nowrap;padding:14px 4px 14px 16px}
.text-cell{padding:14px 16px 14px 10px}
/* CHỈ nhắm đúng input[type=radio]/checkbox — selector rộng ".checkbox-item input" trước đây
   vô tình khớp luôn ô nhập text "Khác, ghi rõ" (cũng là 1 <input> nằm trong .checkbox-item),
   khiến nó bị ép width:20px + transform:scale(1.2): layout tưởng rộng đúng (100%/506px) do
   rule khác ghi đè width, nhưng transform:scale KHÔNG đổi kích thước bố cục — chỉ phóng to
   lúc VẼ ra — nên hiện to hơn 1.2 lần và tràn ra ngoài khung (đã tự đo bằng công cụ: 506px ×
   1.2 = 607.2px, khớp chính xác con số bị lỗi). */
.radio-item input[type="radio"],.checkbox-item input[type="checkbox"]{
  width:20px;height:20px;margin:0;accent-color:var(--red-2);cursor:pointer;
  transform:scale(1.2);vertical-align:middle}
/* "Khác, ghi rõ" — ô nhập text KHÔNG đặt trong table-cell như các lựa chọn khác: width:100%
   của 1 phần tử con nằm trong table-cell không đáng tin cậy giữa các trình duyệt. Khối ngoài
   .checkbox-other đổi thành block thường (không phải table), PADDING đặt ở khung ngoài cùng
   (không phải ở input) — nhờ đó width:100% của ô nhập chỉ cần tính theo đúng phần nội dung
   bên trong khung (box-sizing:border-box lo phần còn lại), không cần cộng trừ số px thủ công
   (cách cũ dùng calc(100% - 32px) dễ lệch nếu padding đổi mà quên sửa theo). */
.checkbox-item.checkbox-other{display:block;padding:14px 16px}
.checkbox-item.checkbox-other .check-row{display:table;width:100%;cursor:pointer}
.checkbox-item.checkbox-other .check-row .check-cell{padding:0 4px 0 0}
.checkbox-item.checkbox-other .check-row .text-cell{padding:0}
.checkbox-item.checkbox-other .other-text{display:block;width:100%;margin:8px 0 0}

.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.social a{flex:1 1 30%;min-width:120px;text-decoration:none;text-align:center;
  padding:14px 12px;border-radius:12px;font-weight:600;font-size:16px;border:1.5px solid var(--line);
  color:#333;background:#fff;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px}
.social a.g{border-color:#dadce0}
.social a.f{border-color:#dbe4ff;color:#1877f2}
.social a.z{border-color:#cfe6ff;color:#0068ff}
.social a:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.logged{background:#eefaf1;border:1.5px solid #bfe8cc;border-radius:12px;padding:12px 14px;
  font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.logged b{color:var(--ok)}

.btn{border:none;border-radius:12px;padding:15px 22px;font-size:16px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:transform .12s,box-shadow .12s,opacity .12s;min-height:52px}
.btn:active{transform:scale(.98)}
.btn-primary{background:linear-gradient(135deg,var(--red-2),var(--red-3));color:#fff;box-shadow:var(--shadow)}
.btn-ghost{background:#fff;border:1.5px solid var(--line);color:#333}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-lg{padding:17px 26px;font-size:18px}

/* ---- Chụp ảnh (khuôn mặt đa góc) — GIỮ NGUYÊN cấu trúc DOM/class của app.css gốc
   để assets/js/campaign-camera.js (bản chuyển thể từ form.js gốc) chạy đúng ---- */
.face-guide{background:#f4f8fc;border:1.5px dashed #b9cfe7;border-radius:14px;padding:14px 16px;margin-bottom:14px;font-size:15px;color:#123a63}
.face-guide ul{margin:8px 0 0;padding-left:20px}
.cam-stage{position:relative;width:100%;max-width:360px;margin:0 auto;aspect-ratio:3/4;
  background:#111;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.cam-stage video,.cam-stage canvas{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cam-oval{position:absolute;inset:0;pointer-events:none}
.cam-oval svg{width:100%;height:100%}
.cam-pose{position:absolute;top:12px;left:0;right:0;text-align:center;color:#fff;
  font-weight:700;font-size:15px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.cam-status{position:absolute;top:38px;left:0;right:0;text-align:center;color:#fff;
  font-weight:600;font-size:12.5px;opacity:.95;text-shadow:0 1px 4px rgba(0,0,0,.6);transition:color .15s}
.cam-flash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:64px;font-weight:800;color:#22c55e;background:rgba(255,255,255,.14);animation:flashPulse .5s ease}
@keyframes flashPulse{0%{opacity:0;transform:scale(.7)}30%{opacity:1;transform:scale(1.05)}100%{opacity:0;transform:scale(1)}}
.cam-controls{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;justify-content:center}
.thumb{width:64px;height:80px;border-radius:10px;overflow:hidden;position:relative;border:2px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .x{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.6);color:#fff;border:none;
  width:18px;height:18px;border-radius:50%;font-size:11px;cursor:pointer;line-height:1}
.thumb .pose{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.55);color:#fff;
  font-size:10px;text-align:center;padding:1px}
.progress-dots{display:flex;gap:6px;justify-content:center;margin:10px 0 4px}
.progress-dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.progress-dots i.done{background:var(--ok)}
.progress-dots i.active{background:var(--red-2)}

.footer{text-align:center;color:var(--muted);font-size:12.5px;margin-top:26px}
.footer a{color:var(--muted)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:#16233a;color:#fff;padding:14px 20px;border-radius:12px;font-size:16px;
  box-shadow:var(--shadow);opacity:0;transition:opacity .2s;z-index:50;max-width:90%}
.toast.show{opacity:1}
.success-screen{text-align:center;padding:36px 20px}
.success-screen .check{width:76px;height:76px;border-radius:50%;background:#eefaf1;color:var(--ok);
  display:flex;align-items:center;justify-content:center;font-size:40px;margin:0 auto 16px}
@media(max-width:520px){.header h1{font-size:19px}.social a{flex:1 1 100%}}

/* ---- Danh sách đợt (index.php — trang chủ giới thiệu hệ thống) ---- */
.campaign-list{display:flex;flex-direction:column;gap:14px}
.campaign-item{display:flex;align-items:flex-start;gap:14px;background:var(--card);
  border:1.5px solid var(--line);border-radius:14px;padding:18px 20px;text-decoration:none;
  box-shadow:var(--shadow);transition:border-color .15s,transform .15s,box-shadow .15s}
.campaign-item:hover{border-color:var(--red-3);transform:translateY(-2px);box-shadow:0 14px 30px rgba(11,42,74,.14)}
.campaign-item .badge-icon{flex:0 0 auto;width:46px;height:46px;border-radius:12px;
  background:linear-gradient(135deg,var(--red-2),var(--red-3));color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(18,58,99,.25)}
.campaign-item .badge-icon svg{width:24px;height:24px}
.campaign-item .body{flex:1;min-width:0}
.campaign-item h3{margin:0 0 6px;color:var(--red);font-size:17px}
.campaign-item p{margin:0;color:var(--muted);font-size:14.5px}
.campaign-item .meta{color:var(--gold);font-weight:700;font-size:14px;margin-top:8px;
  display:flex;align-items:center;gap:4px}
.campaign-item:hover .meta{text-decoration:underline}
.campaign-empty{text-align:center;color:var(--muted);padding:30px 10px;font-size:14px}

/* ---- Trang chủ: hero bắt mắt, gợi cảm giác "công nghệ" (thuần CSS, không JS/thư viện) ---- */
.home-hero{position:relative;overflow:hidden}
.home-hero::before{content:"";position:absolute;inset:-20% -10%;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.6px, transparent 1.6px);
  background-size:24px 24px;opacity:.55;animation:homeDrift 30s linear infinite}
@keyframes homeDrift{from{background-position:0 0}to{background-position:240px 240px}}
.home-hero .emblem{position:relative;animation:emblemPulse 2.8s ease-out infinite}
@keyframes emblemPulse{
  0%{box-shadow:0 0 0 0 rgba(200,155,60,.5)}
  70%{box-shadow:0 0 0 18px rgba(200,155,60,0)}
  100%{box-shadow:0 0 0 0 rgba(200,155,60,0)}
}
.home-hero h1,.home-hero .sub,.home-tagline{position:relative}
.home-tagline{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.home-tagline span{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);
  border-radius:20px;padding:6px 13px 6px 10px;font-size:12.5px;font-weight:600}
.home-tagline svg{width:15px;height:15px;flex:0 0 auto}
@media(max-width:520px){.campaign-item{flex-direction:column}.campaign-item .badge-icon{margin-bottom:2px}}

/* ---- Hiệu ứng chuyển động "công nghệ" cho form nhập liệu (campaign.php) ----
   Nguyên tắc an toàn: KHÔNG dùng animation để điều khiển opacity/hiển thị của bất kỳ nội
   dung/nút bấm nào — nếu trình duyệt/app-trong-app nào đó không chạy được animation, nội
   dung vẫn phải hiện đầy đủ như bình thường ngay từ đầu (bài học từ các lần chỉnh CSS
   nút chọn trước đây: ưu tiên chắc chắn hoạt động hơn hiệu ứng đẹp). Mọi hiệu ứng ở đây chỉ
   tô điểm THÊM lên trạng thái tĩnh vốn đã đúng, không thay thế nó. */

/* Nút gửi: ánh sáng lướt nhẹ qua dải gradient sẵn có (không đổi màu/kích thước nút) */
.btn-primary{background-size:220% 100%;animation:btnSheen 6s ease-in-out infinite}
@keyframes btnSheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Viền/tiêu đề mục: gạch chân nhỏ ánh vàng chạy nhẹ bên dưới, gợi cảm giác số hoá */
.section-title{position:relative}
.section-title::after{content:"";display:block;width:34px;height:2px;margin-left:8px;
  background:linear-gradient(90deg,var(--gold),transparent);animation:accentGlow 3.2s ease-in-out infinite}
@keyframes accentGlow{0%,100%{opacity:.5;width:34px}50%{opacity:1;width:52px}}

/* Ô nhập khi đang focus: quầng sáng đập nhẹ 1 nhịp rồi dừng hẳn (không lặp mãi gây xao nhãng) */
.field input:focus,.field textarea:focus,.field select:focus{animation:focusPulse .5s ease-out}
@keyframes focusPulse{0%{box-shadow:0 0 0 0 rgba(18,58,99,.28)}100%{box-shadow:0 0 0 4px rgba(18,58,99,.12)}}

@media(prefers-reduced-motion: reduce){
  .btn-primary,.section-title::after,.field input:focus,.field textarea:focus,.field select:focus,
  .home-hero::before,.home-hero .emblem{animation:none}
}