/* TKT Theme · /request/ T4 (templates/pages/request.php). Chỉ nạp khi cờ "request" bật. Nguồn bố cục: bản chủ trang
   frontend/design-handoff/request/design/request-v2.html. DS 2.1: chỉ token var(--*), không !important, lớp trang tiền tố request-;
   khối dùng chung (seg-tabs--slide, contact-tile, spec-tag, progress-meter, live-status, field-cell, aside-sticky, info-tip--up) ở components.css. */

.request-page { background: linear-gradient(180deg, var(--bg-canvas) 0%, var(--bg-pure) 70%); color: var(--fg-1); overflow-x: clip; }
.request-page p { margin: 0; }
.request-wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--s-6); }
@media (max-width: 599px) { .request-wrap { padding: 0 var(--s-4); } }

/* Hero gọn: 1 cột, chừa đáy cho panel đè lên (thay display:flex!important của v2 bằng độ đặc hiệu 0,2,0) */
.request-hero .hero-campaign__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4);
  padding-top: var(--s-9); padding-bottom: calc(var(--s-10) + var(--s-8)); }
.request-hero .request-eyebrow { color: var(--fg-on-dark-2); }
.request-eyebrow::before { content: ""; flex: none; width: var(--s-7); height: 3px; border-radius: var(--r-2); background: var(--tkt-orange-500); }
.request-hero .request-hero__title { font-size: clamp(34px, 4.6vw, 56px); }
.request-hero .request-hero__lede { max-width: none; line-height: 1.55; text-wrap: pretty; }
@media (max-width: 599px) {
  .request-hero .hero-campaign__inner { padding: var(--s-7) var(--s-4) calc(var(--s-9) + var(--s-6)); }
  .request-hero .request-hero__lede { font-size: 16px; }
}

/* Khung chính: panel 8/12 + cột phụ 4/12 (dính, .aside-sticky) */
.request-main { position: relative; z-index: 1; margin-top: calc((var(--s-10) + var(--s-6)) * -1); display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 1024px) { .request-main { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s-6); } }
@media (max-width: 599px) { .request-main { margin-top: calc(var(--s-9) * -1); } }
.request-panel { position: relative; padding: var(--s-7); border-radius: var(--r-24); background: var(--bg-pure); box-shadow: var(--elev-1), var(--elev-4); }
@media (max-width: 599px) { .request-panel { padding: var(--s-4); border-radius: var(--r-20); } }

/* Tab 5 luồng: .seg-tabs--slide.seg-tabs--boxed; khoảng cách dưới */
.request-types { padding: 4px; margin-bottom: var(--s-6); }

/* Đầu panel: tiêu đề + ⓘ + tiến độ */
.request-head { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-5); }
.request-head__title { display: flex; align-items: center; gap: var(--s-2); }
.request-tip .info-tip__body { left: 50%; width: max-content; max-width: 260px; text-align: left; letter-spacing: normal; font-weight: var(--w-medium);
  opacity: 0; visibility: hidden; transform: translate(-50%, 4px); pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility var(--dur-2); }
.request-tip:hover .info-tip__body, .request-tip:focus-within .info-tip__body { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.request-tip .info-tip__btn { cursor: help; }
.request-tip .info-tip__btn:focus-visible { outline: 3px solid var(--tkt-blue-200); outline-offset: 2px; }
@media (max-width: 599px) {
  /* Bong bóng bám theo đầu panel (không tràn ngang khi ⓘ nằm sát mép) */
  .request-tip { position: static; }
  .request-tip .info-tip__body { left: 0; right: 0; width: auto; max-width: none; transform: translateY(4px); }
  .request-tip:hover .info-tip__body, .request-tip:focus-within .info-tip__body { transform: none; }
  .request-head { margin-bottom: var(--s-4); }
}

/* Form */
.request-form { display: flex; flex-direction: column; gap: var(--s-4); }
.request-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.request-grid[hidden] { display: none; }
.request-flow { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; margin: 0; padding: 0; border: 0; animation: request-in var(--dur-4) var(--ease-out); }
.request-flow[hidden] { display: none; }
@keyframes request-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.request-field { display: flex; flex-direction: column; gap: var(--s-2); }
.request-label { font: var(--w-bold) 13px/1.3 var(--font-display); color: var(--fg-2); }
.request-req { color: var(--semantic-danger); }
.request-choices { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.request-choices .choice-tag { cursor: pointer; }
.request-choices .choice-tag:focus-visible { outline: 3px solid var(--tkt-blue-200); outline-offset: 2px; }
.request-params { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.request-area { height: auto; justify-content: flex-start; gap: var(--s-1); padding-top: var(--s-3); padding-bottom: var(--s-3); }
.request-area textarea { min-height: 96px; resize: vertical; }
.request-form .request-mono { font-family: var(--font-mono); letter-spacing: .02em; }

/* Hỗ trợ: 2 thẻ kênh + ô gọi lại */
.request-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.request-callback { display: flex; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.request-callback .field-cell { flex: 1 1 220px; }
.request-callback .btn { flex: none; }

/* Hàng gửi + nháp + lỗi gửi */
.request-submit { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-2); }
.request-submit[hidden] { display: none; }
.request-draft { display: flex; align-items: center; gap: var(--s-2); font: var(--w-medium) 12px/1.4 var(--font-body); color: var(--fg-caption); }
.request-draft[hidden], .request-send-err[hidden] { display: none; }
.request-draft svg { flex: none; width: 14px; height: 14px; }
.request-draft button { min-height: 32px; padding: 0 var(--s-1); border: 0; background: none; color: var(--tkt-blue-600); font: inherit; font-weight: var(--w-bold);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.request-send-err { font: var(--w-medium) 13px/1.4 var(--font-body); color: var(--semantic-danger); }

/* Dải sản phẩm từ ?sku= */
.request-sku { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border-radius: var(--r-12);
  background: var(--tkt-orange-050); border: 1px solid var(--tkt-orange-300); font-size: 14px; }
.request-sku > svg { flex: none; color: var(--tkt-orange-700); }
.request-sku__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.request-sku__x { flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--r-8); background: none; color: var(--fg-caption); cursor: pointer; }
.request-sku__x:hover { background: var(--tkt-orange-100); }

/* Màn thành công (phủ panel) */
.request-success { position: absolute; inset: 0; z-index: var(--z-raised); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3);
  padding: var(--s-7); border-radius: inherit; background: var(--bg-pure); text-align: center; animation: request-in var(--dur-4) var(--ease-out); }
.request-success[hidden] { display: none; }
.request-success__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--semantic-success-bg); color: var(--semantic-success); }
.request-success__icon path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: request-tick 600ms 200ms var(--ease-out) forwards; }
@keyframes request-tick { to { stroke-dashoffset: 0; } }
.request-success h3:focus { outline: none; }
.request-success__sum { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.request-success__text { color: var(--fg-2); font-size: 15px; }

/* Cột phụ: 2 thẻ liên hệ + 3 dòng dữ kiện; ẩn thẻ khi đang ở luồng Hỗ trợ (đã có trong panel) */
.request-aside { display: flex; flex-direction: column; gap: var(--s-3); }
.request-page[data-type="support"] .request-aside .contact-tile { display: none; }
.request-facts { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-2) 0 0; padding: var(--s-4) 0 0; list-style: none; border-top: 1px solid var(--line); }
.request-facts li { display: flex; align-items: center; gap: var(--s-2); font: var(--w-medium) 14px/1.4 var(--font-body); color: var(--fg-2); }
.request-facts svg { flex: none; width: 16px; height: 16px; color: var(--semantic-success); }
.request-facts b { color: var(--fg-1); }
.request-end { height: var(--s-10); }

/* Mobile là bản chính: 1 cột, vùng chạm ≥ 44px, ô nhập 16px (không zoom iOS) */
@media (max-width: 904px) { .request-params { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .request-grid, .request-channels { grid-template-columns: minmax(0, 1fr); }
  .request-form input, .request-form textarea { font-size: 16px; }
  .request-choices .choice-tag { min-height: 44px; }
  .request-draft button { min-height: 44px; }
  .request-submit .btn, .request-callback .btn { width: 100%; justify-content: space-between; }
  .request-success { padding: var(--s-5) var(--s-4); }
  .request-end { height: var(--s-8); }
}

/* Vào khung (JS thêm .request-js lên <html> khi không giảm chuyển động) */
.request-js .request-reveal { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms); }
.request-js .request-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .request-flow, .request-success, .request-success__icon path { animation: none; stroke-dashoffset: 0; }
  .request-tip .info-tip__body { transition: none; }
}