/* ============================================================================
   GenFarmer - GIỎ HÀNG cho genfarmer.com/box-phone-shop/
   File: gio-hang-shop.css     Đi kèm: gio-hang-shop.js

   KHÔNG có @media ở đây, và đó là chủ ý. Bản 18/09 để phần này trong
   shop-mobile.css, tức trong `@media (max-width:549px)`, nên mở trang bằng
   máy tính là không có nút mua nào. Giỏ hàng không phải chuyện của một cỡ
   màn hình.

   Màu và bo góc lấy từ chính trang (đo 08/09):
     nút chính  nền rgb(0,0,0), chữ #fff, bo 999px
     viền       1px solid rgb(221,221,221)
     chữ phụ    rgb(119,119,119)      nền nhạt rgb(247,249,253)
   ========================================================================== */

/* --- 1. nút mua trên thẻ sản phẩm --------------------------------------
   display và width phải !important: thẻ a trong .box-text của Flatsome bị
   theme ép về inline-block, đo được nút chỉ rộng 116px trong ô rộng 153px
   nên hai nút cạnh nhau dài ngắn khác nhau, nhìn như bị lệch. */
.gf-mua {
  display: flex !important;
  align-items: center; justify-content: center; gap: 7px;
  width: 100%; box-sizing: border-box;
  min-height: 44px; padding: 0 14px;
  border: 1px solid rgb(0, 0, 0); border-radius: 999px;
  background: rgb(0, 0, 0); color: #fff;
  font: 600 13.5px/1 Inter, sans-serif;
  text-align: center; text-decoration: none;
  text-transform: none !important; letter-spacing: 0 !important;
}
.gf-mua:hover { background: rgb(34, 34, 34); color: #fff; }
.gf-mua svg { flex: 0 0 auto; display: block; }
.gf-mua > span { display: block; }

/* Sản phẩm nhiều biến thể: không thể thêm thẳng vào giỏ, phải chọn cấu hình
   trước. Nút viền, không phải nút đen, để khách phân biệt được hai việc khác
   nhau ngay từ ngoài thẻ. */
.gf-mua.chon {
  background: #fff; color: rgb(17, 17, 17); border-color: rgb(221, 221, 221);
}
.gf-mua.chon:hover { background: rgb(247, 249, 253); color: rgb(17, 17, 17); }
.gf-mua.het {
  background: rgb(247, 249, 253); color: rgb(119, 119, 119);
  border-color: rgb(230, 235, 245); font-weight: 400; cursor: default;
}

/* Ô chứa nút cũng phải là flex, không thì thẻ a bên trong không ăn hết bề
   ngang. Nút luôn dính đáy thẻ nên hai thẻ cạnh nhau có tiêu đề dài ngắn
   khác nhau vẫn có nút thẳng hàng. */
.gf-mua-boc {
  display: flex; width: 100%; box-sizing: border-box;
  padding: 10px 0 2px; margin-top: auto;
}
.product-small .box-text { display: flex; flex-direction: column; }

/* Nút thay chỗ nút BUY của theme: giữ đúng chỗ cũ, không kéo full, để hàng
   giá và nút vẫn nằm cạnh nhau như bản web đang có.
   Bề rộng CỐ ĐỊNH chứ không theo chữ: ba nhãn "Add to cart", "Select options"
   và "Out of stock" dài ngắn khác nhau, để tự giãn thì một hàng bốn thẻ ra
   bốn nút 118, 127, 118, 126px, nhìn là thấy lệch. */
/* Khong dat be rong co dinh: the san pham o day chi rong 195px, ma mot nut
   148px cong cai gia ben canh la 208px, tuc nut tran ra ngoai vien the. Do
   duoc 19/09. Cach dung la cho HANG GIA + NUT tu xuong dong: the rong thi hai
   thu nam canh nhau nhu ban web, the hep thi nut tu tut xuong dong duoi va an
   het be ngang. Nhu vay moi the deu vua, va cac nut trong cung mot hang the
   van bang nhau vi cac the trong mot hang rong bang nhau. */
/* @media o day KHONG phai de khoa tinh nang theo be rong, ma vi hang gia va
   nut xep NGANG tren may tinh nhung xep DOC tren dien thoai. Trong mot hop
   flex doc, flex-basis la CHIEU CAO, nen mot luat `flex: 1 1 130px` chung cho
   ca hai lam nut cao 130px, ra mot cai bau duc den to tuong. Da mac dung loi
   do 19/09. */
@media (min-width: 550px) {
  .product-bottom-row { flex-wrap: wrap !important; row-gap: 8px; }
  .gf-mua.thay-buy {
    width: auto !important; flex: 1 1 130px; min-width: 130px;
    white-space: nowrap;
  }
}
@media (max-width: 549px) {
  .gf-mua.thay-buy {
    flex: 0 0 auto !important; width: 100% !important;
    height: auto !important; min-height: 40px;
  }
}

/* --- 2. thẻ trong catalog toàn màn hình --------------------------------
   width:auto để lề trái phải không cộng thêm vào 100%, nếu không nút sẽ tràn
   ra khỏi thẻ đúng bằng bề rộng hai lề. */
.gf-cat-the > .gf-mua {
  margin: 0 10px 10px; width: auto; align-self: stretch;
}

/* --- 3. dải báo đã thêm vào giỏ ----------------------------------------
   Chừa 66px bên phải cho bong bóng chat, không thì dải báo đè lên nó. */
.gf-bao-gio {
  position: fixed; left: 12px; right: 66px; bottom: 78px; z-index: 2147482500;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 16px; border-radius: 14px;
  background: rgb(17, 17, 17); color: #fff;
  font: 400 13.5px/1.35 Inter, sans-serif;
  box-shadow: 0 10px 30px rgba(17, 17, 17, .28);
}
.gf-bao-gio.hien { display: flex; }
/* Mo khay gio hang hay mot lop phu nao do thi giau dai bao di, khong thi
   no tho ra ben canh khay, nhin nhu mot manh con sot lai. */
body.gf-lop-phu-mo .gf-bao-gio { display: none !important; }
.gf-bao-gio .gf-bao-chu { flex: 1 1 auto; min-width: 0; }
.gf-bao-gio .gf-bao-nut { flex: 0 0 auto; display: flex; gap: 8px; }
.gf-bao-gio a {
  min-height: 38px; display: inline-flex; align-items: center;
  padding: 0 14px; border-radius: 999px;
  font: 600 13px Inter, sans-serif; text-decoration: none; white-space: nowrap;
  text-transform: none !important; letter-spacing: 0 !important;
}
.gf-bao-gio a.phu {
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .5);
}
.gf-bao-gio a.chinh { background: #fff; color: rgb(17, 17, 17); }

/* Trên màn hình rộng thì dải báo gọn về góc phải, không kéo ngang cả trang. */
@media (min-width: 850px) {
  .gf-bao-gio { left: auto; right: 90px; max-width: 520px; bottom: 24px; }
}