/* =========================================
   TỐI ƯU HEADER & MENU (GỌN NHẸ, CHỐNG XUNG ĐỘT)
   ========================================= */

/* 1. ÉP CHIỀU CAO TOÀN BỘ THANH NAV (DESKTOP) */
nav.navbar.fixed-top {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
}

/* Bỏ cái sự kéo dãn vớ vẩn của Bootstrap */
.custom-header-bar, .navbar-collapse, .right-area, .top-action-group {
    height: 100% !important;
}

/* 2. CHỈNH LOGO GỌN LẠI */
.navbar-brand img {
    height: 50px !important;
    width: auto;
}

/* 3. ĐỒNG BỘ SIZE CHỮ: MENU & NÚT SEARCH CÙNG 1 SIZE */
.navbar-nav .nav-link,
.top-action-group .action-box,
.top-action-group .item-3 span {
    font-size: 12px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* 4. CHỈNH KHOẢNG CÁCH CHỮ TRONG MENU DESKTOP */
.navbar-nav .nav-link {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
}

/* 5. CHỈ ÁP DỤNG TRÊN DESKTOP (RÊ CHUỘT HIỆN MENU NGANG) */
@media (min-width: 992px) {
    .navbar-nav .dropdown-menu {
        display: none !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    .navbar-nav .dropdown:hover .dropdown-menu {
        display: flex !important;
    }

    .navbar-nav .dropdown-item {
        font-size: 11px !important;
        white-space: nowrap !important;
    }
}

/* =========================================
   6. RESPONSIVE MOBILE & TABLET (DƯỚI 992px)
   -> TRIỆT TIÊU TOÀN BỘ HIỆU ỨNG HOVER/CLICK NHẢY KHUNG
   ========================================= */
@media (max-width: 991px) {
    nav.navbar.fixed-top {
        height: auto !important;
        max-height: none !important;
    }

    .navbar-nav .nav-link,
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus,
    .navbar-nav .nav-link:active {
        height: auto !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        letter-spacing: normal !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        margin: 0 !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        border-bottom: 1px solid #f1f5f9;
        background: transparent !important;
        background-color: transparent !important;
    }

    .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: none;
    }

    .navbar-nav .dropdown-item,
    .navbar-nav .dropdown-item:hover,
    .navbar-nav .dropdown-item:focus,
    .navbar-nav .dropdown-item:active {
        font-size: 10px !important;
        font-weight: 500 !important;
        transform: none !important;
        transition: none !important;
        background: transparent !important;
    }

    .toggler-icon-box {
        transform: scale(0.8) !important; 
        transform-origin: right center !important; 
    }

    .navbar-toggler, 
    .navbar-toggler:focus, 
    .navbar-toggler:active,
    .navbar-toggler:hover {
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
}  

/* =========================================
   7. TRIỆT TIÊU KHE HỞ TRẮNG GIỮA HEADER VÀ BANNER
   ========================================= */
body {
    padding-top: 80px !important;
}

.carousel, #carouselExampleIndicators, section:first-of-type, .page-title, .inner-banner {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =========================================
   TỐI ƯU CHỮ BANNER HERO (DESKTOP & MOBILE)
   ========================================= */

/* 1. Giao diện Desktop mặc định */
#heroCarousel .carousel-caption h1 {
    font-size: 36px !important;   /* Hạ tiêu đề xuống tí cho đỡ thô */
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

#heroCarousel .carousel-caption p.lead {
    font-size: 16px !important;   /* Ép chữ mô tả xuống đúng 12px theo ý m */
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.85) !important; /* Cho màu trắng dịu lại tí cho sang */
}

/* 2. Khi co màn hình lại (Responsive dưới 768px - Mobile/Tablet) */
@media (max-width: 767px) {
    #heroCarousel .carousel-caption {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #heroCarousel .carousel-caption h1 {
        font-size: 24px !important;   /* Mobile thì tiêu đề thu gọn lại tiếp */
        margin-bottom: 10px !important;
    }

    #heroCarousel .carousel-caption p.lead {
        font-size: 14px !important;   /* Mobile vẫn giữ 12px đọc cho gọn */
        line-height: 1.5 !important;
        margin-bottom: 20px !important; /* Thu hẹp khoảng cách với nút hoặc lề dưới */
    }
}

/* =========================================
   CHỈNH SIZE CHỮ SECTION NGAY DƯỚI BANNER
   ========================================= */

/* 1. Áp dụng trên Desktop */

/* Chỉnh tiêu đề bự (Gồm cả chữ "Intelligent RFID..." và "Explore Our Solutions") */
#heroCarousel + section h3 {
    font-size: 22px !important; /* M muốn to nhỏ bao nhiêu thì sửa số này nhé */
    letter-spacing: 0.5px !important;
}

/* Chỉnh đoạn văn bản mô tả màu xám ở giữa */
#heroCarousel + section .text-secondary p {
    font-size: 14px !important; /* M muốn to nhỏ bao nhiêu thì sửa số này nhé */
    line-height: 1.7 !important;
}


/* 2. Áp dụng khi co màn hình Responsive (Dưới 768px - Mobile/Tablet) */
@media (max-width: 767px) {
    #heroCarousel + section h3 {
        font-size: 18px !important; /* Mobile thì cho tiêu đề nhỏ lại tí cho gọn */
    }
    
    #heroCarousel + section .text-secondary p {
        font-size: 10px !important; /* Mobile chữ mô tả nhỏ lại tí đọc cho vừa mắt */
    }
}

/* =========================================
   CHỈNH SIZE CHỮ CHO 6 Ô NỘI DUNG (HOVER CARD)
   ========================================= */

/* 1. Giao diện Desktop mặc định */

/* Tiêu đề tên sản phẩm (Thẻ h4 gốc của Bootstrap hơi to, hạ xuống cho sang) */
.hover-card h4 {
    font-size: 16px !important;  /* Thay đổi số px tùy ý m muốn nhé */
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

/* Các dòng mô tả tính năng gạch đầu dòng bên trong (Thẻ li) */
.hover-card ul li {
    font-size: 12px !important;  /* Hiện tại đang hơi nhỏ, tầm 13px - 14px là vừa mắt */
    line-height: 1.6 !important;
    color: #555555 !important;    /* Cho màu xám đậm lên tí cho rõ chữ */
}

/* Chữ trên nút bấm "VIEW DETAILS" */
.hover-card .btn {
    font-size: 10px !important;   /* Ép nút nhỏ lại nhìn sẽ tinh tế và giống layout cao cấp hơn */
    padding: 6px 16px !important; /* Tiện tay bo lại khoảng cách đệm trong nút cho cân đối */
}


/* 2. Khi co màn hình Responsive (Dưới 768px - Mobile/Tablet) */
@media (max-width: 767px) {
    /* Cho các ô nội dung bớt đệm lề (padding) lại để có thêm không gian hiển thị chữ */
    .hover-card {
        padding: 20px 15px !important; 
    }
    
    .hover-card h4 {
        font-size: 14px !important;  /* Lên mobile cho tên sản phẩm gọn lại */
    }
    
    .hover-card ul li {
        font-size: 12px !important; /* Chữ mô tả trên mobile tầm này là vừa khít */
    }
}

/* =========================================
   TỐI ƯU CHỮ TỪ KHÚC SOFTWARE ĐẾN HẾT FOOTER
   ========================================= */

/* 1. GIAO DIỆN DESKTOP MẶC ĐỊNH */

/* --- SECTION INTELLECTUAL SOFTWARE --- */
/* Tiêu đề chính "Intelligent Software" */
section.border-top h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
}
/* Dòng chữ phụ "Data automatically captured..." */
section.border-top p.fs-5 {
    font-size: 12px !important;
    font-weight: 500 !important;
}
/* Các dòng gạch đầu dòng tính năng phần mềm */
section.border-top ul.list-unstyled li {
    font-size: 12px !important;
    line-height: 1.8 !important;
}
/* Câu chốt nhấn mạnh "No manual data entry..." */
section.border-top p.fw-bold {
    font-size: 12px !important;
}

/* --- SECTION NEWSLETTER / GET IN TOUCH --- */
.newsletter-section .btn {
    font-size: 12px !important;
    padding: 12px 35px !important;
}
.newsletter-section p {
    font-size: 10px !important;
}

/* --- COOKIE BANNER --- */
#cookieBanner .cookie-text {
    font-size: 12px !important;
}
#cookieBanner #acceptCookie {
    font-size: 12px !important;
    padding: 4px 15px !important;
}

/* --- SITE FOOTER --- */
/* Đoạn giới thiệu ngắn dưới Logo */
.site-footer p.text-white-50 {
    font-size: 10px !important;
    line-height: 1.7 !important;
}
/* Các tiêu đề cột ở footer (Quick Links, Document, Contact Us) */
.site-footer .footer-heading {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-uppercase: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px !important;
}
/* Chữ trong các menu link và thông tin liên hệ (địa chỉ, mail, sđt) */
.site-footer .footer-menu li a,
.site-footer .contact-info li,
.site-footer .contact-info li a {
    font-size: 12px !important;
    line-height: 1.8 !important;
}
/* Dòng chữ bản quyền Copyright dưới cùng */
.site-footer p.mb-0[style*="font-size: 12px"] {
    font-size: 10px !important;
    color: rgba(255, 255, 255, 0.5) !important; /* Hạ tone màu xuống xíu nhìn cho tinh tế */
}


/* =======================================================
   SỬA RIÊNG KHI RESPONSIVE MOBILE - ÉP FOOTER SÁT NHAU
   ======================================================= */
@media (max-width: 767px) {
    
    /* 1. Ép các khối cột (col) sát rạt lại với nhau, bỏ khoảng trống thừa */
    .site-footer .footer-col {
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 2. Định hình lại thanh tiêu đề cho đẹp, sát nhau và dễ bấm */
    .site-footer .footer-heading {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 15px !important;   /* Tạo khoảng đệm vừa phải để ngón tay dễ bấm click */
        padding-bottom: 15px !important;        
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* 3. Khi danh sách ĐANG ĐÓNG (ẩn): Triệt tiêu hoàn toàn margin/padding để không chiếm diện tích */
    .site-footer .footer-menu:not(.show),
    .site-footer .contact-info:not(.show) {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 4. Khi danh sách ĐƯỢC BẤM XỔ RA (.show): Cho giãn cách nhẹ nhàng xuống dưới */
    .site-footer .footer-menu.show,
    .site-footer .contact-info.show {
        margin-top: 10px !important;
        margin-bottom: 20px !important;
        padding-left: 5px !important;
    }

    /* Giữ nguyên size chữ mobile như cũ cho m đọc vừa mắt */
    .site-footer p.text-white-50,
    .site-footer .footer-menu li a,
    .site-footer .contact-info li,
    .site-footer .contact-info li a {
        font-size: 13px !important;
    }
    /* =======================================================
   XÓA 2 ĐƯỜNG KẺ VÀ TẠO KHOẢNG CÁCH THOÁNG CHO ĐÁY FOOTER
   ======================================================= */

    /* 1. Triệt tiêu hoàn toàn các đường gạch viền ở khu vực này */
    .site-footer .row, 
    .site-footer div, 
    .site-footer hr {
        border-top: none !important;
        border-bottom: none !important;
        border-color: transparent !important;
    }

    /* 2. Tạo khoảng cách (Padding/Margin) cho phần Icon mạng xã hội */
    /* Tìm đến phần chứa các icon mạng xã hội để đẩy nó cách xa đoạn trên ra */
    .site-footer .list-inline,
    .site-footer .d-flex { 
        margin-top: 10px !important;    /* Đẩy khoảng cách từ phần thông tin bên trên xuống icon */
        margin-bottom: 10px !important; /* Đẩy khoảng cách từ icon xuống dòng chữ Copyright */
    }

    /* 3. Tạo khoảng cách cho dòng chữ Copyright dưới cùng */
    .site-footer p.mb-0 {
        margin-top: 8px !important;
        padding-bottom: 10px !important; /* Tạo khoảng đệm an toàn với đáy màn hình */
    }
}