/* ============================================================================
   VECOM · "ON THE ROAD" — hệ thiết kế điện ảnh (concept B)
   Ảnh full-bleed phủ toàn khung + LỚP GRADE ẤM thống nhất + hạt phim + chữ hiển
   thị rất lớn nằm TRONG ảnh + cuộn parallax. Bảng màu ẤM (không xanh công nghệ):
   giấy kem, mực nâu đậm, cam tín hiệu làm điểm nhấn.

   Mẹo để ảnh kho KHÔNG bị "trông như ảnh kho": một lớp grade thống nhất phủ mọi
   ảnh + hạt phim + kiểu chữ tự tin -> mọi ảnh thành cùng một cuốn phim.
   Tất cả nằm dưới `.v2` nên KHÔNG đụng trang cũ. Thiết kế GỐC cho VECOM.
   ========================================================================== */
.v2 {
  --ink: #0B1022;
  --ink-2: #141B33;
  --paper: #FFFFFF;
  --paper-2: #F2F5FC;
  --line: #E3E7F1;
  --line-d: rgba(228, 234, 248, .2);
  --mute: #5C6274;
  --mute-d: rgba(233, 238, 250, .74);
  --amber: #3346DD;
  --amber-deep: #1E2A8C;

  background: var(--paper);
  color: var(--ink);
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px; line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.v2 * { box-sizing: border-box; }
.v2 ::selection { background: var(--amber); color: #fff; }

/* Hạt phim mờ phủ toàn trang — chất "điện ảnh" cho ảnh kho */
.v2::after {
  content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Bố cục ──────────────────────────────────────────────────────────────── */
.v2 .r-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 68px); }
.v2 .r-sec { padding: clamp(76px, 12vw, 160px) 0; }
.v2 .r-paper { background: var(--paper); }
.v2 .r-paper-2 { background: var(--paper-2); }
.v2 .r-dark { background: var(--ink); color: #fff; }

/* ── Nhãn "tài liệu" (mono) ──────────────────────────────────────────────── */
.v2 .cap {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .74rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--amber);
  display: inline-flex; align-items: center; gap: 12px;
}
.v2 .cap.on-photo { color: #fff; }
.v2 .cap .ix { color: inherit; opacity: .7; }
.v2 .cap::before { content: ""; width: 30px; height: 1px; background: currentColor; opacity: .55; }
.v2 .r-dark .cap, .v2 .cap.on-photo { color: #B9C7FF; }

/* ── Kiểu chữ ────────────────────────────────────────────────────────────── */
.v2 .d1 { font-weight: 800; letter-spacing: -.04em; line-height: .95; font-size: clamp(3rem, 9vw, 8rem); margin: 0; }
.v2 .d2 { font-weight: 800; letter-spacing: -.035em; line-height: .98; font-size: clamp(2.2rem, 5.5vw, 4.6rem); margin: 0; }
.v2 .d3 { font-weight: 700; letter-spacing: -.02em; line-height: 1.08; font-size: clamp(1.4rem, 2.4vw, 2.1rem); margin: 0; }
.v2 .lead { font-size: clamp(1.08rem, 1.55vw, 1.4rem); line-height: 1.55; color: var(--mute); font-weight: 400; margin: 0; }
.v2 .r-dark .lead, .v2 .on-photo-sub { color: var(--mute-d); }
.v2 .em { color: var(--amber); }
.v2 .r-dark .em, .v2 .on-photo .em { color: #9DB4FF; }

/* ── Nút ─────────────────────────────────────────────────────────────────── */
.v2 .btn { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; padding: 15px 27px; border-radius: 2px;
  border: 1px solid transparent; font-family: inherit; font-size: .96rem; font-weight: 600; letter-spacing: -.01em; text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.v2 .btn .arr { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.v2 .btn:hover .arr { transform: translateX(4px); }
.v2 .btn-amber { background: var(--amber); color: #fff; }
.v2 .btn-amber:hover { background: var(--amber-deep); transform: translateY(-2px); }
.v2 .btn-shopee { background: #EE4D2D; color: #fff; box-shadow: 0 10px 26px -12px rgba(238,77,45,.7); }
.v2 .btn-shopee:hover { background: #D8431F; transform: translateY(-2px); }
.v2 .btn-cream { background: #F5EFE6; color: var(--ink); }
.v2 .btn-cream:hover { transform: translateY(-2px); }
.v2 .btn-ink { background: var(--ink); color: #fff; }
.v2 .btn-ink:hover { transform: translateY(-2px); }
.v2 .btn-ghost { border-color: currentColor; color: inherit; background: transparent; }
.v2 .btn-ghost:hover { background: rgba(255,255,255,.1); }
.v2 .r-paper .btn-ghost:hover, .v2 .r-paper-2 .btn-ghost:hover { background: rgba(11,16,34,.05); }
.v2 .tlink { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 600; font-size: .95rem; border-bottom: 2px solid currentColor; padding-bottom: 3px; }
.v2 .tlink .arr { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.v2 .tlink:hover .arr { transform: translateX(4px); }

/* ══ HEADER ═════════════════════════════════════════════════════════════════ */
.v2 header.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; color: #fff;
  background: linear-gradient(180deg, rgba(6,10,26,.62) 0%, rgba(6,10,26,.28) 60%, rgba(6,10,26,0) 100%);
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.v2 header.nav .r-wrap { display: flex; align-items: center; gap: 22px; height: 76px; }
.v2 header.nav.is-stuck { background: rgba(9, 13, 30, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.v2 .r-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; margin-right: auto; }
.v2 .r-brand .mk { width: 34px; height: 34px; border-radius: 3px; background: var(--amber); display: grid; place-items: center; color: #fff; flex: none; }
.v2 .r-brand .mk svg { width: 19px; height: 19px; }
.v2 .r-brand b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.v2 .r-brand small { display: block; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; opacity: .75; margin-top: 3px; font-family: 'JetBrains Mono', monospace; }
/* Logo VECOM thật — đặt trên nền trắng bo góc để nổi rõ trên header tối */
.v2 .r-logo { display: block; height: 42px; width: auto; background: #fff; padding: 5px 11px; border-radius: 9px; box-shadow: 0 6px 18px -10px rgba(0,0,0,.5); }
@media (max-width: 600px) { .v2 .r-logo { height: 36px; padding: 4px 9px; } }
.v2 nav.primary { display: flex; align-items: center; gap: 26px; }
/* Ghi đè kiểu điều hướng của site.css cũ (viên nền trắng + chữ đen khi rê/chọn)
   — trên header tối, chỉ dùng độ mờ + gạch chân trắng, KHÔNG viên nền. */
.v2 nav.primary a,
.v2 nav.primary a:hover,
.v2 nav.primary a.active {
  background: transparent !important; color: #fff !important; border-radius: 0;
  text-decoration: none; font-size: .92rem; font-weight: 500; transition: opacity .2s ease;
}
.v2 nav.primary a { opacity: .82; }
.v2 nav.primary a:hover, .v2 nav.primary a.active { opacity: 1; }
.v2 nav.primary a::after { background: #fff !important; }
.v2 .r-nav-cta { display: flex; align-items: center; gap: 14px; }
.v2 .r-lang { color: inherit; text-decoration: none; font-size: .82rem; font-weight: 600; letter-spacing: .04em; opacity: .85; font-family: 'JetBrains Mono', monospace; }
.v2 .r-nav-btn { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; padding: 9px 18px; border-radius: 2px; font-size: .86rem; font-weight: 600; border: 1px solid currentColor; color: inherit; }
.v2 header.nav.is-stuck .r-nav-btn { background: var(--amber); border-color: var(--amber); color: #fff; }
.v2 .r-burger { display: none; }

/* ══ HERO ĐIỆN ẢNH ══════════════════════════════════════════════════════════ */
.v2 .cine-hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: #fff; overflow: hidden; }
.v2 .cine-hero .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1) contrast(1.02) brightness(1.02); }
/* Scrim gốc của hero — đã LÀM NHẸ hơn (ảnh xe bớt tối). Màu scrim rgba(8,12,30)
   gần trùng nền xanh #0e1836 của slide sản phẩm/bằng khen, nên giảm alpha gần
   như KHÔNG đổi hình sản phẩm/bằng khen, chỉ làm sáng ảnh xe (fit-cover). */
.v2 .cine-hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,12,30,.5) 0%, rgba(8,12,30,.29) 34%, rgba(8,12,30,.4) 62%, rgba(8,12,30,.78) 100%); }
/* Trình chiếu TOÀN KHUNG làm nền hero (thay ảnh tĩnh): các slide chồng nhau,
   mờ dần qua lại; lớp scrim (::after) phủ lên để chữ luôn đọc rõ kể cả khi slide
   là ảnh nền trắng (sản phẩm / bằng khen). */
.v2 .cine-hero .hero-bg { position: absolute; inset: 0; z-index: 0; }
.v2 .cine-hero .hslide { position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 1.1s ease; }
.v2 .cine-hero .hslide.on { opacity: 1; }
/* Ảnh xe (cảnh thật) -> phủ kín khung. */
.v2 .cine-hero .hslide.fit-cover { background-size: cover; }
/* Scrim đọc-chữ cho ảnh xe trong hero (GIỐNG các dải .scene): tối thêm phía
   trên-trái nơi đặt chữ, mờ dần xuống dưới (đáy đã tối sẵn nhờ scrim gốc).
   Chỉ áp cho fit-cover — KHÔNG đụng sản phẩm & bằng khen (fit-contain). */
.v2 .cine-hero .hslide.fit-cover::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,12,30,.27) 0%, rgba(8,12,30,.12) 44%, rgba(8,12,30,0) 70%),
    linear-gradient(180deg, rgba(8,12,30,.16) 0%, rgba(8,12,30,.08) 42%, rgba(8,12,30,0) 78%); }
/* Sản phẩm & bằng khen -> hiện TRỌN ẢNH (không cắt xén / không "zoom" quá),
   nhưng VẪN LÀ ẢNH NỀN toàn khung phía sau chữ, trên nền xanh thương hiệu.
   Chỉ chừa một chút lề trên để ảnh không bị thanh điều hướng cắt ngang. */
.v2 .cine-hero .hslide.fit-contain {
  background-size: contain;
  background-color: #0e1836;
  padding-top: clamp(64px, 9vh, 96px);
  background-origin: content-box;
}
.v2 .cine-hero .hero-dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3; display: flex; gap: 8px; justify-content: center; }
.v2 .cine-hero .hero-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.5); transition: background-color .2s ease, transform .2s ease; }
.v2 .cine-hero .hero-dots button.on { background: #fff; transform: scale(1.25); }
.v2 .cine-hero .r-wrap { position: relative; z-index: 2; padding-top: 120px; padding-bottom: clamp(40px, 7vh, 84px); }
.v2 .cine-hero .d1 { font-size: clamp(2.4rem, 6vw, 4.9rem); max-width: 20ch; margin-top: 20px; text-shadow: 0 2px 40px rgba(0,0,0,.4); }
.v2 .cine-hero .d1 .em { white-space: nowrap; }   /* giữ cụm nhấn mạnh "an toàn." không bị tách dòng */
.v2 .cine-hero .lead { color: rgba(236,240,250,.9); max-width: 46ch; margin-top: 24px; }
.v2 .cine-hero .cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.v2 .cine-hero .scrollcue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2; color: rgba(255,255,255,.7); font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.v2 .cine-hero .scrollcue::after { content: ""; width: 1px; height: 34px; background: linear-gradient(rgba(255,255,255,.7), transparent); animation: cueDrop 2s ease-in-out infinite; }
@keyframes cueDrop { 0%,100% { opacity: .3; transform: scaleY(.6); transform-origin: top } 50% { opacity: 1; transform: scaleY(1) } }
/* dải chỉ số cắt ngang đáy hero */
/* ⚠ minmax(0,1fr) chứ KHÔNG phải 1fr: "1fr" = minmax(auto,1fr) nên bề rộng cột
   phụ thuộc nội dung — khi số đang đếm lên (0 -> 50.000) mỗi lần thêm chữ số là
   các cột co giãn, làm cả hàng số "trườn" qua lại = đúng cảm giác "nhảy loạn
   xạ". minmax(0,1fr) khoá cột thành 4 phần bằng nhau, không đổi khi số thay đổi. */
.v2 .hero-stats { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.22); margin-top: 30px; padding-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
/* Cỡ chữ + bề rộng khối được chọn để chuỗi DÀI NHẤT ("50.000+" ≈ 4,32em) vẫn
   nằm gọn trong 1 cột (cột = (720 − 3×22)/4 = 163,5px; chữ ≈ 151,9px) — nhờ vậy
   số không bao giờ tràn sang cột bên cạnh trong lúc đếm. */
.v2 .hero-stats .s b { display: block; font-size: clamp(1.55rem, 2.7vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; }
/* Số liệu hero ĐẾM LÊN (0 -> số thật) khi trang đã tải xong; xem setupCounters.
   ⚠ Ẩn NGAY TỪ LẦN VẼ ĐẦU bằng CSS — lớp .js-motion do script nội tuyến trong
   <head> gắn TRƯỚC khi vẽ, nên quy tắc này có hiệu lực ngay khung hình đầu tiên.
   TUYỆT ĐỐI KHÔNG để JS ẩn sau khi đã vẽ: như vậy người xem kịp đọc "24+ /
   5.000+..." rồi cả hàng biến mất và quay lại từ 0 — chính là cảnh "số nhảy /
   kỳ lạ" đã bị phàn nàn. Với cách này số chỉ xuất hiện MỘT lần, đúng lúc đếm.
   ⚠ Lớp ẩn TỰ SÁNG LẠI (0%->88% mờ, 100% rõ, xong ở 3,6s): nếu JS hỏng giữa
   chừng, con số vẫn hiện ra — không bao giờ mất chữ. Mốc này đặt SAU lưới an
   toàn 2,5s của JS, và nhánh 2,5s chỉ "hiện thẳng số thật" (không đếm) nên dù
   hai mốc có đảo thứ tự vì máy giật thì cũng không sinh ra cú nhảy nào. */
.js-motion .v2 .hero-stats .s { animation: vhCuHold 3.6s ease both; }
@keyframes vhCuHold { 0%, 88% { opacity: 0; } 100% { opacity: 1; } }
/* JS gắn .vh-cu-go đúng lúc bắt đầu đếm -> bỏ ẩn TỨC THÌ, không hiệu ứng mờ:
   bản thân việc số chạy lên đã là hiệu ứng xuất hiện. (Cố ý không fade — nếu
   animation không chạy được, số sẽ kẹt trong suốt; "animation: none" thì không.) */
.js-motion .v2 .hero-stats.vh-cu-go .s { animation: none; opacity: 1; }
.v2 .hero-stats .s span { display: block; margin-top: 7px; font-size: .78rem; color: rgba(236,240,250,.72); font-family: 'JetBrains Mono', monospace; letter-spacing: .02em; }

/* ══ SCENE full-bleed (parallax CSS) ════════════════════════════════════════ */
.v2 .scene { position: relative; min-height: 92vh; display: grid; align-items: end; color: #fff;
  background-size: cover; background-position: center; }
@media (min-width: 900px) { .v2 .scene { background-attachment: fixed; } }
/* Lớp phủ (scrim) MẠNH HƠN cho các "ảnh nền có filter" (cảnh xe) để CHỮ luôn
   đọc rõ kể cả trên nền ảnh sáng: tối đều theo chiều dọc (không còn khoảng
   trong suốt ở giữa) + tối thêm phía trái nơi đặt chữ. Chỉ áp cho .scene —
   KHÔNG đụng tới sản phẩm & bằng khen (là slide fit-contain trong hero). */
.v2 .scene::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,12,30,.47) 0%, rgba(8,12,30,.24) 45%, rgba(8,12,30,0) 72%),
    linear-gradient(180deg, rgba(8,12,30,.31) 0%, rgba(8,12,30,.24) 38%, rgba(8,12,30,.35) 68%, rgba(8,12,30,.7) 100%); }
.v2 .scene .r-wrap { position: relative; z-index: 2; padding-top: 120px; padding-bottom: clamp(52px, 9vh, 120px); }
.v2 .scene .d2 { max-width: 18ch; margin-top: 18px; text-shadow: 0 2px 40px rgba(0,0,0,.35); }
.v2 .scene .lead { color: rgba(236,240,250,.9); max-width: 48ch; margin-top: 22px; }
.v2 .scene .scene-figures { margin-top: 30px; display: flex; gap: 40px; flex-wrap: wrap; }
.v2 .scene .scene-figures .fg b { display: block; font-size: clamp(1.6rem,2.6vw,2.4rem); font-weight: 800; letter-spacing: -.03em; }
.v2 .scene .scene-figures .fg span { display: block; font-size: .78rem; color: rgba(236,240,250,.72); font-family: 'JetBrains Mono', monospace; margin-top: 5px; }

/* ══ KHỐI CHỮ (giấy) ════════════════════════════════════════════════════════ */
.v2 .r-two { display: grid; grid-template-columns: minmax(0, 20ch) 1fr; gap: clamp(28px, 6vw, 90px); }
.v2 .statement .big { font-size: clamp(1.6rem, 3.2vw, 2.7rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.26; margin: 0; }
.v2 .statement .big b { font-weight: 800; }
.v2 .statement .sub { margin-top: 26px; max-width: 54ch; }
.v2 .head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(34px, 5vw, 60px); }
.v2 .head-row .d2 { max-width: 20ch; margin-top: 14px; }

/* ══ SẢN PHẨM ═══════════════════════════════════════════════════════════════ */
.v2 .feat { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(22px, 4vw, 60px); align-items: center; margin-bottom: 52px; }
.v2 .feat .img { position: relative; background: #EEF1F8; border-radius: 3px; aspect-ratio: 5/4; overflow: hidden; display: grid; place-items: center; }
.v2 .feat .img img { width: 78%; height: 78%; object-fit: contain; }
.v2 .feat .img .tag { position: absolute; left: 16px; top: 16px; font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 6px 11px; border-radius: 2px; }
.v2 .feat h3 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; margin: 6px 0 14px; }
.v2 .feat .spec { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.v2 .feat .spec .s { padding: 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.v2 .feat .spec .s:nth-child(2n) { border-right: 0; }
.v2 .feat .spec small { display: block; font-family: 'JetBrains Mono', monospace; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 5px; }
.v2 .feat .spec b { font-size: .92rem; font-weight: 600; }
.v2 .prodlist { border-top: 1px solid var(--line); }
.v2 .prod { display: grid; grid-template-columns: 48px 1.1fr 1.4fr 44px; gap: 22px; align-items: center; padding: 25px 6px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: padding .25s ease, background-color .25s ease; }
.v2 .prod:hover { background: rgba(51,70,221,.06); padding-left: 16px; padding-right: 16px; }
.v2 .prod .ix { font-family: 'JetBrains Mono', monospace; font-size: .82rem; color: var(--amber); }
.v2 .prod .nm { font-size: clamp(1.15rem, 1.9vw, 1.55rem); font-weight: 700; letter-spacing: -.02em; }
.v2 .prod .nm small { display: block; font-family: 'JetBrains Mono', monospace; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: 5px; }
.v2 .prod .ds { color: var(--mute); font-size: .95rem; }
.v2 .prod .go { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; flex: none; transition: background-color .2s, color .2s, border-color .2s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.v2 .prod:hover .go { background: var(--amber); border-color: var(--amber); color: #fff; transform: translateX(4px); }

/* ══ NỀN TẢNG / danh sách tính năng trên scene ═════════════════════════════ */
.v2 .featgrid { margin-top: 34px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.16); border-radius: 3px; overflow: hidden; }
.v2 .featgrid .f { background: rgba(9,13,30,.5); backdrop-filter: blur(3px); padding: 22px 24px; }
.v2 .featgrid .f .n { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: #9DB4FF; }
.v2 .featgrid .f b { display: block; margin: 10px 0 6px; font-size: 1.1rem; font-weight: 700; }
.v2 .featgrid .f span { color: rgba(236,240,250,.78); font-size: .9rem; }

/* ══ PHÁP LÝ (bảng) ════════════════════════════════════════════════════════ */
.v2 .reg { border-top: 2px solid var(--ink); }
.v2 .regrow { display: grid; grid-template-columns: 140px 1fr 150px; gap: 24px; align-items: baseline; padding: 24px 6px; border-bottom: 1px solid var(--line); }
.v2 .regrow .code { font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.03em; }
.v2 .regrow .code small { display: block; font-family: 'JetBrains Mono', monospace; font-size: .64rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-top: 6px; }
.v2 .regrow .txt { color: var(--ink); font-size: .98rem; max-width: 64ch; }
.v2 .regrow .st { justify-self: end; text-align: right; }
.v2 .regrow .st .ok { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .9rem; color: var(--amber-deep); }
.v2 .regrow .st .ok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.v2 .regrow .st small { display: block; font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--mute); margin-top: 5px; }

/* ══ DÒNG THỜI GIAN ════════════════════════════════════════════════════════ */
.v2 .timerow { display: grid; grid-template-columns: 160px 1fr; gap: clamp(20px, 4vw, 56px); padding: 30px 0; border-top: 1px solid var(--line); align-items: baseline; }
.v2 .timerow:first-child { border-top: 0; }
.v2 .timerow .yr { font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 900; letter-spacing: -.03em; color: var(--amber); line-height: 1; }
.v2 .timerow h4 { margin: 0 0 8px; font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: 700; letter-spacing: -.02em; }
.v2 .timerow p { margin: 0; color: var(--mute); max-width: 64ch; }
.v2 .timerow .tag { display: inline-block; margin-top: 12px; font-family: 'JetBrains Mono', monospace; font-size: .64rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--line); border-radius: 2px; padding: 4px 11px; }

/* ══ TIN TỨC ═══════════════════════════════════════════════════════════════ */
.v2 .newsgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.v2 .newscard { text-decoration: none; color: inherit; display: flex; flex-direction: column; border-top: 2px solid var(--ink); padding-top: 18px; }
.v2 .newscard .dt { font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
.v2 .newscard h4 { margin: 14px 0 10px; font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.v2 .newscard p { margin: 0; color: var(--mute); font-size: .93rem; flex: 1; }
.v2 .newscard .more { margin-top: 16px; font-size: .84rem; font-weight: 600; }
.v2 .newscard:hover h4 { color: var(--amber-deep); }

/* ══ CTA đóng trang trên ảnh ═══════════════════════════════════════════════ */
.v2 .cta-lines { margin-top: 46px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.16); border-radius: 3px; overflow: hidden; }
.v2 .cta-lines a { background: rgba(9,13,30,.55); backdrop-filter: blur(3px); padding: 22px 24px; text-decoration: none; color: #fff; transition: background-color .2s; }
.v2 .cta-lines a:hover { background: rgba(51,70,221,.55); }
.v2 .cta-lines small { display: block; font-family: 'JetBrains Mono', monospace; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(236,240,250,.7); }
.v2 .cta-lines b { display: block; margin-top: 8px; font-size: 1.12rem; font-weight: 700; }
.v2 .cta-lines span { display: block; margin-top: 3px; font-size: .82rem; color: rgba(236,240,250,.72); }

/* ══ FOOTER ════════════════════════════════════════════════════════════════ */
.v2 footer.r-foot { background: var(--ink); color: #fff; padding: clamp(60px,8vw,96px) 0 40px; }
.v2 .r-foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.v2 .r-foot .wordmark { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.v2 .r-foot .about { margin-top: 20px; color: var(--mute-d); max-width: 42ch; font-size: .92rem; }
.v2 .r-foot .addr { margin-top: 16px; color: var(--mute-d); font-size: .86rem; line-height: 1.7; }
.v2 .r-foot h5 { font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #9DB4FF; margin: 0 0 16px; font-weight: 500; }
.v2 .r-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.v2 .r-foot ul a { color: rgba(236,240,250,.86); text-decoration: none; font-size: .92rem; }
.v2 .r-foot ul a:hover { color: #fff; }
.v2 .r-foot-bottom { margin-top: clamp(44px,6vw,72px); padding-top: 24px; border-top: 1px solid var(--line-d); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; color: var(--mute-d); font-size: .82rem; }
.v2 .r-foot-bottom a { color: var(--mute-d); }
.v2 .r-foot-bottom a:hover { color: #fff; }

/* ── Hiện dần khi cuộn ────────────────────────────────────────────────────── */
.v2.js-motion [data-reveal] { opacity: 0; transform: translateY(28px); }
.v2.js-motion [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.22,.61,.36,1) var(--rd,0ms), transform .8s cubic-bezier(.22,.61,.36,1) var(--rd,0ms); }

/* ══ ĐÁP ỨNG ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .v2 .r-two { grid-template-columns: 1fr; gap: 18px; }
  .v2 .feat { grid-template-columns: 1fr; }
  .v2 .featgrid, .v2 .newsgrid, .v2 .cta-lines { grid-template-columns: 1fr; }
  .v2 .r-foot-top { grid-template-columns: 1fr 1fr; }
  .v2 .r-foot .wordmark, .v2 .r-foot .about, .v2 .r-foot .addr { grid-column: 1 / -1; }
  .v2 nav.primary { display: none; }
  .v2 .r-burger { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid currentColor; border-radius: 3px; background: transparent; color: inherit; cursor: pointer; }
  .v2 .scene { background-attachment: scroll; min-height: 78vh; }
}
@media (max-width: 640px) {
  .v2 .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
  .v2 .prod { grid-template-columns: 34px 1fr 44px; }
  .v2 .prod .ds { display: none; }
  .v2 .regrow { grid-template-columns: 1fr; gap: 8px; }
  .v2 .regrow .st { justify-self: start; text-align: left; }
  .v2 .timerow { grid-template-columns: 1fr; gap: 6px; }
  .v2 .newsgrid { grid-template-columns: 1fr; gap: 20px; }
  .v2 .feat .spec { grid-template-columns: 1fr; }
  .v2 .feat .spec .s { border-right: 0; }
  .v2 .r-foot-top { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .v2.js-motion [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .v2 .scene { background-attachment: scroll !important; }
  .v2 .cine-hero .hslide { transition: none; }
  .v2 .cine-hero .scrollcue::after { animation: none; }
  .js-motion .v2 .hero-stats .s { animation: none; opacity: 1; }
  .v2::after { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CÁC TRANG CON — cùng "khung" với trang chủ (header_v2 + footer_v2 + hệ v2)
   Reskin các lớp cũ (page-head, crumb, listcard, prose, job, reg, pd-*, ct-*)
   sang tông trắng/xanh biên tập, GIỮ NGUYÊN markup + hook JS. Mọi trang con
   mở đầu bằng dải tiêu đề tối .page-hero để header cố định luôn đọc rõ.
   ══════════════════════════════════════════════════════════════════════════ */
.v2 .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 68px); }

/* Trang con (không phải trang chủ): header nền NAVY ĐẶC để chữ luôn rõ dù nội
   dung phía sau sáng; trang chủ (.v2-home) giữ header trong suốt trên hero tối. */
.v2:not(.v2-home) header.nav { background: var(--ink); box-shadow: 0 1px 0 var(--line-d); }
/* Trang kết quả gửi / lỗi 404-500: chừa chỗ cho header cố định + canh giữa */
.v2 .errpage { min-height: 58vh; padding-top: calc(76px + clamp(44px, 7vw, 76px)); padding-bottom: clamp(48px, 7vw, 84px); text-align: center; }
.v2 .errpage h1 { font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.8rem, 4vw, 3rem); color: var(--ink); margin: 8px 0 14px; }
.v2 .errpage .code { font-family: 'JetBrains Mono', monospace; font-size: 2rem; color: var(--amber); }
/* Trang Liên hệ: dải tiêu đề .ct-hero -> tối cho đồng bộ + chừa header */
.v2 .ct-hero { background: var(--ink) !important; border-bottom: 1px solid var(--line-d) !important; padding: calc(76px + clamp(36px, 6vw, 58px)) 0 clamp(34px, 5vw, 52px) !important; }
.v2 .ct-hero h1 { color: #fff !important; }
.v2 .ct-hero h1 span { color: #7d8cff !important; }
.v2 .ct-hero p { color: var(--mute-d) !important; }

/* ── Dải tiêu đề đầu trang (tối) ─────────────────────────────────────────── */
.v2 .page-hero, .v2 .page-head {
  background: var(--ink); color: #fff;
  padding: clamp(118px, 15vh, 172px) 0 clamp(40px, 6vw, 68px);
}
.v2 .page-hero h1, .v2 .page-head h1 {
  font-weight: 800; letter-spacing: -.035em; line-height: 1; margin: 14px 0 0;
  font-size: clamp(2.4rem, 6vw, 5rem); color: #fff;
}
.v2 .page-hero h1 span, .v2 .page-head h1 span { color: #7d8cff; }
.v2 .page-hero .lede, .v2 .page-head .lede {
  margin: 22px 0 0; max-width: 62ch; font-size: clamp(1.02rem, 1.4vw, 1.22rem);
  line-height: 1.55; color: var(--mute-d); font-weight: 400;
}
/* breadcrumb (mono, kiểu tài liệu) */
.v2 .crumb, .v2 .crumbs {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mute-d);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.v2 .crumb a, .v2 .crumbs a { color: var(--mute-d); text-decoration: none; }
.v2 .crumb a:hover, .v2 .crumbs a:hover { color: #fff; }
.v2 .crumb span { color: rgba(255,255,255,.4); }

/* ── Tiêu đề mục trong trang ─────────────────────────────────────────────── */
.v2 .sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.v2 .sec-head .left { max-width: 60ch; }
.v2 .sec-head .tag, .v2 .tag {
  display: inline-flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber); background: none; padding: 0; border: 0; border-radius: 0;
}
.v2 .sec-head h2 { font-weight: 800; letter-spacing: -.03em; line-height: 1.04; font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin: 12px 0 0; color: var(--ink); }
.v2 .sec-head h2 span { color: var(--amber); }
.v2 .sec-head .right p { color: var(--mute); font-size: .98rem; }
.v2 .sec-head .link, .v2 a.link { color: var(--amber); font-weight: 600; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }

/* ── Lưới thẻ + thẻ danh sách (sản phẩm / tin) ──────────────────────────── */
.v2 .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.v2 .listcard {
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  padding: 22px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column;
  box-shadow: none; transition: border-color .25s ease, transform .25s ease;
}
.v2 .listcard:hover { border-color: var(--amber); transform: translateY(-3px); }
.v2 .listcard .thumb { background: var(--paper-2); border-radius: 3px; aspect-ratio: 4/3; overflow: hidden; display: grid; place-items: center; margin-bottom: 16px; }
.v2 .listcard .thumb img { width: 82%; height: 82%; object-fit: contain; }
.v2 .listcard .meta { font-family: 'JetBrains Mono', monospace; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.v2 .listcard h3 { margin: 8px 0 6px; font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.v2 .listcard p { margin: 0; color: var(--mute); font-size: .92rem; flex: 1; }
.v2 .listcard .more { margin-top: 14px; font-size: .84rem; font-weight: 600; color: var(--amber); }

/* nhóm sản phẩm + thanh lọc danh mục (vh-filter do motion.js dựng) */
.v2 .prod-list { padding: clamp(56px,8vw,96px) 0; }
.v2 .prod-group + .prod-group { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--line); }
.v2 .prod-group .sec-head { margin-bottom: 26px; }
.v2 .vh-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.v2 .vh-filter button { font-family: inherit; font-size: .85rem; font-weight: 600; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: all .2s ease; }
.v2 .vh-filter button.on { background: var(--amber); border-color: var(--amber); color: #fff; }

/* ── Bài viết / nội dung dài (.prose) ────────────────────────────────────── */
.v2 .prose { max-width: 74ch; font-size: 1.08rem; line-height: 1.78; color: var(--ink-2); }
.v2 .prose > * + * { margin-top: 1.1em; }
.v2 .prose h2 { font-size: clamp(1.5rem,2.6vw,2rem); font-weight: 800; letter-spacing: -.02em; margin-top: 1.8em; color: var(--ink); }
.v2 .prose h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; margin-top: 1.5em; color: var(--ink); }
.v2 .prose a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
.v2 .prose img { max-width: 100%; height: auto; border-radius: 4px; }
.v2 .prose ul, .v2 .prose ol { padding-left: 1.3em; }
.v2 .prose li + li { margin-top: .4em; }
.v2 .prose blockquote { border-left: 3px solid var(--amber); padding-left: 18px; color: var(--mute); font-style: italic; }

/* ── Tuyển dụng (.job) ───────────────────────────────────────────────────── */
.v2 .job-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.v2 .job { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 26px; box-shadow: none; }
.v2 .job.open { border-left: 3px solid var(--amber); }
.v2 .job .loc { font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.v2 .job h3 { margin: 10px 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.v2 .job .pill { display: inline-block; font-size: .78rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); margin: 0 6px 6px 0; }
.v2 .job .pill.green { background: rgba(51,70,221,.08); color: var(--amber-deep); border-color: transparent; }

/* ── Tuân thủ (.reg) — nếu trang con dùng lại ────────────────────────────── */
.v2 .reg-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 20px; }
.v2 .reg { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 22px; box-shadow: none; }
.v2 .reg h3 { font-weight: 800; letter-spacing: -.02em; }

/* ── Chi tiết sản phẩm (.pd-*) ───────────────────────────────────────────── */
.v2 .pd-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px,4vw,56px); align-items: start; }
.v2 .pd-gallery, .v2 .pd-info { min-width: 0; }
.v2 .pd-gallery img, .v2 .pd-thumbs img { border-radius: 4px; background: var(--paper-2); }
.v2 .pd-gallery > img { width: 100%; object-fit: contain; }
.v2 .pd-summary { color: var(--mute); font-size: 1.05rem; line-height: 1.6; }
.v2 .pd-specs, .v2 table.pd-specs { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.v2 .pd-specs td, .v2 .pd-specs th { border-bottom: 1px solid var(--line); padding: 12px 14px; font-size: .95rem; text-align: left; vertical-align: top; }
.v2 .pd-specs td:first-child, .v2 .pd-specs th:first-child { color: var(--mute); font-family: 'JetBrains Mono', monospace; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; width: 42%; }
.v2 .pd-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* ── Biểu mẫu Liên hệ (.ct-*) — giữ id/hook JS, chỉ đổi giao diện ─────────── */
.v2 .ct-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: clamp(28px,4vw,56px); align-items: start; }
.v2 .ct-box, .v2 .ct-side { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: clamp(22px,3vw,34px); box-shadow: none; }
.v2 .ct-f label, .v2 .ct-form label { font-size: .82rem; font-weight: 600; color: var(--ink); }
.v2 .ct-form input, .v2 .ct-form textarea, .v2 .ct-form select,
.v2 form input[type="text"], .v2 form input[type="tel"], .v2 form input[type="email"], .v2 form textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.v2 .ct-form input:focus, .v2 .ct-form textarea:focus, .v2 form input:focus, .v2 form textarea:focus {
  outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(51,70,221,.14);
}
.v2 .ct-f.bad input, .v2 .ct-f.bad textarea { border-color: #d33; }
.v2 .ct-kinds label, .v2 .ct-kind { border: 1px solid var(--line); border-radius: 4px; }
.v2 .ct-kinds input:checked + *, .v2 .ct-kind.on { border-color: var(--amber); }

/* ── Trạng thái trống / trang đã gửi / lỗi ───────────────────────────────── */
.v2 .empty { text-align: center; padding: 40px 0; }
.v2 .empty b { font-size: 1.3rem; font-weight: 700; }
.v2 .empty p { color: var(--mute); max-width: 52ch; margin: 12px auto 0; }
.v2 .final { background: var(--paper-2); }
.v2 .channels a { text-decoration: none; color: inherit; }

/* nút cũ trên trang con -> bo góc & tông v2 (giữ màu xanh thương hiệu) */
.v2 .btn { border-radius: 3px; }

@media (max-width: 900px) {
  .v2 .card-grid { grid-template-columns: 1fr 1fr; }
  .v2 .pd-hero, .v2 .ct-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .v2 .card-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO "FLASH PLAYER" (trình chiếu ảnh), BẰNG KHEN, YOUTUBE
   ══════════════════════════════════════════════════════════════════════════ */
/* Hero toàn khung: chữ phủ lên trình chiếu nền */
.v2 .hero-copy .d1 { margin-top: 18px; }
.v2 .hero-copy .lead { margin-top: 22px; max-width: 46ch; }
.v2 .hero-copy .cta { margin-top: 30px; }
.v2 .hero-copy .hero-stats { margin-top: 36px; max-width: 720px; }

/* Bằng khen / chứng nhận */
.v2 .cred { display: grid; grid-template-columns: 168px 1fr; gap: clamp(22px, 3vw, 40px); align-items: center;
  margin-top: clamp(40px, 6vw, 64px); padding-top: clamp(34px, 5vw, 48px); border-top: 1px solid var(--line); }
.v2 .cred .certimg { display: block; border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  box-shadow: 0 16px 40px -20px rgba(15,23,42,.45); background: #fff; }
.v2 .cred .certimg img { width: 100%; display: block; }
.v2 .cred .txt .k { font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.v2 .cred .txt h3 { margin: 10px 0 8px; font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; }
.v2 .cred .txt p { margin: 0; color: var(--mute); max-width: 60ch; }
.v2 .cred .txt .r-link, .v2 .cred .txt a { color: var(--amber); font-weight: 600; text-decoration: none; }

/* YouTube — nhúng đáp ứng 16:9 */
.v2 .yt-wrap { position: relative; width: 100%; max-width: 940px; margin: clamp(30px,4vw,44px) auto 0;
  aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-d); background: #000; }
.v2 .yt-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.v2 .yt-ph { position: absolute; inset: 0; display: grid; place-items: center; gap: 14px; text-align: center;
  color: #fff; background: linear-gradient(160deg, #0e1533, #090d1e); text-decoration: none; }
.v2 .yt-ph .play { width: 74px; height: 74px; border-radius: 50%; background: rgba(232,71,77,.92);
  display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(0,0,0,.5); }
.v2 .yt-ph .play svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
.v2 .yt-ph small { display: block; font-family: 'JetBrains Mono', monospace; font-size: .78rem; letter-spacing: .06em; color: var(--mute-d); }

/* Bộ chọn video — các phóng sự khác, bấm để đổi video đang phát */
.v2 .vid-picks { max-width: 940px; margin: 16px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.v2 .vid-pick { display: block; text-decoration: none; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 12px; padding: 8px 8px 4px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.v2 .vid-pick:hover, .v2 .vid-pick:focus-visible { transform: translateY(-3px);
  box-shadow: 0 16px 32px -20px rgba(11,16,32,.55); border-color: var(--amber); outline: none; }
.v2 .vid-pick .thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.v2 .vid-pick .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2 .vid-pick .thumb .play { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(232,71,77,.92); display: grid; place-items: center; box-shadow: 0 8px 20px -6px rgba(0,0,0,.5);
  transition: transform .18s ease, background .18s ease; }
.v2 .vid-pick .thumb .play svg { width: 18px; height: 18px; fill: #fff; margin-left: 2px; }
.v2 .vid-pick:hover .thumb .play { transform: scale(1.08); }
.v2 .vid-pick .thumb .live { position: absolute; top: 8px; left: 8px; display: none;
  font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .09em; text-transform: uppercase;
  background: var(--amber); color: #fff; padding: 3px 8px; border-radius: 999px; }
.v2 .vid-pick b { display: block; font-size: .92rem; line-height: 1.35; margin: 10px 4px 2px; font-weight: 600; }
.v2 .vid-pick small { display: block; margin: 0 4px 6px; font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; letter-spacing: .05em; color: var(--mute); }
.v2 .vid-pick.on { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber) inset; }
.v2 .vid-pick.on .thumb .play { background: var(--amber); }
.v2 .vid-pick.on .thumb .live { display: block; }
@media (max-width: 720px) { .v2 .vid-picks { grid-template-columns: 1fr; max-width: 460px; } }
@media (prefers-reduced-motion: reduce) {
  .v2 .vid-pick, .v2 .vid-pick .thumb .play { transition: none; }
  .v2 .vid-pick:hover, .v2 .vid-pick:focus-visible { transform: none; }
  .v2 .vid-pick:hover .thumb .play { transform: none; }
}

@media (max-width: 900px) {
  .v2 .cred { grid-template-columns: 1fr; }
  .v2 .cred .certimg { max-width: 200px; }
}

/* menu điện thoại */
.v2 header.nav.r-open { background: var(--ink); color: #fff; }
.v2 header.nav.r-open nav.primary { display: flex; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--ink); padding: 8px 0 16px; border-top: 1px solid var(--line-d); }
.v2 header.nav.r-open nav.primary a { padding: 14px clamp(22px,5vw,68px); width: 100%; font-size: 1.1rem; }