/* =====================================================================
   BLOUSE MINH MỸ — Giao diện trang đích
   Tệp: assets/css/main.css
   Cấu trúc: 1. Biến hệ thống · 2. Nền tảng · 3. Thành phần dùng chung
             4. Từng khối trang (theo thứ tự xuất hiện) · 5. Responsive
   ===================================================================== */

/* ===================================================================
   1. BIẾN HỆ THỐNG
   =================================================================== */
:root {
  /* Màu thương hiệu */
  --ink:        #102b42;
  --ink-soft:   #1b3f5c;
  --blue:       #087eaa;
  --blue-deep:  #06617f;
  --blue-light: #3fa8cf;
  --cyan:       #58d6d2;
  --yellow:     #ffc857;
  --yellow-deep:#f0ad2e;

  /* Nền và đường kẻ */
  --paper:  #f7fbfa;
  --white:  #ffffff;
  --mint:   #eef8f6;
  --line:   #dceae9;
  --line-strong: #c3dcda;
  --muted:  #557080;
  --muted-soft: #7b93a1;

  /* Màu ngữ nghĩa */
  --zalo:  #0068ff;
  --green: #17a34a;
  --pain:      #fdf2f4;
  --pain-line: #f3d3da;
  --pain-ink:  #b03a53;
  --sol:       #eefaf4;
  --sol-line:  #c7e9d8;

  /* Chuyển sắc */
  --grad-ink:  linear-gradient(135deg, #102b42 0%, #1c4766 100%);
  --grad-blue: linear-gradient(135deg, #087eaa 0%, #58d6d2 100%);
  --grad-gold: linear-gradient(135deg, #ffc857 0%, #ffb02e 100%);

  /* Phông chữ — dùng chung một họ Be Vietnam Pro cho toàn trang */
  --font-body: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Bo góc */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Đổ bóng nhiều tầng */
  --sh-xs: 0 1px 2px rgba(16,43,66,.06);
  --sh-sm: 0 2px 8px rgba(16,43,66,.07), 0 1px 2px rgba(16,43,66,.05);
  --sh-md: 0 8px 24px rgba(16,43,66,.09), 0 2px 6px rgba(16,43,66,.05);
  --sh-lg: 0 18px 44px rgba(16,43,66,.13), 0 4px 12px rgba(16,43,66,.06);
  --sh-xl: 0 30px 70px rgba(16,43,66,.18), 0 8px 20px rgba(16,43,66,.08);
  --sh-blue: 0 12px 30px rgba(8,126,170,.26);
  --sh-gold: 0 12px 30px rgba(255,200,87,.36);
  --sh-zalo: 0 12px 30px rgba(0,104,255,.28);

  /* Nhịp chuyển động */
  --ease:    cubic-bezier(.4, 0, .2, 1);
  --ease-out:cubic-bezier(.16, 1, .3, 1);
  --spring:  cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .18s;
  --t-base: .3s;
  --t-slow: .55s;

  /* Chiều cao thanh điều hướng, dùng cho scroll-padding */
  --nav-h: 68px;
}

/* ===================================================================
   2. NỀN TẢNG
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.025em;
}
/* Tiêu đề lớn đậm hơn một bậc để giữ sức nặng thị giác */
h1, .section-head h2 { font-weight: 800; }

/* Be Vietnam Pro có đủ các nét, nên chỉ định rõ độ đậm cho những
   thành phần trước đây mượn nét đậm mặc định của phông tiêu đề. */
.logo,
.trust-num b,
.price-box b,
.reason-num,
.big-num,
.avatar,
.channel b,
.footer-brand,
.adm-avatar { font-weight: 800; }

.sol-pain b,
.job-cta p,
.lineup-cta p,
.workshop-facts b,
.proof figcaption b,
.option-card b,
.size-table td:first-child,
.ekip-item figcaption b,
.gallery-item figcaption b,
.review-author b,
.compare-table td:first-child,
.step-time,
.qr-fallback b,
.footer-col h4,
.pain-bridge,
.offer-line,
.float-zalo { font-weight: 700; }

/* Vòng focus rõ ràng cho người dùng bàn phím */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* Chọn văn bản */
::selection { background: var(--cyan); color: var(--ink); }

/* Thanh cuộn tuỳ biến (trình duyệt nhân Webkit) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--mint); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); border: 2px solid var(--mint); }
::-webkit-scrollbar-thumb:hover { background: var(--blue-light); }

.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

section { padding: 86px 0; position: relative; max-width: 100%; }
.container { max-width: 100%; }

/* Nhãn nhỏ phía trên tiêu đề */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 15px;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-blue);
}

.section-head { max-width: 780px; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow::before { display: none; }
.section-head h2 { font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -.035em; }
.section-head p { color: var(--muted); margin-top: 14px; font-size: 16.5px; }

/* Chỉ dành cho trình đọc màn hình */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Bỏ qua tới nội dung chính */
.skip-to-content {
  position: absolute; left: 50%; top: -100px;
  transform: translateX(-50%);
  background: var(--ink); color: #fff;
  padding: 12px 24px; border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 700; z-index: 200;
  transition: top var(--t-base) var(--ease);
}
.skip-to-content:focus { top: 0; }

/* ===================================================================
   3. THÀNH PHẦN DÙNG CHUNG
   =================================================================== */

/* ----- Nút bấm ----- */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: var(--r-md);
  padding: 15px 26px;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-base) var(--spring),
              box-shadow var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease);
}

/* Vệt sáng quét ngang khi rê chuột */
.button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.32) 50%, transparent 80%);
  transform: translateX(-110%);
  transition: transform .65s var(--ease-out);
}
.button:hover::before { transform: translateX(110%); }

.button:hover { transform: translateY(-3px); }
.button:active { transform: translateY(-1px) scale(.985); }

.button-primary { background: var(--grad-gold); color: var(--ink); box-shadow: var(--sh-gold); }
.button-primary:hover { box-shadow: 0 18px 40px rgba(255,200,87,.46); }

.button-zalo { background: var(--zalo); color: #fff; box-shadow: var(--sh-zalo); }
.button-zalo:hover { background: #0057d9; box-shadow: 0 18px 40px rgba(0,104,255,.38); }

.button-dark { background: var(--ink); color: #fff; box-shadow: var(--sh-md); }
.button-dark:hover { background: var(--ink-soft); box-shadow: var(--sh-lg); }

.button-outline {
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
.button-outline:hover { background: var(--ink); color: #fff; box-shadow: var(--sh-md); }

.button-ghost { border: 1.5px solid rgba(255,255,255,.55); color: #fff; }
.button-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }

.button-block { width: 100%; }

.cta-row { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 34px; }

/* Hiệu ứng gợn sóng khi bấm (do JavaScript chèn) */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  transform: scale(0);
  animation: lp-ripple .6s var(--ease-out) forwards;
  pointer-events: none;
  z-index: 0;
}

/* ----- Thẻ nội dung dùng chung ----- */
.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  overflow-x: auto;
  background: #fff;
  box-shadow: var(--sh-sm);
  -webkit-overflow-scrolling: touch;
}
/* Gợi ý còn nội dung bên phải khi bảng tràn */
.table-wrap::-webkit-scrollbar { height: 8px; }

/* ===================================================================
   4.01 · THANH THÔNG BÁO + ĐIỀU HƯỚNG
   =================================================================== */
.topbar {
  background: linear-gradient(100deg, #08203a 0%, #0d3350 100%);
  color: #d9f6f3;
  font-size: 13px;
  letter-spacing: .03em;
  position: relative;
  overflow: hidden;
}
.topbar .container {
  min-height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 6px;
}
.topbar strong { color: var(--yellow); }

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(16,43,66,.96);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  color: #fff;
  padding: 12px 0;
  box-shadow: 0 2px 18px rgba(16,43,66,.2);
  transition: padding var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
/* Thu gọn khi cuộn xuống */
.nav.is-scrolled {
  padding: 7px 0;
  background: rgba(10,30,48,.985);
  box-shadow: 0 6px 28px rgba(16,43,66,.32);
}
.nav.is-scrolled .logo-mark { width: 38px; height: 38px; }
.nav.is-scrolled .logo { font-size: 15.5px; }

.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.nav-actions { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-head);
  font-size: 17px;
  line-height: 1.06;
  letter-spacing: .03em;
  min-width: 0;
  transition: font-size var(--t-base) var(--ease);
}
.logo-text { min-width: 0; }
.logo-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  transition: width var(--t-base) var(--ease), height var(--t-base) var(--ease);
}
.logo-mark img { width: 100%; height: 100%; object-fit: contain; }
.logo-text span {
  display: block;
  color: var(--yellow);
  font-size: 9.5px;
  letter-spacing: .17em;
  margin-top: 5px;
  font-family: var(--font-body);
  font-weight: 600;
}

.nav-actions { display: flex; align-items: center; gap: 12px; }

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--yellow);
  font-family: var(--font-head);
  font-size: 16px;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nav-phone:hover { color: #fff; transform: translateY(-1px); }

.nav-zalo, .nav-cta {
  padding: 10px 17px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 700;
  transition: transform var(--t-base) var(--spring), box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.nav-zalo { background: var(--zalo); color: #fff; }
.nav-zalo:hover { background: #0057d9; transform: translateY(-2px); box-shadow: var(--sh-zalo); }
.nav-cta { background: var(--grad-gold); color: var(--ink); }
.nav-cta:hover { transform: translateY(-2px); box-shadow: var(--sh-gold); }

/* Thanh tiến trình đọc trang */
.read-progress {
  position: fixed;
  left: 0; top: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--grad-blue);
  z-index: 90;
  will-change: transform;
}

/* ----- Nút nổi ----- */
.floating {
  position: fixed;
  right: 18px; bottom: 20px;
  z-index: 80;
  display: grid;
  gap: 12px;
  justify-items: center;
}
.floating a { position: relative; }

.float-btn {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 10px 26px rgba(16,43,66,.34);
  transition: transform var(--t-base) var(--spring), box-shadow var(--t-base) var(--ease);
}
.float-btn:hover { transform: scale(1.1) rotate(-4deg); }
.float-zalo { background: var(--zalo); font-family: var(--font-head); font-size: 15px; }
.float-call { background: var(--green); }

/* Nhãn hiện khi rê chuột */
.float-btn::after {
  content: attr(data-label);
  position: absolute;
  right: 66px; top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: var(--sh-md);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease-out);
}
.float-btn:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Nút lên đầu trang */
.to-top {
  width: 46px; height: 46px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 19px;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--sh-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.85);
  transition: opacity var(--t-base) var(--ease),
              transform var(--t-base) var(--spring),
              visibility var(--t-base);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.to-top:hover { background: var(--ink); color: #fff; }

/* ----- Thanh gọi nhanh trên điện thoại ----- */
.mobile-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 85;
  height: 60px;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 26px rgba(16,43,66,.14);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bar a {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 700;
  font-size: 15px;
  transition: filter var(--t-fast) var(--ease);
}
.mobile-bar a:active { filter: brightness(.9); }
.mobile-bar .m-call { background: var(--ink); color: #fff; }
.mobile-bar .m-zalo { background: var(--zalo); color: #fff; }

/* ===================================================================
   4.02 · KHỐI SẢN PHẨM (HERO)
   =================================================================== */
.product {
  background:
    radial-gradient(1000px 460px at 88% -8%, rgba(88,214,210,.16), transparent 62%),
    radial-gradient(760px 400px at 2% 8%, rgba(8,126,170,.08), transparent 60%),
    #fff;
  padding: 52px 0 70px;
  border-bottom: 1px solid var(--line);
}
.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.gallery-main {
  position: relative;
  background: var(--mint);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
  cursor: zoom-in;
  transition: box-shadow var(--t-base) var(--ease);
}
.gallery-main:hover { box-shadow: var(--sh-lg); }
.gallery-main img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: opacity var(--t-base) var(--ease), transform .7s var(--ease-out);
}
.gallery-main:hover img { transform: scale(1.035); }
.gallery-main img.is-swapping { opacity: 0; }

.gallery-flag {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  background: var(--grad-gold);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
}

.thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 12px; }
.thumb {
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--mint);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--spring),
              box-shadow var(--t-base) var(--ease);
}
.thumb img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.thumb:hover { border-color: var(--cyan); transform: translateY(-3px); box-shadow: var(--sh-sm); }
.thumb[aria-current="true"] { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8,126,170,.16); }

.gallery-note { margin-top: 14px; font-size: 12.8px; color: var(--muted); }

.buybox h1 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.035em; }
.buybox > p.lead { color: var(--muted); font-size: 16.5px; margin-top: 15px; }
.buybox > p.lead b { color: var(--ink); }

.rating {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; font-size: 13.5px; color: var(--muted);
}
.stars { color: var(--yellow); letter-spacing: .1em; font-size: 16px; }
.rating a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rating a:hover { color: var(--blue-deep); }

.price-box {
  position: relative;
  margin-top: 24px;
  background: linear-gradient(120deg, var(--mint) 0%, #f6fdfc 100%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--r-md);
  padding: 20px 22px;
  overflow: hidden;
}
.price-box small {
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
}
.price-box b {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(22px, 2.5vw, 29px);
  color: var(--blue);
  margin-top: 5px;
  letter-spacing: -.025em;
}
.price-box span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 7px; }

.points { list-style: none; display: grid; gap: 12px; margin-top: 24px; }
.points li { display: flex; gap: 12px; font-size: 15px; }
.points li::before {
  content: '✓';
  flex: 0 0 22px; height: 22px; margin-top: 2px;
  border-radius: 50%;
  background: var(--grad-blue);
  color: #fff;
  font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 3px 8px rgba(8,126,170,.26);
}
.points b { font-weight: 700; }

.buy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.buy-actions .button-zalo { grid-column: 1 / -1; padding: 17px 24px; font-size: 16px; }
.buy-hint { margin-top: 14px; font-size: 13.5px; color: var(--muted); text-align: center; }
.buy-hint a { color: var(--blue); font-weight: 600; }

.promise {
  list-style: none; display: grid; gap: 10px;
  margin-top: 24px; padding-top: 22px;
  border-top: 1px dashed var(--line-strong);
}
.promise li { display: flex; gap: 10px; font-size: 14px; color: var(--muted); }
.promise li::before { content: '✓'; color: var(--green); font-weight: 700; }
.promise b { color: var(--ink); font-weight: 700; }

/* ===================================================================
   4.03 · THANH TIN CẬY (4 con số)
   =================================================================== */
.trust-strip {
  background:
    linear-gradient(100deg, #102b42 0%, #16405f 55%, #0f3550 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.trust-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 200px at 78% 120%, rgba(88,214,210,.2), transparent 68%);
  pointer-events: none;
}
.trust-strip .container {
  position: relative; z-index: 1;
  min-height: 112px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 22px;
  padding: 30px 0;
}
.trust-num { text-align: center; position: relative; }
.trust-num + .trust-num::before {
  content: '';
  position: absolute;
  left: -11px; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 46px;
  background: rgba(255,255,255,.16);
}
.trust-num b {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(27px, 3vw, 36px);
  color: var(--yellow);
  letter-spacing: -.03em;
  line-height: 1.05;
}
.trust-num span { display: block; color: #bdd6d8; font-size: 13.5px; margin-top: 8px; }

/* ===================================================================
   4.04 · NỖI ĐAU (2 tab)
   =================================================================== */
.pains { background: var(--paper); }

.tabs {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  margin-bottom: 34px;
  flex-wrap: wrap;
  box-shadow: var(--sh-sm);
}
.tabs button {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--muted);
  padding: 12px 24px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--t-base) var(--ease);
}
.tabs button[aria-selected="true"] { color: #fff; }
/* Con trượt nền chạy theo tab đang chọn.
   Vị trí và kích thước do JavaScript đo và gán; ở đây chỉ định nghĩa
   điểm gốc (góc trên trái của khung, trừ phần đệm 5px) và hiệu ứng. */
.tab-slider {
  position: absolute;
  top: 5px; left: 5px;
  width: 0; height: 0;
  border-radius: var(--r-pill);
  background: var(--ink);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  /* Chỉ trượt vị trí cho mượt; bề rộng đổi ngay để luôn ôm khít tab */
  transition: transform var(--t-base) var(--ease-out),
              opacity var(--t-fast) var(--ease);
}
/* Chỉ hiện sau khi JavaScript đã đo xong, tránh loé ở vị trí sai */
.tab-slider.is-ready { opacity: 1; }

/* Khi chưa có con trượt (JavaScript chưa chạy hoặc bị tắt),
   tab đang chọn vẫn phải nhìn thấy được */
.no-js .tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }

.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pain-card {
  background: var(--pain);
  border: 1px solid var(--pain-line);
  border-left: 3px solid var(--pain-ink);
  border-radius: var(--r-md);
  padding: 24px 22px;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease);
}
.pain-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(176,58,83,.14); }
.pain-card h3 { font-size: 16.5px; color: var(--pain-ink); line-height: 1.28; }
.pain-card p { color: var(--muted); font-size: 14.5px; margin-top: 10px; }

.pain-bridge {
  margin-top: 34px;
  background: var(--grad-ink);
  color: #fff;
  padding: 24px 28px;
  border-radius: var(--r-lg);
  font-family: var(--font-head);
  font-size: clamp(16px, 1.8vw, 19px);
  box-shadow: var(--sh-md);
}

/* ===================================================================
   4.05 · GIẢI PHÁP GHÉP CẶP
   =================================================================== */
.solutions { background: #fff; }
.sol-list { display: grid; gap: 16px; }
.sol-row {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 16px;
  align-items: stretch;
}
.sol-pain, .sol-fix {
  border-radius: var(--r-md);
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 13px;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease);
}
.sol-pain { background: var(--pain); border: 1px solid var(--pain-line); }
.sol-pain b { font-family: var(--font-head); font-size: 16px; color: var(--pain-ink); }
.sol-pain i { font-style: normal; color: var(--pain-ink); font-size: 19px; }
.sol-fix { background: var(--sol); border: 1px solid var(--sol-line); font-size: 15px; color: var(--muted); }
.sol-fix i { font-style: normal; color: var(--green); font-size: 19px; flex: 0 0 auto; }
.sol-fix b { color: var(--ink); }
.sol-row:hover .sol-fix { transform: translateX(5px); box-shadow: 0 10px 24px rgba(23,163,74,.13); }

/* ===================================================================
   4.06 · PHÂN LUỒNG B2B / B2C
   =================================================================== */
.routing { background: linear-gradient(180deg, var(--mint) 0%, #f4fbfa 100%); }
.route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.route-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 30px 34px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease);
}
.route-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--grad-blue);
}
.route-card.b2c::before { background: linear-gradient(135deg, var(--cyan), #8ae9e5); }
.route-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.route-card h3 { font-size: 20px; letter-spacing: -.015em; }
.route-card ul { list-style: none; display: grid; gap: 12px; margin: 20px 0 26px; flex: 1; }
.route-card li { display: flex; gap: 10px; font-size: 14.8px; color: var(--muted); }
.route-card li::before { content: '✓'; color: var(--blue); font-weight: 700; }
.route-card.b2c li::before { color: var(--green); }

/* ===================================================================
   4.08 · NHÓM NGHỀ NGHIỆP
   =================================================================== */
.jobs { background: var(--paper); }
.job-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.job-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 22px 28px;
  overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.job-card::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--grad-blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-base) var(--ease-out);
}
.job-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--cyan); }
.job-card:hover::after { transform: scaleX(1); }
.job-icon {
  font-size: 22px;
  color: var(--blue);
  line-height: 1;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--mint);
  transition: transform var(--t-base) var(--spring), background-color var(--t-base) var(--ease);
}
.job-card:hover .job-icon { transform: scale(1.1) rotate(-6deg); background: #dcf4f1; }
.job-card h3 { font-size: 16px; margin: 14px 0 8px; }
.job-card p { color: var(--muted); font-size: 13.8px; }

.job-cta {
  margin-top: 32px;
  background: var(--grad-ink);
  color: #fff;
  padding: 26px 30px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  box-shadow: var(--sh-md);
}
.job-cta p { font-family: var(--font-head); font-size: 17px; }

/* ===================================================================
   4.09 · GIẢI PHÁP TOÀN DIỆN (5 ảnh)
   =================================================================== */
.lineup { background: #fff; }
.lineup-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.lineup-card { display: flex; flex-direction: column; }
.lineup-card a { display: flex; flex-direction: column; height: 100%; }
.lineup-thumb {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--mint);
  box-shadow: var(--sh-xs);
  transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.lineup-thumb img {
  display: block; width: 100%;
  aspect-ratio: 1/1; object-fit: cover;
  transition: transform .55s var(--ease-out);
}
.lineup-card a:hover .lineup-thumb img { transform: scale(1.08); }
.lineup-card a:hover .lineup-thumb { border-color: var(--cyan); box-shadow: var(--sh-md); }
.lineup-card h3 { font-size: 16.5px; margin: 14px 0 0; transition: color var(--t-fast) var(--ease); }
.lineup-card a:hover h3 { color: var(--blue); }

.lineup-cta {
  margin-top: 34px;
  background: linear-gradient(120deg, var(--mint), #f7fdfc);
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.lineup-cta p { font-family: var(--font-head); font-size: 16.5px; color: var(--ink); }
.lineup-cta span {
  display: block;
  font-family: var(--font-body);
  font-size: 13.5px; font-weight: 400;
  color: var(--muted); margin-top: 5px;
}

/* ===================================================================
   4.10 · HÌNH ẢNH XƯỞNG
   =================================================================== */
.workshop {
  background:
    radial-gradient(700px 380px at 12% 0%, rgba(88,214,210,.12), transparent 62%),
    var(--grad-ink);
  color: #fff;
}
.workshop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.workshop-media { position: relative; padding: 0 0 62px 0; }
.workshop-main { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xl); }
.workshop-main img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.workshop-inset {
  position: absolute;
  right: -34px; bottom: 0;
  width: 46%;
  border: 6px solid var(--ink);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 22px 44px rgba(0,0,0,.4);
}
.workshop-inset img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

.workshop-media .wm {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  display: flex; align-items: center; gap: 8px;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
.workshop-media .wm img { display: block; width: auto; height: 30px; aspect-ratio: auto; object-fit: contain; }
.workshop-media .wm b {
  font-family: var(--font-head); font-size: 13px;
  letter-spacing: .05em; color: #fff; line-height: 1; white-space: nowrap;
}
.workshop-media .workshop-inset .wm { top: 10px; left: 10px; gap: 6px; }
.workshop-media .workshop-inset .wm img { height: 22px; }
.workshop-media .workshop-inset .wm b { font-size: 10px; }

.workshop-copy .eyebrow { color: var(--cyan); }
.workshop-copy .eyebrow::before { background: linear-gradient(90deg, var(--cyan), transparent); }
.workshop-copy h2 { font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -.035em; }
.workshop-copy > p { color: #bdd6d8; font-size: 16.5px; margin-top: 15px; }
.workshop-facts { list-style: none; display: grid; gap: 18px; margin-top: 30px; }
.workshop-facts li {
  border-left: 2px solid var(--yellow);
  padding-left: 18px;
  color: #bdd6d8;
  font-size: 14.5px;
  transition: padding-left var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.workshop-facts li:hover { padding-left: 23px; border-color: var(--cyan); }
.workshop-facts b { display: block; color: #fff; font-family: var(--font-head); font-size: 16px; margin-bottom: 5px; }

/* ===================================================================
   4.11 · THÔNG SỐ KỸ THUẬT
   =================================================================== */
.specs { background: var(--paper); }
.spec-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec-table th, .spec-table td {
  text-align: left; padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.spec-table th {
  width: 240px;
  font-family: var(--font-head);
  font-size: 14.5px; color: var(--ink);
  background: var(--mint); font-weight: 700;
}
.spec-table td { color: var(--muted); background: #fff; }
.spec-table tbody tr { transition: background-color var(--t-fast) var(--ease); }
.spec-table tbody tr:hover td { background: #fbfefe; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.proof figure {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease);
}
.proof figure:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.proof img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .55s var(--ease-out); }
.proof figure:hover img { transform: scale(1.06); }
.proof figcaption { padding: 16px 18px 18px; font-size: 13.5px; color: var(--muted); }
.proof figcaption b { display: block; color: var(--ink); font-family: var(--font-head); font-size: 15px; margin-bottom: 5px; }

/* ===================================================================
   4.12 · BẢNG MÀU VẢI
   =================================================================== */
.colors { background: #fff; }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 16px; }
.swatch {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base) var(--spring), box-shadow var(--t-base) var(--ease);
}
.swatch:hover { transform: translateY(-5px) scale(1.03); box-shadow: var(--sh-md); }
.swatch i { display: block; height: 78px; position: relative; }
.swatch i::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(255,255,255,.34), transparent 55%);
}
.swatch span { display: block; padding: 11px 13px; font-size: 13.5px; font-weight: 600; }

.option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.option-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.option-card:hover { transform: translateY(-4px); background: #fff; box-shadow: var(--sh-md); }
.option-card b { display: block; font-family: var(--font-head); font-size: 15.5px; margin-bottom: 8px; }
.option-card p { color: var(--muted); font-size: 14.2px; }

.small-note {
  margin-top: 24px; font-size: 13.5px; color: var(--muted);
  border-left: 3px solid var(--cyan); padding: 4px 0 4px 16px;
}

/* ===================================================================
   4.13 · BẢNG SIZE
   =================================================================== */
.sizes { background: var(--paper); }
.size-table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; }
.size-table th {
  background: var(--ink); color: #fff;
  font-family: var(--font-head);
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 15px 18px; text-align: left;
  position: sticky; top: 0;
}
.size-table td { padding: 15px 18px; border-bottom: 1px solid var(--line); color: var(--muted); }
.size-table td:first-child { font-family: var(--font-head); font-size: 16px; color: var(--ink); }
.size-table tbody tr { transition: background-color var(--t-fast) var(--ease); }
.size-table tbody tr:nth-child(even) { background: var(--paper); }
.size-table tbody tr:hover { background: var(--mint); }

.highlight-box {
  margin-top: 30px;
  background: var(--grad-ink);
  color: #fff;
  padding: 34px 36px;
  border-radius: var(--r-lg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  box-shadow: var(--sh-md);
}
.highlight-box h3 { font-size: clamp(19px, 2.2vw, 24px); }
.highlight-box p { color: #bdd6d8; font-size: 15px; margin-top: 12px; max-width: 640px; }

/* ===================================================================
   4.14 · HÌNH ẢNH KHÁCH HÀNG
   =================================================================== */
.gallery { background: linear-gradient(180deg, var(--mint) 0%, #f3fbfa 100%); }
.ekip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
.ekip-item, .gallery-item {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  cursor: zoom-in;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease);
}
.ekip-item:hover, .gallery-item:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.ekip-item img { width: 100%; height: 340px; object-fit: cover; transition: transform .6s var(--ease-out); }
.ekip-item:hover img, .gallery-item:hover img { transform: scale(1.07); }
.ekip-item figcaption, .gallery-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 42px 20px 18px;
  color: #fff; font-size: 13.5px;
  background: linear-gradient(transparent, rgba(9,34,56,.94));
}
.ekip-item figcaption b, .gallery-item figcaption b {
  display: block; font-family: var(--font-head); font-size: 16px; margin-bottom: 4px;
}
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-item img { width: 100%; height: 280px; object-fit: cover; transition: transform .6s var(--ease-out); }
.gallery-item figcaption b { font-size: 15px; }

/* ===================================================================
   4.15 · ĐÁNH GIÁ
   =================================================================== */
.reviews { background: #fff; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  padding: 30px 26px 26px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
/* Dấu ngoặc kép trang trí */
.review-card::before {
  content: '"';
  position: absolute;
  top: -18px; right: 14px;
  font-family: Georgia, serif;
  font-size: 110px;
  line-height: 1;
  color: rgba(8,126,170,.09);
  pointer-events: none;
}
.review-card:hover { transform: translateY(-5px); background: #fff; box-shadow: var(--sh-lg); }
.review-card p { color: var(--muted); font-size: 14.5px; margin: 14px 0 22px; flex: 1; position: relative; z-index: 1; }
.review-author { display: flex; align-items: center; gap: 13px; }
.avatar {
  flex: 0 0 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad-ink);
  color: var(--yellow);
  display: grid; place-items: center;
  font-family: var(--font-head); font-size: 15px;
  box-shadow: var(--sh-sm);
}
.review-author b { display: block; font-family: var(--font-head); font-size: 15.5px; }
.review-author span { color: var(--blue); font-size: 13px; font-weight: 600; }

.chat-head { margin: 48px 0 20px; font-size: 13.5px; color: var(--muted); }
.chat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; }
.chat-grid img {
  width: 100%; aspect-ratio: 9/16;
  object-fit: cover; object-position: top;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--mint);
  cursor: zoom-in;
  transition: transform var(--t-base) var(--spring), box-shadow var(--t-base) var(--ease);
}
.chat-grid img:hover { transform: translateY(-5px) scale(1.03); box-shadow: var(--sh-md); }

/* ===================================================================
   4.16 · VÌ SAO CHỌN MINH MỸ
   =================================================================== */
.why { background: var(--paper); }
.big-num {
  display: inline-block;
  font-size: 1.85em; line-height: .82;
  letter-spacing: -.05em;
  background: var(--grad-blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0 .06em;
  vertical-align: -.05em;
}
.reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.reason-card {
  position: relative;
  background: #fff;
  border: 1px solid #eaf1f0;
  border-radius: var(--r-lg);
  padding: 30px 28px 32px;
  overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease);
}
.reason-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--grad-blue);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--t-base) var(--ease-out);
}
.reason-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.reason-card:hover::before { transform: scaleY(1); }
.reason-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.reason-num {
  font-family: var(--font-head);
  font-size: 24px; font-weight: 800;
  color: var(--blue); letter-spacing: -.02em;
}
.reason-card h3 { font-size: 15.5px; text-transform: uppercase; letter-spacing: .07em; color: #3e9fd4; }
.reason-card p { color: var(--muted); font-size: 14.5px; }

.compare-head { margin: 52px 0 22px; }
.compare-head h3 { font-size: clamp(21px, 2.4vw, 27px); letter-spacing: -.03em; }
.compare-head p { color: var(--muted); margin-top: 11px; font-size: 15px; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; }
.compare-table th {
  background: var(--ink); color: #fff;
  font-family: var(--font-head);
  font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase;
  padding: 15px 18px; text-align: left;
}
.compare-table th.us { background: var(--grad-blue); }
.compare-table td { padding: 16px 18px; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: top; }
.compare-table td:first-child { font-family: var(--font-head); color: var(--ink); font-size: 14.5px; width: 170px; }
.compare-table td.us { background: var(--mint); color: var(--ink); }
.compare-table td.us::before { content: '✓ '; color: var(--green); font-weight: 700; }

.workshop-photo {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sh-sm);
}
.workshop-photo img { width: 100%; height: 360px; object-fit: cover; object-position: 50% 18%; }
.workshop-photo figcaption { padding: 15px 20px; font-size: 13.5px; color: var(--muted); }

/* ===================================================================
   4.17 · QUY TRÌNH 4 BƯỚC
   =================================================================== */
.process {
  background:
    radial-gradient(800px 400px at 88% 0%, rgba(88,214,210,.12), transparent 60%),
    var(--grad-ink);
  color: #fff;
}
.process .section-head h2 { color: #fff; }
.process .section-head p { color: #bdd6d8; }
.process .eyebrow { color: var(--cyan); }
.process .eyebrow::before { background: linear-gradient(90deg, var(--cyan), transparent); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step {
  position: relative;
  border-top: 1px solid rgba(255,255,255,.32);
  padding-top: 22px;
  transition: border-color var(--t-base) var(--ease);
}
.step::before {
  content: '';
  position: absolute;
  left: 0; top: -1px;
  width: 0; height: 2px;
  background: var(--yellow);
  transition: width var(--t-slow) var(--ease-out);
}
.step:hover::before { width: 100%; }
.step-number { font-size: 13px; color: var(--yellow); font-weight: 700; letter-spacing: .1em; }
.step h3 { font-size: 17px; margin: 15px 0 9px; }
.step p { color: #bdd6d8; font-size: 14.2px; }
.step-time {
  display: inline-block; margin-top: 16px;
  background: rgba(255,255,255,.13);
  color: var(--yellow);
  font-family: var(--font-head); font-size: 13.5px;
  padding: 7px 14px; border-radius: var(--r-pill);
}
.process-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 38px; }
.process-note {
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-md);
  padding: 22px 24px;
  font-size: 14.2px; color: #bdd6d8;
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.process-note:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.36); }
.process-note b { display: block; color: #fff; font-family: var(--font-head); font-size: 15px; margin-bottom: 8px; }

/* ===================================================================
   4.18 · CÂU HỎI THƯỜNG GẶP
   =================================================================== */
.faq { background: linear-gradient(180deg, var(--mint) 0%, #f4fbfa 100%); }
.faq-list { display: grid; gap: 12px; max-width: 920px; }

.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.faq-item:hover { border-color: var(--line-strong); box-shadow: var(--sh-sm); }
.faq-item.is-open { border-color: var(--cyan); box-shadow: var(--sh-md); }

.faq-q {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-family: var(--font-head);
  font-size: 16.5px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  padding: 20px 58px 20px 22px;
  position: relative;
  line-height: 1.35;
  transition: color var(--t-fast) var(--ease);
}
.faq-q:hover { color: var(--blue); }
.faq-q::after {
  content: '';
  position: absolute;
  right: 22px; top: 50%;
  width: 13px; height: 13px;
  margin-top: -7px;
  border-right: 2.5px solid var(--blue);
  border-bottom: 2.5px solid var(--blue);
  transform: rotate(45deg);
  transform-origin: 65% 65%;
  transition: transform var(--t-base) var(--spring);
}
.faq-item.is-open .faq-q::after { transform: rotate(-135deg); }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--ease-out);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 22px 22px; color: var(--muted); font-size: 15px; }

/* ===================================================================
   4.19 · KHỐI CHỐT + BIỂU MẪU
   =================================================================== */
.closing {
  background:
    radial-gradient(760px 420px at 92% 4%, rgba(88,214,210,.14), transparent 62%),
    var(--grad-ink);
  color: #fff;
}
.closing .section-head { max-width: 840px; }
.closing .section-head h2 { color: #fff; }
.closing .section-head p { color: #bdd6d8; }
.closing .eyebrow { color: var(--cyan); }
.closing .eyebrow::before { background: linear-gradient(90deg, var(--cyan), transparent); }

.offer-line {
  display: inline-block;
  background: var(--grad-gold);
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 15.5px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  margin-bottom: 28px;
  box-shadow: var(--sh-gold);
}

.closing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 46px;
  align-items: start;
}

/* ----- Biểu mẫu ----- */
.offer-form {
  position: relative;
  background: #fff;
  color: var(--ink);
  padding: 34px;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
}
.offer-form h3 { font-size: 22px; margin-bottom: 6px; }
.offer-form > p { color: var(--muted); font-size: 14px; margin-bottom: 22px; }

.form-fields { display: grid; gap: 17px; }
.field { position: relative; }
.field > label {
  display: block;
  font-size: 13px; font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.field > label i { color: #c0392b; font-style: normal; }

.offer-form input[type=text],
.offer-form input[type=tel],
.offer-form input[type=email],
.offer-form textarea {
  width: 100%;
  border: 1.5px solid #cfe0de;
  background: #fbfdfd;
  padding: 14px 16px;
  font: inherit;
  color: var(--ink);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.offer-form textarea { resize: vertical; min-height: 84px; line-height: 1.55; }

.offer-form input::placeholder,
.offer-form textarea::placeholder { color: #9db3b8; }

.offer-form input:focus,
.offer-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(8,126,170,.13);
}

/* Trạng thái hợp lệ / lỗi */
.field.is-valid input,
.field.is-valid textarea { border-color: var(--green); }
.field.is-invalid input,
.field.is-invalid textarea { border-color: #d94848; background: #fffafa; }
.field.is-invalid input:focus,
.field.is-invalid textarea:focus { box-shadow: 0 0 0 4px rgba(217,72,72,.13); }

.field-error {
  display: block;
  min-height: 0;
  font-size: 12.8px;
  color: #c0392b;
  margin-top: 6px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.field.is-invalid .field-error { opacity: 1; transform: translateY(0); }

/* Ô chọn dạng thẻ bấm */
.choice { display: flex; gap: 10px; flex-wrap: wrap; }
.choice label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 16px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  margin: 0;
  background: #fff;
  transition: border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--spring);
}
.choice label:hover { border-color: var(--blue-light); transform: translateY(-2px); }
.choice input { accent-color: var(--blue); }
.choice label:has(input:checked) {
  border-color: var(--blue);
  background: var(--mint);
  color: var(--blue-deep);
  box-shadow: 0 0 0 3px rgba(8,126,170,.1);
}

/* Bẫy bot — ẩn hoàn toàn với người dùng thật.
   Dùng clip thay vì đẩy ra ngoài màn hình để trang không bị tràn ngang. */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Nút gửi kèm trạng thái đang xử lý */
.form-submit { padding: 17px 24px; font-size: 16px; }
.form-submit[data-loading="true"] { pointer-events: none; opacity: .82; }
.form-submit .btn-spinner {
  width: 17px; height: 17px;
  border: 2.5px solid rgba(16,43,66,.25);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: lp-spin .7s linear infinite;
  display: none;
}
.form-submit[data-loading="true"] .btn-spinner { display: block; }
.form-submit[data-loading="true"] .btn-text { opacity: .7; }

.form-message {
  font-size: 13.8px;
  margin-top: 14px;
  min-height: 20px;
  color: var(--green);
  font-weight: 600;
}
.form-message.is-error { color: #c0392b; }
.form-privacy { margin-top: 14px; font-size: 12.5px; color: var(--muted); }

/* Màn hình cảm ơn hiện tại chỗ biểu mẫu */
.form-success {
  text-align: center;
  padding: 22px 6px 10px;
}
.form-success .tick {
  width: 74px; height: 74px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--sol);
  border: 2px solid var(--sol-line);
  display: grid; place-items: center;
  color: var(--green);
  font-size: 34px;
  animation: lp-pop .5s var(--spring) both;
}
.form-success h3 { font-size: 23px; margin-bottom: 10px; }
.form-success p { color: var(--muted); font-size: 15px; margin-bottom: 8px; }
.form-success .recap {
  margin: 20px 0;
  background: var(--mint);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  text-align: left;
  font-size: 14px;
  color: var(--muted);
  display: grid; gap: 7px;
}
.form-success .recap b { color: var(--ink); }
.form-success .success-actions { display: grid; gap: 10px; margin-top: 18px; }

/* ----- Cột liên hệ bên phải ----- */
.closing-contact { display: grid; gap: 24px; }
.qr-box {
  background: #fff;
  padding: 20px;
  text-align: center;
  color: var(--ink);
  width: min(264px, 100%);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}
.qr-box img.qr { width: 100%; aspect-ratio: 1/1; object-fit: contain; }
.qr-fallback {
  aspect-ratio: 1/1;
  display: grid; place-content: center; justify-items: center; gap: 10px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: 16px;
}
.qr-fallback img { width: 54px; }
.qr-fallback b { font-family: var(--font-head); font-size: 15px; }
.qr-fallback span { font-size: 12.5px; color: var(--muted); }
.qr-box p { margin-top: 13px; font-size: 13px; font-weight: 600; }

.channel-list { display: grid; gap: 16px; }
.channel { display: flex; gap: 15px; align-items: flex-start; }
.channel-icon {
  flex: 0 0 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.11);
  display: grid; place-items: center;
  font-size: 17px; color: var(--yellow);
  transition: background-color var(--t-base) var(--ease), transform var(--t-base) var(--spring);
}
.channel:hover .channel-icon { background: rgba(255,255,255,.2); transform: scale(1.08); }
.channel b { display: block; font-family: var(--font-head); font-size: 18px; }
.channel span { color: #bdd6d8; font-size: 13.5px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ===================================================================
   4.20 · CHÂN TRANG
   =================================================================== */
footer {
  background: #092238;
  color: #bfd5d8;
  padding: 58px 0 28px;
  font-size: 14px;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 42px; }
.footer-brand {
  display: flex; align-items: center; gap: 14px;
  color: #fff; font-family: var(--font-head);
  font-size: 19px; line-height: 1.2;
}
.footer-mark { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; }
.footer-mark img { width: 100%; height: 100%; object-fit: contain; }
.footer-brand-text span {
  display: block;
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: .16em;
  color: var(--yellow); margin-top: 6px; font-weight: 600;
}
.footer-info { display: grid; gap: 10px; margin-top: 17px; }
.footer-info a { color: #fff; border-bottom: 1px solid transparent; transition: border-color var(--t-fast) var(--ease); }
.footer-info a:hover { border-color: var(--yellow); }
.footer-col h4 { font-family: var(--font-head); color: #fff; font-size: 15px; margin-bottom: 15px; }
.footer-cross {
  margin-top: 36px;
  padding: 20px 24px;
  background: rgba(255,255,255,.06);
  border-radius: var(--r-md);
  font-size: 14px;
}
.footer-cross a { color: var(--yellow); font-weight: 700; }
.footer-bottom {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; font-size: 13px;
}

/* ===================================================================
   5. HỘP THÔNG BÁO NỔI (toast)
   =================================================================== */
.toast-stack {
  position: fixed;
  right: 18px; bottom: 92px;
  z-index: 200;
  display: grid;
  gap: 10px;
  width: min(340px, calc(100vw - 36px));
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 11px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 14px;
  color: var(--ink);
  box-shadow: var(--sh-lg);
  pointer-events: auto;
  animation: lp-toast-in .4s var(--ease-out) both;
}
.toast.is-error { border-left-color: #d94848; }
.toast.is-leaving { animation: lp-toast-out .3s var(--ease) both; }
.toast .toast-icon { font-size: 17px; line-height: 1.35; }
.toast .toast-icon.ok { color: var(--green); }
.toast .toast-icon.err { color: #d94848; }

/* ===================================================================
   6. XEM ẢNH PHÓNG TO (lightbox)
   =================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(8,24,38,.93);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 32px 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(1080px, 100%);
  max-height: 86vh;
  width: auto;
  border-radius: var(--r-md);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  transform: scale(.94);
  transition: transform var(--t-base) var(--spring);
}
.lightbox.is-open img { transform: scale(1); }
.lightbox-caption {
  color: #cfe3e8;
  font-size: 14px;
  text-align: center;
  margin-top: 16px;
  max-width: 720px;
}
.lightbox-close {
  position: absolute;
  top: 18px; right: 20px;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff; font-size: 22px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--spring);
}
.lightbox-close:hover { background: rgba(255,255,255,.28); transform: rotate(90deg); }

/* ===================================================================
   7. RESPONSIVE
   =================================================================== */
@media (max-width: 1100px) {
  .job-grid { grid-template-columns: repeat(3, 1fr); }
  .lineup-grid { gap: 14px; }
  .lineup-card h3 { font-size: 15px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  section { padding: 72px 0; }
  .product-layout { grid-template-columns: 1fr; gap: 36px; }
  .gallery-main img { aspect-ratio: 1/.86; }
  .trust-strip .container { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .trust-num + .trust-num::before { display: none; }
  .pain-grid { grid-template-columns: repeat(2, 1fr); }
  .chat-grid { grid-template-columns: repeat(4, 1fr); }
  .closing-layout { grid-template-columns: 1fr; gap: 36px; }
  .highlight-box { grid-template-columns: 1fr; }
  .workshop-layout { gap: 44px; }
  .workshop-inset { right: -18px; width: 50%; }
}

@media (max-width: 900px) {
  .topbar .topbar-address { display: none; }
  .topbar .container { justify-content: center; text-align: center; }
  .nav-phone span.nav-phone-text { display: none; }
  section { padding: 60px 0; }
  .section-head { margin-bottom: 34px; }

  .sol-row { grid-template-columns: 1fr; gap: 0; }
  .sol-pain { border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; }
  .sol-fix { border-radius: 0 0 var(--r-md) var(--r-md); border-top: 0; }
  .sol-row:hover .sol-fix { transform: none; }

  .route-grid { grid-template-columns: 1fr; }
  .job-grid { grid-template-columns: repeat(2, 1fr); }

  /* Giữ 5 mục trên một dòng — chuyển sang vuốt ngang */
  .lineup-grid {
    display: flex; gap: 13px;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    scrollbar-width: thin;
  }
  .lineup-card { flex: 0 0 46%; scroll-snap-align: start; }
  .lineup-cta { flex-direction: column; align-items: flex-start; }

  .option-grid { grid-template-columns: repeat(2, 1fr); }
  .ekip-grid, .gallery-grid, .review-grid { grid-template-columns: repeat(2, 1fr); }
  .reason-grid { grid-template-columns: repeat(2, 1fr); }
  .process-notes { grid-template-columns: 1fr; }

  .workshop-layout { grid-template-columns: 1fr; gap: 36px; }
  .workshop-media { padding: 0; display: grid; grid-template-columns: 1.4fr 1fr; gap: 13px; align-items: center; }
  .workshop-inset { position: relative; right: auto; bottom: auto; width: auto; border: 0; box-shadow: var(--sh-md); }
  .workshop-media .wm img { height: 27px; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .spec-table th { width: auto; }

  .float-btn::after { display: none; }
  .floating { bottom: 78px; right: 14px; }
  .float-btn { width: 50px; height: 50px; font-size: 20px; }
  .to-top { width: 42px; height: 42px; }
  .mobile-bar { display: flex; }
  .toast-stack { bottom: 78px; left: 14px; right: 14px; width: auto; }
  body { padding-bottom: 60px; }
}

@media (max-width: 600px) {
  .container { width: min(100% - 28px, 1180px); }
  html { scroll-padding-top: 92px; }
  section { padding: 52px 0; }

  .product { padding: 34px 0 52px; }
  .buybox h1 { font-size: 27px; }
  .thumbs { grid-template-columns: repeat(4, 1fr); }
  .buy-actions { grid-template-columns: 1fr; }

  .trust-strip .container { grid-template-columns: 1fr; gap: 22px; padding: 26px 0; }
  .trust-num { display: flex; align-items: baseline; justify-content: center; gap: 11px; text-align: left; }
  .trust-num span { margin-top: 0; }

  .tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .tabs button { padding: 12px 10px; font-size: 13.5px; }
  .tab-slider { display: none; }
  .tabs button[aria-selected="true"] { background: var(--ink); }

  .pain-grid, .job-grid, .option-grid, .proof-grid,
  .ekip-grid, .gallery-grid, .review-grid, .reason-grid,
  .steps, .footer-grid { grid-template-columns: 1fr; }

  .chat-grid { grid-template-columns: repeat(3, 1fr); }
  .lineup-card { flex: 0 0 64%; }
  .workshop-media { grid-template-columns: 1fr; gap: 14px; }
  .gallery-item img, .ekip-item img { height: 250px; }
  .actions .button { width: 100%; }

  .spec-table th, .spec-table td { display: block; }
  .spec-table th { border-bottom: 0; border-radius: 0; }

  .offer-form { padding: 24px 20px; }
  .compare-table td:first-child { width: auto; }
  .workshop-photo img { height: 230px; }
  .job-cta, .pain-bridge, .highlight-box { padding: 22px; }
  .highlight-box .button { width: 100%; }

  /* Thanh thông báo và điều hướng gọn lại trên điện thoại */
  .topbar { font-size: 12px; }
  .topbar .container { justify-content: center; gap: 6px; }
  .nav { padding: 10px 0; }
  .nav .container { gap: 10px; }
  .logo { font-size: 14.5px; gap: 9px; }
  .logo-mark { width: 36px; height: 36px; }
  .nav.is-scrolled .logo-mark { width: 32px; height: 32px; }
  .logo-text span { font-size: 8.5px; letter-spacing: .12em; margin-top: 4px; }
  .nav-actions { gap: 8px; }
  .nav-zalo, .nav-cta { padding: 9px 12px; font-size: 12.5px; }
  /* Trên điện thoại đã có thanh gọi nhanh cố định ở đáy màn hình */
  .nav-phone { display: none; }
}

@media (max-width: 400px) {
  .container { width: calc(100% - 24px); }
  .nav-zalo { display: none; }
  .logo-text span { display: none; }
  /* Nút nổi thu nhỏ và lùi xuống để không che nút trên thanh điều hướng */
  .floating { right: 10px; bottom: 72px; gap: 9px; }
  .float-btn { width: 46px; height: 46px; font-size: 18px; }
  .float-zalo { font-size: 13px; }
  .to-top { width: 38px; height: 38px; font-size: 16px; }
  .buybox h1 { font-size: 24px; }
  .section-head h2 { font-size: 24px; }
  .chat-grid { grid-template-columns: repeat(2, 1fr); }
  .choice label { flex: 1 1 100%; justify-content: center; }
  .offer-form { padding: 20px 16px; }
}

/* ===================================================================
   8. IN ẤN
   =================================================================== */
@media print {
  .nav, .topbar, .floating, .mobile-bar, .to-top,
  .read-progress, .toast-stack, .lightbox { display: none !important; }
  body { padding-bottom: 0; background: #fff; }
  section { padding: 20px 0; break-inside: avoid; }
  .button { border: 1px solid #999; box-shadow: none; }
}

/* ===================================================================
   9. ẢNH CHƯA CÓ — GIỮ BỐ CỤC KHÔNG VỠ
   Khi tệp ảnh còn thiếu, trình duyệt hiện chữ thay thế và làm xô
   lệch các khối bên cạnh. Các quy tắc dưới đây giữ khung ổn định
   cho tới khi ảnh thật được thay vào.
   =================================================================== */

/* Ảnh nằm trong khung có kích thước cố định: ẩn chữ thay thế tràn ra */
.logo-mark img,
.footer-mark img,
.workshop-media .wm img {
  overflow: hidden;
  font-size: 0;
  color: transparent;
}

/* Ảnh lớn trong khung có tỷ lệ: chữ thay thế thu nhỏ, canh giữa */
.gallery-main img,
.thumb img,
.lineup-thumb img,
.workshop-main img,
.workshop-inset img,
.proof img,
.ekip-item img,
.gallery-item img,
.chat-grid img,
.workshop-photo img,
.qr-box img.qr {
  overflow: hidden;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
  text-align: center;
}

/* Ảnh trong khối nền tối: chữ thay thế sáng màu cho dễ đọc */
.workshop-main img,
.workshop-inset img,
.ekip-item img,
.gallery-item img {
  color: rgba(255,255,255,.55);
}

/* ===================================================================
   10. KHỐI BÁO LỖI CHI TIẾT CỦA BIỂU MẪU
   Hiện khi gửi thất bại, để người quản trị thấy ngay nguyên nhân thật
   thay vì một câu thông báo chung chung.
   =================================================================== */
.form-error-detail {
  margin-top: 16px;
  background: #fff6f6;
  border: 1px solid #f3cfcf;
  border-left: 4px solid #d14343;
  border-radius: var(--r-md);
  padding: 16px 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #7d3a3a;
  animation: lp-fade-up .35s var(--ease-out) both;
}
.form-error-detail b {
  display: block;
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 700;
  color: #b02e2e;
  margin-bottom: 8px;
}
.form-error-detail .fed-reason { font-weight: 600; margin-bottom: 6px; }
.form-error-detail .fed-hint { color: #8a5a5a; margin-bottom: 12px; }

.form-error-detail .fed-row {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
  padding-top: 10px;
  border-top: 1px dashed #eec9c9;
}
.form-error-detail .fed-row > span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #a06565;
}
.form-error-detail code,
.form-error-detail pre {
  display: block;
  background: #fff;
  border: 1px solid #f0d6d6;
  border-radius: var(--r-sm);
  padding: 9px 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: #8c3d3d;
  word-break: break-all;
  white-space: pre-wrap;
}
.form-error-detail pre {
  max-height: 220px;
  overflow: auto;
  word-break: normal;
}
.form-error-detail .fed-call {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #eec9c9;
  color: #7d3a3a;
}
.form-error-detail .fed-call a { color: #b02e2e; font-weight: 700; text-decoration: underline; }