/* === พื้นหลังและตัวอักษรหลัก === */
body {
  font-family: 'Prompt', sans-serif;
  background-color: #BADFDB;
  line-height: 1.6; /* เพิ่มระยะบรรทัดให้อ่านง่ายขึ้น */
}

h2 {
  color: #2c3e50;
  font-size: 1.5rem; /* ปรับขนาดให้พอดีมือถือ */
}

h3 {
  font-family: 'Prompt', sans-serif;
  font-weight: bold;
  color: #0d6efd;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
}

/* === Navbar === */
.custom-navbar {
  background: linear-gradient(to right, #1f1f1f, #2c2c2c);
  border-bottom: 3px solid #0dcaf0;
  padding: 10px 15px; /* เพิ่ม Padding ให้กดง่ายขึ้น */
}

.navbar-brand {
  font-size: 1.2rem; /* ลดขนาดลงเล็กน้อยในมือถือ */
  letter-spacing: 1px;
  color: #ffffff;
}

/* === ปุ่ม === */
.btn {
  font-size: 1rem;
  transition: all 0.3s ease-in-out;
  padding: 10px 15px; /* ขยายพื้นที่กด */
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ปรับแต่งสำหรับมือถือจอเล็กสุดๆ */
@media (max-width: 576px) {
  .btn-lg, .btn {
    width: 100%; /* ให้ปุ่มเต็มหน้าจอ */
    margin-bottom: 10px;
  }

  .d-flex.justify-content-between {
    flex-direction: column; /* เปลี่ยนจากแนวนอนเป็นแนวตั้ง */
    gap: 10px;
  }
}

/* === ฟอร์มเพิ่ม/แก้ไขสินค้า === */
.product-form {
  background-color: #f8f9fa;
  padding: 15px; /* ลด Padding เล็กน้อย */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  margin-bottom: 20px;
}

/* === ตารางสินค้า (สำคัญมากสำหรับมือถือ) === */
.table-responsive {
  border-radius: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* ให้เลื่อนตารางลื่นขึ้นใน iOS */
}

table {
  min-width: 600px; /* บังคับความกว้างขั้นต่ำเพื่อให้ตารางไม่เบียดกันจนอ่านไม่ออก */
}

/* === การ์ดสินค้า === */
/* === การปรับแต่งการ์ดสินค้าให้สั้นลงและเท่ากัน === */

/* 1. คุมความสูงของชื่อสินค้า (แสดง 1 บรรทัด) */
.card-title {
    display: -webkit-box;
    -webkit-line-clamp: 1; /* ตัดเหลือ 1 บรรทัด */
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.1rem;
    font-weight: bold;
    min-height: 1.4em; /* ล็อกความสูงไว้ไม่ให้กล่องยุบ */
    margin-bottom: 8px;
}

/* 2. คุมรายละเอียดสินค้า (แสดง 2 บรรทัด) */
.card-text.small {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* ตัดเหลือ 2 บรรทัดแล้วใส่ ... */
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.85rem;
    min-height: 2.6em; /* ล็อกความสูงให้เท่ากันทุก Card */
    line-height: 1.3;
    margin-bottom: 12px;
}

/* 3. ปรับแต่งตัว Card โดยรวม */
.card {
    border: none !important;
    border-radius: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
    background-color: #ffffff;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}

/* 4. ปรับขนาดรูปภาพในการ์ดให้สมดุล */
.card img {
    height: 160px; /* ลดลงเล็กน้อยจากเดิม 180px */
    object-fit: contain;
    padding: 15px;
    background-color: #fcfcfc; /* เพิ่มพื้นหลังสีจางๆ ให้รูปดูเด่น */
}

/* 5. ปรับส่วนท้ายของการ์ด (ราคาและปุ่ม) */
.card-body {
    padding: 1.25rem;
}

.text-success.fw-bold {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

/* === รูปภาพสินค้า === */
/* ลบหรือคอมเมนต์ส่วนนี้ออก เพราะมันทำให้รูปในหน้า Detail เล็กไปด้วย */
.product-image-a {
   max-width: 300px; 
}
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* === ส่วนของรายละเอียดสินค้า (Product Detail) === */
@media (max-width: 768px) {
  .product-description {
    font-size: 16px; /* ลดขนาดตัวอักษรลงจาก 20px เพื่อไม่ให้ใหญ่ไป */
  }
  
  .product-title {
    font-size: 1.4rem;
    text-align: center; /* จัดกลางหัวข้อในมือถือ */
  }

  .product-price {
    font-size: 1.2rem;
    text-align: center;
    font-weight: bold;
    color: #ff0000;
  }
}

/* === กล่องล็อกอิน === */
.login-box {
  border: 1px solid #ddd;
  background-color: #ffffff;
  padding: 2rem 1.5rem;
  border-radius: 15px;
  margin: 10px; /* เพิ่ม Margin เพื่อไม่ให้กล่องติดขอบจอ */
}
/* --- 2. BANNER (แถบโปรโมชั่น) --- */
.banner {
    /* background-color: #f0f0f0;  เอาออกถ้าไม่อยากเห็นขอบเทา */
    text-align: center;
    margin-top: 15px;
    border-radius: 5px; 
    overflow: hidden; /* ช่วยให้รูปที่ล้นออกมาถูกตัดตามความโค้งของ border-radius */
    padding: 0; /* เปลี่ยนเป็น 0 เพื่อให้รูปชิดขอบ */
}

.banner img {
    width: 100%;    /* ให้รูปกว้างเท่ากับกล่อง */
    height: auto;   /* ให้ความสูงปรับตามสัดส่วนรูป */
    display: block; /* ลบช่องว่างเล็กๆ ใต้รูปภาพ */
}
/* แก้ไขในไฟล์ CSS ของคุณ */
.card img {
    height: auto; /* ให้ความสูงปรับตามจริง */
    max-height: 600px; /* หรือตามความเหมาะสม */
    object-fit: contain;
    padding: 0; /* ลบ padding ออกเพื่อให้รูปชิดขอบกรอบ */
}

/* เพิ่มคลาสนี้เพื่อให้รูปในหน้า Detail ขยายใหญ่ที่สุด */
.img-fluid.w-100 {
    max-width: 100% !important;
    height: auto !important;
}
.a-product-image{
    width: 100px;        /* กำหนดความกว้างตามต้องการ */
    height: 100px;       /* กำหนดความสูง */
    object-fit: contain; /* ให้รูปอยู่ภายในกรอบโดยไม่เสียสัดส่วน */
    border-radius: 5px;  /* แต่งขอบมนเล็กน้อย */
    background-color: #f8f9fa;
  }

  /* ปรับแต่งตารางเพิ่มเติมให้ดูง่ายขึ้น */
  .table td {
    vertical-align: middle;
  }