/* ==== RESET & CẤU TRÚC CHUNG ==== */
html, body {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

body {
    display: flex;
    flex-direction: column;
    padding-top: 60px;
}

main {
    flex: 1;
}

section {
    padding: 10px 15px;
    max-width: 1368px;
    margin: auto;
}

h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #28a745;
}

/* ==== NAVBAR ==== */
.navbar {
    background: #28a745;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    margin: auto;
    padding: 10px 15px; /* SỬA LẠI: Thêm 10px cho trên/dưới */
}

/* === Thêm phần chỉnh logo ảnh + chữ bên cạnh === */
.navbar .logo {
    margin-right: auto; /* Dòng này sẽ đẩy mọi thứ khác sang phải */
    display: flex; /* đổi từ inline-flex thành flex để dễ căn chỉnh */
    align-items: center;
    gap: 8px; /* khoảng cách giữa logo và chữ */
    text-decoration: none;
    /* font-size và color chữ để tách ra trong .logo-text */
    /* bỏ font-size, color ở đây cho sạch */
}

.navbar .logo img {
    height: 50px; /* tăng chiều cao ảnh lên 50px */
    width: auto;
    vertical-align: middle;
}

.navbar .logo-text {
    font-weight: bold;
    color: #FFD700; /* màu vàng chuẩn */
    font-size: clamp(14px, 4vw, 40px); /* responsive font-size */
    line-height: 50px; /* căn chỉnh chiều cao bằng với ảnh logo */
    user-select: none; /* không cho bôi đen chữ khi kéo chuột */
    white-space: nowrap; /* THÊM DÒNG NÀY */
}
@media (max-width: 420px) {
  .navbar .logo-text{
    display: none; /* Ẩn chữ logo để chừa chỗ cho icon & nút 3 gạch */
  }
}
/* === Tiếp tục phần menu hiện tại === */

.navbar .menu {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
}
.navbar .menu li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 0 10px; /* Bỏ padding trên-dưới, chỉ giữ trái-phải */
    border-radius: 5px;
    transition: all 0.3s ease;

    /* --- THÊM CÁC DÒNG NÀY VÀO --- */
    display: flex;           /* Kích hoạt Flexbox */
    align-items: center;     /* Căn chữ vào giữa theo chiều dọc */
    height: 40px;            /* Đặt chiều cao CỐ ĐỊNH cho ô */
}

.navbar .menu li a:hover,
.navbar .menu li a.active {
    background: #ffd700;
    color: #000;
}

/* Dropdown Menu */
.navbar .menu li {
    position: relative;
}

.navbar .menu li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 0;
    margin: 0;
    list-style: none;
    white-space: nowrap;
    width: auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 999;
    border-radius: 10px;     /* NEW */
    overflow: hidden;        /* NEW */
}
/* DESKTOP: ĐẨY DROPDOWN XUỐNG 70PX VÀ TẠO “CẦU” HOVER 70PX ĐỂ KHÔNG TẮT KHI RÊ CHUỘT */
@media (min-width: 1369px){
   /* Đảm bảo căn theo chính <li> của nút SẢN PHẨM */
  .navbar .menu li ul{ 
    display:none; 
    position:absolute; 
    top:calc(100% + 15px); 
    background:#fff; 
    padding:0; 
    margin:0; 
    list-style:none; 
    white-space:nowrap; 
    width:auto; 
    box-shadow:0 2px 5px rgba(0,0,0,0.2); 
    overflow: visible;       /* cho phép ::before vươn ra ngoài làm “cầu” */
    z-index: 1100;           /* đảm bảo nổi trên các lớp khác */ 
} 
.navbar .menu li ul::before { 
    content:""; 
    position:absolute; 
    left:0; 
    right:0; 
    height:15px; 
    top:-15px; 
    background:transparent; 
    pointer-events: auto;    /* nhận hover để menu không tắt */
} 
.navbar .menu li:hover > ul, 
.navbar .menu li > ul:hover{ 
    display:block; } 
}
/* DESKTOP: ĐẨY DROPDOWN XUỐNG 70PX VÀ TẠO “CẦU” HOVER 70PX ĐỂ KHÔNG TẮT KHI RÊ CHUỘT */
.navbar .menu li:hover ul {
    display: block;
}

.navbar .menu li ul li a {
    color: #000;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    padding: 5px 12px;
    text-decoration: none;
    height: auto;
    min-height: 30px;
    line-height: 1.2;
    white-space: nowrap;

    /* hiệu ứng mượt + không làm xô lệch bố cục */
    position: relative;
    transition: transform 140ms ease, background-color 140ms ease, color 140ms ease;
    transform-origin: left center;
    font-weight: 400;        /* NEW: ghi đè khỏi bị bold kế thừa */
}

/* Icon mũi tên trước mỗi mục (đổi ký tự nếu thích: '›', '•', '➜', '▸') */
.navbar .menu li ul li a::before{
    content: '›';
    display: inline-block;
    margin-right: 8px;
    font-size: 14px;
    line-height: 1;
    color: #28a745;        /* xanh chủ đạo của site */
    opacity: .95;
}

/* Hover: phóng chữ nhẹ + trượt 2px, vẫn giữ màu/nền bạn đã set */
.navbar .menu li ul li a:hover,
.navbar .menu li ul li a.active {
    background: #ffd700;
    color: #000;
    transform: translateX(0px) scale(1.0);
    font-weight: 700;        /* NEW */
}
/* ==== HERO ==== */
.hero {
    background: linear-gradient(90deg, #28a745, #ffd700);
    color: #fff;
    padding: 60px 15px;
    text-align: center;
}

.scroll-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background: #ffd700;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    border-radius: 25px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: background 0.3s ease;
}

.scroll-btn:hover {
    background: #ffcc00;
}
/* Căn giữa nút LIÊN HỆ NGAY khi nằm trực tiếp trong <p> */
p > .scroll-btn {
  display: table;      /* co theo nội dung */
  margin: 0 auto;      /* canh giữa ngang */
}
/* ==== PRODUCTS (Optimized) ==== */
.san-pham {
    display: grid;
    /* Mặc định cho màn hình lớn: tự động chia cột, mỗi cột rộng tối thiểu 250px */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin: 0 auto;
    padding: 20px;
    align-items: stretch;  /* THÊM DÒNG NÀY */
    justify-content: start; /* THÊM DÒNG NÀY: Ngăn item duy nhất bị giãn ra */
}
/* Thanh lọc/sắp xếp sản phẩm */
.product-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  margin: 10px 0 6px;
  font-weight:600;
  justify-content: flex-end; /* ĐẨY sang bên phải */
}
.product-toolbar label{ white-space:nowrap; }
.product-toolbar select{
  padding:6px 10px;
  border:1px solid #ccc;
  border-radius:6px;
  font-size:14px;
}

/* Áp dụng cho tablet và mobile (màn hình từ 991px trở xuống) */
@media (max-width: 991px) {
    .san-pham {
        grid-template-columns: repeat(2, 1fr); /* Luôn hiển thị 2 cột */
    }
}

/* Áp dụng cho điện thoại màn hình rất nhỏ (dưới 480px) */
@media (max-width: 480px) {
    .san-pham {
        grid-template-columns: 1fr; /* Quay về 1 cột để nội dung không bị quá chật */
    }
}

.product {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;           /* THÊM */
    flex-direction: column;  /* THÊM */
    height: 100%;            /* THÊM */
}

.product img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.product:hover img {
    transform: scale(1.08);
    opacity: 0.85;
}

.product h3 {
    margin: 10px;
    color: #333;
}

.product p {
    margin: 0 10px 10px;
    color: #666;
    font-size: 0.9em;
}

.product:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ==== BENEFITS ==== */
.benefits {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
}

.benefits li {
    margin-bottom: 8px;
}

/* ==== FORM ==== */
form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

input, textarea, button {
    font-family: Arial, sans-serif;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
}

button {
    background: #28a745;
    color: #fff;
    cursor: pointer;
    border: none;
    transition: background 0.3s ease;
}

button:hover {
    background: #218838;
}

.btn-submit {
    display: block;
    margin: 0 auto;
}

/* ==== FOOTER ==== */
footer {
    background: #28a745;
    color: #fff;
    text-align: center;
    padding: 15px;
}
/* --- Chỉnh style cho footer copyright --- */
#footer-copyright p {
    margin: 0;
    padding: 10px 5px;
    color: #fff; /* phù hợp với nền footer */
    text-align: center;
}

#footer-copyright small {
    font-size: 0.85em;
    color: #d9d9d9; /* màu sáng hơn, nhẹ nhàng */
    display: block;
    margin-top: 4px;
}

/* ==== CALL BUTTON ==== */
.call-btn {
    position: fixed;             /* Cố định vị trí trên màn hình, kể cả khi cuộn trang */
    bottom: 20px;                 /* Cách mép dưới màn hình 20px */
    left: 20px;                   /* Cách mép trái màn hình 20px */
    background: #ffd700;          /* Màu nền vàng (mã hex #ffd700) */
    color: #000;                  /* Màu chữ đen */
    padding: 6px 12px;           /* Khoảng đệm: 12px trên/dưới, 18px trái/phải */
    border-radius: 50px;          /* Bo góc lớn (50px) → tạo hình viên thuốc */
    font-weight: bold;            /* Chữ in đậm */
    text-decoration: none;        /* Xóa gạch chân liên kết */
    display: flex;                 /* Để icon và chữ nằm ngang */
    align-items: center;
    gap: 6px;                      /* Khoảng cách giữa icon và chữ */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Đổ bóng: lệch 0px ngang, 4px dọc, mờ 8px, màu đen trong suốt 20% */
    animation: pulse 1.5s infinite; /* Áp dụng animation tên "pulse", 1.5 giây 1 lần, lặp vô hạn */
}
.call-btn img{
  width: 26px;
  height: 26px;
  flex: 0 0 26px;   /* tránh co giãn khi dùng flex */
}
/* ==== ZALO BUTTON ==== */
.zalo-btn {
    position: fixed;              /* Cố định vị trí trên màn hình */
    bottom: 20px;                  /* Cách mép dưới 20px */
    right: 20px;                    /* Cách mép trái 20px */
    background: #1DA1F2;           /* Màu xanh Zalo */
    color: #fff;                   /* Màu chữ trắng */
    padding: 6px 12px;             /* Khoảng đệm */
    border-radius: 50px;           /* Viên thuốc */
    font-weight: bold;             /* Chữ in đậm */
    text-decoration: none;         /* Không gạch chân */
    display: flex;                 /* Để icon và chữ nằm ngang */
    align-items: center;
    gap: 6px;                      /* Khoảng cách giữa icon và chữ */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Đổ bóng */
    animation: pulse 1.5s infinite; /* Hiệu ứng nhấp nháy */
}
.zalo-btn img{
  width: 26px;
  height: 26px;
  flex: 0 0 26px;   /* tránh co giãn khi dùng flex */
}
/* ==== TÙY CHỈNH CALL BUTTON & ZALO BUTTON ==== */
@media (max-width: 768px) {
  /* Nút Gọi: đã ẩn số, chỉ còn icon */
  .call-btn {
    padding: 10px;
    width: 50px; height: 50px;
    border-radius: 999px;
    justify-content: center;
  }
  .call-btn .call-text { display: none; }
  .call-btn img { width: 26px; height: 26px; }

  /* Nút Zalo: ẩn chữ, chỉ còn icon */
  .zalo-btn {
    padding: 10px;
    width: 50px; height: 50px;
    border-radius: 999px;
    justify-content: center;
  }
  .zalo-btn .zalo-text { display: none; }
  .zalo-btn img { width: 26px; height: 26px; }
}
/* ==== ANIMATION ==== */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ==== SCROLL REVEAL ==== */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ==== RESPONSIVE ==== */
@media (max-width: 1368px) {
    .navbar .menu {
        display: none;
    }
    .navbar .menu.active {
        display: flex;
        justify-content: space-around; /* hoặc space-between */
        flex-wrap: nowrap;              /* không xuống dòng */
        width: 100%;                   /* chiếm hết chiều ngang */
    }
    header h1 {
        font-size: 1.6em;
    }
}

/* ==== CUSTOM SCROLLBAR ==== */
::-webkit-scrollbar {
    width: 6px;
    height: 2px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: gold;
    border-radius: 10px;
}

/* ===== SLOGAN EFFECTS (About Page) : BEGIN ===== */
.slogans {
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
  font-weight: 600;
}

/* Fade-in */
.slogans.fade-in p {
  margin: 6px 0;
  font-size: clamp(14px, 2.6vw, 18px);
  opacity: 0;
  transform: translateY(8px);
  animation: sloganFade 700ms ease forwards;
}
.slogans.fade-in p:nth-child(2) { animation-delay: .12s; }
.slogans.fade-in p:nth-child(3) { animation-delay: .24s; }
@keyframes sloganFade {
  to { opacity: 1; transform: translateY(0); }
}

/* Typewriter */
.slogans.typewriter {
  text-align: center;
  margin-top: 12px;
  min-height: 28px;
  font-weight: 700;
  font-size: clamp(14px, 2.8vw, 18px);
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  border-right: 2px solid currentColor;
  animation: caretBlink 1s step-end infinite;
}
@keyframes caretBlink {
  50% { border-color: transparent; }
}
/* ===== SLOGAN EFFECTS (About Page) : END ===== */

/* Style cho từng thẻ sản phẩm */
.product-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Thêm để căn chỉnh nội dung tốt hơn */
    flex-direction: column; /* Sắp xếp nội dung theo chiều dọc */
    height: 100%;            /* THÊM */
}

.product-card .product-image {
    width: 100%;
    height: 200px;
    object-fit: contain;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.product-card:hover .product-image {
    transform: scale(1.08);
    opacity: 0.85;
}

/* Phần chứa thông tin chữ bên dưới ảnh */
.product-card .product-info {
    padding: 15px;
    flex-grow: 1; /* Giúp phần info này giãn ra để đẩy footer xuống (nếu có) */
}
.product-card h3 {
    margin-top: 0;
    margin-bottom: 0;
    color: #333;
    /* === BỘ CODE GIỚI HẠN 2 DÒNG === */
    line-height: 1.4em; /* Chiều cao của 1 dòng */
    height: 2.8em;      /* Chiều cao tổng = 2 dòng (1.4 x 2) */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-card p {
    margin: 0;
    color: #666;
    font-size: 0.9em;
}

.product-card:hover {
    transform: translateY(-5px); /* Hiệu ứng nhấc lên một chút */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* ==== Cải thiện hiển thị cho ảnh bị lỗi ==== */
.product-card .product-image,
.product-card .product-slideshow {
    position: relative; /* Cần cho việc định vị văn bản thay thế */
    min-height: 200px;  /* Giữ chiều cao cố định ngay cả khi không có ảnh */
    background-color: #f0f0f0; /* Thêm màu nền nhẹ */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style cho văn bản 'alt' của ảnh lỗi */
.product-card .product-image::after,
.product-card .slide::after {
    content: attr(alt); /* Hiển thị nội dung của thuộc tính alt */
    font-size: 13px;
    color: #888;
    text-align: center;
    padding: 10px;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px); /* Hiệu ứng làm mờ nền (tùy chọn) */
}
/* =================================
   ==== SLIDESHOW SẢN PHẨM NỔI BẬT ====
   ================================= */

/* Container chính của slideshow */
.product-slideshow {
    position: relative; /* Nền tảng để định vị các ảnh con bên trong */
    width: 100%;
    height: 200px; /* Giữ chiều cao cố định giống các ảnh sản phẩm khác */
    overflow: hidden; /* Ẩn các phần ảnh bị tràn ra ngoài */
    background-color: #f0f0f0; /* Thêm màu nền nhẹ phòng khi ảnh chưa tải kịp */
}

/* Các ảnh trong slideshow */
.product-slideshow .slide {
    position: absolute; /* Xếp chồng các ảnh lên nhau tại cùng một vị trí */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Giữ đúng tỷ lệ ảnh, không bị méo */
    opacity: 0; /* Mặc định ẩn tất cả các ảnh */
    transition: opacity 0.7s ease-in-out; /* Hiệu ứng mờ ảo mượt mà khi chuyển ảnh */
}

/* Chỉ hiển thị ảnh có class 'active' */
.product-slideshow .slide.active {
    opacity: 1; /* Làm cho ảnh hiện tại có thể nhìn thấy được */
    pointer-events: auto; /* THÊM DÒNG NÀY: Cho phép ảnh đang hiện bắt sự kiện click */
}
/* =================================
   ==== LINK CHO SẢN PHẨM NỔI BẬT ====
   ================================= */
.san-pham > a {
    text-decoration: none; /* Bỏ gạch chân */
    color: inherit;       /* Giữ màu chữ gốc */
    display: block;
}

/* Hiệu ứng hover cho thẻ product khi di chuột vào link cha */
.san-pham > a:hover .product {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* =================================
   ==== PRODUCT CARD PRICE & ACTIONS ====
   ================================= */
.product-card .product-price {
    padding: 10px 15px;
    font-size: 1.2em;
    font-weight: bold;
    border-top: 1px solid #eee;
}

.product-card .product-price .original-price {
    text-decoration: line-through;
    color: #999;
    font-size: 0.8em;
    margin-right: 10px;
}

.product-card .product-price .sale-price {
    color: #28a745;
}

.product-card .product-actions {
    display: flex;
    gap: 10px;
    padding: 0 15px 15px;
}

.product-card .product-actions button {
    flex: 1; /* Chia đều không gian */
    padding: 10px;
    border: 1px solid #28a745;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

.product-card .btn-add-to-cart {
    background-color: #fff;
    color: #28a745;
}

.product-card .btn-add-to-cart:hover {
    background-color: #f0f0f0;
}

.product-card .btn-buy-now {
    background-color: #28a745;
    color: #fff;
}

.product-card .btn-buy-now:hover {
    background-color: #218838;
}
/* =================================
   ==== HEADER ICONS (Simplified) ====
   ================================= */
.navbar .header-icons.mobile-only {
    display: none; /* Mặc định ẩn icon mobile trên màn hình lớn */
}
.navbar .header-icons {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: 20px;
}

.navbar .header-icons a {
    color: white;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.navbar .header-icons a:hover {
    background-color: #ffd700;
}
/* tô vàng khi đang ACTIVE (được chọn/mở) */
.navbar .header-icons a.active{
    background-color: #ffd700;
    color:#000;
}
.navbar .header-icons a img {
    width: 24px;
    height: 24px;
}

.navbar .cart-counter {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ffd700;
    color: #000;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: bold;
    display: none; 
}

.navbar .cart-counter.active {
    display: block; 
}

/* =================================
   ==== RESPONSIVE NAVBAR (Final & Correct Version) ====
   ================================= */

@media (max-width: 1368px) {
    /* Ẩn menu chính và các icon chỉ dành cho desktop */
    .navbar .menu,
    .navbar .header-icons.desktop-only {
        display: none;
    }
    
    /* Hiện các icon chỉ dành cho mobile */
    .navbar .header-icons.mobile-only {
        display: flex;
    }

    /* Sắp xếp bố cục thanh navbar */
.navbar .container {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: nowrap; /* GIỮ 1 HÀNG để nút 3 gạch không bị rớt dòng */
  }
    /* Đẩy toàn bộ cụm icon và nút menu về phía bên phải */
    .logo {
        margin-right: auto; /* QUAN TRỌNG: Chiếm hết không gian thừa, đẩy mọi thứ khác sang phải */
    }
/* 3 cột cho tablet */
@media (max-width: 1368px) {
  .san-pham {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;          /* gọn hơn trên màn nhỏ */
  }
}
/* 2 cột cho mobile (kể cả iPhone 13 Pro 390px) */
@media (max-width: 768px) {
  .san-pham {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;          /* gọn hơn trên màn nhỏ */
    padding-left: 0;  /* THÊM DÒNG NÀY */
    padding-right: 0; /* VÀ DÒNG NÀY */
  }
}
/* Chỉ về 1 cột trên màn rất nhỏ (≤360px) */
@media (max-width: 360px) {
  .san-pham {
    grid-template-columns: 1fr;
  }
}

/* (khuyến nghị) đảm bảo tính toán kích thước ổn định */
*, *::before, *::after { box-sizing: border-box; }

/* (khuyến nghị) nếu chưa có trong <head> của HTML, thêm: 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
*/
}
/* Chỉ áp dụng kiểu này trên màn hình mobile */
@media (max-width: 1368px) {
    /* Đảm bảo thẻ <a> có thể chứa phần tử con được định vị tuyệt đối */
    nav.navbar .menu li a {
    position: relative;
    display: flex;         /* SỬA: Dùng flexbox để căn chỉnh */
    align-items: center;   /* THÊM: Lệnh căn giữa theo chiều dọc */
    padding: 14px 15px;    /* THÊM: Tạo chiều cao cho ô */
    z-index: 1;
    background: transparent;
}
/* Chừa chỗ cho mũi tên ở mục có submenu (chỉ “SẢN PHẨM”) */
nav.navbar ul.menu.active li.mobile-submenu-item > a {
  padding-right: 44px;
}

/* Tạo kiểu và định vị cho biểu tượng mũi tên */
    .submenu-toggle-icon {
        display: inline-block;  /* QUAN TRỌNG: Đảm bảo icon được hiển thị */
        color: #fff;            /* QUAN TRỌNG: Đặt màu trắng cho icon */
        font-size: 12px;        /* Kích thước chữ cho icon */
        position: absolute;
        right: 15px; /* Vị trí cách lề phải 15px */
        top: 50%;
        transform: translateY(-50%);
        font-size: 15px; /* Kích thước mũi tên, bạn có thể điều chỉnh */
        padding: 5px 10px; /* Tăng vùng có thể bấm cho dễ */
        cursor: pointer;
        z-index: 2;           /* Đảm bảo icon luôn nổi lên trên */
        transition: transform 0.3s ease; /* Hiệu ứng xoay mượt mà */
    }

     /* Khi menu được mở (thẻ <li> có class 'active'), xoay mũi tên và đổi màu */
    nav.navbar .menu > li.active .submenu-toggle-icon {
        transform: translateY(-50%) rotate(180deg);
        color: #000; /* Đổi mũi tên thành màu đen */
    }
    }
/* Style mặc định cho nút 3 gạch (bị ẩn trên desktop) */
.menu-toggle {
    display: none;
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
}
.menu-toggle.active {
    background: #FFD700; /* vàng */
    color: #000;         /* icon màu đen để dễ nhìn */
    border-radius: 6px;  /* bo góc cho đẹp */
    padding: 6px 10px;   /* tạo khoảng đệm để thành 1 ô */
}
/* =================================
   ==== RESPONSIVE NAVBAR ====
   ================================= */
@media (max-width: 1368px) {
    /* Hiện nút 3 gạch */
    .menu-toggle {
    display: inline-flex;              /* luôn hiện */
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;         /* kích thước cố định */
    flex-shrink: 0;                    /* không bị co biến mất */
    /* màu bạn đã có: color:#fff; */
  }
    
    /* Style cho menu khi được kích hoạt (hiện ra) */
nav.navbar ul.menu.active {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #28a745;
    position: absolute;
    top: 70px;
    left: 0;
    z-index: 999;

    /* thêm mới ↓ */
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 0;            /* phòng TH có set gap ở nơi khác */
    row-gap: 0;        /* chắc chắn không có khoảng cách dọc */
    box-sizing: border-box;
}

/* 2) Đảm bảo LI không tạo khoảng trống ngoài ý muốn */
nav.navbar ul.menu.active li {
    position: relative;
    border-bottom: 0;
    /* thêm mới ↓ */
    margin: 0;
    padding: 0;
}

/* 3) Căn giữa theo chiều dọc cho chữ trong A và loại bỏ khoảng trống thừa */
nav.navbar ul.menu.active li > a {
    /* đổi từ block -> flex để canh giữa dọc */
    display: flex;
    align-items: center;
    /* giữ cảm giác chạm tay, có thể chỉnh 12–16 tuỳ ý */
    padding: 14px 16px;

    /* đảm bảo không có line-height/margin gây “khe” */
    line-height: 1.2;
    margin: 0;

    /* kẻ vạch phân cách nằm trong A để ô vàng vẫn phủ trọn */
    border-top: 1px solid rgba(255,255,255,.5);

    /* tuỳ chọn: đảm bảo đủ chiều cao chạm ngón tay */
    min-height: 48px;
}
nav.navbar ul.menu.active li:first-child > a { border-top: 0; }

nav.navbar ul.menu.active li.active > a,
nav.navbar ul.menu.active li > a.active {
    background: #ffd700;           /* ô vàng phủ trọn */
    color: #000;
}

    /* Style cho submenu bên trong menu mobile */
    nav.navbar ul.menu.active li ul {
        display: none;
        position: static;
        box-shadow: none;
        background: #218838;
    }

    /* Style cho submenu khi được kích hoạt */
    nav.navbar ul.menu.active li.active > ul {
        display: block;
    }
}
/* ================================================= */
/* === SỬA LỖI XUỐNG DÒNG CỦA MENU TRÊN DESKTOP === */
/* ================================================= */
@media (min-width: 1369px) {

    .navbar .container {
        flex-wrap: nowrap; /* Cấm tuyệt đối các mục bên trong xuống dòng */
    }

    .navbar .logo {
        flex-shrink: 0; /* Không cho phép logo bị co lại */
    }

    .navbar .menu {
        flex-shrink: 0; /* Không cho phép menu bị co lại */
        margin-left: auto;  /* Tự động đẩy menu về phía bên phải, cạnh các icon */
    }
  /* Thêm hiệu ứng đổi màu cho mũi tên khi hover trên desktop */
    .navbar .menu li:hover .submenu-toggle-icon {
        color: #000; /* Đổi thành màu đen */
    }
    .navbar .menu a.active .submenu-toggle-icon { 
    color: #000; 
    }
    /* =========================================================== */
    /* Biến mục "Sản Phẩm" thành flex container để chứa cả link và icon */
    .navbar .menu li.mobile-submenu-item {
        display: flex;
        align-items: center; /* Căn giữa theo chiều dọc */
        gap: 5px;            /* Khoảng cách giữa chữ và icon mũi tên */
    }
   /* Desktop đẩy icon sang bên phải cho icon, icon không dính sát chữ */
  .navbar .menu li.mobile-submenu-item > a{
    position: relative;
    padding-right: 28px;       /* tăng/giảm tuỳ ý: 24–36px */
  }
  .navbar .menu li.mobile-submenu-item > a .submenu-toggle-icon{
    position: absolute;
    right: 10px;               /* chỉnh 6–14px để ưng mắt */
    top: 50%;
    transform: translateY(-50%);
  }

    /* Thiết lập style cho icon mũi tên chỉ trên desktop */
    .navbar .menu .submenu-toggle-icon {
        color: white;       /* Cho icon màu trắng */
        font-size: 12px;
        cursor: pointer;
        line-height: 1;     /* Căn chỉnh lại chiều cao dòng của icon */
    }

}
/* =================================
   ==== BREADCRUMBS ====
   ================================= */
#breadcrumb-container {
    margin-top: 10px; /* THÊM DÒNG NÀY: Đẩy breadcrumb xuống 70px */
    background-color: #f8f9fa; /* Màu nền xám rất nhẹ */
    padding: 10px 15px;
    border-bottom: 1px solid #dee2e6; /* Đường viền mỏng ở dưới */
    font-size: 14px;
    text-align: left; /* Căn trái breadcrumbs */
}

#breadcrumb-container a,
#breadcrumb-container span {
    color: #6c757d; /* Màu chữ xám */
    text-decoration: none;
    margin: 0 5px;
}

#breadcrumb-container a:hover {
    text-decoration: underline; /* Thêm gạch chân khi rê chuột */
    color: #28a745;
}

#breadcrumb-container .current-page {
    color: #343a40; /* Màu chữ đậm hơn cho trang hiện tại */
    font-weight: bold;
}
/* SỬA LỖI CĂN CHỈNH HEADER TRÊN MOBILE */
@media (max-width: 1368px) {
    .navbar .container {
        height: 70px;
    }
}
/* === SEARCH POPOVER (compact + right aligned + 2 columns) === */
#search-popover{
  position: fixed;          /* neo cố định */
  right: 16px;              /* đưa về bên phải */
  top: 70px;                /* dưới navbar một chút */
  width: 320px;             /* giữ nguyên chiều rộng */
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  padding:10px;
  display:none;
  z-index:10000;
  max-height: 260px;        /* GIỚI HẠN CHIỀU CAO */
  overflow-y: auto;         /* dư thì cuộn */
}
#search-popover.open{display:block;}

#search-popover .sp-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
#search-popover .sp-logo{width:20px;height:20px;object-fit:contain;}
#search-popover .sp-input{flex:1;display:flex;align-items:center;border:1px solid #e5e7eb;border-radius:999px;padding:4px 10px;}
#search-popover .sp-input input{width:100%;border:none;outline:none;font-size:12px;color:#111;}
#search-popover .sp-input input::placeholder{color:#9aa0a6;}

#search-popover .sp-suggest{
  list-style:none;margin:6px 0 0 0;padding:0;
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); /* 2 cột */
  gap:6px;
  font-size:12px; /* chữ nhỏ gọn */
}
#search-popover .sp-suggest li a{
  display:block;
  padding:6px 8px;
  border-radius:8px;
  text-decoration:none;
  color:#222;
  border:1px dashed transparent;

  /* Hiệu ứng mượt khi hover */
  transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease;
  transform-origin: center;
  will-change: transform;
}

/* Hover + keyboard focus: phóng to nhẹ và chữ đậm */
#search-popover .sp-suggest li a:hover,
#search-popover .sp-suggest li a:focus-visible{
  background:#f6f7f9;
  border-color:#e5e7eb;
  transform: scale(1.04);
  font-weight: 700;
  outline: none; /* ẩn viền mặc định, đã có nền/border */
}

/* Nhấn giữ (click) hơi “nhún” xuống */
#search-popover .sp-suggest li a:active{
  transform: scale(0.98);
}
/* ===== ORDER MODAL (NEW) ===== */
.order-modal { position: fixed; inset: 0; display: none; z-index: 10000; }
.order-modal.open { display: block; }
.order-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.4); }

.order-dialog {
  position: relative; 
  width: min(980px, 96vw);
  margin: 20px auto;                          /* ↓ thu hẹp phần phía trên */
  max-height: calc(100dvh - 24px);            /* ↓ không vượt quá chiều cao màn hình (dvh tốt cho iOS) */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  overflow: hidden;
  display: flex;                               /* ↓ cho phép thân cuộn bên trong */
  flex-direction: column;
}

.order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:2px 16px;
  background: #28a745;
  color: #fff;
  height: 40px !important;   /* toàn ô cao 40px */
}

.order-header h3 {
  font-size: 16px;
  margin: 0;
  line-height: 1.2;
}
.order-close {
  background: transparent; border: 0; color: #fff; font-size: 20px; cursor: pointer;
}

.order-body {
  display: grid; grid-template-columns: 360px 1fr; gap: 0; padding: 8px 10px;
  overflow: auto;                              /* ↓ phần thân cuộn nếu dài */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;                        /* ↓ chừa đáy để không bị che */
}
/* chặn margin dưới mặc định của dòng thông báo */
.order-form .form-message{
  margin: 8px 0 0 !important; /* giữ margin-top 8px, bỏ margin-bottom */
}
@media (max-width: 768px){
  .order-body { grid-template-columns: 1fr; }
}

.order-product { display:flex; gap:12px; align-items:flex-start; }
.order-product img { width: 140px; height:140px; object-fit:contain; background:#f5f5f5; border-radius:8px; }
.order-prod-info h4 { margin:0 0 8px; }
.order-price { display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.order-price .sale { font-weight:700; color:#28a745; }
.order-price .original { color:#888; text-decoration: line-through; font-size:.9em; }

.qty { display:flex; align-items:center; gap:8px; }
.qty-btn { 
  width:36px; height:36px; 
  border:1px solid #ccc; 
  background:#fff !important;   /* luôn nền trắng mặc định */
  border-radius:6px; 
  cursor:pointer; 
  font-weight:bold; 
  color:#000; 
  transition: background 0.2s ease; 
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* hiệu ứng vàng khi click/touch */
.qty-btn.tapped {
  background:#ffd700 !important;
  border-color:#ccac00;
}

#order-qty { width:64px; text-align:center; }

.order-form .gender { display:flex; gap:16px; margin-bottom:8px; }
.order-form .grid { display:grid; gap:10px; grid-template-columns: 1fr; } /* SỬA Ở ĐÂY */
.order-form .grid textarea { grid-column: 1 / -1; }
/* Cho Email và Địa chỉ chiếm full hàng (Không cần nữa khi đã là 1 cột) */
.order-form .grid input[name="Email"],
.order-form .grid input[name="Địa chỉ"] {
  grid-column: 1 / -1;
}
@media (max-width: 768px){
  .order-form .grid { grid-template-columns: 1fr; }
}

.order-total { text-align:right; margin:8px 0 12px; font-size: 1.1em; }

/* ===== TRANG GIỎ HÀNG (gio-hang.html) ===== */
#cart-container {
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 20px;
}

.cart-item {
    display: grid;
    grid-template-columns: 100px 1fr 120px 120px 40px;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid #eee;
}
.cart-item:last-child {
    border-bottom: none;
}

.cart-item img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 4px;
    background: #f9f9f9;
}

.cart-item-info h4 {
    margin: 0 0 5px 0;
    font-size: 1.1em;
}
.cart-item-info .price {
    margin: 0;
    color: #28a745;
    font-weight: bold;
}

.cart-item-qty {
    display: flex;
    align-items: center;
}
.cart-item-qty input {
    width: 50px;
    text-align: center;
    border-left: none;
    border-right: none;
}
.cart-item-qty .qty-btn {
    width: 35px;
    height: 34px;
    padding: 0;
}

.cart-item-total p {
    margin: 0;
    font-weight: bold;
    text-align: right;
}

.cart-item-remove{
  background:#ff4d4d;
  color:#fff;
  border:0;
  width:30px;
  height:30px;
  border-radius:50%;
  /* Canh giữa icon bằng flex để không phụ thuộc line-height */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;      /* bỏ phụ thuộc line-height = height */
  padding:0;
}
.cart-item-remove:hover {
    background: #cc0000;
}

#cart-summary {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 5px 30px;
    background: #f9f9f9;
    border-radius: 8px;
    box-sizing: border-box; /* đảm bảo không tràn do padding */
}

#cart-summary h3 {
    text-align: center;
    margin: 0 0 8px; /* Thu gọn khoảng cách dưới tiêu đề */
}
.order-form-cart .gender{
    display:flex;
    gap:12px;
    margin: 4px 0 8px; /* Sát tiêu đề hơn */
}
.cart-total {
    text-align: right;
    margin-bottom: 15px;
}
.cart-total h3 {
    margin: 0;
    font-size: 1.5em;
}
.cart-total span {
    color: #28a745;
}

.order-form-cart .grid { display:grid; gap:10px; grid-template-columns: 1fr; } /* thu gọn khoảng cách dọc */

.order-form-cart .grid input,
.order-form-cart .grid textarea {
    width: 100%;
    padding: 8px 10px; /* ô nhập thấp hơn, gọn hơn */
}

/* Kéo “Anh/Chị” sát tiêu đề */
.order-form-cart .gender{
    margin: 0 0 8px;
    display:flex; gap:12px;
}

.order-form-cart .grid input[name="Email"],
.order-form-cart .grid input[name="Địa chỉ"],
.order-form-cart .grid textarea {
  grid-column: 1 / -1;
}

/* Responsive cho giỏ hàng (GIAO DIỆN MỚI) */
@media (max-width: 768px) {
    .cart-item {
        display: grid;
        /* Chỉ định 2 cột: 1 cột 80px cho ảnh, cột còn lại chiếm hết phần thừa */
        grid-template-columns: 80px 1fr;
        gap: 0 15px; /* 0px khoảng cách dọc, 15px khoảng cách ngang */
        align-items: flex-start; /* Căn các mục lên trên cùng */
        padding: 10px;
    }

    /* Ảnh sẽ nằm ở cột 1 và kéo dài hết các dòng */
    .cart-item img {
        grid-column: 1;
        grid-row: 1 / span 4; /* Cho ảnh chiếm 4 dòng ảo */
        width: 80px;
        height: 80px;
        align-self: center; /* Tự căn ảnh vào giữa theo chiều dọc */
    }

    /* Các mục còn lại sẽ tự động xếp vào cột 2 theo thứ tự */
    .cart-item-info,
    .cart-item-qty,
    .cart-item-total,
    .cart-item-remove {
        grid-column: 2; /* Tất cả đều nằm ở cột 2 */
    }
    
    /* Sắp xếp lại các mục bên phải cho đẹp mắt */
    .cart-item-qty {
        margin-top: 8px;
    }
    .cart-item-total {
        margin: 8px 0;
        text-align: left; /* Căn trái cho đồng bộ */
        font-size: 0.9em;
    }
    .cart-item-remove{
    width:120px;
    height:36px;      /* ấn định chiều cao rõ ràng */
    padding:0 12px;   /* chỉ padding ngang để không làm lệch dọc */
    border-radius:5px;
    font-size:0.9em;
    }
}
/* =================================
   ==== NÚT TIẾP TỤC XEM SẢN PHẨM ====
   ================================= */
.btn-continue-shopping {
    display: block;
    text-align: center;
    padding: 10px 15px;
    margin-top: 20px;
    border: 2px solid #28a745;
    color: #28a745;
    background-color: transparent;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-continue-shopping:hover {
    background-color: #28a745;
    color: #fff;
}
/* =================================
   ==== BỐ CỤC 2 CỘT CHO GIỎ HÀNG ====
   ================================= */

/* Chỉ áp dụng cho màn hình lớn (rộng hơn 992px) */
@media (min-width: 992px) {
    .cart-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0px; /* Tăng khoảng cách cho thoáng hơn */
        align-items: flex-start; /* Dùng flex-start để cột không bị kéo dài không cần thiết */
    }

    /* CHỈ CẦN GHIM DUY NHẤT KHỐI NÀY */
    #cart-summary {
        position: sticky;
        /* Vị trí ghim, cách mép trên của màn hình, chừa không gian cho menu */
        top: 80px; 
    }
}
/* === PRODUCT DETAIL === */
.product-detail-layout{
  display:grid;
  grid-template-columns:minmax(0,520px) 1fr; /* ảnh trái 520px, phải linh hoạt */
  gap:24px;
  align-items:start;
  margin-top:8px;
}
.product-detail-gallery .product-slideshow,
.product-detail-gallery .product-image{
  width:100%;
  height:460px;               /* ảnh lớn */
  background:#f5f5f5;
  border-radius:8px;
  object-fit:contain;
}
.pd-title{
  margin:0 0 8px;
  font-size:clamp(20px,2.6vw,28px);
  line-height:1.25;
}
.product-detail-info .product-price {
    padding: 0;
    margin: 8px 0 12px;
    border: 0;
    font-size: 22px;
    font-weight: bold; /* Thêm độ đậm cho giá */
}

.product-detail-info .product-price .original-price {
    margin-right: 8px;
    text-decoration: line-through; /* Thêm gạch ngang */
    color: #999;                  /* Đổi thành màu xám */
    font-size: 0.8em;              /* Cho nhỏ lại một chút */
    font-weight: normal;           /* Bỏ in đậm cho giá gốc */
}

.product-detail-info .product-price .sale-price {
    color: #28a745; /* Đổi giá khuyến mãi thành màu xanh */
}
.pd-actions{
  display:flex;
  gap:10px;
  margin:10px 0 18px;
}
.pd-actions .btn-buy-now{
  background:#28a745; color:#fff; border:1px solid #28a745;
  border-radius:6px; padding:10px 14px; font-weight:700; cursor:pointer;
}
.pd-actions .btn-add-to-cart{
  background:#fff; color:#28a745; border:1px solid #28a745;
  border-radius:6px; padding:10px 14px; font-weight:700; cursor:pointer;
}
@media (max-width: 992px){
  .product-detail-layout{ grid-template-columns:1fr; }
  .product-detail-gallery .product-slideshow,
  .product-detail-gallery .product-image{ height:300px; }
}
/* NGAY DƯỚI BLOCK TRÊN – chỉ áp dụng cho màn ≤420px */
@media (max-width: 420px){
  .pd-purchase-controls{ flex-wrap: wrap; }   /* BẬT LẠI wrap cho mobile */
  .pd-quantity{ flex: 0 0 100%; justify-content: center; }
  .pd-purchase-controls .btn-add-to-cart,
  .pd-purchase-controls .btn-buy-now{
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
}
/* =================================
   ==== PRODUCT DETAIL (LAYOUT MỚI) ====
   ================================= */

/* Meta info (Rating, Sold) */
.pd-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #555;
    flex-wrap: wrap;
}
.pd-meta .rating .stars {
    color: #f5a623;
    letter-spacing: 1px;
}
.pd-meta .sold-count {
    padding-left: 15px;
    border-left: 1px solid #ddd;
}

/* Key Features List */
.pd-key-features {
    list-style-type: none;
    padding: 0;
    margin: 20px 0;
    font-size: 15px;
}
.pd-key-features li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    line-height: 1.5;
}
.pd-key-features li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 0;
    color: #28a745;
    font-weight: bold;
}

/* Purchase Controls (CÂN ĐỐI CHO MOBILE) */
.pd-purchase-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0;
}

.pd-quantity {
    display: flex;
    flex-shrink: 0; /* Không cho phép bộ chọn số lượng bị co lại */
}
.pd-quantity .qty-btn {
    width: 36px; height: 38px; border: 1px solid #ccc; background-color: #f9f9f9;
    font-size: 20px; font-weight: bold; cursor: pointer;
}
.pd-quantity .qty-btn:first-child { border-radius: 5px 0 0 5px; }
.pd-quantity .qty-btn:last-child { border-radius: 0 5px 5px 0; }
.pd-quantity input {
    width: 55px;
    text-align: center;
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
    font-size: 16px;
    -moz-appearance: textfield;
    -webkit-appearance: none;   /* iOS: bỏ style mặc định để canh giữa chuẩn */
    padding: 0;                 /* bỏ padding mặc định gây lệch */

    /* == Mặc định cho MOBILE == */
    height: 38px;               /* = chiều cao nút ± */
    line-height: 38px;          /* chữ nằm đúng giữa */
}

/* == Ghi đè cho DESKTOP (màn hình rộng từ 992px trở lên) == */
@media (min-width: 992px) {
    .pd-quantity input {
        height: 38px;     /* giữ đồng bộ với .qty-btn (38px) */
        line-height: 38px;
    }
}
.pd-quantity input::-webkit-outer-spin-button,
.pd-quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

/* Các nút bấm giờ là con trực tiếp của flex container */
.pd-purchase-controls .btn-add-to-cart,
.pd-purchase-controls .btn-buy-now {
    flex: 1; /* Đây là chìa khóa: tự động chia đều không gian còn lại */
    height: 38px;
    padding: 8px 5px;
    font-size: 17px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid #28a745;
    transition: all 0.2s ease;
    text-align: center;
}

.pd-purchase-controls .btn-add-to-cart {
    background-color: rgba(40, 167, 69, 0.1);
    color: #28a745;
}
.pd-purchase-controls .btn-add-to-cart:hover { background-color: rgba(40, 167, 69, 0.2); }

.pd-purchase-controls .btn-buy-now {
    background-color: #28a745;
    color: #fff;
}
.pd-purchase-controls .btn-buy-now:hover { background-color: #218838; }

/* Info Footer (SKU, Category) */
.pd-info-footer {
    margin-bottom: 20px; /* Đổi sang margin-bottom */
    padding-top: 0; /* Bỏ padding-top */
    border-top: none; /* Bỏ đường viền */
    font-size: 14px;
    color: #666;
}
.pd-info-footer span {
    display: block;
    margin-bottom: 5px;
}
.pd-info-footer a {
    color: #28a745;
    text-decoration: none;
    text-transform: capitalize;
}
.pd-info-footer a:hover {
    text-decoration: underline;
}

/* Mô tả chi tiết */
.product-long-description {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.product-long-description h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #333;
}
/* === SỬA LỖI LỆCH PHẢI (BẮT BUỘC CĂN GIỮA) === */
#product-detail-container {
    display: grid;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* === SỬA LỖI LỆCH PHẢI TRÊN GIAO DIỆN MOBILE === */
@media (max-width: 992px) {
    #product-detail-container {
        /* Bắt buộc khối phải vào giữa trên mobile */
        margin-left: auto;
        margin-right: auto;
        
        /* Đảm bảo không có padding thừa gây lệch */
        padding: 0 15px; 
    }
}
/* CSS CHO DẤU CHẤM VÀ VUỐT SLIDESHOW */
.slideshow-indicators {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}

.slideshow-indicators .indicator {
    width: 8px;
    height: 8px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.slideshow-indicators .indicator.active {
    background-color: #28a745;
}

/* Thêm con trỏ tay để gợi ý có thể vuốt trên mobile */
@media (max-width: 768px) {
    .product-slideshow {
        cursor: grab;
    }
}
/* ============================================= */
/* === CSS CHO TAB (MÔ TẢ & THÔNG SỐ KT) === */
/* ============================================= */

.product-tabs-container {
    margin-top: 40px;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden; /* Đảm bảo nội dung không tràn ra ngoài */
}

.tab-buttons-wrapper {
    display: flex;
    border-bottom: 1px solid #eee;
    background-color: #f9f9f9;
}

.tab-button {
    flex: 1; /* Chia đều không gian cho các nút */
    padding: 15px 20px;
    border: none;
    background-color: transparent;
    font-size: 16px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.tab-button:hover:not(.active) {
    background-color: #e8e8e8;
}

.tab-button.active {
    color: #28a745;
    background-color: #fff;
    border-bottom: 3px solid #28a745; /* Gạch chân màu xanh */
    padding-bottom: 12px; /* Điều chỉnh để gạch chân không bị che */
}

.tab-contents-wrapper {
    padding: 20px;
    background-color: #fff;
}

.tab-content {
    display: none; /* Mặc định ẩn tất cả nội dung tab */
    animation: fadeIn 0.5s ease-in-out;
}

.tab-content.active {
    display: block; /* Chỉ hiển thị nội dung tab active */
}

/* Hiệu ứng mờ dần khi chuyển tab */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Style cho bảng thông số kỹ thuật bên trong tab */
.product-tabs-container table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    table-layout: fixed;        /* cố định cột, tránh tràn */
    word-break: break-word;     /* ngắt từ dài */
}
.product-tabs-container table tr {
    border-bottom: 1px solid #f0f0f0;
}
.product-tabs-container table tr:last-child {
    border-bottom: none;
}
.product-tabs-container table td {
    padding: 12px 0;
}
.product-tabs-container table td:first-child {
    font-weight: bold;
    color: #555;
    width: 20%; /* Điều chỉnh độ rộng cột tên thuộc tính */
}

/* Responsive: Điều chỉnh kích thước chữ trên mobile */
/* <= 430px (mobile nhỏ) */
@media (max-width: 430px) {
    .tab-buttons-wrapper{ display: grid; grid-template-columns: 1fr 1fr; }
    .tab-button { font-size: 14px; padding: 12px 10px; white-space: normal; }
    .tab-contents-wrapper { padding: 15px; }
    .product-tabs-container { margin-top: 16px; }

    .product-tabs-container table {
        font-size: 14px;
        table-layout: fixed;
    }
    .product-tabs-container table td { padding: 10px 0; }
    .product-tabs-container table td:first-child,
    .product-tabs-container table th:first-child { width: 50%; }
    .product-tabs-container table td:last-child,
    .product-tabs-container table th:last-child  { width: 50%; }
}

/* 431px – 768px (điện thoại lớn & tablet) */
@media (min-width: 431px) and (max-width: 991px) {
    .tab-buttons-wrapper{ display: grid; grid-template-columns: 1fr 1fr; }
    .tab-button { font-size: 15px; padding: 12px 12px; white-space: normal; }
    .tab-contents-wrapper { padding: 16px; }
    .product-tabs-container { margin-top: 18px; }

    .product-tabs-container table {
        font-size: 15px;
        table-layout: fixed;
    }
    .product-tabs-container table td { padding: 10px 0; }
    .product-tabs-container table td:first-child,
    .product-tabs-container table th:first-child { width: 30%; }  /* rộng hơn chút cho tablet */
    .product-tabs-container table td:last-child,
    .product-tabs-container table th:last-child  { width: 70%; }
}
/* ============================================= */
/* === CSS HÌNH ẢNH CHO TAB (MÔ TẢ & THÔNG SỐ KT) === */
/* ============================================= */
.product-description img{max-width:100%;height:auto;display:block;margin:12px auto;}

/* ===== SMART vs TRADITIONAL (Homepage) ===== */
.smart-diff { padding: 30px 15px 10px; }
.smart-diff__head h2{
  text-align:center; color:#28a745; margin:0 0 8px;
}
.smart-diff__head .lead{
  max-width: 880px; margin: 0 auto 20px; text-align:center; color:#5f6b6f;
}

/* Khối 2 cột + đường chia giữa */
.smart-diff .compare-grid{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 24px;
  overflow: hidden;
}
.smart-diff .compare-grid::before{
  content:"";
  position:absolute; left:50%; top:32px; bottom:32px;
  width:2px; background: rgba(255,255,255,.6);
  transform: translateX(-50%);
}

/* Panel trái/phải */
.smart-diff .panel{
  padding: 36px 28px 28px;
  min-height: 380px;
}
.smart-diff .panel h3{
  margin:0 0 14px; font-size: 26px; letter-spacing:.3px;
}
.smart-diff .col-left{
  color:#144b2d;
  background:
    linear-gradient(180deg,#f3fff7 0%,#e8f6ee 100%),
    url('assets/img/sections/home-traditional.jpg') left bottom/cover no-repeat;
}
.smart-diff .col-right{
  color:#fff;
  background:
    linear-gradient(180deg,#20a055 0%,#2cbd6e 100%),
    url('assets/img/sections/home-smart.jpg') right bottom/cover no-repeat;
  background-blend-mode: overlay;
}
.smart-diff .col-left h3{ color:#1f9d55; }
.smart-diff .col-right h3{ color:#fff; }

/* Timeline & các nút tròn dọc theo đường giữa */
.smart-diff .timeline{ list-style:none; margin:0; padding:0 34px; display:flex; flex-direction:column; gap:22px; }
.smart-diff .timeline li{ position:relative; line-height:1.65; }

/* Dấu chấm cho cột trái (sát đường giữa) */
.smart-diff .col-left .timeline li::after{
  content:""; position:absolute; top:.55em; right:-18px;
  width:10px; height:10px; border-radius:50%;
  background:#1f9d55; box-shadow:0 0 0 4px #fff;
}
/* Dấu chấm cho cột phải (sát đường giữa) */
.smart-diff .col-right .timeline li::before{
  content:""; position:absolute; top:.55em; left:-18px;
  width:10px; height:10px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 4px rgba(0,0,0,.06);
}

/* Responsive */
@media (max-width: 991px){
  .smart-diff .compare-grid{ grid-template-columns:1fr; }
  .smart-diff .compare-grid::before{ display:none; }
  .smart-diff .col-left .timeline li::after,
  .smart-diff .col-right .timeline li::before{left:0; right:auto;}
  .smart-diff .timeline{ padding-left:22px; padding-right:0; }
  .smart-diff .timeline li{ padding-left:18px; }
}
/*Gửi thành công! Mã đơn*/
.form-message{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 2.2vw, 20px); /* lớn hơn ảnh mới, gần với ảnh cũ */
  line-height: 1.35;                    /* giãn dòng vừa mắt */
  letter-spacing: .2px;                 /* nét cân hơn */
  text-align: center;
  margin: 8px 0 0;                      /* giữ đúng khoảng cách như trước */
  color: inherit;                        /* JS vẫn đổi sang xanh/đỏ được */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* màu xanh mặc định cho case thành công nếu bạn thêm class 'success' */
.form-message.success{ color:#0a751b; }
/* Style gọn cho nhóm thanh toán & QR (thêm .order-form-cart) */ 
.order-form .payment-method,
.order-product .payment-method,
.order-form-cart .payment-method{
  margin:8px 0 6px; display:flex; gap:16px; flex-wrap:wrap; font-weight:600;
}
.order-form .qr-inline,
.order-product .qr-inline,
.order-form-cart .qr-inline{
  margin:6px 0 8px; padding:8px; border:1px dashed #ccc; border-radius:8px; text-align:center;
}
/* Thu nhỏ QR ~240px cho cả ba vị trí (Modal/Chi tiết/Giỏ hàng) */
.order-form .qr-inline img,
.order-product .qr-inline img,
.order-form-cart .qr-inline img{
  max-width:240px; height:auto; display:block; margin:0 auto 6px;
}