@charset "utf-8";
.product-row 
{
  display: flex;
  border-bottom: 1px inset #ccc;
  min-height: 42px;
}

        .product-row:last-child 
        {
          border-bottom: none;
        }

.label 
{
  width: 200px;
  color: #990000;
  font-weight: 500;
  padding: 10px;
  border-right: 1px dashed #ccc;
  display: flex;
  align-items: center;
}

        .value 
        {
          padding: 10px;
          display: flex;
          align-items: center;
          flex: 1;
          color: #444;
        }

.value h3 
{
  margin: 0;
  color: #DC7110;
  font-size: 16px;
  font-weight: bold;
}

        .value strong 
        {
          color: #FF0000;
          font-size: 16px;
        }
/* Hiệu ứng hover mỗi dòng */
.product-row 
{
  transition: background-color 0.3s ease;
}

        .product-row:hover 
        {
          background-color: #fdf6ed; /* màu cam nhạt nhẹ */
        }

/* Hiệu ứng fade-in toàn bộ khối */
.product-detail 
{
  animation: fadeIn 0.6s ease-out;
}

/* Định nghĩa keyframe cho hiệu ứng fadeIn */
        @keyframes fadeIn 
        {
          from 
          {
            opacity: 0;
            transform: translateY(10px);
          }
          to 
          {
            opacity: 1;
            transform: translateY(0);
          }
        }

.con-hang 
{
    color: green;
    font-weight: bold;
}
        .sap-het 
        {
            color: orange;
            font-weight: bold;
        }
.hang-dat 
{
    color: gray;
    font-style: italic;
    font-weight: bold;
}

        .btn-lien-he 
        {
          margin-left: 3px;
          background-color: #555;
          color: #fff;
          padding: 6px 14px;
          font-size: 14px;
          font-weight: bold;
          text-decoration: none;
          border-radius: 4px;
          transition: background-color 0.3s ease;
          display: inline-block;
        }

.btn-lien-he:hover 
{
  background-color: #333;
}



          #mota-noidung 
          {
            max-height: 300px;
            overflow: hidden;
            position: relative;
            transition: max-height 0.6s ease, opacity 0.6s ease;
            opacity: 1;
          }

#mota-noidung.mo-rong 
{
    max-height: 2000px; /* cao hơn để chứa nội dung dài */
    opacity: 0;
    animation: fadeInMoTa 0.6s ease forwards;
}

          @keyframes fadeInMoTa 
          {
            from 
            {
              opacity: 0;
              transform: translateY(10px);
            }
            to 
            {
              opacity: 1;
              transform: translateY(0);
            }
          }
  
  

                                                                /*PHẦN NGOÀI TRANG CHI TIẾT*/ 
/*giỏ hàng*/
.cart-wrapper {
    position: relative;
    display: inline-block;
}

#cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #e53935;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 50%;
    text-align: center;
    padding: 0 4px;
}

/* POP */
@keyframes cartBadgePop {
    0%   { transform: scale(0.6); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.cart-badge-animate {
    animation: cartBadgePop 0.35s ease-out;
}

/* GLOW */
@keyframes cartBadgeGlow {
    0% { box-shadow: 0 0 0 rgba(229,57,53,0); }
    50% {
        box-shadow:
            0 0 8px rgba(229,57,53,0.8),
            0 0 14px rgba(229,57,53,0.6);
    }
    100% { box-shadow: 0 0 0 rgba(229,57,53,0); }
}

.cart-badge-glow {
    animation: cartBadgeGlow 0.6s ease-out;
}
@keyframes cartBadgePulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.cart-badge-pulse {
    animation: cartBadgePulse 0.5s ease-in-out;
}

/* ====== NHẤP NHÁY NHẸ KHI GIỎ CÓ HÀNG ====== */
@keyframes cartBadgeIdlePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(229,57,53,0);
    }
    50% {
        transform: scale(1.12);
        box-shadow:
            0 0 6px rgba(229,57,53,0.6),
            0 0 10px rgba(229,57,53,0.4);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(229,57,53,0);
    }
}

.cart-badge-idle {
    animation: cartBadgeIdlePulse 0.6s ease-in-out;
}



@media (max-width: 768px) 
{
/* Bọc chung menu và nút trong 1 khung */
          .menu-wrapper 
          {
            max-width: 100%; /* thay số này bằng chiều rộng mong muốn */
           
            background: none !important; /* xóa nền nếu có */
            box-shadow: none !important;
            border: none !important;
          }

/* Style chung cho 2 nút mobile */
    .mobile-menus button 
    {
      width: 100%;          /* mỗi nút full hàng */
      min-height: 45px;     /* chiều cao */
      font-size: 16px;      /* chữ rõ hơn */
      white-space: nowrap;  /* ❌ không cho xuống dòng */
      padding: 10px 16.5px;   /* khoảng cách trong nút */
      border-radius: 5px;
    }


          .mobile-menus 
          {
            display: flex;
            justify-content: space-between;
            gap: 5px;
            margin: 10px 0;
          }
    .mobile-btn 
    {
    flex: 1;
    background: #34495e;
    color: #fff;
    border: none;
    padding: 12px 15px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    }

/* Ẩn menu chính mặc định */
          .main-nav 
          {
            display: none;
            background: #34495e; /* nền xanh cho menu chính */
            padding: 0;
            margin: 0;
            border-radius: 6px;
          }

/* Khi bật .show thì hiện menu */
  .main-nav.show 
  {
    display: block;
    padding: 10px;
  }

/* Mở 2 cột bên trong */
          .main-nav.show .menu-left,
          .main-nav.show .menu-right 
          {
            display: block;
            /* bỏ nền trắng, giữ nền cha */
            background: none;
            padding: 10px 0;
            width: 100%;
            box-sizing: border-box;
          }

/* Menu dạng cột */
  .menu 
  {
    list-style: none;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
  }
          .menu li 
          {
            width: 100%;
            margin: 0;
            border-top: 1px solid #fff;
          }
  .menu li a 
  {
    display: block;
    padding: 10px;
    color: #fff;
    text-decoration: none;
  }
          .menu li a:hover 
          {
            background-color: #444;
          }

                                                                                    /* Danh mục mobile */
  .mobile-category-list 
  {
    display: none;
   background: #34495e;
    border: 1px solid #ddd;
    margin-top: 10px;
    border-radius: 5px;
    padding: 10px;
  }
          .mobile-category-item 
          {
            margin-bottom: 10px;
          }
  .mobile-category-item .nhom-title 
  {
    font-weight: bold;
    margin-bottom: 5px;
    color: #d93600;
  }
          .mobile-category-item ul 
          {
            list-style: none;
            padding-left: 20px;
            margin: 0;
          }
  .mobile-category-item ul li 
  {
      padding-top: 10px;
      border-top: 1px solid #fff;
    margin: 5px 0;
  }
          .mobile-category-item ul li a 
          {
            color: #fff;
            text-decoration: none;
          }
  .mobile-category-item ul li a:hover 
  {
    color: #007bff;
  }

          .mobile-category-list.show 
          {
            display: block !important;
          }
}

/* PC - Luôn hiển thị menu và tìm kiếm, ẩn nút mobile */
@media (min-width: 769px) 
{
      .menu-left,
      .menu-right 
      {
        display: block;
        background-color: transparent;
      }

/* Ẩn nút Menu chính & Danh mục trên PC */
  .mobile-menus 
  {
    display: none;
  }
      .search-mobile{display: none;}
      .mobile-category-list 
      {
        display: none;
      }
}

/* Mobile: cho phần tìm kiếm và menu sát head */
@media screen and (max-width: 768px) 
{
  .wrapper 
  {
    padding-top: 85px; 
  }
}

/* PC: giữ khoảng cách như cũ và nền trắng */
        @media (min-width: 769px) 
        {
          .wrapper 
          {
          padding-top: 130px;
          background-color: #fff; /* tô nền trắng cho vùng padding-top */
          }
        }

                                                                                        /* ===== ĐẨY NỘI DUNG DƯỚI BANNER XUỐNG ===== */
.content-spacer 
{
  height: 64px; /* PC mặc định */
}

                                                                                            /* FORM TÌM KIẾM GIAO DIÊN MOBILE */
.search-mobile 
{
  display: flex;
  align-items: center;
  max-width: 100%;
  background: white;
  border: 1px solid #ccc;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Ẩn trên PC, chỉ hiển thị khi là mobile */
        @media (min-width: 769px) 
        {
          .search-mobile 
          {
            display: none !important;
          }
        }

.search-mobile input[type="text"] 
{
  flex: 1;
  padding: 8px 14px;
  font-size: 14px;
  font-family: Tahoma, "Be Vietnam Pro", sans-serif;
  border: none;
  outline: none;
}

        .search-mobile button 
        {
          background: #e74c3c;
          color: white;
          border: none;
          padding: 8px 12px;
          cursor: pointer;
          font-size: 16px;
          transition: background 0.3s ease;
        }

.search-mobile button:hover 
{
  background: #c0392b;
}

                            

                                                                                                /*PHẦN CHI TIẾT SẢN PHẨM*/

.product-container 
{
  display: flex;
  gap: 0px;
}

        .product-detail 
        {
          display: table;
          width: 100%;
          margin-left: 20px;
          border-collapse: collapse;
          font-family: Verdana, sans-serif;
       
          font-size: 14px;
        }


                                                                                                /* ===========================
                                                                                                   PHẦN MÔ TẢ SẢN PHẨM
                                                                                                   =========================== */    
     


/* ===== PC ===== */
.mota-container {
  max-width: 975px;      /* ❗ đổi từ width → max-width */
  width: 100%;
  margin-top: 10px;
  margin-left: auto;
  margin-right: 0;
  background-color: #fff;
  box-sizing: border-box;
}

.mota-content {
  max-width: 975px;      /* ❗ đổi từ width → max-width */
  width: 100%;
  font-family: Verdana, sans-serif;
  box-sizing: border-box;
}

/* ===== CKEditor nội dung ===== */
.ckeditor-content {
  font-family: Verdana, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.ckeditor-content h2 {
  font-size: 20px;
  color: #DC7110;
  margin-top: 20px;
}

.ckeditor-content ul {
  padding-left: 20px;
}
.ckeditor-content img {
  max-width: 100%;
  height: auto;
  display: block;

  /* ⭐ CANH GIỮA ẢNH */
  margin: 10px auto;
}
@media (max-width: 768px) 
{
  .ckeditor-content img 
  {
    max-width: 100%;
    max-height: 320px;

  }
}

.ckeditor-content iframe {
  max-width: 100%;
}

/* ⚠️ TABLE: KHÔNG dùng display:block */
.ckeditor-content table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;   /* ⭐ quan trọng */
}

.ckeditor-content td,
.ckeditor-content th {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ===== NGẮT CHỮ TIẾNG VIỆT – CHUẨN ===== */
#mota-sp {
  line-height: 1.7;
  text-align: left;

  /* ❗ bộ ngắt chữ ĐÚNG cho tiếng Việt */
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;

  padding-bottom: 10px;
  box-sizing: border-box;
}

/* ❗ KHÔNG đụng toàn bộ con cháu nữa → tránh chẻ chữ */
#mota-sp * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Riêng chuỗi dài (link, code) */
#mota-sp a,
#mota-sp pre,
#mota-sp code {
  word-break: break-all;
}

/* ===== Mobile ===== */
@media (max-width: 768px) {

  .mota-container,
  .mota-content {
    max-width: 100%;
    width: 100%;
    margin: 10px auto;
  }

  .product-detail {
    width: 100%;
    max-width: 100%;
  }

  .mota-fieldset {
    width: 100%;
    box-sizing: border-box;
  }
}


/* =================================================
   FIX FIELDSET TRÀN – NGUYÊN NHÂN CHÍNH
   ================================================= */

/* Fieldset không được phép tràn */
.mota-content fieldset {
  min-width: 0;              /* ⭐ CỰC KỲ QUAN TRỌNG */
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;         /* ❗ không cho fieldset tự cắt */
}

/* Legend cũng phải bị giới hạn */
.mota-content legend {
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 8px;
}

/* Không cho h3 làm bung khung */
.mota-content legend h3 {
  max-width: 100%;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Wrapper mô tả – tách khỏi fieldset */
#mota-wrapper {
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* Nội dung CKEditor */
#mota-sp {
  max-width: 100%;
  box-sizing: border-box;
}

/* ===== Mô tả sản phẩm wrapper (Xem thêm) ===== */
#mota-wrapper {
  position: relative;
  max-height: 350px;
  overflow: hidden;
  transition: max-height 0.6s ease;
  box-sizing: border-box;
}

/* Gradient che */
#mo-mo {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,1)
  );
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Button xem thêm */
#xemThemBtn {
  padding: 8px 14px;
  font-weight: bold;
  background-color: #DC7110;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  transition: background-color 0.3s ease;
  position: relative;
  z-index: 2;
}

#xemThemBtn:hover {
  background-color: #b9570c;
}

/* Nội dung mở rộng */
#mota-noidung {
  max-height: 300px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.6s ease, opacity 0.6s ease;
  opacity: 1;
}

#mota-noidung.mo-rong {
  max-height: 2000px;
  opacity: 1;
  animation: fadeInMoTa 0.6s ease forwards;
}

@keyframes fadeInMoTa {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*NÚT THÊM VÀO GIỎ*/

   .btn-them-gio {
    background: linear-gradient(135deg, #ff9800, #ff5722);
    border: none;
    font-family:tahoma;
    height: 40px;                 /* đồng bộ chiều cao */
    min-width: 150px;             /* ✅ ÉP NÚT DÀI RA */
    padding: 0 10px;              /* trái / phải */
    
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;

    display: inline-flex;         /* ✅ KHÓA XUỐNG DÒNG */
    align-items: center;
    justify-content: center;
    gap: 6px;  /* khoảng cách icon - chữ */
    white-space: nowrap;          /* ✅ CHỮ KHÔNG XUỐNG DÒNG */

    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
    transition: all 0.25s ease;
}

.btn-them-gio:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.35);
   background: linear-gradient(135deg, #ff5722, #e64a19);
}

.btn-them-gio:active {
    transform: scale(0.96);
}

/* 🔒 đang xử lý hoặc đã có trong giỏ */
.btn-them-gio.loading,
.btn-them-gio:disabled {
    
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-them-gio.loading {
    pointer-events: none;
}

/* 🚫 không hover khi disabled */
.btn-them-gio:disabled:hover {
    transform: none;
    box-shadow: none;
    background: linear-gradient(135deg, #bbb, #999);
}
.btn-them-gio.added {
    background: linear-gradient(135deg, #ff5722, #e64a19);
    cursor: pointer;
}

.btn-them-gio.added:hover {
    background: linear-gradient(135deg, #43a047, #1b5e20);
}
@media (max-width: 768px) {
    .btn-them-gio {
        background: linear-gradient(135deg, #ff9800, #ff5722);
        border: none;
       font-family:tahoma;
       max-width: 130px;    
        height: 40px;      /* đồng bộ chiều cao input */
        line-height: 10px;
        border-radius: 30px;      /* bo tròn */
        padding: 12px 26px;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        box-shadow: 0 6px 14px rgba(0,0,0,0.25);
        transition: all 0.25s ease;
    }

    .btn-them-gio:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.35);
        background: linear-gradient(135deg, #ff5722, #e64a19);
    }

    .btn-them-gio:active {
        transform: scale(0.96);
    }
  .btn-them-gio.added:hover {
    background: linear-gradient(135deg, #43a047, #1b5e20);
}  
    
}




/*NÚT MUA NGAY*/  
.btn-mua-ngay {
    background: linear-gradient(135deg, #00c853, #2e7d32);
    border: none;
    margin-left: 12px;
    font-family:tahoma;
    height: 40px;                 /* đồng bộ chiều cao */
    line-height: 40px;        /* ⭐canh giữa chữ và nút*/
    min-width: 130px;             /* ✅ ÉP NÚT DÀI RA */
    padding: 0 10px;              /* trái / phải */
    gap: 6px;  /* khoảng cách icon - chữ */
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
 text-decoration: none;   /* ❌ bỏ gạch chân */
    display: inline-flex;         /* ✅ KHÓA XUỐNG DÒNG */
    align-items: center;
    justify-content: center;
    white-space: nowrap;          /* ✅ CHỮ KHÔNG XUỐNG DÒNG */

    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
    transition: all 0.25s ease;
}
.btn-mua-ngay,
.btn-mua-ngay:hover,
.btn-mua-ngay:focus,
.btn-mua-ngay:active {
    text-decoration: none;
    color: #fff;
}
.btn-mua-ngay:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.35);
    background: linear-gradient(135deg, #2e7d32, #1b5e20);
}

.btn-mua-ngay:active {
    transform: scale(0.96);
}
@media (max-width: 768px) {
    .btn-mua-ngay {
        min-width: 130px;
        font-size: 15px;
    }
}
                                                                                        /* ===========================
                                                                                           PHẦN ĐÁNH GIÁ
                                                                                           =========================== */
/* Khung đánh giá */
.box-danhgia 
{
  max-width: 975px;
  width: 100%;
  padding: 10px;
  margin: 15px auto;
  background-color: #fff;
  box-sizing: border-box;
}

        /* Form */
        #formDanhGia 
        {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

#formDanhGia input[type="text"],
#formDanhGia select,
#formDanhGia textarea 
{
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
}

        /* Nút gửi */
        #formDanhGia input[type="submit"] 
        {
          font-size: 16px;
          font-weight: bold;
          padding: 10px;
          background: #f7941d;
          color: #fff;
          border: none;
          border-radius: 5px;
          width: 100%;
          box-sizing: border-box;
          cursor: pointer;
        }

#formDanhGia input[type="submit"]:hover 
{
  background: #e67e00;
}

                                                                                                /* ===== SẢN PHẨM CÙNG LOẠI ===== */

/* Container chính */
.spcungloai-container {
  max-width: 975px;
  width: 100%;
  margin: 15px auto; /* tự căn giữa */
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
}

        /* Header */
        .spcungloai-header 
        {
          padding: 10px 20px;
          color: #2e7d32;
          font-size: 18px;
          font-family: 'Be Vietnam Pro', Roboto, sans-serif;
          font-weight: bold;
          background: linear-gradient(to right, #ffffff, #e8f5e9);
          border-bottom: 1px solid #66bb6a;
          box-shadow: inset 0 -2px 5px rgba(0, 128, 0, 0.1);
          display: flex;
          align-items: center;
        }

.spcungloai-header i 
{
  margin-right: 6px;
  color: #388e3c;
}

        /* Nội dung */
        .spcungloai-content 
        {
          padding: 10px;
        }

/*NÚT THÊM VÀO GIỎ*/

   .btn-them-gio-spcl {
    background: linear-gradient(135deg, #ff9800, #ff5722);
    border: none;
    font-family:tahoma;
    height: 30px;                 /* đồng bộ chiều cao */
    min-width: 150px;             /* ✅ ÉP NÚT DÀI RA */
    padding: 0 10px;              /* trái / phải */
     line-height: 30px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;

    display: inline-flex;         /* ✅ KHÓA XUỐNG DÒNG */
    align-items: center;
    justify-content: center;
    gap: 6px;  /* khoảng cách icon - chữ */
    white-space: nowrap;          /* ✅ CHỮ KHÔNG XUỐNG DÒNG */

    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
    transition: all 0.25s ease;
}

.btn-them-gio-spcl:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.35);
   background: linear-gradient(135deg, #ff5722, #e64a19);
}

.btn-them-gio-spcl:active {
    transform: scale(0.96);
}

/* 🔒 đang xử lý hoặc đã có trong giỏ */
.btn-them-gio-spcl.loading,
.btn-them-gio-spcl:disabled {
    
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-them-gio-spcl.loading {
    pointer-events: none;
}

/* 🚫 không hover khi disabled */
.btn-them-gio-spcl:disabled:hover {
    transform: none;
    box-shadow: none;
    background: linear-gradient(135deg, #bbb, #999);
}
.btn-them-gio-spcl.added {
    background: linear-gradient(135deg, #ff5722, #e64a19);
    cursor: pointer;
}

.btn-them-gio-spcl.added:hover {
    background: linear-gradient(135deg, #43a047, #1b5e20);
}
@media (max-width: 768px) {
    .btn-them-gio-spcl {
        background: linear-gradient(135deg, #ff9800, #ff5722);
        border: none;
       font-family:tahoma;
       max-width: 80px;    
        height: 40px;      /* đồng bộ chiều cao input */
        line-height: 10px;
        border-radius: 30px;      /* bo tròn */
        padding: 12px 26px;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        box-shadow: 0 6px 14px rgba(0,0,0,0.25);
        transition: all 0.25s ease;
    }

    .btn-them-gio-spcl:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.35);
        background: linear-gradient(135deg, #ff5722, #e64a19);
    }

    .btn-them-gio-spcl:active {
        transform: scale(0.96);
    }
  .btn-them-gio-spcl.added:hover {
    background: linear-gradient(135deg, #43a047, #1b5e20);
}  
    
}

/* phân trang sp cùng loại*/

.pagination-wrapper 
{
  display: flex;
  justify-content: center;
  margin: 15px 0;
}

        .pagination 
        {
          display: flex;
          gap: 5px;
        }

.pagination a 
{
  padding: 6px 12px;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #333;
  border-radius: 4px;
  transition: background 0.2s;
}

        .pagination a:hover 
        {
          background: #f0f0f0;
        }

.pagination a.active 
{
  background: #4CAF50;
  color: #fff;
  border-color: #4CAF50;
}

/* style chung cho icon */
.product-detail i {
  margin-right: 6px;      /* cách icon với chữ */
  font-size: 15px;        /* đồng bộ size */
  vertical-align: middle; /* canh giữa icon với chữ */
}

/* màu cho từng loại icon */
.icon-name     { color: #007bff; }  /* xanh dương */
.icon-model    { color: #6f42c1; }  /* tím */
.icon-brand    { color: #17a2b8; }  /* xanh cyan */
.icon-tech     { color: #ffc107; }  /* vàng */
.icon-origin   { color: #28a745; }  /* xanh lá */
.icon-warranty { color: #20c997; }  /* xanh ngọc */
.icon-price    { color: #dc3545; }  /* đỏ */
.icon-sold     { color: #fd7e14; }  /* cam */
.icon-stock    { color: #6610f2; }  /* tím đậm */
.icon-cart     { color: #ff6600; }  /* cam đậm */
.icon-buy      { color: #e83e8c; }  /* hồng */
.icon-status   { color: #ff5722; }  /* cam đỏ (nổi bật, khác hoàn toàn) */
.icon-delivery { color: #3f51b5; }  /* xanh indigo (khác xanh hiện tại) */


                                                                                                 /* ================== KHUNG ẢNH TỔNG ================== */
.product-image-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;     /* 👉 CANH GIỮA NGANG */
}

/* ================== KHUNG ẢNH CHÍNH ================== */
.product-image-box {
  width: 320px;
  height: 320px;
  background: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 7px auto 0; /* khoảng cách trên + căn giữa */

  border: 1px solid #cfe3d8;              /* xanh nhạt kỹ thuật */
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,128,0,0.06);

  position: relative;                    /* 👉 để đặt overlay */
  cursor: zoom-in;

  transition: border-color 0.25s ease,
              box-shadow 0.25s ease;
}

/* Hover: chắc chắn – thiết bị kỹ thuật */
.product-image-box:hover {
  border-color: #2e7d32;                  /* xanh Khang My */
  box-shadow: 0 4px 12px rgba(46,125,50,0.25);
}

/* ================== ẢNH CHÍNH ================== */
.product-image {
  width: 100%;
  height: 100%;
  pointer-events: none;
  object-fit: contain;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Trạng thái đang chuyển ảnh */
.product-image.is-changing {
  opacity: 0;
  transform: scale(0.96);
}

.product-image-box:hover .product-image {
  transform: scale(1.06);
}

.product-image.fade-out {
  opacity: 0.6;
}

/* ================== OVERLAY XEM ẢNH LỚN ================== */
.product-image-box {
  position: relative; /* BẮT BUỘC để overlay nằm đúng */
}

/* Overlay nằm GIỮA KHUNG */
.zoom-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  text-shadow: 0 1px 1px rgba(0,0,0,0.08);
  transform: translate(-50%, -50%) scale(0.95);
  display: inline-flex;        /* 👉 inline-flex cho cân chữ */
  align-items: center;    

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  padding: 10px 6px;          /* nới ngang */
  min-width: 100px;            /* 🔥 đủ cho “xem ảnh lớn hơn” */
  line-height: 1; 

  background: rgba(255,255,255,0.90);
  color: #f7941d;

  border-radius: 8px;
  border: 1px solid #cfe3d8;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);

  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;         /* 🔥 không xuống dòng */

  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 3;
}

/* Icon kính lúp */
.zoom-icon {
  font-size: 18px;
  line-height: 1;
}

/* Hover thì hiện */
.product-image-box:hover .zoom-overlay {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Mobile: ẩn vì không có hover */
@media (max-width: 768px) {
  .zoom-overlay {
    display: none;
  }
}




/* ================== KHUNG ẢNH PHỤ ================== */
.thumbnail-wrapper {
  margin-top: 8px;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Danh sách ảnh phụ */
.thumbnail-list 
{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 4px 8px;

  max-width: 320px;                      /* BẰNG KHUNG ẢNH CHÍNH */
  border-top: 1px dashed #d6e5dc;         /* chia nhẹ – đúng gu */
  scrollbar-width: thin;                 /* Firefox */
}

/* Thanh cuộn – Chrome */
.thumbnail-list::-webkit-scrollbar 
{
  height: 6px;
}

.thumbnail-list::-webkit-scrollbar-thumb 
{
  background: #c1c1c1;
  border-radius: 10px;
}

.thumbnail-list::-webkit-scrollbar-track 
{
  background: #f1f1f1;
}



/* ================== ẢNH THUMB ================== */
.thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;

  border-radius: 6px;
  border: 1px solid #d0d0d0;
  background: #fff;

  cursor: pointer;
  flex-shrink: 0;

  transition: border-color 0.2s ease,
              box-shadow 0.2s ease,
              transform 0.2s ease;
}

.thumb:hover {
  border-color: #f7941d;                 
  transform: translateY(-1px);
}

.thumb.active {
  border-color: #f7941d;
  box-shadow: 0 0 0 1px rgba(247,148,29,0.6);
}

                                                                                    /* ================= MODAL ZOOM ẢNH ================= */
/* ===== MODAL ===== */
body.modal-open {
  overflow: hidden;
}

.zoom-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

/* ===== KHUNG ẢNH CHÍNH TRONG MODAL ===== */
.zoom-image-frame {
  width: 80vw;
  max-width: 900px;

  height: 88vh;        /* ⬆ tăng từ 80vh */
  max-height: 780px;  /* ⬆ tăng từ 600px */

  background: #fff;
  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}


/* Ảnh KHÔNG làm thay đổi khung */
.zoom-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ảnh luôn nằm gọn trong khung */
  display: block;
}
#zoomImage {
  user-select: none;
  -webkit-user-drag: none;
  touch-action: pan-y; /* cho phép vuốt ngang, chặn cuộn dọc */
  cursor: grab;
}


/* Nút đóng */
.zoom-close {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 36px;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  line-height: 1;
}

.zoom-close:hover {
  color: #4caf50;
}

/* Mobile */
@media (max-width: 768px) {
  .zoom-image-frame {
    width: 94vw;
    height: 45vh;
  }
}

/* ================= MODAL CONTENT ================= */
.zoom-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 92vw;
  max-height: 92vh;
}

/* ================= THUMB TRONG MODAL ================= */
.zoom-thumb-list {
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow-x: auto;
}

.zoom-thumb-list img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.8;
  transition: all 0.2s ease;
}
.zoom-thumb-list {
  /* max-width: 200px;    ép nhỏ lại để hiện thanh cuộn test */
}

.zoom-thumb-list img:hover {
  opacity: 1;
  transform: scale(1.05);
}

.zoom-thumb-list img.active {
  border-color: #4caf50;
  opacity: 1;
}

/* ================= SCROLLBAR THUMB MODAL ================= */

/* Chrome / Edge / Safari */
.zoom-thumb-list::-webkit-scrollbar {
  height: 6px;
}

.zoom-thumb-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}

.zoom-thumb-list::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.25);
  border-radius: 10px;
}

/* Firefox */
.zoom-thumb-list {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 rgba(255,255,255,0.25);
}
.zoom-thumb-list {
  scroll-behavior: smooth;            /* cuộn mượt */
  -webkit-overflow-scrolling: touch;  /* iOS mượt */
  overscroll-behavior-x: contain;     /* không ảnh hưởng trang */
}

/* Mobile */
@media (max-width: 768px) 
{
  .zoom-thumb-list img 
  {
    width: 54px;
    height: 54px;
  }
  
  .zoom-thumb-list 
  {
    max-width: 95%;
  }
}




                                                                                            /* ================== TẤT CẢ GIAO DIỆN MOBILE ================== */
@media (max-width: 768px) 
{
/* nguyên box ảnh chính của sản phẩm */  

      .product-image-box 
      {
        width: 100%;
        height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        margin: 10px auto 0; /* 20px khoảng cách trên + căn giữa */
      }
  
                /* sản phẩm cùng loại */
                
                    .spcungloai-container {
                      width: 100%;
                      margin: 10px auto;
                    }
                        
                    .spcungloai-header {
                        font-size: 16px;
                        padding: 8px 12px;
                    }
                    .spcungloai-content {
                        padding: 6px;
                    }
                    #box-spcungloai div {
                        font-size: 18px !important;
                        text-align: center;
                    } 
/* Đánh giá sản phẩm */

      .box-danhgia 
      {
          width: 100%;
          margin: 15px auto;
      }

/* Mô tả sản phẩm */

 

        
/* PHẦN CỤM CHI TIẾT SẢN PHẨM */

          .product-container 
          {
            flex-direction: column; /* đổi từ ngang sang dọc */
            align-items: center;   /* căn giữa ảnh */
          }

      .product-detail 
      {
        margin-left: 0; /* bỏ khoảng cách thừa */
        width: 100%;
      }

                        /* Ẩn form tìm kiếm trong menu khi là mobile */
                              
                                      .menu-right 
                                      {
                                        display: none !important;
                                      }
                                .search-mobile 
                                {
                                margin-top: 15px;
                                max-width: 100%;
                                display: flex !important;
                                }
                            
    /* --- Gợi ý --- */
                                      .suggestions-box 
                                      {
                                        position: absolute;
                                        top: 53px;
                                        left: 0;
                                        width: 100%;
                                        background: #1c2833;
                                        border: 1px solid #ccc;
                                        border-radius: 4px;
                                        z-index: 9999;
                                        display: none;
                                        max-height: 240px;
                                        overflow-y: auto;
                                        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
                                      }
                            
                              .suggestion-item 
                              {
                                display: flex;
                                align-items: center;
                                padding: 6px 8px;
                                gap: 10px;
                                cursor: pointer;
                                color: #fff;
                                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                              }
                            
                                      .suggestion-thumb 
                                      {
                                        width: 40px !important;
                                        height: 40px !important;
                                        flex-shrink: 0;
                                        object-fit: cover !important;
                                        border-radius: 4px;
                                        border: 1px solid #ddd;
                                      }
                            
                              .suggestion-item span 
                              {
                                flex: 1;
                                font-size: 14px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                              }
                            
                                      .suggestion-item:hover 
                                      {
                                        background-color: #fff;
                                        color: #cc0000;
                                      }
                            
                              .suggestion-item.selected 
                              {
                                background-color: #fff;
                                color: #cc0000;
                              }
                              
                                      .suggestion-item 
                                      {
                                      transition: all 0.25s ease;
                                      }
                            
                                .suggestion-item:hover 
                                {
                                  background-color: #fff;
                                  color: #cc0000;
                                  transform: translateX(3px); /* trượt nhẹ sang phải */
                                }
                            
                                    .suggestion-thumb 
                                    {
                                      transition: transform 0.25s ease;
                                    }
                            
                                .suggestion-item:hover .suggestion-thumb 
                                {
                                  transform: scale(1.1); /* phóng to ảnh nhẹ */
                                }
        /* Hiển thị thanh cuộn gọn gàng */
                                    .suggestion-box::-webkit-scrollbar 
                                    {
                                      width: 6px;
                                    }
                                .suggestion-box::-webkit-scrollbar-thumb 
                                {
                                  background-color: #888;
                                  border-radius: 4px;
                                }
                                    .suggestion-box::-webkit-scrollbar-thumb:hover 
                                    {
                                      background-color: #555;
                                    }
                           
/* đẩy nội dung xuống dưới banner*/
        
          .content-spacer 
          {
            height: 110px;
          }
        
  
}

.breadcrumb {
    display: none !important;
}


/* ẩn chữ tìm kiếm trong ô tìm kiếm để chuẩn seo*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}