/* =============================================================================
   BỐ CỤC ỨNG DỤNG — vỏ trang, menu bên trái, module bán hàng, thanh báo giá
   neo đáy, và phần thanh toán.

   Mọi kích thước bám theo thang trong base.css (chữ 14px, nút cao 40px). Nét
   xanh #31a8ff chỉ xuất hiện ở ĐƯỜNG VIỀN và CHỮ NHẤN — mỗi màn hình chỉ vài
   nét, đủ để nhận ra màu của web mà không lấn tông tối chủ đạo.
   ========================================================================== */

/* ---------------------------------------------------------------- VỎ TRANG */

.thanh-tieu-de {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 62px;   /* chừa chỗ cho nút nổi ở góc trái */
  background: rgba(16, 18, 22, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--vien);
}

/* Vệt xanh mảnh chạy hết chân thanh tiêu đề — nét nhận diện đầu tiên của web */
.thanh-tieu-de::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(49, 168, 255, 0), var(--xanh) 22%, rgba(49, 168, 255, .25) 60%, rgba(49, 168, 255, 0));
}

.thanh-tieu-de .ten-shop {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thanh-tieu-de .ten-shop .cham-xanh { color: var(--xanh); }

.khung-noi-dung {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 18px calc(var(--cao-thanh-day) + 24px);
}

.khung-noi-dung.khong-thanh-day { padding-bottom: 36px; }

/* Nút nổi chuyển module — góc trên bên trái, trên mọi thứ khác.
   Viền xanh mảnh sẵn có, sáng hẳn lên khi rê chuột. */
.nut-noi {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 70;
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--bo);
  background: var(--the-2);
  border: 1px solid rgba(49, 168, 255, .45);
  box-shadow: var(--bong-noi);
  /* Cùng nhịp .3s với chuyển động trượt của khung menu, để nút và mép khung
     đi tới đích cùng lúc thay vì nút chạy trước một nhịp. */
  transition: background .18s, border-color .18s, left .3s ease;
}

.nut-noi:hover { background: var(--the-3); border-color: var(--xanh); }

/* Menu đang mở: nút hoá thành dấu X đóng khung, đồng thời trượt sang nằm SÁT
   MÉP PHẢI bên trong khung menu — vẫn nguyên độ cao cũ. Con số 264px và 80vw
   phải khớp với chiều rộng .menu-trai bên dưới. */
.nut-noi.menu-dang-mo {
  left: calc(min(80vw, 264px) - 52px);
  border-color: var(--vien-sang);
}

.nut-noi.menu-dang-mo:hover { border-color: var(--do); }

.nut-noi .vach {
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--chu);
  transition: transform .22s, opacity .18s;
}

.nut-noi[aria-expanded="true"] .vach:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nut-noi[aria-expanded="true"] .vach:nth-child(2) { opacity: 0; }
.nut-noi[aria-expanded="true"] .vach:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------- MENU BÊN TRÁI */

.lop-phu {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, .6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s, visibility .22s;
}

.lop-phu.mo { opacity: 1; visibility: visible; }

.menu-trai {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 60;
  width: min(80vw, 264px);
  display: flex;
  flex-direction: column;
  background: var(--nen-sau);
  border-right: 1px solid var(--vien);
  box-shadow: var(--bong-modal);
  transform: translateX(-100%);
  transition: transform .3s ease;
}

.menu-trai.mo { transform: translateX(0); }

.menu-trai .menu-dau {
  padding: 16px 16px 13px;
  border-bottom: 1px solid var(--vien);
  /* Vệt xanh ngắn dưới tên shop trong menu */
  box-shadow: inset 0 -1px 0 0 transparent;
  position: relative;
}

.menu-trai .menu-dau::after {
  content: "";
  position: absolute;
  left: 16px;
  bottom: -1px;
  width: 42px;
  height: 2px;
  border-radius: 1px;
  background: var(--xanh);
}

.menu-trai .menu-dau .nhan {
  display: block;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chu-mo);
  margin-bottom: 3px;
}

.menu-trai .menu-dau .ten { font-size: 14px; font-weight: 700; }

.menu-trai .danh-sach { flex: 1; overflow-y: auto; padding: 10px 8px; }

.muc-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  margin-bottom: 2px;
  border-radius: var(--bo);
  text-align: left;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--chu-diu);
  transition: background .16s, color .16s;
}

.muc-menu:hover { background: var(--the-2); color: var(--chu); }

/* Module đang xem — gạch xanh dọc bên trái, đúng kiểu điểm nhấn của web */
.muc-menu.dang-xem {
  background: var(--the-2);
  color: var(--chu);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--xanh);
}

.muc-menu .bieu-tuong { flex: 0 0 auto; width: 18px; text-align: center; font-size: 13px; opacity: .85; }
.muc-menu.dang-xem .bieu-tuong { color: var(--xanh); opacity: 1; }

.menu-trai .menu-day {
  padding: 11px 16px 14px;
  border-top: 1px solid var(--vien);
  font-size: 11.5px;
  color: var(--chu-mo);
}

/* ------------------------------------------------------- MÀN HÌNH ĐANG NÂNG CẤP */

.man-nang-cap {
  max-width: 480px;
  margin: 7vh auto;
  padding: 32px 24px;
  text-align: center;
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: var(--bo-the);
  box-shadow: var(--bong);
}

.man-nang-cap .hinh { font-size: 30px; line-height: 1; margin-bottom: 12px; }
.man-nang-cap h2 { font-size: 17px; margin-bottom: 8px; }
.man-nang-cap p { color: var(--chu-diu); font-size: 13px; margin-bottom: 0; }

/* ------------------------------------------------------------ MODULE BÁN HÀNG */

.gioi-thieu { margin-bottom: 18px; }

.gioi-thieu h2 { font-size: 20px; margin-bottom: 5px; }

/* Gạch xanh ngắn dưới tiêu đề module */
.gioi-thieu h2::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 7px;
  border-radius: 1px;
  background: var(--xanh);
}

.gioi-thieu p { color: var(--chu-diu); font-size: 13px; margin-bottom: 0; }

.bang-uu-dai {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 167, 46, .1);
  border: 1px solid rgba(255, 167, 46, .34);
  color: var(--cam);
  font-weight: 600;
  font-size: 12.5px;
}

.luoi-sanpham {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
}

.the-sanpham {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 15px;
  /* Nền thẻ: xanh đậm đặc ở sát đáy, nhạt dần lên và TẮT HẲN đúng mép trên của
     nút "Chọn sản phẩm này". 55px = 15px chừa đáy + 40px chiều cao nút, nên
     đổi padding đáy hay chiều cao nút thì phải sửa lại con số này. */
  background:
    linear-gradient(to top, rgba(20, 115, 230, .95) 0, rgba(20, 115, 230, .55) 22px, rgba(20, 115, 230, 0) 55px),
    var(--the);
  border: 1px solid var(--vien);
  border-radius: var(--bo-the);
  box-shadow: var(--bong);
  transition: border-color .18s, transform .18s, box-shadow .18s;
  overflow: hidden;
  /* Bấm vào bất kỳ khoảng trống nào trong khung cũng là chọn/bỏ chọn sản phẩm */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* HIỆU ỨNG VÀO MODULE — mỗi thẻ trôi lên từ đúng mép dưới của chính nó
   (translateY(100%) = trọn một chiều cao thẻ) về vị trí thật. Chỉ chạy khi mới
   vào module, không chạy lại mỗi lần bấm chọn sản phẩm (xem phần 03).
   Đường cong cubic-bezier đi nhanh lúc đầu rồi chậm dần về cuối — cảm giác
   mượt và có đà, khác hẳn kiểu chạy đều tay của ease thường. */
.the-sanpham.cho-troi-len {
  opacity: 0;
  transform: translateY(100%);
}

.the-sanpham.dang-troi-len {
  opacity: 1;
  transform: translateY(0);
  transition: transform 2s cubic-bezier(.16, 1, .3, 1), opacity 1.1s ease-out;
}

/* Người dùng đã tắt hiệu ứng chuyển động trong hệ điều hành thì hiện thẳng */
@media (prefers-reduced-motion: reduce) {
  .the-sanpham.cho-troi-len { opacity: 1; transform: none; }
}

/* Vệt xanh mảnh ở mép trên mỗi thẻ — mờ lúc thường, sáng hẳn khi được chọn */
.the-sanpham::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--xanh), rgba(49, 168, 255, 0) 70%);
  opacity: .28;
  transition: opacity .18s;
}

.the-sanpham:hover { transform: translateY(-1px); box-shadow: var(--bong-noi); }
.the-sanpham:hover::before { opacity: .6; }

.the-sanpham.da-chon { border-color: var(--xanh); }
.the-sanpham.da-chon::before { opacity: 1; }

.the-sanpham .so-thu-tu {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--chu-mo);
  margin-bottom: 6px;
}

.the-sanpham.da-chon .so-thu-tu { color: var(--xanh); }

.the-sanpham .ten-sanpham {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 12px;
  flex: 1;
}

.the-sanpham .nut-chi-tiet { margin-bottom: 10px; }

/* Dòng giá: giá gốc → phần trăm giảm → "chỉ còn" → giá chốt, tất cả trên MỘT
   hàng, xuống dòng mềm khi thẻ hẹp. */
.the-sanpham .hang-gia {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 7px;
  margin-bottom: 12px;
}

/* Giá gốc: màu cam, hơi mờ, nhỏ hơn giá chốt, KHÔNG gạch ngang */
.the-sanpham .gia-goc { font-size: 12.5px; font-weight: 600; color: var(--cam); }
.the-sanpham .phan-tram { font-size: 12.5px; font-weight: 700; color: var(--la-dam-net); }
.the-sanpham .chi-con { font-size: 12.5px; color: var(--chu-diu); }
.the-sanpham .gia-chot { font-size: 19px; font-weight: 800; color: var(--xanh); }

/* Nút "Chọn sản phẩm này" lúc chưa chọn — nền ĐẶC để nút nổi hẳn lên trên mảng
   gradient xanh của thẻ, không bị màu nền ám vào; chữ dùng đúng màu xanh của web. */
.nut-chua-chon {
  position: relative;   /* nằm trên lớp nền của thẻ */
  background: var(--the-2);
  border-color: var(--vien-sang);
  color: var(--xanh);
}

.nut-chua-chon:hover:not(:disabled) {
  background: var(--the-3);
  border-color: var(--xanh);
}

/* -------------------------------------------------- THANH BÁO GIÁ NEO ĐÁY */

.thanh-bao-gia {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 11px 18px;
  padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
  background: rgba(22, 25, 30, .97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--vien-sang);
  box-shadow: 0 -6px 22px rgba(0, 0, 0, .45);
}

/* Vệt xanh mảnh ở mép trên thanh — nét nhấn cuối cùng của màn hình bán hàng */
.thanh-bao-gia::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(49, 168, 255, 0), var(--xanh) 30%, rgba(49, 168, 255, .2) 70%, rgba(49, 168, 255, 0));
}

/* Các ô số liệu dồn hết sang PHẢI để "Số tiền cuối cùng" nằm ngay cạnh nút
   Mua hàng — mắt đọc số rồi bấm luôn, không phải quét ngang cả màn hình. */
.thanh-bao-gia .so-lieu {
  display: flex;
  flex: 1 1 300px;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-align: right;
  gap: 4px 20px;
  min-width: 0;
}
.thanh-bao-gia .o-so-lieu { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.thanh-bao-gia .nhan { font-size: 10.5px; color: var(--chu-mo); white-space: nowrap; }
.thanh-bao-gia .tri { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.thanh-bao-gia .tri.tong { color: var(--xanh); font-weight: 700; }
.thanh-bao-gia .tri.giam { color: var(--la); }
.thanh-bao-gia .tri.chot { font-size: 19px; font-weight: 800; color: var(--do); }

.nut-mua-hang { flex: 0 0 auto; min-height: 42px; padding: 0 22px; font-size: 14px; font-weight: 700; }

@media (max-width: 560px) {
  .thanh-bao-gia { gap: 9px; }
  .thanh-bao-gia .so-lieu { flex: 1 1 100%; gap: 2px 14px; justify-content: flex-end; }
  .nut-mua-hang { flex: 1 1 100%; }
}

/* ------------------------------------------- BẢNG TỔNG KẾT ĐƠN TRONG MODAL */

.tom-tat-don {
  margin-bottom: 16px;
  border: 1px solid var(--vien);
  border-radius: var(--bo);
  overflow: hidden;
}

.tom-tat-don .dong-sp {
  display: flex;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--vien);
  background: var(--the-2);
  font-size: 13px;
}

.tom-tat-don .dong-sp .ten { flex: 1; }
.tom-tat-don .dong-sp .gia { white-space: nowrap; font-weight: 600; color: var(--chu-diu); }

.tom-tat-don .dong-tong {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  font-size: 13px;
  background: var(--nen-sau);
}

.tom-tat-don .dong-tong + .dong-tong { border-top: 1px solid var(--vien); }
.tom-tat-don .dong-tong .nhan { color: var(--chu-diu); }

/* Dòng chốt tiền — viền trái xanh, số tiền màu cam */
.tom-tat-don .dong-tong.chot {
  align-items: baseline;
  background: var(--the-3);
  box-shadow: inset 2px 0 0 var(--xanh);
}

.tom-tat-don .dong-tong.chot .nhan { color: var(--chu); font-weight: 700; }
.tom-tat-don .dong-tong.chot .tri { font-size: 17px; font-weight: 800; color: var(--cam); }

/* --------------------------------------------------- MODAL THANH TOÁN / QR */

.khung-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid var(--vien-sang);
  border-radius: var(--bo);
}

.khung-qr.trong { background: var(--the-2); border-style: dashed; }

.khung-qr img {
  width: min(210px, 62vw);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.khung-qr .dang-tai {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(210px, 62vw);
  min-height: 96px;
  padding: 8px;
  font-size: 12.5px;
  text-align: center;
  color: var(--chu-diu);
}

.khung-qr .ghi-chu-qr { margin: 0; font-size: 12px; font-weight: 600; color: #444; text-align: center; }

.bang-ck {
  border: 1px solid var(--vien);
  border-radius: var(--bo);
  overflow: hidden;
  margin-bottom: 4px;
}

.dong-ck {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 12px;
  background: var(--the-2);
}

.dong-ck + .dong-ck { border-top: 1px solid var(--vien); }
.dong-ck .noi-dung-dong { flex: 1 1 180px; min-width: 0; }
.dong-ck .nhan { display: block; font-size: 10.5px; color: var(--chu-mo); }
.dong-ck .tri { font-size: 13.5px; font-weight: 600; word-break: break-word; }
.dong-ck .tri.tien { color: var(--cam); font-size: 15px; font-weight: 800; }

.nut-sao-chep.da-chep { background: var(--la); border-color: var(--la); color: #fff; }

.nut-tai-qr { width: 100%; margin-bottom: 14px; }

.loi-nhe {
  margin: 10px 0 0;
  padding: 9px 11px;
  border-radius: var(--bo);
  background: rgba(229, 83, 75, .1);
  border-left: 2px solid var(--do);
  color: var(--do);
  font-size: 12.5px;
}

.huong-dan-ck { margin: 12px 0 0; font-size: 12.5px; color: var(--chu-diu); }
.huong-dan-ck strong { color: var(--chu); }

/* --------------------------------------------------------- TRANG NỘI DUNG */

.noi-dung-van-ban { font-size: 13.5px; }
.noi-dung-van-ban h3 { margin-top: 16px; font-size: 14px; }
.noi-dung-van-ban p:last-child { margin-bottom: 0; }