/* ===== GIỎ HÀNG - GIAO DIỆN ===== */

/* Đặt font chữ toàn trang, màu nền sáng nhẹ và padding chung */
body {
    font-family: 'Poppins', sans-serif; /* Chọn font Poppins cho toàn bộ trang */
    background: #f7f7f7;               /* Màu nền trắng xám nhẹ */
    margin: 0;                        /* Loại bỏ margin mặc định của trình duyệt */
    padding: 0;                   /* Thêm khoảng cách padding 20px xung quanh */
}

/* Tiêu đề h2 căn giữa, cách dưới 30px, kích thước lớn và màu chữ đậm */
h2 {
    text-align: center;             /* Canh giữa chữ */
    margin-bottom: 30px;            /* Khoảng cách dưới 30px */
    font-size: 28px;                /* Kích thước chữ lớn */
    color: #333;                   /* Màu chữ xám đậm */
}

/* Khung chính chứa giỏ hàng, giới hạn chiều rộng, căn giữa, nền trắng, bo góc và bóng mờ nhẹ */
.cart-container {
    max-width: 1000px;               /* Giới hạn chiều rộng tối đa 1000px */
    margin: 0 auto;                  /* Căn giữa theo chiều ngang */
    background: #fff;                /* Nền trắng */
    padding: 100px;                  /* Khoảng cách trong khung 30px */
    border-radius: 10px;             /* Bo tròn góc 10px */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); /* Bóng đổ nhẹ phía dưới */
}

/* Bảng giỏ hàng rộng 100%, bỏ khoảng cách giữa các ô, cách dưới bảng 30px */
table.cart-table {
    width: 100%;                    /* Chiều rộng chiếm toàn bộ khung */
    border-collapse: collapse;      /* Gộp viền các ô lại */
    margin-bottom: 30px;            /* Cách dưới bảng 30px */
}

/* Căn chỉnh padding, text và viền dưới cho cả thẻ tiêu đề và thẻ dữ liệu */
.cart-table th,
.cart-table td {
    padding: 12px 15px;             /* Padding trong ô: 12px trên/dưới, 15px trái/phải */
    text-align: center;             /* Canh giữa nội dung */
    border-bottom: 1px solid #eee; /* Viền dưới màu xám nhạt */
    vertical-align: middle;         /* Canh dọc nội dung ở giữa */
}

/* Định dạng riêng cho thẻ tiêu đề */
.cart-table th {
    background-color: #fafafa;      /* Nền màu xám rất nhạt */
    color: #222;                    /* Màu chữ tối hơn */
    font-weight: 600;               /* Chữ đậm vừa phải */
}

/* Ảnh sản phẩm trong bảng có kích thước cố định và bo góc */
.cart-table td img {
    width: 60px;                   /* Chiều rộng ảnh 60px */
    height: auto;                  /* Chiều cao tự động giữ tỉ lệ */
    border-radius: 6px;            /* Bo góc ảnh nhẹ 6px */
}

/* Dữ liệu trong bảng có màu xám trung tính, cỡ chữ vừa */
.cart-table td {
    color: #555;                   /* Màu chữ xám vừa */
    font-size: 15px;               /* Cỡ chữ chuẩn */
}

/* Các input kiểu số và text trong bảng giỏ hàng */
.cart-table input[type="number"],
.cart-table input[type="text"] {
    width: 60px;                   /* Chiều rộng cố định 60px */
    padding: 6px;                  /* Padding trong ô 6px */
    font-size: 14px;               /* Cỡ chữ nhỏ hơn một chút */
    text-align: center;            /* Canh chữ trong input ở giữa */
    border: 1px solid #ddd;        /* Viền màu xám nhạt */
    border-radius: 4px;            /* Bo góc 4px */
}

/* Lớp văn bản màu đỏ nhạt, đậm và kích thước lớn hơn bình thường (dùng để hiển thị lỗi hoặc cảnh báo) */
.cart-table .text-danger {
    color: #e91e63;                /* Màu hồng đậm */
    font-weight: bold;             /* Chữ in đậm */
    font-size: 16px;               /* Cỡ chữ lớn */
}

/* Nút chính cho thao tác thanh toán hoặc các nút chính khác */
.btn-checkout,
.btn-primary {
    background-color: #000;        /* Nền đen */
    color: #fff;                   /* Chữ trắng */
    padding: 12px 25px;            /* Khoảng cách trong nút: 12px trên/dưới, 25px trái/phải */
    border: none;                  /* Bỏ viền */
    border-radius: 6px;            /* Bo góc 6px */
    font-weight: 500;              /* Chữ hơi đậm */
    transition: background-color 0.3s ease; /* Hiệu ứng chuyển màu nền mượt */
    cursor: pointer;               /* Con trỏ chuột dạng pointer */
    display: inline-block;         /* Hiển thị dạng khối nhỏ inline */
    margin: 10px auto;             /* Cách trên dưới 10px, canh giữa ngang */
    text-align: center;            /* Canh chữ giữa */
}

/* Hiệu ứng hover cho nút chính: đổi màu nền xám đậm hơn */
.btn-checkout:hover,
.btn-primary:hover {
    background-color: #333;        /* Màu nền xám đậm */
}

/* Nút xoá (danger) màu đỏ, nhỏ, bo góc */
.btn-danger {
    background-color: #f44336;     /* Màu đỏ tươi */
    color: #fff;                   /* Chữ trắng */
    padding: 6px 12px;             /* Khoảng cách trong nút */
    border: none;                  /* Bỏ viền */
    border-radius: 4px;            /* Bo góc 4px */
    font-size: 14px;               /* Cỡ chữ nhỏ */
    cursor: pointer;               /* Con trỏ pointer */
}

/* Hiệu ứng hover cho nút xoá: đỏ đậm hơn */
.btn-danger:hover {
    background-color: #d32f2f;     /* Màu đỏ đậm */
}

/* Nút kích thước nhỏ (sm) */
.btn-sm {
    padding: 6px 10px;             /* Padding nhỏ hơn */
    font-size: 0.85rem;            /* Cỡ chữ nhỏ hơn chuẩn */
}

/* Hàng tổng cộng ở cuối bảng giỏ hàng: nền hồng nhạt, chữ hồng đậm, to và đậm */
.cart-total-row {
    background: #fff0f4;           /* Nền hồng nhạt */
    font-weight: bold;             /* Chữ in đậm */
    font-size: 18px;               /* Cỡ chữ lớn */
    color: #e91e63;                /* Màu chữ hồng */
}

/* Lớp canh phải */
.text-end {
    text-align: right !important; /* Căn phải, ưu tiên cao */
}

/* Lớp canh giữa */
.text-center {
  display: flex;
  justify-content: center; /* căn giữa ngang */
  align-items: center;     /* căn giữa dọc (nếu cần) */
  gap: 8px;                /* khoảng cách giữa icon và text */
}


/* Lớp màu đỏ, ưu tiên cao */
.text-danger {
    color: #e91e63 !important;    /* Màu hồng */
}

/* Khung chứa các nút thao tác đặt hàng, canh giữa và cách trên */
.cart-actions {
    text-align: center;            /* Canh giữa */
    margin-top: 20px;              /* Cách trên 20px */
}

/* Thẻ đoạn văn căn giữa, chữ vừa, màu xám */
p {
    text-align: center;            /* Canh giữa */
    font-size: 18px;               /* Cỡ chữ vừa */
    color: #666;                  /* Màu xám vừa */
}

/* Nút cập nhật giỏ hàng: nền xám, chữ trắng, bo góc, kích thước vừa */
.btn-update {
    background-color: #555;        /* Nền xám vừa */
    color: #fff;                   /* Chữ trắng */
    padding: 12px 25px;            /* Padding trong nút */
    border: none;                  /* Bỏ viền */
    border-radius: 6px;            /* Bo góc 6px */
    font-weight: 500;              /* Chữ hơi đậm */
    transition: background-color 0.3s ease; /* Hiệu ứng chuyển màu mượt */
    cursor: pointer;               /* Con trỏ pointer */
    margin-right: 10px;            /* Cách phải 10px */
    text-decoration: none;         /* Bỏ gạch chân */
}

/* Hiệu ứng hover cho nút cập nhật giỏ hàng */
.btn-update:hover {
    background-color: #333;        /* Nền xám đậm */
}

/* Định dạng select (dropdown) form trong giỏ hàng */
.form-select {
    padding: 6px 10px;             /* Padding trong select */
    border: 1px solid #ccc;        /* Viền xám nhạt */
    border-radius: 5px;            /* Bo góc 5px */
    font-family: inherit;          /* Thừa kế font từ cha */
    font-size: 14px;               /* Cỡ chữ vừa */
    min-width: 70px;               /* Chiều rộng tối thiểu 70px */
}

/* ========================= RESPONSIVE ========================= */

/* Khi màn hình nhỏ hơn 992px (máy tính bảng, laptop nhỏ) */
@media (max-width: 992px) {
    .cart-container {
      padding: 20px;               /* Giảm padding */
    }
  
    table.cart-table th,
    table.cart-table td {
      font-size: 14px;             /* Giảm cỡ chữ */
      padding: 10px 8px;           /* Giảm padding trong ô */
    }
  
    .cart-table td img {
      width: 50px;                 /* Ảnh nhỏ hơn */
    }
  
    .btn-checkout,
    .btn-primary,
    .btn-update {
      padding: 10px 20px;          /* Nút nhỏ hơn */
      font-size: 15px;             /* Cỡ chữ nhỏ hơn */
    }
  
    .cart-total-row {
      font-size: 16px;             /* Cỡ chữ nhỏ hơn */
    }
}

/* Khi màn hình nhỏ hơn 768px (điện thoại lớn, máy tính bảng nhỏ) */
@media (max-width: 768px) {
    .cart-container {
      padding: 15px;               /* Giảm padding hơn */
    }
  
    .cart-table {
      display: block;              /* Hiển thị block để scroll ngang */
      overflow-x: auto;           /* Cho phép cuộn ngang khi cần */
      width: 100%;                /* Chiếm hết chiều ngang */
    }
  
    .cart-actions {
      display: flex;              /* Hiển thị flexbox */
      flex-direction: column;     /* Xếp dọc */
      align-items: center;        /* Canh giữa ngang */
    }
  
    .btn-checkout,
    .btn-update {
      width: 100%;                /* Chiếm hết chiều ngang */
      max-width: 300px;           /* Giới hạn max 300px */
      margin: 10px 0;             /* Cách trên dưới 10px */
    }
  
    .form-select {
      width: 100%;                /* Chiếm hết chiều ngang */
      max-width: 140px;           /* Giới hạn tối đa 140px */
      font-size: 13px;            /* Cỡ chữ nhỏ hơn */
    }
}

/* Khi màn hình nhỏ hơn 576px (điện thoại nhỏ) */
@media (max-width: 576px) {
    h2 {
      font-size: 22px;            /* Tiêu đề nhỏ hơn */
    }
  
    .cart-table th,
    .cart-table td {
      font-size: 13px;            /* Chữ trong bảng nhỏ hơn */
      padding: 8px 6px;           /* Padding nhỏ hơn */
    }
  
    .cart-table td img {
      width: 40px;                /* Ảnh nhỏ hơn */
    }
  
    .btn-checkout,
    .btn-update {
      font-size: 14px;            /* Cỡ chữ nhỏ */
      padding: 10px 15px;         /* Padding nhỏ */
    }
  
    .cart-total-row {
      font-size: 15px;            /* Chữ tổng cộng nhỏ hơn */
    }
}