/* ============================================================
   COMPONENTS — Linh kiện tái sử dụng (Module A)
   (Header/Footer sẽ thêm CSS riêng ở Module B)
   ============================================================ */

/* ---------- Nút ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; line-height: 1.2;
  padding: 13px 24px; border-radius: 999px; border: 1.5px solid transparent;
  white-space: nowrap; cursor: pointer;
  transition: transform .4s var(--ease-out), background-color .25s ease, color .25s ease,
              border-color .25s ease, box-shadow .4s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .1s; }
.btn--primary {
  background: var(--gold); color: var(--green-900);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 24px -14px rgba(160,112,20,.8);
}
.btn--primary:hover { background: var(--gold-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 18px 30px -16px rgba(160,112,20,.85); }
.btn--ghost { background: transparent; border-color: currentColor; color: var(--green-700); }
.btn--ghost:hover { background: var(--green-700); color: #fff; border-color: var(--green-700); }
.btn--light { background: #fff; color: var(--green-900); }
.btn--light:hover { background: var(--green-100); }
/* Điện thoại: nhãn dài (vd. nút gửi CV kèm email) được xuống dòng thay vì tràn */
@media (max-width: 560px) { .btn { white-space: normal; text-align: center; } }

/* Nút có vòng tròn mũi tên lồng bên trong */
.btn--icon { padding-right: 7px; }
.btn__ic {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(12,59,42,.12);
  transition: transform .45s var(--ease-spring), background-color .25s ease;
}
.btn:hover .btn__ic { transform: translate(2px, -1px) scale(1.06); background: rgba(12,59,42,.18); }

/* Mũi tên chữ trong link "Tìm hiểu →" trượt nhẹ khi rê chuột */
.more__arr { display: inline-block; transition: transform .45s var(--ease-out); }
a:hover .more__arr, a:focus-visible .more__arr { transform: translateX(5px); }

/* ---------- Thẻ (kiểu khung kép: viền ngoài mảnh + lõi trắng) ---------- */
.card {
  background: var(--paper); border: 1px solid rgba(20,80,60,.07);
  border-radius: 20px; padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--bezel), var(--shadow-sm);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--bezel), var(--shadow-lg); }
.card__icon {
  width: 50px; height: 50px; display: grid; place-items: center;
  background: var(--green-100);
  background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent);
  border-radius: 14px; margin-bottom: 18px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
}
.card__icon svg path, .card__icon svg circle { stroke-width: 1.6; }
.card h3 { margin-bottom: 8px; }
.card p  { color: var(--muted); font-size: 0.96rem; }

/* ---------- Breadcrumb (đường dẫn cho trang con) ---------- */
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 0.9rem; color: var(--muted); padding-block: 18px;
}
.breadcrumb a:hover { color: var(--green-700); text-decoration: underline; }
.breadcrumb span[aria-current] { color: var(--ink); font-weight: 600; }
.breadcrumb .sep { opacity: .5; }

/* ============================================================
   HEADER / NAV  (Module B)
   ============================================================ */
.nav{position:sticky;top:0;z-index:var(--z-nav);background:rgba(251,250,247,.78);
  backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .4s ease,box-shadow .4s ease,background-color .4s ease;}
.nav.is-scrolled{background:rgba(251,250,247,.92);border-bottom-color:rgba(20,80,60,.08);box-shadow:0 10px 30px -24px rgba(10,70,45,.45);}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--green-900);}
.brand svg{flex:none;}
.brand img,.brand__logo{height:33px;width:auto;flex:none;display:block;}
.brand__text{height:22px;width:auto;flex:none;display:block;}
.footer .brand__text{height:20px;}
.brand__full{height:38px;width:auto;flex:none;display:block;}
.footer .brand__full{height:32px;}
.nav__menu{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);}
.nav__links{display:flex;align-items:center;gap:clamp(4px,.8vw,10px);list-style:none;}
.nav__links a{display:block;font-weight:500;font-size:.95rem;color:var(--ink);padding:8px 10px;border-radius:999px;position:relative;white-space:nowrap;
  transition:color .25s ease,background-color .25s ease;}
.nav__links a:hover{color:var(--green-700);background:rgba(20,80,60,.06);}
.nav__links a.is-active{color:var(--green-700);}
.nav__links a.is-active::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;border-radius:2px;background:var(--gold);}
.nav__hotline{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--green-700);white-space:nowrap;
  padding:9px 16px;border-radius:999px;background:var(--green-100);box-shadow:inset 0 0 0 1px rgba(20,80,60,.08);
  font-variant-numeric:tabular-nums;transition:background-color .25s ease,transform .4s var(--ease-out);}
.nav__hotline:hover{background:#D6E8DE;transform:translateY(-1px);}
.nav__cta .btn{padding:9px 18px;}
.nav__toggle{display:none;width:44px;height:44px;flex:none;border:1px solid rgba(20,80,60,.12);border-radius:12px;background:#fff;cursor:pointer;
  box-shadow:var(--shadow-sm);}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{content:"";display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);margin:0 auto;position:relative;
  transition:transform .4s var(--ease-spring),background-color .2s ease;}
.nav__toggle span::before{position:absolute;top:-6px;}
.nav__toggle span::after{position:absolute;top:6px;}
.nav.is-open .nav__toggle span{background:transparent;}
.nav.is-open .nav__toggle span::before{transform:translateY(6px) rotate(45deg);}
.nav.is-open .nav__toggle span::after{transform:translateY(-6px) rotate(-45deg);}

/* Điện thoại/tablet: menu chuyển sang hamburger xổ dọc */
@media (max-width:1040px){
  .nav__toggle{display:block;}
  .nav__menu{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(251,250,247,.98);border-bottom:1px solid var(--line);padding:8px var(--gutter) 22px;
    transform:translateY(-135%);transition:transform .55s var(--ease-spring);box-shadow:0 30px 40px -30px rgba(10,70,45,.45);
    max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;}
  .nav.is-open .nav__menu{transform:translateY(0);}
  .nav__links{flex-direction:column;align-items:stretch;gap:0;}
  .nav__links a{padding:15px 4px;border-radius:0;border-bottom:1px solid var(--line);}
  .nav__links a:hover{background:transparent;}
  .nav__links a.is-active::after{display:none;}
  .nav__links a.is-active{padding-left:14px;box-shadow:inset 3px 0 0 var(--gold);}
  /* Các mục menu hiện lần lượt khi mở */
  .nav__links li,.nav__hotline{opacity:0;transform:translateY(12px);
    transition:opacity .45s var(--ease-out),transform .55s var(--ease-out);}
  .nav.is-open .nav__links li,.nav.is-open .nav__hotline{opacity:1;transform:none;}
  .nav.is-open .nav__links li:nth-child(1){transition-delay:.06s}
  .nav.is-open .nav__links li:nth-child(2){transition-delay:.10s}
  .nav.is-open .nav__links li:nth-child(3){transition-delay:.14s}
  .nav.is-open .nav__links li:nth-child(4){transition-delay:.18s}
  .nav.is-open .nav__links li:nth-child(5){transition-delay:.22s}
  .nav.is-open .nav__links li:nth-child(6){transition-delay:.26s}
  .nav.is-open .nav__links li:nth-child(7){transition-delay:.30s}
  .nav.is-open .nav__hotline{transition-delay:.34s}
  .nav__hotline{margin-top:16px;justify-content:center;padding:13px 16px;}
  .nav__cta{margin-top:12px;}
  .nav__cta .btn{width:100%;justify-content:center;}
}

/* ============================================================
   FOOTER  (Module B)
   ============================================================ */
.footer{position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(50% 80% at 100% 0%, rgba(201,150,46,.16), transparent 60%),
    var(--grad-dark);
  color:#DCEAE0;padding-block:clamp(56px,7vw,88px) 28px;}
.footer::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:1px;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(228,184,74,.55),transparent);}
.footer a{color:#C6D5CB;transition:color .25s ease;}
.footer a:hover{color:var(--gold-soft);}
.footer__grid{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1.5fr 1fr 1.5fr;}
.footer .brand{color:#fff;margin-bottom:18px;}
.footer__brand p{color:#B5CBBD;font-size:.94rem;max-width:40ch;}
.footer h4{color:#fff;font-family:var(--font-body);font-size:.98rem;font-weight:600;margin-bottom:16px;}
.footer ul{list-style:none;display:grid;gap:10px;font-size:.94rem;line-height:1.55;}
.footer__bottom{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.86rem;color:#A9C0B2;}
@media (max-width:820px){.footer__grid{grid-template-columns:1fr 1fr;}.footer__brand{grid-column:1 / -1;}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr;}}