/* --- Mobile-friendly styles for countdown and upload card --- */
@media (max-width: 600px) {
	#countdown-timer {
		font-size: 1.05rem !important;
		padding: 14px 2vw 10px 2vw !important;
		border-radius: 0 0 16px 16px;
		min-width: 0;
		word-break: break-word;
	}
	.upload-card {
		max-width: 98vw;
		margin: 18px auto;
		padding: 18px 6px;
		border-radius: 12px;
		box-shadow: 0 4px 16px rgba(6,62,58,0.10);
	}
	.upload-card h2 {
		font-size: 1.1rem;
	}
	.file-list {
		font-size: .93rem;
	}
	.file-list li {
		word-break: break-all;
	}
}
.weather-card {
	width: 320px;
	min-height: 170px;
	margin: 0 auto 18px auto;
	padding: 22px 20px 18px 20px;
	border-radius: 16px;
	background: linear-gradient(120deg, #e0f7fa 60%, #f7fbff 100%);
	box-shadow: 0 6px 24px rgba(6, 62, 58, 0.10);
	border: 1.5px solid rgba(6,123,112,0.09);
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	position: relative;
	overflow: hidden;
}
.weather-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-bottom: 4px;
}
.city {
	font-weight: 700;
	color: var(--accent);
	font-size: 1.1rem;
}
.local-time {
	font-size: 1.05rem;
	color: var(--muted);
	font-weight: 600;
}
.weather-main {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 8px;
}
.weather-icon {
	font-size: 2.5rem;
	margin-right: 2px;
	filter: drop-shadow(0 2px 6px rgba(6,123,112,0.10));
}
.temp {
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--accent-2, #ff6b35);
	line-height: 1.1;
}
.desc {
	font-weight: 600;
	color: #374151;
	font-size: 1.08rem;
}
.meta {
	color: var(--muted);
	font-size: .93rem;
	margin-top: 8px;
}
@media (max-width: 700px) {
	.weather-card { width: 100%; min-width: 0; padding: 12px 6px; }
	.weather-main { gap: 10px; }
	.temp { font-size: 1.3rem; }
}
.slideshow {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.slider {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}
.slides {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 440px;
}
.slides img {
	display: block;
	margin: 0 auto;
	border-radius: 18px;
	box-shadow: 0 8px 32px rgba(6, 62, 58, 0.18), 0 2px 8px rgba(6,169,154,0.13);
	border: 6px solid #fff;
	background: #f7fbff;
	max-width: 90vw;
	max-height: 420px;
	object-fit: cover;
	transition: box-shadow 0.2s, border 0.2s;
}
.slides img:hover {
	box-shadow: 0 16px 48px rgba(6, 62, 58, 0.22), 0 4px 16px rgba(6,169,154,0.18);
	border-color: var(--accent);
}
# --- Custom styles from original index.html for landing page ---
:root{
	--accent:#06a99a;
	--accent-2:#ff6b35;
	--shadow: 0 8px 24px rgba(11,107,107,0.08);
	--card-bg: rgba(255,255,255,0.98);
	--heading:#063e3a;
	--aside-bg: linear-gradient(120deg, #e0f7fa 60%, #f7fbff 100%);
	--card-bg-2: linear-gradient(90deg, #e0f7f4 0%, #f7fbff 100%);
}
html,body{height:100%;margin:0;font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#0f1724;line-height:1.45;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(180deg,#f3faf9,#ffffff 40%);}
body {padding:18px;}
header{
	padding:14px 18px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	background:var(--card-bg);
	border-radius:12px;
	box-shadow:var(--shadow);
	border:1px solid rgba(6,123,112,0.04);
}
.logo{display:flex;gap:12px;align-items:center;flex-shrink:0}
.logo img{display:block;border-radius:8px;box-shadow:0 6px 18px rgba(11,107,107,0.04);object-fit:contain}
.logo img.stjohn{height:56px}
.logo img.vietnam{height:88px}
.title{flex:1;text-align:center;min-width:160px}
header h1{margin:0;color:var(--accent);font-family:"Merriweather",serif;font-weight:700;font-size:1.35rem}
.tag{color:var(--muted);margin-top:6px;font-weight:500;font-size:.92rem}
nav.primary{display:flex;gap:12px;align-items:center}
.nav{list-style:none;padding:0;margin:0;display:flex;gap:12px;align-items:center}
.nav a{color:var(--accent);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:8px}
.nav a:hover{background:linear-gradient(90deg,rgba(6,123,112,0.06),rgba(6,123,112,0.02))}
.hero-wrap{display:flex;gap:18px;align-items:flex-start;max-width:1100px;margin:18px auto}
.hero{flex:1;padding:28px 22px;border-radius:12px;background:var(--card-bg);box-shadow:var(--shadow)}
.hero h2{font-family:"Merriweather",serif;color:#063e3a;margin:6px 0;font-size:1.35rem}
.hero p{color:var(--muted);max-width:720px;margin:8px auto}
.cta{margin-top:14px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.card{display:inline-block;padding:8px 14px;border-radius:9px;text-decoration:none;color:#0f1724;min-width:90px;text-align:center;font-weight:700;transition:transform .18s, box-shadow .18s;font-size:0.98rem;line-height:1.2;box-shadow:0 2px 8px rgba(6,123,112,0.07)}
.card.small{color:#fff;}
.card.small{padding:6px 10px;font-size:0.93rem;min-width:0;border-radius:7px;line-height:1.1;box-shadow:0 1px 4px rgba(6,123,112,0.08)}
.card.daily{background:linear-gradient(135deg,#4fc3f7,#0288d1)}
.card.accom{background:linear-gradient(135deg,#ff8a65,#ff6b35)}
.card.tshirt{background:linear-gradient(135deg,#9b59b6,#6a1b9a)}
.card.info{background:linear-gradient(135deg,#66bb6a,#2e7d32)}
.card:focus,.card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(6,123,112,0.12)}
.weather-card{width:260px;padding:16px;border-radius:12px;background:linear-gradient(180deg,#ffffff,#fcfffd);box-shadow:0 10px 26px rgba(6,123,112,0.06);border:1px solid rgba(6,123,112,0.04);font-size:0.95rem;color:#0f1724}
.weather-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.city{font-weight:700;color:var(--accent)}
.local-time{font-size:0.95rem;color:var(--muted)}
.weather-main{display:flex;align-items:center;gap:12px;margin-top:8px}
.temp{font-size:2rem;font-weight:800;color:var(--accent-2)}
.desc{font-weight:600;color:#374151}
.meta{color:var(--muted);font-size:.85rem;margin-top:8px}
.weather-icon{font-size:2rem}
.slideshow{max-width:1100px;margin:22px auto;padding:18px;border-radius:12px;background:var(--card-bg);box-shadow:var(--shadow)}
.slider{position:relative;overflow:hidden;border-radius:10px}
.slides{display:flex;transition:transform .45s ease-in-out;width:100%}
.slides img{width:100%;flex:0 0 100%;height:420px;object-fit:cover;display:block;border-radius:8px}
.slides img[src$="SJC85-1.jpeg"] {object-fit: cover;width: 100%;height: 420px;aspect-ratio: 16/9;background: #222;}
.slider button.prev,.slider button.next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.48);border:0;color:#fff;font-size:28px;padding:8px 12px;border-radius:6px;cursor:pointer}
.slider button.prev{left:12px}
.slider button.next{right:12px}
.slider .dots{display:flex;gap:8px;justify-content:center;padding:12px 0}
.slider .dot{width:10px;height:10px;border-radius:50%;background:rgba(11,107,107,0.18);cursor:pointer;border:0}
.slider .dot.active{background:var(--accent)}
.flight-simulation{max-width:1100px;margin:22px auto;padding:24px;border-radius:12px;background:linear-gradient(135deg,rgba(79,195,247,0.08),rgba(102,187,106,0.06));box-shadow:var(--shadow);border:2px solid rgba(6,123,112,0.12);position:relative;overflow:hidden}
.flight-sky{position:absolute;top:0;left:0;right:0;height:120px;background:linear-gradient(180deg,#e3f2fd,transparent);pointer-events:none;overflow:hidden}
.plane-container{position:absolute;display:flex;align-items:center;gap:8px;animation:flyIn 8s linear infinite;opacity:0}
.plane-container:nth-child(1){top:15px;animation-delay:0s}
.plane-container:nth-child(2){top:45px;animation-delay:3s}
.plane-container:nth-child(3){top:75px;animation-delay:6s}
.plane{font-size:3.5rem}
.flag-banner{display:flex;gap:4px;animation:wave 0.5s ease-in-out infinite}
.vietnam-flag{width:45px;height:30px;background:#DA251D;position:relative;border:1px solid rgba(0,0,0,0.1);box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.vietnam-flag::after{content:'⭐';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#FFFF00;font-size:18px}
@keyframes flyIn{0%{left:-150px;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% + 50px);opacity:0}}
@keyframes wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.arrival-board{background:var(--card-bg);border-radius:10px;padding:20px;margin-top:20px;box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.board-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid rgba(6,123,112,0.1)}
.board-title{font-family:'Merriweather',serif;font-size:1.4rem;color:var(--accent);margin:0}
.arrivals-list{display:grid;gap:10px}
.arrival-item{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:12px;background:linear-gradient(90deg,rgba(79,195,247,0.05),transparent);border-radius:8px;border-left:3px solid #4fc3f7;animation:slideIn 0.5s ease-out;opacity:0;animation-fill-mode:forwards}
@keyframes slideIn{from{transform:translateX(-20px);opacity:0}to{transform:translateX(0);opacity:1}}
.arrival-icon{font-size:1.5rem}
.arrival-name{font-weight:600;color:#0f1724}
.arrival-from{color:var(--muted);font-size:0.85rem}
.arrival-status{padding:4px 10px;border-radius:6px;font-size:0.8rem;font-weight:700;background:linear-gradient(135deg,#66bb6a,#2e7d32);color:#fff}
.arrival-status.landing{background:linear-gradient(135deg,#ffa726,#ff6b35);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}
.stats-bar{display:flex;gap:20px;justify-content:center;margin-top:20px;padding-top:20px;border-top:1px solid rgba(6,123,112,0.1);flex-wrap:wrap}
.stat{text-align:center}
.stat-number{font-size:2rem;font-weight:800;color:var(--accent);font-family:'Merriweather',serif}
.stat-label{color:var(--muted);font-size:0.85rem;margin-top:4px}
@media (max-width:900px){.logo img.vietnam{height:64px}.hero-wrap{flex-direction:column}.weather-card{width:100%}.arrival-item{grid-template-columns:auto 1fr;gap:8px}.arrival-from,.arrival-status{grid-column:2}}
@media (max-width:700px){.slides img{height:220px}}
:root{--teal:#063e3a;--accent:#06a99a;--muted:#6b7280}
*{box-sizing:border-box}
body {
	font-family: "Poppins", system-ui, Segoe UI, Roboto, Arial, sans-serif;
	background: linear-gradient(180deg, #f7fbff, #ffffff);
	color: #0f1724;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.site {
	max-width: 980px;
	width: 100%;
	padding: 20px;
	margin: 20px auto 0 auto;
	flex: 1 0 auto;
}

main {
	flex: 1 0 auto;
}

footer {
	flex-shrink: 0;
}
.site{max-width:980px;width:100%;padding:20px}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
h1, .h1, h3, h4 {
	font-family: "Merriweather", serif;
	color: var(--heading);
	margin-top: 0;
	letter-spacing: -0.5px;
}
h1 { font-size: 2.2rem; letter-spacing: -1px; }
h3 { font-size: 1.3rem; margin-bottom: 0.7em; }
h4 { font-size: 1.08rem; color: var(--accent); margin-bottom: 0.5em; }
.card {
	background: rgba(255,255,255,0.85);
	border-radius: 18px;
	padding: 28px 24px 22px 24px;
	box-shadow: 0 8px 32px rgba(6, 62, 58, 0.13), 0 1.5px 6px rgba(6,169,154,0.08);
	border: 1.5px solid rgba(6,123,112,0.09);
	backdrop-filter: blur(6px);
	margin-bottom: 28px;
	transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover {
	box-shadow: 0 16px 40px rgba(6, 62, 58, 0.18), 0 2px 8px rgba(6,169,154,0.13);
	transform: translateY(-2px) scale(1.012);
}
.card.full {
	background: var(--card-bg-2);
	border: 1.5px solid var(--accent);
}
.card.aside {
	background: var(--aside-bg);
	border-left: 4px solid var(--accent);
	box-shadow: 0 2px 12px rgba(6,169,154,0.10);
}
form{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:12px}
input[type="text"], input[type="password"]{padding:10px;border-radius:8px;border:1px solid #e6eef0;width:100%}
.drop{border:2px dashed rgba(6,123,112,0.12);padding:18px;border-radius:10px;text-align:center;background:linear-gradient(180deg,#ffffff,#fbffff);cursor:pointer}
.drop.drag{background:#f0fffa;border-color:rgba(6,123,112,0.22)}
.previews{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.preview{width:100px;height:100px;border-radius:8px;overflow:hidden;border:1px solid #eef4f3;background:#fafafa;display:flex;align-items:center;justify-content:center;position:relative}
.preview img{max-width:100%;max-height:100%;object-fit:cover}
.size{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,0.5);color:#fff;padding:2px 6px;border-radius:6px;font-size:11px}
.controls{display:flex;gap:8px;align-items:center}
button{background:linear-gradient(90deg,var(--accent),#067b70);color:#fff;border:0;padding:10px 14px;border-radius:8px;cursor:pointer;font-weight:600}
button.ghost{background:#fff;color:var(--accent);border:1px solid rgba(6,123,112,0.08)}
progress{width:100%;height:10px;border-radius:6px}
.note{color:var(--muted);font-size:.92rem}
#debug{margin-top:12px;background:#0b171a;color:#dff7f3;padding:12px;border-radius:8px;font-family:monospace;font-size:13px;white-space:pre-wrap;display:none}
.small{font-size:.93rem;color:var(--muted);line-height:1.7}
/* Modern button and quick links */
.btn {
	background: linear-gradient(90deg, var(--accent), #067b70 80%);
	color: #fff;
	padding: 10px 22px;
	border-radius: 10px;
	text-decoration: none;
	font-weight: 600;
	display: inline-block;
	margin-top: 8px;
	box-shadow: 0 2px 8px rgba(6,169,154,0.10);
	transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.btn:hover {
	background: linear-gradient(90deg, #067b70, var(--accent) 80%);
	box-shadow: 0 4px 16px rgba(6,169,154,0.18);
	transform: translateY(-1px) scale(1.03);
}
.toc {
	list-style: none;
	padding: 0;
	margin: 0;
}
.toc li {
	margin-bottom: 8px;
}
.toc a {
	color: var(--accent);
	text-decoration: none;
	font-weight: 700;
	padding: 2px 0 2px 2px;
	border-radius: 4px;
	transition: background 0.18s, color 0.18s;
	font-size: 1.01em;
}
.toc a:hover {
	background: #e0f7fa;
	color: var(--heading);
}
.meta { margin: 14px 0 0 0; color: var(--accent); font-weight: 600; }
.contact-row { margin-bottom: 8px; font-size: 1.01em; }
.muted { color: var(--muted); }
@media (max-width: 700px) {
	.site { padding: 6px; }
	.card { padding: 10px 6px 10px 6px; border-radius: 12px; }
	header { flex-direction: column; gap: 8px; }
	h1 { font-size: 1.3rem; }
	h3 { font-size: 1.05rem; }
	h4 { font-size: 0.98rem; }
	.btn { padding: 8px 12px; font-size: 0.98em; }
}
#forbiddenHelp{display:none;margin-top:12px;padding:12px;border-radius:8px;background:#fff5f5;border:1px solid #ffd6d6;color:#7a1111}
#forbiddenHelp p{margin:6px 0}
#forbiddenHelp .actions{display:flex;gap:8px;margin-top:8px}
#respFrame{width:100%;height:320px;border:1px solid #eee;margin-top:10px;display:none;border-radius:6px}