/* ==========================================================================
   TRANG CHI TIẾT FLASH SALE (/flash-sale/:slug) — v3, tiền tố fl3-. Làm lại 23/10.
   2 cột: trái = đầu trang · thẻ ưu đãi + mã · thông tin · cách dùng · chi tiết; phải = nha khoa phát hành + hành động · banner 3:5.
   Màu chủ đạo Flash Sale = cam pastel (orange-50/100) như thẻ Flash ở trang chủ và /voucher; chữ cam dùng orange-700; nút chính nền orange-700 chữ trắng (tương phản ≥ 5:1).
   Thang chữ: h1 26/800 · h2 hộp 17/700 · tên 16/700 · thân 14 · chú thích 12 · nhỏ nhất 11. Tối đa 2 lớp khung. Không vạch trái.
   Móc JS giữ nguyên (p-vpop.js): [data-fsd-ticket|get|note|copy|use|msg], .fsd-code, .cdx (p-countdown.js).
   ========================================================================== */
.fl3 { --fl-bg: var(--ds-orange-50); --fl-ln: #f4dcc3; --fl-ink: var(--ds-orange-700); }
.fl3-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; margin-top: 4px; }
.fl3-main, .fl3-side { display: grid; gap: 14px; min-width: 0; align-content: start; }

/* ---------- đầu trang ---------- */
.fl3-head { display: grid; gap: 8px; min-width: 0; }
.fl3-chips { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; }
.fl3-chips > * { flex: none; }
.fl3-save { margin-left: auto; }
.fl3-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 4px; font-size: 11px; font-weight: var(--ds-fw-600); background: var(--ds-bg-soft); color: var(--ds-ink-700); white-space: nowrap; }
.fl3-chip i { font-size: 12px; }
.fl3-chip-km { background: var(--ds-orange-100); color: var(--fl-ink); }
.fl3-chip-kt { background: var(--ds-rose-100); color: var(--ds-rose-700); }
.fl3-chip-mau { background: #fff; color: var(--ds-ink-500); box-shadow: inset 0 0 0 1px var(--ds-line-strong); }
.fl3-st-live { background: var(--ds-mint-100); color: var(--ds-mint-700); }
.fl3-st-live i { font-size: 8px; }
.fl3-st-upcoming { background: var(--ds-blue-100); color: var(--ds-blue-700); }
.fl3-ti { margin: 0; font-size: 26px; font-weight: var(--ds-fw-700); letter-spacing: -.4px; line-height: 1.22; color: var(--ds-ink-900); text-wrap: balance; }
.fl3-sub { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; font-weight: var(--ds-fw-400); color: var(--ds-ink-500); }
.fl3-sub i { font-size: 16px; color: var(--ds-mint-500); }
.fl3-sub a { font-weight: var(--ds-fw-600); color: var(--ds-ink-800); }
.fl3-sub a:hover { color: var(--ds-blue-600); }
.fl3-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ds-ink-400); }

/* ---------- thẻ ưu đãi + mã ---------- */
.fl3-tk { background: var(--fl-bg); border: 1px solid var(--fl-ln); border-radius: 10px; overflow: hidden; }
.fl3-tk-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.fl3-big, .fl3-timer { display: grid; gap: 4px; align-content: center; padding: 22px 24px; min-width: 0; }
.fl3-timer { border-left: 1px solid var(--fl-ln); justify-items: start; }
.fl3-big b { font-size: 56px; font-weight: var(--ds-fw-700); line-height: 1; letter-spacing: -1.6px; color: var(--fl-ink); font-variant-numeric: tabular-nums; }
.fl3-big span { font-size: 14px; font-weight: var(--ds-fw-600); color: var(--ds-ink-700); }
.fl3-tl { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: var(--ds-fw-600); color: var(--ds-ink-500); }
.fl3-tl i { font-size: 14px; color: var(--ds-orange-500); }
.fl3-tv { font-size: 22px; font-weight: var(--ds-fw-700); color: var(--ds-ink-900); }
.fl3-timer .cdx { --cs: 28px; justify-items: start; }
.fl3-timer .cdx-d { font-size: 12px; }
.fl3-timer .cdx-t b, .fl3-timer .cdx-t i { font-size: 14px; }
.fl3-left { display: grid; gap: 4px; width: 100%; max-width: 240px; margin-top: 6px; }
.fl3-left .bar { height: 5px; border-radius: 3px; background: #fff; overflow: hidden; }
.fl3-left .bar span { display: block; height: 100%; border-radius: 3px; background: var(--ds-orange-500); }
.fl3-left small { font-size: 12px; color: var(--ds-ink-500); }
.fl3-left small b { color: var(--ds-ink-900); font-weight: var(--ds-fw-700); }
.fl3-cut { border-top: 1px dashed #ebc8a4; }
.fl3-tk-bot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 16px; padding: 16px 24px 18px; background: #fff; }
.fl3-code-w { display: grid; gap: 4px; min-width: 0; }
.fl3-lab { font-size: 12px; font-weight: var(--ds-fw-600); color: var(--ds-ink-500); }
.fl3-code { display: block; padding: 9px 14px; border-radius: 6px; background: var(--fl-bg); border: 1px solid var(--fl-ln); font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; font-size: 22px; font-weight: var(--ds-fw-700); letter-spacing: .08em; line-height: 1.25; color: var(--ds-ink-900); overflow-wrap: anywhere; }
.fl3-mask { color: var(--ds-ink-400); user-select: none; }
.fl3-acts { display: flex; gap: 8px; align-items: stretch; }
.fl3-cta, .fl3-cta2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border: 0; border-radius: 6px; font: inherit; font-size: 14px; font-weight: var(--ds-fw-700); white-space: nowrap; cursor: pointer; transition: background .15s var(--ds-ease, ease); }
.fl3-cta { background: var(--fl-ink); color: #fff; }
.fl3-cta:hover { background: #9a4708; color: #fff; }
.fl3-cta:active, .fl3-cta2:active { transform: translateY(1px); }
.fl3-cta2 { background: #fff; color: var(--ds-ink-800); box-shadow: inset 0 0 0 1px var(--ds-line-strong); }
.fl3-cta2:hover { background: var(--ds-bg-soft); }
.fl3-cta-off, .fl3-cta-off:hover { background: var(--ds-bg-soft); color: var(--ds-ink-500); cursor: not-allowed; }
.fl3-cta:focus-visible, .fl3-cta2:focus-visible, .fl3-b:focus-visible { outline: 2px solid var(--ds-blue-500); outline-offset: 2px; }
.fl3-hint { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: var(--ds-fw-400); color: var(--ds-ink-500); }
.fl3-hint i { color: var(--ds-mint-500); font-size: 14px; }
.fl3-hint a { color: var(--ds-blue-600); font-weight: var(--ds-fw-600); }
.fl3-err { grid-column: 1 / -1; padding: 8px 10px; border-radius: 4px; background: var(--ds-rose-50); font-size: 12px; font-weight: var(--ds-fw-600); color: var(--ds-rose-700); }
.fl3-err[hidden] { display: none; }

/* ---------- khối nội dung (1 khung, bên trong chỉ đường kẻ) ---------- */
.fl3-sec { background: #fff; border: 1px solid var(--ds-line); border-radius: 10px; padding: 16px 20px 18px; min-width: 0; }
.fl3-sec h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 17px; font-weight: var(--ds-fw-700); color: var(--ds-ink-900); }
.fl3-sec h2 i { font-size: 18px; color: var(--ds-orange-500); }
.fl3-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 0; }
.fl3-dl > div { padding: 10px 0; border-top: 1px solid var(--ds-line); min-width: 0; }
.fl3-dl > div:nth-child(-n+2) { border-top: 0; }
.fl3-dl .wide { grid-column: 1 / -1; }
.fl3-dl dt { font-size: 12px; font-weight: var(--ds-fw-400); color: var(--ds-ink-500); }
.fl3-dl dd { margin: 2px 0 0; font-size: 14px; font-weight: var(--ds-fw-600); color: var(--ds-ink-900); overflow-wrap: anywhere; }
.fl3-dl dd small { display: block; margin-top: 2px; font-size: 12px; font-weight: var(--ds-fw-400); color: var(--ds-ink-500); }
.fl3-ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--ds-ink-700); }
.fl3-ol li { counter-increment: s; display: flex; gap: 10px; align-items: flex-start; }
.fl3-ol li::before { content: counter(s); flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--ds-orange-100); color: var(--fl-ink); font-size: 12px; font-weight: var(--ds-fw-700); }
.fl3-ol b { font-weight: var(--ds-fw-600); color: var(--ds-ink-900); }
.fl3-det > div + div { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ds-line); }
.fl3-det b { font-size: 14px; font-weight: var(--ds-fw-700); color: var(--ds-ink-900); }
.fl3-det p { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--ds-ink-700); }

/* ---------- cột phải ---------- */
.fl3-cl { display: grid; gap: 12px; padding: 16px; background: #fff; border: 1px solid var(--ds-line); border-radius: 10px; }
.fl3-cl-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fl3-cl-main .lg { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ds-line); font-size: 14px; font-weight: var(--ds-fw-700); }
.fl3-cl-info { display: grid; gap: 4px; min-width: 0; }
.fl3-cl-info > b { font-size: 16px; font-weight: var(--ds-fw-700); line-height: 1.3; color: var(--ds-ink-900); }
.fl3-cl-info > b a:hover { color: var(--ds-blue-600); }
.fl3-cl-info > b small { font-size: 12px; font-weight: var(--ds-fw-400); color: var(--ds-ink-500); }
.fl3-cl-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--ds-ink-500); }
.fl3-rate { display: inline-flex; align-items: center; gap: 3px; }
.fl3-rate i { color: #f2a900; }
.fl3-rate b { color: var(--ds-ink-900); font-weight: var(--ds-fw-600); }
.fl3-cl-ls { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--ds-line); display: grid; gap: 8px; font-size: 13px; color: var(--ds-ink-700); }
.fl3-cl-ls:empty { display: none; }
.fl3-cl-ls li { display: flex; gap: 8px; align-items: flex-start; }
.fl3-cl-ls i { flex: none; margin-top: 2px; font-size: 14px; color: var(--ds-ink-400); }
.fl3-cl-ls .open { color: var(--ds-mint-700); font-weight: var(--ds-fw-600); }
.fl3-cl-ls .open i { color: var(--ds-mint-500); }
.fl3-cl-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fl3-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: 6px; background: var(--ds-bg-soft); color: var(--ds-ink-900); font-size: 13px; font-weight: var(--ds-fw-600); white-space: nowrap; transition: background .15s; }
.fl3-b:hover { background: var(--ds-line); }
.fl3-b-pri { grid-column: 1 / -1; background: var(--ds-blue-600); color: #fff; font-weight: var(--ds-fw-700); }
.fl3-b-pri:hover { background: var(--ds-blue-700); color: #fff; }
.fl3-b i { font-size: 16px; }
.fl3-bn { position: relative; aspect-ratio: var(--ar-flash, 3/5); border-radius: 10px; overflow: hidden; background: var(--ds-bg-soft); }
.fl3-bn > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fl3-bn .fs { position: absolute; inset: 0; display: block; }
.fl3-bn .fs .bn { height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; transform: none !important; box-shadow: none !important; }
.fl3-more { margin-top: 18px; min-width: 0; }

@media (max-width: 980px) {
  .fl3-grid { grid-template-columns: minmax(0, 1fr); }
  .fl3-side { grid-template-columns: minmax(0, 1fr); }
  .fl3-bn { max-width: 320px; width: 100%; margin: 0 auto; }
}
@media (max-width: 760px) {
  .fl3-ti { font-size: 22px; }
  .fl3-tk-top { grid-template-columns: minmax(0, 1fr); }
  .fl3-timer { border-left: 0; border-top: 1px solid var(--fl-ln); }
  .fl3-big, .fl3-timer { padding: 16px; }
  .fl3-big b { font-size: 44px; }
  .fl3-tk-bot { grid-template-columns: minmax(0, 1fr); padding: 14px 16px 16px; }
  .fl3-acts { flex-direction: column; }
  .fl3-cta, .fl3-cta2 { width: 100%; }
  .fl3-dl { grid-template-columns: minmax(0, 1fr); }
  .fl3-dl > div:nth-child(2) { border-top: 1px solid var(--ds-line); }
  .fl3-sec { padding: 14px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) { .fl3-cta, .fl3-cta2, .fl3-b { transition: none; } }