/* /contact — cột "What to Expect" và widget đặt lịch.
   Chỉ light theme ở đợt này: dark theme làm sau. Style của
   section (.lf-ct*) vẫn nằm trong <style> của contact.html; file này chỉ thêm,
   không ghi đè. */

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* .lf-ent (enterprise.css) cho khung 1240px, orbit avatar và thang chữ. Ở đây
   chỉ chỉnh khoảng cách và cỡ chữ tiêu đề — enterprise đặt h1 60/64, trang này
   là câu hai dòng nên cần hẹp hơn. */
/* Đáy hero phải chừa chỗ cho orbit: .lf-ent__orbit cao 560px, đặt absolute từ
   top:8px, nên hai avatar dưới cùng thõng xuống ~150px dưới đáy khối chữ. Trên
   enterprise.html có bảng dash cao ngay dưới nên không ai thấy; ở đây section
   đặt lịch nằm ngay sát và bị avatar đè lên. Padding này đẩy đáy hero xuống
   dưới avatar thấp nhất. */
.lf-ct__hero { padding: var(--z-s-6) 0 170px; isolation: isolate; }
@media (max-width: 1024px) { .lf-ct__hero { padding-bottom: 90px; } }
.lf-ct__hero-copy { position: relative; text-align: center;
  max-width: 900px; margin: 0 auto; padding: 40px 0 8px; }
.lf-ct__hero-eyebrow { margin: 0 0 22px; display: inline-block;
  text-transform: uppercase; color: var(--z-dim); }
.lf-ct__hero-title { margin: 0; text-wrap: pretty; color: var(--z-text);
  font: 600 52px/60px var(--z-font); letter-spacing: -0.003em; }
@media (max-width: 1024px) { .lf-ct__hero-title { font-size: 40px; line-height: 48px; } }
@media (max-width: 640px) {
  .lf-ct__hero { padding-top: var(--z-s-5); }
  .lf-ct__hero-copy { padding: 24px 0 0; }
  .lf-ct__hero-title { font-size: 30px; line-height: 38px; }
}

/* ── Ba văn phòng ─────────────────────────────────────────────────────── */
/* Không tiêu đề, không kicker — chỉ ba cột, ngồi sát ngay dưới card đặt lịch. */
.lf-ci { position: relative; padding: 0 0 var(--z-s-6); }
.lf-ci__inner { box-sizing: border-box; width: calc(100% - 32px); max-width: 1370px;
  margin: 0 auto; display: flex; justify-content: center; }
/* .lf-ct__offices vốn canh trái trong cột copy; đứng một mình thì canh giữa. */
.lf-ci__offices { margin-top: 0; justify-content: center; }

/* ── Cột trái ─────────────────────────────────────────────────────────── */
.lf-ct__demo-title { margin: 0; max-width: 520px; color: var(--z-text);
  font: 700 34px/44px var(--z-font); letter-spacing: -0.01em; text-wrap: pretty; }
/* Emoji giữ nguyên màu của font emoji hệ thống, không nhận letter-spacing âm. */
.lf-ct__demo-emoji { letter-spacing: 0; white-space: nowrap; }
/* Callout: nền tím rất nhạt, chữ tím — cùng họ với accent của trang. */
.lf-ct__note { margin: 0; max-width: 540px; padding: 16px 20px;
  border-radius: var(--z-r-md); background: rgba(124, 92, 255, .08);
  font: 400 15px/24px var(--z-font); color: var(--z-violet); }
.lf-ct__checks { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px; max-width: 540px; }
.lf-ct__check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; }
.lf-ct__check-mark { width: 24px; height: 24px; border-radius: 50%; margin-top: 1px;
  display: grid; place-items: center;
  background: rgba(20, 21, 46, .08); color: var(--z-text); }
.lf-ct__check-body { margin: 0; font: 400 15px/24px var(--z-font); color: var(--z-text); }
.lf-ct__demo-body { margin: 0; max-width: 540px;
  font: 400 15px/26px var(--z-font); color: var(--z-body); }

/* Testimonial. Khối này đang là nội dung giả — xem chú thích trong contact.html. */
.lf-ct__quote { margin: 4px 0 0; max-width: 540px; box-sizing: border-box;
  padding: 22px 24px 24px; border-radius: var(--z-r-lg);
  box-shadow: inset 0 0 0 1px var(--z-line-glass), 0 18px 40px -30px rgba(24, 22, 105, .3); }
.lf-ct__stars { display: flex; gap: 4px; margin-bottom: 14px; color: #f0a92c; }
.lf-ct__quote-body { margin: 0 0 18px; font: 400 15px/25px var(--z-font); color: var(--z-text); }
.lf-ct__quote-by { display: flex; align-items: center; gap: 12px; }
.lf-ct__quote-avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px;
  display: grid; place-items: center; background: var(--z-grad-mark);
  font: 600 14px/1 var(--z-font); color: #fff; letter-spacing: .02em; }
.lf-ct__quote-who { display: flex; flex-direction: column; gap: 2px; }
.lf-ct__quote-who b { font: 600 15px/22px var(--z-font); color: var(--z-text); }
.lf-ct__quote-who span { font: 400 13px/20px var(--z-font); color: var(--z-dim); }

@media (max-width: 640px) {
  .lf-ct__demo-title { font-size: 26px; line-height: 34px; }
}

.lf-ct__alt { margin: 18px 0 0; text-align: center;
  font: 400 14px/20px var(--z-font); color: var(--z-dim); }
.lf-ct__alt a { color: var(--z-violet); text-decoration: none; }
.lf-ct__alt a:hover { text-decoration: underline; }

/* ── Vỏ widget ────────────────────────────────────────────────────────── */
.bk { display: flex; flex-direction: column; align-items: center; }
.bk__crest { width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 18px;
  background: rgba(124, 92, 255, .12); color: var(--z-violet); }
.bk__title { margin: 0 0 8px; text-align: center;
  color: var(--z-text); font: 600 22px/30px var(--z-font); }
.bk__sub { margin: 0 0 24px; max-width: 380px; text-align: center;
  font: 400 14px/22px var(--z-font); color: var(--z-dim); }
/* Thông báo cho screen reader khi đổi bước. Không giấu bằng display:none —
   nội dung bị ẩn kiểu đó không được đọc lên. */
.bk__live { position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bk__panel { width: 100%; border-radius: var(--z-r-lg);
  box-shadow: inset 0 0 0 1px var(--z-line-glass); padding: 22px 20px 24px;
  min-height: 430px; }
.bk__head { display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--z-line); }
.bk__head-name { margin: 0; font: 600 17px/24px var(--z-font); color: var(--z-text); text-align: center; }
.bk__head-meta { margin: 0; font: 400 13px/20px var(--z-font); color: var(--z-dim); }

/* ── Bước 1: lịch ─────────────────────────────────────────────────────── */
.bk__month { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 14px; }
.bk__month-label { margin: 0; font: 500 16px/24px var(--z-font); color: var(--z-text);
  min-width: 150px; text-align: center; }
.bk__nav { width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--z-body); display: grid; place-items: center;
  transition: background .18s ease, color .18s ease; }
.bk__nav:hover:not(:disabled) { background: rgba(124, 92, 255, .1); color: var(--z-violet); }
.bk__nav:disabled { opacity: .3; cursor: not-allowed; }
.bk__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 6px; }
.bk__dow span { text-align: center; font: 500 11px/18px var(--z-font);
  letter-spacing: .06em; text-transform: uppercase; color: var(--z-dim); }
.bk__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
/* Fixed height, not a square. The grid is always six rows (see buildMonthGrid),
   and square cells at this card width made that 370px tall. 46px keeps six rows
   shorter than five square ones used to be, and still clears the 44px minimum
   for a comfortable tap target. */
.bk__day { height: 46px; border: 0; border-radius: var(--z-r-md); cursor: pointer;
  background: transparent; font: 500 14px/1 var(--z-font); color: var(--z-text);
  transition: background .18s ease, color .18s ease; }
.bk__day:hover:not(:disabled) { background: rgba(124, 92, 255, .12); color: var(--z-violet); }
.bk__day:disabled { color: var(--z-dim); opacity: .55; cursor: not-allowed; }
.bk__day[aria-pressed="true"] { background: var(--z-grad-mark); color: #fff; }
.bk__day--pad { visibility: hidden; }

/* ── Bước 2: giờ ──────────────────────────────────────────────────────── */
.bk__row { margin-bottom: 18px; }
.bk__legend { display: block; margin: 0 0 8px; font: 500 12px/18px var(--z-font);
  letter-spacing: .06em; text-transform: uppercase; color: var(--z-dim); }
.bk__durations { display: flex; gap: 8px; }
.bk__duration { flex: 1; height: 40px; border: 0; cursor: pointer;
  border-radius: var(--z-r-md); box-shadow: inset 0 0 0 1px var(--z-line);
  background: transparent; font: 500 14px/1 var(--z-font); color: var(--z-body);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.bk__duration:hover { color: var(--z-text); }
.bk__duration[aria-pressed="true"] { background: var(--z-grad-mark); color: #fff; box-shadow: none; }
.bk__tz { width: 100%; height: 40px; padding: 0 10px; border-radius: var(--z-r-md);
  border: 0; box-shadow: inset 0 0 0 1px var(--z-line); background: transparent;
  color: var(--z-text); font: 400 14px/1 var(--z-font); color-scheme: light; }
/* Times run in columns, not one per line. A slot label is four characters wide,
   so a full-width row per slot showed five times in 260px; this fits four to a
   row and shows sixteen in less height. */
.bk__slots { list-style: none; margin: 0; padding: 0 6px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px; max-height: 200px; overflow-y: auto; }
.bk__slots li:has(.bk__empty) { grid-column: 1 / -1; }
.bk__slot { width: 100%; height: 44px; border: 0; cursor: pointer;
  border-radius: var(--z-r-md); box-shadow: inset 0 0 0 1px var(--z-line);
  background: transparent; font: 500 15px/1 var(--z-font); color: var(--z-text);
  transition: box-shadow .18s ease, color .18s ease; }
.bk__slot:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--z-violet); color: var(--z-violet); }
.bk__slot:disabled { color: var(--z-dim); opacity: .5; cursor: not-allowed; text-decoration: line-through; }

/* ── Bước 3: form ─────────────────────────────────────────────────────── */
.bk__summary { padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--z-line); }
.bk__summary-when { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bk__summary-when p { margin: 0; font: 500 15px/22px var(--z-font); color: var(--z-text); }
.bk__form { display: flex; flex-direction: column; gap: 16px; }
.bk__field { display: flex; flex-direction: column; gap: 6px; }
.bk__label { font: 500 12px/18px var(--z-font); letter-spacing: .06em;
  text-transform: uppercase; color: var(--z-dim); }
.bk__input { height: 42px; padding: 0 12px; border: 0; border-radius: var(--z-r-md);
  box-shadow: inset 0 0 0 1px var(--z-line); background: transparent;
  font: 400 15px/1 var(--z-font); color: var(--z-text); outline: none;
  transition: box-shadow .18s ease; }
.bk__input:focus { box-shadow: inset 0 0 0 1px var(--z-blue); }
.bk__error { margin: 0; font: 400 12px/18px var(--z-font); color: #c1362f; }

/* ── Nút và bước 4 ────────────────────────────────────────────────────── */
.bk__actions { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 22px; }
.bk__back { border: 0; background: transparent; cursor: pointer; padding: 8px 4px;
  font: 500 14px/1 var(--z-font); color: var(--z-body); }
.bk__back:hover { color: var(--z-text); }
.bk__link { border: 0; background: transparent; cursor: pointer; padding: 0;
  font: 500 13px/20px var(--z-font); color: var(--z-violet); }
.bk__link:hover { text-decoration: underline; }
.bk__confirm { border: 0; cursor: pointer; height: 44px; padding: 0 26px;
  border-radius: var(--z-r-md); background: var(--z-grad-mark);
  font: 500 15px/1 var(--z-font); color: #fff;
  transition: filter .18s ease, transform .18s ease; }
.bk__confirm:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.bk__confirm:disabled { opacity: .45; cursor: not-allowed; }
.bk__done { text-align: center; padding: 40px 0; }
.bk__done-mark { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; background: var(--z-grad-mark); color: #fff;
  font: 500 26px/1 var(--z-font); }
.bk__done h3 { margin: 0 0 8px; font: 600 22px/30px var(--z-font); color: var(--z-text); }
.bk__done p { margin: 0 0 4px; font: 400 15px/24px var(--z-font); color: var(--z-body); }

/* Focus nhìn thấy được ở mọi phần tử bấm được — Lighthouse a11y chặn ở 0.95. */
.bk :is(button, select, input):focus-visible {
  outline: 2px solid var(--z-blue); outline-offset: 2px; }

@media (max-width: 640px) {
  .bk__panel { padding: 18px 14px 20px; min-height: 0; }
  .bk__slots { max-height: none; }
}