/* ============================================================
   TechTide — Advertising Pricing (page-advertising-pricing.php)
   HERO (dùng .tt-ab-hero của about.css) → PACKAGES (form sticky + thẻ sản phẩm)
   → FAQ (dùng .tt-faq2 của faqs.css + faqs.js).
   File này CHỈ lo phần PACKAGES (riêng của trang) + vài override nhỏ cho FAQ.
   Phân cách section = line xám full-màn; KHÔNG nền xen kẽ.
   Nạp sau about.css + faqs.css (xem thứ tự dependency trong functions.php).
   ============================================================ */

/* ======================= PACKAGES ======================= */
.tt-ap-packages{ border-top: 1px solid var(--tt-line); background: var(--tt-bg); }
.tt-ap-packages__inner{
  max-width: 1180px; margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}

.tt-ap-packages__head{ max-width: 760px; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.tt-ap-packages__title{ font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; margin: 0; }
.tt-ap-packages__desc{ margin: 1rem 0 0; color: rgba(0,0,0,.55); font-size: 1.05rem; line-height: 1.6; max-width: 62ch; }

/* layout: FORM trái (sticky) + CARDS phải */
.tt-ap-packages__body{
  display: grid;
  grid-template-columns: minmax(300px, 360px) 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

/* ---------- FORM (sticky) — THẺ CHUẨN ---------- */
.tt-ap-form-wrap{
  position: sticky;
  top: calc(var(--tt-bar-top, 5px) + var(--tt-bar-h, 64px) + 1.25rem);
}
.tt-ap-form{
  background: #fff;
  border: 1px solid #e2e2de;
  border-radius: 6px;
  box-shadow: rgba(0,0,0,.1) 0 4px 8px -2px, rgba(0,0,0,.06) 0 2px 4px -2px;
  padding: 28px;
}
.tt-ap-form__title{ font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 0 0 .35rem; }
.tt-ap-form__lead{ margin: 0 0 1.25rem; color: rgba(0,0,0,.55); font-size: .925rem; line-height: 1.5; }

/* ô nhập — khớp .tt-field của home.css (border --tt-line, radius 8px, focus viền đen) */
.tt-ap-field{ margin: 0 0 .9rem; display: flex; flex-direction: column; gap: .4rem; }
.tt-ap-field label{ font-size: .85rem; font-weight: 500; color: var(--tt-ink); }
.tt-ap-req{ color: #e5484d; margin-left: 1px; }
.tt-ap-field input,
.tt-ap-field select,
.tt-ap-field textarea{
  width: 100%;
  font-family: var(--tt-font-body); font-size: 1rem; color: var(--tt-ink);
  background: #fff; border: 1px solid var(--tt-line); border-radius: 8px;
  padding: .7rem .85rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tt-ap-field textarea{ min-height: 110px; resize: vertical; line-height: 1.5; }
.tt-ap-field input:focus,
.tt-ap-field select:focus,
.tt-ap-field textarea:focus{
  outline: none; border-color: var(--tt-ink); box-shadow: 0 0 0 3px rgba(10,10,10,.08);
}

/* lỗi inline — GIỐNG form Contact: dòng đỏ tinh tế dưới ô + viền đỏ khi .is-invalid */
.tt-ap-field__err,
.tt-ap-consent__err{ display: none; color: #c0392b; font-size: .8rem; line-height: 1.4; margin: 0; }
.tt-ap-field.is-invalid .tt-ap-field__err,
.tt-ap-consent.is-invalid .tt-ap-consent__err{ display: block; }
.tt-ap-field.is-invalid input,
.tt-ap-field.is-invalid select,
.tt-ap-field.is-invalid textarea{ border-color: #c0392b; }
.tt-ap-field.is-invalid input:focus,
.tt-ap-field.is-invalid select:focus,
.tt-ap-field.is-invalid textarea:focus{ border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.12); }

.tt-ap-consent{ margin: .25rem 0 1.1rem; }
.tt-ap-consent__check{ display: flex; align-items: flex-start; gap: .55rem; font-size: .825rem; color: var(--tt-ink-soft); line-height: 1.45; cursor: pointer; }
.tt-ap-consent__check input{ width: 18px; height: 18px; margin-top: .1rem; flex: 0 0 auto; accent-color: var(--tt-ink); cursor: pointer; }
.tt-ap-consent.is-invalid .tt-ap-consent__check input{ outline: 2px solid #c0392b; outline-offset: 2px; border-radius: 3px; }
.tt-ap-consent__err{ margin-top: .4rem; }

.tt-ap-hp{ position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.tt-ap-form__btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  font-family: var(--tt-font-body); font-weight: 600; font-size: .95rem; line-height: 1.2;
  padding: .8rem 1.8rem;
  background: var(--tt-ink); color: #fff;
  border: 0; border-radius: 50px; cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, opacity .2s ease;
}
.tt-ap-form__btn:hover{ background: #222; transform: translateY(-1px); }
.tt-ap-form__btn:disabled{ opacity: .6; cursor: default; transform: none; }

.tt-ap-form__status{ margin: .8rem 0 0; font-size: .9rem; line-height: 1.5; min-height: 1.2em; }
.tt-ap-form__status.is-pending{ color: var(--tt-ink-soft); }
.tt-ap-form__status.is-ok{ color: #1a7f4b; }
.tt-ap-form__status.is-err{ color: #c0392b; }

.tt-ap-form a:focus-visible,
.tt-ap-form button:focus-visible,
.tt-ap-form input:focus-visible,
.tt-ap-form select:focus-visible,
.tt-ap-form textarea:focus-visible{ outline: 2px solid var(--tt-accent); outline-offset: 2px; }

/* ---------- PRODUCT CARDS — THẺ CHUẨN ---------- */
.tt-ap-cards{ display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem); }

.tt-ap-card{
  position: relative;
  background: #fff;
  border: 1px solid #e2e2de;
  border-radius: 6px;
  box-shadow: rgba(0,0,0,.1) 0 4px 8px -2px, rgba(0,0,0,.06) 0 2px 4px -2px;
  padding: 28px;
}

/* giá = tag trên đầu thẻ (đen, pill) */
.tt-ap-card__price{
  display: inline-flex; align-items: baseline;
  background: var(--tt-ink); color: #fff;
  font-weight: 600; font-size: .9rem; letter-spacing: .005em;
  padding: .5rem 1rem; border-radius: 50px;
  margin: 0 0 1.25rem;
}

.tt-ap-card__head{ display: flex; align-items: baseline; gap: .8rem; margin: 0 0 .85rem; }
.tt-ap-card__num{ font-weight: 500; font-size: .85rem; color: var(--tt-ink-soft); }
.tt-ap-card__title{ font-size: 1.4rem; font-weight: 600; line-height: 1.25; letter-spacing: normal; margin: 0; }

.tt-ap-card__body p{ color: rgba(0,0,0,.62); font-size: .95rem; line-height: 1.6; margin: 0 0 .8rem; }
.tt-ap-card__body p:last-child{ margin-bottom: 0; }
.tt-ap-card__links{ font-size: .9rem !important; }
.tt-ap-card__links span{ color: var(--tt-ink-soft); }
.tt-ap-card__links a{ color: var(--tt-ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; transition: opacity .15s ease; }
.tt-ap-card__links a:hover{ opacity: .6; }

/* feature lines = chips xếp 1 hàng (wrap) */
.tt-ap-card__features{
  list-style: none; margin: 1.3rem 0 0; padding: 1.3rem 0 0;
  border-top: 1px solid var(--tt-line);
  display: flex; flex-wrap: wrap; gap: .5rem .55rem;
}
.tt-ap-card__features li{
  display: inline-flex; align-items: center; gap: .42rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tt-ink-soft);
  background: var(--tt-bg-soft);
  border: 1px solid var(--tt-line);
  border-radius: 50px;
  padding: .42rem .72rem;
}
.tt-ap-card__features li::before{
  content: ""; width: 13px; height: 13px; flex: 0 0 auto; align-self: center;
  background: no-repeat center/contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.2 3.2 6.3-7.2' fill='none' stroke='%2352525b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ======================= FAQ ======================= */
/* Khung 2 cột + accordion mobile do faqs.css/faqs.js lo (.tt-faq2). Đây chỉ thêm: */
/*  - section wrapper + line phân cách + head riêng cho trang này                  */
/*  - cho phép đáp án nhiều đoạn + bảng giá (faqs.css mặc định 1 <p>)              */
.tt-ap-faqs{ border-top: 1px solid var(--tt-line); background: var(--tt-bg); }
.tt-ap-faqs__inner{
  max-width: 1180px; margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}
.tt-ap-faqs__head{ max-width: 760px; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.tt-ap-faqs__title{ font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; margin: 0; }
.tt-ap-faqs__desc{ margin: 1rem 0 0; color: rgba(0,0,0,.55); font-size: 1.05rem; line-height: 1.6; max-width: 62ch; }

/* đáp án nhiều khối: faqs.css đặt .tt-faq2__abox p{ margin:0 } → thêm khoảng cách giữa các khối */
.tt-ap-faqs .tt-faq2__abox > *{ margin: 0; }
.tt-ap-faqs .tt-faq2__abox > * + *{ margin-top: .9rem; }
.tt-ap-faqs .tt-faq2__abox strong{ color: var(--tt-ink); font-weight: 600; }

/* bảng giá vị trí (#1 → #11+) */
.tt-ap-faq-prices{ list-style: none; padding: 0; display: grid; gap: 0; max-width: 320px; }
.tt-ap-faq-prices li{
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 1rem; color: var(--tt-ink);
  padding: .45rem 0; border-bottom: 1px solid var(--tt-line);
}
.tt-ap-faq-prices li:last-child{ border-bottom: 0; }

/* ======================= RESPONSIVE ======================= */
@media (max-width: 900px){
  .tt-ap-packages__body{ grid-template-columns: 1fr; }
  .tt-ap-form-wrap{ position: static; order: 2; }   /* form bỏ sticky, xuống dưới các thẻ */
  .tt-ap-cards{ order: 1; }                          /* thẻ sản phẩm hiện trước trên mobile */
}
@media (max-width: 1024px){
  /* đáp án Q1 dài (bảng giá 11 dòng) — nới max-height accordion mobile của faqs.css (mặc định 640px) */
  .tt-ap-faqs .tt-faq2__panel.is-open .tt-faq2__answer{ max-height: 1600px; }
}
@media (max-width: 560px){
  .tt-ap-card{ padding: 22px; }
  .tt-ap-card__title{ font-size: 1.25rem; }
  .tt-ap-form{ padding: 22px; }
}