/* Externalized styles for giai-phap-cham-suc-khoe.php */
:root{
  --accent:#6b46c1;
  --accent-2:#22c1c3;
  --brand-green:#16a34a; /* new brand green for titles */
  --muted:#6b7280;
  --card-bg:rgba(255,255,255,0.9);
  --glass:rgba(255,255,255,0.6);
}

/* Page background and container lift */
main { background: linear-gradient(180deg,#fbfeff 0%, #f3f7fb 100%); }
main.py-12 .container { position:relative; z-index:1; }

/* Section titles */
.section-title{font-size:1.6rem;color:var(--brand-green);letter-spacing:0.2px;margin-bottom:1.5rem;margin-top: 3rem;}
.section-divider{border:none;height:3px;background:linear-gradient(90deg,var(--brand-green),var(--accent-2));border-radius:3px}

/* Cards / panels */
.card, .tech-card, .card p{background:transparent}
.card, .tech-card{background:var(--card-bg);border-radius:12px;padding:1rem;box-shadow:0 8px 24px rgba(16,24,40,0.08);transition:transform .36s cubic-bezier(.2,.9,.2,1),box-shadow .36s;backdrop-filter: blur(6px);}
.card:hover, .tech-card:hover{transform:translateY(-8px) scale(1.01);box-shadow:0 20px 40px rgba(16,24,40,0.12)}

/* Tech icon */
.tech-card{display:flex;gap:1rem;align-items:flex-start}
.tech-card .tech-icon{min-width:56px;height:56px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;background:linear-gradient(135deg,var(--accent),#ff7ab6);color:#fff;box-shadow:0 6px 18px rgba(107,70,193,0.18)}

/* Gallery & image placeholders */
.team-photo{width:72px;height:72px;border-radius:12px;object-fit:cover;box-shadow:0 8px 20px rgba(2,6,23,0.08);transition:transform .36s ease,box-shadow .36s}
.team-photo:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 26px 40px rgba(2,6,23,0.12)}

/* CTA */
.btn-stemora{display:inline-block;padding:0.75rem 1.25rem;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;font-weight:700;text-decoration:none;box-shadow:0 10px 30px rgba(107,70,193,0.18);transition:transform .22s,box-shadow .22s}
.btn-stemora:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(2, 105, 29, 0.97)}

/* Reveal animations for sections and cards */
@keyframes revealUp{from{opacity:0;transform:translateY(14px) scale(.997)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes floatSlow{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}

main .container > section{opacity:0;transform:translateY(14px);animation:revealUp .64s cubic-bezier(.2,.9,.2,1) both;}
main .container > section:nth-of-type(1){animation-delay:60ms;}
main .container > section:nth-of-type(2){animation-delay:140ms;}
main .container > section:nth-of-type(3){animation-delay:220ms;}
main .container > section:nth-of-type(4){animation-delay:300ms;}
main .container > section:nth-of-type(5){animation-delay:380ms;}

/* Staggered card reveals inside grids */
.grid .card, .grid .tech-card{opacity:0;transform:translateY(12px);animation:revealUp .6s cubic-bezier(.2,.9,.2,1) both}
.grid .card:nth-child(1){animation-delay:240ms;}
.grid .card:nth-child(2){animation-delay:320ms;}
.grid .card:nth-child(3){animation-delay:400ms;}
.grid .card:nth-child(4){animation-delay:480ms;}

/* Subtle floating for highlighted visuals */
.highlight-float{animation:floatSlow 6s ease-in-out infinite;}

/* Make text more legible */
.card h4, .tech-card h4, .section-title, h3{color:#16a34a}
.card p, .tech-card p, li{color:#334155}

/* Make major blocks 'pop' on hover for emphasis */
main .container > section{transition:transform .28s cubic-bezier(.2,.9,.2,1),box-shadow .28s,z-index .28s}
main .container > section:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 28px 60px rgba(2,6,23,0.08);z-index:2}

/* Ensure cards, tech-cards, gallery items and team members gain a stronger pop */
.card, .tech-card, .core-grid .card, .dc-item, .team-member{transition:transform .28s cubic-bezier(.2,.9,.2,1),box-shadow .28s;will-change:transform}
.card:hover, .tech-card:hover, .core-grid .card:hover, .dc-item:hover, .team-member:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 34px 70px rgba(2,6,23,0.12);z-index:3}

/* Emphasize tech & core items with stronger hover pop (desktop) */
@media (min-width:768px){
  .tech-card, .core-grid .card{
    transition: transform .32s cubic-bezier(.2,.9,.2,1), box-shadow .32s;
    transform-origin: center center;
  }
  .tech-card:hover, .core-grid .card:hover{transform:translateY(-10px) scale(1.06);box-shadow:0 40px 90px rgba(2,6,23,0.14);z-index:4}
}

/* Slight subtle lift for images inside cards to emphasize zoom */
.card img, .dc-item img, .team-photo{transition:transform .36s cubic-bezier(.2,.9,.2,1),filter .36s}
.card:hover img, .dc-item:hover img, .team-member:hover .team-photo{transform:scale(1.06);filter:brightness(1.02)}

/* Prevent overlap push on small screens */
@media (max-width:767px){
  .card:hover, .tech-card:hover, .core-grid .card:hover, .dc-item:hover, .team-member:hover{transform:none;box-shadow:inherit}
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  main .container > section, .card, .tech-card, .core-grid .card, .dc-item, .team-member, .card img, .dc-item img, .team-photo{transition:none!important;transform:none!important;animation:none!important}
}

/* Responsive tweaks */
@media (max-width:767px){
  .tech-card .tech-icon{min-width:48px;height:48px}
  .team-photo{width:64px;height:64px}
}

/* Team row: put members on one line at md+ */
.team-row{display:block;gap:1rem}
.team-member{display:flex;align-items:center;gap:1rem}
.team-member .team-photo{width:72px;height:72px}
@media (min-width:768px){
  .team-row{display:flex;justify-content:space-between;align-items:center;gap:1.25rem}
  .team-member{flex:0 0 48%}
}

/* Ensure tech grid is two columns on md+ even if utility classes are not applied */
.tech-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media (min-width:768px){
  .tech-grid{grid-template-columns:repeat(2,1fr)}
  .tech-card{align-items:flex-start}
}

/* Core activity (compact cards) */
.core-section{padding-top:0.25rem;padding-bottom:0.25rem}
.core-grid{display:grid;grid-template-columns:1fr;gap:0.9rem}
@media (min-width:768px){
  .core-grid{grid-template-columns:repeat(3,1fr)}
}
.core-grid .card{padding:1rem;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(250,250,252,0.95));box-shadow:0 6px 18px rgba(2,6,23,0.04);display:flex;flex-direction:column;gap:8px}
.core-grid .card h4{font-size:1.05rem;margin-bottom:6px}
.core-grid .card p{margin-bottom:6px;color:#475569}
.core-grid .card ul{margin-top:4px}
.core-grid .card li{margin-bottom:6px;font-size:0.95rem}
@media (max-width:767px){.core-grid .card{padding:0.8rem}}

/* DC image gallery carousel */
.dc-gallery{margin-top:1rem}
.dc-viewport{overflow:hidden;border-radius:12px}
.dc-track{display:flex;gap:1rem;transform:translateX(0);transition:transform .6s cubic-bezier(.22,.9,.31,1);will-change:transform}
.dc-item{flex:0 0 calc(50% - 0.5rem);border-radius:10px;overflow:hidden;border:1px solid rgba(15,23,36,0.06);background:#fff;box-shadow:0 12px 30px rgba(2,6,23,0.08)}
.dc-item img{width:100%;height:220px;object-fit:cover;display:block;transition:transform .35s ease,filter .35s}
.dc-item:hover img{transform:scale(1.06);filter:brightness(1.03)}
.dc-controls{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.dc-btn{background:rgba(0,0,0,0.06);border:none;padding:8px 10px;border-radius:8px;cursor:pointer;color:#0f1724}
.dc-btn:hover{background:rgba(0,0,0,0.12)}
@media (max-width:767px){.dc-item{flex:0 0 100%}.dc-item img{height:160px}}

/* Startup program spacing to avoid flush-left text */
.startup-section{padding-left:1rem;padding-right:1rem}
@media (min-width:768px){
  .startup-section{padding-left:1.5rem;padding-right:1.5rem}
  .startup-section .card{padding-left:1.25rem;padding-right:1.25rem}
}

/* Video experience grid */
.video-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.25rem}
@media (min-width:768px){.video-grid{grid-template-columns:repeat(2,1fr)}}
.video-card{border-radius:12px;overflow:hidden;background:#fff;border:1px solid rgba(15,23,36,0.04);box-shadow:0 12px 30px rgba(2,6,23,0.06);padding:0.5rem}
.video-card video{width:100%;height:auto;display:block;border-radius:8px}
.video-caption{padding:0.5rem 0 0.25rem;color:#334155;font-size:0.95rem}

/* Highlight gallery (Hình ảnh nổi bật) */
.hg-gallery{margin-top:1.5rem}
.hg-viewport{overflow:hidden;border-radius:12px}
.hg-track{display:flex;gap:1rem;transform:translateX(0);transition:transform .6s cubic-bezier(.22,.9,.31,1);will-change:transform}
.hg-item{flex:0 0 calc(100%/6 - 0.666rem);border-radius:10px;overflow:hidden;background:#fff;border:1px solid rgba(15,23,36,0.06);box-shadow:0 12px 30px rgba(2,6,23,0.08)}
.hg-item img{width:100%;height:160px;object-fit:cover;display:block;transition:transform .36s ease,filter .36s}
.hg-item:hover img{transform:scale(1.06);filter:brightness(1.04)}
.hg-controls{display:flex;gap:8px;justify-content:flex-end;margin-top:.75rem}
.hg-btn{background:rgba(0,0,0,0.06);border:none;padding:8px 10px;border-radius:8px;cursor:pointer;color:#0f1724}
.hg-btn:hover{background:rgba(0,0,0,0.12)}
@media (max-width:1199px){.hg-item{flex:0 0 calc(100%/2 - 0.666rem);}.hg-item img{height:220px}}
@media (max-width:767px){.hg-item{flex:0 0 100%}.hg-item img{height:220px}}