/* =========================================================================
   YODAYMEDIA.COM — prototype dựng từ Figma "Rebranding YODAY" (node 647:15)
   Mọi giá trị màu / bo góc / khoảng cách lấy trực tiếp từ Figma API.
   ========================================================================= */

:root {
  --yellow: #FFD000;
  --orange: #F09619;
  --yellow-soft: #FFE628;
  --gold: #EEBA00;

  /* Figma dùng đen theo opacity, không dùng màu xám riêng.
     Giá trị gốc trong Figma là .50 nhưng chỉ đạt 3.95:1 — trượt WCAG AA.
     Nâng lên .62 (6.19:1). Trên nền vàng/cam cần .70 vì nền sáng hơn. */
  --ink: rgba(0, 0, 0, .80);
  --ink-50: rgba(0, 0, 0, .62);
  --ink-on-brand: rgba(0, 0, 0, .70);
  /* Cam gốc #F09619 chỉ đạt 2.31:1 trên trắng — chỉ dùng làm nền.
     Cần chữ màu cam thì dùng biến thể đậm này (5.00:1). */
  --orange-text: #A85C00;
  --ink-full: #0A0A0A;   /* Brand Black chính thức, không phải đen tuyệt đối */
  /* QUYẾT ĐỊNH A — brand guideline đặt Cream White ở 50%, là "nền trang sáng".
     File thiết kế website để fill trắng, nhiều khả năng chỉ là mặc định Figma
     chưa ai đổi: designer đã phủ quầng vàng lớn lên trên, tức là đang giả lập
     nền kem. Guideline là văn bản cấp cao hơn nên nó thắng.
     Kem = nền trang. Trắng = panel nổi, luôn kèm viền hoặc bóng vì trắng trên
     kem chỉ đạt 1.06:1, tự nó không tạo được ranh giới. */
  --cream: #FFF8E7;
  --surface: #FFFFFF;
  --dark: #111111;
  --line: rgba(0, 0, 0, .10);

  --r-card: 45px;    /* thẻ giá trị, thẻ tin tức, khối form */
  --r-quote: 35px;   /* thẻ testimonial */
  --r-pill: 39px;    /* nút hero */
  --r-tag: 26px;     /* nhãn YODAY */

  --maxw: 1362px;    /* suy từ toạ độ card: 4487 → 5849 */
  --gutter: 75px;

  /* QUYẾT ĐỊNH B — giữ đúng cỡ và trọng lượng tiêu đề của brand guideline
     (Display 72/700, H1 48/700, H2 32/600, H3 24/600). Chỉ nâng ba cấp nhỏ nhất
     vì thang gốc thiết kế cho khổ in A4; 15/13/10px đọc trên màn hình quá nhỏ,
     và Label 10px chắc chắn trượt tiêu chí accessibility. */
  /* Thang cỡ chữ CHÍNH THỨC — bản guideline cuối, trang 23.
     Bản này đã là thang cho màn hình nên không phải chế lại gì.
     Letter-spacing 2% ở các cấp paragraph là đặc trưng của bộ chữ, đừng bỏ. */
  --fs-h1: clamp(34px, 4.2vw, 56px);   /* 56 / lh 82 / Bold */
  --fs-h2: clamp(28px, 3.1vw, 40px);   /* 40 / lh 62 / Bold */
  --fs-h3: clamp(24px, 2.4vw, 32px);   /* 32 / lh 38 / SemiBold */
  --fs-h4: 24px;                        /* lh 32 / Medium */
  --fs-h5: 20px;                        /* lh 28 / Medium */
  --fs-caps: 18px;                      /* lh 32 / +2% / Medium */
  --fs-lead: 18px;                      /* Larger Paragraph, lh 32, +2% */
  --fs-body: 16px;                      /* Medium Paragraph, lh 24, +2% */
  --fs-small: 14px;                     /* Small Paragraph, lh 20, +2% */
  --fs-btn: 18px;                       /* lh 22 / Medium */
  --fs-display: clamp(38px, 5vw, 72px); /* Hero — trên thang, dùng có chừng mực */

  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Cắt phần thừa ngang ở gốc tài liệu.
     Hiệu ứng reveal dịch phần tử vào từ bên phải bằng translateX(40px), và
     trong lúc chưa phát thì phần tử đó nằm ngoài khung. Trên điện thoại,
     trình duyệt thấy nội dung rộng hơn khung nhìn thì thu nhỏ cả trang cho
     vừa — nền các mục chỉ phủ đúng bề rộng khung, để lộ dải trống bên phải.
     Đó là dải trống thấy được ở ảnh chụp iPhone 14 Pro Max.
     Dùng clip chứ không hidden: hidden biến gốc thành vùng cuộn và làm hỏng
     position: sticky của header. */
  overflow-x: clip;
}

body {
  margin: 0;
  /* Typeface phụ theo guideline: Inter Tight cho nội dung, mô tả, caption.
     Typeface chính là Google Sans — chưa dùng được vì không cấp phép web,
     đang tạm dùng Inter Tight cho cả hai vai. */
  font-family: "Inter Tight", Inter, system-ui, -apple-system, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ink);
  background: var(--cream);
  /* Phải có ở CẢ html lẫn body. Chỉ đặt ở html thì vùng cuộn của khung nhìn
     vẫn nở ra theo nội dung tràn — đo được 453px trên máy 430px.
     Và phải là clip chứ không hidden: hidden biến body thành vùng cuộn riêng,
     header position: sticky trôi mất khỏi màn hình khi cuộn. Trước đây hidden
     chạy được chỉ vì html để visible nên giá trị được đẩy lên khung nhìn. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, .h { font-weight: 700; }
h2, h3 { font-weight: 600; }
h1, h2, h3, .h {
  font-family: "Inter Tight", Inter, sans-serif;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0;
  color: var(--ink);
}
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: 110px 0; }
.muted { color: var(--ink-50); }

/* Tiêu đề mục — 50px trong Figma */
.h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.25; }
.h2--center { text-align: center; margin-inline: auto; }
.eyebrow { font-size: var(--fs-h4); color: var(--ink-50); font-weight: 500; }

/* =========================================================================
   QUẦNG SÁNG NỀN — Figma dùng nhiều ellipse radial chồng nhau
   ========================================================================= */
.glow {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(10px); will-change: transform;
}
.glow--a { width: 915px; height: 915px; top: -260px; right: -180px;
  background: radial-gradient(circle, rgba(238,186,0,.55) 0%, rgba(238,186,0,0) 68%); }
.glow--b { width: 718px; height: 718px; top: 60px; right: 40px;
  background: radial-gradient(circle, rgba(255,208,0,.60) 0%, rgba(255,208,0,0) 66%); }
.glow--c { width: 587px; height: 587px; top: 190px; right: 150px;
  background: radial-gradient(circle, rgba(255,230,40,.75) 0%, rgba(255,230,40,0) 62%); }
.glow--d { width: 752px; height: 752px; top: 660px; left: -300px;
  background: radial-gradient(circle, rgba(238,186,0,.38) 0%, rgba(238,186,0,0) 70%); }
.glow--e { width: 900px; height: 900px; top: -180px; left: -320px;
  background: radial-gradient(circle, rgba(255,208,0,.30) 0%, rgba(255,208,0,0) 70%); }

/* Quầng sáng rộng 900px và cố tình thò ra ngoài, nên khối chứa nó phải tự cắt.
   .hero và .page-head đã có overflow: hidden sẵn; một section thường thì không,
   và quầng sáng ở đó đẩy bề rộng tài liệu lên 580px trên máy 430px. */
.section:has(> .glow) { overflow: clip; }

/* =========================================================================
   NÚT
   ========================================================================= */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 34px; border: 0; border-radius: var(--r-pill);
  font: 500 var(--fs-btn)/1.22 'Inter Tight', sans-serif; color: var(--ink); cursor: pointer;
  background: rgba(255, 208, 0, .37);          /* Figma: #FFD000 @ 37% */
  overflow: hidden; isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--yellow);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(240, 150, 25, .32); }
.btn:hover::before { transform: scaleX(1); }
.btn--solid { background: var(--yellow); }
.btn__arrow {
  width: 30px; height: 30px; border-radius: 50%; background: var(--ink-full); color: var(--yellow);
  display: grid; place-items: center; font-size: 14px;
  transition: transform .35s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(4px) rotate(-45deg); }

/* =========================================================================
   HEADER
   ========================================================================= */
.header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255, 255, 255, 0);
  transition: background .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease);
}
.header.stuck {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(0, 0, 0, .05);
}
.header__inner {
  display: flex; align-items: center; gap: 28px;
  height: 96px; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  transition: height .35s var(--ease);
}
.header.stuck .header__inner { height: 72px; }

/* --- LOGO THẬT, xuất vector từ file brand --------------------------------
   Logo hai tông: chữ đổi màu theo nền, kim cương giữ vàng thương hiệu.
   Chọn biến thể theo nền, đúng ba trường hợp guideline nêu:
     nền kem  → chữ Brand Black  + kim cương vàng
     nền tối  → chữ Cream White  + kim cương vàng (vàng trên #111 vẫn nổi rõ)
     nền vàng → cả hai Brand Black, vì vàng trên vàng thì mất hút
   Khoảng trống bảo vệ: guideline quy định bằng chiều cao chữ "O", ở đây là
   kim cương — tức xấp xỉ đúng bằng chiều cao logo. Đặt thành biến để không ai
   vô tình đặt thứ gì sát vào. */
.logo { display: inline-flex; color: var(--ink-full); --logo-h: 35px; --logo-clear: var(--logo-h); }
.logo__svg { height: var(--logo-h); width: auto; display: block; }
.logo--onDark { color: var(--cream); }
.logo--onYellow { color: var(--ink-full); --logo-accent: var(--ink-full); }
.header__inner .logo { margin-right: var(--logo-clear); }

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav__item { position: relative; }
.nav__link {
  position: relative; display: flex; align-items: center; gap: 7px;
  padding: 10px 16px; font-weight: 500; font-size: 20px; color: var(--ink);
}
.nav__link::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: right;
  transition: transform .32s var(--ease);
}
.nav__item:hover .nav__link::after { transform: scaleX(1); transform-origin: left; }
.nav__caret { font-size: 9px; opacity: .5; transition: transform .3s var(--ease); }
.nav__item:hover .nav__caret { transform: rotate(180deg); }

.nav__panel {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 268px; padding: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .14);
  opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.98);
  transition: all .28s var(--ease);
}
.nav__item:hover .nav__panel, .nav__item:focus-within .nav__panel {
  opacity: 1; visibility: visible; transform: none;
}
.nav__panel--wide { min-width: 500px; columns: 2; column-gap: 8px; }
.nav__panel a {
  display: block; padding: 10px 14px; border-radius: 12px; font-size: 16px;
  break-inside: avoid; transition: background .2s, padding-left .25s var(--ease);
}
.nav__panel a:hover { background: rgba(255, 208, 0, .22); padding-left: 20px; }
.nav__panel hr { border: 0; border-top: 1px solid var(--line); margin: 8px 6px; }

.header__actions { display: flex; align-items: center; gap: 12px; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .7); display: grid; place-items: center;
  cursor: pointer; font-size: 16px; transition: all .3s var(--ease);
}
.icon-btn:hover { background: var(--yellow); border-color: transparent; transform: rotate(8deg); }
.burger { display: none; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position: relative; overflow: hidden; padding-bottom: 40px; }
.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 40px; align-items: center;
  max-width: var(--maxw); margin: 0 auto; padding: 70px var(--gutter) 130px;
}
.hero h1 { font-size: var(--fs-display); font-weight: 700; }
.hero__sub { margin-top: 26px; max-width: 52ch; font-size: var(--fs-lead); line-height: 1.78; }
.hero .btn { margin-top: 38px; }

.hero__art { position: relative; display: grid; place-items: center; min-height: 420px; }
.hero__art .ring {
  position: absolute; width: 150%; max-width: none; opacity: .85; z-index: 1;
  animation: spin 60s linear infinite;
}
.hero__art .core { position: relative; z-index: 2; width: 78%; max-width: 400px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.floaty { animation: float 6s ease-in-out infinite; }

/* Chữ hero hiện dần theo dòng */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span {
  display: block; transform: translateY(110%);
  animation: lineUp .95s var(--ease) forwards;
}
.reveal-line:nth-child(2) > span { animation-delay: .12s; }
@keyframes lineUp { to { transform: none; } }

.fade-up { opacity: 0; transform: translateY(22px); animation: fadeUp .9s var(--ease) forwards; }
.fade-up--1 { animation-delay: .30s; }
.fade-up--2 { animation-delay: .45s; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* =========================================================================
   HIỆU ỨNG KHI CUỘN
   ========================================================================= */
[data-r] { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-r].in { opacity: 1; transform: none; }
[data-r="left"]  { transform: translateX(-40px); }
[data-r="right"] { transform: translateX(40px); }
[data-r="zoom"]  { transform: scale(.94); }
[data-r].in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-r] { opacity: 1 !important; transform: none !important; }
}

/* =========================================================================
   SỐ LIỆU
   ========================================================================= */
.stats__head { max-width: 22ch; margin: 0 auto 90px; text-align: center; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.stat__n {
  font-family: "Inter Tight", sans-serif; font-weight: 700; color: var(--orange-text);
  font-size: clamp(42px, 5.4vw, 70px); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat__label { margin-top: 14px; font-size: 20px; max-width: 16ch; }

/* =========================================================================
   THẺ GIÁ TRỊ — ảnh phủ toàn thẻ + lớp cam + chữ trắng, bo 45
   ========================================================================= */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.vcard {
  position: relative; aspect-ratio: 430 / 470; border-radius: var(--r-card);
  overflow: hidden; isolation: isolate; background: #D9D9D9;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.vcard::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(160deg, rgba(240,150,25,.30), rgba(240,150,25,.62));
  transition: opacity .5s var(--ease);
}
.vcard img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.vcard h3 {
  position: absolute; z-index: 2; inset: 40px 40px auto 40px;
  color: var(--ink-full); font-size: var(--fs-h2); font-weight: 600; max-width: 9ch;
}
.vcard:hover { transform: translateY(-10px); box-shadow: 0 26px 60px rgba(240,150,25,.30); }
.vcard:hover img { transform: scale(1.07); }
.vcard:hover::after { opacity: .8; }

/* =========================================================================
   CASE STUDY
   ========================================================================= */
.case__stage { position: relative; }
.case__stage > img { width: 100%; border-radius: var(--r-card); }
.pill {
  position: absolute; z-index: 3; background: var(--surface); border-radius: 24px; padding: 18px 26px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .16);
}
.pill b {
  display: block; font-family: "Inter Tight", sans-serif; font-weight: 700;
  font-size: 46px; line-height: 1; color: var(--orange-text); letter-spacing: -.03em;
}
.pill span { font-size: 16px; color: var(--ink-50); }
.pill--a { top: 12%; left: -2%; animation: float 7s ease-in-out infinite; }
.pill--b { top: 4%; right: 2%; animation: float 6s ease-in-out .8s infinite; }
.pill--c { bottom: 10%; right: 16%; animation: float 8s ease-in-out .4s infinite; }

/* =========================================================================
   CHÚNG TÔI LÀM
   ========================================================================= */
.doing { display: grid; grid-template-columns: 330px 1fr; gap: 90px; align-items: start; }
.doing h2 { font-size: var(--fs-display); font-weight: 700; }
.doing .btn { margin-top: 30px; }
.svc a {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: 22px 6px; font-size: 25px; font-weight: 400; color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: color .35s var(--ease), padding-left .35s var(--ease);
}
.svc a::before {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.svc a::after {
  content: "→"; opacity: 0; transform: translateX(-8px);
  transition: all .35s var(--ease); color: var(--orange-text);
}
.svc a:hover { color: var(--orange-text); padding-left: 18px; }
.svc a:hover::before { transform: scaleX(1); }
.svc a:hover::after { opacity: 1; transform: none; }

/* =========================================================================
   TESTIMONIAL — gradient vàng→cam, bo 35, cao lệch nhau như Figma
   ========================================================================= */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; align-items: start; }
.qcard {
  background: linear-gradient(150deg, var(--yellow), var(--orange));
  border-radius: var(--r-quote); padding: 40px 36px;
  display: flex; flex-direction: column; gap: 18px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.qcard:nth-child(2) { margin-top: 46px; }
.qcard:nth-child(3) { margin-top: 18px; }
.qcard:hover { transform: translateY(-8px); box-shadow: 0 24px 56px rgba(240,150,25,.34); }
.qcard__who { display: flex; align-items: center; gap: 14px; }
.qcard__who img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.qcard__name { font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: 25px; }
.qcard__role { font-size: 15px; color: var(--ink-on-brand); }
.qcard p { font-size: 17px; }
.stars { color: var(--ink-full); letter-spacing: 3px; font-size: 15px; }

/* =========================================================================
   LOGO WALL — băng trượt vô tận
   ========================================================================= */
.marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; animation: slide 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__set { display: flex; align-items: center; gap: 92px; padding-right: 92px; }
.marquee img { height: 46px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .55; transition: all .35s var(--ease); }
.marquee img:hover { filter: none; opacity: 1; transform: scale(1.1); }
@keyframes slide { to { transform: translateX(-50%); } }

/* =========================================================================
   TIN TỨC — nền vàng 20%, bo 45
   ========================================================================= */
.ncard {
  position: relative; background: rgba(255, 208, 0, .20); border-radius: var(--r-card);
  padding: 30px; display: flex; flex-direction: column; gap: 16px; overflow: hidden;
  transition: transform .5s var(--ease), background .5s var(--ease);
}
.ncard:hover { transform: translateY(-10px); background: rgba(255, 208, 0, .34); }
.tag {
  align-self: flex-start; background: #fff; border-radius: var(--r-tag);
  padding: 8px 22px; font-size: 15px; font-weight: 600;
}
.ncard h3 { font-size: 22px; line-height: 1.3; min-height: 2.6em; }
.ncard time { font-size: 17px; color: var(--ink-50); }
.ncard__thumb { position: relative; border-radius: var(--r-card); overflow: hidden; margin-top: auto; }
.ncard__thumb img { aspect-ratio: 427 / 386; object-fit: cover; width: 100%; transition: transform .8s var(--ease); }
.ncard:hover .ncard__thumb img { transform: scale(1.06); }
.ncard__go {
  position: absolute; right: 22px; bottom: 22px; z-index: 2;
  width: 58px; height: 58px; border-radius: 50%; background: var(--yellow);
  display: grid; place-items: center; font-size: 20px;
  transition: transform .4s var(--ease);
}
.ncard:hover .ncard__go { transform: rotate(-45deg) scale(1.08); }

.dots { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 46px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
.dots i.on { background: var(--orange); width: 26px; border-radius: 999px; }

/* =========================================================================
   LIÊN HỆ
   ========================================================================= */
.contact { display: grid; grid-template-columns: .78fr 1.22fr; gap: 80px; align-items: center; }
.contact__art { border-radius: var(--r-card); overflow: hidden; }
.contact__art img { transition: transform .9s var(--ease); }
.contact__art:hover img { transform: scale(1.05); }
.field { position: relative; margin-bottom: 34px; }
.field > label { font-size: 25px; color: var(--ink-50); }
.field input, .field textarea {
  width: 100%; border: 0; border-bottom: 1.5px solid var(--line);
  padding: 12px 2px; font: inherit; font-size: 18px; background: transparent; outline: none;
  transition: border-color .35s var(--ease);
}
.field input:focus, .field textarea:focus { border-bottom-color: var(--orange-text); }
.field .hint { font-size: 14px; color: var(--ink-50); }
.contact .btn { margin-left: auto; }
.contact form { display: flex; flex-direction: column; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer { position: relative; background: var(--dark); color: var(--cream); padding: 84px 0 34px; overflow: hidden; }
.footer::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--yellow); opacity: .055;
  -webkit-mask: url(../img/hoa-tiet.svg) repeat center / 300px;
  mask: url(../img/hoa-tiet.svg) repeat center / 300px;
}
.footer .logo { --logo-h: 42px; }
.footer h4 { color: #fff; }
.footer a { color: #cfcfcf; font-size: 15px; transition: color .25s, padding-left .25s var(--ease); }
.footer a:hover { color: var(--yellow); padding-left: 5px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 40px; position: relative; z-index: 2; }
.footer h4 { font-family: "Inter Tight", sans-serif; font-size: 20px; margin: 0 0 18px; }
.footer__links { display: grid; gap: 11px; }
.footer__desc { color: #bdbdbd; font-size: 15px; max-width: 34ch; margin-top: 14px; }
.subscribe { display: flex; gap: 10px; margin-top: 22px; max-width: 360px; }
.subscribe input {
  flex: 1; border-radius: 999px; border: 1px solid #4a4a4a; background: #1f1f1f;
  color: #fff; padding: 13px 22px; font: inherit; font-size: 15px; outline: none;
  transition: border-color .3s;
}
.subscribe input:focus { border-color: var(--yellow); }
.subscribe button { width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; background: var(--yellow); font-size: 17px; transition: transform .3s var(--ease); }
.subscribe button:hover { transform: translateX(3px); }
.social { display: flex; gap: 12px; margin-top: 20px; }
.social a {
  width: 40px; height: 40px; border-radius: 50%; background: #3a3a3a; color: #fff;
  display: grid; place-items: center; font-size: 15px; padding: 0 !important;
  transition: all .3s var(--ease);
}
.social a:hover { background: var(--yellow); color: var(--ink-full); transform: translateY(-3px); }
.footer__bottom {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 66px; padding-top: 26px; border-top: 1px solid #414141;
  font-size: 14px; color: #9d9d9d; position: relative; z-index: 2;
}
.footer__glow {
  position: absolute; right: -160px; bottom: -220px; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,208,0,.16), transparent 68%); z-index: 1;
}

/* =========================================================================
   WIDGET CHAT + THANH ĐỐI CHIẾU
   ========================================================================= */
.chat { position: fixed; right: 22px; bottom: 22px; z-index: 90; }
.chat__toggle {
  width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--yellow); font-size: 25px; box-shadow: 0 12px 34px rgba(0,0,0,.24);
  transition: transform .35s var(--ease);
}
.chat__toggle:hover { transform: scale(1.08) rotate(-8deg); }
.chat__toggle::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--yellow); animation: ping 2.6s ease-out infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
.chat__menu {
  position: absolute; right: 0; bottom: 74px; width: 236px; padding: 10px;
  background: #fff; border-radius: 18px; border: 1px solid var(--line);
  box-shadow: 0 22px 54px rgba(0,0,0,.20);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.96);
  transition: all .3s var(--ease);
}
.chat__menu.open { opacity: 1; visibility: visible; transform: none; }
.chat__menu a { display: flex; gap: 11px; align-items: center; padding: 12px 14px; border-radius: 12px; font-size: 15px; }
.chat__menu a:hover { background: rgba(255,208,0,.22); }

.diffbar {
  position: fixed; left: 22px; bottom: 22px; z-index: 90;
  background: var(--ink-full); color: #fff; border: 0; border-radius: 999px;
  padding: 13px 22px; font: 600 14px Inter, sans-serif; cursor: pointer;
  box-shadow: 0 12px 34px rgba(0,0,0,.24); transition: transform .3s var(--ease);
}
.diffbar:hover { transform: translateY(-2px); }
body.show-diff [data-diff] { outline: 2px dashed var(--orange); outline-offset: 8px; position: relative; }
body.show-diff [data-diff]::before {
  content: attr(data-diff); position: absolute; top: -14px; left: 0; z-index: 40;
  background: var(--orange); color: #fff; font: 600 11px/1.8 Inter, sans-serif;
  padding: 0 10px; border-radius: 999px; white-space: nowrap;
}

/* =========================================================================
   RESPONSIVE — 8 quy tắc ở spec §5.5
   ========================================================================= */
@media (max-width: 1200px) { :root { --gutter: 40px; } }

@media (max-width: 991px) {
  :root { --gutter: 28px; --r-card: 32px; --r-quote: 26px; }
  body { font-size: 16px; }
  .section { padding: 74px 0; }
  .hero__inner { grid-template-columns: 1fr; padding: 30px var(--gutter) 80px; }
  .hero__art { order: -1; min-height: 260px; }
  .hero__art .core { max-width: 220px; }        /* hero 3D thu nhỏ, ưu tiên chữ */
  .hero__sub { font-size: 17px; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 46px; }   /* 4 số → lưới 2×2 */
  .stat__label { font-size: 16px; }
  .doing { grid-template-columns: 1fr; gap: 34px; }
  .svc a { font-size: 20px; padding: 17px 4px; }
  .contact { grid-template-columns: 1fr; gap: 40px; }
  .field > label { font-size: 19px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .quotes { grid-template-columns: 1fr; gap: 20px; }
  .qcard { margin-top: 0 !important; }

  .burger { display: grid; }

  /* Khoảng trống thương hiệu quanh logo là quy tắc tách logo khỏi menu ngang.
     Ở đây menu đã thành drawer nên không còn gì để tách, mà 35px đó cộng với
     logo 161px và cụm nút 197px thì vượt khung 430px.
     margin-left: auto thay cho khoảng trống mà .nav để lại khi bị ẩn. */
  .header__inner .logo { margin-right: 0; }
  .header__actions { margin-left: auto; }

  .nav {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 14px 18px 28px; background: #fff; box-shadow: 0 20px 40px rgba(0,0,0,.12);
    max-height: calc(100vh - 72px); overflow-y: auto; display: none;
  }
  .nav.open { display: flex; }                  /* drawer accordion */
  .nav__link { justify-content: space-between; padding: 15px 6px; font-size: 18px; }
  .nav__link::after { display: none; }
  .nav__panel {
    position: static; opacity: 1; visibility: visible; transform: none; display: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--line); border-radius: 0;
    margin: 0 0 8px 12px; padding: 0 0 0 10px; min-width: 0; columns: 1;
  }
  .nav__item.open .nav__panel { display: block; }
  .nav__item:hover .nav__caret { transform: none; }
  .nav__item.open .nav__caret { transform: rotate(180deg); }
}

@media (max-width: 767px) {
  /* Lưới 3 cột → carousel trượt ngang */
  .cards3, .news-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px;
    margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px; scrollbar-width: none;
  }
  .cards3::-webkit-scrollbar, .news-grid::-webkit-scrollbar { display: none; }
  .cards3 > *, .news-grid > * { flex: 0 0 76%; scroll-snap-align: start; }

  .pill { position: static; box-shadow: none; border: 1px solid var(--line); animation: none; padding: 14px 18px; }
  .pill b { font-size: 32px; }
  .case__stage { display: grid; gap: 14px; }
  .case__pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .footer__grid { grid-template-columns: 1fr; }
  .contact .btn { margin-left: 0; justify-content: center; }
  .marquee__set { gap: 48px; padding-right: 48px; }
  .glow { opacity: .55; }
}

@media (max-width: 479px) {
  /* Dưới 430px, chỉ bỏ khoảng trống quanh logo là chưa đủ chỗ cho cụm nút.
     Thu lề trang và thu logo, thay vì giấu nút tìm kiếm — giấu là mất hẳn
     một chức năng, vì drawer không có lối vào tìm kiếm nào khác. */
  :root { --gutter: 18px; }
  .logo { --logo-h: 28px; }

  .case__pills { grid-template-columns: 1fr; }
  .cards3 > *, .news-grid > * { flex-basis: 86%; }
  .diffbar { padding: 11px 16px; font-size: 12.5px; }
}

/* =========================================================================
   KHUÔN 4 — CHI TIẾT BÀI VIẾT
   Không có trong Figma. Dựng mới theo ngôn ngữ thị giác đã có.
   ========================================================================= */
.btn--sm { padding: 12px 26px; font-size: 17px; }

.crumb { display: flex; gap: 10px; flex-wrap: wrap; font-size: 15px; color: var(--ink-50); padding: 26px 0 0; }
.crumb a:hover { color: var(--orange-text); }

.art-head { position: relative; padding: 34px 0 54px; overflow: hidden; }
.art-head .wrap { position: relative; z-index: 2; max-width: 900px; }
.art-tag {
  display: inline-block; background: var(--yellow); border-radius: var(--r-tag);
  padding: 8px 22px; font-size: 15px; font-weight: 600; margin-bottom: 26px;
}
.art-head h1 { font-size: var(--fs-h1); font-weight: 700; }
.art-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 32px; }
.art-meta img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.art-meta__name { font-weight: 700; font-size: 18px; }
.art-meta__sub { font-size: 15px; color: var(--ink-50); }
.art-meta__sep { width: 1px; height: 34px; background: var(--line); }

.art-cover { max-width: 1100px; margin: 0 auto 70px; padding: 0 var(--gutter); }
.art-cover img { width: 100%; border-radius: var(--r-card); aspect-ratio: 16/8; object-fit: cover; }

/* Bố cục: mục lục dính bên trái — nội dung — thanh chia sẻ dính bên phải */
.art-grid {
  display: grid; grid-template-columns: 250px minmax(0, 1fr) 68px;
  gap: 56px; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 90px;
  align-items: start;
}

.toc { position: sticky; top: 110px; }
.toc__label { font-size: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 16px; }
.toc a {
  display: block; padding: 8px 0 8px 16px; font-size: 15.5px; color: var(--ink-50);
  border-left: 2px solid var(--line); transition: all .3s var(--ease);
}
.toc a:hover { color: var(--ink); border-left-color: var(--orange-text); }
.toc a.active { color: var(--ink-full); font-weight: 600; border-left-color: var(--orange-text); }
.toc__progress { height: 3px; background: var(--line); border-radius: 3px; margin-top: 22px; overflow: hidden; }
.toc__progress i { display: block; height: 100%; width: 0; background: var(--orange-text); transition: width .1s linear; }

.share { position: sticky; top: 110px; display: grid; gap: 10px; justify-items: center; }
.share span { font-size: 12px; color: var(--ink-50); writing-mode: vertical-rl; margin-bottom: 6px; }
.share a {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 15px; font-weight: 600;
  transition: all .3s var(--ease);
}
.share a:hover { background: var(--yellow); border-color: transparent; transform: translateY(-3px); }

/* Kiểu chữ thân bài */
/* Ngoại lệ có chủ đích: thân bài dài đọc thoải mái hơn ở 18px */
.prose { font-size: var(--fs-lead); line-height: 1.78; }
.prose > * + * { margin-top: 26px; }
.prose h2 { font-size: var(--fs-h3); font-weight: 600; margin-top: 58px; scroll-margin-top: 110px; }
.prose h3 { font-size: var(--fs-h4); font-weight: 500; margin-top: 40px; scroll-margin-top: 110px; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li + li { margin-top: 10px; }
.prose a { color: var(--orange-text); text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: 28px; width: 100%; }
.prose figure figcaption { margin-top: 12px; font-size: 15px; color: var(--ink-50); text-align: center; }
.prose blockquote {
  margin: 42px 0; padding: 30px 34px; border-radius: var(--r-quote);
  background: linear-gradient(150deg, var(--yellow), var(--orange));
  font-family: "Inter Tight", sans-serif; font-size: 23px; font-weight: 600; line-height: 1.45;
}
.prose blockquote cite { display: block; margin-top: 14px; font-family: Inter, sans-serif; font-size: 15px; font-weight: 400; font-style: normal; color: var(--ink-on-brand); }
.callout {
  border-radius: 28px; background: rgba(255, 208, 0, .18); padding: 26px 30px;
  border-left: 4px solid var(--yellow); font-size: 17.5px;
}
.callout b { display: block; margin-bottom: 6px; font-family: "Inter Tight", sans-serif; font-size: 19px; }

/* CTA chèn giữa bài — điểm chuyển đổi chính của trang */
.inline-cta {
  margin: 58px 0; padding: 38px; border-radius: var(--r-card);
  background: linear-gradient(140deg, var(--yellow), var(--orange));
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
}
.inline-cta h3 { font-size: 27px; max-width: 20ch; }
.inline-cta p { font-size: 16px; margin-top: 8px; color: var(--ink-on-brand); }
.inline-cta .btn { background: var(--ink-full); color: #fff; }
.inline-cta .btn::before { background: #fff; }
.inline-cta .btn:hover { color: var(--ink-full); }
.inline-cta .btn__arrow { background: var(--yellow); color: var(--ink-full); }

/* Hộp tác giả */
.authorbox {
  margin-top: 66px; padding: 34px; border-radius: var(--r-card);
  background: rgba(255, 208, 0, .13); display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap;
}
.authorbox img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.authorbox h4 { font-family: "Inter Tight", sans-serif; font-size: 22px; margin: 0 0 4px; }
.authorbox .role { font-size: 15px; color: var(--ink-50); margin-bottom: 12px; }
.authorbox p { font-size: 16px; max-width: 60ch; }

/* Đăng ký nhận bài mới */
.subcard {
  margin-top: 34px; padding: 40px; border-radius: var(--r-card); background: var(--dark); color: #fff;
  display: grid; gap: 18px;
}
.subcard h3 { color: #fff; font-size: 26px; max-width: 22ch; }
.subcard p { color: #bdbdbd; font-size: 16px; }
.subcard form { display: flex; gap: 10px; flex-wrap: wrap; }
.subcard input {
  flex: 1 1 240px; border-radius: 999px; border: 1px solid #4a4a4a; background: #1f1f1f;
  color: #fff; padding: 14px 22px; font: inherit; font-size: 15px; outline: none;
}
.subcard input:focus { border-color: var(--yellow); }
.subcard .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: #bdbdbd; }

@media (max-width: 1100px) {
  .art-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { position: static; margin-bottom: 40px; padding: 22px; border-radius: 24px; background: rgba(255,208,0,.13); }
  .share {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 70;
    grid-auto-flow: column; justify-content: center; gap: 14px; padding: 10px;
    background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
  }
  .share span { display: none; }
  body { padding-bottom: 70px; }
}
@media (max-width: 767px) {
  .prose { font-size: 17px; }
  .inline-cta { padding: 26px; }
  .art-meta__sep { display: none; }
}

/* =========================================================================
   KHUÔN 3 — LISTING CÓ BỘ LỌC (Tin tức · Case study · Tài liệu · Sự kiện)
   ========================================================================= */
.page-head { position: relative; padding: 56px 0 46px; overflow: hidden; }
.page-head .wrap { position: relative; z-index: 2; }
.page-head h1 { font-size: var(--fs-h1); font-weight: 700; max-width: 18ch; }
.page-head p { margin-top: 20px; max-width: 58ch; font-size: 19px; color: var(--ink-50); }

.chips { display: flex; gap: 12px; flex-wrap: wrap; margin: 40px 0 54px; }
.chip {
  padding: 11px 26px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; font-size: 16px; font-weight: 500; cursor: pointer;
  transition: all .3s var(--ease);
}
.chip:hover { border-color: var(--orange-text); color: var(--orange-text); }
.chip.on { background: var(--yellow); border-color: transparent; font-weight: 600; }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; }

.pager { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 66px; }
.pager a, .pager span {
  min-width: 46px; height: 46px; padding: 0 14px; border-radius: 999px;
  display: grid; place-items: center; font-size: 16px; border: 1px solid var(--line);
  transition: all .3s var(--ease);
}
.pager a:hover { border-color: var(--orange-text); color: var(--orange-text); }
.pager .on { background: var(--yellow); border-color: transparent; font-weight: 700; }

/* Thẻ case study — có số liệu kết quả */
.cscard {
  border-radius: var(--r-card); overflow: hidden; background: rgba(255, 208, 0, .16);
  display: flex; flex-direction: column; transition: transform .5s var(--ease), background .5s var(--ease);
}
.cscard:hover { transform: translateY(-10px); background: rgba(255, 208, 0, .30); }
.cscard__img { overflow: hidden; }
.cscard__img img { aspect-ratio: 16/10; object-fit: cover; width: 100%; transition: transform .8s var(--ease); }
.cscard:hover .cscard__img img { transform: scale(1.06); }
.cscard__body { padding: 28px; display: grid; gap: 14px; }
.cscard h3 { font-size: 22px; line-height: 1.3; }
.cscard__ind { font-size: 14px; color: var(--ink-50); }
.metrics { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 4px; }
.metrics b { display: block; font-family: "Inter Tight", sans-serif; font-size: 30px; color: var(--orange-text); line-height: 1; }
.metrics span { font-size: 13px; color: var(--ink-50); }

/* Thẻ tài liệu */
.rcard {
  border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line);
  padding: 24px; display: grid; gap: 16px; transition: all .45s var(--ease);
}
.rcard:hover { transform: translateY(-8px); box-shadow: 0 22px 50px rgba(0,0,0,.10); border-color: transparent; }
.rcard__cover { border-radius: 24px; overflow: hidden; background: rgba(255,208,0,.18); }
.rcard__cover img { aspect-ratio: 4/3; object-fit: cover; }
.rcard h3 { font-size: 20px; line-height: 1.32; }
.rcard .lock { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-50); }

/* Danh sách dạng dòng — Tuyển dụng, Thuật ngữ */
.rows { border-top: 1px solid var(--line); }
.row {
  display: flex; align-items: center; gap: 26px; padding: 26px 6px;
  border-bottom: 1px solid var(--line); transition: all .35s var(--ease);
}
.row:hover { padding-left: 20px; background: rgba(255,208,0,.10); }
.row h3 { font-size: 23px; flex: 1; }
.row__meta { display: flex; gap: 22px; flex-wrap: wrap; font-size: 15px; color: var(--ink-50); }
.row__go { width: 46px; height: 46px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; transition: transform .35s var(--ease); }
.row:hover .row__go { transform: rotate(-45deg); }
.rows__group { margin-top: 54px; }
.rows__group > h2 { font-size: 26px; margin-bottom: 8px; }

/* Từ điển thuật ngữ — chỉ mục A–Z */
.az { display: flex; gap: 7px; flex-wrap: wrap; margin: 36px 0 48px; }
.az a {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  border: 1px solid var(--line); font-weight: 600; font-size: 15px; transition: all .25s var(--ease);
}
.az a:hover { background: var(--yellow); border-color: transparent; }
.az a.off { opacity: .3; pointer-events: none; }
.glossary { display: grid; gap: 46px; }
.glossary h2 { font-size: 34px; color: var(--orange-text); }
.gterms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 36px; margin-top: 14px; }
.gterm { padding: 16px 4px; border-bottom: 1px solid var(--line); transition: padding-left .3s var(--ease); }
.gterm:hover { padding-left: 12px; }
.gterm b { font-size: 18px; }
.gterm span { display: block; font-size: 15px; color: var(--ink-50); }

/* Sự kiện — thẻ có huy hiệu ngày */
.ecard {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  background: rgba(255,208,0,.16); display: flex; flex-direction: column;
  transition: transform .5s var(--ease);
}
.ecard:hover { transform: translateY(-10px); }
.ecard__img { position: relative; overflow: hidden; }
.ecard__img img { aspect-ratio: 16/9; object-fit: cover; width: 100%; transition: transform .8s var(--ease); }
.ecard:hover .ecard__img img { transform: scale(1.06); }
.date-badge {
  position: absolute; top: 20px; left: 20px; z-index: 2; background: #fff;
  border-radius: 20px; padding: 12px 18px; text-align: center; box-shadow: 0 10px 26px rgba(0,0,0,.14);
}
.date-badge b { display: block; font-family: "Inter Tight", sans-serif; font-size: 28px; line-height: 1; }
.date-badge span { font-size: 12px; color: var(--ink-50); text-transform: uppercase; letter-spacing: .06em; }
.ecard__body { padding: 26px; display: grid; gap: 12px; }
.ecard h3 { font-size: 21px; line-height: 1.3; }
.ecard__meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14.5px; color: var(--ink-50); }
.badge {
  display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
}
.badge--open { background: #E8F7EC; color: #1B7A38; }
.badge--closed { background: #F1F1F1; color: var(--ink-50); }
.badge--past { background: #F1F1F1; color: var(--ink-50); }

/* =========================================================================
   KHUÔN 5 — CHI TIẾT DỊCH VỤ
   ========================================================================= */
.svc-hero { position: relative; overflow: hidden; padding: 40px 0 70px; }
.svc-hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; }
.svc-hero h1 { font-size: var(--fs-h1); font-weight: 700; }
.svc-hero p { margin-top: 22px; font-size: 20px; max-width: 46ch; }
.svc-hero .btn { margin-top: 32px; }

.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.feat__it { padding: 30px; border-radius: 32px; background: rgba(255,208,0,.14); transition: all .45s var(--ease); }
.feat__it:hover { background: rgba(255,208,0,.28); transform: translateY(-6px); }
.feat__n { font-family: "Inter Tight", sans-serif; font-size: 20px; font-weight: 700; color: var(--orange-text); }
.feat__it h3 { font-size: 21px; margin: 12px 0 10px; }
.feat__it p { font-size: 16px; color: var(--ink-50); }

.steps { display: grid; gap: 18px; counter-reset: s; }
.step {
  display: grid; grid-template-columns: 76px 1fr; gap: 24px; align-items: start;
  padding: 28px 30px; border-radius: 32px; background: rgba(255,208,0,.12);
}
.step__n {
  width: 60px; height: 60px; border-radius: 50%; background: var(--yellow);
  display: grid; place-items: center; font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: 22px;
}
.step h3 { font-size: 22px; margin-bottom: 8px; }
.step p { font-size: 16.5px; color: var(--ink-50); }

.faq { display: grid; gap: 14px; }
.faq details {
  border-radius: 26px; background: rgba(255,208,0,.12); padding: 22px 28px;
  transition: background .3s var(--ease);
}
.faq details[open] { background: rgba(255,208,0,.24); }
.faq summary {
  cursor: pointer; list-style: none; font-family: "Inter Tight", sans-serif;
  font-size: 20px; font-weight: 600; display: flex; justify-content: space-between; gap: 18px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; line-height: 1; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin-top: 14px; font-size: 16.5px; color: var(--ink-50); }

.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-card); padding: 56px; margin-top: 20px;
  background: linear-gradient(140deg, var(--yellow), var(--orange));
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.cta-band h2 { font-size: var(--fs-h2); font-weight: 600; max-width: 18ch; }
.cta-band .btn { background: var(--ink-full); color: #fff; }
.cta-band .btn::before { background: #fff; }
.cta-band .btn:hover { color: var(--ink-full); }
.cta-band .btn__arrow { background: var(--yellow); color: var(--ink-full); }

/* =========================================================================
   KHUÔN 6 — CHI TIẾT CASE STUDY
   ========================================================================= */
.cs-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  padding: 34px; border-radius: var(--r-card); background: rgba(255,208,0,.14);
}
.cs-facts dt { font-size: 14px; color: var(--ink-50); margin-bottom: 6px; }
.cs-facts dd { margin: 0; font-family: "Inter Tight", sans-serif; font-size: 19px; font-weight: 600; }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.result {
  padding: 36px; border-radius: 34px; text-align: center;
  background: linear-gradient(150deg, var(--yellow), var(--orange));
}
.result b { display: block; font-family: "Inter Tight", sans-serif; font-size: clamp(38px, 4.4vw, 58px); line-height: 1; }
.result span { font-size: 16px; color: var(--ink-on-brand); }

/* =========================================================================
   KHUÔN 8 — TÀI LIỆU GATED
   ========================================================================= */
.gate { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.gate__cover { border-radius: var(--r-card); overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.14); }
.gate__form { padding: 40px; border-radius: var(--r-card); background: rgba(255,208,0,.14); }
.gate__form h2 { font-size: 28px; margin-bottom: 8px; }
.gate__form > p { font-size: 16px; color: var(--ink-50); margin-bottom: 26px; }
.gate ul { padding-left: 22px; display: grid; gap: 10px; font-size: 17px; }

/* =========================================================================
   KHUÔN 9 — TRANG SỰ KIỆN
   ========================================================================= */
.ev-hero { position: relative; overflow: hidden; padding: 40px 0 60px; }
.ev-hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: start; }
.ev-hero h1 { font-size: var(--fs-h1); font-weight: 700; }
.ev-facts { display: grid; gap: 16px; margin-top: 32px; }
.ev-fact { display: flex; gap: 14px; align-items: center; font-size: 18px; }
.ev-fact i { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,208,0,.28); display: grid; place-items: center; font-style: normal; }
.ev-form {
  padding: 36px; border-radius: var(--r-card); background: #fff;
  border: 1px solid var(--line); box-shadow: 0 26px 60px rgba(0,0,0,.10); position: sticky; top: 110px;
}
.ev-form h2 { font-size: 25px; margin-bottom: 6px; }
.ev-form .seats { font-size: 15px; color: var(--ink-50); margin-bottom: 22px; }
.countdown { display: flex; gap: 12px; margin-bottom: 24px; }
.countdown div { flex: 1; text-align: center; padding: 14px 6px; border-radius: 18px; background: rgba(255,208,0,.20); }
.countdown b { display: block; font-family: "Inter Tight", sans-serif; font-size: 26px; line-height: 1; }
.countdown span { font-size: 12px; color: var(--ink-50); }

.agenda { display: grid; gap: 0; border-top: 1px solid var(--line); }
.agenda__row { display: grid; grid-template-columns: 130px 1fr; gap: 26px; padding: 22px 4px; border-bottom: 1px solid var(--line); }
.agenda__t { font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: 19px; color: var(--orange-text); }
.agenda h3 { font-size: 20px; margin-bottom: 4px; }
.agenda p { font-size: 15.5px; color: var(--ink-50); }

.speakers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.spk { text-align: center; }
.spk img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin: 0 auto 18px; transition: transform .5s var(--ease); }
.spk:hover img { transform: scale(1.06); }
.spk h3 { font-size: 21px; }
.spk span { font-size: 15px; color: var(--ink-50); }

/* =========================================================================
   KHUÔN 10 — TIỆN ÍCH
   ========================================================================= */
.util { position: relative; overflow: hidden; min-height: 74vh; display: grid; place-items: center; text-align: center; padding: 80px 0; }
.util .wrap { position: relative; z-index: 2; max-width: 720px; }
.util__mark { font-family: "Inter Tight", sans-serif; font-weight: 800; font-size: clamp(80px, 16vw, 190px); line-height: .9; color: var(--yellow); -webkit-text-stroke: 2px var(--ink-full); letter-spacing: -.05em; }
.util h1 { font-size: var(--fs-h1); font-weight: 700; margin-top: 20px; }
.util p { margin-top: 18px; font-size: 19px; color: var(--ink-50); }
.util__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.tick { width: 108px; height: 108px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; font-size: 50px; margin: 0 auto; animation: pop .6s var(--ease); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.next-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 54px; text-align: left; }
.next-steps a { padding: 24px; border-radius: 28px; background: rgba(255,208,0,.14); transition: all .4s var(--ease); }
.next-steps a:hover { background: rgba(255,208,0,.30); transform: translateY(-5px); }
.next-steps b { display: block; font-family: "Inter Tight", sans-serif; font-size: 18px; margin-bottom: 6px; }
.next-steps span { font-size: 15px; color: var(--ink-50); }

.legal { max-width: 860px; }
.legal h2 { font-size: 27px; margin-top: 48px; }
.legal p, .legal li { font-size: 17.5px; }
.legal ul { padding-left: 24px; display: grid; gap: 8px; margin-top: 14px; }

/* =========================================================================
   TRANG CHỈ MỤC KHUÔN — chỉ dùng để review, không thuộc website
   ========================================================================= */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.tpl {
  padding: 26px; border-radius: 28px; border: 1px solid var(--line); display: grid; gap: 8px;
  transition: all .4s var(--ease);
}
.tpl:hover { border-color: var(--orange-text); transform: translateY(-5px); box-shadow: 0 20px 44px rgba(0,0,0,.09); }
.tpl__n { font-size: 13px; font-weight: 700; color: var(--orange-text); letter-spacing: .08em; }
.tpl h3 { font-size: 20px; }
.tpl span { font-size: 14.5px; color: var(--ink-50); }
.tpl__flag { font-size: 12.5px; padding: 4px 12px; border-radius: 999px; background: rgba(255,208,0,.3); justify-self: start; }

@media (max-width: 991px) {
  .grid3, .feat, .result-grid, .speakers, .next-steps, .cs-facts { grid-template-columns: repeat(2, 1fr); }
  .grid2, .gate, .gterms { grid-template-columns: 1fr; }
  .svc-hero .wrap, .ev-hero .wrap { grid-template-columns: 1fr; }
  .ev-form { position: static; }
  .cta-band { padding: 36px; }
  .row { flex-wrap: wrap; gap: 14px; }
}
@media (max-width: 767px) {
  .grid3, .feat, .result-grid, .speakers, .next-steps, .cs-facts { grid-template-columns: 1fr; }
  .agenda__row { grid-template-columns: 1fr; gap: 6px; }
  .step { grid-template-columns: 1fr; gap: 14px; }
  .countdown { gap: 8px; }
  .page-head { padding: 34px 0 30px; }
}

/* =========================================================================
   BỔ SUNG SAU AUDIT 2026-08-21
   ========================================================================= */

/* --- Hiển thị vùng focus cho người dùng bàn phím --- */
:focus-visible {
  outline: 3px solid var(--orange-text);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible, .chip:focus-visible, .icon-btn:focus-visible,
.chat__toggle:focus-visible, .row__go:focus-visible { outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- Banner đồng ý cookie (seam S10) --- */
.cookie {
  position: fixed; left: 22px; right: 22px; bottom: 22px; z-index: 95;
  max-width: 680px; margin: 0 auto; padding: 24px 28px;
  background: #fff; border: 1px solid var(--line); border-radius: 26px;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .20);
  display: none; gap: 20px; align-items: center; flex-wrap: wrap;
}
.cookie.show { display: flex; animation: cookieUp .5s var(--ease); }
@keyframes cookieUp { from { opacity: 0; transform: translateY(24px); } }
.cookie p { flex: 1 1 300px; font-size: 15.5px; }
.cookie a { color: var(--orange-text); text-decoration: underline; text-underline-offset: 3px; }
.cookie__acts { display: flex; gap: 10px; flex-wrap: wrap; }
/* Nút từ chối phải dễ bấm ngang nút đồng ý — cố tình không làm mờ đi */
.cookie .btn { padding: 11px 24px; font-size: 16px; }

/* --- Lớp phủ tìm kiếm --- */
.searchbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px); display: none; padding: 12vh 22px 0;
}
.searchbox.show { display: block; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.searchbox__panel {
  max-width: 720px; margin: 0 auto; background: #fff; border-radius: 30px; padding: 12px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .3); animation: cookieUp .35s var(--ease);
}
.searchbox input {
  width: 100%; border: 0; outline: none; font: inherit; font-size: 22px;
  padding: 20px 24px; background: transparent;
}
.searchbox__hint { padding: 0 26px 18px; font-size: 14px; color: var(--ink-50); }
.searchbox__quick { border-top: 1px solid var(--line); padding: 14px; display: grid; gap: 4px; }
.searchbox__quick a { padding: 12px 16px; border-radius: 14px; font-size: 16px; }
.searchbox__quick a:hover { background: rgba(255, 208, 0, .2); }

/* --- Trạng thái rỗng khi lọc không ra kết quả --- */
.empty {
  padding: 80px 30px; text-align: center; border-radius: var(--r-card);
  background: rgba(255, 208, 0, .10); color: var(--ink-full);
  --pat-op: .10; --pat-size: 130px;
}
.empty__icon { font-size: 54px; }
.empty h3 { font-size: 25px; margin: 18px 0 10px; }
.empty p { color: var(--ink-50); max-width: 46ch; margin: 0 auto 26px; }

/* --- Trạng thái form: đang gửi / thành công / lỗi --- */
.btn[aria-busy="true"] { pointer-events: none; opacity: .75; }
.btn[aria-busy="true"] .btn__arrow { animation: spin 1s linear infinite; }
.formmsg {
  display: none; gap: 12px; align-items: flex-start; margin-top: 18px;
  padding: 16px 20px; border-radius: 18px; font-size: 15.5px;
}
.formmsg.show { display: flex; animation: cookieUp .4s var(--ease); }
.formmsg--ok { background: #E8F7EC; border: 1px solid #A8DFB8; }
.formmsg--err { background: #FDE9E7; border: 1px solid #F3B4AE; }

/* --- Khuôn 4b: chi tiết thuật ngữ (ngắn hơn bài viết nhiều) --- */
.term-def {
  padding: 34px 38px; border-radius: var(--r-card);
  background: linear-gradient(150deg, var(--yellow), var(--orange));
  font-family: "Inter Tight", sans-serif; font-size: 24px; font-weight: 600; line-height: 1.45;
}
.term-rel { display: flex; gap: 12px; flex-wrap: wrap; }
.term-rel a {
  padding: 10px 22px; border-radius: 999px; border: 1px solid var(--line); font-size: 16px;
  transition: all .3s var(--ease);
}
.term-rel a:hover { background: var(--yellow); border-color: transparent; }

/* --- Khuôn 3f: trang kết quả tìm kiếm --- */
.sresult {
  display: block; padding: 26px 4px; border-bottom: 1px solid var(--line);
  transition: padding-left .3s var(--ease);
}
.sresult:hover { padding-left: 14px; }
.sresult__kind { font-size: 13px; font-weight: 700; color: var(--orange-text); letter-spacing: .06em; text-transform: uppercase; }
.sresult h3 { font-size: 23px; margin: 8px 0 6px; }
.sresult p { font-size: 16px; color: var(--ink-50); }
.sresult mark { background: rgba(255, 208, 0, .55); padding: 0 3px; border-radius: 3px; }
.searchbar { display: flex; gap: 12px; max-width: 640px; }
.searchbar input {
  flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 15px 26px;
  font: inherit; font-size: 17px; outline: none; transition: border-color .3s;
}
.searchbar input:focus { border-color: var(--orange-text); }

/* --- Khuôn 9b: template landing page campaign --- */
.lp-hero {
  position: relative; overflow: hidden; padding: 50px 0 70px;
  background: linear-gradient(160deg, rgba(255,208,0,.22), rgba(255,255,255,0) 62%);
}
.lp-hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: center; }
.lp-hero h1 { font-size: var(--fs-h1); font-weight: 700; }
.lp-hero .bullets { display: grid; gap: 14px; margin-top: 30px; }
.lp-hero .bullets div { display: flex; gap: 12px; font-size: 18px; }
.lp-hero .bullets i { color: var(--orange-text); font-style: normal; font-weight: 700; }
.lp-note {
  margin-top: 30px; padding: 18px 22px; border-radius: 20px;
  background: rgba(0,0,0,.05); font-size: 14.5px; color: var(--ink-50);
}
.trustbar { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; opacity: .6; }
.trustbar img { height: 32px; filter: grayscale(1); }

@media (max-width: 991px) {
  .lp-hero .wrap { grid-template-columns: 1fr; }
  .cookie { left: 12px; right: 12px; bottom: 12px; padding: 20px; }
  .searchbox { padding-top: 8vh; }
}

/* =========================================================================
   TRANG PHỤ LỤC SỐ HOÁ — chỉ để duyệt, không thuộc website
   ========================================================================= */
.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.sw { border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.sw__chip { height: 120px; }
.sw__meta { padding: 18px 20px; display: grid; gap: 3px; }
.sw__meta b { font-family: "Inter Tight", sans-serif; font-size: 17px; }
.sw__meta code { font-size: 14px; color: var(--ink-50); }
.sw__meta span { font-size: 13.5px; color: var(--ink-50); }
.sw__use { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; }

.ratio { display: flex; height: 62px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.ratio div { display: grid; place-items: center; font-size: 13px; font-weight: 700; }

.scale-row {
  display: grid; grid-template-columns: 110px 1fr 150px; gap: 24px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.scale-row__k { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--ink-50); }
.scale-row__spec { font-size: 13.5px; color: var(--ink-50); text-align: right; font-variant-numeric: tabular-nums; }
.scale-row__spec del { opacity: .55; }

.pairs { width: 100%; border-collapse: collapse; }
.pairs th, .pairs td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
.pairs th { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-50); }
.pairs .ok { color: #1B7A38; font-weight: 700; }
.pairs .no { color: #B3261E; font-weight: 700; }
.pairs .demo { border-radius: 10px; padding: 7px 14px; display: inline-block; font-weight: 600; }

.states { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.note-card {
  padding: 24px 28px; border-radius: 26px; background: rgba(255, 208, 0, .16);
  border-left: 4px solid var(--yellow);
}
.note-card b { display: block; font-family: "Inter Tight", sans-serif; font-size: 18px; margin-bottom: 6px; }

/* =========================================================================
   KHÁCH HÀNG & CÔNG VIỆC THẬT — dùng ảnh chiến dịch trong brand guideline
   ========================================================================= */
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.work {
  position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 1;
  background: rgba(255, 208, 0, .14); display: block;
}
.work img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.work:hover img { transform: scale(1.07); }
.work__cap {
  position: absolute; inset: auto 0 0 0; z-index: 2; padding: 44px 20px 18px;
  background: linear-gradient(transparent, rgba(10, 10, 10, .84));
  color: #fff; opacity: 0; transform: translateY(10px);
  transition: all .4s var(--ease);
}
.work:hover .work__cap { opacity: 1; transform: none; }
.work__cap b { display: block; font-family: "Inter Tight", sans-serif; font-size: 16px; }
.work__cap span { font-size: 13px; opacity: .82; }
.work--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.work--tall { grid-row: span 2; aspect-ratio: 1 / 2; }

.clients { display: flex; gap: 56px; align-items: center; justify-content: center; flex-wrap: wrap; }
.client-name {
  font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: clamp(20px, 2.4vw, 30px);
  color: var(--ink-50); letter-spacing: -.02em; transition: color .3s var(--ease);
}
.client-name:hover { color: var(--ink-full); }

/* Ba lockup logo chính thức */
.lockups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lockup { border-radius: 24px; overflow: hidden; border: 1px solid var(--line); }
.lockup img { width: 100%; display: block; }
.lockup figcaption { padding: 14px 18px; font-size: 14px; color: var(--ink-50); background: var(--surface); }

@media (max-width: 991px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .lockups { grid-template-columns: 1fr; }
  .clients { gap: 30px; }
}
@media (max-width: 560px) {
  .work-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .work--wide, .work--tall { grid-column: auto; grid-row: auto; aspect-ratio: 1; }
}

/* =========================================================================
   BỘ ICON THƯƠNG HIỆU — 11 icon vector lấy từ guideline (trang 26)
   Dùng mask nên icon nhận màu từ `color`, không phải nuôi mỗi màu một file.
   Chỉ thay emoji ở chỗ bộ icon có icon tương ứng thật; chỗ không có thì
   dùng ký tự chữ sạch sẽ chứ không ép icon sai nghĩa.
   ========================================================================= */
.ico {
  display: inline-block; width: 1em; height: 1em; flex: none;
  background: currentColor;
  -webkit-mask: var(--ico) no-repeat center / contain;
  mask: var(--ico) no-repeat center / contain;
}
.ico--tim-kiem   { --ico: url(../img/icons/tim-kiem.svg); }
.ico--tro-chuyen { --ico: url(../img/icons/tro-chuyen.svg); }
.ico--email      { --ico: url(../img/icons/email.svg); }
.ico--dam-may    { --ico: url(../img/icons/dam-may.svg); }
.ico--dong-ho    { --ico: url(../img/icons/dong-ho.svg); }
.ico--tien-mat   { --ico: url(../img/icons/tien-mat.svg); }
.ico--xu-tien    { --ico: url(../img/icons/xu-tien.svg); }
.ico--tang-truong{ --ico: url(../img/icons/tang-truong.svg); }
.ico--muc-tieu   { --ico: url(../img/icons/muc-tieu-tien.svg); }
.ico--ong-kinh   { --ico: url(../img/icons/ong-kinh.svg); }
.ico--lam-moi    { --ico: url(../img/icons/lam-moi.svg); }

.icon-btn .ico { font-size: 17px; }
.chat__toggle .ico { font-size: 25px; color: var(--ink-full); }
.chat__menu .ico, .ev-fact .ico { font-size: 19px; }
.ev-fact i { font-size: 19px; }

.icon-board {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px;
  padding: 40px; border-radius: var(--r-card); background: var(--ink-full); color: var(--yellow);
}
.icon-board figure { margin: 0; display: grid; gap: 10px; justify-items: center; }
.icon-board .ico { font-size: 46px; }
.icon-board figcaption { font-size: 12px; color: rgba(255, 255, 255, .55); text-align: center; }

/* =========================================================================
   HOẠ TIẾT THƯƠNG HIỆU
   Hai file trong guideline là ảnh raster nhúng, nặng 1.6MB và có bo góc nên
   không lát được. Dựng lại thành vector 2KB từ chính hình mark của logo:
   lát liền mạch mọi hướng, sắc nét ở mọi cỡ, đổi màu bằng `color`.

   Quy tắc dùng — hoạ tiết là KẾT CẤU, không phải nội dung:
     · chỉ đặt trên mảng màu thương hiệu lớn, tối thiểu ~400px
     · không bao giờ đặt sau văn bản đang đọc
     · không đặt hai mảng liền kề — lặp lại làm mất hiệu quả
     · không phủ lên ảnh
   ========================================================================= */
.pat { position: relative; isolation: isolate; }
.pat::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: currentColor;
  -webkit-mask: url(../img/hoa-tiet.svg) repeat center / var(--pat-size, 200px);
  mask: url(../img/hoa-tiet.svg) repeat center / var(--pat-size, 200px);
  opacity: var(--pat-op, .14);
}
.pat--soft { --pat-op: .07; }
.pat--bold { --pat-op: .26; }
.pat--sm   { --pat-size: 120px; }
.pat--lg   { --pat-size: 330px; }

/* Chỉ một dải ở mép — đủ gợi kết cấu mà không lấn nội dung */
.pat--band::before {
  -webkit-mask-image: url(../img/hoa-tiet.svg), linear-gradient(#000, transparent 42%);
  mask-image: url(../img/hoa-tiet.svg), linear-gradient(#000, transparent 42%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.pat--bottom::before {
  -webkit-mask-image: url(../img/hoa-tiet.svg), linear-gradient(transparent 55%, #000);
  mask-image: url(../img/hoa-tiet.svg), linear-gradient(transparent 55%, #000);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* Dải phân cách giữa hai mảng sáng */
.pat-divider {
  height: 92px; background: var(--yellow); color: var(--ink-full);
  --pat-op: .22; --pat-size: 92px;
}

/* Thay cho ô xám khi một item CMS chưa có ảnh bìa.
   Marketing chắc chắn sẽ gặp trường hợp này, và ô xám trông như lỗi. */
.img-fallback {
  background: var(--yellow); color: var(--ink-full);
  display: grid; place-items: center; position: relative; isolation: isolate;
}
.img-fallback::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor;
  -webkit-mask: url(../img/hoa-tiet.svg) repeat center / 120px;
  mask: url(../img/hoa-tiet.svg) repeat center / 120px; opacity: .3;
}
.img-fallback span { font: 600 13px "Inter Tight", sans-serif; color: var(--ink-on-brand); }

/* Tương thích ngược cho các chỗ đã đánh dấu trước đó */
.patterned { position: relative; isolation: isolate; }
.patterned::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: currentColor; opacity: .12;
  -webkit-mask: url(../img/hoa-tiet.svg) repeat center / 240px;
  mask: url(../img/hoa-tiet.svg) repeat center / 240px;
}
@media (max-width: 767px) { .icon-board { grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 26px; } }

/* =========================================================================
   MẢNG VÀNG TRÀN VIỀN — để đạt tỉ lệ Vàng 50% của guideline
   Trước đó site chủ yếu kem với vàng làm điểm nhấn, tức ngược tỉ lệ.
   ========================================================================= */
.section--yellow { background: var(--yellow); }
.section--yellow .muted, .section--yellow .eyebrow { color: var(--ink-on-brand); }
.section--yellow .stat__n { color: var(--ink-full); }
.section--yellow .svc a { border-bottom-color: rgba(0, 0, 0, .16); }
.section--yellow .svc a:hover { color: var(--ink-full); }
.section--yellow .svc a::before, .section--yellow .svc a::after { color: var(--ink-full); background: var(--ink-full); }
.section--yellow .svc a::after { background: none; }
.section--yellow .btn { background: var(--ink-full); color: var(--cream); }
.section--yellow .btn::before { background: var(--cream); }
.section--yellow .btn:hover { color: var(--ink-full); }
.section--yellow .btn__arrow { background: var(--yellow); color: var(--ink-full); }
.section--dark { background: var(--ink-full); color: var(--cream); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--cream); }
.section--dark .muted { color: rgba(255, 248, 231, .62); }

/* Bộ ứng dụng nhận diện — ảnh thật của Yoday trong guideline */
.brandwall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bw {
  position: relative; border-radius: 26px; overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.bw img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .8s var(--ease); }
.bw:hover { transform: translateY(-8px); box-shadow: 0 22px 50px rgba(0, 0, 0, .12); }
.bw:hover img { transform: scale(1.06); }
.bw figcaption { padding: 14px 18px; font-size: var(--fs-small); color: var(--ink-50); }
.bw--wide { grid-column: span 2; }
.bw--wide img { aspect-ratio: 16/9; }

@media (max-width: 991px) { .brandwall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .brandwall { grid-template-columns: 1fr; } .bw--wide { grid-column: auto; } }

/* =========================================================================
   KHUÔN LANDING PAGE CAMPAIGN — theo đúng các mẫu Yoday đang chạy thật
   (khamkenh.com và các tên miền chiến dịch sau). Những thành phần dưới đây là thứ LP
   thật dùng mà website thường không có.
   ========================================================================= */

/* Thanh khan hiếm dính đỉnh — đếm ngược + số suất còn lại */
.urgency {
  position: sticky; top: 0; z-index: 85;
  background: var(--ink-full); color: var(--yellow);
  display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 11px 20px; font-size: var(--fs-small); font-weight: 500; letter-spacing: .02em;
}
.urgency b { font-family: "Inter Tight", sans-serif; font-variant-numeric: tabular-nums; }
.urgency__dot { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }

/* Đồng hồ đếm ngược chạy thật */
.cd { display: flex; gap: 10px; }
.cd div {
  min-width: 62px; text-align: center; padding: 12px 8px; border-radius: 16px;
  background: rgba(0, 0, 0, .08);
}
.cd b { display: block; font-family: "Inter Tight", sans-serif; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.cd span { font-size: 11px; color: var(--ink-on-brand); text-transform: uppercase; letter-spacing: .06em; }

/* Đồng thương hiệu — LP hợp tác luôn có 2 logo */
.cobrand { display: flex; align-items: center; gap: 20px; }
.cobrand__x { color: var(--ink-50); font-size: 20px; }
.cobrand .logo { --logo-h: 30px; }
.cobrand__partner {
  font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: 24px;
  letter-spacing: -.02em; color: var(--ink-full);
}

/* Danh sách "triệu chứng" — mô típ chủ đạo của LP kiểu chẩn đoán */
.symptoms { display: grid; gap: 14px; }
.symptom {
  display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: start;
  padding: 20px 24px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line);
}
.symptom i {
  width: 42px; height: 42px; border-radius: 50%; background: rgba(240, 150, 25, .18);
  color: var(--orange-text); display: grid; place-items: center; font-style: normal; font-weight: 700;
}
.symptom p { font-size: var(--fs-body); }

/* Chuỗi video giải thích */
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.video {
  position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 16/9;
  background: var(--ink-full); display: grid; place-items: center; color: var(--yellow);
}
.video::after {
  content: ""; width: 62px; height: 62px; border-radius: 50%; background: var(--yellow);
  box-shadow: 0 0 0 12px rgba(255, 208, 0, .22);
  transition: transform .4s var(--ease);
}
.video:hover::after { transform: scale(1.12); }
.video figcaption {
  position: absolute; inset: auto 0 0 0; padding: 40px 20px 18px; z-index: 2;
  background: linear-gradient(transparent, rgba(10, 10, 10, .9)); color: var(--cream);
  font-size: var(--fs-small);
}

/* Thanh CTA dính đáy trên mobile — LP thật nào cũng có */
.mobile-cta {
  position: fixed; inset: auto 0 0 0; z-index: 88; display: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 248, 231, .96); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.mobile-cta .btn { width: 100%; justify-content: center; }

/* Popup thoát trang */
.exitpop {
  position: fixed; inset: 0; z-index: 99; display: none;
  background: rgba(10, 10, 10, .55); backdrop-filter: blur(5px);
  place-items: center; padding: 22px;
}
.exitpop.show { display: grid; }
.exitpop__box {
  max-width: 520px; background: var(--cream); border-radius: var(--r-card); padding: 44px;
  text-align: center; position: relative; animation: cookieUp .4s var(--ease);
}
.exitpop__close {
  position: absolute; top: 16px; right: 18px; border: 0; background: none;
  font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink-50);
}
.exitpop h3 { font-size: var(--fs-h3); margin-bottom: 12px; }
.exitpop p { color: var(--ink-50); margin-bottom: 26px; }

@media (max-width: 991px) {
  .videos { grid-template-columns: 1fr; }
  .mobile-cta { display: block; }
  body.has-mobile-cta { padding-bottom: 84px; }
  .urgency { font-size: 13px; gap: 12px; padding: 9px 14px; }
  .cd div { min-width: 52px; padding: 9px 6px; }
  .cd b { font-size: 21px; }
}

/* =========================================================================
   THÀNH PHẦN RIÊNG CỦA LANDING PAGE — dựng theo hai LP thật đang chạy
   ========================================================================= */

/* Hai cột "dành cho ai / không dành cho ai" */
.fitcols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.fitcol { border-radius: var(--r-card); padding: 34px; }
.fitcol--yes { background: rgba(255, 208, 0, .22); }
.fitcol--no { background: rgba(0, 0, 0, .05); }
.fitcol h3 { font-size: var(--fs-h4); margin-bottom: 20px; }
.fitcol ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.fitcol li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; font-size: var(--fs-body); }
.fitcol li::before { font-weight: 700; line-height: 1.5; }
.fitcol--yes li::before { content: "✓"; color: var(--orange-text); }
.fitcol--no li::before { content: "✕"; color: var(--ink-50); }
.fitcol--no li { color: var(--ink-50); }

/* Quyền lợi kèm giá trị quy đổi */
.perks { display: grid; gap: 14px; }
.perk {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 18px; align-items: center;
  padding: 22px 26px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line);
}
.perk .ico { font-size: 26px; color: var(--orange-text); }
.perk b { font-family: "Inter Tight", sans-serif; font-size: var(--fs-h5); display: block; }
.perk span { font-size: var(--fs-small); color: var(--ink-50); }
.perk .val {
  background: var(--yellow); border-radius: 999px; padding: 7px 16px;
  font-size: var(--fs-small); font-weight: 600; white-space: nowrap;
}

/* Hồ sơ chuyên gia */
.expert { display: grid; grid-template-columns: 300px 1fr; gap: 46px; align-items: start; }
.expert__photo { border-radius: var(--r-card); overflow: hidden; background: var(--yellow); }
.expert__photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.expert__creds { display: grid; gap: 16px; margin-top: 26px; }
.expert__cred { display: grid; grid-template-columns: 8px 1fr; gap: 16px; }
.expert__cred::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); margin-top: 9px; }
.expert__cred b { display: block; font-family: "Inter Tight", sans-serif; }
.expert__cred span { font-size: var(--fs-body); color: var(--ink-50); }

/* Mốc credit theo bậc tăng trưởng */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tier {
  text-align: center; padding: 30px 20px; border-radius: 28px;
  background: linear-gradient(160deg, var(--yellow), var(--orange));
}
.tier b { display: block; font-family: "Inter Tight", sans-serif; font-size: 34px; line-height: 1; }
.tier span { font-size: var(--fs-small); color: var(--ink-on-brand); }
.tier em { display: block; margin-top: 10px; font-style: normal; font-weight: 700; font-size: var(--fs-body); }

/* Nội dung buổi khám — lưới nhiều mục */
.exams { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; counter-reset: e; }
.exam {
  padding: 24px 28px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line);
  transition: all .4s var(--ease);
}
.exam:hover { border-color: var(--yellow); background: rgba(255, 208, 0, .1); transform: translateY(-4px); }
.exam b { counter-increment: e; font-family: "Inter Tight", sans-serif; font-size: var(--fs-h5); display: block; margin-bottom: 8px; }
.exam b::before { content: counter(e, decimal-leading-zero) " · "; color: var(--orange-text); }
.exam p { font-size: var(--fs-small); color: var(--ink-50); }

/* Cảnh báo / đính chính quan trọng */
.disclaimer {
  border-radius: var(--r-card); padding: 32px 38px; background: var(--ink-full); color: var(--cream);
  display: grid; grid-template-columns: 54px 1fr; gap: 22px; align-items: start;
}
.disclaimer .ico { font-size: 34px; color: var(--yellow); }
.disclaimer b { display: block; font-family: "Inter Tight", sans-serif; font-size: var(--fs-h4); margin-bottom: 8px; color: var(--yellow); }
.disclaimer p { font-size: var(--fs-body); color: rgba(255, 248, 231, .78); }

/* Kết quả lớn */
.bigresults { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.bigresult { text-align: center; }
.bigresult b {
  display: block; font-family: "Inter Tight", sans-serif; font-weight: 700;
  font-size: clamp(40px, 5vw, 64px); line-height: 1; color: var(--orange-text);
  font-variant-numeric: tabular-nums;
}
.bigresult span { display: block; margin-top: 12px; font-size: var(--fs-body); color: var(--ink-50); max-width: 24ch; margin-inline: auto; }

/* Dải báo chí / giải thưởng */
.press { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.press span {
  padding: 12px 22px; border-radius: 999px; border: 1px solid var(--line);
  font-size: var(--fs-small); background: var(--surface);
}

@media (max-width: 991px) {
  .fitcols, .exams, .tiers, .bigresults { grid-template-columns: 1fr; }
  .expert { grid-template-columns: 1fr; gap: 26px; }
  .perk { grid-template-columns: 40px 1fr; }
  .perk .val { grid-column: 2; justify-self: start; }
  .disclaimer { grid-template-columns: 1fr; gap: 14px; }
}

/* Ẩn chi tiết phụ của thanh khan hiếm trên màn hình hẹp */
@media (max-width: 700px) { .hide-sm { display: none; } }

/* =========================================================================
   SỬA SAU AUDIT LANDING PAGE
   ========================================================================= */

/* 1. <select> trước đó không được tạo kiểu — hiện ra dạng dropdown gốc của
      trình duyệt, bé xíu và lạc hẳn khỏi các trường gạch chân bên cạnh. */
.field select {
  width: 100%; border: 0; border-bottom: 1.5px solid var(--line);
  padding: 12px 28px 12px 2px; font: inherit; font-size: var(--fs-body);
  letter-spacing: .02em; background: transparent; outline: none; cursor: pointer;
  color: var(--ink); border-radius: 0;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230A0A0A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; background-size: 12px;
  transition: border-color .35s var(--ease);
}
.field select:focus { border-bottom-color: var(--orange-text); }
/* Khi chưa chọn thì chữ mờ như placeholder của input, cho đồng nhất */
.field select:has(option[value=""]:checked) { color: var(--ink-50); }
.field select option { color: var(--ink-full); }

/* 2. Khối đầu hero: logo phải đứng riêng một hàng, không nằm cạnh nhãn */
.lp-brandline { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }

/* 3. Mục cuối của lưới nội dung khám chiếm nốt cột trống thay vì bỏ hở */
.exams > :last-child:nth-child(odd) { grid-column: 1 / -1; }

/* 4. Ảnh chuyên gia chưa có — dùng ô hoạ tiết trung thực thay vì mượn ảnh
      thẻ nhân viên, vì ảnh đó đọc ra không phải chân dung. */
.expert__photo.is-empty { aspect-ratio: 3/4; }
.expert__photo.is-empty span { font: 600 var(--fs-small) "Inter Tight", sans-serif; }

/* 5. Đếm ngược gọn trên thanh khan hiếm */
.cd-mini { font-variant-numeric: tabular-nums; }

/* Nhãn chú thích của phần tử nằm sát đỉnh trang bị cắt — lật xuống dưới */
body.show-diff .urgency[data-diff]::before { top: auto; bottom: -13px; }

/* ══════════════════════════════════════════════════════════════════════
   TỐI ƯU CHUYỂN ĐỔI CHO LANDING PAGE
   ══════════════════════════════════════════════════════════════════════ */

/* 1. Dòng trấn an ngay dưới nút gửi — trả lời "bấm xong thì sao?".
      Đây là nỗi lo lớn nhất ngay trước khi submit, phải nằm sát nút. */
.formnote {
  display: flex; gap: 8px; align-items: flex-start; justify-content: center;
  margin-top: 14px; font-size: 13.5px; line-height: 1.5;
  color: var(--ink-50); text-align: center;
}
.formnote i { font-style: normal; flex: none; }

/* 2. Nhóm trường không bắt buộc, gập lại để form ngắn đi khi nhìn lần đầu */
.optfields { margin: 0 0 18px; }
.optfields summary {
  cursor: pointer; list-style: none; font-size: var(--fs-small);
  color: var(--orange-text); font-weight: 600; padding: 6px 0;
  display: flex; align-items: center; gap: 7px;
}
.optfields summary::-webkit-details-marker { display: none; }
.optfields summary::after {
  content: "+"; font-size: 17px; line-height: 1; transition: transform .3s var(--ease);
}
.optfields[open] summary::after { transform: rotate(45deg); }
.optfields[open] > .field:first-of-type { margin-top: 10px; }

/* 3b. Cột phải của hero LP giờ có form + lối gọi + dải bằng chứng.
      Sticky phải đặt ở cả cụm, không phải riêng thẻ form — để riêng thì
      form là phần tử có vị trí, nó phủ lên hai khối tĩnh nằm dưới. */
.lp-aside { position: sticky; top: 110px; }
.lp-aside .ev-form { position: static; }

/* 3. Dải bằng chứng gọn đặt ngay dưới form hero — uy tín phải ở cạnh chỗ
      người ta ra quyết định, không phải ở màn hình thứ năm. */
.proofstrip {
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
  margin-top: 26px; font-size: 13px; color: var(--ink-50);
}
.proofstrip span { display: flex; align-items: center; gap: 6px; }
.proofstrip b { color: var(--ink); font-weight: 600; }

/* 4. Dải CTA chèn giữa trang — trang dài mà chỉ có CTA ở hai đầu thì
      người đọc tới giữa, muốn hành động, lại không có chỗ bấm. */
.ctaband {
  background: var(--dark); color: var(--cream);
  border-radius: var(--r-card); padding: 44px 46px;
  display: flex; gap: 30px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.ctaband > div:first-child { flex: 1 1 300px; }
.ctaband .btn { flex: none; }
.ctaband h3 { font-size: var(--fs-h3); color: var(--cream); }
.ctaband p { color: rgba(255,248,231,.66); font-size: var(--fs-small); margin-top: 8px; max-width: 52ch; }
@media (max-width: 700px) { .ctaband { padding: 32px 26px; } .ctaband .btn { width: 100%; justify-content: center; } }

/* 5. Ô trích dẫn khách hàng — khung dựng sẵn, chờ nội dung thật.
      Không dựng lời chứng thực bịa: để trống rõ ràng còn hơn nói sai. */
.quoteslot {
  border: 2px dashed var(--line); border-radius: var(--r-quote);
  padding: 34px; text-align: center; color: var(--ink-50); font-size: var(--fs-small);
}

/* ══════════════════════════════════════════════════════════════════════
   TRAU CHUỐT & HIỆU ỨNG
   ══════════════════════════════════════════════════════════════════════ */

/* 1. Thanh tiến trình đọc — trang chiến dịch rất dài, người đọc cần biết
      còn bao nhiêu nữa mới hết. */
.readbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: left; z-index: 120;
  background: linear-gradient(90deg, var(--orange), var(--yellow));
  will-change: transform; pointer-events: none;
}

/* 2. Các thẻ nội dung trên LP trước đây đứng im hoàn toàn khi rê chuột */
.symptom, .perk, .tier, .quoteslot { transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease); }
.symptom:hover, .perk:hover {
  transform: translateY(-4px); border-color: var(--yellow);
  box-shadow: 0 14px 34px rgba(0,0,0,.07);
}
.symptom:hover i { background: var(--yellow); }
.symptom i { transition: background .4s var(--ease); }
.tier:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 18px 40px rgba(240,150,25,.28); }
.fitcol li { border-radius: 12px; padding: 4px 8px; margin: -4px -8px; transition: background .3s var(--ease); }
.fitcol--yes li:hover { background: rgba(255,255,255,.5); }
.fitcol--no li:hover { background: rgba(255,255,255,.6); }

/* 3. Nút xem video: trước chỉ là một chấm vàng, không đọc ra là nút play */
.video::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%230A0A0A'/%3E%3C/svg%3E") center/26px no-repeat,
    var(--yellow);
}
.video:hover::after { transform: scale(1.12); box-shadow: 0 0 0 18px rgba(255,208,0,.28); }
.video figcaption { transition: transform .4s var(--ease); }
.video:hover figcaption { transform: translateY(-3px); }

/* 4. Câu hỏi thường gặp: đóng mở có nhịp, và nội dung trượt xuống thay vì
      bật ra đột ngột (thẻ details không tự làm được việc này). */
.faq details { transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.faq summary:hover { color: var(--orange-text); }
.faq details[open] { box-shadow: 0 10px 28px rgba(0,0,0,.06); }
.faq details[open] p { animation: faqIn .38s var(--ease) both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }

/* 5. Gạch chân trường nhập chạy từ trái sang khi được chọn */
.field { position: relative; }
.field::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--orange-text); transform: scaleX(0); transform-origin: left;
  transition: transform .38s var(--ease); pointer-events: none;
}
.field:focus-within::after { transform: scaleX(1); }

/* 6. Ô đếm ngược nảy nhẹ mỗi lần số đổi — đồng hồ đứng im trông như ảnh */
.cd b { display: block; transition: transform .18s var(--ease); }
.cd b.cd-bump { transform: translateY(-3px) scale(1.06); }

/* 7. Lối liên hệ trực tiếp cạnh form. Chủ doanh nghiệp chi vài trăm triệu
      mỗi tháng thường bấm gọi chứ không ngồi điền, thiếu lối này là mất lead. */
.callrow {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  flex-wrap: wrap; margin-top: 18px; font-size: var(--fs-small);
}
.callrow__or { color: var(--ink-50); }
.calllink {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
  padding: 9px 18px; border-radius: var(--r-pill); border: 1.5px solid var(--ink-full);
  color: var(--ink-full); transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.calllink:hover { background: var(--ink-full); color: var(--yellow); transform: translateY(-2px); }
.calllink--zalo { border-color: #0068FF; color: #0057D8; }
.calllink--zalo:hover { background: #0068FF; color: #fff; }

/* 8. Thanh dính đáy tách đôi: gọi ngay hoặc điền form */
.mobile-cta { gap: 8px; }          /* display giữ nguyên none, chỉ bật trong media query */
@media (max-width: 991px) { .mobile-cta { display: flex; } }
.mobile-cta .calllink { flex: none; padding: 14px 18px; background: var(--surface); }
.mobile-cta .btn { flex: 1; }

/* 9. Dải bằng chứng và dải CTA có phản hồi khi rê chuột */
.proofstrip span { transition: color .3s var(--ease); }
.proofstrip span:hover { color: var(--ink-full); }
.ctaband { transition: box-shadow .45s var(--ease); }
.ctaband:hover { box-shadow: 0 22px 50px rgba(0,0,0,.22); }

/* 10. Nhóm trường tuỳ chọn mở ra có nhịp */
.optfields[open] > .field { animation: faqIn .34s var(--ease) both; }
.optfields summary:hover { color: var(--ink-full); }

@media (prefers-reduced-motion: reduce) {
  .readbar { display: none; }
  .faq details[open] p, .optfields[open] > .field { animation: none; }
  .cd b.cd-bump { transform: none; }
}

/* Chân trang: hai chỗ prototype dùng style nội tuyến, đưa về lớp để
   Razor partial không phải mang theo thuộc tính style. */
.footer__addr { color: #bdbdbd; font-size: 15px; }
.footer__legal { display: flex; gap: 20px; }

/* Nội dung do marketing nhập, hiện trên trang bài viết và trang chi tiết.
   Đặt ở đây vì prototype chỉ có văn bản mẫu cứng, chưa có lớp dùng chung. */
.richtext { font-size: var(--fs-body); line-height: 1.72; color: var(--ink); white-space: pre-wrap; }
.richtext + .richtext { margin-top: 18px; }

/* Ghi nguồn cuối bài đặt đăng trên báo. Tách khỏi thân bài bằng đường kẻ để
   người đọc thấy rõ đây là chú thích xuất xứ, không phải một đoạn nội dung. */
.bv-nguon {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 15px; color: var(--ink-50);
}
.bv-nguon a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.bv-nguon a:hover { color: var(--orange-text); }