/* Giao diện trang bán hàng + trang quản lý của NOVA Website.
   Bảng màu là bản CHỐT 27/08/2026 của thương hiệu Nova Automation (xem ../Dich vụ/CLAUDE.md):
   nền #FDF6FA, nền phụ #FBE7F1, điểm nhấn #E11D8F, chữ #1F1420. Đừng đổi lẻ một chỗ — ba dịch
   vụ Nova phải nhìn ra là cùng một nhà. */
:root {
  --nen: #fdf6fa;
  --nen-phu: #fbe7f1;
  --the: #ffffff;
  --nhan: #e11d8f;
  --nhan-dam: #cb137e;
  --chu: #1f1420;
  --chu-nhat: #6b5c66;
  --vien: #f0d9e6;
  --xanh: #14804a;
  --do: #b42318;
  --bo: 12px;
  /* Bổ sung 05/09/2026 cho khớp bảng kiểu của hai dịch vụ NOVA còn lại (bản ỨNG DỤNG, không
     phải bản trang giới thiệu — trang giới thiệu bo 14px và nút viên thuốc, đưa vào đây thì
     nhìn như quảng cáo lạc chỗ). */
  --chu-nhat-2: #9a8794;   /* chữ cấp ba: giá tham khảo, ghi chú nhỏ */
  --vien-dam: #e3c6d9;     /* viền của nút phụ và của thẻ cần nổi hơn nền */
  --nhan-chu: #a8146b;     /* hồng ĐẬM, dành cho CHỮ */
  --nhan-nhat: #fce9f4;
  --xanh-nhat: #e4f5ee;
  --do-nhat: #fbe7ea;
  --vang: #8a6d1f;
  --vang-nhat: #fdf6e3;
}
/* CÁI BẪY SỐ MỘT của bảng màu này: --nhan (#e11d8f) làm MÀU CHỮ trên nền trắng chỉ đạt 4,42:1,
   dưới chuẩn AA 4,5:1 cho chữ thường. --nhan chỉ để làm NỀN nút và vạch nhấn; chữ và link dùng
   --nhan-chu (#a8146b, ~7:1). Dịch vụ affiliate đã viết sai chỗ này một lần rồi phải sửa lại. */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background: var(--nen);
  color: var(--chu);
  line-height: 1.6;
}
a { color: var(--nhan-chu); }
img { max-width: 100%; display: block; }
.khung { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.dau {
  position: sticky; top: 0; z-index: 20; background: rgba(253, 246, 250, .93);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--vien);
}
.dau .khung { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; gap: 16px; }
.hieu { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; text-decoration: none; color: var(--chu); }
.sao { width: 26px; height: 26px; }
.nut {
  display: inline-block; background: var(--nhan); color: #fff; border: 0; cursor: pointer;
  padding: 12px 22px; border-radius: var(--bo); font-weight: 600; font-size: 15px;
  text-decoration: none; font-family: inherit;
}
.nut:hover { background: var(--nhan-dam); }
.nut:disabled { opacity: .55; cursor: default; }
.nut.phu { background: transparent; color: var(--nhan); border: 1px solid var(--nhan); }
/* 12px trên dưới cho ra nút cao 44px — đúng mức ngón tay bấm không trượt (chuẩn Apple
   44, Google 48). Bản trước để 7px, ra 36px, và người đo bằng ngón tay thật sẽ bấm hụt. */
.nut.nho { padding: 12px 16px; font-size: 14px; }
.nut.xam { background: #efe7ec; color: var(--chu); }
h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.18; margin: 0 0 14px; }
h2 { font-size: clamp(22px, 3.2vw, 30px); margin: 0 0 8px; }
h3 { font-size: 18px; margin: 0 0 6px; }
.mo { color: var(--chu-nhat); }
section { padding: 52px 0; }
.the {
  background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 22px;
}
.luoi { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Thẻ trong lưới xếp dọc và nút dính đáy: gói ít tính năng hơn thì nút của nó vọt lên cao,
   bốn nút nằm ở bốn độ cao khác nhau nhìn như trang chưa dựng xong. Cho chúng thẳng hàng. */
.luoi > .the { display: flex; flex-direction: column; }
.luoi > .the > .nut:last-child { margin-top: auto; }
/* KHÔNG đặt margin-top cho nút bằng style= trong HTML: style nội tuyến thắng bảng kiểu, nên
   dòng auto ở trên sẽ không bao giờ ăn và nút lại lệch hàng như cũ. Khoảng cách để ở đây. */
.luoi > .the > .tick { margin-bottom: 18px; }
.gia { font-size: 30px; font-weight: 800; color: var(--nhan); }
.gia small { font-size: 14px; font-weight: 500; color: var(--chu-nhat); }
ul.tick { list-style: none; padding: 0; margin: 16px 0 0; }
ul.tick li { padding-left: 24px; position: relative; margin-bottom: 8px; font-size: 15px; }
ul.tick li::before { content: "✓"; position: absolute; left: 0; color: var(--nhan); font-weight: 700; }
label { display: block; margin: 14px 0 6px; font-size: 14px; color: var(--chu-nhat); font-weight: 500; }
input, select, textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--vien); border-radius: 10px;
  font-size: 15px; font-family: inherit; background: #fff; color: var(--chu);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--nhan); outline-offset: -1px; }
/* Safari trên iPhone TỰ PHÓNG TO cả trang khi chạm vào ô nhập có cỡ chữ dưới 16px, rồi để
   nguyên như thế — phóng vào rồi phải tự thu ra là lỗi khó chịu nhất khi dùng bằng điện thoại.
   Chủ tiệm gõ tên miền bằng điện thoại là chuyện thường, nên chỗ này chắc chắn dính. */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px; }
  .nut { min-height: 44px; }
  /* Chip nhà bán tên miền là thứ khách BẤM THẬT để đi mua, không phải nhãn trang trí. Đo được
     33px, bấm trượt ở đây nghĩa là mở nhầm trang bán hàng của một nhà khác.
     44px chứ KHÔNG phải 40px: 44 là con số có nguồn (chuẩn của Apple), còn 40 là con số tôi tự
     nghĩ ra rồi viết vào chú thích như thể nó là chuẩn. Phiên affiliate nhắc đúng chỗ này khi
     tự soi lại một dòng .btn.small 38px của họ — cũng là một con số không có bằng chứng nào
     đứng sau. Đặt một con số bịa cạnh một con số thật rồi trình bày như nhau là cách nhanh
     nhất để lần sau chính mình tin nhầm. */
  .nha-ban a { min-height: 44px; display: flex; align-items: center; }
}
.hang { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.bao { padding: 12px 14px; border-radius: 10px; margin: 14px 0; display: none; }
.bao.hien { display: block; }
.bao.xong { background: #e7f6ed; color: var(--xanh); }
.bao.loi { background: #fdecea; color: var(--do); }
/* Loại thứ ba, không phải lỗi cũng không phải xong: một điều khách cần biết trước khi quyết.
   Vàng nhạt để nó nổi hơn chữ thường mà không làm người ta tưởng có chuyện hỏng. */
.bao.canh { background: #fdf6e3; color: #8a6d1f; }
.the-nho { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--nen-phu); color: var(--nhan-dam); display: inline-block; }
/* Bảng nhiều cột trên điện thoại: cho cuộn ngang TRONG bảng, không để cả trang bị đẩy lệch.
   Chủ tiệm xem sổ lịch hẹn bằng điện thoại là chuyện thường ngày, không phải trường hợp hiếm. */
table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; white-space: nowrap; }
table tr { display: table; width: 100%; table-layout: fixed; }
@media (min-width: 760px) { table { display: table; white-space: normal; } }

/* Sửa nội dung bên trái, xem trước bên phải. Dưới 1100px thì xếp dọc, khung xem trước xuống dưới. */
.voi-xem-truoc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: 20px; align-items: start; }
.khung-xem { position: sticky; top: 84px; border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden; background: #fff; }
.khung-xem .thanh { padding: 8px 12px; font-size: 13px; color: var(--chu-nhat); border-bottom: 1px solid var(--vien); background: var(--nen-phu); display: flex; justify-content: space-between; align-items: center; }
.khung-xem iframe { width: 100%; height: 620px; border: 0; display: block; background: #fff; }
@media (max-width: 1100px) { .voi-xem-truoc { grid-template-columns: 1fr; } .khung-xem { position: static; } }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--vien); vertical-align: top; }
th { font-size: 13px; color: var(--chu-nhat); font-weight: 600; }
.chan { border-top: 1px solid var(--vien); padding: 28px 0; color: var(--chu-nhat); font-size: 14px; }

/* ── Trang quản lý ─────────────────────────────────────────────────────────── */
.tab { display: flex; gap: 6px; flex-wrap: wrap; margin: 22px 0; }
.tab button {
  background: transparent; border: 1px solid var(--vien); border-radius: 999px; padding: 8px 16px;
  cursor: pointer; font-size: 14px; font-family: inherit; color: var(--chu-nhat);
}
.tab button[aria-selected="true"] { background: var(--nhan); color: #fff; border-color: var(--nhan); }
.trang { display: none; }
.trang.hien { display: block; }
.doi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .doi { grid-template-columns: 1fr; } }
.dong-dv { border: 1px solid var(--vien); border-radius: 10px; padding: 14px; margin-bottom: 12px; background: #fff; }
code.ma { background: var(--nen-phu); padding: 2px 8px; border-radius: 6px; font-size: 14px; }

/* ── Nhãn trạng thái ───────────────────────────────────────────────────────────
   NHÃN CÓ CHỮ, không phải chấm màu. Chấm màu một mình thì người mù màu không đọc ra, và khi
   chụp màn hình gửi cho nhau cũng không nói được gì. Nhãn mang cả màu lẫn chữ, hỏng một kênh
   vẫn còn kênh kia. */
.nhan-tt { padding: 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.nhan-tt.duoc { background: var(--xanh-nhat); color: var(--xanh); }
.nhan-tt.het { background: var(--do-nhat); color: var(--do); }
.nhan-tt.can { background: var(--vang-nhat); color: var(--vang); }
.nhan-tt.cho { background: var(--nen-phu); color: var(--chu-nhat); }

/* ── Một dòng kết quả tra tên miền ─────────────────────────────────────────────
   Tên miền KHÔNG được xuống dòng: "spahuongsen." một dòng và "com" dòng dưới thì đọc rất khó.
   Nguyên tắc chung — cấm xuống dòng với dữ liệu ngắn không tách được (tên miền, giờ hẹn), cho
   xuống dòng thoải mái với câu văn. */
.dong-tm {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--vien); border-radius: 10px; margin-bottom: 8px; background: #fff;
}
.dong-tm.co { border-color: var(--vien-dam); background: linear-gradient(0deg, var(--xanh-nhat), var(--xanh-nhat)) padding-box; }
.dong-tm .ten { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dong-tm .nhan-tt { margin-left: auto; }
/* Lời giải thích chiếm trọn một hàng riêng dưới tên. Ép nó chen cùng hàng với tên và nhãn thì
   trên màn 390px nó chỉ còn hơn nửa bề ngang và vỡ thành bốn dòng ngắn ngủn. */
.dong-tm .phu { flex: 1 0 100%; color: var(--chu-nhat-2); font-size: 13px; }
.dong-tm .phu:empty { display: none; }
/* Chưa có kết quả thì làm mờ nhẹ CẢ DÒNG, để mắt tự bỏ qua và dừng ở dòng đã xong. Mờ dòng
   chưa xong thì được; mờ chữ cảnh báo thì KHÔNG — cảnh báo mà làm mờ đi thì thà đừng viết,
   đằng nào cũng không ai đọc mà mình lại tự nhận là đã cảnh báo rồi. */
.dong-tm.dang-cho { opacity: .62; }
.nha-ban { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 6px; }
.nha-ban a {
  font-size: 13px; text-decoration: none; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--vien-dam); color: var(--nhan-chu); background: #fff; white-space: nowrap;
}
.nha-ban a:hover { background: var(--nhan-nhat); }