/* argent.vn — lớp phủ CHỈ của argent.vn, nạp SAU style.css (style.css vẫn là bản chung với verix.vn).
   Đổi từ nền tối sang nền sáng theo ARGENT_website_restructure_proposal.md §7: nền trắng / xám rất nhạt,
   màu nhấn xanh công nghệ, khối tối (navy) chỉ còn ở thẻ sản phẩm VERIX — để phần tối của logo Argent
   (kim loại bạc–than) nổi lên thay vì chìm xuống nền. */

:root {
  --accent: #326fe8;
  --accent-hover: #2558c2;
  --accent-light: #8cb4ff;
  --ink: #0f1626;
  --ink-2: #3a4658;
  --ink-3: #5b6678;
  --paper-2: #f1f5f9;
  --line: #dbe2ec;
  --navy-0: #080d18;
  --navy-1: #101827;
}

:focus-visible { outline-color: var(--accent); }
::selection { background: rgba(50, 111, 232, .18); }

/* ---------- Thanh trên: luôn sáng ---------- */
.topbar, .js .topbar.is-top, .topbar.is-solid {
  color: var(--ink);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.js .topbar.is-top { background: rgba(255, 255, 255, 0); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
.topbar.is-solid { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav a { opacity: .8; }
.nav a:hover { opacity: 1; color: var(--accent); }
.brand img { height: 30px; }
.brand-name { letter-spacing: .3em; }
.menu-panel { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px rgba(15, 22, 38, .08); }
.menu-panel a { border-bottom-color: var(--line); }

.btn { border-radius: 6px; }
.btn-line { border-color: #b9c4d3; color: var(--ink); background: #fff; }
.btn-line:hover { border-color: var(--ink); background: #fff; }
.bar-end .btn { display: inline-flex; }
@media (max-width: 1040px) { .bar-end .btn { display: none; } }
@media (max-width: 860px) { .nav { display: none; } .menu { display: block; } }

/* ---------- Mở đầu ---------- */
.a-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--bar-h) + clamp(40px, 8vw, 110px)) 0 clamp(64px, 9vw, 120px);
  background: linear-gradient(180deg, #fff 0%, var(--paper-2) 100%);
}
.a-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 22, 38, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 22, 38, .055) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 65% 75% at 78% 45%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 65% 75% at 78% 45%, #000 0%, transparent 100%);
}
.a-hero .wrap { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }
.a-hero .eyebrow { color: var(--ink-3); }
.a-hero h1 { margin-top: 24px; font-size: clamp(31px, 4.3vw, 64px); line-height: 1.1; letter-spacing: -.03em; font-weight: 500; }
.a-hero h1 .l { display: block; }
.a-hero h1 .l + .l {
  background: linear-gradient(100deg, #1f4fc4 0%, #326fe8 55%, #6b9bf2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.js .a-hero h1 .l { animation: word-in 1s var(--ease) both; animation-delay: calc(120ms + var(--i, 0) * 160ms); }
.a-hero .lead { margin-top: 28px; max-width: 34em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.65; color: var(--ink-2); }
.a-hero .actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }

.a-mark { position: relative; justify-self: center; width: min(100%, 460px); }
.a-mark::before {
  content: ""; position: absolute; inset: -18% -22%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 72%);
}
.a-mark img { width: 100%; height: auto; filter: drop-shadow(0 28px 36px rgba(15, 22, 38, .22)); animation: float 9s ease-in-out infinite alternate; }
@media (max-width: 860px) {
  .a-hero .wrap { grid-template-columns: 1fr; gap: 28px; }
  .a-mark { order: -1; justify-self: start; width: clamp(130px, 36vw, 210px); }
}

/* ---------- Khối ---------- */
.sec { padding: clamp(72px, 9vw, 136px) 0; }
.head h2, .h2 { max-width: 22ch; }
.label { color: var(--accent); }

.items.cols-4 { grid-template-columns: repeat(4, 1fr); }
.items li { padding: 26px 0 30px; }
.items .n { color: var(--accent); font-weight: 500; }
.items h3 { font-size: 21px; }
@media (max-width: 1040px) { .items.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .items.cols-4 { grid-template-columns: 1fr; } }

/* thẻ sản phẩm VERIX — khối tối duy nhất */
.a-card {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 64px);
  padding: clamp(28px, 4vw, 56px); border-radius: 14px;
  color: #eef2f6; background: var(--navy-1);
  background-image: radial-gradient(60% 90% at 100% 0%, rgba(50, 111, 232, .28), transparent 70%);
  box-shadow: 0 30px 60px rgba(15, 22, 38, .16);
}
.a-card-id { display: flex; align-items: center; gap: 16px; }
.a-card-id img { width: 86px; height: auto; }
.a-card-id strong { font-size: 28px; font-weight: 600; letter-spacing: .24em; }
.a-card-kind { margin-top: 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #9fb0c6; }
.a-card h3 { margin-top: 28px; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; max-width: 18ch; }
.a-card p { margin-top: 16px; color: #c3cedc; font-size: 17px; line-height: 1.65; max-width: 34em; }
.a-card .btn { margin-top: 30px; }
.a-card-side { align-self: center; }
.a-card-side h4 { margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #9fb0c6; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 9px 16px; font-size: 15px; border: 1px solid rgba(196, 212, 230, .28); border-radius: 999px; color: #e4ebf3; background: rgba(255, 255, 255, .04); }
@media (max-width: 860px) { .a-card { grid-template-columns: 1fr; } }

/* tầm nhìn / sứ mệnh */
.vm { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vm > div { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.vm h3 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.vm p { margin-top: 14px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--ink); }
@media (max-width: 760px) { .vm { grid-template-columns: 1fr; } }
.sec-tint .items li { border-top-color: #c9d3e0; }

/* kêu gọi liên hệ */
.a-cta { background: var(--navy-0); color: #eef2f6; text-align: left; }
.a-cta .label { color: #8cb4ff; }
.a-cta .h2 { max-width: 20ch; }
.a-cta .sub { color: #c3cedc; }
.a-cta .actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.a-cta .btn-line { background: transparent; color: #eef2f6; border-color: rgba(238, 242, 246, .4); }
.a-cta .btn-line:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }

.contact .mail { font-size: clamp(26px, 4.4vw, 56px); margin-top: 32px; }
.contact-list { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 760px; }
.contact-list a { display: block; padding: 20px 22px; text-decoration: none; border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.contact-list a:hover { border-color: var(--accent); box-shadow: 0 10px 24px rgba(50, 111, 232, .12); }
.contact-list strong { display: block; font-weight: 500; font-size: 18px; }
.contact-list span { display: block; margin-top: 6px; font-size: 15px; color: var(--ink-3); }
@media (max-width: 600px) { .contact-list { grid-template-columns: 1fr; } }

/* ---------- Chân trang ---------- */
.footer { background: #fff; }
.foot-brand img { height: 84px; width: auto; }
.foot-brand p { margin-top: 14px; font-size: 15px; font-weight: 500; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .a-mark img { animation: none; }
  .js .a-hero h1 .l { animation: none; }
}

/* ---------- Nhiều trang (2026-10-11) ---------- */
.nav { gap: 28px; }
.nav a[aria-current="page"], .menu-panel a[aria-current="page"] { opacity: 1; color: var(--accent); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }

.a-hero.is-page { padding-bottom: clamp(48px, 6vw, 88px); }
.a-hero.is-page .wrap { grid-template-columns: 1fr; }
.a-hero.is-page h1 { max-width: 26ch; font-size: clamp(30px, 4.2vw, 60px); }
.a-hero.is-page::before { -webkit-mask-image: radial-gradient(ellipse 60% 90% at 85% 30%, #000 0%, transparent 100%); mask-image: radial-gradient(ellipse 60% 90% at 85% 30%, #000 0%, transparent 100%); }
.sec-first { padding-top: clamp(48px, 6vw, 88px); }
.more { margin-top: clamp(32px, 4vw, 48px); }
.head + .more { margin-left: calc(25% + 12px); }
@media (max-width: 760px) { .head + .more { margin-left: 0; } }

.a-card-kind { margin: 0 0 14px; }
.a-card-side h4.gap { margin-top: 28px; }
.chips li.spec { border-color: rgba(140, 180, 255, .6); color: #fff; background: rgba(50, 111, 232, .22); }

.vm h2 { margin-top: 14px; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -.02em; }
.vm .label { padding-top: 0; }
.vm > div p:last-child { margin-top: 16px; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.foot-desc { font-weight: 400 !important; color: var(--ink-2) !important; max-width: 28em; }
.head.contact .more { margin-top: 32px; }