/* =========================================
   VN168 Site UI - Clean & Maintainable CSS
   ========================================= */

/* ---------- Tokens ---------- */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e6eef5;
  --shadow:0 10px 30px rgba(2, 6, 23, .08);

  --pri:#2563eb;
  --pri2:#1d4ed8;

  --radius:16px;
  --radius2:22px;

  --container:1160px;

  /* topbar sizing */
  --topbar-h:70px;
  --topbar-h-md:60px;
  --topbar-h-sm:56px;

  /* logo sizing */
  --logo-h:40px;
  --logo-h-md:34px;
  --logo-h-sm:32px;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body.site{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, #f8fafc 0%, var(--bg) 100%);
}
a{ color:inherit; text-decoration:none; }
.muted{ color:var(--muted); }

/* helpers */
.mt8{ margin-top:8px; }
.mt12{ margin-top:12px; }
.mt16{ margin-top:16px; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* typography */
.h1{ font-size:36px; line-height:1.1; margin:0 0 10px; letter-spacing:-.02em; }
.h2{ font-size:24px; margin:0 0 6px; letter-spacing:-.01em; }
.h3{ font-size:18px; margin:10px 0 6px; }
.lead{ font-size:16px; color:var(--muted); margin:0 0 16px; }

/* layout */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(12px, 2vw, 22px);
}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:500;
  background:rgba(248, 250, 252, .75);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(230, 238, 245, .7);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--topbar-h);
  gap:12px;
}
.topbar, .topbar * { pointer-events:auto; } /* tránh lớp phủ chặn click */

.brand{ display:flex; align-items:center; gap:10px; }
.brand-logo{
  height:var(--logo-h);
  width:auto;
  display:block;
  object-fit:contain;
}

/* nếu bạn vẫn dùng mark/text ở trang khác, giữ lại */
.brand-mark{
  width:34px; height:34px; border-radius:12px;
  background: radial-gradient(80% 80% at 30% 20%, #60a5fa 0%, #2563eb 60%, #1e40af 100%);
  box-shadow: 0 12px 24px rgba(37, 99, 235, .25);
}
.brand-mark.sm{ width:28px; height:28px; border-radius:10px; }
.brand-text{ font-weight:800; letter-spacing:-.02em; }
.brand-sub{ font-size:12px; color:var(--muted); margin-left:2px; }

.nav{ display:flex; align-items:center; gap:8px; }
.nav-link{
  padding:10px 12px;
  border-radius:12px;
  color:rgba(15,23,42,.86);
}
.nav-link:hover{ background:rgba(37,99,235,.08); }
.nav-link.is-active{
  background:rgba(37,99,235,.12);
  color:var(--pri2);
  font-weight:600;
}

.topbar-actions{ display:flex; align-items:center; gap:10px; }

/* hamburger */
.iconbtn{
  display:none;
  width:40px; height:40px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  cursor:pointer;
}
.iconbtn-bars{
  display:block;
  width:18px; height:2px; margin:0 auto;
  background:var(--text);
  position:relative;
}
.iconbtn-bars::before,.iconbtn-bars::after{
  content:"";
  position:absolute; left:0; width:18px; height:2px; background:var(--text);
}
.iconbtn-bars::before{ top:-6px; }
.iconbtn-bars::after{ top:6px; }

/* ---------- User dropdown ---------- */
.usernav{ position:relative; }
.usernav-btn{ user-select:none; }

.usernav-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;

  min-width:200px;
  z-index:9999;

  display:none;
  pointer-events:auto;

  background:#fff;
  border:1px solid rgba(230,238,245,.95);
  border-radius:16px;
  box-shadow: 0 18px 42px rgba(2,6,23,.12);
  padding:6px;
}
.usernav.is-open .usernav-menu{ display:block; }

.usernav-item{
  display:flex;
  align-items:center;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  font-weight:600;
  color:rgba(15,23,42,.9);
  cursor:pointer;
  background:transparent;
  border:0;
  text-align:left;
}
.usernav-item:hover{ background:rgba(37,99,235,.08); }
.usernav-item.danger{ color:#dc2626; }
.usernav-item.danger:hover{ background:rgba(220,38,38,.08); }

/* ---------- Mobile nav ---------- */
.mobile-nav{
  display:none;
  border-top:1px solid var(--line);
  background:#fff;
}
.mobile-nav.is-open{ display:block; }

/* NOTE: container đã padding 2 bên => mobile inner không padding trái/phải */
.mobile-nav-inner{
  padding:12px 0 16px;
  display:flex; flex-direction:column; gap:6px;
}

.m-link{
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(230,238,245,.8);
  background:#fff;
}
.m-link.is-active{
  border-color:rgba(37,99,235,.35);
  background:rgba(37,99,235,.08);
  color:var(--pri2);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid transparent;
  cursor:pointer;
  font-weight:600;
  gap:8px;
}
.btn-primary{
  background:linear-gradient(180deg, var(--pri) 0%, var(--pri2) 100%);
  color:#fff;
  box-shadow: 0 14px 26px rgba(37,99,235,.22);
}
.btn-primary:hover{ filter:brightness(1.02); }
.btn-ghost{
  background:#fff;
  border-color:var(--line);
  color:rgba(15,23,42,.9);
}
.btn-ghost:hover{ border-color:#cfe0ee; }

/* ---------- Main/Sections ---------- */
.site-main{ padding-bottom:60px; }
.section{ padding:36px 0; }
.section.alt{
  background:rgba(255,255,255,.65);
  border-top:1px solid rgba(230,238,245,.9);
  border-bottom:1px solid rgba(230,238,245,.9);
}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; margin-bottom:16px;
}
.link{ color:var(--pri2); font-weight:600; }

/* ---------- Hero ---------- */
.hero{ padding:30px 0 10px; }
.hero-inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:stretch;
}
.kicker{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(37,99,235,.10);
  color:var(--pri2);
  font-weight:700;
  font-size:12px;
  margin-bottom:12px;
}
.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.hero-metrics{ display:flex; gap:10px; flex-wrap:wrap; }

.metric{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px 12px;
  min-width:140px;
}
.metric-num{ font-weight:800; color:var(--pri2); font-size:18px; }
.metric-label{ color:var(--muted); font-size:13px; }

/* ---------- Pagehead/Toolbar ---------- */
.pagehead{ padding:24px 0 10px; }
.pagehead-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* ---------- Cards ---------- */
.card{
  background:rgba(255,255,255,.85);
  border:1px solid rgba(230,238,245,.95);
  border-radius:var(--radius2);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card-lg{ border-radius:24px; }
.card-hover{ transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.card-hover:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,.25);
  box-shadow: 0 16px 40px rgba(2, 6, 23, .10);
}
.card-hd{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(230,238,245,.85);
}
.card-title{ font-weight:800; letter-spacing:-.01em; }
.card-bd{ padding:16px; }

.badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  color:rgba(15,23,42,.8);
  font-weight:700;
}
.pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(37,99,235,.10);
  color:var(--pri2);
  font-weight:800;
}
.pill.sm{ padding:4px 8px; font-size:11px; }

/* ---------- Grid ---------- */
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.thumb{ border-bottom:1px solid rgba(230,238,245,.65); }

/* ---------- Meta ---------- */
.meta{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; }
.sep{ color:#cbd5e1; }
.dot{ width:7px; height:7px; background:rgba(37,99,235,.55); border-radius:50%; }

/* ---------- Forms ---------- */
.form{ display:flex; flex-direction:column; gap:12px; }
.field label{ display:block; font-weight:700; font-size:13px; margin-bottom:6px; color:rgba(15,23,42,.85); }
.control{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(230,238,245,.95);
  background:#fff;
  outline:none;
}
.control:focus{ border-color: rgba(37,99,235,.45); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }

.input{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(230,238,245,.95);
  background:#fff;
}
.input input{ border:0; outline:none; width:220px; font:inherit; }
.input-ic{ color:var(--muted); }

.select{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(230,238,245,.95);
  background:#fff;
  font:inherit;
}

/* ---------- Lists/Steps/Quote/Chips ---------- */
.list{ display:flex; flex-direction:column; gap:10px; }
.list-row{ display:flex; align-items:center; gap:10px; }
.check{
  width:24px; height:24px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(37,99,235,.10); color:var(--pri2);
  font-weight:900;
}

.steps{ display:flex; flex-direction:column; gap:10px; }
.step{ display:flex; gap:12px; align-items:flex-start; }
.step-no{
  width:30px; height:30px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(37,99,235,.12); color:var(--pri2);
  font-weight:900;
}

.quote{
  border:1px solid rgba(230,238,245,.95);
  border-radius:18px;
  padding:14px;
  background:#fff;
}
.quote-foot{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.avatar{ width:34px; height:34px; border-radius:14px; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(230,238,245,.95);
  background:#fff;
  color:rgba(15,23,42,.8);
  font-weight:600;
}

/* ---------- Skeleton ---------- */
.skeleton{
  background: linear-gradient(90deg, rgba(148,163,184,.18) 0%, rgba(148,163,184,.10) 50%, rgba(148,163,184,.18) 100%);
  border-radius:14px;
  animation: shimmer 1.2s infinite linear;
}
@keyframes shimmer{
  0%{ background-position: 0 0; }
  100%{ background-position: 600px 0; }
}
.h240{ height:240px; }
.h140{ height:140px; }
.h120{ height:120px; }
.h96{ height:96px; }
.h48{ height:48px; }
.h20{ height:20px; }
.h16{ height:16px; }
.h14{ height:14px; }
.w50{ width:50%; }
.w60{ width:60%; }
.w70{ width:70%; }
.w80{ width:80%; }
.w90{ width:90%; }
.w100{ width:100%; }

/* ---------- Pagination ---------- */
.pagination{ display:flex; gap:8px; justify-content:center; margin-top:22px; }
.btn.is-active{
  border-color: rgba(37,99,235,.35);
  background: rgba(37,99,235,.08);
  color: var(--pri2);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .grid3{ grid-template-columns: 1fr 1fr; }

  .nav{ display:none; }
  .iconbtn{ display:inline-flex; align-items:center; justify-content:center; }

  .topbar-inner{ height:var(--topbar-h-md); }
  .topbar-actions{ gap:8px; }

  .brand-logo{ height:var(--logo-h-md); max-height:var(--logo-h-md); }

  .btn{ padding:8px 10px; border-radius:12px; font-size:13px; }
  .iconbtn{ width:38px; height:38px; border-radius:12px; }

  /* dropdown tránh tràn */
  .usernav-menu{ max-width: calc(100vw - 24px); }
}

@media (max-width: 620px){
  .grid2, .grid3{ grid-template-columns: 1fr; }
  .input input{ width:160px; }

  .topbar-inner{ height:var(--topbar-h-sm); }
  .brand-logo{ height:var(--logo-h-sm); max-height:var(--logo-h-sm); }

  /* tuỳ chọn: ẩn CTA để gọn (bỏ nếu không muốn) */
  .btn-primary{ display:none; }

  /* dropdown full width đẹp */
  .usernav-menu{
    width: calc(100vw - 24px);
    right:12px;
  }
}
/* Footer logo block */
.vn-fbrand2{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.vn-flogo2{
  flex:0 0 auto;
  width:64px;
  height:64px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}

.vn-flogoimg2{
  width:100%;
  height:100%;
  object-fit:contain; /* nếu logo có nền trong suốt sẽ đẹp */
  display:block;
  padding:8px;
}

/* Fallback khi chưa có ảnh logo */
.vn-fmark2-fallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:18px;
  color:#0f172a;
  background:linear-gradient(135deg,#eaf2ff,#dbeafe);
  border-radius:14px;
}

/* chữ thương hiệu chiếm phần còn lại */
.vn-fbrandtext2{
  min-width:0;
  flex:1;
}

/* Mobile */
@media (max-width: 767px){
  .vn-flogo2{
    width:56px;
    height:56px;
    border-radius:12px;
  }
  .vn-flogoimg2{
    padding:7px;
  }
}
/* ================================
   Sticky Header - Always Visible
   chỉ mờ khi scroll, không biến mất
   ================================ */

/* đảm bảo header luôn nổi trên content */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;                 /* cao hơn content */
  background: rgba(248,250,252,.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .2s ease, backdrop-filter .2s ease, box-shadow .2s ease;
  will-change: background, backdrop-filter;
}

/* hiệu ứng khi trang bắt đầu scroll (cần JS thêm class .is-scrolled) */
.topbar.is-scrolled{
  background: rgba(248,250,252,.92);   /* mờ đậm hơn chút */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px rgba(2,6,23,.10);
}