:root {
  --primary: #0d6efd;
  --primary-dark: #0b5ed7;
  --page: #f6f7fb;          /* Solid page background fixes the "column" */
  --card-bg: #ffffff;
  --radius: 16px;
  --transition: 0.25s ease;
    --divider-fg: rgba(30,41,59,.24);
  --divider-mid: rgba(100,116,139,.16);
  --divider-glow: rgba(2,6,23,.10);
}

/* Reset & base */
* { box-sizing: border-box; }
html { height: 100%; }
body {
  min-height: 100svh;
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--page);
  display: grid;
  place-items: center;       /* centers the card */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* After login: stop centering the whole page so hero can take full width */
body.app {
  display: block;            /* turn off grid centering */
}


/* ---------- Card ---------- */
.card {
  width: 100%;
  max-width: 420px;
  padding: 32px 28px 36px;
  background: var(--card-bg);       /* solid white, no frosted blur */
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
  text-align: center;
  animation: fade-in 0.45s ease both;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.logo {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--primary);
}

.subtitle {
  font-size: 0.95rem;
  color: #6b7280;
  margin-bottom: 24px;
}

/* ---------- Form ---------- */
.field { position: relative; margin-bottom: 14px; }

.field input {
  width: 100%;
  padding: 14px 44px 14px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.field input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.12);
}

.toggle-password {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  color: #9ca3af;
  padding: 2px 6px;
  border-radius: 8px;
}

.toggle-password:hover { color: var(--primary); }

/* ---------- Button ---------- */
.btn {
  width: 100%;
  padding: 14px;
  margin-top: 6px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--transition), transform 0.05s ease;
}

.btn:hover,
.btn:focus-visible { background: var(--primary-dark); }
.btn:active { transform: translateY(1px); }

/* ---------- Messages ---------- */
#message {
  margin-top: 14px;
  font-size: 0.93rem;
  font-weight: 500;
  min-height: 1.2em;
}

.error { color: #d52731; }
.success { color: #269f53; }

/* ---------- Logout button ---------- */
/* Tiny logout icon (top-left of the page) */
.logout-icon {
  position: fixed;
  top: 12px;
  left: 12px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(16, 24, 40, 0.12);
  transition: background var(--transition), transform 0.05s ease;
  z-index: 1000;
}
.logout-icon i {
  font-size: 14px;   /* slightly larger than before */
  line-height: 1;
}

.logout-icon:hover { background: var(--primary-dark); }
.logout-icon:active { transform: translateY(1px); }



/* ==== Home hero v2 (modern) ==== */
.hero {
  position: relative;
  max-width: 1080px;
  margin: 68px auto 80px;
  padding: 28px 20px 44px;
  text-align: center;
}



.hero-title {
  margin: 0;
  font-family: "Sora", Inter, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 7.6vw, 64px);
  letter-spacing: .4px;
  line-height: 1.04;
  animation: fadeUp .6s ease both;
}
.hero-title-top {
  background: linear-gradient(90deg, #111827 0%, #0f172a 50%, #334155 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-tagline {
  margin-top: 10px;
  font-size: clamp(16px, 2.4vw, 20px);
  color: #5e6a81;
  animation: fadeUp .7s ease both;
}

/* ===== Modern hero typography ===== */

/* Big display title */
.display{
  margin: 0;
  font-family: "Sora", Inter, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 8vw, 74px);   /* fluid size */
  line-height: 1.02;
  letter-spacing: .2px;
}

/* Smooth animated gradient text (no outline, no seam) */
.display {
  margin: 0;
  font-family: "Sora", Inter, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 8vw, 74px);
  line-height: 1.02;
  letter-spacing: .2px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.display-gradient{
  --c1:#5b8dff;  /* indigo */
  --c2:#22d3ee;  /* cyan   */
  --c3:#10b981;  /* green  */
  background-image: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* lighter, soft depth (no outline to avoid “stitches”) */
  text-shadow: 0 14px 32px rgba(2,6,23,.18);

  /* smooth pan animation */
  animation: title-pan 12s ease-in-out infinite;
  will-change: background-position;
}

@keyframes title-pan {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* Glass pill slogan with gentle reveal + shine */
.subtitle { margin-top: 14px; }

.subtitle-pill{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: clamp(14px, 2.3vw, 18px);
  color: #0f172a;

  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.9));
  border: 1px solid rgba(148,163,184,.35);
  box-shadow:
    0 10px 26px rgba(2,6,23,.10),
    inset 0 1px 0 rgba(255,255,255,.65);
  backdrop-filter: saturate(140%) blur(6px);

  /* nice entrance */
  opacity: 0;
  transform: translateY(6px) scale(.985);
  animation: pill-rise .5s ease .15s forwards;
}

/* colorful status dot */
.subtitle-pill::before{
  content:"";
  width:7px; height:7px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #22d3ee, #6366f1);
  box-shadow: 0 0 0 6px rgba(99,102,241,.11);
}

/* soft moving sheen across the pill */
.subtitle-pill::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius:inherit;
  background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 30%, rgba(255,255,255,0) 60%);
  transform: translateX(-120%);
  animation: pill-shine 4.5s ease-in-out 1s infinite;
  pointer-events:none; mix-blend-mode: overlay;
}

@keyframes pill-rise {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pill-shine {
  0%   { transform: translateX(-120%); }
  20%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .display-gradient { animation: none; }
  .subtitle-pill    { animation: none; }
  .subtitle-pill::after { animation: none; }
}

/* calm timing for icons (OUTSIDE media query) */
.icon-badge,
.icon-badge::before,
.icon-badge i{
  transition-timing-function: ease-out;
  transition-duration: .22s;
  transition-delay: 60ms; /* reduces “twitchiness” on fast hover-out/in */
}

/* Respect reduced-motion (INSIDE media query) */
@media (prefers-reduced-motion: reduce) {
  .display-gradient,
  .subtitle-pill,
  .subtitle-pill::after { animation: none !important; }

  .icon-badge,
  .icon-badge::before,
  .icon-badge i,
  .tile:hover {
    transition: none !important;
    transform: none !important;
  }
}





.hero-title-top {
  background: linear-gradient(90deg, #111827 0%, #0f172a 50%, #334155 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}


/* grid for stacked tiles */
.stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 30px;
}

/* glassy stacked card with gradient ring */
.stack-card {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  padding: 24px 18px 20px;
  border-radius: 22px;
  border: 1.5px solid transparent; /* gradient ring */
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.96)) padding-box,
    linear-gradient(135deg, #c7d2fe, #a5b4fc 40%, #99f6e4 100%) border-box;
  box-shadow: 0 16px 36px rgba(2,6,23,.08);
  text-decoration: none; color: #0f172a;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .3s ease;
  backdrop-filter: saturate(140%) blur(6px);
}
.stack-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px rgba(2,6,23,.14);
}

/* floating circular arrow (top-right) */
.stack-cta {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center;
  background: #f1f5f9; color: #334155;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.stack-card:hover .stack-cta { transform: translateX(4px); background: #e2e8f0; color: #0f172a; }

/* icon bubble (big + soft) */
.stack-icon {
  width: 70px; height: 70px; border-radius: 18px;
  display: grid; place-items: center; font-size: 30px;
  background: #eef2ff; color: #6366f1; /* default = learners tint */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 18px rgba(99,102,241,.20);
}
.teachers .stack-icon {
  background: #ecfdf5; color: #10b981;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 18px rgba(16,185,129,.20);
}

/* text */
.stack-title { font-weight: 800; font-size: 18px; line-height: 1.15; margin: 6px 0 0; }
.stack-sub   { font-size: 13px; color: #667085; margin: 0; }

/* tighter layout on small screens */
@media (max-width: 420px) {
  .stack { grid-template-columns: 1fr; }
}



/* icon bubble with subtle gradient */
.choice-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: #eef2ff;
  color: #6366f1;
}
.teachers .choice-icon {
  background: #ecfdf5;
  color: #10b981;
}

/* text stack */
.choice-main { display: grid; }
.choice-title {
  font-weight: 800;
  font-size: 19px;
  line-height: 1.14;
}
.choice-sub {
  font-size: 13px;
  color: #667085;
  margin-top: 3px;
}

/* circular arrow button */
.choice-cta {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #334155;
  background: #f1f5f9;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.choice-card:hover .choice-cta {
  transform: translateX(4px);
  background: #e2e8f0;
  color: #0f172a;
}

/* small entrance animation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}



/* ============== Unified Tiles System ============== */
/* Shared grid for both sections */
.features-grid,
.slice-grid{
  display:grid;
  grid-template-columns:1fr;      /* 1 col on mobile */
  gap:20px;
  margin-top:22px;
}
@media (min-width: 720px){
  .features-grid,
  .slice-grid{
    grid-template-columns: repeat(2, minmax(280px, 1fr)); /* 2 cols desktop */
  }
}

/* One card style used everywhere */
.tile{
  position:relative;
  display:grid;
  justify-items:center;
  text-align:center;
  gap:10px;
  padding:26px 20px 22px;
  border-radius:20px;
  border:1px solid #eaeef3;
  background:#fff;
 box-shadow:
  0 8px 18px -6px rgba(2,6,23,.10),
  0 2px 6px  -2px rgba(2,6,23,.06);

  text-decoration:none;
  color:#0f172a;
  transform:translateY(0);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}



.tile:hover{
  transform: translateY(-2px);
  box-shadow:
    0 12px 22px -6px rgba(2,6,23,.12),
    0 24px 38px -10px rgba(2,6,23,.12);
  border-color:#dbe3ee;
}

/* light tints (same tokens across sections) */
.tile.mint{
  background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 68%);
  border-color:#d1fae5;
}
.tile.amber{
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 68%);
  border-color:#fed7aa;
}

/* one icon badge */
.icon-badge{
  position:relative;
  width:74px; height:74px; border-radius:50%;
  display:grid; place-items:center;
  color:#111827;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px rgba(2,6,23,.10);
}


/* smooth micro-interactions on the badge + icon */
.icon-badge,
.icon-badge i {
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, opacity .25s ease;
}

/* halo (uses ::before, won't clash with your existing ::after inner disk) */
.icon-badge::before{
  content:"";
  position:absolute; inset:-6px;
  border-radius:50%;
  background: radial-gradient(closest-side, rgba(16,185,129,.28), transparent 65%); /* default mint glow */
  opacity:0; transform: scale(.9);
  filter: blur(6px);
  transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}
/* brand-tinted glow for amber cards */
.tile.amber .icon-badge::before{
  background: radial-gradient(closest-side, rgba(249,115,22,.28), transparent 65%);
}

/* softer icon motion */
.tile:hover .icon-badge,
.icon-badge:hover{
  transform: translateY(-3px) scale(1.03) rotate(-0.5deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(2,6,23,.14);
}

.tile:hover .icon-badge::before,
.icon-badge:hover::before{
  opacity:.75;
  transform: scale(1.035);
  filter: blur(8px);
}

.tile:hover .icon-badge i,
.icon-badge:hover i{
  transform: translateY(-0.5px) rotate(-0.5deg);
  opacity: .92;
}


.tile.mint  .icon-badge{ background:linear-gradient(135deg,#10b981,#34d399); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px rgba(16,185,129,.20); }
.tile.amber .icon-badge{ background:linear-gradient(135deg,#f97316,#fb923c); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px rgba(249,115,22,.20); }
.icon-badge::after{
  content:""; position:absolute; inset:10px; border-radius:50%; background:rgba(255,255,255,.88);
}
.icon-badge i{ position:relative; z-index:1; font-size:28px; color:rgba(17,24,39,.9); }

/* unified text styles */
.tile-title{ margin:6px 0 0; font-weight:800; font-size:18px; line-height:1.15; }
.tile-desc { margin:0; color:#667085; font-size:13.5px; max-width:38ch; }

/* unified CTA pill */
.cta{
  margin-top:8px;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  border-radius:999px;
  font-weight:700; font-size:13px; line-height:1;
  background:#e2f7ec; color:#065f46;        /* default for mint */
  transition: transform .16s ease, background .16s ease, color .16s ease;
}
.tile.amber .cta{ background:#ffedd5; color:#7c2d12; }
.tile:hover .cta{ transform: translateY(-1px); }

/* Section spacing harmony */
.hero{ max-width:1080px; padding:28px 12px 44px; margin:68px auto 64px; }
.slice{ max-width:1080px; padding:0 12px;     margin:0 auto 84px; }


/* ===== Reusable surface panel (used in both sections) ===== */
.hero-surface,
.surface{
  position: relative;
  margin-top: 18px;
  padding: 18px 14px 22px;
  border-radius: 28px;
  border: 1px solid #e9eef7;
  background:
    radial-gradient(140% 110% at 10% -10%, rgba(99,102,241,.06), transparent 50%),
    radial-gradient(120% 100% at 90% 10%, rgba(34,211,238,.06), transparent 55%),
    linear-gradient(180deg, #ffffff, #ffffff);
  box-shadow: none;     /* keep panels flat */
  overflow: clip;       /* keep child shadows inside */
}
@supports not (overflow: clip) {
  .hero-surface, .surface { overflow: hidden; }
}



/* warm variant for the lower section */
.surface.surface--alt::before{
  background: radial-gradient(closest-side, rgba(253,186,116,.45), transparent 70%);
}
.surface.surface--alt::after{
  background: radial-gradient(closest-side, rgba(110,231,183,.40), transparent 70%);
}


/* section header inside the hero surface */
.section-head{ text-align:center; margin: 4px 0 8px; }
.section-title{
  margin:0;
  font-family: "Sora", Inter, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 3.6vw, 26px);
  color:#0f172a;
  letter-spacing:.2px;
}
.section-subtitle{
  margin:6px 0 2px;
  font-size: clamp(13px, 2.4vw, 15px);
  color:#5e6a81;
}

/* subtle accent behind the big brand title for extra distinction */
.hero-head{ position: relative; }
.hero-head::before{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  top:-6px; width:min(720px,92%); height:120px; z-index:-1;
  background: radial-gradient(60% 55% at 50% 50%,
              rgba(99,102,241,.10) 0%,
              rgba(34,211,238,.08) 45%,
              rgba(16,185,129,.06) 85%,
              transparent 100%);
  filter: blur(18px);
  opacity:.9;
}


/* === Modal login overlay (added) === */
body.show-login::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(2px);
  z-index: 1000;
}
#loginCard{
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  display: none; /* hidden by default; toggled via JS */
  width: min(420px, 92%);
}



/* --- Section theming (no labels, no rails) --- */

/* Top section: cool dotted grid */
.hero-surface{
  background:
    radial-gradient(1.2px 1.2px at 12px 12px, rgba(99,102,241,.10) 99%, transparent 100%) 0 0/26px 26px,
    radial-gradient(140% 110% at 10% -10%, rgba(99,102,241,.06), transparent 50%),
    radial-gradient(120% 100% at 90% 10%, rgba(34,211,238,.06), transparent 55%),
    linear-gradient(180deg, #ffffff, #ffffff);
}

/* Bottom section: warm diagonal wash */
.surface.surface--alt{
  background:
    linear-gradient(115deg, rgba(253,186,116,.10), rgba(255,255,255,0) 42%),
    radial-gradient(120% 120% at 100% 0%, rgba(253,186,116,.08), transparent 55%),
    radial-gradient(140% 110% at 10% -10%, rgba(99,102,241,.04), transparent 50%),
    linear-gradient(180deg, #ffffff, #ffffff);
}

/* Tip: if the dots feel too visible, drop .10 → .07; if too light, raise to .12 */


/* Corner-only status icons (no text) */
.section-corner-icon{
  position: absolute;
  top: 10px;          /* tweak 8–12px to taste */
  left: 10px;
  width: 28px; height: 28px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
  border: 1px solid rgba(148,163,184,.35);
  box-shadow: 0 6px 16px rgba(2,6,23,.08), inset 0 1px 0 rgba(255,255,255,.85);
  z-index: 1;                  /* above panel glows */
  pointer-events: none;        /* decorative only */
}
.section-corner-icon i{ font-size: 13px; color: #0f172a; opacity: .9; }

/* Cool tint for "Nội bộ" (top section) */
.section-corner-icon.is-internal{
  background: linear-gradient(180deg, #eef2ff, #ffffff);
  border-color: #c7d2fe;
}

/* Warm tint for "Công khai" (bottom section) */
.section-corner-icon.is-public{
  background: linear-gradient(180deg, #fff7ed, #ffffff);
  border-color: #fed7aa;
}

/* Hide the corner icon for public sections/cards */
.section-corner-icon.is-public { display: none !important; }

/* If any old text badges remain, hide them */
.section-badges{ display:none !important; }

/* ---- tighten space between the two sections ---- */





/* ── Elegant, meaningful divider (final) ── */
.section-separator{
  display:block;
  position:relative;
  z-index:2;                       /* above panel shadows */
  width:min(980px,94%);
  height:18px;                     /* visual padding around the line */
  margin:6px auto;                 /* smaller gap between sections */
  background:transparent;
  text-decoration:none;            /* safe if this becomes a link */
}

/* 1px hairline with soft edge fade */
.section-separator::before{
  content:"";
  position:absolute; left:0; right:0; top:50%;
  height:1px; transform:translateY(-50%);
  background:linear-gradient(90deg,
    transparent 0%,
    var(--divider-mid) 12%,
    var(--divider-fg) 50%,
    var(--divider-mid) 88%,
    transparent 100%
  );
  border-radius:2px;
}

/* a tiny center pill that reads the next section (uses data-label) */
.section-separator::after{
  content: attr(data-label);
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  padding:4px 10px;
  border-radius:999px;
  font:600 11.5px/1.1 Inter, system-ui, sans-serif;
  color:#0f172a;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.98));
  border:1px solid rgba(148,163,184,.34);
  box-shadow: 0 8px 18px rgba(2,6,23,.08), inset 0 1px 0 rgba(255,255,255,.75);
  white-space:nowrap;
  pointer-events:none; /* change to auto if you make it a link */
}

/* Tight, predictable space between sections */
.hero  { margin-bottom: 8px !important; }  /* space under top panel  */
.slice { margin-top: 0 !important; }       /* no negative overlap    */


/* Center the login card whenever the "login overlay" is active */
body.show-login {
  min-height: 100vh;       /* full screen height */
  display: grid;           /* turn body into a grid */
  place-items: center;     /* center content both ways */
}

/* Make sure the login card itself isn't offset by any other rule */
body.show-login #loginCard {
  margin: 0;
  position: static;
  transform: none;
}


/* === Section mini-themes (scoped by data-theme) === */

/* Default helpers: override tile looks inside a themed section */
[data-theme] .tile.mint{
  background: linear-gradient(180deg, var(--tileA, #ecfdf5) 0%, #ffffff 68%);
  border-color: var(--tileA-border, #d1fae5);
}
[data-theme] .tile.amber{
  background: linear-gradient(180deg, var(--tileB, #fff7ed) 0%, #ffffff 68%);
  border-color: var(--tileB-border, #fed7aa);
}

/* Icon badges + soft halo */
[data-theme] .tile.mint  .icon-badge{
  background: linear-gradient(135deg, var(--badgeA1, #10b981), var(--badgeA2, #34d399));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px var(--badgeAshadow, rgba(16,185,129,.20));
}
[data-theme] .tile.amber .icon-badge{
  background: linear-gradient(135deg, var(--badgeB1, #f97316), var(--badgeB2, #fb923c));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px var(--badgeBshadow, rgba(249,115,22,.20));
}
[data-theme] .icon-badge::before{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--halo, rgba(16,185,129,.28)), transparent 65%);
}

/* CTA pills */
[data-theme] .tile .cta{
  background: var(--ctaA-bg, #e2f7ec);
  color: var(--ctaA-fg, #065f46);
}
[data-theme] .tile.amber .cta{
  background: var(--ctaB-bg, #ffedd5);
  color: var(--ctaB-fg, #7c2d12);
}

/* ===== THEME 1: Ocean (top section) ===== */
[data-theme="ocean"] .hero-surface{
  /* cool dotted grid */
  background:
    radial-gradient(1.2px 1.2px at 12px 12px, rgba(99,102,241,.10) 99%, transparent 100%) 0 0/26px 26px,
    radial-gradient(140% 110% at 10% -10%, rgba(99,102,241,.06), transparent 50%),
    radial-gradient(120% 100% at 90% 10%, rgba(34,211,238,.06), transparent 55%),
    linear-gradient(180deg, #ffffff, #ffffff);
}
/* keep mint/amber defaults, just tune halo/cta slightly */
[data-theme="ocean"]{
  --halo: rgba(99,102,241,.24);
  --ctaA-bg:#e2f7ec; --ctaA-fg:#065f46;
  --ctaB-bg:#e7efff; --ctaB-fg:#0f1f3a;
}

/* ===== THEME 2: Sunset (middle section) ===== */
[data-theme="sunset"] .surface{
  /* warm diagonal wash */
  background:
    linear-gradient(115deg, rgba(253,186,116,.12), rgba(255,255,255,0) 42%),
    radial-gradient(120% 120% at 100% 0%, rgba(253,186,116,.10), transparent 55%),
    radial-gradient(140% 110% at 10% -10%, rgba(99,102,241,.04), transparent 50%),
    linear-gradient(180deg, #ffffff, #ffffff);
}
[data-theme="sunset"]{
  --tileA:#fff7ed;   --tileA-border:#fed7aa;
  --tileB:#fffbeb;   --tileB-border:#fde68a;
  --badgeA1:#fb923c; --badgeA2:#f59e0b; --badgeAshadow: rgba(245,158,11,.22);
  --badgeB1:#f59e0b; --badgeB2:#fbbf24; --badgeBshadow: rgba(253,146,34,.22);
  --ctaA-bg:#fff0d9; --ctaA-fg:#7c2d12;
  --ctaB-bg:#fff3c4; --ctaB-fg:#78350f;
  --halo: rgba(249,115,22,.26);
}

/* ===== THEME 3: Berry (bottom section) ===== */
[data-theme="berry"] .surface{
  /* playful berry mesh */
  background:
    linear-gradient(115deg, rgba(233,213,255,.12), rgba(255,255,255,0) 40%),
    radial-gradient(120% 110% at 100% 0%, rgba(251,207,232,.10), transparent 55%),
    radial-gradient(140% 110% at 0% 0%, rgba(199,210,254,.08), transparent 60%),
    linear-gradient(180deg, #ffffff, #ffffff);
}
[data-theme="berry"]{
  --tileA:#f5f3ff;   --tileA-border:#ddd6fe;
  --tileB:#fff1f2;   --tileB-border:#fecdd3;
  --badgeA1:#8b5cf6; --badgeA2:#a78bfa; --badgeAshadow: rgba(139,92,246,.22);
  --badgeB1:#f43f5e; --badgeB2:#fb7185; --badgeBshadow: rgba(244,63,94,.22);
  --ctaA-bg:#efe9ff; --ctaA-fg:#2e1065;
  --ctaB-bg:#ffe4e6; --ctaB-fg:#4a041c;
  --halo: rgba(236,72,153,.24);
}


/* Fix mobile right-gap + keep hero header the same content width as the cards */
.hero { 
  /* clip any decorative glows that overshoot on small screens */
  overflow-x: clip;
}
@supports not (overflow: clip) {
  .hero { overflow-x: hidden; }  /* fallback for older browsers */
}

/* Ensure the pill’s sheen animation never causes horizontal overflow */
.subtitle-pill { 
  overflow: hidden;
}

/* Optional: make the title/pill block use the same readable width as the panels/cards */
.hero-head {
  width: min(980px, 94%);
  margin-inline: auto;
}


/* Keep hero effects inside the content width (no outer blur column) */
.hero { overflow: clip; }                  /* clip both axes */
@supports not (overflow: clip) {
  .hero { overflow: hidden; }              /* fallback */
}



/* Keep the title/pill block aligned to the panel width */
.hero-head{ width: min(980px, 94%); margin-inline: auto; }

/* Safety: the pill’s sheen stays inside the pill */
.subtitle-pill{ overflow: hidden; }


/* Kill big drop shadows on hero + sections */
.hero-surface,
.surface {
  box-shadow: none !important;
}

/* Remove the glow layers */
.hero-surface::before,
.hero-surface::after,
.surface::before,
.surface::after,
.hero-head::before,
.hero > .hero-bg,
.hero > .hero-bg::before,
.hero > .hero-bg::after {
  content: none !important;
}

/* If the glass pill blur also bothers you, disable it too */
.subtitle-pill {
  backdrop-filter: none !important;
}


/* 1) Keep card shadows inside the panel */
.hero-surface,
.surface {
  overflow: clip;                 /* modern */
}
@supports not (overflow: clip) {
  .hero-surface, .surface { overflow: hidden; }  /* fallback */
}

/* 2) Softer, tighter shadows (no giant square), smaller lift */
.tile {
  box-shadow:
    0 8px 18px -6px rgba(2,6,23,.10),
    0 2px 6px  -2px rgba(2,6,23,.06);
  will-change: transform;
}
.tile:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 22px -6px rgba(2,6,23,.12),
    0 24px 38px -10px rgba(2,6,23,.12);
  border-color: #dbe3ee; /* keep your subtle ring */
}


/* ===== Friendly Modal (Activities) ===== */
.ts-modal { 
  position: fixed; inset: 0; display: none; z-index: 1000;
}
.ts-modal.is-open { 
  display: block;
}
.ts-modal__backdrop { 
  position: absolute; inset: 0; 
  background: rgba(15, 23, 42, 0.45); 
  backdrop-filter: blur(2px);
  animation: ts-fade .18s ease;
}
.ts-modal__box {
  position: relative;
  max-width: 480px; margin: 10vh auto 0; 
  background: #ffffff;
  color: #0f172a;
  border-radius: 1rem;
  padding: 2rem 1.5rem 1.5rem;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
  transform: scale(0.96);
  animation: ts-pop .18s ease forwards;
  text-align: center;
}
.ts-modal__icon {
  width: 72px; height: 72px; margin: 0 auto 0.9rem;
  display: grid; place-items: center; font-size: 32px;
  color: #ffffff; /* icon color */
  background: linear-gradient(135deg, #34d399, #06b6d4); /* emerald → cyan */
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(6, 182, 212, 0.35);
  transform: scale(0.98);
  animation: ts-pop 160ms ease-out forwards;
}

.ts-modal__close {
  position: absolute; top: 8px; right: 10px;
  width: 36px; height: 36px; border-radius: 999px;
  font-size: 20px; line-height: 1;
  border: 1px solid rgba(0,0,0,0.08);
  background: #ffffff; cursor: pointer;
}
.ts-modal__close:hover { background: #f8fafc; }
.ts-modal__ok {
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg,#22c55e,#06b6d4);
  color: #ffffff; font-weight: 700;
  box-shadow: 0 10px 28px rgba(6,182,212,0.35);
}
.ts-modal__ok:focus, .ts-modal__close:focus { outline: 3px solid #a5f3fc; outline-offset: 2px; }

@keyframes ts-pop { to { transform: scale(1); } }
@keyframes ts-fade { from { opacity: 0; } to { opacity: 1; } }


/* ===== Trial Modal extras ===== */
.ts-modal__phones{
  display:flex; gap:.5rem; justify-content:center;
  margin-top:.75rem; flex-wrap:wrap;
}
.ts-call{
  display:inline-block; padding:.6rem 1rem; border-radius:999px;
  text-decoration:none; font-weight:700;
  background: linear-gradient(135deg,#f59e0b,#ef4444); /* amber → red */
  color:#ffffff;
  box-shadow:0 8px 22px rgba(239,68,68,.25);
}
.ts-call:hover{ filter: brightness(1.05); }


/* Keep short titles on one line in the "Kết nối với TANSINH" section */
#contact-trial .tile-title {
  white-space: nowrap;
}

/* (tiny screens) nudge size down so it still fits in one line */
@media (max-width: 360px) {
  #contact-trial .tile-title { font-size: 17px; }
}

/* Force all card titles to one line (all sections) */
.tile-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* trims long titles with … */
}

/* Tiny screens: shave 1px so it still fits */
@media (max-width: 360px){
  .tile-title { font-size: 17px; }
}

/* Keep every card title on one line and fit on small screens */
.tile-title {
  white-space: nowrap;
}

/* Auto-size down on narrow phones so long titles still fit */
@media (max-width: 480px) {
  .tile-title { font-size: clamp(14px, 4.8vw, 18px); }
}

/* Mobile: pull the hero closer to the top */
@media (max-width: 600px) {
  #homeHero {
    margin-top: 20px !important;   /* down from 68px */
    padding-top: 14px;             /* down from 28px */
  }
  #homeHero .display {             /* keep the big title balanced */
    font-size: clamp(34px, 9vw, 60px);
  }
  #homeHero .subtitle {            /* tighten the pill spacing */
    margin-top: 8px;
  }
}