/* =====================================================================
   Bảng điều khiển — dùng chung cho shop và cho quản trị sàn.
   ---------------------------------------------------------------------
   Máy tính  : thanh bên cố định + nội dung canh giữa phần còn lại, không
               để thừa một mảng trắng lệch hẳn về bên phải.
   Điện thoại: thanh trên gọn + thanh tab dưới đáy như app. Không có thanh
               điều hướng cuộn ngang, không có bảng tràn ra ngoài màn hình.
   ===================================================================== */

.app-body{background:var(--paper-2)}

.app{min-height:100vh}
@media(min-width:900px){
  .app{display:grid;grid-template-columns:248px minmax(0,1fr)}
}

.app-main{min-width:0;display:flex;flex-direction:column}

/* Không chặn max-width: bảng điều khiển là nơi càng nhiều dữ liệu nhìn được
   một lúc càng tốt. Nội dung tràn hết vùng còn lại sau thanh bên. */
.main{width:100%;padding:24px 28px 72px}
@media(max-width:899px){
  .main{padding:14px 14px calc(86px + env(safe-area-inset-bottom))}
}

/* ---- thanh bên (máy tính) ------------------------------------------- */
.side{
  background:var(--ink);color:#e8e8ef;
  display:flex;flex-direction:column;gap:4px;
  padding:18px 14px;position:sticky;top:0;height:100vh;
}
@media(max-width:899px){.side{display:none}}

.side-brand{display:flex;align-items:center;gap:9px;padding:4px 8px 16px;text-decoration:none;color:#fff}
.side-brand .logo{color:#fff;font-size:1.05rem}
.side-brand .logo em{color:var(--live)}
.side-role{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:#2a2a34;color:#a6a6b8;padding:3px 7px;border-radius:5px}
.side-role.is-admin{background:var(--live);color:#fff}

.side-nav{display:flex;flex-direction:column;gap:2px}
.side-nav a{
  display:flex;align-items:center;gap:11px;
  padding:10px 11px;border-radius:10px;
  color:#a3a3b6;text-decoration:none;font-size:.9rem;font-weight:600;
}
.side-nav a:hover{background:#1e1e26;color:#fff}
.side-nav a.active{background:#fff;color:var(--ink)}
.side-nav .ico{width:20px;height:20px;flex:0 0 20px;display:block}
.side-nav .ico svg{width:20px;height:20px;display:block}
.side-nav .lbl{flex:1}
.side-nav .tick{background:var(--live);color:#fff;border-radius:99px;
  padding:1px 7px;font-size:.7rem;font-weight:800}

.side-foot{margin-top:auto;padding-top:14px;border-top:1px solid #26262f;font-size:.8rem;color:#7c7c8e}
.side-foot .who{color:#c7c7d6;font-weight:600;margin-bottom:6px;display:block}

/* nút lên sóng */
.go-live{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:2px 0 14px;padding:11px;border-radius:10px;
  background:var(--live);color:#fff;text-decoration:none;
  font-weight:800;font-size:.86rem;letter-spacing:.01em;
}
.go-live.is-off{background:#23232c;color:#d8d8e4}
.go-live:hover{filter:brightness(1.08)}

/* ---- thanh trên (điện thoại) ---------------------------------------- */
.topbar{
  display:none;align-items:center;gap:10px;
  padding:10px 14px;background:var(--ink);color:#fff;
  position:sticky;top:0;z-index:40;
}
@media(max-width:899px){.topbar{display:flex}}
.topbar .logo{color:#fff;font-size:1rem}
.topbar .logo em{color:var(--live)}
.topbar-who{font-size:.8rem;color:#a3a3b6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.topbar .btn-quiet{color:#a3a3b6}
.topbar .btn-quiet:hover{background:#23232c;color:#fff}
.topbar-live{display:inline-flex;align-items:center;gap:6px;background:var(--live);color:#fff;
  border-radius:99px;padding:4px 10px;font-size:.72rem;font-weight:800;text-decoration:none}

/* ---- thanh tab dưới (điện thoại) ------------------------------------ */
.tabbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
@media(max-width:899px){.tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}}
.tabbar a{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 4px 7px;text-decoration:none;color:var(--ink-3);
  font-size:.66rem;font-weight:700;
}
.tabbar a.active{color:var(--live)}
.tabbar .ico{position:relative;width:22px;height:22px}
.tabbar .ico svg{width:22px;height:22px;display:block}
.tabbar .dot{
  position:absolute;top:-4px;right:-7px;min-width:16px;height:16px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  background:var(--live);color:#fff;border-radius:99px;font-size:.6rem;font-weight:800;
}

/* ---- đầu trang ------------------------------------------------------ */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:20px}
.page-head h1{font-size:1.45rem}
@media(max-width:520px){.page-head h1{font-size:1.25rem}}
.page-head .sub{font-size:.88rem;color:var(--ink-3);margin-top:4px}
.page-head .tools{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:640px){.page-head .tools{margin-left:0;width:100%}}

.crumb{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--ink-3);text-decoration:none}
.crumb:hover{color:var(--ink)}

/* ---- thẻ ------------------------------------------------------------ */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px;min-width:0}
.card + .card{margin-top:14px}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.card-head h2{font-size:.98rem}
.card-head .right{margin-left:auto}

/* ---- ô số liệu ------------------------------------------------------ */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr);gap:14px}}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px 15px;min-width:0}
.stat .k{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.stat .v{font-size:1.6rem;font-weight:850;letter-spacing:-.035em;margin-top:5px;font-variant-numeric:tabular-nums;line-height:1.05}
.stat .h{font-size:.76rem;color:var(--ink-3);margin-top:3px}
.stat.accent{background:var(--ink);border-color:var(--ink);color:#fff}
.stat.accent .k{color:#9a9aad}
.stat.accent .h{color:#8b8b9e}
.stat.alert{border-color:#f2c8c3;background:var(--err-dim)}
.stat.alert .v{color:var(--err)}

/* ---- biểu đồ cột thuần CSS ----------------------------------------- */
.bars-wrap{position:relative;padding-bottom:22px}
/* Nhãn mốc cao nhất nằm ngay trên đường kẻ trên cùng. Có nền giấy vì cột
   của hôm nay hay chạm đúng góc phải — chữ xám trên nền cột đỏ thì mất hút. */
.bars-max{
  position:absolute;top:-3px;right:0;z-index:2;
  padding:0 5px;background:var(--paper);border-radius:5px;
  font-size:.7rem;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.bars{
  display:flex;align-items:flex-end;gap:4px;height:120px;margin-top:6px;
  /* ba đường kẻ ngang làm mốc đọc, nhạt thôi để không tranh với cột */
  background:
    linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat,
    linear-gradient(var(--line),var(--line)) 0 50%/100% 1px no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) 0 100%/100% 1px no-repeat;
}
.bars .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative}
.bars .fill{background:var(--ink);border-radius:4px 4px 0 0;transition:background .15s ease}
.bars .col.today .fill{background:var(--live)}
.bars .col:hover .fill{background:var(--live)}
/* Ngày trống: một vạch mảnh sát đáy, đủ để biết có ngày đó mà không giả vờ
   là có doanh thu. */
.bars .col.is-zero::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--line-2);border-radius:2px;
}
.bars .col.is-zero:hover::before{background:var(--ink-3)}
.bars .col::after{content:attr(data-label);position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);
  font-size:.66rem;color:var(--ink-3);white-space:nowrap}
/* Nhãn hai đầu canh vào trong, không thì nửa chữ thò ra ngoài khung và trên
   điện thoại kéo cả trang lệch ngang mấy pixel. */
.bars .col:first-child::after{left:0;transform:none}
.bars .col:last-child::after{left:auto;right:0;transform:none}

/* ---- bảng ----------------------------------------------------------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Bảng nhiều cột: cho cuộn ngang tử tế thay vì bóp cột đến mức mỗi chữ
   một dòng. min-width đủ để cột tên không vỡ trên điện thoại. */
.table{width:100%;border-collapse:collapse;font-size:.89rem;min-width:700px}
.table .cell-name{min-width:180px}
.table th{
  text-align:left;padding:9px 10px;border-bottom:1px solid var(--line-2);
  font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.table td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--paper-2)}
.table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.table .dim{opacity:.5}
.table .actions{display:flex;gap:5px;justify-content:flex-end}

/* ---- trạng thái ----------------------------------------------------- */
.st{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
  font-size:.74rem;font-weight:700;white-space:nowrap}
.st-new{background:var(--live-dim);color:var(--live)}
.st-confirmed{background:#eef2ff;color:#3730a3}
.st-packed{background:var(--paper-3);color:var(--ink-2)}
.st-shipped{background:#e0f2fe;color:#075985}
.st-delivered{background:var(--ok-dim);color:var(--ok)}
.st-cancelled,.st-returned{background:var(--err-dim);color:var(--err)}
.st-pending{background:var(--hold-dim);color:var(--hold)}
.st-active{background:var(--ok-dim);color:var(--ok)}
.st-suspended{background:var(--err-dim);color:var(--err)}

/* ---- thẻ đơn hàng --------------------------------------------------- */
.order{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px}
.order.risk-warn{border-color:#f0d49b}
.order.risk-high{border-color:#f0bcb6;background:#fffbfa}
.order-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.order-code{font:800 .92rem/1 var(--mono);letter-spacing:.06em}
.order-body{display:grid;gap:12px}
@media(min-width:720px){.order-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(min-width:1400px){.order-body{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
.order-who{font-size:.9rem;line-height:1.5}
.order-who .nm{font-weight:700}
.order-lines{min-width:0}
.order-lines li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:.86rem;border-bottom:1px dashed var(--line)}
.order-lines li:last-child{border-bottom:0}
.order-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.order-acts form{display:inline-flex}
/* Việc phá đơn tách hẳn sang phải, không đứng cạnh nút bước tiếp theo. */
.order-acts-side{margin-left:auto}
@media(max-width:640px){.order-acts-side{margin-left:0;width:100%;margin-top:4px}}
.order-acts-side .btn{width:100%}

/* ---- thêm món vào phiên ----------------------------------------------- */
.tm-grid{display:grid;gap:12px;grid-template-columns:repeat(12,minmax(0,1fr))}
.tm-ma  {grid-column:span 12}
.tm-ten {grid-column:span 12}
.tm-gia {grid-column:span 12}
.tm-size{grid-column:span 12}
.tm-tt  {grid-column:span 12}
@media(min-width:640px){
  .tm-ma  {grid-column:span 2}
  .tm-ten {grid-column:span 6}
  .tm-gia {grid-column:span 2}
  .tm-size{grid-column:span 2}
  .tm-tt  {grid-column:span 12}
}
@media(min-width:1000px){
  .tm-ten {grid-column:span 5}
  .tm-tt  {grid-column:span 3}
}
/* Mã lô là thứ shop hô trên sóng — cho nó font mono, giãn chữ, dễ đọc lướt. */
.tm-ma .input{font-family:var(--mono);font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.tm-anh{margin-top:14px}
.tm-drop{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:13px 14px;border:1px dashed var(--line-2);border-radius:14px;background:var(--paper-2);
  transition:border-color .15s ease, background .15s ease;
}
.tm-drop:hover{border-color:var(--ink-3);background:var(--paper)}
.tm-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.tm-drop-ico{font-size:1.3rem;flex:0 0 auto}
.tm-drop .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.tm-drop b{font-size:.92rem}

.tm-xem{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tm-xem:empty{display:none}
.tm-xem img{
  width:64px;height:78px;object-fit:cover;border-radius:10px;
  border:1px solid var(--line);background:var(--paper-3);
}

.tm-hangloat{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line-2)}
.tm-hangloat summary{cursor:pointer;font-size:.88rem;color:var(--ink-3);font-weight:600}
.tm-hangloat summary:hover{color:var(--ink)}

/* nút Lưu + link xem trước: một hàng, xuống dòng gọn thay vì chữ chảy vòng nút */
.luu-hang{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.luu-hang .hint{flex:1 1 240px;min-width:0;word-break:break-word}

/* ---- ô tìm đơn ------------------------------------------------------- */
.ordersearch{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-bottom:12px;padding:8px 10px 8px 14px;
  border:1px solid var(--line);border-radius:14px;background:var(--paper);
}
.ordersearch:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(15,15,18,.07)}
.ordersearch .ico{display:flex;flex:0 0 auto;color:var(--ink-3)}
.ordersearch .ico svg{width:17px;height:17px}
.ordersearch input{
  flex:1;min-width:180px;border:0;background:transparent;outline:0;
  font-size:.92rem;padding:6px 0;
}
.ordersearch input::-webkit-search-cancel-button{display:none}

.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}

/* ---- bộ lọc --------------------------------------------------------- */
.tabs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:14px;
  scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{
  flex:0 0 auto;padding:7px 13px;border-radius:99px;text-decoration:none;
  font-size:.85rem;font-weight:600;color:var(--ink-3);
  border:1px solid var(--line-2);background:var(--paper);white-space:nowrap;
}
.tabs a:hover{color:var(--ink)}
.tabs a.active{background:var(--ink);border-color:var(--ink);color:#fff}
.tabs a .n{opacity:.6;margin-left:3px}

/* ---- form ------------------------------------------------------------ */
.form-grid{display:grid;gap:14px}
@media(min-width:640px){.form-grid.cols-2{grid-template-columns:1fr 1fr}}
.form-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.form-row .field{flex:1 1 150px;min-width:0}
.form-row .btn{flex:0 0 auto}
@media(max-width:560px){.form-row .field{flex:1 1 100%}.form-row .btn{width:100%}}
.hint{font-size:.79rem;color:var(--ink-3);line-height:1.5}

.copy-link{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--paper-2);border:1px dashed var(--line-2);
  border-radius:9px;padding:9px 11px;font:600 .84rem/1.4 var(--mono);word-break:break-all}
.copy-link .grow{flex:1 1 190px;min-width:0}
/* Link chật quá thì chữ vỡ giữa chừng ("tu-do-duye / n"). Cho nút Chép tụt
   xuống dòng dưới, link giữ trọn một dòng — link là thứ shop phải đọc lại
   để chắc mình dán đúng chỗ. */
@media(max-width:480px){.copy-link .btn{width:100%}}

.empty-row{text-align:center;padding:38px 16px;color:var(--ink-3);font-size:.9rem}

/* ---- phiên live ------------------------------------------------------ */
.live-strip{
  display:flex;align-items:center;gap:12px 14px;flex-wrap:wrap;
  background:linear-gradient(100deg,#fff4f2,#ffe9e6);
  border:1px solid #ffc9c2;border-radius:var(--radius);
  padding:13px 15px;margin-bottom:16px;
}

/* `.grow` là flex:1 1 0 — bề rộng cơ sở BẰNG KHÔNG. Kèm min-width:0 thì cột
   chữ được phép co xuống dưới cả bề rộng một chữ: trên điện thoại nó tụt còn
   ~30px và tên phiên rơi mỗi dòng một từ, trong khi cái chip và cái nút hai
   bên vẫn giữ nguyên khổ. Cho một bề rộng cơ sở thật để hàng XUỐNG DÒNG thay
   vì bóp nghẹt — flex-wrap chỉ chạy khi các món có bề rộng cơ sở để mà cộng. */
.live-strip .grow{flex:1 1 210px;min-width:0}
.live-strip .btn{flex:0 0 auto;margin-left:auto}

/* Điện thoại: xếp dọc hẳn — chip, tên phiên, rồi nút chiếm trọn bề ngang cho
   dễ bấm. Chip vẫn giữ khổ tự nhiên vì chính cột chữ mới là thứ đẩy nó xuống.
   Mốc 660px chọn theo đúng chỗ cái nút bắt đầu rơi xuống dòng: hẹp hơn thế mà
   vẫn để margin-left:auto thì nút đứng chơ vơ một mình ở góc phải dòng dưới. */
@media(max-width:660px){
  .live-strip{align-items:flex-start}
  .live-strip .grow{flex:1 1 100%}
  .live-strip .btn{width:100%;margin-left:0}
}

.session-card{
  display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px;margin-bottom:12px;
}
.session-card.is-live{border-color:var(--live);box-shadow:0 0 0 1px rgba(255,46,32,.18)}
.session-main{flex:1 1 260px;display:flex;flex-direction:column;gap:8px;min-width:0}
.session-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.85rem;color:var(--ink-3);align-items:center}
.session-meta a{color:var(--ink-2)}
.session-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:auto}
@media(max-width:640px){.session-acts{margin-left:0;width:100%}.session-acts .btn{flex:1 1 auto}}

/* =====================================================================
   KỆ HÀNG — thành phần dùng chung cho trang soạn phiên và Chế độ Live.
   Cùng một hình dạng ở cả hai nơi để chủ shop không phải học lại.
   ===================================================================== */
.shelf-cols{display:grid;gap:14px}
@media(min-width:900px){.shelf-cols{grid-template-columns:1fr 1fr;align-items:start}}
.shelf-cols .card{margin-top:0}

.shelf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:9px}
@media(max-width:400px){.shelf-grid{grid-template-columns:repeat(2,1fr)}}

.shelf-item{
  display:flex;flex-direction:column;gap:3px;min-width:0;
  border:1px solid var(--line);border-radius:11px;padding:10px;background:var(--paper-2);
}
.shelf-item .lot{align-self:flex-start}
/* Tên món luôn chiếm đúng chỗ của 2 dòng, dù thực tế chỉ có 1 — nhờ vậy giá
   và nút Lên kệ của mọi thẻ nằm cùng một hàng, nhìn đều mắt. */
.shelf-item .nm{font-size:.83rem;line-height:1.35;color:var(--ink-2);min-height:2.7em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shelf-item .pr{font-weight:800;font-variant-numeric:tabular-nums;font-size:.92rem}
.shelf-item .flagtxt{font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  margin-top:auto;padding-top:5px;color:var(--ink-3)}
.shelf-item.is-held{border-color:#e9c07a;background:var(--hold-dim)}
.shelf-item.is-held .flagtxt{color:var(--hold)}
.shelf-item.is-sold{opacity:.55}
.shelf-item.is-gone{animation:liftoff .3s ease forwards}
.shelf-item.is-fresh{animation:landin .35s cubic-bezier(.2,.8,.2,1)}
@keyframes liftoff{to{opacity:0;transform:translateY(-8px) scale(.96)}}
@keyframes landin{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

/* nút LÊN KỆ — thao tác chính của cả buổi live, phải to và dễ trúng */
.btn-shelf{
  margin-top:auto;width:100%;
  background:var(--live);border:0;border-radius:9px;color:#fff;
  padding:11px;font:800 .86rem/1 var(--sans);cursor:pointer;
}
.btn-shelf:hover{background:#e51f12}
.btn-shelf:active{transform:translateY(1px)}
.btn-shelf:disabled{background:var(--paper-3);color:var(--ink-3);cursor:default}

/* =====================================================================
   CHẾ ĐỘ LIVE — nằm trong bảng điều khiển, không tách khung riêng.
   ===================================================================== */
.live-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--ink);color:#fff;border-radius:var(--radius);
  padding:13px 16px;margin-bottom:16px;
}
.live-head .onair{
  display:inline-flex;align-items:center;gap:7px;background:var(--live);color:#fff;
  border-radius:99px;padding:5px 12px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.live-head .ttl{font-weight:700;font-size:.95rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-head .clock{font:700 .84rem/1 var(--mono);color:#a3a3b6;font-variant-numeric:tabular-nums}
.live-head .acts{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}
.live-head .btn{background:#23232c;border-color:#33333f;color:#e6e6ee}
.live-head .btn:hover{background:#2e2e39}
.live-head .btn-danger{background:transparent;border-color:#6b3229;color:#ff9b90}
@media(max-width:640px){
  .live-head{padding:12px 13px;gap:8px}
  .live-head .ttl{flex:1 1 100%;order:-1}
  .live-head .acts{margin-left:0;width:100%}
  .live-head .acts .btn{flex:1 1 auto;justify-content:center}
}
@media(max-width:420px){.stat .h{display:none}}

.live-cols{display:grid;gap:14px;align-items:start}
@media(min-width:1000px){.live-cols{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
@media(min-width:1500px){.live-cols{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}}

.sec-title{display:flex;align-items:center;gap:9px;margin-bottom:12px;flex-wrap:wrap}
.sec-title h2{font-size:.98rem}
.sec-title .cnt{background:var(--paper-3);color:var(--ink-2);border-radius:99px;padding:1px 9px;
  font-size:.76rem;font-weight:800;font-variant-numeric:tabular-nums}
.sec-title .note{margin-left:auto;font-size:.78rem;color:var(--ink-3)}
/* Ở điện thoại bỏ dòng gợi ý: nhãn nút đã đủ rõ, giữ lại chỉ tốn chiều cao. */
@media(max-width:720px){.sec-title .note{display:none}}

/* dòng đơn chốt về */
.feed{display:flex;flex-direction:column;gap:9px;max-height:620px;overflow-y:auto}
@media(max-width:999px){.feed{max-height:none}}
.feed-card{border:1px solid var(--line);border-radius:11px;padding:12px 13px;background:var(--paper);
  display:flex;flex-direction:column;gap:2px;animation:slidein .35s cubic-bezier(.2,.8,.2,1)}
@keyframes slidein{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.feed-card.is-new{border-color:var(--live);background:#fffaf9}
.feed-name{font-size:1.05rem;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.feed-meta{font-size:.76rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.feed-lots{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.feed-total{font-weight:800;font-variant-numeric:tabular-nums;margin-top:7px}
.feed-risk{margin-top:8px;font-size:.78rem;color:var(--hold);background:var(--hold-dim);border-radius:7px;padding:6px 9px}

.live-empty{padding:30px 16px;text-align:center;color:var(--ink-3);font-size:.88rem;line-height:1.6}
.live-empty .mark{font:800 1.6rem/1 var(--mono);color:var(--line-2);margin-bottom:8px}

/* ---- sửa món + ảnh --------------------------------------------------- */
.edit-cols{display:grid;gap:14px;align-items:start}
@media(min-width:960px){.edit-cols{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.edit-cols .card{margin-top:0}

.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.img-cell{position:relative;margin:0;border:1px solid var(--line);border-radius:11px;
  overflow:hidden;background:var(--paper-3);aspect-ratio:4/5}
.img-cell img{width:100%;height:100%;object-fit:cover}
.img-main{position:absolute;left:6px;bottom:6px;background:rgba(15,15,18,.82);color:#fff;
  border-radius:99px;padding:3px 9px;font-size:.66rem;font-weight:700}
.img-del{
  position:absolute;top:6px;right:6px;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:rgba(15,15,18,.78);color:#fff;
  font-size:.8rem;cursor:pointer;
}
.img-del:hover{background:var(--err)}

.img-add{display:block}
.img-add label{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  aspect-ratio:4/5;cursor:pointer;
  border:2px dashed var(--line-2);border-radius:11px;background:var(--paper-2);
  color:var(--ink-3);transition:border-color .15s ease,color .15s ease;
}
.img-add label:hover{border-color:var(--live);color:var(--live)}
.img-add .plus{font-size:1.6rem;line-height:1}
.img-add .txt{font-size:.78rem;font-weight:700}

.kv-mini{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:.86rem;margin:0}
.kv-mini dt{color:var(--ink-3)}
.kv-mini dd{margin:0;font-weight:600}

/* ---- mật khẩu tạm vừa cấp ---------------------------------------------- */
.newpass{border-color:#f0cf9c;background:#fffdf8}
.newpass-code{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:6px 0 12px;padding:14px 16px;
  border:2px dashed var(--line-2);border-radius:14px;background:var(--paper);
}
.newpass-code span{font:850 1.7rem/1 var(--mono);letter-spacing:.14em}
.copybtn{
  border:1px solid var(--line-2);background:var(--paper-2);color:var(--ink-2);
  border-radius:99px;padding:6px 13px;font-size:.78rem;font-weight:700;cursor:pointer;transition:.15s ease;
}
.copybtn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.copybtn.is-done{background:var(--ok-dim);border-color:transparent;color:var(--ok)}

/* ---- chọn kiểu thu tiền ------------------------------------------------ */
.paymode{display:grid;gap:10px}
.paymode-opt{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);
  transition:border-color .15s ease, background .15s ease;
}
.paymode-opt:hover{border-color:var(--line-2)}
.paymode-opt input{margin-top:3px;flex:0 0 auto;accent-color:var(--live)}
.paymode-opt .grow{display:flex;flex-direction:column;gap:3px;min-width:0}
.paymode-opt .grow b{font-size:.94rem}
.paymode-opt:has(input:checked){border-color:var(--ink);background:var(--paper-2)}
.paymode-sub{margin:18px 0 12px;font-size:.95rem;font-weight:800}

/* ---- ngân hàng / QR --------------------------------------------------- */
.bank-row{display:grid;gap:16px;align-items:start}
@media(min-width:720px){.bank-row{grid-template-columns:minmax(0,1fr) 210px}}
.qr-box{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);
  padding:12px;text-align:center;
}
.qr-box img{width:100%;max-width:186px;margin:0 auto;border-radius:8px;background:#fff}
.qr-box .cap{font-size:.74rem;color:var(--ink-3);margin-top:8px;line-height:1.45}
.qr-fallback{display:none;font-size:.78rem;color:var(--ink-3);line-height:1.5;padding:16px 6px}
.qr-box.is-failed img{display:none}
.qr-box.is-failed .qr-fallback{display:block}
.qr-empty{
  display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:1;border:2px dashed var(--line-2);border-radius:10px;
  color:var(--ink-3);font-size:.78rem;padding:14px;line-height:1.5;
}

/* ---- màn hình đăng nhập / đăng ký -----------------------------------
   Hai cột: trái nói chuyện, phải làm việc. Dưới 900px bỏ cột trái — trên
   điện thoại thì cái người ta cần là ô nhập, không phải lời quảng cáo.
   --------------------------------------------------------------------- */
.auth{min-height:100vh;display:grid;background:var(--paper-2)}
@media(min-width:900px){.auth{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(min-width:1200px){.auth{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}

/* ---- cột trái ---- */
.auth-pitch{
  display:none;flex-direction:column;gap:22px;
  padding:44px 40px;background:var(--ink);color:#fff;
}
@media(min-width:900px){.auth-pitch{display:flex}}
.auth-pitch .logo{color:#fff;font-size:1.2rem;text-decoration:none;align-self:flex-start}
.auth-pitch h2{
  font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:850;letter-spacing:-.035em;line-height:1.15;
  margin-top:auto;
}

/* Minh hoạ: đúng những thẻ thật của sản phẩm, thu nhỏ lại */
.pitch-demo{
  border:1px solid #26262e;border-radius:16px;background:#17171c;
  padding:12px 13px;display:grid;gap:9px;
}
.pitch-demo-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:10px;border-bottom:1px solid #26262e;
  font-size:.76rem;color:#8f8f9e;
}
.pitch-row{display:flex;align-items:center;gap:10px;font-size:.86rem}
.pitch-row .grow{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e4e4ea;
}
.pitch-row .lot{background:#fff;color:var(--ink)}
.pitch-row .lot-ghost{background:transparent;color:#8f8f9e;border-color:#3a3a45}
.pitch-row .chip{background:#26262e;color:#a9a9b8;flex:0 0 auto}
.pitch-row .chip-err{background:rgba(255,46,32,.16);color:#ff8a7d}
.pitch-row .chip-hold{background:rgba(255,164,45,.15);color:#ffb455}

.pitch-list{display:grid;gap:11px;font-size:.9rem;line-height:1.5;color:#c9c9d3;padding-left:22px}
.pitch-list li{position:relative}
.pitch-list li::before{
  content:"";position:absolute;left:-22px;top:.5em;
  width:9px;height:9px;border-radius:3px;background:var(--live);
}
.pitch-foot{margin-top:auto;font-size:.8rem;color:#78788a}
.is-admin-pitch{background:#101319}
.is-admin-pitch .pitch-list li::before{background:#3f7bd6}

/* ---- cột phải ---- */
.auth-panel{display:flex;align-items:center;justify-content:center;padding:28px 16px}
.auth-panel-inner{width:100%;max-width:400px}
.auth-card{
  background:var(--paper);border:1px solid var(--line);
  border-radius:18px;padding:26px;box-shadow:var(--shadow-lg);
}
.auth-card h1{font-size:1.4rem;margin-bottom:6px}
.auth-card .sub{font-size:.88rem;color:var(--ink-3);margin-bottom:20px}
.auth-alt{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.86rem;color:var(--ink-3);text-align:center}
.auth-alt a{font-weight:700;color:var(--ink)}
.auth-back{display:inline-flex;gap:6px;margin-bottom:16px;font-size:.85rem;color:var(--ink-3);text-decoration:none}
.auth-back:hover{color:var(--ink)}

/* Trên điện thoại không có cột trái, nên nhắc lại thương hiệu ở đây —
   không thì màn chỉ còn một cái hộp trắng chẳng biết của ai. */
.auth-brand{display:flex;align-items:center;gap:9px;margin-bottom:18px}
@media(min-width:900px){.auth-brand{display:none}}
.auth-brand .logo{font-size:1.15rem;text-decoration:none}
.auth-brand .tag{
  font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--paper-3);color:var(--ink-3);border-radius:5px;padding:3px 7px;
}