:root{
  --bg:#f5f7fb; --card:#fff; --ink:#162033; --muted:#6b7280;
  --primary:#0756b8; --primary2:#0f7bdc; --accent:#17b890; --line:#dfe6ef;
  --danger:#d92d20; --shadow:0 18px 45px rgba(11,45,87,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,#eef6ff 0,#f8fbff 35%,#f5f7fb 100%);min-height:100vh}
a{color:inherit}
.wrap{width:min(1080px,calc(100% - 28px));margin:auto}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;gap:10px;align-items:center;font-weight:900;letter-spacing:.2px}
.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary2));display:grid;place-items:center;color:#fff;font-size:18px;box-shadow:0 10px 24px rgba(7,86,184,.25)}
.brand small{display:block;color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.6px}
.badge{padding:8px 12px;border-radius:999px;background:#fff;border:1px solid #d9e6f7;color:var(--primary);font-weight:800;font-size:12px}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;padding:28px 0 34px}
.hero h1{font-size:clamp(34px,5vw,62px);line-height:.98;margin:12px 0 18px;letter-spacing:-2px}
.hero h1 span{color:var(--primary)}
.hero p{font-size:17px;line-height:1.65;color:#42516a;max-width:680px}
.event-box{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0}
.event-pill{display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:14px;background:#fff;border:1px solid #dfe9f5;font-size:13px;font-weight:700}
.hero-card{background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow);border-radius:28px;padding:26px;position:relative;overflow:hidden}
.hero-card:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(15,123,220,.10);right:-60px;top:-70px}
.checkin{padding:18px;border-radius:20px;background:linear-gradient(135deg,#072d5d,#0756b8);color:#fff;margin-bottom:16px}
.checkin .kicker{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;opacity:.75}
.checkin strong{font-size:24px;display:block;margin-top:4px}
.steps{display:grid;gap:10px}
.step{display:flex;gap:12px;align-items:center;padding:13px;border-radius:16px;background:#f8fbff;border:1px solid #e5eef9}
.step b{width:32px;height:32px;border-radius:10px;background:#e8f2ff;color:var(--primary);display:grid;place-items:center}
.section{padding:20px 0 48px}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:clamp(18px,3vw,32px)}
.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.section-title h2{margin:0;font-size:28px}
.section-title p{margin:5px 0 0;color:var(--muted);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field.full{grid-column:1/-1}
label{display:block;font-size:13px;font-weight:800;margin:0 0 7px}
input,select,textarea{width:100%;padding:13px 14px;border:1px solid #ced8e6;border-radius:13px;background:#fff;color:var(--ink);font:inherit;outline:none;transition:.2s}
input:focus,select:focus,textarea:focus{border-color:#5ca2ee;box-shadow:0 0 0 4px rgba(15,123,220,.10)}
textarea{min-height:96px;resize:vertical}
.consent{display:flex;gap:10px;align-items:flex-start;padding:13px 14px;border-radius:14px;background:#f8fafc;border:1px solid #e4e9f0;color:#4b5563;font-size:13px}
.consent input{width:auto;margin-top:2px}
.btn{border:0;border-radius:14px;padding:14px 18px;font:inherit;font-weight:900;cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;box-shadow:0 10px 22px rgba(7,86,184,.20)}
.btn-ghost{background:#eef5ff;color:var(--primary)}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.notice{display:none;margin:14px 0 0;padding:12px 14px;border-radius:13px;font-weight:700;font-size:13px}
.notice.show{display:block}.notice.ok{background:#ecfdf3;color:#067647}.notice.err{background:#fff1f0;color:#b42318}
.footer{padding:22px 0 38px;color:#6b7280;font-size:12px;text-align:center}
.modal{position:fixed;inset:0;background:rgba(3,19,40,.72);display:none;align-items:center;justify-content:center;padding:18px;z-index:20}
.modal.show{display:flex}
.modal-card{background:#fff;width:min(620px,100%);border-radius:28px;padding:22px;box-shadow:0 35px 90px rgba(0,0,0,.28);position:relative}
.modal-head{text-align:center}
.modal-head h3{font-size:26px;margin:4px 0 5px}
.modal-head p{margin:0;color:var(--muted)}
.wheel-wrap{position:relative;width:min(420px,86vw);aspect-ratio:1;margin:22px auto}
.pointer{position:absolute;z-index:4;left:50%;top:-8px;transform:translateX(-50%);width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-top:36px solid #e1261c;filter:drop-shadow(0 4px 4px rgba(0,0,0,.2))}
.wheel{position:absolute;inset:0;border-radius:50%;border:10px solid #fff;box-shadow:0 0 0 5px #0a4d98,0 16px 30px rgba(4,46,96,.22);transition:transform 5s cubic-bezier(.12,.65,.12,1);overflow:hidden}
.wheel-center{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:50%;background:#fff;border:7px solid #0a4d98;display:grid;place-items:center;text-align:center;font-weight:900;color:var(--primary);box-shadow:0 8px 18px rgba(0,0,0,.18);cursor:pointer}
.wheel-labels{position:absolute;inset:0;z-index:2;pointer-events:none}
.wheel-label{position:absolute;left:50%;top:50%;width:145px;text-align:center;font-size:11px;font-weight:900;color:white;text-shadow:0 1px 2px rgba(0,0,0,.55);transform-origin:0 0}
.result{text-align:center;padding:6px 10px 2px}
.result strong{display:block;font-size:24px;color:var(--primary);margin-top:4px}
.admin-link{font-size:11px;opacity:.5;text-decoration:none}
@media(max-width:800px){.hero{grid-template-columns:1fr}.hero-card{order:-1}.grid{grid-template-columns:1fr}.field.full{grid-column:auto}.section-title{align-items:flex-start;flex-direction:column}.hero h1{letter-spacing:-1px}.topbar .badge{display:none}}

.field-hint{display:block;margin-top:6px;color:#7b8798;font-size:11px;line-height:1.4}


/* Custom combobox: hoạt động ổn định trên iPhone/Android, vẫn cho nhập tự do */
.combo{position:relative}
.combo input{padding-right:48px}
.combo-toggle{
  position:absolute;right:4px;top:4px;bottom:4px;width:40px;
  border:0;background:transparent;color:#526174;font-size:24px;
  border-radius:10px;cursor:pointer;display:grid;place-items:center;
  touch-action:manipulation;
}
.combo-toggle:active{background:#eef5ff}
.combo-menu{
  display:none;position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);
  max-height:260px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#fff;border:1px solid #d6e0ec;border-radius:14px;
  box-shadow:0 16px 38px rgba(16,42,74,.18);padding:6px;
}
.combo.open .combo-menu{display:block}
.combo-option{
  display:block;width:100%;border:0;background:#fff;color:#1d2939;
  text-align:left;padding:12px 12px;border-radius:10px;font:inherit;
  font-size:14px;cursor:pointer;touch-action:manipulation;
}
.combo-option:hover,.combo-option:active{background:#eef6ff;color:#0756b8}
.combo-empty{padding:12px;color:#7b8798;font-size:13px;line-height:1.45}
@media(max-width:800px){
  .combo-menu{max-height:220px}
  .combo-option{padding:14px 12px;font-size:15px}
}