/* ============================================================
   mobile.css — bố cục bản mobile và khung điện thoại.
   Chuẩn dựng 390 × 844, kiểm thêm 360 × 800.
   Mặc định chủ đề sáng (xem tokens.css); tối là tùy chọn.
   ============================================================ */

body.mobile {
  margin: 0;
  background: var(--n-nen);
}

/* ------------------------------------------------------------
   Sân khấu: chỉ có tác dụng khi xem trên laptop và bật khung máy
   ------------------------------------------------------------ */
.san-khau {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.thanh-dieu-khien-mb {
  display: none;
  align-items: center;
  gap: var(--kc-5);
  width: 100%;
  padding: var(--kc-5) var(--kc-6);
  background: var(--n-mat);
  border-bottom: var(--vien) solid var(--v-nhat);
  font-size: var(--cc-2);
  color: var(--ch-phu);
}
.thanh-dieu-khien-mb .day-phai { margin-left: auto; display: flex; gap: var(--kc-4); align-items: center; }
/* Thanh này là công cụ của bản mẫu, không phải giao diện app: nút cỡ nhỏ */
body.mobile .thanh-dieu-khien-mb .nut { height: 28px; font-size: var(--cc-3); padding: 0 var(--kc-5); }
body.mobile .thanh-dieu-khien-mb .nut--chi-icon { width: 28px; padding: 0; }
body.mobile .thanh-dieu-khien-mb .chon-che-do {
  display: flex;
  align-items: center;
  gap: var(--kc-4);
  font-size: var(--cc-2);
  color: var(--ch-mo);
  white-space: nowrap;
}
body.mobile .thanh-dieu-khien-mb .chon-che-do .o-chon {
  height: 28px;
  font-size: var(--cc-3);
}

.may { width: 100%; }

.man {
  width: 100%;
  min-height: 100vh;
  background: var(--n-nen);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Khi bật khung máy trên màn hình rộng */
@media (min-width: 900px) {
  .thanh-dieu-khien-mb { display: flex; }

  body.mobile[data-khung="bat"] .san-khau {
    background: var(--n-mat-3);
    padding-bottom: var(--kc-6);
  }
  body.mobile[data-khung="bat"] .may {
    width: 414px;
    margin-top: var(--kc-5);
    padding: 12px;
    background: #2a2723;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 34px;
    box-shadow: var(--do-bong-noi);
    transform-origin: top center;
  }
  body.mobile[data-khung="bat"] .man {
    width: 390px;
    height: 844px;
    min-height: 0;
    overflow-y: auto;
    border-radius: 24px;
    scrollbar-width: thin;
  }
  body.mobile[data-khung="bat"] .thanh-tren { border-radius: 24px 24px 0 0; }
}

/* ------------------------------------------------------------
   Thanh trên
   ------------------------------------------------------------ */
.thanh-tren {
  display: flex;
  align-items: center;
  gap: var(--kc-4);
  height: 52px;
  padding: 0 var(--kc-4);
  background: var(--n-mat);
  border-bottom: var(--vien) solid var(--v-dam);
  position: sticky;
  top: 0;
  z-index: 10;
}
.thanh-tren__ten {
  flex: 1;
  min-width: 0;
  font-size: var(--cc-5);
  font-weight: var(--dam-manh);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thanh-tren__phu {
  display: block;
  font-size: var(--cc-2);
  font-weight: var(--dam-thuong);
  color: var(--ch-mo);
}
.nut-tron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex: none;
  border: 0;
  border-radius: var(--bo-2);
  background: transparent;
  color: var(--ch-chinh);
  cursor: pointer;
}
.nut-tron:hover { background: var(--n-mat-2); }

/* ------------------------------------------------------------
   Nội dung
   ------------------------------------------------------------ */
.noi-dung-mb {
  flex: 1;
  padding: var(--kc-6) var(--kc-5) var(--kc-10);
}
.noi-dung-mb > h2 { margin-bottom: var(--kc-5); }

.muc-mb { margin-bottom: var(--kc-9); }
.muc-mb__dau {
  display: flex;
  align-items: baseline;
  gap: var(--kc-4);
  margin-bottom: var(--kc-4);
}
.muc-mb__dau h3 { font-size: var(--cc-4); }
.muc-mb__dan { font-size: var(--cc-2); color: var(--ch-mo); margin-bottom: var(--kc-5); }

/* Ô nhập và nút to hơn, dùng được bằng một tay ngoài nắng */
body.mobile .o-nhap,
body.mobile .o-chon,
body.mobile .o-nhieu-dong { height: var(--cao-o-nhap-mobile); font-size: var(--cc-5); }
body.mobile .o-nhieu-dong { height: auto; min-height: 96px; }
body.mobile .truong__nhan { font-size: var(--cc-4); color: var(--ch-chinh); }
body.mobile .o-tick { padding: var(--kc-4) 0; font-size: var(--cc-5); }
body.mobile .o-tick input { width: 20px; height: 20px; margin-top: 2px; }
body.mobile .nut { height: var(--cao-nut-mobile); font-size: var(--cc-5); padding: 0 var(--kc-6); border-radius: var(--bo-2); }
body.mobile .nut--chi-icon { width: var(--cao-nut-mobile); }
body.mobile .nut--rong { width: 100%; }
body.mobile .khoi { border-radius: var(--bo-3); }
body.mobile .khoi__than { padding: var(--kc-5); }
body.mobile .khoi__dau { padding: var(--kc-5); }
body.mobile .chip { height: 24px; font-size: var(--cc-3); }

/* Danh sách kiểu hàng, thay cho bảng */
.ds { border-top: var(--vien) solid var(--v-nhat); }
.hang-ds {
  display: flex;
  align-items: center;
  gap: var(--kc-5);
  width: 100%;
  padding: var(--kc-5);
  background: var(--n-mat);
  border-bottom: var(--vien) solid var(--v-nhat);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.hang-ds:hover { background: var(--n-mat-2); }
.hang-ds__chu { flex: 1; min-width: 0; }
.hang-ds__ten {
  font-size: var(--cc-5);
  font-weight: var(--dam-vua);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hang-ds__phu {
  font-size: var(--cc-3);
  color: var(--ch-phu);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: var(--kc-4);
  flex-wrap: wrap;
}
.hang-ds__so {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: var(--cc-5);
  font-weight: var(--dam-vua);
  white-space: nowrap;
}
.hang-ds > .ico { color: var(--ch-mo); }

/* Thanh dưới: hành động chính */
.thanh-duoi {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--kc-4);
  padding: var(--kc-5);
  background: var(--n-mat);
  border-top: var(--vien) solid var(--v-dam);
}
.thanh-duoi .nut { flex: 1; }

/* Dải trạng thái mạng trên mobile */
.dai-mang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kc-3);
  padding: var(--kc-3) var(--kc-5);
  font-size: var(--cc-3);
  font-weight: var(--dam-vua);
  background: var(--tt-ngoai-nen);
  color: var(--tt-ngoai-chu);
  border-bottom: var(--vien) solid var(--tt-ngoai-vien);
}
.dai-mang--cho { background: var(--tt-canh-nen); color: var(--tt-canh-chu); border-bottom-color: var(--tt-canh-vien); }

@media (max-width: 380px) {
  .noi-dung-mb { padding: var(--kc-5) var(--kc-4) var(--kc-10); }
  .hang-ds { padding: var(--kc-5) var(--kc-4); }
}

/* ------------------------------------------------------------
   Thanh dưới có dòng tóm tắt
   Khi thanh dưới chứa .thanh-duoi__tong thì xếp dọc: dòng tóm
   tắt ở trên, hàng nút ở dưới.
   ------------------------------------------------------------ */
.thanh-duoi:has(.thanh-duoi__tong) {
  flex-direction: column;
  align-items: stretch;
  gap: var(--kc-5);
}
.thanh-duoi__tong {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kc-5);
  font-size: var(--cc-4);
  color: var(--ch-phu);
}
.thanh-duoi__tong b {
  font-size: var(--cc-6);
  font-weight: var(--dam-manh);
  color: var(--ch-chinh);
  font-variant-numeric: tabular-nums;
}
.thanh-duoi__nut { display: flex; gap: var(--kc-4); }
.thanh-duoi__nut .nut { flex: 1; }

/* ------------------------------------------------------------
   Tấm trượt từ đáy màn
   Dùng để sửa một dòng mà không rời khỏi màn đang xem.
   ------------------------------------------------------------ */
/* Neo theo vùng nhìn thấy, không theo chiều dài trang.
   Khi bật khung điện thoại, .may có transform nên trở thành gốc
   của position:fixed — tấm trượt tự nằm gọn trong khung máy. */
.nen-mo {
  position: fixed;
  inset: 0;
  background: rgba(23, 21, 18, 0.42);
  z-index: 40;
}
/* Hộp thoại câu hỏi (ui.js moHopThoai) nằm trong khung máy */
.may .hop-thoai {
  left: var(--kc-5); right: var(--kc-5);
  transform: translateY(-50%);
  max-width: none; max-height: 80%;
}
.tam-truot {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 41;
  max-height: 86%;
  overflow-y: auto;
  background: var(--n-mat);
  border-top: var(--vien) solid var(--v-dam);
  border-radius: var(--bo-3) var(--bo-3) 0 0;
  box-shadow: var(--do-bong-noi);
}
.tam-truot__dau {
  display: flex;
  align-items: center;
  gap: var(--kc-4);
  padding: var(--kc-5) var(--kc-5) var(--kc-5) var(--kc-6);
  border-bottom: var(--vien) solid var(--v-nhat);
  position: sticky;
  top: 0;
  background: var(--n-mat);
}
.tam-truot__ten { font-size: var(--cc-5); font-weight: var(--dam-manh); margin-right: auto; }
.tam-truot__than { padding: var(--kc-6) var(--kc-5); }
.tam-truot__chan {
  display: flex;
  gap: var(--kc-4);
  padding: var(--kc-5);
  border-top: var(--vien) solid var(--v-nhat);
  position: sticky;
  bottom: 0;
  background: var(--n-mat);
}
.tam-truot__chan .nut { flex: 1; }

@media (min-width: 900px) {
  body.mobile[data-khung="bat"] .nen-mo { inset: 12px; border-radius: 24px; }
  body.mobile[data-khung="bat"] .tam-truot { left: 12px; right: 12px; bottom: 12px; }
}