/* Externalized styles for giai-phap-dao-tao-huan-luyen.php */
:root{
  --bg:#f7fbfb;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#06b6d4; /* cyan */
  --accent-2:#0ea5a4; /* teal */
  --accent-3:#16a34a; /* green */
  --highlight:#f59e0b;
  --shadow: 0 18px 40px rgba(2,6,23,0.06);
}
/* Scope page styles to the page main wrapper to avoid global overrides */
.giai-phap-dao-tao-huan-luyen{background:var(--bg)}
.giai-phap-dao-tao-huan-luyen .container{max-width:1150px;margin:0 auto;padding:0 1rem}
/* scope page background and container to the page wrapper */
.giai-phap-dao-tao-huan-luyen{background:var(--bg)}
.giai-phap-dao-tao-huan-luyen .container{max-width:1150px;margin:0 auto;padding:0 1rem}
.lead{color:var(--muted);text-align:center;margin:0 auto 1rem;max-width:900px}
.giai-phap-dao-tao-huan-luyen .card{background:var(--card);border-radius:14px;padding:1.25rem;box-shadow:var(--shadow)}
.giai-phap-dao-tao-huan-luyen .btn{display:inline-block;padding:.7rem 1.1rem;border-radius:10px;font-weight:700;text-decoration:none}
.giai-phap-dao-tao-huan-luyen .btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff}
.giai-phap-dao-tao-huan-luyen .btn-outline{background:transparent;border:2px solid rgba(8,51,68,0.06);color:#083344}

/* Hero */
.giai-phap-dao-tao-huan-luyen .hero{display:flex;gap:2rem;align-items:center;padding:3.25rem;border-radius:14px;background:linear-gradient(180deg,#e6fbff, #ffffff);box-shadow:var(--shadow);overflow:hidden;margin-top: 3rem; margin-bottom: 3rem;}
.giai-phap-dao-tao-huan-luyen .hero-left{flex:1}
.giai-phap-dao-tao-huan-luyen .hero-right{flex:1;display:flex;align-items:center;justify-content:center}
.giai-phap-dao-tao-huan-luyen .hero h1{font-size:2rem;margin:0;color:#167d4e;line-height:1.02}
@media(min-width:768px){.hero h1{font-size:2.6rem}}
.hero p{color:var(--muted);margin-top:.6rem}
.hero-visual{width:100%;max-width:480px;border-radius:12px;overflow:hidden}
.hero-visual img{display:block;width:100%;height:auto}

/* Hero CTAs */
.hero-ctas{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.hero-ctas .btn{min-width:150px}

/* Why choose us */
.why-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.25rem}
@media(min-width:768px){.why-grid{grid-template-columns:repeat(4,1fr)}}
.why-item{background:linear-gradient(180deg,#fff,#fbfffc);padding:1rem;border-radius:12px;text-align:center;box-shadow:0 10px 30px rgba(2,6,23,0.04);transition:transform .36s,box-shadow .36s}
.why-item:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 28px 60px rgba(2,6,23,0.12)}
.why-icon{
    width:80px;
    height:80px;
    border-radius:10px;
    background:linear-gradient(90deg,var(--accent-2),var(--accent));
    
    /* 1. Thay đổi display để nó là một khối độc lập */
    display: flex; /* Nên dùng flex thay vì inline-flex */
    
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:800;
    margin-bottom:.6rem;
    
    /* 2. Căn giữa khối theo chiều ngang */
    margin-left: auto;
    margin-right: auto;
    font-size: 70px;
    /* (Bạn có thể bỏ text-align: center; vì nội dung đã được căn giữa bằng flexbox) */
}
.why-item h4{margin:0 0 .35rem}
.why-item p{margin:0;color:var(--muted);font-size:.95rem}

/* Programs list */
.programs{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}
@media(min-width:768px){.programs{grid-template-columns:repeat(2,1fr)}}
.program-card{display:flex;gap:1rem;align-items:flex-start;padding:1rem;border-radius:12px;background:linear-gradient(180deg,#fff,#f9fffb);box-shadow:0 12px 30px rgba(2,6,23,0.04);transition:transform .32s,box-shadow .32s}
.program-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 34px 70px rgba(2,6,23,0.12)}
.program-badge{min-width:72px;height:72px;border-radius:10px;background:linear-gradient(180deg,var(--accent-2),var(--accent-3));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.program-content h4{margin:0 0 .4rem}
.program-content p{margin:0;color:var(--muted)}

/* Custom training CTA */
.custom-cta{margin-top:1.5rem;padding:1.3rem;border-radius:12px;background:linear-gradient(90deg,#fff7ed,#fff);display:flex;flex-direction:column;align-items:center;gap:.75rem;box-shadow:0 18px 50px rgba(107,70,193,0.06)}
.custom-cta h3{margin:0;color:#0b5544}
.custom-cta p{margin:0;color:var(--muted)}

/* Final CTA */
.final-cta{margin-top:2rem;padding:1.5rem;border-radius:12px;
    background:linear-gradient(90deg, #11c2c0, #29bdbf);
    color:#fff;text-align:center}
.final-cta h2{margin:0 0 .35rem}

/* Final CTA button spacing */
.final-cta .btn + .btn{margin-left:.5rem}

/* final-cta-actions wrapper spacing (keeps inline margin replacement) */
.final-cta-actions{margin-top:1rem}

/* Animations */
@keyframes liftUp{from{opacity:0;transform:translateY(18px) scale(.995)}to{opacity:1;transform:translateY(0) scale(1)}}
.why-item, .program-card, .industry, .final-cta{opacity:0;animation:liftUp .6s cubic-bezier(.2,.9,.2,1) both}
.why-item:nth-child(1){animation-delay:80ms}
.why-item:nth-child(2){animation-delay:160ms}
.why-item:nth-child(3){animation-delay:240ms}
.why-item:nth-child(4){animation-delay:320ms}
.program-card:nth-child(1){animation-delay:120ms}
.program-card:nth-child(2){animation-delay:200ms}
.program-card:nth-child(3){animation-delay:280ms}
.program-card:nth-child(4){animation-delay:360ms}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .why-item, .program-card, .industry, .final-cta{animation:none!important;transition:none!important}
}

/* Responsive tweaks */
@media(max-width:767px){.hero{flex-direction:column-reverse;text-align:center}.hero-left{width:100%}.hero-right{width:100%}.why-grid{grid-template-columns:1fr}.programs{grid-template-columns:1fr}}

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

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .tg-track{transition:none!important}
  .tg-item img{transition:none!important}
}