:root{
  --nen:#f6f8fa; --nen-2:#eef2f6; --trang:#fff; --navy:#0f2a4a; --navy-2:#1d3d64; --chu:#16202c; --chu-2:#3b4756; --nhat:#6b7685;
  --do:#b4232f; --do-2:#d24a52; --xanh:#2f7f86; --vien:#dde3ea;
  --serif:"Source Serif 4",Georgia,serif; --sans:"Be Vietnam Pro",system-ui,sans-serif;
  --bo:18px; --bong:0 24px 60px -34px rgba(15,42,74,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--sans);color:var(--chu);background:var(--nen);line-height:1.7;font-size:16.5px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.hep{max-width:760px;margin:0 auto;padding:0 28px}

/* header */
.dau{position:sticky;top:0;z-index:40;background:rgba(246,248,250,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:.3s}
.dau.cuon{border-color:var(--vien);box-shadow:0 10px 30px -24px rgba(15,42,74,.5)}
.dau .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.ten{display:flex;align-items:center;gap:12px;line-height:1.15}
.ten .logo{width:40px;height:40px;border-radius:12px;background:var(--navy);display:grid;place-items:center;flex:none}
.ten .logo svg{width:24px;height:24px}
.ten b{font-family:var(--serif);font-size:18px;font-weight:600;display:block}
.ten small{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--nhat)}
.menu{display:flex;gap:30px;font-size:15px;font-weight:500;color:var(--chu-2)}
.menu a{position:relative;padding:6px 0}
.menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--do);border-radius:2px;transition:.3s}
.menu a:hover::after,.menu a.on::after{width:100%}
.menu a.on{color:var(--navy)}

/* common */
.nhan{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--do)}
.nhan::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(180,35,47,.15)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--navy)}
h2{font-size:clamp(30px,4vw,44px);margin:14px 0 16px}
h2 em,h1 em{font-style:italic;font-weight:500;color:var(--do)}
.phu{color:var(--nhat);font-size:17.5px}
section{padding:104px 0}
.nut{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;font-weight:600;font-size:15px;border:1.5px solid var(--navy);color:var(--navy);transition:.25s;white-space:nowrap}
.nut:hover{background:var(--navy);color:#fff}
.nut.dam{background:var(--navy);color:#fff}
.nut.dam:hover{background:var(--navy-2)}
.nut.do{background:var(--do);border-color:var(--do);color:#fff}
.nut.do:hover{background:#951b26}
.nut svg{width:18px;height:18px}

/* footer */
.cuoi{background:var(--navy);color:#b8c4d3;padding:70px 0 40px;font-size:14.5px}
.cuoi .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.cuoi h4{font-family:var(--serif);color:#fff;font-weight:600;font-size:17px;margin-bottom:14px}
.cuoi li{list-style:none;margin-bottom:8px}
.cuoi a:hover{color:#fff}
.cuoi .ban{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:22px;margin-top:10px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(9,20,36,.94);display:none;align-items:center;justify-content:center;padding:56px 70px}
.lb.mo{display:flex}
.lb img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb button{position:absolute;color:#e8eef5;width:48px;height:48px;font-size:28px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.1)}
.lb .x{top:14px;right:14px}.lb .tr{left:14px;top:50%;transform:translateY(-50%)}.lb .ph{right:14px;top:50%;transform:translateY(-50%)}
.lb p{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:#c9d4e2;font-size:14px;padding:0 70px}

.rv{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s ease}
.rv.vao{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

@media (max-width:900px){
  section{padding:78px 0}
  .ten small{display:none}
  .menu{gap:18px;font-size:14px}
  .cuoi .wrap{grid-template-columns:1fr 1fr}.cuoi .wrap>div:first-child{grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap,.hep{padding:0 16px}
  .dau .wrap{height:auto;padding-top:8px;padding-bottom:8px;gap:12px}
  .ten b{display:none}.ten .logo{width:40px;height:40px}
  .menu{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:2px 8px;font-size:14px;text-align:center}
  .menu a{padding:5px 0;white-space:nowrap}
  .cuoi .wrap{grid-template-columns:1fr}
  .lb{padding:50px 8px 70px}.lb .tr,.lb .ph{top:auto;bottom:12px;transform:none}
}

/* bí danh để dùng chung khung trang lưu trữ */
:root{--muc:var(--navy);--muc-2:var(--chu-2);--giay:var(--nen);--giay-2:var(--nen-2);--giay-3:#e3e9f0;--son:var(--do);--vang:#9a7b3c;--but:var(--serif)}