.ivn-v3{
  --bg:#FAFAF8; --bg-2:#EAF2E6; --bg-3:#D8E7D2;
  --navy:#1F4D1F; --navy-2:#2B6628;
  --green:#3E8B3A; --green-soft:#7FB870;
  --ink:#1F4D1F; --ink-soft:#3D5A3B;
  /* --muted cũ #7A8D78 chỉ đạt 3.40:1 trên nền kem và 3.55:1 trên trắng — trượt
     AA (cần 4.5) ở 5 chỗ: nhãn logobar, attribution, số thứ tự metric, ngày tin,
     nhãn hero-float. Hạ độ sáng, giữ nguyên hue 114° và sat 8% nên gần như
     không nhận ra khác biệt. Giờ đạt 4.52 / 4.72. */
  --muted:#677865;
  --line:rgba(31,77,31,0.08); --line-2:rgba(31,77,31,0.14);
  /* === VÀNG: tách theo CÔNG VIỆC, không theo sắc độ ===
     --gold đang làm hai việc rất khác nhau. Làm trang trí (chấm, viền, gradient,
     fill) thì WCAG không ràng buộc — giữ nguyên #C89B3C vì nó đẹp và là brand.
     Làm CHỮ trên nền sáng thì bắt buộc ≥4.5:1 (chữ nhỏ) hoặc ≥3:1 (chữ lớn),
     mà #C89B3C chỉ đạt 2.23–2.56 → trượt ở 12 chỗ.
     Hai token dưới đây giữ nguyên hue 41° và sat 56%, chỉ hạ độ sáng. */
  --gold:#C89B3C; --gold-soft:#E0BC6B;
  --gold-text:#876826;  /* chữ NHỎ trên nền sáng — 4.97 kem / 4.54 mint / 5.20 trắng */
  --gold-ink:#AC8430;   /* chữ LỚN (em trong heading) — 3.29 kem / 3.01 mint */
  --gold-oncard:#E8CE93;/* chữ nhỏ trên nền thẻ xanh #2B6628 — 4.51 */
  --accent:#C89B3C;
  --white:#FFFFFF;

  /* === THANG SPACING — mobile-first, fluid ===
     Giá trị gốc = giá trị mobile (375px), tự lớn dần tới desktop (1280px).
     Vì đã fluid nên KHÔNG cần media query riêng cho spacing nữa.

     Nguyên tắc: khoảng trống phải tỉ lệ với độ mạnh của ranh giới.
       --sp-flow  section trong suốt, nối liền mạch  → hẹp
       --sp-band  section có nền riêng, ranh giới thật → rộng
     Section cùng nền mà cách nhau 160px thì đọc ra là trang lỗi,
     không phải là ngắt đoạn có chủ ý. */
  --sp-flow: clamp(36px, 31px + 1.33vw, 48px);  /* 36 → 48 */
  --sp-band: clamp(44px, 29px + 3.98vw, 80px);  /* 44 → 80 */
  --sp-head: clamp(24px, 17px + 1.77vw, 40px);  /* dưới section header: 24 → 40 */
  --sp-gut:  clamp(24px, 14px + 2.65vw, 48px);  /* gap giữa cột: 24 → 48 */

  /* Thang rời cho nhịp nhỏ trong component — bội số của 4 */
  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;

  /* === THANG CHỮ ===
     Trước: 6 cỡ display trong khoảng 44–68px, bước chỉ 5–11%. Dưới ~12,5% thì
     mắt không đọc ra là hai cấp khác nhau → sáu cấp tiêu đề nhìn như một.
     Body cũng vậy: 5 cỡ trong 2px (16/15.5/15/14.5/14).

     Giờ: 3 cấp display, bước ~1,27. Ba thẻ h2 section (sec / showcase / about)
     dùng CHUNG một cỡ vì chúng cùng cấp — trước đây là 52/56/48, khác nhau vô cớ.
     Display fluid theo viewport; body cố định (body co giãn theo màn hình
     thường hại hơn lợi). */
  --fs-d1: clamp(36px, 24.7px + 3vw,    68px);  /* H1 hero */
  --fs-d2: clamp(31px, 22.9px + 2.16vw, 54px);  /* pull-quote metrics */
  --fs-d3: clamp(28px, 23.1px + 1.31vw, 42px);  /* mọi h2 section + h2 trong CTA */
  --fs-t1: 30px;  /* tiêu đề thẻ lớn (bento b-hero) */
  --fs-t2: 24px;  /* tiêu đề thẻ vừa (b-full) */
  --fs-t3: 21px;  /* tiêu đề thẻ thường + caption carousel */
  --fs-t4: 17px;  /* tiêu đề tin */
  --fs-lead: clamp(15px, 14.3px + 0.19vw, 17px);  /* đoạn dẫn: hero-sub, about-body */
  --fs-body: 15px;  /* văn xuôi + nhãn điều khiển */
  --fs-meta: 12px;  /* meta, attribution, nhãn viết hoa có giãn chữ */

  background:var(--bg); color:var(--ink);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-weight:400; line-height:1.6; letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
.ivn-v3 *{box-sizing:border-box;max-width:100%}
.ivn-v3 a{color:inherit;text-decoration:none}
.ivn-v3 img{max-width:100%;height:auto}
.ivn-v3 .ivn-wrap{max-width:1366px;margin:0 auto;padding:0 32px;position:relative;width:100%}
@media (max-width:768px){.ivn-v3 .ivn-wrap{padding:0 20px}}

/* === Anti overflow-x toàn cục (fix kéo trái phải) ===
   Dùng `overflow-x: clip` thay vì `hidden` để KHÔNG ép `overflow-y` thành `auto`
   (spec CSS: nếu overflow-x != visible và overflow-y == visible, overflow-y bị tính là auto
   → tạo ra scrollbar phụ trên html/body. `clip` không kích hoạt luật này). */
html, body{overflow-x:clip;max-width:100%}
#ivn-main, .ivn-v3 main, .ivn-v3 section{max-width:100%;overflow-x:clip}
.section-home.clearfix, .mainmenu-row, .main-banner{max-width:100%;overflow:clip}

/* Logo bar */
/* ==========================================================
   HERO SECTION — Modern Professional B2B
   ========================================================== */
.ivn-v3 .ivn-hero{padding:var(--sp-flow) 0;position:relative}
.ivn-v3 .ivn-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
@media (max-width:980px){.ivn-v3 .ivn-hero-grid{grid-template-columns:1fr;gap:50px}}

.ivn-v3 .ivn-hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 14px 8px 8px;
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:100px;
  font-size:13px;font-weight:500;
  color:var(--ink-soft);
  margin-bottom:28px;
}
.ivn-v3 .ivn-hero-dot{
  width:22px;height:22px;
  background:var(--navy-2);
  color:var(--white);
  border-radius:50%;
  display:grid;place-items:center;
  font-size:10px;font-weight:700;flex-shrink:0;
}
.ivn-v3 .ivn-hero-badge strong{color:var(--navy);font-weight:700}

.ivn-v3 .ivn-hero-title{
  font-family:'Fraunces',serif;
  font-weight:400;
  font-size:var(--fs-d1);
  line-height:1.04;
  letter-spacing:-0.035em;
  color:var(--navy);
  margin:0;
}
.ivn-v3 .ivn-hero-italic{font-style:italic;font-weight:300;color:var(--gold-ink)}

.ivn-v3 .ivn-hero-sub{
  font-size:var(--fs-lead);
  line-height:1.65;
  color:var(--ink-soft);
  margin-top:24px;
  max-width:540px;
  font-weight:400;
}
.ivn-v3 .ivn-hero-sub strong{color:var(--navy);font-weight:600}

.ivn-v3 .ivn-hero-actions{
  display:flex;gap:14px;
  margin-top:32px;
  flex-wrap:wrap;
}

/* Trust rail */
.ivn-v3 .ivn-trust-rail{
  display:flex;gap:28px;align-items:center;flex-wrap:wrap;
  margin-top:40px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
/* Icon 18px can giua khoi 2 dong nen roi dung vao KHE giua hai dong.
   Can theo dinh de no khoa vao dong tieu de. */
.ivn-v3 .ivn-trust-item{display:flex;align-items:flex-start;gap:12px;font-size:13px;line-height:1.45;color:var(--ink-soft)}
.ivn-v3 .ivn-trust-item svg{width:20px;height:20px;color:var(--gold-ink);flex-shrink:0;margin-top:2px}
.ivn-v3 .ivn-trust-item strong{color:var(--navy);font-weight:600;display:block;font-size:14px;margin-bottom:1px}

/* Hero visual - image card + floating badges */
.ivn-v3 .ivn-hero-visual{position:relative}
.ivn-v3 .ivn-hv-main{
  aspect-ratio:4/5;
  background:url("https://ivn.com.vn/wp-content/uploads/2024/10/vach-ngan-nha-ve-sinh-hoi-truong-tinh-tra-vinh.jpg") center/cover;
  border-radius:16px;
  position:relative;
  box-shadow:0 40px 80px -30px rgba(31,77,31,0.25);
}
.ivn-v3 .ivn-hv-float{
  position:absolute;
  background:var(--white);
  border-radius:14px;
  box-shadow:0 20px 40px -10px rgba(31,77,31,0.15);
  padding:16px 18px;
  display:flex;align-items:center;gap:12px;
}
.ivn-v3 .ivn-hv-float-top{top:28px;left:-32px}
@media (max-width:980px){.ivn-v3 .ivn-hv-float-top{left:10px}}
.ivn-v3 .ivn-hv-ring{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-soft) 100%);
  display:grid;place-items:center;
  color:var(--white);flex-shrink:0;
}
.ivn-v3 .ivn-hv-ring svg{width:20px;height:20px}
.ivn-v3 .ivn-hv-t-num{font-family:'Fraunces',serif;font-weight:500;font-size:18px;color:var(--navy);line-height:1.2}
.ivn-v3 .ivn-hv-t-lbl{font-size:12px;color:var(--muted);margin-top:3px}

.ivn-v3 .ivn-hv-float-bot{bottom:28px;right:-32px;max-width:240px}
@media (max-width:980px){.ivn-v3 .ivn-hv-float-bot{right:10px;max-width:220px}}
.ivn-v3 .ivn-hv-avatars{display:flex;flex-shrink:0}
.ivn-v3 .ivn-hv-avatars span{
  width:28px;height:28px;border-radius:50%;
  border:2px solid var(--white);
  margin-left:-8px;
}
.ivn-v3 .ivn-hv-avatars span:first-child{margin-left:0;background:var(--navy)}
.ivn-v3 .ivn-hv-avatars span:nth-child(2){background:var(--green)}
.ivn-v3 .ivn-hv-avatars span:nth-child(3){background:var(--gold)}
.ivn-v3 .ivn-hv-b-text{font-size:12px;color:var(--ink-soft);line-height:1.45}
.ivn-v3 .ivn-hv-b-text strong{color:var(--navy);font-weight:700}

/* Mobile hero */
@media (max-width:768px){
  /* padding hero giờ do --sp-flow lo, không khai báo lại ở đây */
  .ivn-v3 .ivn-hero-badge{margin-bottom:20px;font-size:12px}
  .ivn-v3 .ivn-hero-sub{margin-top:20px}  /* cỡ chữ do --fs-lead lo */
  .ivn-v3 .ivn-hero-actions{margin-top:24px}
  .ivn-v3 .ivn-hero-trust{margin-top:28px;padding-top:20px;gap:20px}
  .ivn-v3 .ivn-hv-float{padding:12px 14px}
  .ivn-v3 .ivn-hv-float-top{top:16px;left:8px}
  .ivn-v3 .ivn-hv-float-bot{bottom:16px;right:8px;max-width:200px}
}

/* ==========================================================
   LOGO BAR — Marquee auto-scroll (chạy liên tục)
   Pattern: CSS pure, duplicate set + translateX(-50%) = seamless loop
   Pause on hover
   ========================================================== */
.ivn-v3 .ivn-logobar{padding:var(--sp-flow) 0;overflow:hidden}
.ivn-v3 .ivn-logobar-head{text-align:center;font-size:12px;color:var(--muted);letter-spacing:0.12em;text-transform:uppercase;font-weight:600;margin-bottom:var(--sp-head)}

.ivn-v3 .ivn-logos-marquee{
  position:relative;
  overflow:hidden;
  max-width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.ivn-v3 .ivn-logos-track{
  display:flex;
  align-items:center;
  /* KHÔNG dùng `gap` ở đây. Với 2 set nhân đôi, track = nội dung + 13 gap,
     nên nửa track = 1 set + 6,5 gap, trong khi một chu kỳ thật = 1 set + 7 gap.
     translateX(-50%) vì thế lệch đúng nửa gap mỗi vòng → marquee bị giật.
     Chuyển khoảng cách sang margin-right của từng logo: track = 14×(logo+margin)
     = đúng 2 chu kỳ, nên -50% khớp tuyệt đối. */
  gap:0;
  width:max-content;
  /* BẮT BUỘC: `.ivn-v3 *{max-width:100%}` (rule chặn tràn ngang ở đầu file)
     đang đè lên `width:max-content` và bóp track từ 2364px xuống bằng đúng
     bề rộng container. Marquee vì thế translateX(-50%) của một track đã bị
     nén → vòng lặp sai và phần lớn logo bị cắt.
     Track PHẢI được rộng hơn container, đó là bản chất của marquee. Không
     gây tràn ngang vì .ivn-logos-marquee bọc ngoài đã có overflow:hidden. */
  max-width:none;
  /* 70s chu khong phai 35s: track gio la 4 bo nen -50% di quang duong gap doi.
     Giu 35s thi logo chay nhanh gap doi (85px/s). 70s giu nguyen ~42px/s. */
  animation:ivnLogoMarquee 70s linear infinite;
}
.ivn-v3 .ivn-logos-marquee:hover .ivn-logos-track{animation-play-state:paused}

.ivn-v3 .ivn-logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  /* khoảng cách marquee — fluid 80px (mobile) → 120px (desktop) */
  margin-right:clamp(80px,63px + 4.42vw,120px);
  filter:grayscale(1);
  opacity:0.75;
  transition:filter .3s, opacity .3s;
}
.ivn-v3 .ivn-logo:hover{filter:grayscale(0);opacity:1}

/* Logo img: fix HEIGHT, width auto theo tỉ lệ thật */
.ivn-v3 .ivn-logo img{
  height:60px;
  width:auto;
  max-width:220px;
  object-fit:contain;
  display:block;
}
/* khoảng cách logo giờ do margin-right fluid lo — chỉ còn chỉnh kích thước ảnh */
@media (min-width:768px){
  .ivn-v3 .ivn-logo img{height:76px;max-width:260px}
}
@media (min-width:1280px){
  .ivn-v3 .ivn-logo img{height:92px;max-width:300px}
}

@keyframes ivnLogoMarquee{
  0%  {transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
/* Marquee logo đối tác chạy 35 giây một vòng, tuyến tính, không nhấp nháy —
   chuyển động trang trí ở mức nhẹ nhất. Chủ site quyết định cho nó chạy kể cả
   khi máy người xem bật "giảm chuyển động".
   Cần !important vì assets/css/main.css có kill toàn cục:
     @media (prefers-reduced-motion:reduce){ *{animation-duration:0.01ms!important;
     animation-iteration-count:1!important} }
   Không sửa main.css vì đó là file dùng chung cho mọi trang. */
@media (prefers-reduced-motion: reduce){
  .ivn-v3 .ivn-logos-track{
    animation-name:ivnLogoMarquee !important;
    animation-duration:70s !important;
    animation-timing-function:linear !important;
    animation-iteration-count:infinite !important;
  }
}

/* Section */
.ivn-v3 .ivn-sec{padding:var(--sp-flow) 0}
.ivn-v3 .ivn-sec-head{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--sp-gut);align-items:end;margin-bottom:var(--sp-head)}
@media (max-width:900px){.ivn-v3 .ivn-sec-head{grid-template-columns:1fr;align-items:start}}
.ivn-v3 .ivn-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:6px 14px;background:var(--bg-2);border-radius:100px;font-size:12px;font-weight:600;color:var(--gold-text);letter-spacing:0.02em;margin-bottom:20px}
.ivn-v3 .ivn-eyebrow::before{content:"";width:6px;height:6px;background:var(--gold);border-radius:50%}
.ivn-v3 .ivn-sec-title{font-family:'Fraunces',serif;font-weight:400;font-size:var(--fs-d3);line-height:1.08;letter-spacing:-0.03em;color:var(--navy);max-width:600px;margin:0}
.ivn-v3 .ivn-sec-title em{font-style:italic;font-weight:300;color:var(--gold-ink)}
.ivn-v3 .ivn-sec-desc{font-size:var(--fs-body);line-height:1.7;color:var(--ink-soft);max-width:440px}

/* Buttons */
.ivn-v3 .ivn-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;font-size:var(--fs-body);font-weight:600;border-radius:10px;cursor:pointer;transition:all .3s cubic-bezier(.2,.8,.2,1);font-family:inherit;border:none}
.ivn-v3 .ivn-btn svg{width:16px;height:16px;transition:transform .3s}
.ivn-v3 .ivn-btn:hover svg{transform:translateX(3px)}
.ivn-v3 .ivn-btn-primary{background:var(--navy);color:var(--white)}
.ivn-v3 .ivn-btn-primary:hover{background:var(--green);transform:translateY(-1px);box-shadow:0 8px 24px -8px rgba(62,139,58,0.4);color:var(--white)}
/* Vien cu rgba(31,77,31,0.14) chi dat 1.26:1 - WCAG 1.4.11 yeu cau >=3:1.
   Alpha 0.59 dat 3.18 kem / 3.07 mint / 3.24 trang. */
.ivn-v3 .ivn-btn-ghost{background:transparent;color:var(--navy);border:1.5px solid rgba(31,77,31,0.59)}
.ivn-v3 .ivn-btn-ghost:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}
/* Nut phu o hero dung vang dong - navy tren gold-soft = 5.41:1 */
.ivn-v3 .ivn-btn-gold{background:var(--gold-soft);color:var(--navy);border:1.5px solid var(--gold)}
.ivn-v3 .ivn-btn-gold:hover{background:var(--gold);color:var(--navy);border-color:var(--gold);transform:translateY(-1px);box-shadow:0 8px 24px -8px rgba(200,155,60,0.5)}
.ivn-v3 .ivn-btn-center{display:flex;margin-left:auto;margin-right:auto;width:fit-content}

/* Bento Products */
/* O luoi phai khop ti le ANH NGUON (900x900, 900x628, 1500x1000, 500x350 = 1.0-1.5).
   Luoi cu ep vao o 2.80 va 5.66 - cat mat 49% va 75% khung hinh.
   Gio moi o 4/3: the chu luc 2 cot x 2 hang ra 1.32, bon the con lai 1x1.
   4 cot x 2 hang = 8 o = vua khit, khong ho lo. */
.ivn-v3 .ivn-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ivn-v3 .ivn-bento > .ivn-card{aspect-ratio:4/3}
@media (max-width:900px){.ivn-v3 .ivn-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}}
@media (max-width:560px){.ivn-v3 .ivn-bento{grid-template-columns:1fr;grid-auto-rows:240px}}
.ivn-v3 .ivn-card{position:relative;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;color:var(--white);transition:all .5s cubic-bezier(.2,.8,.2,1);background-color:#2B6628;text-decoration:none}
.ivn-v3 .ivn-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ivn-v3 .ivn-card:hover .ivn-card-img{transform:scale(1.04)}
.ivn-v3 .ivn-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,52,26,0) 0%,rgba(19,52,26,0) 42%,rgba(19,52,26,0.38) 66%,rgba(19,52,26,0.88) 100%);transition:opacity .4s;z-index:1}
.ivn-v3 .ivn-card:hover{transform:translateY(-4px)}
.ivn-v3 .ivn-card:hover::before{background:linear-gradient(180deg,rgba(31,77,31,0.12) 0%,rgba(31,77,31,0.55) 55%,rgba(31,77,31,0.92) 100%)}
.ivn-v3 .ivn-card > *:not(.ivn-card-img){position:relative;z-index:2}
/* Luat `> *` ben tren co do dac hieu (0,3,0), thang `.ivn-v3 .ivn-c-arrow` (0,2,0),
   nen no de mat `position:absolute` cua chip mui ten -> chip roi xuong dong chu
   va de len nhan danh muc. Nang do dac hieu de gianh lai. */
.ivn-v3 .ivn-card > .ivn-c-arrow{position:absolute;top:18px;right:18px;z-index:3}
.ivn-v3 .ivn-c-cat{font-size:11px;letter-spacing:0.1em;color:var(--gold-oncard);text-transform:uppercase;font-weight:600;margin-bottom:8px}
.ivn-v3 .ivn-card:hover .ivn-c-cat{color:var(--white)}
.ivn-v3 .ivn-c-title{font-family:'Fraunces',serif;font-weight:500;font-size:var(--fs-t3);line-height:1.15;letter-spacing:-0.02em;margin:0;text-shadow:0 1px 3px rgba(0,0,0,0.35)}
.ivn-v3 .ivn-c-sub{font-size:13px;margin-top:8px;opacity:1;color:rgba(255,255,255,0.92);line-height:1.5;text-shadow:0 1px 2px rgba(0,0,0,0.35)}
.ivn-v3 .ivn-c-arrow{position:absolute;top:20px;right:20px;width:36px;height:36px;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.25);border-radius:50%;display:grid;place-items:center;transition:all .3s}
.ivn-v3 .ivn-card:hover .ivn-c-arrow{background:var(--white);border-color:var(--white)}
.ivn-v3 .ivn-c-arrow svg{width:14px;height:14px;transition:all .3s;color:var(--white)}
.ivn-v3 .ivn-card:hover .ivn-c-arrow svg{color:var(--navy);transform:rotate(-45deg)}
.ivn-v3 .b-hero{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.ivn-v3 .b-hero .ivn-c-title{font-size:var(--fs-t1);max-width:90%}
.ivn-v3 .b-hero .ivn-c-sub{font-size:14px}
.ivn-v3 .b-wide{grid-column:span 1}
.ivn-v3 .b-sq{grid-column:span 1}
.ivn-v3 .b-full{grid-column:span 1}
.ivn-v3 .b-full .ivn-c-title{font-size:var(--fs-t2)}
@media (max-width:900px){
  .ivn-v3 .b-hero,.ivn-v3 .b-wide,.ivn-v3 .b-sq,.ivn-v3 .b-full{grid-column:span 2;grid-row:span 1}
  .ivn-v3 .b-hero .ivn-c-title{font-size:24px}
  .ivn-v3 .b-full .ivn-c-title{font-size:22px}
}
@media (max-width:560px){
  .ivn-v3 .b-hero,.ivn-v3 .b-wide,.ivn-v3 .b-sq,.ivn-v3 .b-full{grid-column:span 1}
}

/* Metrics — Editorial Numbers Index */
.ivn-v3 .ivn-metrics-section{padding:var(--sp-flow) 0;position:relative}
.ivn-v3 .ivn-metrics-editorial{display:grid;grid-template-columns:minmax(0,440px) minmax(0,560px);gap:var(--sp-gut);align-items:center;padding:0;position:relative;max-width:1080px;margin:0 auto;justify-content:center}
.ivn-v3 .ivn-metrics-editorial::before{content:"";position:absolute;top:calc(var(--sp-5) * -1);left:0;width:64px;height:2px;background:var(--gold)}
@media (max-width:1000px){.ivn-v3 .ivn-metrics-editorial{grid-template-columns:1fr;max-width:560px}}
.ivn-v3 .ivn-metrics-label{font-size:11px;letter-spacing:0.25em;text-transform:uppercase;color:var(--gold-text);font-weight:600;margin-bottom:clamp(20px,17px + 0.88vw,28px);padding-top:0;display:block}
.ivn-v3 .ivn-metrics-quote{font-family:'Fraunces',serif;font-weight:300;font-size:var(--fs-d2);line-height:1.1;letter-spacing:-0.025em;color:var(--navy);margin:0}
.ivn-v3 .ivn-metrics-quote em{font-style:italic;color:var(--gold-ink);font-weight:300}
.ivn-v3 .ivn-metrics-attribution{margin-top:clamp(20px,15px + 1.33vw,32px);display:flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-meta);color:var(--muted);letter-spacing:0.04em}
.ivn-v3 .ivn-metrics-attribution::before{content:"";display:inline-block;width:32px;height:1px;background:var(--muted)}
.ivn-v3 .ivn-metrics-attribution strong{color:var(--navy);font-weight:600}
.ivn-v3 .ivn-metrics-numbers{display:flex;flex-direction:column}
.ivn-v3 .ivn-metric-row{display:grid;grid-template-columns:40px 1fr auto;gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);transition:all .4s ease}
.ivn-v3 .ivn-metric-row:first-child{border-top:1px solid var(--line)}
.ivn-v3 .ivn-metric-row:hover{padding-left:12px}
.ivn-v3 .ivn-metric-row-num{font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;letter-spacing:0.15em;color:var(--muted);font-weight:500}
.ivn-v3 .ivn-metric-row-num sup{font-size:8px;vertical-align:top;margin-right:1px}
.ivn-v3 .ivn-metric-row-lbl{font-size:16.5px;color:var(--ink-soft);font-weight:500;letter-spacing:-0.01em;line-height:1.35}
.ivn-v3 .ivn-metric-row-val{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(30px,25px + 1.35vw,36px);line-height:1;color:var(--navy);letter-spacing:-0.03em;position:relative}
.ivn-v3 .ivn-metric-row-val em{font-style:italic;color:var(--gold-ink);font-weight:400;font-size:0.62em;vertical-align:0.22em;margin-left:1px}
.ivn-v3 .ivn-metric-row:hover .ivn-metric-row-val{color:var(--green)}
.ivn-v3 .ivn-metric-row:hover .ivn-metric-row-num{color:var(--gold-text)}
@media (max-width:600px){
  .ivn-v3 .ivn-metric-row{grid-template-columns:40px 1fr auto;gap:16px;padding:20px 0}
  .ivn-v3 .ivn-metric-row-val{font-size:30px}
  .ivn-v3 .ivn-metric-row-lbl{font-size:15.5px}
}

/* About */
.ivn-v3 .ivn-about{padding:var(--sp-band) 0;background:var(--bg-2)}
/* gap cũ 80px = đúng bằng padding section → hai cột đọc ra như hai section
   riêng biệt. Hạ xuống --sp-gut để chúng đọc ra là MỘT khối. */
.ivn-v3 .ivn-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-gut);align-items:center}
@media (max-width:980px){.ivn-v3 .ivn-about-grid{grid-template-columns:1fr}}
.ivn-v3 .ivn-about-viscap{position:absolute;bottom:24px;left:24px;right:24px;z-index:1;color:var(--white);display:flex;justify-content:space-between;align-items:end;gap:12px}
.ivn-v3 .ivn-about-viscap-title{font-family:'Fraunces',serif;font-size:20px;font-weight:500;letter-spacing:-0.01em}
.ivn-v3 .ivn-about-viscap-loc{font-size:12px;opacity:0.85;margin-top:4px}
.ivn-v3 .ivn-about-viscap-year{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:38px;color:var(--gold-soft);line-height:1}
.ivn-v3 .ivn-about-content h2{font-family:'Fraunces',serif;font-weight:400;font-size:var(--fs-d3);line-height:1.1;letter-spacing:-0.03em;color:var(--navy);margin:16px 0 24px}
.ivn-v3 .ivn-about-content h2 em{font-style:italic;color:var(--gold-ink);font-weight:300}

/* About carousel */
.ivn-v3 .ivn-carousel{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 60px -20px rgba(31,77,31,0.25)}
.ivn-v3 .ivn-car-track{display:flex;width:100%;height:100%;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.ivn-v3 .ivn-car-slide{flex:0 0 100%;width:100%;height:100%;position:relative;text-decoration:none;color:var(--white);display:block;cursor:pointer;overflow:hidden}
.ivn-v3 .ivn-car-slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.ivn-v3 .ivn-car-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(31,77,31,0.72) 100%);z-index:1}
.ivn-v3 .ivn-car-cap{z-index:2}
.ivn-v3 .ivn-car-cap{position:absolute;bottom:24px;left:24px;right:24px;z-index:2;color:var(--white);display:flex;justify-content:space-between;align-items:end;gap:12px}
.ivn-v3 .ivn-car-cap-title{font-family:'Fraunces',serif;font-size:var(--fs-t3);font-weight:500;letter-spacing:-0.01em;line-height:1.15}
.ivn-v3 .ivn-car-cap-loc{font-size:12px;opacity:0.85;margin-top:4px;letter-spacing:0.02em}
.ivn-v3 .ivn-car-cap-year{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:38px;color:var(--gold-soft);line-height:1}

/* Carousel controls */
.ivn-v3 .ivn-car-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.25);color:var(--white);display:grid;place-items:center;cursor:pointer;transition:all .25s;opacity:0;pointer-events:none}
.ivn-v3 .ivn-carousel:hover .ivn-car-nav{opacity:1;pointer-events:auto}
.ivn-v3 .ivn-car-nav:hover{background:var(--white);color:var(--navy);border-color:var(--white)}
.ivn-v3 .ivn-car-nav svg{width:18px;height:18px}
.ivn-v3 .ivn-car-prev{left:16px}
.ivn-v3 .ivn-car-next{right:16px}

/* Carousel dots */
.ivn-v3 .ivn-car-dots{position:absolute;top:20px;right:20px;z-index:3;display:flex;gap:6px;padding:8px 10px;background:rgba(31,77,31,0.35);backdrop-filter:blur(12px);border-radius:100px}
.ivn-v3 .ivn-car-dot{position:relative;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.45);border:none;padding:0;cursor:pointer;transition:all .3s}
.ivn-v3 .ivn-car-dot.active{background:var(--gold-soft);width:22px;border-radius:3px}

/* Vùng chạm: chấm chỉ 6×6px, dưới ngưỡng 24×24 của WCAG 2.2 SC 2.5.8 (AA).
   Trên thiết bị cảm ứng, nới chấm lên 10px và giãn khoảng cách để mỗi vùng
   chạm 24×24 lát khít nhau, không chồng lên nhau (chồng lên nhau còn tệ hơn
   vì bấm nhầm). Chuột giữ nguyên vẻ thanh mảnh. */
.ivn-v3 .ivn-car-dot::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px}
@media (pointer:coarse){
  .ivn-v3 .ivn-car-dots{gap:14px;padding:10px 12px}
  .ivn-v3 .ivn-car-dot{width:10px;height:10px}
  .ivn-v3 .ivn-car-dot.active{width:24px}
}
.ivn-v3 .ivn-car-count{position:absolute;top:20px;left:20px;z-index:3;padding:6px 12px;background:rgba(31,77,31,0.35);backdrop-filter:blur(12px);border-radius:100px;color:var(--white);font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.08em}
.ivn-v3 .ivn-car-count em{color:var(--gold-soft);font-style:normal}
@media (max-width:768px){
  .ivn-v3 .ivn-car-nav{display:none}
  .ivn-v3 .ivn-car-cap-title{font-size:18px}
  .ivn-v3 .ivn-car-cap-year{font-size:28px}
}
.ivn-v3 .ivn-about-body{font-size:var(--fs-lead);line-height:1.75;color:var(--ink-soft);max-width:500px}
.ivn-v3 .ivn-about-body p{margin:0 0 14px}
.ivn-v3 .ivn-about-body p:last-child{margin-bottom:0}
.ivn-v3 .ivn-about-body ul{margin:0 0 14px;padding-left:20px}
.ivn-v3 .ivn-about-body li{margin-bottom:6px}
.ivn-v3 .ivn-about-body strong{color:var(--navy);font-weight:600}
.ivn-v3 .ivn-about-body a{color:var(--green);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s}
.ivn-v3 .ivn-about-body a:hover{color:var(--gold-text)}
.ivn-v3 .ivn-about-bullets{margin:clamp(20px,17px + 0.88vw,28px) 0 clamp(24px,21px + 0.88vw,32px);display:flex;flex-direction:column;gap:14px}
.ivn-v3 .ivn-about-bullet{display:flex;gap:14px;align-items:start;font-size:var(--fs-body);color:var(--ink-soft)}
.ivn-v3 .ivn-about-bullet-icon{width:28px;height:28px;background:var(--navy);color:var(--white);border-radius:50%;display:grid;place-items:center;flex-shrink:0;margin-top:1px}
.ivn-v3 .ivn-about-bullet-icon svg{width:14px;height:14px}
.ivn-v3 .ivn-about-bullet strong{color:var(--navy);font-weight:600;display:block;margin-bottom:2px}

/* Video Showcase — full-width section */
.ivn-v3 .ivn-showcase{padding:var(--sp-band) 0;background:var(--ink);color:var(--white);position:relative;overflow:hidden}
.ivn-v3 .ivn-showcase::before{content:"";position:absolute;top:-20%;left:-10%;width:600px;height:600px;max-width:100%;background:radial-gradient(circle,rgba(200,155,60,0.12) 0%,transparent 70%);pointer-events:none}
.ivn-v3 .ivn-showcase::after{content:"";position:absolute;bottom:-30%;right:-10%;width:500px;height:500px;max-width:100%;background:radial-gradient(circle,rgba(127,184,112,0.08) 0%,transparent 70%);pointer-events:none}
.ivn-v3 .ivn-showcase-inner{position:relative;z-index:1}
.ivn-v3 .ivn-showcase-head{text-align:center;margin-bottom:var(--sp-head)}
.ivn-v3 .ivn-showcase-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--gold-soft);font-weight:600;margin-bottom:20px}
.ivn-v3 .ivn-showcase-eyebrow::before,.ivn-v3 .ivn-showcase-eyebrow::after{content:"";width:32px;height:1px;background:var(--gold-soft);opacity:0.5}
.ivn-v3 .ivn-showcase-title{font-family:'Fraunces',serif;font-weight:400;font-size:var(--fs-d3);line-height:1.08;letter-spacing:-0.03em;color:var(--white);margin:0 auto;max-width:700px}
.ivn-v3 .ivn-showcase-title em{font-style:italic;font-weight:300;color:var(--gold-soft)}
.ivn-v3 .ivn-showcase-sub{margin-top:20px;font-size:var(--fs-body);line-height:1.7;color:rgba(255,255,255,0.65);max-width:540px;margin-left:auto;margin-right:auto}
.ivn-v3 .ivn-showcase-frame{position:relative;max-width:1080px;margin:0 auto;border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -20px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.08)}
.ivn-v3 .ivn-showcase-frame::before{content:"";position:absolute;inset:0;border-radius:20px;border:1px solid rgba(200,155,60,0.2);pointer-events:none;z-index:2}
.ivn-v3 .ivn-showcase-frame iframe{width:100%;aspect-ratio:16/9;height:auto;display:block;border:0;background:#000}
.ivn-v3 .ivn-showcase-meta{display:flex;justify-content:space-between;align-items:center;max-width:1080px;margin:24px auto 0;padding:0 4px;font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,255,255,0.45);font-weight:500}
.ivn-v3 .ivn-showcase-meta .dot{width:6px;height:6px;background:var(--gold-soft);border-radius:50%;display:inline-block;margin:0 10px;vertical-align:middle;animation:ivnDotPulse 2s infinite}
@keyframes ivnDotPulse{0%,100%{opacity:1}50%{opacity:0.3}}
@media (max-width:768px){
  .ivn-v3 .ivn-showcase-meta{flex-direction:column;gap:var(--sp-2);text-align:center}
}

/* CTA */
/* ĐỤNG TÊN CLASS: assets/css/main.css đã có sẵn một component `.ivn-cta`
   hoàn toàn không liên quan (hộp gradient lime/gold của trang khác). Section
   wrapper ở đây trùng tên nên ăn luôn margin:30px, border-radius:24px,
   display:flex, box-shadow xanh đậm và 2 radial-gradient của nó.
   Cái box-shadow đó render thật trên nền sáng — đó là thứ làm vùng CTA
   trông bẩn, và margin 30px là 60px khoảng trống thừa.
   Dưới đây reset lại toàn bộ. Fix triệt để là đổi tên class — xem ghi chú
   cuối file. */
.ivn-v3 .ivn-cta{
  padding:var(--sp-flow) 0;
  margin:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  display:block;
  gap:normal;
  text-align:left;
}
.ivn-v3 .ivn-cta-box{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 55%,#255A22 100%);border-radius:clamp(16px,13px + 0.88vw,24px);padding:clamp(32px,16px + 4.2vw,70px) clamp(24px,10px + 3.7vw,60px);color:var(--white);display:grid;grid-template-columns:1.5fr 1fr;gap:var(--sp-gut);align-items:center;position:relative;overflow:hidden}
@media (max-width:900px){.ivn-v3 .ivn-cta-box{grid-template-columns:1fr}}
.ivn-v3 .ivn-cta-box::before{content:"";position:absolute;top:-30%;right:-10%;width:450px;height:450px;max-width:100%;background:radial-gradient(circle,rgba(200,155,60,0.18) 0%,transparent 70%);pointer-events:none}
.ivn-v3 .ivn-cta-box > *{position:relative;z-index:1}
.ivn-v3 .ivn-cta-box h2{font-family:'Fraunces',serif;font-weight:400;font-size:var(--fs-d3);line-height:1.12;letter-spacing:-0.03em;color:var(--white);margin:0}
.ivn-v3 .ivn-cta-box h2 em{font-style:italic;color:var(--gold-soft);font-weight:300}
.ivn-v3 .ivn-cta-box p{font-size:15px;margin:16px 0 0;max-width:500px;line-height:1.6;color:rgba(255,255,255,0.75)}
.ivn-v3 .ivn-cta-actions{display:flex;flex-direction:column;gap:12px}
.ivn-v3 .ivn-cta-actions .ivn-btn{justify-content:center;padding:16px 22px;font-size:var(--fs-body)}
.ivn-v3 .ivn-cta-box .ivn-btn-primary{background:var(--gold-soft);color:var(--navy)}
.ivn-v3 .ivn-cta-box .ivn-btn-primary:hover{background:var(--white);color:var(--navy);box-shadow:0 8px 24px -8px rgba(255,255,255,0.3)}
.ivn-v3 .ivn-cta-box .ivn-btn-ghost{border-color:rgba(255,255,255,0.3);color:var(--white)}
.ivn-v3 .ivn-cta-box .ivn-btn-ghost:hover{background:var(--white);color:var(--navy);border-color:var(--white)}

/* News */
.ivn-v3 .ivn-news-section{padding:var(--sp-flow) 0;border-top:1px solid var(--line)}
.ivn-v3 .ivn-news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
@media (max-width:900px){.ivn-v3 .ivn-news-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ivn-v3 .ivn-news-grid{grid-template-columns:1fr}}
.ivn-v3 .ivn-news-item{border-radius:14px;overflow:hidden;background:var(--white);border:1px solid var(--line);transition:all .3s;display:flex;flex-direction:column}
.ivn-v3 .ivn-news-item > a{display:flex;flex-direction:column;text-decoration:none;color:inherit;flex:1}
.ivn-v3 .ivn-news-item:hover{transform:translateY(-4px);box-shadow:0 16px 40px -12px rgba(31,77,31,0.1);border-color:var(--line-2)}
.ivn-v3 .ivn-news-img{aspect-ratio:4/3;overflow:hidden;position:relative}
.ivn-v3 .ivn-news-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ivn-v3 .ivn-news-item:hover .ivn-news-img img{transform:scale(1.04)}
.ivn-v3 .ivn-news-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.ivn-v3 .ivn-news-meta{font-size:11px;color:var(--gold-text);letter-spacing:0.1em;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.ivn-v3 .ivn-news-meta time{color:var(--muted);letter-spacing:0.05em;font-weight:500}
.ivn-v3 .ivn-news-title{font-family:'Fraunces',serif;font-weight:500;font-size:var(--fs-t4);line-height:1.3;letter-spacing:-0.01em;color:var(--navy);flex:1;margin:0}

.ivn-v3 .ivn-view-all{display:flex;justify-content:center;margin-top:var(--sp-head)}

/* Reveal */
.ivn-v3 .ivn-reveal{opacity:0;transform:translateY(24px);transition:all .9s cubic-bezier(.2,.8,.2,1)}
.ivn-v3 .ivn-reveal.in{opacity:1;transform:none}

/* ============ SPACING: KHÔNG CÒN MEDIA QUERY ============
   Hai khối @media (768px / 480px) cũ ở đây đã được gỡ bỏ.

   Trước: mỗi section khai báo padding 3 lần (desktop / 768 / 480) → 24 dòng
   trùng lặp, và vì gõ tay nên mobile bị lệch: .ivn-sec 36/36 nhưng
   .ivn-about 40/40, .ivn-metrics-section 32/4 (số 4px là giá trị lạc).

   Giờ: --sp-flow / --sp-band / --sp-head / --sp-gut đã fluid bằng clamp(),
   giá trị gốc là mobile và tự nội suy tuyến tính lên desktop. Mọi viewport
   ở giữa đều có giá trị hợp lý thay vì nhảy bậc tại 480 và 768.

   Muốn chỉnh nhịp toàn trang → sửa 4 token ở đầu file, không sửa ở đây.

   TODO (ngoài phạm vi lần này): đổi tên class section `.ivn-cta` của trang
   chủ thành `.ivn-home-cta` (1 dòng HTML + 3 selector CSS trong file này).
   Hiện đang phải reset thủ công vì trùng tên với component `.ivn-cta`
   trong assets/css/main.css. Đổi tên xong thì xoá được khối reset đó. */