.card { width: 100%; max-width: 600px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 6px; padding: 44px 48px; position: relative; z-index: 1; box-shadow: 0 8px 32px rgba(74, 136, 184, 0.18), 0 2px 8px rgba(74, 136, 184, 0.08); }
.corner-logo { position: absolute; top: 18px; right: 18px; width: 64px; height: auto; opacity: 0.92; transition: opacity 0.2s, transform 0.2s; }
.corner-logo:hover { opacity: 1; transform: scale(1.05); }

/* ===== Nền động: mây trôi + máy bay (zzairline) ===== */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sky svg.cloud2 { position: absolute; left: 0; height: auto; opacity: 0; filter: drop-shadow(0 3px 4px rgba(110,140,175,0.20)); will-change: transform, opacity; }
.sky svg.float  { position: absolute; height: auto; opacity: 0.82; filter: drop-shadow(0 3px 5px rgba(110,140,175,0.18)); will-change: transform; }
.sky .d1 { width: 150px; top: 8%;  animation: zz-drift  90s linear infinite; }
.sky .d2 { width: 116px; top: 50%; animation: zz-drift2 130s linear infinite; animation-delay: -40s; }
.sky .d3 { width: 132px; top: 70%; animation: zz-drift 165s linear infinite; animation-delay: -90s; }
/* hai cụm mây hai bên — trôi nhẹ tại chỗ */
.sky .side-left  { left: -3%;  top: 24%; width: 220px; animation: zz-float  13s ease-in-out infinite; }
.sky .side-right { left: auto; right: -3%; top: 40%; width: 240px; animation: zz-float2 17s ease-in-out infinite; }
.sky .plane { position: absolute; top: 16%; left: 0; width: 40px; height: auto; color: var(--accent-deep); opacity: 0; will-change: transform, opacity; animation: zz-fly 70s linear infinite; }
@keyframes zz-drift {
  0%   { transform: translate(-36vw, 0); opacity: 0; }
  12%  { opacity: 0.92; }
  40%  { transform: translate(24vw, -10px); }
  70%  { transform: translate(72vw, 8px); }
  88%  { opacity: 0.92; }
  100% { transform: translate(126vw, -4px); opacity: 0; }
}
@keyframes zz-drift2 {
  0%   { transform: translate(-42vw, 0); opacity: 0; }
  15%  { opacity: 0.85; }
  45%  { transform: translate(30vw, 12px); }
  72%  { transform: translate(76vw, -8px); }
  85%  { opacity: 0.85; }
  100% { transform: translate(130vw, 6px); opacity: 0; }
}
@keyframes zz-float  { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(7px, -13px); } }
@keyframes zz-float2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-8px, 11px); } }
@keyframes zz-fly {
  0%   { transform: translate(-12vw, 8px) rotate(-4deg); opacity: 0; }
  10%  { opacity: 0.5; }
  50%  { transform: translate(55vw, -10px) rotate(-2deg); }
  90%  { opacity: 0.5; }
  100% { transform: translate(122vw, 6px) rotate(-3deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sky { display: none; } }

.modal-overlay { position: fixed; inset: 0; background: rgba(31, 27, 22, 0.45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100; }
.modal { background: var(--surface); border: 1px solid var(--hairline); border-radius: 4px; padding: 32px; max-width: 480px; width: 100%; }
.modal-title { font-family: 'Fraunces', serif; font-size: 22px; margin-bottom: 8px; }
.modal-desc { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; line-height: 1.6; }
.modal-url-row { display: flex; gap: 8px; margin-bottom: 16px; }
.modal-url-row input { flex: 1; font-family: 'DM Sans', monospace; font-size: 12.5px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--hairline); border-radius: 3px; color: var(--ink); }
.modal-url-row input:focus { outline: none; border-color: var(--accent); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 540px) {
  .card { padding: 28px 22px; }
  .countdown { font-size: 64px; }
  .brand { font-size: 28px; }
  .corner-logo { width: 48px; top: 14px; right: 14px; }
  .row-label { min-width: 70px; }
}

/* ===== Tab navigation ===== */
.tabs { display: flex; gap: 2px; margin-bottom: 28px; border-bottom: 1px solid var(--hairline); }
.tab { flex: 1; background: none; border: none; font-family: inherit; font-size: 12.5px; letter-spacing: 0.03em; color: var(--muted); padding: 10px 6px 13px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { animation: panelFade 0.22s ease; }
@keyframes panelFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ===== Shared form helpers ===== */