/* ============================================================
   uu-dai-move.css — CHỈ nạp trên /uu-dai/move-unlimited + /en/uu-dai/move-unlimited (gói Move Unlimited, wiki 12.29).
   Nạp SAU uu-dai-page.css, dùng lại khung .pp-hero / .feel / .deal / .faq-list ở đó; ở đây chỉ có khối riêng (tiền tố mv-).
   CHỈ dùng token của style-v5.css.
   ============================================================ */

/* ---------- màn đầu: ảnh dọc 4:5 như bài IG, giá gạch ---------- */
.mv .pp-hero .visual { aspect-ratio: 4 / 5; }
.mv .pp-hero .visual img { object-position: 50% 45%; }
.mv .pp-price .v { color: var(--sage-deep); }
.mv-was { font-size: .95rem; color: var(--ink-faint); white-space: nowrap; }
.mv-small { margin: 10px 0 0; font-size: .92rem; color: var(--ink-faint); }

/* ---------- hết hạn (move.js gắn data-move-state="ended" lên .mv + điền chữ vào [data-move-ended], trước đó ô rỗng + hidden) ---------- */
.mv[data-move-state="ended"] .mv-early { display: none; }
[data-move-ended][hidden] { display: none; }
.mv-ended-note { display: block; max-width: 44ch; font-size: .98rem; line-height: 1.55; color: var(--ink); }
.deal .mv-ended { margin: 18px 0 0; font-size: 1.02rem; line-height: 1.6; color: var(--ink); }

/* ---------- 01 · hai bộ môn ---------- */
.mv-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.mv-card { background: var(--surface); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; }
.mv-card .ph { aspect-ratio: 4 / 5; background: var(--cream-2); overflow: hidden; }
.mv-card .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-card .tx { padding: 26px 28px 30px; }
.mv-card h3 { font-size: 1.45rem; letter-spacing: -.02em; margin: 0; }
.mv-card .sub { margin: 6px 0 12px; font-size: 1.05rem; color: var(--sage-text); font-weight: 500; }
.mv-card p { margin: 0; line-height: 1.6; }

/* ---------- 03 · tự tính giá mỗi buổi ---------- */
.mv-calc { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.mv-cc { appearance: none; font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 26px 28px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-xl); transition: background var(--t), border-color var(--t), color var(--t); }
.mv-cc:hover { border-color: var(--sage); }
.mv-cc:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.mv-cc .w { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-text); }
.mv-cc .n { font-size: 1rem; color: var(--ink-soft); }
.mv-cc .p { margin-top: 10px; font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.mv-cc .p small { display: block; margin-top: 6px; font-size: .85rem; font-weight: 400; letter-spacing: 0; color: var(--ink-faint); }
.mv-cc[aria-pressed="true"] { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
.mv-cc[aria-pressed="true"] .w { color: #C2CAB6; }
.mv-cc[aria-pressed="true"] .n, .mv-cc[aria-pressed="true"] .p small { color: #D8DECF; }

/* ---------- 04 · ba bước (KHÔNG dùng .step: class toàn cục của site có badge số) ---------- */
.mv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.mv-steps li { background: var(--surface); border-radius: var(--r-xl); padding: 28px; }
.mv-steps b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sage-wash); color: var(--sage-deep); font-size: .9rem; font-weight: 600; }
.mv-steps h3 { margin: 16px 0 8px; font-size: 1.14rem; }
.mv-steps p { margin: 0; line-height: 1.6; }

/* ---------- 30 suất + form ---------- */
.mv-offer-ph { aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; margin-bottom: 26px; background: var(--cream-2); }
.mv-offer-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; display: block; }
.mv-list { margin: 18px 0 0; font-size: .95rem; color: var(--ink-soft); }
.mv-list s { color: var(--ink-faint); }
.deal .price small { display: block; margin-top: 8px; font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--ink-soft); }
.mv .field input[type="date"] { min-height: 48px; }   /* còn lại dùng style .field input của style-v5 cho giống 2 ô chọn */
.mv .opt-l { color: var(--ink-faint); font-weight: 400; }

/* ---------- báo nhỏ sau khi chép chữ MOVE ---------- */
.mv-toast { position: fixed; left: 50%; bottom: 96px; z-index: 40; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; max-width: calc(100% - 32px); background: var(--sage-deep); color: #fff; font-size: .92rem; line-height: 1.45; padding: 12px 16px; border-radius: var(--r-md); box-shadow: 0 14px 34px -14px rgba(33,36,29,.45); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.mv-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- màn hẹp ---------- */
@media (max-width: 900px) {
  .mv-two, .mv-calc, .mv-steps { grid-template-columns: 1fr; }
  .mv .pp-hero .visual { aspect-ratio: 4 / 5; max-height: 70vh; }
  .mv-card .ph { aspect-ratio: 4 / 3; }
  .mv-card:last-child .ph img { object-position: 50% 35%; }
}
@media (max-width: 640px) {
  .mv .pp-hero .visual { aspect-ratio: 4 / 3; }          /* ảnh thấp hơn → giá + nút lên gần màn đầu */
  .mv .pp-hero .visual img { object-position: 50% 32%; }
  .mv .pp-hero .float-note { display: none; }            /* ảnh 4:3 thấp, ô chữ nổi che nửa người mẫu */
  .mv .pp-hero h1 { font-size: 1.95rem; }
  .mv-was { flex-basis: 100%; }
  .mv-cc { padding: 20px 22px; }
  .mv-card .tx { padding: 22px; }
}

/* ---------- đồng hồ đếm ngược tới hết 22/11 (move.js điền + bỏ hidden) ---------- */
.mv-cd { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 16px; }
.mv-cd[hidden] { display: none; }
.mv-cd-l { font-size: .86rem; color: var(--ink-soft); }
.mv-cd-b { display: inline-flex; align-items: center; gap: 6px; }
.mv-cd-u { display: inline-flex; flex-direction: column; align-items: center; min-width: 54px; padding: 8px 10px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.mv-cd-u b { font-size: 1.35rem; font-weight: 600; line-height: 1; color: var(--clay-text); font-variant-numeric: tabular-nums; }
.mv-cd-u small { margin-top: 4px; font-size: .7rem; color: var(--ink-faint); }
.mv-cd i { font-style: normal; font-weight: 600; color: var(--ink-faint); }
.deal .mv-cd { margin-top: 18px; }