/*
Theme Name: VC Group
Theme URI: https://vcgroup.com
Author: VC Group
Description: Theme tuỳ biến cao cấp cho VC Group — thương mại điện tử xuyên biên giới. Hiện đại, sang trọng, có điểm nhấn aurora gradient.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: vcgroup
*/

/* ============================================================
   VC GROUP — Design System v2 (premium, modern, "wow")
   ============================================================ */
:root{
  --ink:#0b1426;           /* navy thẫm (hero/footer) — tương phản đẹp với cam */
  --ink-2:#101d33;
  --text:#14202e;          /* chữ chính trên nền sáng */
  --muted:#5d6b7d;         /* xám phụ */
  --bg:#f7f8fa;            /* TRẮNG MÁT sáng sủa (không stark white) */
  --bg-soft:#eef1f4;       /* xám rất nhạt cho phần xen kẽ */
  --line:#e3e7ec;
  --i1:#d97706;            /* CAM đậm (link/eyebrow, đủ tương phản trên nền sáng) */
  --i2:#f3941f;            /* cam thương hiệu (logo) */
  --c1:#fbb24d;            /* cam sáng (glow/accent) */
  --grad:linear-gradient(120deg,#ef8a1f 0%,#f9a838 50%,#ffb454 100%); /* cam thương hiệu */
  --grad-soft:linear-gradient(120deg,rgba(243,148,31,.14),rgba(251,178,77,.14));
  --radius:20px; --radius-sm:14px;
  --shadow:0 12px 44px rgba(13,30,60,.10);
  --shadow-glow:0 14px 40px rgba(243,148,31,.32);
  --maxw:1200px;
  --space:clamp(64px,9vw,116px);
  --font:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:var(--font); color:var(--text); background:var(--bg);
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--i1); text-decoration:none; }
h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.12; font-weight:800; letter-spacing:-.02em; }
h1,h2{ font-family:var(--display); font-weight:700; letter-spacing:-.01em; }
h1{ font-size:clamp(2.7rem,6.4vw,5.2rem); line-height:1.05; }
h2{ font-size:clamp(2.1rem,4.2vw,3.3rem); }
h3{ font-size:1.2rem; }
p{ margin:0 0 1rem; color:var(--muted); }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section{ padding:var(--space) 0; position:relative; }
.section--soft{ background:var(--bg-soft); }
.center{ text-align:center; }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--i1); margin-bottom:18px; }
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--grad); border-radius:2px; }
.center .eyebrow{ justify-content:center; }
.lead{ font-size:1.18rem; color:var(--muted); max-width:640px; }
.center .lead{ margin-inline:auto; }

/* ---- Buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:1rem;
  padding:15px 28px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .18s, box-shadow .25s, background .25s, color .2s; }
.btn--primary{ background:var(--grad); color:#fff; box-shadow:var(--shadow-glow); background-size:160% 160%; }
.btn--primary:hover{ transform:translateY(-3px); background-position:100% 0; color:#fff; }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--i1); color:var(--i1); transform:translateY(-3px); }
.hero .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.28); }
.hero .btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* ---- Header (trong suốt → đặc khi cuộn) ---- */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:80; transition:background .3s, box-shadow .3s, backdrop-filter .3s; }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:80px; }
.brand{ display:inline-flex; align-items:center; gap:11px; font-size:1.32rem; font-weight:800; color:#fff; letter-spacing:-.02em; transition:color .3s; }
.brand__logo{ height:42px; width:auto; display:block; }
.brand b{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav{ display:flex; align-items:center; gap:32px; }
.nav a{ color:rgba(255,255,255,.86); font-weight:600; font-size:.97rem; transition:color .2s; }
.nav a:hover{ color:#fff; }
.nav .btn{ padding:11px 22px; }
.site-header.scrolled{ background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px); box-shadow:0 1px 0 var(--line); }
.site-header.scrolled .brand{ color:var(--text); }
.site-header.scrolled .nav a{ color:var(--text); }
.site-header.scrolled .nav a:hover{ color:var(--i1); }
.nav-toggle{ display:none; background:none; border:0; color:#fff; font-size:1.7rem; cursor:pointer; }
.site-header.scrolled .nav-toggle{ color:var(--text); }

/* ---- HERO (điểm nhấn aurora) ---- */
.hero{ position:relative; background:var(--ink); color:#fff; padding:170px 0 clamp(80px,10vw,130px); overflow:hidden; }
.hero::before,.hero::after{ content:""; position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; z-index:0; }
.hero::before{ width:620px; height:620px; top:-180px; right:-120px;
  background:radial-gradient(circle,#fbb24d,transparent 65%); animation:float1 14s ease-in-out infinite; }
.hero::after{ width:520px; height:520px; bottom:-200px; left:-120px;
  background:radial-gradient(circle,#f3941f,transparent 65%); opacity:.4; animation:float2 18s ease-in-out infinite; }
.hero__grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center; }
.hero h1{ color:#fff; margin-bottom:22px; }
.hero__lead{ color:rgba(255,255,255,.78); font-size:1.22rem; max-width:560px; margin-bottom:32px; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
.hero__badges{ display:flex; gap:22px; flex-wrap:wrap; color:rgba(255,255,255,.6); font-size:.86rem; font-weight:600; letter-spacing:.04em; }
.hero__badges span{ display:inline-flex; align-items:center; gap:8px; }
.hero__badges span::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--c1); box-shadow:0 0 12px var(--c1); }
.hero__media{ position:relative; }
.hero__media img{ border-radius:24px; box-shadow:0 30px 80px rgba(0,0,0,.5); aspect-ratio:4/4.4; object-fit:cover; width:100%;
  border:1px solid rgba(255,255,255,.1); }
.hero__float{ position:absolute; left:-26px; bottom:34px; background:rgba(255,255,255,.08);
  backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.18); border-radius:18px; padding:16px 22px; }
.hero__float b{ display:block; font-size:1.7rem; font-weight:800; line-height:1; }
.hero__float small{ color:rgba(255,255,255,.7); font-size:.8rem; }
@keyframes float1{ 50%{ transform:translate(-30px,40px) scale(1.1);} }
@keyframes float2{ 50%{ transform:translate(40px,-30px) scale(1.08);} }

/* ---- Marquee (điểm nhấn sáng tạo) ---- */
.marquee{ background:var(--ink-2); color:rgba(255,255,255,.7); padding:18px 0; overflow:hidden; white-space:nowrap; }
.marquee__track{ display:inline-flex; gap:56px; align-items:center; animation:marquee 26s linear infinite; font-weight:700; letter-spacing:.06em; }
.marquee__track span{ display:inline-flex; align-items:center; gap:56px; font-size:1.05rem; }
.marquee__track span::after{ content:"✦"; color:var(--c1); }
@keyframes marquee{ to{ transform:translateX(-50%);} }

/* ---- Bento (Giới thiệu) ---- */
.bento{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:18px; }
.bento__cell{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }
.bento__cell--lg{ grid-column:span 2; grid-row:span 2;
  background:var(--ink); color:#fff; border:0; position:relative; overflow:hidden; }
.bento__cell--lg::before{ content:""; position:absolute; width:380px; height:380px; right:-120px; top:-120px;
  background:radial-gradient(circle,rgba(243,148,31,.5),transparent 60%); filter:blur(40px); }
.bento__cell--lg h2{ color:#fff; position:relative; }
.bento__cell--lg p{ color:rgba(255,255,255,.78); position:relative; }
.bento__cell--grad{ background:var(--grad); color:#fff; border:0; }
.bento__cell--grad .bento__num{ color:#fff; }
.bento__num{ font-size:2.4rem; font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-.03em; }
.bento__cell h3{ margin-top:6px; }
.bento__cell p{ margin:0; font-size:.96rem; }
.values{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; position:relative; }
.values span{ border:1px solid rgba(255,255,255,.22); padding:8px 16px; border-radius:999px; font-weight:600; font-size:.9rem; }

/* ---- Cards (Lĩnh vực) ---- */
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 26px; transition:transform .22s, box-shadow .25s, border-color .25s; }
.card::before{ content:""; position:absolute; inset:0; border-radius:var(--radius); padding:1px;
  background:var(--grad); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .25s; }
.card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.card:hover::before{ opacity:1; }
.card__icon{ width:54px; height:54px; border-radius:16px; display:grid; place-items:center; color:#fff;
  background:var(--grad); box-shadow:var(--shadow-glow); margin-bottom:18px; }
.card__icon svg{ width:26px; height:26px; }
.card h3{ margin-bottom:8px; font-size:1.14rem; }
.card p{ margin:0; font-size:.96rem; }

/* ---- Stats (đếm động) ---- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat{ text-align:center; }
.stat__num{ font-size:clamp(2.4rem,5vw,3.6rem); font-weight:800; letter-spacing:-.04em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat__label{ color:var(--muted); font-weight:600; }

/* ---- Process ---- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.step{ position:relative; padding:30px 26px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.step__num{ font-size:2.4rem; font-weight:800; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.step h3{ margin:12px 0 6px; font-size:1.1rem; }
.step p{ margin:0; font-size:.95rem; }

/* ---- Blog cards ---- */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.post-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .22s; display:flex; flex-direction:column; }
.post-card:hover{ transform:translateY(-8px); }
.post-card__thumb{ aspect-ratio:16/10; object-fit:cover; width:100%; background:var(--bg-soft); }
.post-card__body{ padding:24px; display:flex; flex-direction:column; flex:1; }
.post-card__meta{ font-size:.8rem; color:var(--muted); margin-bottom:8px; }
.post-card h3{ font-size:1.12rem; margin-bottom:8px; }
.post-card h3 a{ color:var(--text); }
.post-card h3 a:hover{ color:var(--i1); }
.post-card p{ font-size:.95rem; margin-bottom:14px; }
.post-card .more{ margin-top:auto; font-weight:700; }

/* ---- Contact ---- */
.contact__wrap{ background:var(--ink); border-radius:28px; padding:clamp(36px,5vw,64px); color:#fff; position:relative; overflow:hidden; }
.contact__wrap::before{ content:""; position:absolute; width:480px; height:480px; right:-160px; bottom:-200px;
  background:radial-gradient(circle,rgba(243,148,31,.4),transparent 60%); filter:blur(50px); }
.contact__grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.contact__wrap h2{ color:#fff; } .contact__wrap .lead{ color:rgba(255,255,255,.78); }
.contact__email{ display:inline-flex; align-items:center; gap:10px; font-size:1.2rem; font-weight:800; color:#fff; margin-top:6px; }
.contact form{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); padding:30px; backdrop-filter:blur(8px); }
.field{ margin-bottom:16px; }
.field label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; color:rgba(255,255,255,.85); }
.field input,.field textarea{ width:100%; padding:14px 16px; border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-sm);
  font-family:inherit; font-size:1rem; background:rgba(255,255,255,.05); color:#fff; }
.field input::placeholder,.field textarea::placeholder{ color:rgba(255,255,255,.4); }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--c1); box-shadow:0 0 0 3px rgba(243,148,31,.28); }
.field textarea{ min-height:120px; resize:vertical; }

/* ---- Footer ---- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.66); padding:64px 0 30px; }
.site-footer a{ color:rgba(255,255,255,.66); } .site-footer a:hover{ color:#fff; }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer__brand{ font-size:1.5rem; font-weight:800; color:#fff; margin-bottom:12px; }
.footer__brand b{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.footer h4{ color:#fff; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; }
.footer ul{ list-style:none; margin:0; padding:0; } .footer ul li{ margin-bottom:10px; }
.footer__bottom{ padding-top:22px; font-size:.88rem; color:rgba(255,255,255,.45); text-align:center; }

/* ---- Page (bài viết) ---- */
.page-hero{ background:var(--ink); color:#fff; padding:160px 0 70px; text-align:center; position:relative; overflow:hidden; }
.page-hero::before{ content:""; position:absolute; width:600px; height:600px; left:50%; top:-260px; transform:translateX(-50%);
  background:radial-gradient(circle,rgba(243,148,31,.45),transparent 60%); filter:blur(60px); }
.page-hero *{ position:relative; } .page-hero h1{ color:#fff; }
.page-hero .lead{ color:rgba(255,255,255,.75); }
.entry{ max-width:760px; margin:0 auto; padding:var(--space) 0; }
.entry p{ color:var(--text); font-size:1.08rem; } .entry img{ border-radius:var(--radius); margin:1.5em 0; }
.entry h2{ margin-top:1.4em; } .entry a{ text-decoration:underline; }
.post-meta{ color:rgba(255,255,255,.7); }

/* ---- Pagination ---- */
.pagination .nav-links{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.pagination .page-numbers{ display:inline-grid; place-items:center; min-width:44px; height:44px; padding:0 12px;
  border:1px solid var(--line); border-radius:12px; font-weight:700; color:var(--text); background:#fff; }
.pagination .page-numbers.current{ background:var(--grad); color:#fff; border:0; }

/* ---- Reveal (an toàn: chỉ ẩn khi có JS) ---- */
.has-js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s, transform .7s; }
.has-js .reveal.in{ opacity:1; transform:none; }

/* ---- Responsive ---- */
@media (max-width:980px){
  .hero__grid{ grid-template-columns:1fr; gap:40px; } .hero__media{ max-width:460px; }
  .bento{ grid-template-columns:repeat(2,1fr); } .bento__cell--lg{ grid-column:span 2; grid-row:auto; }
  .grid-4,.stats,.steps{ grid-template-columns:repeat(2,1fr); } .posts{ grid-template-columns:repeat(2,1fr); }
  .contact__grid,.footer__grid{ grid-template-columns:1fr; gap:30px; }
}
@media (max-width:640px){
  .nav{ position:fixed; inset:80px 0 auto 0; flex-direction:column; align-items:flex-start; gap:16px;
    background:#fff; padding:22px 24px; transform:translateY(-130%); transition:transform .3s; box-shadow:var(--shadow); }
  .nav.open{ transform:none; } .nav a{ color:var(--text)!important; } .nav-toggle{ display:block; }
  .grid-4,.stats,.steps,.posts,.bento,.footer__grid{ grid-template-columns:1fr; }
  .hero__float{ left:0; }
}