/* ===== TNS GROUP Landing — styles ===== */
:root{
  /* Brand palette (BẢNG MÀU): primary #00ADEE + blue tints + reds */
  --blue:#00ADEE; --blue-600:#0091cc; --blue-700:#0071a3;
  --blue-light:#52D6FF; --blue-lighter:#97EBFF;
  --red:#EC1C24; --red-600:#E1251B; --red-coral:#FF4553;
  --purple:#52D6FF; /* legacy alias -> light blue (palette has no purple) */
  --ink:#0b1b2b; --navy:#0f2540;
  --muted:#5b6b7b; --bg:#ffffff; --bg-soft:#f2f9fe; --line:#e2eef6;
  --grad:linear-gradient(100deg,#00ADEE 0%,#37C4F5 48%,#EC1C24 112%);
  --grad-blue:linear-gradient(135deg,#00ADEE,#0071a3);
  --grad-sky:linear-gradient(135deg,#52D6FF,#00ADEE);
  /* Hero mesh dùng chung cho MỌI trang (home + trang con) để đồng nhất màu */
  --grad-hero:
    radial-gradient(62% 82% at 80% 28%, rgba(82,214,255,.55), transparent 60%),
    radial-gradient(55% 66% at 12% 88%, rgba(82,214,255,.42), transparent 60%),
    linear-gradient(115deg, #0655bb 0%, #00adeec2 45%, rgba(30,150,205,.52) 100%);
  --shadow-sm:0 2px 10px rgba(13,40,70,.06);
  --shadow:0 18px 50px -18px rgba(13,40,70,.28);
  --radius:18px; --radius-sm:12px;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Be Vietnam Pro",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;font-size:.98rem;padding:.72rem 1.4rem;border-radius:999px;
  border:1.5px solid transparent;cursor:pointer;transition:.25s ease;white-space:nowrap}
.btn-primary{background:var(--grad-blue);color:#fff;box-shadow:0 10px 24px -8px rgba(0,145,204,.6)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -8px rgba(0,145,204,.7)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.18)}
.btn-light{background:#fff;color:var(--blue-700)}
.btn-light:hover{transform:translateY(-2px)}
.btn-lg{padding:.95rem 1.8rem;font-size:1.05rem}
.btn-block{width:100%}
section.contact .btn-ghost{color:var(--blue-700);border-color:var(--blue)}
section.contact .btn-ghost:hover{background:rgba(0,173,238,.08)}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line);transition:.3s}
.site-header.scrolled{box-shadow:var(--shadow-sm)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand{display:flex;align-items:center;gap:.7rem}
.brand-logo{height:56px;width:auto;display:block}
.nav-links{display:flex;position:fixed;inset:84px 0 auto 0;background:#fff;flex-direction:column;align-items:stretch;
  gap:0;padding:1rem 24px 1.6rem;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
  transform:translateY(-160%);transition:.35s;height:auto;max-height:calc(100vh - 84px);overflow-y:auto}
.nav-links.open{transform:none}
.nav-links>a:not(.btn){font-weight:600;color:var(--navy);font-size:1rem;position:relative;white-space:normal;padding:.85rem 0;border-bottom:1px solid var(--line)}
.nav-links>a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--grad);transition:.25s}
.nav-links>a:not(.btn):hover::after{width:100%}
.nav-cta{padding:.8rem 1rem;font-size:1rem;margin-top:.9rem;text-align:center}
.nav-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:26px;height:3px;background:var(--navy);border-radius:3px;transition:.3s}
.lang-switch{position:relative;list-style:none;margin-top:.6rem}
.lang-switch>summary{list-style:none;cursor:pointer;font-weight:700;font-size:.84rem;color:var(--navy);
  padding:.42rem .7rem;border:1.5px solid var(--line);border-radius:999px;display:inline-flex;align-items:center;gap:.3rem;user-select:none;white-space:nowrap}
.lang-switch>summary::-webkit-details-marker{display:none}
.lang-switch[open]>summary{border-color:var(--blue);color:var(--blue-600)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:.4rem;min-width:172px;display:flex;flex-direction:column;gap:.1rem;z-index:60}
.lang-menu a{padding:.55rem .7rem;border-radius:8px;font-weight:600;font-size:.92rem;color:var(--navy)}
.lang-menu a:hover{background:var(--bg-soft)}
.lang-menu a.active{color:var(--blue-600);background:var(--bg-soft)}

/* ===== Hero ===== */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;color:#fff}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05);z-index:0}
.hero-overlay{position:absolute;inset:0;z-index:1;
  background:var(--grad-hero)}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;padding:70px 24px;text-align:center}
.eyebrow{display:inline-block;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-size:.78rem;
  color:#bfe3fb;background:rgba(255,255,255,.1);padding:.45rem .9rem;border-radius:999px;margin-bottom:1.1rem;
  border:1px solid rgba(255,255,255,.2)}
.hero-title{font-size:clamp(2.2rem,5vw,3.7rem);font-weight:900;line-height:1.12;letter-spacing:-.5px}
.hero-title .grad-text{background:linear-gradient(100deg,#52d6ff,#97ebff 55%,#ff4553);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-desc{margin:1.3rem 0 1.8rem;font-size:1.12rem;color:#dce9f5;max-width:38rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.hero-chips{list-style:none;display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:1.8rem;font-size:.95rem;color:#cfe3f4;justify-content:center}
.hero-chips li{font-weight:600}
.hero-mascot{display:flex;justify-content:center;align-items:center;order:-1}
.hero-mascot img{width:230px;height:auto;align-self:center;flex:0 0 auto;
  filter:drop-shadow(0 28px 46px rgba(0,0,0,.45));border-radius:26px;animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.scroll-cue{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;color:#fff;
  font-size:1.6rem;opacity:.8;animation:bob 1.8s infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ===== Stats ===== */
.stats{background:var(--navy);color:#fff;position:relative;z-index:5}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:2.6rem 24px}
.stat{text-align:center;padding:1.4rem 1rem;border-right:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.stat:nth-child(2n){border-right:0}
.stat:last-child{border-right:0}
.stat-num{display:block;font-size:2.6rem;font-weight:900;line-height:1;
  background:linear-gradient(100deg,#52d6ff,#97ebff);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-label{font-size:.95rem;color:rgba(255,255,255,.82);font-weight:600;margin-top:.4rem;display:block}

/* ===== Sections ===== */
.section{padding:64px 0}
.section.about{padding-top:88px}
.bg-soft{background:var(--bg-soft)}
.kicker{font-weight:800;letter-spacing:1.4px;text-transform:uppercase;font-size:.78rem;color:var(--blue-600);margin-bottom:.6rem}
.section-title{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:900;line-height:1.18;letter-spacing:-.4px;color:var(--ink)}
.section-head{max-width:46rem;margin-bottom:3rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-lead{color:var(--muted);font-size:1.1rem;margin-top:.8rem}

/* About */
.about-grid{display:grid;grid-template-columns:1fr;gap:2.2rem;align-items:center}
.about-media{position:relative}
.about-media>img{border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover;width:100%}
.about-badge{position:absolute;left:-18px;bottom:-18px;background:#fff;border-radius:16px;padding:.9rem 1.3rem;
  box-shadow:var(--shadow);border:1px solid var(--line);display:flex;flex-direction:column;line-height:1.2}
.about-badge strong{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.25rem;font-weight:900}
.about-badge span{font-size:.78rem;color:var(--muted);font-weight:600}
.about-text p{color:#39505f;margin-bottom:1rem}
.feature-list{list-style:none;display:grid;grid-template-columns:1fr;gap:1.3rem;margin-top:1.6rem}
.feature-list li{display:flex;gap:.85rem}
.feature-list .fi{font-size:1.5rem;flex-shrink:0;width:46px;height:46px;display:grid;place-items:center;
  background:var(--bg-soft);border-radius:12px;border:1px solid var(--line)}
.feature-list strong{display:block;font-size:1.02rem}
.feature-list p{font-size:.9rem;color:var(--muted);margin:0}

/* Services cards */
.cards-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:.3s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card-media{aspect-ratio:4/3;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:.5s}
.card:hover .card-media img{transform:scale(1.07)}
.card-body{padding:1.3rem 1.3rem 1.5rem}
.card-body h3{font-size:1.18rem;font-weight:800;margin-bottom:.5rem}
.card-body p{font-size:.94rem;color:var(--muted)}

/* Activities highlight grid */
.hl-grid{display:grid;grid-template-columns:1fr;grid-auto-rows:180px;gap:1.2rem}
.hl{position:relative;border-radius:var(--radius);overflow:hidden;background-size:cover;background-position:center;
  display:flex;align-items:flex-end;color:#fff;box-shadow:var(--shadow-sm);transition:.35s}
.hl:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.hl-lg{grid-column:span 1;grid-row:span 1}
.hl-wide{grid-column:span 1}
.hl-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,22,40,0) 35%,rgba(8,22,40,.88) 100%)}
.hl-cap{position:relative;z-index:2;padding:1.3rem}
.hl-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);padding:.25rem .7rem;border-radius:999px;margin-bottom:.5rem}
.hl-cap h3{font-size:1.25rem;font-weight:800;line-height:1.2}
.hl-lg .hl-cap h3{font-size:1.7rem}
.hl-cap p{font-size:.9rem;color:#dbe8f3;margin-top:.3rem}

/* Gallery */
.gallery{background:var(--bg-soft)}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:2.2rem}
.chip{font-family:inherit;font-weight:600;font-size:.92rem;padding:.5rem 1.1rem;border-radius:999px;
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;transition:.2s}
.chip:hover{border-color:var(--blue)}
.chip.active{background:var(--grad-blue);color:#fff;border-color:transparent}
.grid-masonry{columns:1;column-gap:1rem}
.g-item{break-inside:avoid;margin-bottom:1rem;border-radius:14px;overflow:hidden;cursor:zoom-in;
  box-shadow:var(--shadow-sm);position:relative;background:#dfeaf2;transition:.35s;animation:fade .5s both}
.g-item img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:.5s}
.g-item:hover img{transform:scale(1.06)}
.g-item::after{content:"🔍";position:absolute;inset:0;display:grid;place-items:center;font-size:1.4rem;
  background:rgba(8,22,40,.35);opacity:0;transition:.3s}
.g-item:hover::after{opacity:1}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* FAQ */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:.7rem}
.faq-list details{border:1px solid var(--line);border-radius:12px;background:#fff;padding:.1rem 1.3rem;box-shadow:var(--shadow-sm);transition:.2s}
.faq-list details[open]{border-color:var(--blue);box-shadow:var(--shadow)}
.faq-list summary{font-weight:700;cursor:pointer;padding:1.05rem 0;list-style:none;color:var(--ink);
  display:flex;justify-content:space-between;gap:1rem;align-items:center;font-size:1.04rem}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"＋";color:var(--blue-600);font-weight:900;font-size:1.3rem;flex-shrink:0}
.faq-list details[open] summary::after{content:"−"}
.faq-list details p{padding:0 0 1.1rem;color:#3a4f5e;margin:0;line-height:1.7}

/* CTA banner */
.cta-banner{background:var(--grad-blue);color:#fff;position:relative;overflow:hidden}
.cta-banner::before{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.1)}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:3.4rem 24px;position:relative;z-index:2;flex-wrap:wrap;flex-direction:column;text-align:center}
.cta-inner h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:900}
.cta-inner p{color:#e3f3ff;margin-top:.4rem}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr;gap:2.2rem;align-items:start}
.contact-company{font-weight:800;color:var(--navy);margin:.6rem 0 1.4rem;font-size:1.02rem}
.contact-list{list-style:none;display:grid;gap:1.2rem;margin-bottom:1.8rem}
.contact-list li{display:flex;gap:1rem;align-items:flex-start}
.contact-list .ci{font-size:1.3rem;width:48px;height:48px;display:grid;place-items:center;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;flex-shrink:0}
.contact-list strong{display:block}
.contact-list p{color:var(--muted);margin:0}
.contact-list a:hover{color:var(--blue-600)}
.contact-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.contact-form-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow)}
.contact-form h3{font-size:1.3rem;font-weight:800;margin-bottom:1.2rem}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.86rem;font-weight:600;margin-bottom:.35rem;color:var(--navy)}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:16px;padding:.75rem .9rem;
  border:1.5px solid var(--line);border-radius:11px;background:var(--bg-soft);transition:.2s;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 4px rgba(0,173,238,.12)}
.form-note{margin-top:1rem;color:#0a7d3a;font-weight:600;font-size:.92rem;background:#e7f7ee;padding:.7rem 1rem;border-radius:10px}
.map-wrap{margin-top:3rem;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.map-wrap iframe{width:100%;height:380px;border:0;display:block}

/* Footer */
.site-footer{background:#08182a;color:#c6d6e4;padding-bottom:92px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2rem;padding:64px 24px 36px}
.footer-logo{width:250px;margin-bottom:1rem}
.footer-slogan{font-style:italic;color:#9fb6c9;max-width:22rem}
.footer-col h4{color:#fff;font-size:1rem;font-weight:800;margin-bottom:1rem}
.footer-col a,.footer-col p{display:block;color:#a9bccd;font-size:.94rem;margin-bottom:.55rem;transition:.2s}
.footer-col a:hover{color:#52d6ff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:18px 0;font-size:.86rem;color:#7d93a6;text-align:center}

/* Floating action buttons */
.fab-stack{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:60;display:flex;flex-direction:column;gap:.7rem}
.fab{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;font-weight:800;font-size:.8rem;
  color:#fff;box-shadow:0 10px 24px -6px rgba(0,0,0,.4);transition:.25s;animation:pulse 2.4s infinite}
.fab-call{background:linear-gradient(135deg,#19b257,#0a8f3c);font-size:1.4rem}
.fab-zalo{background:linear-gradient(135deg,#00ADEE,#0071a3)}
.fab:hover{transform:scale(1.1)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,173,238,.5)}70%{box-shadow:0 0 0 14px rgba(0,173,238,0)}100%{box-shadow:0 0 0 0 rgba(0,173,238,0)}}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(6,15,26,.94);display:grid;place-items:center;padding:4vw}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-close,.lb-nav{position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  color:#fff;cursor:pointer;border-radius:50%;display:grid;place-items:center;transition:.2s}
.lb-close{top:20px;right:24px;width:46px;height:46px;font-size:1.2rem}
.lb-nav{top:50%;transform:translateY(-50%);width:54px;height:54px;font-size:2rem}
.lb-prev{left:24px}.lb-next{right:24px}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.28)}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(28px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ===== Responsive ===== */




/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ============================================================
   ✨ PREMIUM ENHANCEMENTS — visual polish layer (v2)
   Additive only. Keeps brand palette (blue / purple / red).
   ============================================================ */
:root{
  --orb-blue:radial-gradient(circle at 35% 35%, rgba(82,214,255,.6), transparent 70%);
  --orb-purple:radial-gradient(circle at 35% 35%, rgba(82,214,255,.5), transparent 70%);
}

/* Page-wide airy backdrop */
body{
  background:
   radial-gradient(1100px 560px at 88% -6%, rgba(82,214,255,.07), transparent 60%),
   radial-gradient(950px 520px at -12% 16%, rgba(0,173,238,.07), transparent 55%),
   var(--bg);
  background-attachment:fixed;
}

/* ---- Hero: #52D6FF color mesh + floating orbs + text legibility ---- */
.hero-overlay{
  background:var(--grad-hero);
}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(64px);z-index:1;pointer-events:none;opacity:.55}
.hero::before{width:440px;height:440px;left:-130px;top:-90px;background:var(--orb-blue);animation:orbA 15s ease-in-out infinite}
.hero::after{width:380px;height:380px;right:-110px;bottom:-130px;background:var(--orb-purple);animation:orbB 17s ease-in-out infinite}
@keyframes orbA{0%,100%{transform:translate(0,0)}50%{transform:translate(46px,32px)}}
@keyframes orbB{0%,100%{transform:translate(0,0)}50%{transform:translate(-46px,-30px)}}
.hero-title,.hero-desc{text-shadow:0 2px 22px rgba(4,12,26,.35)}
/* soft glow halo behind mascot */
.hero-mascot{position:relative}
.hero-mascot::before{content:"";position:absolute;width:112%;aspect-ratio:1;left:50%;top:50%;
  transform:translate(-50%,-50%);border-radius:50%;z-index:-1;filter:blur(38px);
  background:radial-gradient(circle,rgba(82,214,255,.45),rgba(151,235,255,.30) 45%,transparent 70%);
  animation:halo 6s ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}

/* ---- Stats: depth + glow ---- */
.stats{background:linear-gradient(180deg,#0f2540 0%,#0b1c33 100%)}
.stats::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 130% at 50% 0%, rgba(0,173,238,.20), transparent 70%)}
.stats-grid{position:relative;z-index:1}
.stat-num{filter:drop-shadow(0 6px 20px rgba(82,214,255,.35))}

/* ---- Kicker gradient underline accent ---- */
.kicker{position:relative}
.kicker::after{content:"";display:block;width:34px;height:3px;border-radius:3px;background:var(--grad);margin-top:.55rem}
.section-head.center .kicker::after{margin-left:auto;margin-right:auto}

/* ---- Section rhythm (alternating tints) ---- */
.services{background:var(--bg-soft)}
.faq{background:linear-gradient(180deg,#ffffff 0%, #eef6fc 100%)}

/* ---- Service cards: gradient top accent + deeper lift ---- */
.card.svc{position:relative}
.card.svc::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;z-index:3;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.card.svc:hover::before{transform:scaleX(1)}
.card.svc:hover{box-shadow:0 28px 62px -22px rgba(13,40,70,.42)}

/* ---- Feature / contact icons: gradient tint ---- */
.feature-list .fi,.contact-list .ci{
  background:linear-gradient(135deg,rgba(0,173,238,.13),rgba(82,214,255,.13));
  border-color:rgba(0,173,238,.20)}

/* ---- About image: soft gradient frame ---- */
.about-media{position:relative}
.about-media::before{content:"";position:absolute;inset:-9px;border-radius:calc(var(--radius) + 8px);
  background:var(--grad);opacity:.16;filter:blur(7px);z-index:0}
.about-media>img,.about-badge{position:relative;z-index:1}

/* ---- CTA banner: full brand gradient + orb ---- */
.cta-banner{background:var(--grad)}
.cta-banner::after{content:"";position:absolute;left:-50px;bottom:-80px;width:230px;height:230px;
  border-radius:50%;background:rgba(255,255,255,.10)}

/* ---- Primary button: sweeping shine ---- */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:65%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn-primary:hover::after{left:130%}

/* ---- FAQ: gradient side bar on open ---- */
.faq-list details{position:relative;overflow:hidden}
.faq-list details::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .3s ease}
.faq-list details[open]::before{transform:scaleY(1)}

/* ---- Gallery items: slightly softer ---- */
.g-item{border-radius:16px}

/* ---- Header: refined translucency ---- */
.site-header{background:rgba(255,255,255,.72)}
.site-header.scrolled{background:rgba(255,255,255,.9)}

/* ---- Anchor offset (sticky header) so sections aren't hidden under nav ---- */
#about,#services,#activities,#gallery,#faq,#contact,#stats{scroll-margin-top:96px}

/* ---- Hero background: gentle richness ---- */
.hero-bg{filter:saturate(1.12) contrast(1.03)}
.hero::before,.hero::after{will-change:transform}

/* ---- Accessible focus ring (keyboard users) ---- */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(0,173,238,.55);outline-offset:2px;border-radius:6px}

/* ---- Nav link: active-state gradient text on hover ---- */
.nav-links>a:not(.btn):hover{color:var(--blue-600)}

/* ---- Card body headings: subtle color on hover ---- */
.card.svc:hover .card-body h3{color:var(--blue-700)}

/* ---- Highlight tiles: deeper lift on hover (premium) ---- */
.hl:hover{transform:translateY(-6px) scale(1.015)}

/* ---- Contact form: elevated on focus-within ---- */
.contact-form-wrap{transition:box-shadow .3s ease,transform .3s ease}
.contact-form-wrap:focus-within{box-shadow:0 30px 70px -24px rgba(0,145,204,.4)}

/* ---- Smoother section reveal easing already handled by .reveal ---- */

/* ============================================================
   🧩 REDESIGN COMPONENT LIBRARY (v3) — shared by home + all pages
   Palette: --blue #00ADEE · --blue-light #52D6FF · --blue-lighter #97EBFF
            --red #EC1C24 · --red-600 #E1251B · --red-coral #FF4553
   ============================================================ */

/* ---- Utilities ---- */
.section-sm{padding:64px 0}
.bg-sky{background:linear-gradient(180deg,#f1fbff,#ffffff)}
.bg-softblue{background:var(--bg-soft)}
.wrap-narrow{max-width:920px;margin:0 auto}
.reveal-on{}
.hidden{display:none!important}

/* Fancy centered section heading (uppercase blue + gradient rule) */
.head-fancy{text-align:center;max-width:52rem;margin:0 auto 2.6rem}
.head-fancy .kicker{margin-bottom:.5rem}
.head-fancy h2{font-size:clamp(1.55rem,3.4vw,2.35rem);font-weight:900;color:var(--blue-700);
  text-transform:uppercase;letter-spacing:.4px;line-height:1.18}
.head-fancy h2 .accent{color:var(--red)}
.head-fancy .rule{width:82px;height:4px;border-radius:4px;background:var(--grad);margin:.85rem auto 0}
.head-fancy p{color:var(--muted);margin-top:.75rem;font-size:1.05rem}

/* ============================================================
   Nav dropdown ("Du Học")
   ============================================================ */
.nav-dd{position:relative;display:block;width:100%}
.nav-dd-toggle{font-family:inherit;font-weight:600;color:var(--navy);font-size:1rem;background:none;border:0;
  cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;line-height:inherit;white-space:nowrap;
  padding:.85rem 0;width:100%;justify-content:space-between;border-bottom:1px solid var(--line)}
.nav-dd-toggle .dd-caret{font-size:.68rem;transition:.25s;color:var(--blue-600)}
.nav-dd:hover .dd-caret,.nav-dd:focus-within .dd-caret,.nav-dd.open .dd-caret{transform:rotate(180deg)}
.nav-dd-toggle:hover{color:var(--blue-600)}
.nav-dd-menu{position:static;transform:none;background:#fff;border:0;border-radius:0;box-shadow:none;
  min-width:0;padding:.1rem 0 .4rem 1.2rem;opacity:1;visibility:visible;transition:.2s;z-index:60;display:block}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu,.nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-dd-menu a{display:block;padding:.6rem 0;border-radius:8px;font-weight:600;font-size:.94rem;color:var(--navy)}
.nav-dd-menu a:hover{background:var(--bg-soft);color:var(--blue-600)}

/* ============================================================
   Sub-navigation bar (mini-site pages: jobs / language / driving)
   ============================================================ */
.subnav{position:sticky;top:74px;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
.subnav-inner{display:flex;gap:.35rem;overflow-x:auto;padding:.55rem 0;scrollbar-width:none;align-items:center}
.subnav-inner::-webkit-scrollbar{display:none}
.subnav-title{font-weight:900;color:var(--blue-700);margin-right:.6rem;white-space:nowrap;font-size:.95rem}
.subnav a{white-space:nowrap;font-weight:700;font-size:.92rem;color:var(--navy);padding:.5rem 1rem;border-radius:999px;transition:.2s}
.subnav a:hover{background:var(--bg-soft);color:var(--blue-600)}
.subnav a.active{background:var(--grad-sky);color:#fff}

/* ============================================================
   Page hero (sub-pages)
   ============================================================ */
.page-hero{position:relative;color:#fff;padding:74px 0 66px;overflow:hidden;
  background:var(--grad-hero)}
.page-hero::before{content:"";position:absolute;width:460px;height:460px;right:-120px;top:-160px;border-radius:50%;
  background:radial-gradient(circle,rgba(82,214,255,.5),transparent 68%);filter:blur(30px)}
.page-hero::after{content:"";position:absolute;width:340px;height:340px;left:-120px;bottom:-180px;border-radius:50%;
  background:radial-gradient(circle,rgba(82,214,255,.30),transparent 68%);filter:blur(34px)}
.page-hero .container{position:relative;z-index:2}
.page-hero .kicker{color:#bff0ff}
.page-hero h1{font-size:clamp(1.9rem,4.4vw,2.9rem);font-weight:900;line-height:1.14;letter-spacing:-.4px;max-width:24ch}
.page-hero .lead{color:#dcf1fb;max-width:46rem;margin-top:1rem;font-size:1.1rem}
.page-hero .hero-actions{margin-top:1.6rem}
.crumbs{font-size:.85rem;color:#bcdcec;margin-bottom:1rem}
.crumbs a{color:#bff0ff}.crumbs a:hover{color:#fff}

/* ============================================================
   Pastel service cards — homepage "DỊCH VỤ CỦA CHÚNG TÔI" (6)
   ============================================================ */
.svc-pastel-grid{display:grid;grid-template-columns:1fr;gap:1.4rem}
.svc-pastel{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-radius:18px;padding:1.5rem 1.7rem;min-height:148px;border:1px solid rgba(9,40,70,.05);
  box-shadow:var(--shadow-sm);transition:.32s;overflow:hidden}
.svc-pastel:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.svc-pastel .svc-txt{position:relative;z-index:2}
.svc-pastel h3{font-size:1.16rem;font-weight:900;color:var(--navy);text-transform:uppercase;letter-spacing:.4px;line-height:1.2}
.svc-pastel p{font-size:.9rem;color:#546575;margin-top:.4rem;max-width:23rem}
.svc-pastel .svc-emoji{font-size:2.9rem;flex-shrink:0;filter:drop-shadow(0 10px 16px rgba(0,0,0,.14));position:relative;z-index:2}
.svc-pastel .svc-go{position:absolute;right:1.3rem;bottom:1.1rem;font-weight:800;color:var(--blue-600);font-size:.85rem;opacity:0;transform:translateX(-6px);transition:.3s;z-index:2}
.svc-pastel:hover .svc-go{opacity:1;transform:none}
.svc-pastel .stretched{position:absolute;inset:0;z-index:3}
.svc-1{background:#e9f5ff}.svc-2{background:#fff2ea}.svc-3{background:#fdeef4}
.svc-4{background:#e6fbff}.svc-5{background:#eafbef}.svc-6{background:#fff6e6}
.svc-pastel::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:rgba(255,255,255,.5);z-index:1}

/* ============================================================
   Gallery: 4-column grid + "Xem thêm"
   ============================================================ */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.gallery-grid .g-item{margin:0}
.gallery-grid .g-item img{aspect-ratio:4/3}
.more-wrap{text-align:center;margin-top:2.2rem}
.more-btn{font-family:inherit;font-weight:800;font-size:.98rem;color:var(--blue-700);background:#fff;cursor:pointer;
  padding:.75rem 2rem;border-radius:999px;border:2px solid transparent;
  background-image:linear-gradient(#fff,#fff),var(--grad);background-origin:border-box;background-clip:padding-box,border-box;
  transition:.25s}
.more-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.more-btn[hidden]{display:none}

/* ============================================================
   Tabs (schools, jobs, courses)
   ============================================================ */
.tabs-bar{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2.1rem}
.tab-btn{font-family:inherit;font-weight:700;font-size:.94rem;padding:.62rem 1.3rem;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;transition:.2s}
.tab-btn:hover{border-color:var(--blue)}
.tab-btn.active{background:var(--grad-blue);color:#fff;border-color:transparent;box-shadow:0 10px 22px -10px rgba(0,145,204,.6)}
.tab-panel[hidden]{display:none}

/* ============================================================
   School cards (Các Trường Liên Kết)
   ============================================================ */
.school-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
.school-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);transition:.3s;display:flex;flex-direction:column}
.school-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.school-cover{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#dceffb,#f0e6f7);overflow:hidden}
.school-cover img{width:100%;height:100%;object-fit:cover}
.school-flag{position:absolute;top:.7rem;left:.7rem;font-size:.72rem;font-weight:800;letter-spacing:.3px;
  color:#fff;background:rgba(0,113,163,.9);padding:.25rem .7rem;border-radius:999px;text-transform:uppercase}
.school-tier{position:absolute;top:.7rem;right:.7rem;font-size:.72rem;font-weight:900;color:#fff;
  background:var(--red);padding:.25rem .7rem;border-radius:999px}
.school-body{padding:1.1rem 1.2rem 1.3rem}
.school-body h3{font-size:1.06rem;font-weight:800;color:var(--navy);line-height:1.3}
.school-meta{display:flex;gap:1rem;color:var(--muted);font-size:.82rem;margin-top:.5rem}
.school-tuition{margin-top:.7rem;font-weight:800;color:var(--blue-700);font-size:.94rem}
.school-cond{list-style:none;margin-top:.6rem;display:grid;gap:.3rem}
.school-cond li{font-size:.86rem;color:#516375;padding-left:1.2rem;position:relative}
.school-cond li::before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:900}

/* ============================================================
   Carousels (press / partners / photo strips)
   ============================================================ */
.carousel{position:relative;padding:0 6px}
.carousel-track{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x proximity;padding:.4rem .2rem 1.2rem;scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track>*{scroll-snap-align:start;flex:0 0 auto}
.car-btn{position:absolute;top:44%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;
  background:var(--grad-blue);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;box-shadow:var(--shadow);z-index:4;display:grid;place-items:center;transition:.2s}
.car-btn:hover{transform:translateY(-50%) scale(1.08)}
.car-prev{left:-6px}.car-next{right:-6px}

/* Press clipping cards */
.press-card{width:330px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.press-card .press-src{font-weight:900;color:var(--red);font-size:.8rem;letter-spacing:.4px;padding:.9rem 1.1rem 0}
.press-card h3{font-size:1.02rem;font-weight:800;color:var(--navy);padding:.3rem 1.1rem .4rem;line-height:1.35}
.press-thumb{aspect-ratio:16/10;background:linear-gradient(135deg,#eef6fc,#f7eef4);overflow:hidden;margin:.4rem 1.1rem 1.1rem;border-radius:10px;border:1px solid var(--line)}
.press-thumb img{width:100%;height:100%;object-fit:cover}
.press-card .press-more{padding:0 1.1rem 1.1rem;font-weight:800;color:var(--blue-600);font-size:.86rem}

/* Partner logos */
.partner-logo{width:190px;height:118px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem;box-shadow:var(--shadow-sm);transition:.25s}
.partner-logo:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(0,173,238,.4)}
.partner-logo img{max-height:74px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:.25s}
.partner-logo:hover img{filter:none;opacity:1}
.partner-logo .plabel{font-weight:800;color:var(--navy);text-align:center;font-size:.9rem;line-height:1.25}

/* ============================================================
   Roadmap (Lộ trình Du Học) — CSS-built infographic
   ============================================================ */
.roadmap{background:#fff;border:1px solid var(--line);border-radius:22px;padding:2.4rem 1.6rem;box-shadow:var(--shadow-sm);overflow-x:auto}
.roadmap-flow{display:flex;align-items:stretch;gap:1rem;min-width:760px}
.rm-stage{flex:1;min-width:150px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem}
.rm-badge{font-weight:900;color:var(--blue-700);font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;transform:rotate(-4deg)}
.rm-orb{width:130px;height:130px;border-radius:50%;display:grid;place-items:center;padding:1rem;text-align:center;
  color:var(--navy);font-weight:800;font-size:.86rem;line-height:1.25;border:3px solid var(--blue);
  background:radial-gradient(circle at 40% 35%,#eaf8ff,#d3f0ff)}
.rm-note{font-size:.78rem;color:var(--muted)}
.rm-opts{display:flex;flex-direction:column;gap:.7rem;justify-content:center;flex:1;min-width:190px}
.rm-opt{border:1.5px solid var(--line);border-radius:12px;padding:.7rem .9rem;font-size:.82rem;color:#3f5567;background:#fff;box-shadow:var(--shadow-sm)}
.rm-opt b{display:block;color:var(--blue-700);font-size:.8rem;text-transform:uppercase;letter-spacing:.3px;margin-bottom:.15rem}
.rm-opt .money{color:var(--red);font-weight:900}
.rm-arrow{align-self:center;color:var(--blue);font-size:1.6rem}
.rm-tag{background:var(--grad-blue);color:#fff;border-radius:10px;padding:.5rem .7rem;font-size:.76rem;font-weight:700}

/* ============================================================
   About page components
   ============================================================ */
.about2-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}
.about2-lead p{color:#39505f;margin-bottom:1rem;font-size:1.02rem}
.vn-map-card{margin-top:1.4rem;background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.4rem}
.vn-map-card h4{color:var(--red);font-weight:900;font-size:.95rem;margin-bottom:.6rem}
.loc-list{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.loc-list li{font-weight:700;color:var(--blue-700);font-size:.86rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.35rem .85rem}
.loc-list li::before{content:"📍 "}
.intro-video{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:4px solid var(--blue-light);aspect-ratio:16/9;background:#06283b}
.intro-video iframe,.intro-video img{width:100%;height:100%;object-fit:cover;border:0;display:block}
.acc{display:flex;flex-direction:column;gap:.7rem;margin-top:1.4rem}
.acc details{border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden}
.acc summary{cursor:pointer;list-style:none;padding:.95rem 1.1rem;font-weight:800;color:var(--blue-700);text-transform:uppercase;letter-spacing:.4px;font-size:.92rem;display:flex;justify-content:space-between;align-items:center}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"＋";color:var(--blue);font-weight:900;font-size:1.2rem}
.acc details[open] summary::after{content:"−"}
.acc details[open] summary{border-bottom:1px solid var(--line)}
.acc .acc-body{padding:1rem 1.1rem;color:#3f5567;font-size:.95rem}
.acc .acc-body ul{margin:.5rem 0 0 1.1rem}
.acc .acc-body li{margin-bottom:.35rem}
.acc .acc-quote{font-style:italic;color:var(--blue-700);font-weight:700;margin-bottom:.5rem}

.value-cards{display:grid;grid-template-columns:1fr;gap:1.2rem}
.value-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.3rem;text-align:center;box-shadow:var(--shadow-sm);transition:.3s}
.value-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.value-card .vic{width:64px;height:64px;margin:0 auto .8rem;border-radius:50%;display:grid;place-items:center;font-size:1.8rem;background:linear-gradient(135deg,#e6f7ff,#d3f0ff);border:1px solid rgba(0,173,238,.25)}
.value-card h3{font-size:1rem;font-weight:800;color:var(--navy)}
.value-card p{font-size:.86rem;color:var(--muted);margin-top:.4rem}

.office-grid{display:grid;grid-template-columns:1fr;gap:1.4rem}
.office-card{position:relative;border-radius:16px;overflow:hidden;color:#fff;min-height:190px;display:flex;align-items:flex-end;
  background:linear-gradient(135deg,#0071a3,#00ADEE);box-shadow:var(--shadow-sm)}
.office-card .oc-body{position:relative;z-index:2;padding:1.2rem 1.3rem}
.office-card .oc-flag{font-size:1.6rem}
.office-card h3{font-size:1.15rem;font-weight:900;margin-top:.2rem}
.office-card p{font-size:.86rem;color:#dcf1fb;margin-top:.2rem}

/* ============================================================
   Jobs table (Việc Làm)
   ============================================================ */
.job-table-wrap{overflow-x:auto;border-radius:16px;border:2px solid var(--red);box-shadow:var(--shadow-sm)}
.job-table{width:100%;border-collapse:collapse;min-width:620px;background:#fff}
.job-table thead th{background:var(--grad-blue);color:#fff;font-weight:800;padding:.9rem 1rem;text-align:left;font-size:.95rem}
.job-table thead th:nth-child(2),.job-table thead th:nth-child(3){text-align:right}
.job-table tbody td{padding:.85rem 1rem;border-top:1px solid var(--line);vertical-align:top;font-size:.94rem}
.job-table tbody tr:nth-child(even){background:var(--bg-soft)}
.job-table .jt-title{font-weight:700;color:var(--navy)}
.job-table .jt-sub{display:block;color:var(--muted);font-size:.82rem;margin-top:.15rem}
.job-table .jt-salary{color:var(--red);font-weight:800;text-align:right;white-space:nowrap}
.job-table .jt-place{text-align:right;color:#3f5567;white-space:nowrap}
.job-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}

/* ============================================================
   Course cards (Đào Tạo Ngoại Ngữ)
   ============================================================ */
.course-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
.course-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:.3s}
.course-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.course-top{padding:1.3rem 1.4rem;color:#fff;position:relative;background:var(--grad-blue)}
.course-card:nth-child(2) .course-top,.course-card:nth-child(3) .course-top{background:linear-gradient(135deg,#e1251b,#ff4553)}
.course-top .ctag{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;opacity:.9}
.course-top h3{font-size:1.2rem;font-weight:900;margin-top:.25rem}
.course-body{padding:1.2rem 1.4rem 1.4rem}
.course-body ul{list-style:none;display:grid;gap:.45rem}
.course-body li{font-size:.9rem;color:#455767;padding-left:1.35rem;position:relative}
.course-body li::before{content:"▹";position:absolute;left:0;color:var(--blue);font-weight:900}
.course-foot{margin-top:1rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.course-price{font-weight:900;color:var(--red);font-size:1rem}

/* ============================================================
   "Vì sao chọn TNS GROUP" — icon grid
   ============================================================ */
.why-grid{display:grid;grid-template-columns:1fr;gap:2rem 1.4rem;text-align:center}
.why-item .why-ic{width:78px;height:78px;margin:0 auto .9rem;border-radius:20px;display:grid;place-items:center;font-size:2rem;
  background:linear-gradient(135deg,#e6f7ff,#d0eeff);border:1px solid rgba(0,173,238,.22);color:var(--blue-700)}
.why-item h3{font-size:.98rem;font-weight:900;color:var(--red);text-transform:uppercase;letter-spacing:.3px;line-height:1.3}
.why-item p{font-size:.86rem;color:var(--muted);margin-top:.45rem}

/* ============================================================
   Info cards / benefits / steps / price table (driving + shared)
   ============================================================ */
.info-cards{display:grid;grid-template-columns:1fr;gap:1.4rem}
.info-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.4rem;box-shadow:var(--shadow-sm);transition:.3s}
.info-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.info-card .ic-emoji{font-size:2.1rem}
.info-card h3{font-size:1.08rem;font-weight:800;color:var(--navy);margin-top:.5rem}
.info-card p{font-size:.9rem;color:var(--muted);margin-top:.4rem}

.check-list{list-style:none;display:grid;gap:.7rem;max-width:760px}
.check-list li{position:relative;padding-left:2rem;color:#3f5567;font-size:.98rem}
.check-list li::before{content:"✓";position:absolute;left:0;top:0;width:1.4rem;height:1.4rem;border-radius:50%;
  background:var(--grad-sky);color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:900}
.check-list li strong{color:var(--navy)}

.steps{display:grid;gap:1rem;counter-reset:step}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem 1.1rem 3.6rem;box-shadow:var(--shadow-sm)}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:1rem;top:1.05rem;width:2rem;height:2rem;border-radius:50%;
  background:var(--grad-blue);color:#fff;display:grid;place-items:center;font-weight:900;font-size:.95rem}
.step h3{font-size:1rem;font-weight:800;color:var(--navy)}
.step p{font-size:.9rem;color:var(--muted);margin-top:.25rem}

.price-table-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.price-table{width:100%;border-collapse:collapse;min-width:520px;background:#fff}
.price-table th{background:var(--grad-blue);color:#fff;padding:.9rem 1rem;text-align:left;font-weight:800;font-size:.95rem}
.price-table td{padding:.85rem 1rem;border-top:1px solid var(--line);font-size:.94rem;color:#3f5567}
.price-table tbody tr:nth-child(even){background:var(--bg-soft)}
.price-table .pt-name{font-weight:700;color:var(--navy)}
.price-table .pt-price{color:var(--red);font-weight:800;white-space:nowrap}

.program-cards{display:grid;grid-template-columns:1fr;gap:1.5rem}
.program-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.6rem;box-shadow:var(--shadow-sm);transition:.3s;overflow:hidden}
.program-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.program-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--grad)}
.program-badge{display:inline-block;font-weight:900;font-size:1.5rem;color:#fff;background:var(--grad-blue);border-radius:12px;padding:.3rem .9rem}
.program-card h3{font-size:1.2rem;font-weight:900;color:var(--navy);margin:.7rem 0 .3rem}
.program-card p{font-size:.92rem;color:var(--muted)}
.program-card ul{list-style:none;margin-top:.7rem;display:grid;gap:.35rem}
.program-card li{font-size:.88rem;color:#455767;padding-left:1.3rem;position:relative}
.program-card li::before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:900}

/* ============================================================
   Signup / registration block (sub-pages)
   ============================================================ */
.signup{background:linear-gradient(120deg,#06283b,#0071a3);color:#fff;border-radius:22px;overflow:hidden;
  display:grid;grid-template-columns:1fr;gap:0;box-shadow:var(--shadow)}
.signup-info{padding:2.4rem}
.signup-info h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:900;line-height:1.2}
.signup-info p{color:#d7edf8;margin-top:.7rem}
.signup-info .check-list{margin-top:1.2rem}
.signup-info .check-list li{color:#e7f4fb}
.signup-info .check-list li strong{color:#fff}
.signup-form{background:#fff;padding:2.2rem;color:var(--ink)}
.signup-form h3{font-size:1.25rem;font-weight:800;margin-bottom:1.1rem;color:var(--navy)}

/* News list (Tin Tức) */
.news-list{display:grid;gap:1rem;max-width:900px;margin:0 auto}
.news-item{display:flex;gap:1.1rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.9rem 1.1rem;box-shadow:var(--shadow-sm);transition:.25s}
.news-item:hover{transform:translateX(4px);box-shadow:var(--shadow);border-color:rgba(0,173,238,.35)}
.news-thumb{width:104px;height:74px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--bg-soft)}
.news-body h3{font-size:1rem;font-weight:800;color:var(--navy);line-height:1.35}
.news-body .news-meta{font-size:.8rem;color:var(--muted);margin-top:.3rem}

/* ============================================================
   Responsive
   ============================================================ */





/* ============================================================
   Nav density + gallery empty-state (redesign v3 follow-ups)
   ============================================================ */
.gallery-empty{text-align:center;color:var(--muted);padding:2.4rem 1rem;font-weight:600;
  background:var(--bg-soft);border:1px dashed var(--line);border-radius:14px;margin-top:.6rem}
.gallery-empty[hidden]{display:none}

/* Nav collapses to hamburger below 1024px (7-item menu too wide for small laptops) */


/* ============================================================
   MOBILE-FIRST: base o tren la giao dien DIEN THOAI.
   Cac khoi min-width duoi day NANG CAP dan cho man hinh lon hon.
   Thang breakpoint: 431 / 761 / 901 / 981 / 1025 / 1081
   ============================================================ */
@media(min-width:431px){
  .grid-masonry{columns:2}
  .hl-grid{grid-template-columns:repeat(2,1fr)}
  .hl-lg{grid-column:span 2}
  .hl-wide{grid-column:span 2}
}
@media(min-width:761px){
  .section{padding:96px 0}
  .stats-grid{grid-template-columns:repeat(4,1fr);gap:1rem}
  .stat{padding:1rem;border-bottom:0}
  .stat:nth-child(2n){border-right:1px solid rgba(255,255,255,.12)}
  .feature-list{grid-template-columns:1fr 1fr}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .grid-masonry{columns:3}
  .cta-inner{flex-direction:row;text-align:left}
  .footer-grid{grid-template-columns:1fr 1fr}
  .site-footer{padding-bottom:0}
  .svc-pastel-grid{grid-template-columns:1fr 1fr}
  .gallery-grid{grid-template-columns:repeat(4,1fr)}
  .school-grid,.info-cards,.office-grid{grid-template-columns:1fr 1fr}
  .value-cards,.why-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:901px){
  .subnav{top:84px}
  .about2-grid{grid-template-columns:1.02fr .98fr;gap:2.6rem}
  .signup{grid-template-columns:1.05fr .95fr}
  .course-grid,.program-cards{grid-template-columns:repeat(2,1fr)}
  .school-grid,.info-cards,.office-grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:981px){
  .hero-inner{grid-template-columns:1.25fr .85fr;text-align:left}
  .hero-mascot{order:0}
  .hero-mascot img{width:min(390px,92%)}
  .hero-chips{justify-content:flex-start}
  .hero-actions{justify-content:flex-start}
  .about-grid{grid-template-columns:.95fr 1.05fr;gap:3.4rem}
  .contact-grid{grid-template-columns:1fr 1fr;gap:3.4rem}
  .cards-grid{grid-template-columns:repeat(4,1fr)}
  .hl-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:200px}
  .hl-lg{grid-column:span 2;grid-row:span 2}
  .grid-masonry{columns:4}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}
}
/* >=1025: nav ngang (7 muc quá rộng cho laptop nhỏ nên giữ hamburger tới 1024) */
@media(min-width:1025px){
  .nav-toggle{display:none}
  .nav-links{position:static;inset:auto;background:none;flex-direction:row;align-items:center;
    gap:1.15rem;padding:0;border-bottom:0;box-shadow:none;transform:none;max-height:none;overflow-y:visible}
  .nav-links>a:not(.btn){font-size:.9rem;white-space:nowrap;padding:0;border-bottom:0}
  .nav-cta{padding:.52rem .95rem;font-size:.9rem;margin-top:0}
  .lang-switch{margin-top:0}
  .nav-dd{display:inline-flex;width:auto}
  .nav-dd-toggle{font-size:.9rem;padding:0;width:auto;justify-content:flex-start;border-bottom:0}
  .nav-dd-menu{position:absolute;left:50%;transform:translateX(-50%) translateY(6px);top:calc(100% + 16px);
    min-width:214px;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
    padding:.4rem;opacity:0;visibility:hidden}
  .nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu,.nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  .nav-dd-menu a{padding:.62rem .85rem}
}
@media(min-width:1081px){
  .value-cards,.why-grid{grid-template-columns:repeat(4,1fr)}
}