/* NOVA Affiliate — dùng đúng bảng màu nhận diện Nova Automation (chép từ nova.css của
   Nova Đăng Nhóm để hai sản phẩm nhìn là cùng một nhà).
   BẪY ĐÃ ĐƯỢC CẢNH BÁO: --accent (#e11d8f) làm màu CHỮ trên nền trắng thì chói và khó đọc.
   Chữ và link phải dùng --accent-ink; --accent chỉ để làm nền nút và vạch nhấn. */

:root {
  --bg: #fdf6fa;
  --bg-alt: #fbe7f1;
  --surface: #ffffff;
  --ink: #1f1420;
  --ink-2: #6b5a67;
  --ink-3: #9a8794;
  --line: #efdce8;
  --line-strong: #e3c6d9;
  --accent: #e11d8f;
  --accent-ink: #a8146b;
  --accent-soft: #fce9f4;
  --ok: #0e7a57;
  --ok-soft: #e4f5ee;
  --warn: #8f5b00;
  --warn-soft: #fbf0da;
  --risk: #b01f34;
  --risk-soft: #fbe7ea;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(31, 20, 32, 0.05), 0 8px 24px -12px rgba(31, 20, 32, 0.14);
}

* { box-sizing: border-box; }

/* THUỘC TÍNH `hidden` PHẢI THẮNG MỌI LUẬT display CỦA MÌNH.
 *
 * Trình duyệt cài `hidden` bằng `display:none` trong bảng kiểu mặc định, mà bảng kiểu mặc định
 * thua bất kỳ luật nào tác giả viết. Nên `#hopManHinh { display:flex }` làm thẻ có `hidden`
 * vẫn hiện — lớp phủ màn hình máy chạy che kín cả trang, bấm "Đóng" cũng không mất vì Đóng chỉ
 * đặt lại đúng cái thuộc tính đang bị vô hiệu.
 *
 * Đã xảy ra thật 02/09/2026 và mình còn chẩn đoán nhầm hai lần thành lỗi bộ nhớ đệm. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); letter-spacing: -0.015em; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 12px; }

.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; min-width: 0; }
.brand svg { width: 22px; height: 22px; color: var(--accent); flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: #fdf6fa; border: 0; border-radius: 9px;
  padding: 11px 18px; font-family: inherit; font-size: 0.94rem; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: filter 0.15s;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--accent-ink); border: 1px solid var(--line-strong); }
.btn.ghost:hover { background: var(--accent-soft); }
.btn.small { padding: 7px 13px; font-size: 0.85rem; }
.btn.risk { background: var(--risk); }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }

header.top {
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 16px; flex-wrap: nowrap; }
header.top .wrap > .brand { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
header.top .wrap > .btn { flex: none; }

/* Cặp nhãn dài/ngắn: máy tính đọc đủ câu, điện thoại chỉ hiện phần cốt lõi. Rút chữ vẫn hơn
   để nút gãy đôi tràn ra ngoài thanh — đã thấy trên máy khách. */
.chi-sm { display: none; }
.me { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--ink-2); min-width: 0; }

/* Thanh trên cùng KHÔNG được xuống dòng. Trên màn 360px, chip tên gói dài làm cả hàng gãy
   ba dòng và đè lên tên thương hiệu — đã thấy tận mắt trên máy khách. Cách chữa: cấm xuống
   dòng, cho chip co lại và cắt bằng dấu ba chấm thay vì đẩy vỡ hàng. */
.chip-goi {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 40vw; flex: 0 1 auto;
}
.me img { width: 30px; height: 30px; border-radius: 50%; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; margin-bottom: 20px;
}

label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong);
  border-radius: 9px; font-family: inherit; font-size: 0.95rem; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > .grow { flex: 1 1 320px; }
.row > .narrow { flex: 0 0 150px; }

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); font-weight: 700; }
td .thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); background: var(--bg-alt); }
.name { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sub { color: var(--ink-3); font-size: 0.82rem; }

/* Dong phu duoi gio bat dau o cot Thoi gian: nho hon va nhat hon de gio van la thu doc truoc. */
.nho { font-size: 0.76rem; opacity: 0.72; margin-top: 2px; }

/* Tình trạng việc nằm ngay trên dòng sản phẩm ở thẻ Kho hàng. Cho phép XUỐNG DÒNG: ghi chú
   của máy chạy là câu tiếng Việt đầy đủ ("Đã mở cửa sổ tạo video..."), ép một dòng thì hoặc
   tràn viền hoặc cụt mất đúng phần nói máy đang chờ gì. */
.tinh-trang { white-space: normal; max-width: 320px; margin-bottom: 6px; }
.tinh-trang .sub { display: block; margin-top: 3px; line-height: 1.45; }
/* Gio khong duoc xuong dong giua chung — "14:" mot dong "05" dong duoi thi doc rat kho. */
.oGio { white-space: nowrap; }

.tag { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.risk { background: var(--risk-soft); color: var(--risk); }
.tag.soft { background: var(--accent-soft); color: var(--accent-ink); }
.tag.mute { background: var(--bg-alt); color: var(--ink-2); }

.note { background: var(--warn-soft); color: var(--warn); border-radius: 9px; padding: 12px 14px; font-size: 0.9rem; }
.err { background: var(--risk-soft); color: var(--risk); border-radius: 9px; padding: 12px 14px; font-size: 0.9rem; }
.empty { color: var(--ink-3); text-align: center; padding: 34px 10px; }

.hero { padding: 70px 0 40px; text-align: center; }
.hero p.lead { font-size: 1.08rem; color: var(--ink-2); max-width: 620px; margin: 0 auto 26px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 34px 0; text-align: left; }
.steps .card { margin: 0; }
.steps .num {
  width: 27px; height: 27px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent-ink); font-weight: 700; font-size: 0.85rem;
  display: grid; place-items: center; margin-bottom: 10px;
}

footer { color: var(--ink-3); font-size: 0.85rem; padding: 30px 0 50px; text-align: center; }

/* ---------------------------------------------------------------------------
   ĐIỆN THOẠI
   Khách dán link sản phẩm lúc đang lướt TikTok trên điện thoại, nên đây là màn
   hình chính chứ không phải trường hợp phụ.
--------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .hide-sm { display: none; }
  .card { padding: 15px; }
  .wrap { padding: 0 14px; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.12rem; }

  /* iOS tự phóng to trang khi chạm vào ô nhập có cỡ chữ dưới 16px. Đặt đúng 16px
     để trang đứng yên — phóng rồi thu lại là lỗi khó chịu nhất trên điện thoại. */
  input, select, textarea { font-size: 16px; }

  /* Ô hẹp thôi cố định 150px trên máy tính; trên điện thoại cho chiếm cả dòng. */
  .row > .narrow, .row > .grow { flex: 1 1 100%; }

  /* Nút đủ lớn để chạm bằng ngón tay (khuyến nghị tối thiểu 44px). */
  .btn { padding: 12px 18px; min-height: 44px; }
  .btn.small { padding: 9px 14px; min-height: 38px; }

  header.top .wrap { height: 56px; gap: 8px; flex-wrap: nowrap; }
  .brand { font-size: 1rem; }
  /* Rộng hơn trước vì chip giờ mang cả số ngày còn lại — con số đó không được cắt mất. */
  .chip-goi { max-width: 48vw; font-size: 0.72rem; }
  .hien-lon { display: none; }
  .chi-sm { display: inline; }
  /* Ảnh đại diện là thứ bỏ được đầu tiên khi hàng chật: nó không nói thêm gì. */
  .me img { display: none; }

  /* Bảng đổi thành từng thẻ xếp dọc. Bảng 5 cột trên màn 360px thì hoặc tràn
     ngang hoặc bị bóp nát chữ — cả hai đều không dùng được. Nhãn cột lấy từ
     thuộc tính data-nhan của mỗi ô. */
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  table { font-size: 0.95rem; }
  tbody tr {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 12px; margin-bottom: 12px; background: var(--surface);
  }
  tbody td { border: 0; padding: 5px 0; }
  tbody td[data-nhan]::before {
    content: attr(data-nhan);
    display: block; font-size: 0.74rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--ink-3); font-weight: 700; margin-bottom: 2px;
  }
  /* Ô rỗng (vd cột nút khi không có nút nào) thì đừng chừa khoảng trống thừa. */
  tbody td:empty { display: none; }
  td .thumb { width: 64px; height: 64px; }

  /* Hàng nút trong thẻ: cho xuống dòng thay vì tràn ra ngoài màn hình. */
  td[data-nhan="Thao tác"] { white-space: normal !important; display: flex; flex-wrap: wrap; gap: 8px; }
  td[data-nhan="Thao tác"]::before { flex: 1 1 100%; }

  .qr img { width: 100%; max-width: 300px; }
  .kv b { display: block; min-width: 0; }
}

/* Thanh thẻ cuộn ngang được nhưng không hiện thanh cuộn thô. */
.tabs { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }

/* Màn hình máy chạy tiếp sóng về điện thoại. Chiếm trọn màn hình vì ô xác minh nhỏ,
   thu lại trong một góc thì kéo trượt tay. */
#hopManHinh {
  position: fixed; inset: 0; z-index: 60; background: #0b0b0d;
  display: flex; flex-direction: column;
}
/* Thanh trên PHẢI THẤP VÀ MỘT DÒNG.
   Bản đầu để chữ tự xuống dòng: trên điện thoại câu "Màn hình máy chạy — chạm và kéo được"
   bẻ thành sáu dòng dựng đứng, đẩy thanh cao gần một phần ba màn hình và ép ảnh xuống. Chữ
   chỉ là nhãn, nên cắt bớt còn hơn là chiếm chỗ của thứ khách cần nhìn. */
.mh-thanh {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 12px; color: #f4f4f6; font-size: 0.85rem; background: #17171b; flex: none;
  min-height: 0;
}
.mh-thanh #mhNhan {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.mh-thanh .btn { flex: none; padding: 5px 12px; }
.mh-khung { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
/* touch-action:none để trình duyệt điện thoại không cuộn trang khi khách kéo trong ảnh. */
#mhAnh { max-width: 100%; max-height: 100%; touch-action: none; user-select: none; display: block; }

/* XOAY NGANG KHI ĐIỆN THOẠI ĐANG CẦM DỌC.
   Cửa sổ Chromium rộng ~1900×900, rất ngang. Nhét nguyên vào màn hình dọc thì ảnh co lại còn
   một dải mỏng giữa màn, ô xác minh bé bằng đầu ngón tay, kéo thì trượt. Xoay 90° cho cạnh
   dài của ảnh chạy dọc theo cạnh dài của điện thoại — to hơn khoảng bốn lần.

   `width` đo theo chiều cao màn vì SAU KHI XOAY, bề ngang của ảnh trở thành chiều dọc của
   màn hình. Trừ 110px chừa cho thanh tiêu đề và dòng nhắc. */
.mh-khung.xoay #mhAnh {
  transform: rotate(90deg);
  transform-origin: center;
  width: calc(100vh - 110px);
  height: auto;
  max-width: none;
  max-height: 100vw;
}
.mh-cho { position: absolute; color: #cfcfd6; font-size: 0.92rem; text-align: center; padding: 0 20px; }
.mh-nhac { color: #b9b9c2; font-size: 0.82rem; text-align: center; margin: 0; padding: 8px 14px 14px; flex: none; }

/* Chân trang giờ mang thông tin đăng ký kinh doanh nên dài nhiều dòng. */
footer div { margin: 2px 0; }

/* Hai thẻ xếp cạnh nhau khi màn đủ rộng, tự xuống dòng khi hẹp.
   Dùng auto-fit + minmax thay vì hai cột cứng: không cần thêm truy vấn media, và thẻ nào
   cũng giữ được bề ngang tối thiểu đọc được. */
.cot-doi { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.cot-doi > .card { margin-bottom: 20px; }
/* Báo có bản mới. Đặt dưới đáy, nổi trên mọi thứ kể cả màn hình máy chạy. */
.bang-ban-moi {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 100;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 8px 8px 8px 16px; box-shadow: var(--shadow);
  font-size: 0.88rem;
}