:root{
  --bg-dark: rgba(10,10,15,.65);
  --bg-darker: rgba(6,6,10,.75);
  --txt: #f4f6fb;
  --txt-dim: #cdd3df;
  --brand: #6de3ff;
  --radius: 22px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: 'Bai Jamjuree', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--txt); background:#0b1018; overflow-x:hidden;
}

/* ===== Video background ===== */
.video-wrap{ position:fixed; inset:0; z-index:-2; overflow:hidden; }
.video-wrap::after{}
.video-iframe, .video-fallback{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:177.78vh; height:100vh;
  min-width:100vw; min-height:56.25vw;
  filter:saturate(1.05) brightness(.9);
}
.video-iframe{ border:0; pointer-events:none; z-index:0; }
.video-fallback{ background:#0b1018 center/cover no-repeat; z-index:-1; }

@media (prefers-reduced-motion: reduce){
  .video-iframe{ display:none; }
}

/* ===== Layout ===== */
.container{
  position:relative; min-height:100dvh; display:grid; place-items:center; padding: clamp(16px, 4vw, 48px);
}
header{
  position:absolute; top: clamp(12px, 2.5vw, 28px); left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:12px; padding:8px 14px; background:var(--bg-darker);
  border:1px solid rgba(255,255,255,.08); border-radius:999px; box-shadow:var(--shadow);
  backdrop-filter: blur(8px);
}
.logo{ width:100px; height:auto; border-radius:8px; }
.brand{ font-weight:700; letter-spacing:.3px; color:var(--txt); }

.hero{ max-width: 1050px; text-align:center; margin-inline:auto; }
h1{
  font-size: clamp(30px, 6.5vw, 66px);
  line-height:1.05; margin:0 0 12px; text-wrap:balance;
  text-shadow: 0 8px 30px rgba(0,0,0,.55);
}
.lead{ font-size: clamp(15px, 2.2vw, 20px); color:var(--txt-dim); margin:0 auto 26px; max-width: 800px; }

.cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.btn{
  appearance:none; border:0; cursor:pointer; text-decoration:none; color:#0b1018; font-weight:700; letter-spacing:.2px;
  padding:14px 20px; border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
  background: linear-gradient(135deg, var(--brand), #22d3ee 45%, #14b8a6);
}
.btn.secondary{ background: linear-gradient(135deg, #e9e9f1, #dfe7ff); color:#0b1020; }
.btn.ghost{ background: transparent; color:var(--txt); border:1px solid rgba(255,255,255,.2); }
.btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0,0,0,.45); }

.badges{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:20px 0 0; }
.chip{ font-size:12px; padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }

footer{
  position:absolute; bottom: clamp(8px, 2.5vw, 20px); left:50%; transform:translateX(-50%);
  font-size:12px; color: #bac3d4; opacity:.9; text-align:center;
  background:rgba(0,0,0,.35); padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
}

/* Card nổi bật */
.floating-card{
  margin: 28px auto 0; max-width: 900px; padding: 16px; border-radius: 22px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px);
  display:grid; grid-template-columns: 1fr; gap:12px; box-shadow: var(--shadow);
}

@media (max-width:520px){
  header{ gap:10px; padding:7px 12px; }
  .btn{ width:100%; justify-content:center; }
}

.join-btn {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);

  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 40px;
  background: linear-gradient(135deg, #00d4ff, #0077ff);
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 50px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 10;
}
.join-btn:hover {
  background: rgba(255, 255, 255, 0.25);

  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}

@media (max-width: 600px) {
  header {
    top: 10px !important;
  }
  header .logo {
    width: 40vw !important;
    max-height: 15vh !important;
  }
  .join-btn {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);

    font-size: 18px;
    padding: 14px 28px;
    top: 65%;
  }
  footer {
    font-size: 11px;
    padding: 4px 8px;
  }
}

header {
  position: absolute !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
header .logo {
  display: block;
  margin: 0 auto;
}

/* Center header/logo perfectly */
header{
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  background:none;
  border:none;
  box-shadow:none;
  z-index:5;
}
header .logo{
  width:20vw;
  height:auto;
  max-height:22vh;
  display:block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* Glossy (tráng gương) effect for the join button */
.join-btn {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 18px 34px;
  background: linear-gradient(180deg, #29d3ff 0%, #0b78ff 100%);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .3px;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 14px 28px rgba(0,0,0,.28), inset 0 -2px 8px rgba(0,0,0,.25);
  position: absolute;
  overflow: hidden;
  z-index: 10;
  border: 1px solid rgba(255,255,255,.25);
}

/* Gloss sheen */
.join-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient( to bottom, rgba(255,255,255,.55), rgba(255,255,255,.15) 48%, rgba(255,255,255,0) 50% );
  border-radius: inherit;
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:.9;
}

/* Moving shine */
.join-btn::after{
  content:"";
  position:absolute;
  top:-120%; left:-30%;
  width:40%; height:300%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  animation: shine 3.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shine{
  0%{ left:-40%; }
  60%{ left:120%; }
  100%{ left:120%; }
}

/* Mobile fine-tuning */
@media (max-width: 600px){
  header{ top: 10px; }
  header .logo{ width: 48vw; max-height: 18vh; }
  .join-btn{ font-size: 18px; padding: 14px 28px; top: 66%; }
}

@media (max-width: 600px){
  header{
    background: none !important;
    backdrop-filter: none !important;
  }
  header .logo{
    background: none !important;
  }
}


/* ==== Layout refinements (footer/FAQ/legal links) ==== */
#legal-links{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom: 86px; /* tách xa FAQ & footer */
  display:flex;
  gap:16px;
  padding:8px 14px;
  background:rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  backdrop-filter: blur(8px);
}
#legal-links a{ color:#eaf2ff; text-decoration:none; font-weight:600; }
#legal-links a:hover{ text-decoration:underline; }

#faq{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom: 150px; /* trên legal-links và footer */
  width:min(92vw,780px);
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:16px 18px;
  backdrop-filter: blur(8px);
  color:#eaf2ff;
  font-size:14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
#faq details{ padding:8px 0; }
#faq summary{ cursor:pointer; font-weight:700; }
#faq p{ margin:6px 0 0; color:#d6deee; }

footer{
  bottom: 18px; /* thấp hơn để không dính */
}

/* Small screens */
@media (max-width: 600px){
  #faq{ width:min(94vw, 560px); bottom: 170px; font-size:13px; }
  #legal-links{ gap:12px; padding:6px 10px; bottom: 100px; }
  footer{ bottom: 16px; }
}


/* ===== Fix overlapping footer / legal links / FAQ ===== */
#faq {
  margin-bottom: 140px; /* push up above footer area */
  bottom: auto !important;
}

#legal-links {
  margin-bottom: 70px; /* extra gap from footer */
  bottom: auto !important;
}

footer {
  position: relative;
  margin-top: 20px;
  bottom: auto !important;
  transform: none !important;
}
@media (max-width: 600px){
  #faq { margin-bottom: 160px; }
  #legal-links { margin-bottom: 90px; }
}


/* Hide any optional UI blocks if present */
#faq, #legal-links { display: none !important; }


/* Visually hidden (for accessibility/SEO; not display-affecting) */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Footer centered at bottom */
footer{
  position: fixed !important;
  left: 50% !important;
  bottom: 10px !important;
  transform: translateX(-50%) !important;
  font-size: 12px !important;
  color: #eaf2ff !important;
  background: rgba(0,0,0,0.35) !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(6px) !important;
  z-index: 9 !important;
}
footer a{ color:#eaf2ff; text-decoration:none; margin:0 6px; }
footer a:hover{ text-decoration:underline; }
@media (max-width: 600px){
  footer{ font-size:11px !important; padding:5px 10px !important; bottom:8px !important; }
  footer a{ margin:0 4px; }
}


/* ===== Elegant 2-line footer (centered bottom + fade-in) ===== */
footer{
  position: fixed !important;
  left: 50% !important;
  bottom: 10px !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
  background: rgba(8,12,20,.55) !important;
  padding: 10px 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(8px) !important;
  animation: ft-fade .6s ease-out both;
  z-index: 9 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
@keyframes ft-fade{ from{ opacity:0; transform: translate(-50%, 6px); } to{ opacity:1; transform: translate(-50%, 0); } }
footer .ft-line1{
  font-weight: 700;
  color: #ffffff;
  letter-spacing: .2px;
  line-height: 1.2;
}
footer .ft-line2{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.2;
  color: #cfe7ff;
}
footer .ft-line2 a{
  color: #9cd3ff;
  text-decoration: none;
  margin: 0 6px;
  border-bottom: 1px dotted rgba(156,211,255,.35);
}
footer .ft-line2 a:hover{
  color: #5ab3ff;
  border-bottom-color: rgba(90,179,255,.8);
}
@media (max-width: 600px){
  footer{ bottom: 8px !important; padding: 8px 12px !important; }
  footer .ft-line1{ font-size: 12px; }
  footer .ft-line2{ font-size: 11px; }
}


/* Remove drop-shadow / backdrop on logo in desktop view */
@media (min-width: 601px){
  header .logo{
    filter: none !important;
    box-shadow: none !important;
    background: none !important;
  }
}

/* ===== Long-form SEO content section ===== */
#breadcrumb{ position: relative; margin: 0 auto; max-width: 1100px; padding: 16px 18px; }
#breadcrumb .bc{ list-style:none; padding:0; margin:0; display:flex; gap:8px; flex-wrap:wrap; color:#cfe0ff; font-size:13px; }
#breadcrumb .bc a{ color:#9cd3ff; text-decoration:none; }
#breadcrumb .bc li+li::before{ content:'›'; color:#8fb8ee; margin: 0 4px; }

.content-wrap{
  position: relative;
  background: radial-gradient(1600px 600px at 50% -200px, rgba(255,255,255,.04), rgba(255,255,255,0) 60%) , rgba(6,10,16, .85);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.content-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 42px 18px 64px;
  color: #eaf2ff;
}
.content-inner h1{ font-size: clamp(26px, 4.5vw, 40px); margin: 0 0 12px; }
.content-inner h2{ margin: 26px 0 10px; font-size: clamp(20px, 3.2vw, 28px); }
.content-inner h3{ margin: 18px 0 8px; font-size: clamp(17px, 2.6vw, 22px); }
.content-inner p{ line-height: 1.75; color:#cfdbf0; margin: 10px 0; }
.content-inner ul, .content-inner ol{ padding-left: 20px; }
.content-inner li{ margin: 6px 0; }
@media (max-width: 600px){
  .content-inner{ padding: 28px 14px 54px; }
}