/* Impressive numbers styles */
.impressive-numbers-section { background: transparent; }
.impressive-numbers-section .number-card { background: #fff; border-radius: 12px; box-shadow: 0 6px 18px rgba(3,10,26,0.06); }
.impressive-numbers-section .icon-circle {
    width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#fff3f2,#ffe9e9); color: #B62131; margin: 0 auto; box-shadow: 0 6px 18px rgba(182,33,49,0.08);
}
.impressive-numbers-section .counter-number { font-variant-numeric: tabular-nums; }
@media (min-width: 992px) {
    .impressive-numbers-section .number-grid { justify-content: center; }
}
@media (max-width: 575.98px) {
    .impressive-numbers-section .icon-circle { width: 52px; height: 52px; }
    .impressive-numbers-section .counter-number { font-size: 1.5rem; }
}

/* Feature card: larger centered icon and tighter spacing (does not change section title size) */
.feature-card { text-align: center; padding: 1.25rem 1rem; }
.feature-card .feature-icon { margin-bottom: 0.75rem; }
.feature-card .icon-circle {
    width: 86px !important;
    height: 86px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    box-shadow: 0 8px 18px rgba(230, 2, 2, 0.08) !important;
    margin: 0 auto 0.75rem auto !important;
}
.feature-card .icon-circle i { font-size: 30px !important; color: var(--primary-color, #B62131) !important; }
.feature-card h3 { margin-top: 0.4rem; margin-bottom: 0.5rem; }
.feature-card p { margin: 0; color: #56606a; line-height: 1.35; }

@media (max-width: 767.98px) {
    .feature-card .icon-circle { width: 64px !important; height: 64px !important; }
    .feature-card .icon-circle i { font-size: 22px !important; }
    .feature-card { padding: 1rem 0.5rem; }
}

/* Colored backgrounds for Benefits cards (per-item accents) */
.benefits-section .benefit-card.bp-1 {
    background: linear-gradient(180deg, #fff8ec 0%, #fff3e6 100%);
    border-left: 4px solid #ffb74d;
}
.benefits-section .benefit-card.bp-2 {
    background: linear-gradient(180deg, #eefaf6 0%, #e6f9f3 100%);
    border-left: 4px solid #26c6a6;
}
.benefits-section .benefit-card.bp-3 {
    background: linear-gradient(180deg, #eef7ff 0%, #e9f2ff 100%);
    border-left: 4px solid #64b5f6;
}
/* NEW distinct accents for the additional three cards */
.benefits-section .benefit-card.bp-4 {
    background: linear-gradient(180deg, #fff5f8 0%, #fff0f4 100%);
    border-left: 4px solid #ff80ab; /* soft pink */
}
.benefits-section .benefit-card.bp-5 {
    background: linear-gradient(180deg, #f6f3ff 0%, #f2eeff 100%);
    border-left: 4px solid #9b8cff; /* soft purple */
}
.benefits-section .benefit-card.bp-6 {
    background: linear-gradient(180deg, #f0fff9 0%, #e9fff4 100%);
    border-left: 4px solid #4dd0a6; /* soft mint */
}

/* Ensure icon circle contrasts on pastel backgrounds */
.benefits-section .benefit-card .icon-circle { background: rgba(255,255,255,0.95) !important;
    box-shadow: 0 6px 12px rgba(3,10,26,0.06); }

/* Titles remain prominent */
.benefits-section .benefit-title { color: #04233f;
}

/* Mobile: neutral backgrounds to avoid visual clutter in stacked carousel */
@media (max-width: 767px) {
    .benefits-section .benefit-card.bp-1,
    .benefits-section .benefit-card.bp-2,
    .benefits-section .benefit-card.bp-3,
    .benefits-section .benefit-card.bp-4,
    .benefits-section .benefit-card.bp-5,
    .benefits-section .benefit-card.bp-6 {
        background: linear-gradient(180deg,#ffffff,#fbfbfc) !important;
        border-left: 0 !important;
    }
    .benefits-section .benefit-card .icon-circle { background: #007bff !important;
        color: #fff !important; }
}

/* === NEW: Improved mobile icon styling for better visual balance === */
@media (max-width: 767px) {
    /* larger, perfectly round icon with soft shadow and border */
    .benefits-section .benefit-card .icon-circle {
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        /* keep high contrast */
        color: #007bff !important;
        font-size: 22px !important;
        box-shadow: 0 8px 20px rgba(3,10,26,0.12) !important;
        margin: 0 auto 10px auto !important;
        border: 2px solid rgba(3,10,26,0.04) !important;
    }

    /* ensure the icon <i> scales nicely */
    .benefits-section .benefit-card .icon-circle i {
        font-size: 22px !important;
        line-height: 1 !important;
    }

    /* center titles and descriptions for stacked carousel presentation */
    .benefits-section .benefit-card { padding-top: 14px !important;
        padding-bottom: 14px !important; text-align: center !important; }
    .benefits-section .benefit-title { font-size: 1.02rem !important;
        margin-bottom: 6px !important; text-align: center !important; }
    .benefits-section .benefit-card .benefit-desc { font-size: 0.95rem !important;
        color: #5e6867ff !important; text-align: center !important; margin: 0 auto !important;
    }

    /* hide left accent on mobile (keeps cards clean when stacked) */
    .benefits-section .benefit-card { border-left: 0 !important;
    }
}

/* Make featured products row more compact (reduce card height) */
#featured-products-container > * { margin-bottom: 0 !important; } /* remove extra mb-4, use flex gap only */

/* Reduce image area height on desktop/tablet (global default in product.js is 280px) */
@media (min-width: 768px) {
    #featured-products-container .product-image-wrapper { height: 200px !important; }
}
@media (min-width: 1200px) {
    #featured-products-container .product-image-wrapper { height: 220px !important; }
}

/* Tighten inner spacing */
#featured-products-container .modern-card .card-body { padding: 12px !important; }
#featured-products-container .product-title a { font-size: 14px !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; }
#featured-products-container .product-price { margin-bottom: 8px !important; }
#featured-products-container .product-actions .d-grid { gap: 6px !important; }

/* Target common price selectors inside featured products and reduce size */
#featured-products-container .current-price,
#featured-products-container .product-card .current-price,
#featured-products-container .price-current,
#featured-products-container .product-price,
#featured-products-container .price {
  font-size: 0.92rem !important;
  /* nhỏ hơn nhưng vẫn dễ đọc */
  font-weight: 600 !important; /* keep emphasis */
  line-height: 1 !important;
}

/* Make the old/strike-through price noticeably smaller */
#featured-products-container .old-price,
#featured-products-container .price-old,
#featured-products-container .product-card .old-price {
  font-size: 0.78rem !important;
  color: #6c757d !important;
  margin-left: 6px !important;
}

/* Hiệu ứng hover product card để cải thiện UX */
.product-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  cursor: pointer !important;
}

.product-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

.product-img-container {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}

.product-img-container img {
  transition: transform 0.3s ease !important;
}

.product-card:hover .product-img-container img {
  transform: scale(1.05) !important;
}

/* MOBILE: đảm bảo giá khuyến mãi + giá cũ xếp chồng dọc và vẫn dễ đọc */
@media (max-width: 767.98px) {
  /* Target a broad set of price selectors used in different templates */
  #featured-products-container .current-price,
  #featured-products-container .price-current,
  #featured-products-container .product-price .current-price,
  #featured-products-container .product-price,
  #featured-products-container .price,
  #featured-products-container .old-price,
  #featured-products-container .price-old {
    display: inline-block !important;
    white-space: nowrap !important; /* keep single items compact */
    vertical-align: middle !important;
    box-sizing: border-box !important;
  }

  /* Khi card được đánh dấu có hai giá, ép xếp chồng */
  #featured-products-container .product-card.has-two-prices .current-price,
  #featured-products-container .product-card.has-two-prices .price-current,
  #featured-products-container .product-card.has-two-prices .old-price,
  #featured-products-container .product-card.has-two-prices .price-old,
  #featured-products-container .product-card.has-two-prices .product-price {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* khoảng cách trực quan nhỏ và điều chỉnh kích thước để giữ giá xếp chồng gọn gàng */
  #featured-products-container .product-card.has-two-prices .current-price { margin-bottom: 4px !important; font-size: 0.98rem !important; }
  #featured-products-container .product-card.has-two-prices .old-price { color: #6c757d !important; font-size: 0.82rem !important; }

  /* Nếu có .price-group riêng biệt, làm cho nó thành layout cột */
  #featured-products-container .price-group { display: flex !important; flex-direction: column !important; gap: 4px !important; }

    /* Giữ huy hiệu giảm giá overlay trên ảnh ở mobile (không đổi position) */
}

/* Kéo mô tả sát với hình ảnh hơn */
.featured-products .product-card .product-body { padding-top: 0.1rem !important;
}
.featured-products .product-img { margin-bottom: 0 !important; }
.featured-products .product-card .product-title { margin-top: 4px !important;
}

/* Ẩn các dòng meta nhỏ mờ trực tiếp dưới product body (vd: "Mới", "Nổi bật") - giữ product-meta hiển thị */
#featured-products-container .product-card .product-body > .text-muted,
#featured-products-container .product-card .product-body > small,
#featured-products-container .product-card .product-subtitle,
#featured-products-container .product-card .product-location,
#featured-products-container .product-card .product-status {
    display: none !important;
}

/* Đảm bảo product-meta và các phần của nó hiển thị và inline */
#featured-products-container .product-card .product-meta,
#featured-products-container .product-meta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #007bf5ff !important;
    font-size: 0.85rem !important;
}
#featured-products-container .stars { display: inline-flex !important; align-items: center !important; gap: 4px !important; }
#featured-products-container .product-sales { display: inline-flex !important; align-items: center !important; gap: 6px !important; }
#featured-products-container .rating-text { display: inline-block !important; margin-left: 6px !important; }

/* Container -> sử dụng flex để có thể kiểm soát chính xác độ rộng cột */
#featured-products-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important; /* gutter between cards */
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#featured-products-container > * { box-sizing: border-box !important; }

/* Ensure any inner card fills its column */
#featured-products-container .product-card,
#featured-products-container .card { width: 100% !important;
}

/* DESKTOP: 5 items per row (>=1200px) */
@media (min-width: 1200px) {
  /* trừ tổng khoảng cách ngang (4 * 16px = 64px) rồi chia cho 5 */
  #featured-products-container > * {
    flex: 0 0 calc((100% - 64px) / 5) !important;
    max-width: calc((100% - 64px) / 5) !important;
  }
}

/* TABLET / SMALL LAPTOP: 3 items per row */
@media (min-width: 768px) and (max-width: 1199.98px) {
  /* trừ tổng khoảng cách ngang (2 * 16px = 32px) rồi chia cho 3 */
  #featured-products-container > * {
    flex: 0 0 calc((100% - 32px) / 3) !important;
    max-width: calc((100% - 32px) / 3) !important;
  }
}

/* MOBILE: 2 items per row */
@media (max-width: 767.98px) {
  /* trừ khoảng cách đơn (1 * 16px = 16px) rồi chia cho 2 */
  #featured-products-container > * {
    flex: 0 0 calc((100% - 16px) / 2) !important;
    max-width: calc((100% - 16px) / 2) !important;
  }
}

/* Ẩn các class button phổ biến được sử dụng cho hành động chi tiết/overlay trong sản phẩm nổi bật */
#featured-products-container .overlay-btn,
#featured-products-container .product-detail-btn,
#featured-products-container .btn-detail,
#featured-products-container .view-detail,
#featured-products-container .product-card .overlay,
#featured-products-container .product-card .btn-overlay,
#featured-products-container a[data-action="view-detail"] {
  display: none !important;
  visibility: collapse !important;
  pointer-events: none !important;
}
/* Note: keep anchors to product detail visible; only hide explicit overlay/detail buttons */

/* Quy tắc hình ảnh vuông an toàn hơn: chỉ nhắm đến các wrapper hình ảnh sản phẩm rõ ràng */
#featured-products-container .product-img,
#featured-products-container .product-image,
#featured-products-container .product-thumb {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important; /* modern browsers */
}

#featured-products-container .product-img img,
#featured-products-container .product-image img,
#featured-products-container .product-thumb img,
#featured-products-container .card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: static !important;
}

/* Tránh ép buộc absolute positioning hoặc padding dự phòng có thể ẩn hình ảnh khi markup khác nhau */

/* Đảm bảo hình ảnh sản phẩm nổi bật giữ hình vuông trên màn hình nhỏ (dự phòng trực quan) */
@media (max-width: 767.98px) {
  #featured-products-container img {
    object-fit: cover !important;
    width: 100% !important;
    display: block !important;
    height: auto !important; /* JS will set explicit height when needed */
    max-height: none !important;
  }
}

/* Làm cho tiêu đề nhỏ hơn và sử dụng nhiều không gian ngang hơn (hiển thị hai dòng rộng hơn) */
#featured-products-container .product-card .product-body {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

#featured-products-container .product-card .product-title,
#featured-products-container .product-card h3,
#featured-products-container .product-card .title {
    font-size: 0.8rem !important;      /* smaller per request */
    font-weight: 600 !important;
    line-height: 1.22 !important;      /* readable */
    margin: 0.15rem 0 0.75rem 0 !important; /* add clear space before price */
    color: #222 !important;
    /* clamp to 2 lines */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;   /* giữ hai dòng */
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
       white-space: normal !important;     /* allow wrapping */
    overflow-wrap: anywhere !important; /* allow breaking long words */
    word-break: break-word !important;
    padding-left: 0 !important;         /* avoid extra inner padding */
    padding-right: 0 !important;
}

/* Also clamp anchor text itself for templates where anchor holds content */
#featured-products-container .product-card .product-title a,
#featured-products-container .product-card h3 a,
#featured-products-container .product-card .title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
       white-space: normal !important;
}

/* Ensure extra spacing between title and price regardless of template */
#featured-products-container .product-price { margin-top: 0.5rem !important; }

/* Trên màn hình rất nhỏ giảm thêm để hai dòng vừa vặn thoải mái */
@media (max-width: 479.98px) {
  #featured-products-container .product-card .product-title,
  #featured-products-container .product-card h3,
  #featured-products-container .product-card .title {
    font-size: 0.78rem !important;
    line-height: 1.18 !important;
  }
}

/* Reduce large vertical white space site-wide for sections */
/* Shrink Bootstrap padding utilities used for sections */
.py-5 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.py-4 { padding-top: .5rem !important; padding-bottom: .5rem !important; }

/* Target common section classes used in templates to ensure compact layout */
section, .hero-section, .about-section, .partners-section, .benefits-section, .featured-products,
.testimonials, .gallery-section, .news-section, .cta-section, .company-hero, .about-detail,
.culture-section, .commitment-section {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Make section titles more compact */
.section-title { margin-top: .25rem !important; margin-bottom: .5rem !important; }

/* Reduce card and container vertical spacing inside sections */
.white-area, .card, .ratio, .partner-stats, .benefits-list, .benefit-card { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: .5rem !important; padding-bottom: .5rem !important; }

.partner-stats .stat-card { background: transparent;}
.partner-stats .stat-icon {width: 120px;height: 120px; font-size: 2.6rem; display: flex; align-items: center; justify-content: center;}
            .partner-stats .stat-icon i { line-height: 1; }
            .partner-stats .stat-icon i.fa-shield-alt { color: #ffffffff !important; }
            .partner-stats .stat-icon i.fa-couch {color: #ffffffff !important; }
            .partner-stats .stat-icon i.fa-users { color: #ffffffff !important; }
            .partner-stats .stat-number { color: #ffffffff; margin-top: 8px; font-size: 1.05rem; font-weight: 400; }
            @media (max-width: 767.98px) {
                .partner-stats .stat-number { font-size: 1rem; }
                .partner-stats .stat-icon { width: 64px; height: 64px; font-size: 22px; }
            }

/* Small screens: keep compact but slightly more breathing room */
@media (max-width: 576px) {
    .py-5, .py-4, section { padding-top: .6rem !important; padding-bottom: .6rem !important; }
}

.partner-stats .stat-card { background: transparent;}
            .partner-stats .stat-icon {
                width: 120px;
                height: 120px;
                font-size: 2.6rem;
                display: flex;
                align-items: center;
                justify-content: center;
              
            }
            .partner-stats .stat-icon i { line-height: 1; }
            .partner-stats .stat-icon i.fa-shield-alt { color: #ffffffff !important; }
            .partner-stats .stat-icon i.fa-couch {color: #ffffffff !important; }
            .partner-stats .stat-icon i.fa-users { color: #ffffffff !important; }
            .partner-stats .stat-number { color: #ffffffff; margin-top: 8px; font-size: 1.05rem; font-weight: 400; }
            @media (max-width: 767.98px) {
                .partner-stats .stat-number { font-size: 1rem; }
                .partner-stats .stat-icon { width: 64px; height: 64px; font-size: 22px; }
            }
/* ================================
   ENHANCED HERO CAROUSEL IMAGES
   ================================ */

/* Hero Section & Carousel */
.hero-section {
    position: relative;
    overflow: hidden;
    border-radius: 0; /* Remove border radius for full width */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    margin-bottom: 1.5rem;
    margin-left: 0 !important; /* No left margin */
    margin-right: 0 !important; /* No right margin */
    width: 100vw !important; /* Full viewport width */
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important; /* Center full width element */
    margin-right: -50vw !important;
}

.carousel-inner {
    border-radius: 0; /* Remove border radius for full width */
    overflow: hidden;
}

/* Enhanced Hero Images */
.hero-img {
    width: 100% !important; /* Full width */
    height: auto !important; /* Auto height to maintain aspect ratio */
    min-height: 300px !important; /* Minimum height */
    object-fit: contain !important; /* Shows complete image without cropping */
    object-position: center center !important; /* Centers the image */
    display: block !important;
    transition: transform 0.8s ease-in-out !important;
    background: #f8f9fa !important; /* Light background for letterboxing */
}

/* Smooth animation on slide change */
.carousel-item.active .hero-img {
    transform: scale(1.02) !important;
}

/* Enhanced carousel controls */
.carousel-control-prev,
.carousel-control-next {
    width: 50px !important;
    height: 50px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    transition: all 0.3s ease !important;
    z-index: 10 !important;
}

.carousel-control-prev {
    left: 15px !important;
}

.carousel-control-next {
    right: 15px !important;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: white !important;
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px !important;
    height: 20px !important;
    filter: invert(1) !important;
}

/* Enhanced indicators */
.carousel-indicators {
    bottom: 20px !important;
    z-index: 10 !important;
}

.carousel-indicators button {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,0.8) !important;
    background-color: transparent !important;
    transition: all 0.3s ease !important;
    margin: 0 5px !important;
}

.carousel-indicators button.active {
    background-color: white !important;
    transform: scale(1.3) !important;
    box-shadow: 0 0 10px rgba(255,255,255,0.6) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-img {
        height: auto !important; /* Auto height maintains aspect ratio */
        min-height: 250px !important; /* Minimum for small screens */
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        width: 40px !important;
        height: 40px !important;
    }
    
    .carousel-control-prev {
        left: 10px !important;
    }
    
    .carousel-control-next {
        right: 10px !important;
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 16px !important;
        height: 16px !important;
    }
}

@media (max-width: 576px) {
    .hero-img {
        height: auto !important; /* Auto height for natural proportions */
        min-height: 200px !important; /* Minimum height */
    }
    
    .hero-section {
        margin-bottom: 1rem;
        border-radius: 0; /* No border radius on mobile */
    }
    
    .carousel-inner {
        border-radius: 0; /* No border radius on mobile */
    }
}

/* For very large screens, still maintain auto height */
@media (min-width: 1400px) {
    .hero-img {
        height: auto !important; /* Auto height on large screens */
        min-height: 400px !important; /* Minimum for large screens */
    }
}

/* Loading state for images */
.hero-img[src=""] {
    background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
                linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
                linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    animation: loading 1s linear infinite;
}

@keyframes loading {
    0% { background-position: 0 0, 0 10px, 10px -10px, -10px 0px; }
    100% { background-position: 20px 20px, 20px 30px, 30px 10px, 10px 20px; }
}