/* KENDU CAR — Light Theme Premium (Nền sáng, Khối xanh than, Chữ cam/trắng) */
:root {
  /* Màu nền tổng thể */
  --bg-body: #fdfaf9;        /* Trắng hồng phớt rất nhạt */
  --bg-body-alt: #fff6f4;    /* Hồng phớt đậm hơn chút cho xen kẽ */
  
  /* Màu khối (Blocks/Cards) */
  --block-navy: #132238;     /* Xanh than đậm */
  --block-navy-light: #1e3452; /* Xanh than nhạt hơn cho các ô bên trong */
  
  /* Màu chữ & Điểm nhấn */
  --text-dark: #132238;      /* Chữ đen xanh cho nền sáng */
  --text-light: #ffffff;     /* Chữ trắng cho nền xanh than */
  --text-muted: #64748b;     /* Chữ xám cho nền sáng */
  --text-muted-light: #a4b4c7; /* Chữ xám nhạt cho nền xanh than */
  
  --primary: #f15a24;        /* Cam cháy */
  --primary-hover: #d94e20;
  
  /* Trạng thái (Giữ nguyên logic nhận diện) */
  --green: #10b981; --green-bg: rgba(16, 185, 129, 0.1);
  --yellow: #f59e0b; --yellow-bg: rgba(245, 158, 11, 0.1);
  --red: #ef4444; --red-bg: rgba(239, 68, 68, 0.1);
  --gray: #64748b; --gray-bg: rgba(100, 116, 139, 0.1);
}

* { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg-body);
  color: var(--text-dark);
  font: 1rem/1.6 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* YÊU CẦU: CĂN ĐỀU 2 BÊN (JUSTIFY) CHO TOÀN BỘ TEXT */
p, li, .justify-text {
  text-align: justify;
  text-justify: inter-word;
}

/* HEADER & FOOTER */
.dau-trang {
  display: flex; align-items: center; justify-content: space-between;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 24px;
  position: sticky; top: 0; z-index: 50;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo img { height: 32px; width: auto; }
.logo span { font-weight: 800; font-size: 1.25rem; color: var(--text-dark); letter-spacing: 0.5px; }

.noi-dung { max-width: 1200px; margin: 0 auto; padding: 40px 24px 80px; width: 100%; flex: 1; }
.chan-trang { border-top: 1px solid #e2e8f0; padding: 32px 24px; text-align: center; color: var(--text-muted); font-size: 0.9rem; background: #fff; }
.chan-trang a { color: var(--text-muted); text-decoration: none; margin: 0 12px; }
.chan-trang a:hover { color: var(--primary); }

/* TYPOGRAPHY CHUNG */
h1.hero-title { font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin: 0 0 24px; letter-spacing: -1px; color: var(--text-dark); }
h1.hero-title span { color: var(--primary); display: block; }
h2 { font-size: 1.75rem; font-weight: 700; margin: 32px 0 16px; }
.phu { color: var(--text-muted); font-size: 1.125rem; max-width: 600px; margin-bottom: 32px; }
.phu-dam { font-size: 1.25rem; font-weight: 600; color: var(--text-dark); }

/* KHỐI XANH THAN (Dùng cho form đăng ký và các block nổi bật) */
.khung-navy {
  background: var(--block-navy);
  color: var(--text-light);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(19, 34, 56, 0.15);
}
.khung-navy h2, .khung-navy h3, .khung-navy label { color: var(--text-light); }
.khung-navy .phu, .khung-navy .ghi-chu { color: var(--text-muted-light); }

/* KHỐI TRẮNG (Dùng cho form cơ bản) */
.khung {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px;
  margin: 24px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

/* FORM & INPUT */
label { display: block; font-weight: 600; margin: 16px 0 8px; }
input[type="email"], input[type="text"], input[type="date"], select {
  width: 100%; min-height: 56px; padding: 12px 16px;
  font-size: 1.125rem; color: var(--text-dark);
  background: #ffffff;
  border: 2px solid #cbd5e1; border-radius: 12px;
  transition: border-color 0.2s;
}
input:focus, select:focus { outline: none; border-color: var(--primary); }
.khung-navy input { background: var(--block-navy-light); border-color: #334155; color: #fff; }
.khung-navy input:focus { border-color: var(--primary); }

/* NÚT BẤM */
.nut {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 32px;
  font-size: 1.125rem; font-weight: 700;
  border-radius: 12px; cursor: pointer; text-decoration: none;
  transition: all 0.2s; border: none;
}
.nut-rong { width: 100%; margin-top: 24px; }
.nut-primary { background: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(241, 90, 36, 0.3); }
.nut-primary:hover { background: var(--primary-hover); transform: translateY(-2px); }
.nut-phu { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.nut-phu:hover { background: rgba(241, 90, 36, 0.05); }
.nut-nho { min-height: 44px; padding: 0 20px; font-size: 1rem; }

/* BẢNG ĐIỀU KHIỂN (DASHBOARD) */
.the {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px; padding: 24px; margin: 16px 0;
  border-left: 6px solid var(--gray);
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.the h2 { margin: 0; font-size: 1.25rem; color: var(--text-dark); }
.the p { margin: 0; color: var(--text-muted); }
.the .so-ngay { font-size: 1.5rem; font-weight: 800; }
.the .hanh-dong { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

.the-xanh { border-left-color: var(--green); }
.the-vang { border-left-color: var(--yellow); }
.the-do { border-left-color: var(--red); }
.the-qua_han { border-left-color: var(--gray); }

/* TRANG ĐĂNG KÝ 2 CỘT */
.hai-cot { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .hai-cot { grid-template-columns: 1fr 1fr; } }

/* TIỆN ÍCH KHÁC */
.o-chon { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; cursor: pointer; }
.o-chon input { width: 24px; height: 24px; accent-color: var(--primary); margin-top: 2px; }
.ghi-chu { font-size: 0.9rem; margin-top: 8px; }
.loi { background: var(--red-bg); color: var(--red); border: 1px solid var(--red); padding: 16px; border-radius: 12px; margin: 16px 0; }
.thong-bao { background: var(--green-bg); color: var(--green); border: 1px solid var(--green); padding: 16px; border-radius: 12px; margin: 16px 0; }

/* --- CẤU TRÚC TRANG TÍNH NĂNG --- */
.landing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 1024px) {
  .landing-grid { grid-template-columns: 1fr 1.2fr; }
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
.vs-icon { font-size: 2rem; margin-bottom: 8px; }

/* 1. Hiển thị ảnh Poster từ Base64 */
.poster-image-wrapper {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(19, 34, 56, 0.25);
}
.poster-image {
  width: 100%;
  height: auto;
  display: block;
}

/* --- TĂNG SIZE CHỮ CHO TRANG ĐĂNG KÝ (ĐÃ SỬA DỨT ĐIỂM) --- */

/* Căn thẳng lên trên cho 2 cột */
.hai-cot {
  align-items: flex-start; 
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Tiêu đề chính to hơn */
.hero-title-nho {
  font-size: 2.25rem !important; /* Tăng từ 2rem lên 2.25rem */
  margin-bottom: 16px;
}

/* Đoạn mô tả dưới tiêu đề */
.cot-trai .phu {
  font-size: 1.125rem; /* Tăng lên 18px */
  line-height: 1.6;
}

/* Khung xanh than chứa form */
.khung-navy {
  padding: 28px; /* Nới rộng padding một chút cho thoáng */
}

/* Chữ trong danh sách "Cách hoạt động" to hơn 1 size */
.danh-sach-nav {
  font-size: 1rem !important; /* Tăng từ 0.9rem lên 1rem */
  line-height: 1.6;
  padding-left: 20px;
}
.danh-sach-nav li {
  margin-bottom: 12px;
}

/* Các nút bấm và input */
.nut {
  font-size: 1.125rem; /* Tăng size nút bấm */
}
input[type="email"] {
  font-size: 1.125rem; /* Tăng size chữ trong ô nhập */
}

/* Dòng ghi chú nhỏ (Donate, chính sách) to hơn một chút */
.ghi-chu, .ghi-chu-navy {
  font-size: 1rem !important; /* Tăng từ 0.9rem lên 1rem */
  line-height: 1.5;
}
.ghi-chu-navy { 
  margin-top: 24px; 
  padding-top: 24px; 
  border-top: 1px solid #334155; 
  color: var(--text-muted-light); 
}

/* Các class tiện ích bổ sung */
.mt-0 { margin-top: 0; }
.text-primary { color: var(--primary); }
.link-primary { color: var(--primary); }

/* --- ĐẶT TURNSTILE ĐÈ LÊN Ô NHẬP EMAIL --- */
.input-wrapper {
  position: relative;
  margin-bottom: 8px;
}
.input-email {
  /* Thêm padding bên phải để chừa chỗ cho Turnstile */
  padding-right: 120px !important; 
}
.cf-turnstile-overlay {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%) scale(0.65); /* Thu nhỏ Turnstile lại cho vừa */
  transform-origin: right center;
  z-index: 10;
}