/* ===== KyTuDacBiet — site v3 (28/10/2026): font, nền, header, footer theo mockup ===== */
:root{
  --pink:#1a6dff; --pink-deep:#0b55d6; --ink:#0d1b3e; --muted:#5d6c88; --muted2:#8b97ad;
  --bd:#e3ebf6; --font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --blue-g:linear-gradient(135deg,#2a86ff 0,#1566f2 100%);
  --wrap:1408px;
}
body{font-family:var(--font);color:var(--ink);background:#f0f5fb;background-image:radial-gradient(1200px 520px at 50% -80px,#f9fbff 0,rgba(249,251,255,0) 70%);background-attachment:scroll}
button,input,textarea{font-family:inherit}
.wrap{max-width:var(--wrap)}

/* ---- header: thanh bo tròn nổi như mockup ---- */
.header{position:sticky;top:0;z-index:30;background:transparent;border:0;box-shadow:none;backdrop-filter:none;padding:8px 22px 0}
.header .header-in{max-width:1364px;margin:0 auto;height:70px;padding:0 30px 0 56px;display:flex;align-items:center;flex-wrap:nowrap;gap:0;background:rgba(255,255,255,.94);border:1px solid #e8eef7;border-radius:36px;box-shadow:0 8px 28px rgba(30,70,140,.08);backdrop-filter:saturate(1.4) blur(8px)}
.logo{display:flex;align-items:center;gap:10px;flex:none;color:var(--ink)}
.logo .ico{width:38px;height:38px}
.logo-t{font-size:27px;font-weight:700;letter-spacing:-.6px;line-height:1;color:var(--ink)}
.logo-t i{font-style:normal;color:var(--pink)}
.nav{flex:1;display:flex;justify-content:flex-start;margin-left:64px;min-width:0}
.nav .nav-list{display:flex;gap:0;list-style:none;margin:0;padding:0}
.nav .nav-list a,.nav>a{position:relative;display:block;padding:0 17px;line-height:70px;font-size:16px;font-weight:500;color:#1f2d4d;border-radius:0;background:transparent}
.nav .nav-list a:hover{background:transparent;color:var(--pink)}
.nav .nav-list .current-menu-item>a,.nav .nav-list .current_page_item>a{color:var(--pink);background:transparent}
.nav .nav-list .current-menu-item>a::after,.nav .nav-list .current_page_item>a::after{content:"";position:absolute;left:17px;right:17px;bottom:7px;height:2px;border-radius:2px;background:var(--pink)}
.hdr-r{display:flex;align-items:center;gap:10px;flex:none}
.hdr-search{width:55px;height:52px;display:grid;place-items:center;border-radius:12px;border:1px solid #e1e9f5;background:#f5f8fd;color:var(--ink)}
.hdr-search:hover{border-color:var(--pink);color:var(--pink)}
.hdr-search .ico{width:21px;height:21px}
.hdr-cta{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border-radius:12px;background:var(--blue-g);color:#fff!important;font-size:16px;font-weight:600;box-shadow:0 8px 18px rgba(26,109,255,.28);white-space:nowrap}
.hdr-cta:hover{filter:brightness(1.06)}
.hdr-cta .ico{width:22px;height:22px}
.nav-toggle{display:none}

/* ---- footer ---- */
.footer{background:#fbfdff;border-top:1px solid #e9eff8;margin-top:0}
.footer .ft{max-width:1364px;margin:0 auto;padding:30px 40px 0}
.ft-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:30px}
.ft-brand{display:flex;align-items:center;gap:14px;color:var(--ink)}
.ft-brand .ico{width:48px;height:48px;flex:none}
.ft-brand b{display:block;font-size:29px;line-height:1.1;font-weight:700;letter-spacing:-.6px}
.ft-brand b i{font-style:normal;color:var(--pink)}
.ft-brand small{display:block;margin-top:4px;font-size:13.5px;line-height:1.3;color:var(--muted);white-space:nowrap}
.ft-links{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.ft-links li{display:flex;align-items:center}
.ft-links li+li::before{content:"";width:1px;height:16px;background:#cfd9e8;margin:0 24px}
.ft-links a{font-size:16px;font-weight:500;color:#14213d;white-space:nowrap}
.ft-links a:hover{color:var(--pink)}
.ft-soc{display:flex;gap:18px;align-items:center}
.ft-soc a{display:grid;place-items:center;width:36px;height:36px;background:none!important;border-radius:0;color:inherit}
.ft-soc a:hover{transform:translateY(-2px)}
.ft-soc .ico{width:34px;height:34px}
.ft-copy{margin:26px -40px 0;padding:24px 40px 22px;text-align:center;font-size:18px;color:#5d6c88;border-top:1px solid #edf2f9;background:#fff}
.ft-info{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px;margin:0 -40px;padding:0 40px 22px;background:#fff;border:0;border-radius:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.ft-info b{color:var(--ink);font-weight:600}

@media(max-width:1020px){
  .header{padding:6px 10px 0}
  .header .header-in{padding:0 12px 0 18px;height:62px;border-radius:30px}
  .nav{display:none}
  .nav.open{display:flex;position:absolute;left:10px;right:10px;top:72px;margin:0;padding:8px;background:#fff;border:1px solid var(--bd);border-radius:18px;box-shadow:0 14px 34px rgba(30,70,140,.16)}
  .nav.open .nav-list{flex-direction:column;width:100%}
  .nav.open .nav-list a{line-height:46px}
  .nav.open .nav-list .current-menu-item>a::after,.nav.open .nav-list .current_page_item>a::after{display:none}
  .hdr-r{margin-left:auto}
  .hdr-cta{display:none}
  .nav-toggle{display:flex;order:3;margin-left:8px}
  .ft-row{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:18px}
  .ft-links li+li::before{margin:0 14px}
  .ft-brand small{white-space:normal}
}
@media(max-width:640px){
  .logo-t{font-size:22px}.logo .ico{width:32px;height:32px}
  .footer .ft{padding:22px 8px 0}
  .ft-copy,.ft-info{margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px}
  .ft-links{gap:6px 0}
  .ft-links a{font-size:15px}
  .ft-copy{font-size:15px;padding-top:18px}
}