/* ============================================================
   GỌI ÉN — HEADER & FOOTER  ·  bản 2.0  ·  01/09/2026
   Màu chính #006360. Phong cách kính: bề mặt trong mờ, làm nhoè
   nền phía sau, viền sáng mảnh, bóng nhiều lớp tạo chiều sâu.
   Mọi lớp bắt đầu bằng gh- hoặc gf- nên không đụng gì của Flatsome.
   ============================================================ */

:root{
  --g-brand:#006360;
  --g-brand-2:#00847E;
  --g-brand-3:#00423F;
  --g-brand-4:#002A28;
  --g-mint:#5FDCC4;
  --g-mint-2:#8AEAD8;
  --g-ink:#12211F;
  --g-ink-2:#3C4C4A;
}

/* ---------------- HEADER — kính sáng ---------------- */

.gh{
  position:relative;width:100%;color:var(--g-ink);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg, rgba(233,244,243,.88) 0%, rgba(255,255,255,.78) 100%);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(0,99,96,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 12px 34px -22px rgba(0,42,40,.45);
}
.gh::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(0,99,96,.30), transparent);
}
.gh *{box-sizing:border-box}
.gh a{text-decoration:none}

.gh-in{
  max-width:1200px;margin:0 auto;padding:0 20px;min-height:74px;
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 26px;
}

.gh-logo{display:flex;flex-direction:column;justify-content:center;flex:none;line-height:1}
.gh-logo b{font-size:23px;font-weight:800;letter-spacing:-.025em;color:var(--g-brand)}
.gh-logo b i{font-style:normal;color:var(--g-brand)}
.gh-logo em{
  margin-top:5px;font-style:normal;font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(0,99,96,.55);
}

.gh-nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.gh-nav a{
  color:var(--g-ink-2);font-size:15px;font-weight:600;
  padding:9px 13px;border-radius:10px;white-space:nowrap;
  border:1px solid transparent;
}
.gh-nav a:hover{
  color:var(--g-brand);background:rgba(255,255,255,.7);
  border-color:rgba(0,99,96,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.gh-nav a.is-now{
  color:var(--g-brand);font-weight:700;
  background:linear-gradient(180deg, rgba(0,99,96,.13), rgba(0,99,96,.07));
  border-color:rgba(0,99,96,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.gh-cta{
  flex:none;color:#fff;font-size:14.5px;font-weight:800;padding:11px 19px;border-radius:12px;
  white-space:nowrap;border:1px solid rgba(0,66,63,.85);
  background:linear-gradient(180deg,#00817B 0%,#006360 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 10px 22px -10px rgba(0,99,96,.70);
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.gh-cta:hover{background:linear-gradient(180deg,#00938C 0%,#00716D 100%);color:#fff}
.gh-cta:active{transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(0,30,29,.30)}

.gh-burger{
  display:none;flex:none;width:44px;height:44px;border-radius:12px;cursor:pointer;padding:0;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
  border:1px solid rgba(0,99,96,.20);
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.66));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px -6px rgba(0,42,40,.3);
}
.gh-burger span{display:block;width:17px;height:2px;border-radius:2px;background:var(--g-brand)}

@media (max-width:1080px){
  .gh-in{min-height:64px;gap:10px 14px;padding-bottom:0}
  .gh-cta{order:2;margin-left:auto;padding:9px 15px;font-size:13.5px}
  .gh-burger{display:flex;order:3}
  .gh-nav{
    order:9;flex-basis:100%;display:none;flex-direction:column;align-items:stretch;
    gap:3px;margin:0;padding:10px 0 14px;border-top:1px solid rgba(0,99,96,.14);
  }
  .gh.is-open .gh-nav{display:flex}
  .gh-nav a{padding:12px;font-size:16px}
}

/* ---------------- FOOTER — kính tối ---------------- */

.gf{
  position:relative;width:100%;overflow:hidden;color:rgba(255,255,255,.75);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(700px 400px at 84% 0%, rgba(95,220,196,.16), transparent 62%),
    radial-gradient(620px 420px at 4% 100%, rgba(0,132,126,.34), transparent 60%),
    linear-gradient(160deg,#002A28 0%,#00504D 52%,#003432 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.gf::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(168deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 36%);
}
.gf *{box-sizing:border-box}
.gf a{text-decoration:none}

.gf-in{
  position:relative;max-width:1200px;margin:0 auto;padding:54px 20px 42px;
  display:grid;gap:34px 30px;grid-template-columns:1.7fr 1fr 1fr 1fr;
}

.gf-logo{display:inline-block;font-size:22px;font-weight:800;letter-spacing:-.025em;color:#fff;line-height:1}
.gf-logo i{font-style:normal;color:var(--g-mint)}
.gf-brand p{margin:15px 0 0;font-size:14.5px;line-height:1.7;max-width:44ch}
.gf-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  color:#EAFBF6;font-size:14.5px;font-weight:700;padding:11px 17px;border-radius:12px;
  border:1px solid rgba(255,255,255,.20);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 12px 28px -16px rgba(0,0,0,.6);
  transition:transform .12s ease, background .18s ease;
}
.gf-cta:hover{background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.10));color:#fff}
.gf-cta:active{transform:translateY(1px)}

.gf-col h3{
  margin:0 0 15px;color:#fff;font-size:12.5px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;
}
.gf-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gf-col li{margin:0}
.gf-col a{color:rgba(255,255,255,.75);font-size:14.5px;line-height:1.45}
.gf-col a:hover{color:var(--g-mint)}

.gf-bot{position:relative;border-top:1px solid rgba(255,255,255,.12)}
.gf-bot-in{
  max-width:1200px;margin:0 auto;padding:19px 20px 26px;
  display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;
  font-size:13px;line-height:1.6;color:rgba(255,255,255,.52);
}
.gf-bot-in p{margin:0}

/* ---------------- máy không hỗ trợ làm nhoè nền ---------------- */
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  .gh{background:#EDF6F5}
  .gf-cta{background:rgba(255,255,255,.14)}
}

@media (max-width:900px){
  .gf-in{grid-template-columns:1fr 1fr;padding:42px 20px 34px}
  .gf-brand{grid-column:1 / -1}
}
@media (max-width:560px){
  .gf-in{grid-template-columns:1fr;gap:28px}
  .gf-bot-in{flex-direction:column}
}