@import url("assets/css/style.css");

/* Canh lề tất cả các trang: cách mép màn hình trái 100px, phải 100px */
body {
  padding-left: 100px !important;
  padding-right: 100px !important;
  box-sizing: border-box !important;
}

@media (max-width: 576px) {
  body {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

.container,
.container-fluid {
  max-width: 100% !important;
  width: 100% !important;
}

/* Giảm kích thước theo chiều cao của Footer còn lại 2/3 kích thước cũ & ẩn dòng bản quyền */
footer,
.site-footer,
.footer {
  margin-top: 1.25rem !important;
  padding-top: 1.25rem !important;
  padding-bottom: 0.75rem !important;
}

footer h5, footer h6,
.site-footer h5, .site-footer h6,
.footer h5, .footer h6 {
  margin-bottom: 0.35rem !important;
  font-size: 0.95rem !important;
}

footer p, footer p.small,
.site-footer p, .site-footer p.small,
.footer p, .footer p.small {
  margin-bottom: 0.35rem !important;
  line-height: 1.35 !important;
  font-size: 0.82rem !important;
}

footer .row,
.site-footer .row,
.footer .row {
  margin-bottom: 0 !important;
  --bs-gutter-y: 0.5rem !important;
}

footer ul,
.site-footer ul,
.footer ul {
  margin-bottom: 0 !important;
}

footer ul li,
.site-footer ul li,
.footer ul li {
  margin-bottom: 0.2rem !important;
}

footer hr,
.site-footer hr,
.footer hr,
footer .text-center:last-child,
.site-footer .text-center:last-child,
.footer .text-center:last-child {
  display: none !important;
}

/* ==========================================================================
   GIAO DIỆN ĐIỆN THOẠI (MOBILE): LIỆT KÊ SẢN PHẨM TUẦN TỰ 1 CỘT (DANH SÁCH RÕ NÉT)
   MÁY TÍNH VẪN GIỮ NGUYÊN 100% GIAO DIỆN LƯỚI CŨ (4 CỘT)
   ========================================================================== */
@media (max-width: 576px) {
  /* Mỗi sản phẩm chiếm trọn 100% chiều ngang (tuần tự 1 cột) */
  /* Giam khoang cach giua 2 san pham tren dien thoai */
  .deal-product-item,
  #productsGrid > div,
  #product-list > div,
  .related-products > div,
  .products-grid > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 6px !important;
  }

  /* Thẻ sản phẩm chuyển sang dạng Card ngang rộng rãi, dễ nhìn */
  .deal-product-item .product-card,
  #productsGrid .product-card,
  #product-list .product-card,
  .related-products .product-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 10px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  }

  /* Khung ảnh sản phẩm to rõ bên trái (115px x 115px) */
  /* Tang kich thuoc theo chieu ngang moi hinh them 50px (tu 115px len 165px) */
  .deal-product-item .product-thumb-box,
  #productsGrid .product-thumb-box,
  #product-list .product-thumb-box,
  .related-products .product-thumb-box {
    width: 165px !important;
    height: 140px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    border-radius: 8px !important;
    padding: 6px !important;
    margin: 0 !important;
  }

  .deal-product-item .product-thumb-box img,
  #productsGrid .product-thumb-box img,
  #product-list .product-thumb-box img,
  .related-products .product-thumb-box img {
    max-height: 130px !important;
    max-width: 155px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* Phần nội dung bên phải rộng rãi */
  .deal-product-item .product-card .card-body,
  #productsGrid .product-card .card-body,
  #product-list .product-card .card-body,
  .related-products .product-card .card-body {
    padding: 0 0 0 14px !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  /* Tên sản phẩm đầy đủ, rõ ràng, không bị ngắt chữ */
  .deal-product-item .product-title,
  #productsGrid .product-title,
  #product-list .product-title,
  .related-products .product-title {
    height: auto !important;
    max-height: none !important;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    margin-bottom: 6px !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Khung giá sản phẩm */
  .deal-product-item .product-pricing,
  #productsGrid .product-pricing,
  #product-list .product-pricing,
  .related-products .product-pricing {
    border-top: none !important;
    padding-top: 4px !important;
  }

  /* Gia mau do nho lai vua van man hinh tren dien thoai */
  .deal-product-item .product-pricing .text-danger,
  #productsGrid .product-pricing .text-danger,
  #product-list .product-pricing .text-danger,
  .related-products .product-pricing .text-danger {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    display: inline-block !important;
    margin-right: 4px !important;
    white-space: nowrap !important;
  }

  .deal-product-item .product-pricing .text-muted,
  #productsGrid .product-pricing .text-muted,
  #product-list .product-pricing .text-muted,
  .related-products .product-pricing .text-muted {
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }

  .deal-product-item .product-pricing .d-flex,
  #productsGrid .product-pricing .d-flex,
  #product-list .product-pricing .d-flex,
  .related-products .product-pricing .d-flex {
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 4px !important;
    margin-bottom: 4px !important;
  }

  /* Nút thêm vào giỏ hàng gọn gàng 1 dòng */
  /* Nut them vao gio nho gon, vua van, hien thi day du chu tren dien thoai */
  /* Tang chieu ngang nut them 50px de vua du ca Icon + Them vao gio hang */
  .deal-product-item .btn-add-to-cart,
  #productsGrid .btn-add-to-cart,
  #product-list .btn-add-to-cart,
  .related-products .btn-add-to-cart {
    width: 100% !important;
    min-width: 185px !important;
    max-width: 220px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    line-height: 1.25 !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    margin-top: 5px !important;
  }

  .deal-product-item .btn-add-to-cart i,
  #productsGrid .btn-add-to-cart i,
  #product-list .btn-add-to-cart i,
  .related-products .btn-add-to-cart i {
    font-size: 0.78rem !important;
    margin-right: 4px !important;
  }

  /* Huy hiệu giảm giá - góc ảnh */
  .deal-product-item .discount-badge-corner,
  #productsGrid .discount-badge-corner,
  #product-list .discount-badge-corner {
    font-size: 0.75rem !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
  }
}


/* ==========================================================================
   TOI UU GIAO DIEN MOBILE (DIEN THOAI) CHO NGUOI DUNG & TRANG QUAN TRI (ADMIN)
   Dam bao noi dung vua van man hinh tren dien thoai, khong phat sinh loi
   May tinh (Desktop) giu nguyen 100% dep va chuan
   ========================================================================== */

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  body {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .container, .container-fluid {
    padding-left: 6px !important;
    padding-right: 6px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  img, video, iframe, embed, object {
    max-width: 100% !important;
    height: auto !important;
  }

  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .table-responsive table {
    min-width: 580px;
  }

  .modal-dialog {
    margin: 0.5rem !important;
    max-width: calc(100% - 1rem) !important;
  }

  .modal-content {
    border-radius: 12px !important;
    overflow: hidden !important;
  }
}


/* Toi uu nut Them vao gio tren moi man hinh (Desktop & Mobile) */
.product-card .btn-add-to-cart,
.btn-add-to-cart {
  width: 100% !important;
  min-width: 185px !important;
  max-width: 100% !important;
  padding: 6px 10px !important;
  font-size: 0.82rem !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: -0.1px !important;
}

.product-card .card-body {
  padding: 8px 10px !important;
}

.product-pricing {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}


/* Giam khoang cach giua cac o san pham tren tat ca man hinh */
#productsGrid.row,
#product-list.row,
.products-grid.row {
  --bs-gutter-x: 0.5rem !important;
  --bs-gutter-y: 0.5rem !important;
}

/* Tang chieu ngang khung anh san pham them 50px tren Desktop */
@media (min-width: 577px) {
  .product-thumb-box {
    width: 100% !important;
    min-height: 200px !important;
    padding: 10px !important;
  }
  .product-thumb-box img {
    max-height: 190px !important;
    object-fit: contain !important;
  }
}


/* Canh chinh nut Them vao gio can giua ngay ngan, vua van voi the san pham */
.product-card .btn-add-to-cart,
.btn-add-to-cart {
  position: static !important;
  left: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 6px 4px !important;
  font-size: 0.8rem !important;
  line-height: 1.25 !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.product-card {
  overflow: hidden !important;
}

.product-card .card-body {
  padding: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}



/* Bo tron huy hieu giam gia (% giam gia o goc) */
.discount-badge-corner {
  border-radius: 8px !important;
  top: 6px !important;
  left: 6px !important;
  padding: 3px 8px !important;
  font-size: 0.8rem !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;
}


/* Canh Hotline, Gio hang, Admin luon nam tren 1 hang ngang khong bi xuong dong */
.main-header .row.align-items-center > div:last-child,
header .row.align-items-center > div:last-child {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  white-space: nowrap !important;
}

.main-header .row.align-items-center > div:last-child .me-4,
header .row.align-items-center > div:last-child .me-4 {
  margin-right: 0 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.main-header .row.align-items-center > div:last-child .btn,
header .row.align-items-center > div:last-child .btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ==========================================================================
   GIAO DIEN DIEN THOAI (MOBILE) CHIEU DOC: TU DONG CO VUA KHUNG HINH & CHU
   Desktop va Laptop giu nguyen 100% dep va chuan
   ========================================================================== */
@media (max-width: 576px) {
  body {
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow-x: hidden !important;
  }

  .container,
  .container-fluid {
    padding-left: 4px !important;
    padding-right: 4px !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* 1. O san pham tren dien thoai: Card ngang tu dong co gian vua van 100% man hinh */
  .deal-product-item,
  #productsGrid > div,
  #product-list > div,
  .related-products > div,
  .products-grid > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 8px !important;
    box-sizing: border-box !important;
  }

  .deal-product-item .product-card,
  #productsGrid .product-card,
  #product-list .product-card,
  .related-products .product-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 8px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* 2. Khung hinh san pham ben trai: Chiem ty le hop ly (38% ~ 125px), anh tu dong co vua khit */
  .deal-product-item .product-thumb-box,
  #productsGrid .product-thumb-box,
  #product-list .product-thumb-box,
  .related-products .product-thumb-box {
    width: 125px !important;
    min-width: 120px !important;
    max-width: 130px !important;
    height: 125px !important;
    border-radius: 8px !important;
    padding: 4px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f8fafc !important;
    overflow: hidden !important;
  }

  .deal-product-item .product-thumb-box img,
  #productsGrid .product-thumb-box img,
  #product-list .product-thumb-box img,
  .related-products .product-thumb-box img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* 3. Khung noi dung ben phai: Chiếm toan bo phan con lai, khong bi tran */
  .deal-product-item .product-card .card-body,
  #productsGrid .product-card .card-body,
  #product-list .product-card .card-body,
  .related-products .product-card .card-body {
    padding: 0 0 0 10px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Ten san pham: Tu co chu va hien thi 2 dong gon dep */
  .deal-product-item .product-title,
  #productsGrid .product-title,
  #product-list .product-title,
  .related-products .product-title {
    height: auto !important;
    max-height: none !important;
    font-size: 0.88rem !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-word !important;
  }

  /* Khung gia san pham tren mobile */
  .deal-product-item .product-pricing,
  #productsGrid .product-pricing,
  #product-list .product-pricing,
  .related-products .product-pricing {
    border-top: none !important;
    padding-top: 2px !important;
    width: 100% !important;
  }

  .deal-product-item .product-pricing .d-flex,
  #productsGrid .product-pricing .d-flex,
  #product-list .product-pricing .d-flex,
  .related-products .product-pricing .d-flex {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 4px !important;
    margin-bottom: 4px !important;
  }

  .deal-product-item .product-pricing .text-danger,
  #productsGrid .product-pricing .text-danger,
  #product-list .product-pricing .text-danger,
  .related-products .product-pricing .text-danger {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    margin-right: 4px !important;
  }

  .deal-product-item .product-pricing .text-muted,
  #productsGrid .product-pricing .text-muted,
  #product-list .product-pricing .text-muted,
  .related-products .product-pricing .text-muted {
    font-size: 0.76rem !important;
    white-space: nowrap !important;
  }

  /* 4. Nut Them vao gio hang: Can deu giua khung, chu va icon tu co gon trong nut */
  .deal-product-item .btn-add-to-cart,
  #productsGrid .btn-add-to-cart,
  #product-list .btn-add-to-cart,
  .related-products .btn-add-to-cart,
  .product-card .btn-add-to-cart {
    position: static !important;
    left: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 4px 0 0 0 !important;
    padding: 5px 6px !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .deal-product-item .btn-add-to-cart i,
  #productsGrid .btn-add-to-cart i,
  #product-list .btn-add-to-cart i,
  .related-products .btn-add-to-cart i {
    font-size: 0.76rem !important;
    margin-right: 4px !important;
  }

  /* Huy hieu giam gia tren anh bo tron mem mai */
  .deal-product-item .discount-badge-corner,
  #productsGrid .discount-badge-corner,
  #product-list .discount-badge-corner,
  .discount-badge-corner {
    border-radius: 6px !important;
    top: 4px !important;
    left: 4px !important;
    font-size: 0.72rem !important;
    padding: 2px 5px !important;
  }
}