:root{
  --brand:#98C5F9;
  --bg:#0a1329;
  --bg2:#0c1633;
  --text:#eaf2ff;
  --muted:#bfd4f6;
  --border: rgba(255,255,255,.28);
  --radius:20px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Inter", Arial;
  background: linear-gradient(180deg, var(--bg), var(--bg2));
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Animated pastel backdrop with brand blue */
.backdrop{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(260px 180px at var(--x1,15%) var(--y1,10%), rgba(152,197,249,.45), transparent 60%),
    radial-gradient(320px 200px at var(--x2,85%) var(--y2,20%), rgba(168,85,247,.20), transparent 60%),
    radial-gradient(280px 200px at var(--x3,40%) var(--y3,90%), rgba(56,189,248,.18), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  filter: saturate(120%);
  animation: backdropMove 16s ease-in-out infinite alternate;
}
@keyframes backdropMove{
  0%  { --x1:14%; --y1:12%; --x2:80%; --y2:22%; --x3:42%; --y3:88%; }
  50% { --x1:22%; --y1:18%; --x2:78%; --y2:30%; --x3:48%; --y3:84%; }
  100%{ --x1:28%; --y1:10%; --x2:70%; --y2:26%; --x3:60%; --y3:92%; }
}

.wrap{ max-width:980px; margin:0 auto; padding:40px 16px }

/* Glass effect helpers */
.glass{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.38);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.24);
}
.gloss{
  position:relative; overflow:hidden;
}
.gloss::after{
  /* moving glossy sweep */
  content:""; position:absolute; inset:-20%;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.25) 40%, rgba(255,255,255,.45) 50%, rgba(255,255,255,.2) 60%, transparent 80%);
  transform: translateX(-120%);
  animation: sweep 8s ease-in-out infinite;
}
@keyframes sweep{
  0% { transform: translateX(-120%) rotate(0.001deg); }
  45%{ transform: translateX(120%) rotate(0.001deg); }
  100%{ transform: translateX(120%) rotate(0.001deg); }
}

/* Profile card */
.profile-card{
  position:relative; margin:0 auto 24px; max-width:720px; border-radius:22px; overflow:hidden;
}
.cover img{ width:100%; height:160px; object-fit:cover; display:block }
.avatar-wrap{
  width:112px; height:112px; border-radius:50%; position:absolute; top:112px; left:50%; transform:translateX(-50%);
  display:grid; place-items:center;
}
.avatar{ width:100px; height:100px; border-radius:50%; display:block; box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.5) }
.profile-meta{ padding:68px 20px 20px; text-align:center }
.title{ margin:0; font-size:28px; letter-spacing:.2px }
.desc{ margin:6px 0 12px; color:var(--muted) }
.tags{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center }
.tags span{
  font-size:12px; color:#0a1329; background:var(--brand);
  padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.6);
}
.cta-row{ margin-top:12px }
.btn{
  display:inline-block; padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:700;
  color:#0a1329; background: linear-gradient(90deg, #cfe7ff, var(--brand));
  box-shadow: 0 8px 24px rgba(152,197,249,.45);
  border:0;
}

/* Section */
.section-label{ font-size:12px; letter-spacing:.3px; color:#cfe7ff; margin:20px auto 10px; max-width:720px }

/* Links grid */
.grid{ display:grid; gap:12px; grid-template-columns:1fr; max-width:720px; margin:0 auto 18px }
@media (min-width:760px){ .grid{ grid-template-columns:1fr 1fr } }
.card{
  display:flex; align-items:center; gap:14px; padding:14px; border-radius:16px; text-decoration:none; color:var(--text);
  position:relative; overflow:hidden;
}
/* shine stripe across cards */
.shine::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 45%, transparent 80%);
  transform: translateX(-120%);
  animation: shine 6s infinite;
}
@keyframes shine{
  0% { transform: translateX(-120%) }
  55%{ transform: translateX(120%) }
  100%{ transform: translateX(120%) }
}
.card::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120px 60px at var(--mx,20%) var(--my,50%), rgba(152,197,249,.25), transparent 70%);
  opacity:0; transition:opacity .25s ease;
}
.card:hover::after{ opacity:1 }
.card__text small{ display:block; font-size:12px; color:var(--muted) }

/* Icon masks */
.icon{
  width:40px; height:40px; display:grid; place-items:center; flex:0 0 40px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.14));
  border:1px solid rgba(255,255,255,.45);
}
.icon::before{ content:""; display:block; width:20px; height:20px; mask-size:contain; mask-repeat:no-repeat; background:#0a1329 }
.icon.globe::before{ mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2c1.6 0 3.06.75 4 1.9H8C8.94 4.75 10.4 4 12 4Zm-8 8c0-.7.1-1.37.3-2h15.4c.2.63.3 1.3.3 2s-.1 1.37-.3 2H4.3A7.96 7.96 0 0 1 4 12Zm4 4h8c-.94 1.15-2.4 1.9-4 1.9S8.94 17.15 8 16Z"/></svg>'); }
.icon.calendar::before{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M19 4H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3Zm-1 10H6v-2h12v2Zm0-4H6V8h12v2Z"/></svg>'); }
.icon.youtube::before{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M23 7.5s-.2-1.4-.8-2a3 3 0 0 0-2.1-.8C17.8 4.4 12 4.4 12 4.4s-5.8 0-8.1.3c-.8.1-1.6.4-2.1.9-.6.6-.8 2-.8 2S0 9.1 0 10.6v1.8c0 1.5.3 3.1.3 3.1s.2 1.4.8 2a3.7 3.7 0 0 0 2.4.8c1.7.2 7.5.3 7.5.3s5.8 0 8.1-.3c.8-.1 1.6-.4 2.1-.9.6-.6.8-2 .8-2s.3-1.6.3-3.1v-1.8c0-1.5-.3-3.1-.3-3.1ZM9.6 13.9V7.9L15.8 11l-6.2 2.9Z"/></svg>'); }
.icon.tiktok::before{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M16.5 3.5A5.5 5.5 0 0 0 14 3v10.2a3.7 3.7 0 1 1-3-3.62V6.5a7.7 7.7 0 1 0 6.12 7.54c0-.19 0-.38-.02-.56a8.28 8.28 0 0 0 4.9 1.62V12a5.99 5.99 0 0 1-5.5-8.5Z"/></svg>'); }
.icon.facebook::before{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M14 9h3V6h-3a5 5 0 0 0-5 5v3H6v3h3v4h3v-4h3l1-3h-4v-3a2 2 0 0 1 2-2Z"/></svg>'); }
.icon.telegram::before{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9.036 15.28 8.84 18.6a.9.9 0 0 0 .72-.35l1.736-1.65 3.6 2.64c.66.365 1.128.173 1.31-.61l2.373-11.14c.236-1.11-.42-1.545-1.06-1.27L3.53 9.53c-1.08.435-1.064 1.06-.184 1.34l4.6 1.44 10.66-6.72-9.57 9.69Z"/></svg>'); }

/* Chips */
.chips{ max-width:720px; margin:0 auto; border-radius:16px; padding:12px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center }
.chips.glass{ background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.38) }
.chip{ display:inline-block; padding:8px 12px; background:#ecf5ff; color:#0a1329; text-decoration:none; border-radius:999px; font-weight:600; font-size:14px; box-shadow:0 4px 10px rgba(0,0,0,.2) }

.footer{ max-width:720px; margin:16px auto 0; text-align:center; color:var(--muted); font-size:12px }

/* Hover interaction */
.card:hover{ transform: translateY(-1px) }

/* Force blue SVG social icons everywhere */
.s8-featured-icon, .s8-social-icon { width:48px; height:48px; min-width:48px; border-radius:50%; background:transparent!important; box-shadow:none!important; }
.s8-featured-icon img, .s8-social-icon img{ width:48px; height:48px; object-fit:contain; display:block; }
.icon:not(:has(img,svg)),
.thumb:not(:has(img,svg)),
.left:not(:has(img,svg)) { display:none!important; }



/* === Contact button: longer & elegant (final) === */
.btn-contact,
a[href*="contact"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 52px;                /* longer horizontally */
  min-width: clamp(240px, 48vw, 400px);
  border-radius: 28px;
  font-size: 17px;
  font-weight: 700;
  margin: 22px auto 14px;            /* center & breathing space */
  background: linear-gradient(180deg, #FFFFFF 0%, #EAF2FF 100%);
  color: #0A2342;
  box-shadow: 0 10px 24px rgba(9,30,66,.16);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-contact:hover,
a[href*="contact"]:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
@media (max-width:520px){
  .btn-contact,
  a[href*="contact"]{
    padding: 12px 40px;
    min-width: clamp(200px, 82vw, 340px);
    font-size: 16px;
  }
}



/* === Apply Bai Jamjuree font site-wide === */
body {
  font-family: 'Bai Jamjuree', sans-serif;
}



/* === Set Bai Jamjuree as default with weight 500 === */
body {
  font-family: 'Bai Jamjuree', sans-serif;
  font-weight: 500;
}



/* === Contact button: gradient blue, rounded, professional === */
.btn-contact,
a[href*="contact"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 16px 64px;              /* rộng hơn, nút dài */
  min-width: 260px;                /* độ dài tối thiểu */
  border-radius: 32px;             /* bo tròn mềm mại */
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 24px auto 18px;          /* căn giữa */
  background: linear-gradient(135deg, #98C5F9 0%, #348EF3 100%);
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(52,142,243,0.35);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  text-decoration: none;
}
.btn-contact:hover,
a[href*="contact"]:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(52,142,243,0.45);
  filter: brightness(1.05);
}