/* =====================================================================
   Pass Đồ — nền tảng thiết kế
   ---------------------------------------------------------------------
   Ẩn dụ: livestream pass đồ là một PHIÊN ĐẤU GIÁ TỐC ĐỘ. Người bán hô số
   lô ("A12!"), người mua tranh nhau chốt trong vài giây. Toàn bộ ngôn ngữ
   thị giác lấy từ phiếu đấu giá:
     - số lô in bằng font mono, to, đọc được khi lướt nhanh
     - con dấu "ĐÃ CHỐT" đóng chéo, dứt khoát, không thể hiểu nhầm
     - đồng hồ đếm ngược luôn trong tầm mắt
   Nền giấy ngả ấm (#FAF7F2) thay vì xám lạnh để không đụng hàng với mọi
   sàn TMĐT hiện có.
   ===================================================================== */

:root{
  /* mực & giấy */
  --ink:#0f0f12;
  --ink-2:#3d3d47;
  --ink-3:#6f6f7d;
  --paper:#ffffff;
  --paper-2:#faf7f2;
  --paper-3:#f2ede4;
  --line:#e6ded1;
  --line-2:#d6cbb9;

  /* tín hiệu */
  --live:#ff2e20;        /* đang lên sóng, nút chốt */
  --live-dim:#ffece9;
  --hold:#c2600c;        /* đồng hồ giữ hàng */
  --hold-dim:#fff4e6;
  --ok:#0b7a4b;
  --ok-dim:#e8f6ef;
  --warn:#a45c00;
  --err:#c02418;
  --err-dim:#fdeceb;

  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(15,15,18,.05), 0 8px 24px -12px rgba(15,15,18,.18);
  --shadow-lg:0 2px 4px rgba(15,15,18,.06), 0 24px 48px -20px rgba(15,15,18,.28);

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:400 16px/1.55 var(--sans);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.022em;line-height:1.15}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

/* ---- kiểu chữ dùng lại ---------------------------------------------- */
.t-display{font-size:clamp(2rem,7vw,3.4rem);font-weight:850;letter-spacing:-.035em;line-height:1.05}
.t-h1{font-size:clamp(1.4rem,4vw,2rem)}
.t-h2{font-size:1.15rem}
.t-lead{font-size:clamp(1rem,2.4vw,1.15rem);color:var(--ink-2);line-height:1.6}
.t-muted{color:var(--ink-3)}
.t-small{font-size:.85rem}
.t-xs{font-size:.76rem}
.t-num{font-variant-numeric:tabular-nums}
.t-up{text-transform:uppercase;letter-spacing:.09em;font-size:.72rem;font-weight:700}

/* ---- logo — dùng chung cho mặt tiền và bảng điều khiển -------------- */
.logo{display:inline-flex;align-items:baseline;gap:1px;
  font-weight:850;font-size:1.12rem;letter-spacing:-.03em;text-decoration:none}
.logo em{font-style:normal;color:var(--live)}

/* ---- SỐ LÔ — chữ ký thị giác của sản phẩm --------------------------- */
.lot{
  display:inline-flex;align-items:center;
  font:700 .8rem/1 var(--mono);
  letter-spacing:.1em;
  background:var(--ink);color:#fff;
  padding:5px 8px 4px;border-radius:5px;
}
.lot-lg{font-size:1.05rem;padding:8px 11px 7px}
.lot-xs{font-size:.68rem;padding:3px 6px 2px;letter-spacing:.08em}
.lot-ghost{background:transparent;color:var(--ink-3);border:1px dashed var(--line-2)}

/* ---- CON DẤU ĐÃ CHỐT ------------------------------------------------ */
.stamp{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-9deg);
  font:800 clamp(.9rem,4vw,1.3rem)/1 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--err);
  border:3px solid var(--err);border-radius:6px;
  padding:6px 12px;
  background:rgba(255,255,255,.82);
  white-space:nowrap;
  pointer-events:none;
}

/* ---- BĂNG ĐANG LIVE ------------------------------------------------- */
.live-tag{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--live);color:#fff;
  padding:5px 11px 5px 9px;border-radius:99px;
  font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.live-dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}

/* ---- nút ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink);
  border-radius:var(--radius-sm);padding:10px 15px;
  font-size:.92rem;font-weight:600;cursor:pointer;text-decoration:none;
  transition:transform .06s ease, background .12s ease, border-color .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-ink{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-ink:hover{background:#26262e}
.btn-live{background:var(--live);border-color:var(--live);color:#fff;font-weight:700}
.btn-live:hover{background:#e51f12}
.btn-quiet{border-color:transparent;background:transparent;color:var(--ink-3);padding:7px 10px}
.btn-quiet:hover{background:var(--paper-3);color:var(--ink)}
.btn-danger{border-color:#f3c9c5;color:var(--err);background:var(--paper)}
.btn-lg{padding:14px 20px;font-size:1rem}
.btn-sm{padding:6px 11px;font-size:.82rem}
.btn-block{display:flex;width:100%}

/* ---- ô nhập --------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px}
.field > span{font-size:.82rem;font-weight:600;color:var(--ink-2)}
.input{
  width:100%;padding:12px 13px;
  background:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--radius-sm);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(15,15,18,.09)}
.input::placeholder{color:#a9a396}

/* Dùng chung cho cả ba khu: mặt tiền khách, bảng shop và màn đăng nhập. */
.form{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.pair{grid-template-columns:1fr}}
textarea.input{min-height:96px;resize:vertical;line-height:1.5}

/* ---- nhãn nhỏ ------------------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:99px;
  font-size:.75rem;font-weight:600;
  background:var(--paper-3);color:var(--ink-2);
}
.chip-ok{background:var(--ok-dim);color:var(--ok)}
.chip-hold{background:var(--hold-dim);color:var(--hold)}
.chip-err{background:var(--err-dim);color:var(--err)}
.chip-live{background:var(--live-dim);color:var(--live)}
/* Shop dựng sẵn để demo — phải nhìn ra ngay, đừng để lẫn với shop thật. */
.chip-demo{background:#efe9ff;color:#5b3fb8;font-weight:700;align-self:flex-start}

/* ---- thông báo ------------------------------------------------------ */
.note{
  display:flex;gap:9px;align-items:flex-start;
  padding:11px 13px;border-radius:var(--radius-sm);
  font-size:.9rem;line-height:1.45;
}
.note-ok{background:var(--ok-dim);color:var(--ok)}
.note-err{background:var(--err-dim);color:var(--err)}
.note-hold{background:var(--hold-dim);color:var(--hold)}

.flash{position:sticky;top:0;z-index:60;padding:11px 16px;font-size:.9rem;font-weight:600;text-align:center}
.flash-ok{background:var(--ok);color:#fff}
.flash-err{background:var(--err);color:#fff}

/* ---- tiện ích ------------------------------------------------------- */
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.grow{flex:1}
.wrap{flex-wrap:wrap}
.right{margin-left:auto}
.center{text-align:center}
.hide{display:none !important}
@media(max-width:719px){.only-desktop{display:none !important}}
@media(min-width:720px){.only-mobile{display:none !important}}

.divider{height:1px;background:var(--line);border:0;margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}