/* Reset định dạng gốc */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body {
    background-color: #ffffff;
    overflow-x: hidden; /* Chống tràn màn hình theo chiều ngang */
}

/* ================= HEADER TRÊN (Sử dụng Flexbox thay cho Table) ================= */
.main-header {
    background-color: #ffffff;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
    width: 100%;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    justify-content: space-between; /* Đẩy đều 3 phần ra 2 bên và ở giữa */
    align-items: center; /* Căn giữa tất cả theo chiều dọc */
}

/* Khối tìm kiếm */
.header-search {
    flex: 1;
}

.search-box {
    position: relative;
    width: 100%;
    max-width: 280px;
}

.search-box input {
    width: 100%;
    padding: 8px 15px 8px 35px;
    border: 1px solid #dddddd;
    border-radius: 20px;
    background-color: #f5f5f5;
    outline: none;
    font-size: 13px;
    color: #666;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 13px;
}

/* Khối Logo */
.header-logo {
    flex: 1;
    text-align: center;
}

.header-logo img {
    height: 55px;
    width: auto;
    display: inline-block;
    border: 1px solid #333;
}

/* Khối Bên Phải (Hotline & Cờ) */
.header-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.hotline-block {
    display: flex;
    align-items: center;
    text-align: left;
    margin-right: 20px;
}

.hotline-icon {
    background-color: #e31818;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-align: center;
    line-height: 36px;
    margin-right: 8px;
    font-size: 16px;
}

.hotline-text span {
    display: block;
    font-size: 10px;
    color: #777;
    font-weight: bold;
}

.hotline-text a {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    text-decoration: none;
}

.language-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.flag-link img {
    width: 22px;
    height: auto;
    border: 1px solid #ddd;
    display: block;
}


/* ================= THANH MENU NGANG (MÀU ĐỎ - PC) ================= */
.navbar {
    background-color: #e31818;
    width: 100%;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
}

.menu-toggle {
    display: none; /* Mặc định ẩn nút bấm này trên máy tính */
}

.nav-links {
    list-style: none;
    display: flex; /* Dàn hàng ngang menu chính */
    flex-wrap: wrap;
}

.nav-links > li {
    position: relative;
}

.nav-links > li > a {
    display: block;
    padding: 14px 18px;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.nav-links > li:hover > a, 
.nav-links > li > a.active {
    background-color: #b31212;
}

.nav-links > li > a i {
    font-size: 9px;
    margin-left: 3px;
}


/* ================= DROPDOWN MENU CHÍNH SÁCH (PC) ================= */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 230px;
    background-color: #ffffff;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.15);
    list-style: none;
    padding: 8px 0;
    display: none;
    z-index: 999;
}

.dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    color: #444444;
    font-size: 13px;
    text-decoration: none;
}

.dropdown-menu li a:hover {
    background-color: #f8f9fa;
    color: #e31818;
}


/* ================= MEGA MENU SẢN PHẨM (PC) ================= */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 980px;
    background-color: #ffffff;
    box-shadow: 0px 8px 20px rgba(0,0,0,0.15);
    padding: 20px;
    display: none;
    z-index: 999;
}

.mega-container {
    display: flex; /* Đổi sang dùng flexbox */
    width: 100%;
}

.mega-col {
    flex: 1;
    padding: 0 10px;
}

.mega-col h3 {
    font-size: 12px;
    color: #333;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 6px;
    margin-bottom: 10px;
    font-weight: bold;
}

.mega-col ul {
    list-style: none;
}

.mega-col ul li a {
    display: block;
    font-size: 12px;
    color: #666;
    text-decoration: none;
    padding: 5px 0;
}

.mega-col ul li a:hover {
    color: #e31818;
}

.col-featured {
    border-right: 1px solid #eeeeee;
    text-align: center;
}

.featured-product img {
    max-width: 100%;
    height: auto;
}

.featured-product h4 {
    font-size: 12px;
    margin-top: 5px;
    color: #333;
}

/* ================= KHỐI SLIDER BANNER HIỆN ĐẠI ================= */
.slider-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background-color: #f5f5f5;
}

.slider-wrapper {
    position: relative;
    width: 100%;
    /* Tỷ lệ khung hình lý tưởng trên màn hình PC rộng */
    padding-bottom: 31.25%; /* Tương đương kích thước 1920x600 */
    height: 0;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
    z-index: 1;
}

.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo hình ảnh phủ kín không bị bóp méo */
    display: block;
}

/* Nút bấm Next/Prev */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s, opacity 0.3s;
}

.slider-btn:hover {
    background: rgba(227, 24, 24, 0.8); /* Chuyển màu đỏ chủ đạo khi hover */
}

.prev-btn { left: 20px; }
.next-btn { right: 20px; }

/* Các chấm tròn chuyển trang (Dots navigation) */
.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.3s;
}

.dot.active {
    background: #e31818; /* Màu đỏ nổi bật cho trang hiện tại */
    width: 24px; /* Kéo dài nhẹ tạo hiệu ứng hiện đại */
    border-radius: 10px;
}

/* Tiêu đề mục bên dưới giống mẫu */
.section-title {
    text-align: center;
    font-size: 24px;
    color: #333;
    font-weight: bold;
    margin: 40px 0 20px 0;
    letter-spacing: 0.5px;
}

/* --- TƯƠNG THÍCH RESPONSIVE TRÊN DI ĐỘNG --- */
@media (max-width: 768px) {
    .slider-wrapper {
        padding-bottom: 45%; /* Tăng độ cao tỉ lệ trên Mobile để dễ nhìn ảnh */
    }
    
    .slider-btn {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    
    .prev-btn { left: 10px; }
    .next-btn { right: 10px; }
    
    .slider-dots {
        bottom: 10px;
    }
    
    .section-title {
        font-size: 18px;
        margin: 25px 0 15px 0;
    }
}

/* ================= DANH MỤC SẢN PHẨM CAROUSEL - GRID CHUẨN 2 DÒNG X 7 CỘT ================= */
.product-categories-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 15px;
    position: relative;
}

.section-title {
    text-align: center;
    font-size: 24px;
    color: #333;
    font-weight: bold;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

.categories-carousel-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

/* Áp dụng CSS Grid tự động tạo luồng dữ liệu tràn hàng ngang */
.categories-track.grid-rows {
    display: grid;
    /* Khóa cố định cấu trúc chỉ có đúng 2 dòng */
    grid-template-rows: repeat(2, auto);
    /* Luồng hiển thị xếp theo cột từ trái qua phải, tự động thêm cột mới nếu tràn dữ liệu */
    grid-auto-flow: column;
    /* Ép buộc chiều rộng mỗi cột dọc chiếm chính xác 1/7 (khoảng 14.28%) tổng không gian PC */
    grid-auto-columns: calc((100% - (15px * 6)) / 7);
    
    gap: 20px 15px; /* 20px khoảng cách dòng trên-dưới, 15px giữa các cột trái-phải */
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 0;
    -webkit-overflow-scrolling: touch; /* Vuốt mượt quán tính trên màn hình cảm ứng */
}

/* Ẩn thanh cuộn mặc định của hệ thống */
.categories-track.grid-rows::-webkit-scrollbar {
    display: none;
}
.categories-track.grid-rows {
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
}

/* Định dạng từng ô danh mục */
.category-item {
    width: 100%; /* Kích thước ăn theo grid-auto-columns phía trên */
    text-align: center;
    user-select: none;
}

/* Khung ảnh vuông bo góc viền hồng nhạt */
.category-box {
    width: 100%;
    aspect-ratio: 1 / 1; 
    border: 1px solid #ffdcd8;
    border-radius: 6px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.category-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(227, 24, 24, 0.15);
    border-color: #e31818;
}

.category-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Chữ tên danh mục */
.category-name {
    margin-top: 8px;
    font-size: 13px;
    color: #333333;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nút bấm tròn Trái / Phải định vị chuẩn giữa 2 hàng */
.nav-carousel-btn {
    position: absolute;
    top: calc(50% - 12px);
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #eee;
    color: #888;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: all 0.2s ease;
}

.nav-carousel-btn:hover {
    background: #e31818;
    color: #ffffff;
    border-color: #e31818;
}

.prev-cat { left: -20px; }
.next-cat { right: -20px; }

/* ================= RESPONSIVE ĐỘC LẬP THEO MÀN HÌNH TỪNG THIẾT BỊ ================= */
@media (max-width: 1024px) {
    .categories-track.grid-rows {
        /* Trên màn hình Máy tính bảng (Tablet): Hiển thị đồng thời 5 cột (Tổng cộng 10 ô) */
        grid-auto-columns: calc((100% - (12px * 4)) / 5);
        gap: 15px 12px;
    }
}

@media (max-width: 768px) {
    .categories-track.grid-rows {
        /* Trên màn hình Điện thoại nhỏ: Hiển thị đồng thời 3 cột (Tổng cộng 6 ô) */
        grid-auto-columns: calc((100% - (10px * 2)) / 3);
        gap: 12px 10px;
    }
    .category-name {
        font-size: 12px;
    }
    /* Ẩn nút bấm trên Mobile để nhường không gian vuốt lướt bằng tay rộng rãi */
    .nav-carousel-btn {
        display: none; 
    }
}

/* ================= KHỐI GIỚI THIỆU RECOLOR ================= */
.why-choose-recolor {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Sử dụng Grid chia 3 cột chính xác theo tỷ lệ trên PC */
.recolor-grid-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr; /* Cột giữa rộng hơn 2 cột bên một chút */
    gap: 20px;
    align-items: stretch; /* Đảm bảo chiều cao 3 cột luôn bằng nhau */
}

/* Các cột bên trái và bên phải chứa 2 hàng dọc */
.recolor-side-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Định dạng từng ô thẻ hình ảnh + text bên dưới */
.recolor-card {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.recolor-card .card-image {
    width: 100%;
    aspect-ratio: 4 / 3; /* Giữ tỉ lệ ảnh chuẩn chữ nhật nằm ngang */
    overflow: hidden;
    border-radius: 8px; /* Bo góc ảnh nhẹ theo mẫu */
}

.recolor-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ảnh phủ đều, không bị méo */
    transition: transform 0.3s ease;
}

/* Hiệu ứng phóng to nhẹ khi di chuột vào ảnh */
.recolor-card:hover .card-image img {
    transform: scale(1.05);
}

/* Tiêu đề chữ màu đen in hoa nhỏ nằm dưới mỗi ảnh */
.card-title {
    margin-top: 10px;
    font-size: 13px;
    color: #333333;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Ô NỘI DUNG CHÍNH GIỮA MÀU XÁM */
.recolor-center-box {
    background-color: #f5f5f5; /* Màu nền xám nhạt */
    border-radius: 12px; /* Bo góc nhiều hơn */
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Căn giữa nội dung theo chiều dọc */
    align-items: center;    /* Căn giữa nội dung theo chiều ngang */
    text-align: center;
}

.center-heading {
    font-size: 24px;
    color: #222222;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 20px;
}

.center-desc {
    font-size: 14px;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Nút bấm Xem Ngay màu đỏ bo góc viên thuốc tròn */
.btn-readmore {
    display: inline-block;
    background-color: #e31818; /* Màu đỏ thương hiệu */
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 40px;
    border-radius: 25px;
    box-shadow: 0 4px 10px rgba(227, 24, 24, 0.2);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-readmore:hover {
    background-color: #c21212;
    transform: translateY(-2px);
}

/* ================= ĐÁP ỨNG RESPONSIVE MỌI MÀN HÌNH ================= */

/* 1. Màn hình Tablet (Dưới 1024px): Đổi từ 3 cột sang 2 cột */
@media (max-width: 1024px) {
    .recolor-grid-container {
        grid-template-columns: 1fr 1fr; /* Chia làm 2 cột cân xứng */
    }
    /* Đẩy khối chữ chính giữa chiếm trọn độ rộng hàng đầu tiên */
    .recolor-center-box {
        grid-column: 1 / span 2; 
        order: -1; /* Đưa hộp chữ lên trên cùng trước các khối ảnh */
        padding: 30px;
    }
}

/* 2. Màn hình Mobile (Dưới 600px): Dồn tất cả thành 1 cột dọc thẳng đứng */
@media (max-width: 600px) {
    .recolor-grid-container {
        grid-template-columns: 1fr; /* Chỉ còn 1 cột duy nhất */
        gap: 25px;
    }
    .recolor-center-box {
        grid-column: auto;
        padding: 25px 20px;
    }
    .center-heading {
        font-size: 20px;
    }
    .center-desc {
        font-size: 13.5px;
    }
    .recolor-card .card-image {
        aspect-ratio: 16 / 9; /* Trên mobile đổi sang dạng ngang rộng nhìn ảnh sẽ thoáng hơn */
    }
}

/* ================= CSS CHUẨN CHO FOOTER RECOLOR ================= */
.main-footer {
    background-color: #1a1a1a; /* Màu nền xám đen tối tạo độ sâu sang trọng */
    color: #cccccc;
    padding: 60px 0 0 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-top: 4px solid #e31818; /* Đường chỉ đỏ viền trên cùng đồng bộ với menu */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.2fr; /* Chia tỉ lệ 4 cột */
    gap: 40px;
}

/* Định dạng các thành phần bên trong từng cột */
.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-logo img {
    max-height: 55px;
    margin-bottom: 15px;
    filter: drop-shadow(0px 2px 4px rgba(255,255,255,0.1));
}

.company-slogan {
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #aaa;
}

/* Danh sách thông tin liên hệ */
.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.contact-list li i {
    color: #e31818; /* Biểu tượng màu đỏ thương hiệu */
    font-size: 15px;
    margin-top: 3px;
    width: 15px;
    text-align: center;
}

.highlight-text {
    color: #e31818;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
}

/* Tiêu đề của các cột */
.footer-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 8px;
    letter-spacing: 0.5px;
}

/* Đường gạch chân trang trí màu đỏ dưới tiêu đề cột */
.footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 45px;
    height: 2px;
    background-color: #e31818;
}

.m-t-20 { margin-top: 25px; }

/* Các đường link danh mục và chính sách */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links li a {
    color: #cccccc;
    text-decoration: none;
    font-size: 13.5px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-links li a i {
    font-size: 10px;
    color: #666;
    transition: transform 0.2s ease;
}

/* Hiệu ứng Hover đổi màu đỏ chữ và đẩy icon nhẹ sang phải */
.footer-links li a:hover {
    color: #e31818;
    padding-left: 5px;
}

.footer-links li a:hover i {
    color: #e31818;
    transform: translateX(3px);
}

/* Khung hiển thị Map thu nhỏ */
.footer-map {
    width: 100%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Các nút Mạng xã hội */
.footer-socials {
    display: flex;
    gap: 10px;
}

.social-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #2a2a2a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

.social-icon.zl {
    font-size: 11px;
    font-weight: bold;
}

.social-icon:hover {
    transform: translateY(-3px);
}
.social-icon.fb:hover { background-color: #3b5998; }
.social-icon.yt:hover { background-color: #ff0000; }
.social-icon.zl:hover { background-color: #0068ff; }

/* THANH BOTTOM BAR BẢN QUYỀN */
.footer-bottom {
    background-color: #111111;
    padding: 20px 0;
    margin-top: 50px;
    border-top: 1px solid #252525;
}

.footer-bottom-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #777777;
}

.footer-payment-icons {
    display: flex;
    gap: 15px;
    font-size: 18px;
    color: #444444;
}

/* ================= TOÀN DIỆN RESPONSIVE CHO MỌI THIẾT BỊ ================= */

/* 1. Màn hình Tablet (Dưới 1024px) -> Chuyển thành 2 cột x 2 hàng */
@media (max-width: 1024px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 40px 30px;
    }
    .footer-bottom-content {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* 2. Màn hình Điện thoại (Dưới 600px) -> Duỗi thẳng thành 1 cột dọc duy nhất */
@media (max-width: 600px) {
    .main-footer {
        padding: 40px 0 0 0;
    }
    .footer-container {
        grid-template-columns: 1fr; /* 1 cột */
        gap: 30px;
    }
    .footer-title {
        margin-bottom: 15px;
    }
    .footer-bottom {
        margin-top: 35px;
    }
}

/* ================= BANNER TABS STYLE ================= */
.banner-tabs-section {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.banner-tabs-container {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

/* KHỐI TAB BÊN TRÁI (Chia 3 cột x 4 dòng) */
.banner-tabs-list {
    flex: 0 0 45%; /* Chiếm 45% tổng chiều rộng màn hình PC */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 cột bằng nhau */
    gap: 12px 15px; /* Khoảng cách hàng và cột */
}

.tab-item {
    background-color: #f2f2f2; /* Màu nền xám nhạt mặc định */
    color: #333333;
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 15px 12px;
    border-radius: 2px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

/* Định dạng đặc biệt cho các tab chữ in hoa (Dòng đầu tiên) */
.banner-tabs-list .tab-item:nth-child(-n+3) {
    font-size: 13px;
    font-weight: 700;
}

.tab-item:hover {
    background-color: #e8e8e8;
    color: #000000;
}

/* Trạng thái Tab đang được chọn (Active) -> Đổi sang đỏ tươi thương hiệu */
.tab-item.active {
    background-color: #e31818; 
    color: #ffffff;
}

/* KHỐI BANNER HIỂN THỊ BÊN PHẢI */
.banner-display-wrapper {
    flex: 0 0 calc(55% - 20px); /* Chiếm 55% còn lại */
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.banner-content {
    display: none; /* Ẩn toàn bộ mặc định */
    width: 100%;
    height: 100%;
}

.banner-content.active {
    display: block; /* Chỉ hiển thị banner của tab đang active */
}

.banner-inner-bg {
    background-color: #f0f2f1; /* Nền xám xi măng nhạt của khung ảnh */
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    box-sizing: border-box;
    min-height: 250px;
}

/* Phần chữ và thương hiệu trong banner */
.banner-text {
    position: absolute;
    top: 25px;
    left: 40px;
    z-index: 2;
}

.banner-prod-title {
    font-family: 'Georgia', serif;
    font-size: 36px;
    color: #d1231a; /* Màu đỏ đậm nét nghệ thuật */
    margin: 0 0 10px 0;
    font-style: italic;
    font-weight: 400;
}

/* Chữ chỉ mục đỏ chấm tròn */
.banner-text::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 5px;
    width: 6px;
    height: 6px;
    background-color: #e31818;
    border-radius: 50%;
}

.banner-brand-badge {
    position: absolute;
    top: 5px;
    right: -420px; /* Định vị góc phải trên dựa theo khung */
    font-family: 'Brush Script MT', cursive, sans-serif;
    font-size: 32px;
    color: #e31818;
}

/* Khung ảnh mockup sản phẩm */
.banner-image {
    position: absolute;
    right: 20px;
    bottom: 35px;
    width: 80%;
    height: 75%;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.banner-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Tạo vạt chéo màu đỏ thương hiệu cắt góc đáy phẳng */
.banner-diagonal-decor {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 45px;
    background-color: #e31818;
    clip-path: polygon(0 60%, 40% 15%, 100% 75%, 100% 100%, 0 100%);
    z-index: 1;
}

/* ================= ĐÁP ỨNG RESPONSIVE TỰ ĐỘNG ================= */

/* 1. Màn hình máy tính nhỏ và Tablet lớn */
@media (max-width: 1024px) {
    .banner-tabs-container {
        flex-direction: column; /* Chuyển từ hàng ngang thành xếp chồng trên-dưới */
    }
    .banner-tabs-list {
        flex: 1 1 100%;
    }
    .banner-display-wrapper {
        flex: 1 1 100%;
        margin-top: 10px;
    }
    .banner-inner-bg {
        min-height: 300px;
    }
}

/* 2. Màn hình điện thoại di động */
@media (max-width: 650px) {
    .banner-tabs-list {
        grid-template-columns: repeat(2, 1fr); /* Thu về 2 cột để chữ không bị nén quá bé */
        gap: 8px 10px;
    }
    .tab-item {
        padding: 12px 10px;
        font-size: 12.5px;
    }
    .banner-prod-title {
        font-size: 28px;
    }
    .banner-brand-badge {
        display: none; /* Ẩn nhãn phụ trên mobile tránh đè chữ */
    }
    .banner-inner-bg {
        min-height: 200px;
        padding: 15px;
    }
    .banner-text {
        left: 20px;
        top: 15px;
    }
}

/* ================= KHỐI GRID DANH SÁCH SẢN PHẨM ================= */
.product-grid-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Cấu trúc Grid chia đều 5 cột trên một hàng màn hình PC lớn */
.products-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    gap: 25px 15px; /* 25px khoảng cách hàng dọc, 15px khoảng cách cột ngang */
}

/* Định dạng từng ô card sản phẩm */
.product-card {
    background-color: #ffffff;
    border: 1px solid #f1f1f1;
    padding: 12px;
    border-radius: 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border-color: #e31818;
}

/* Vùng chứa ảnh sản phẩm */
.product-img-box {
    width: 100%;
    aspect-ratio: 1 / 1; /* Khóa ảnh luôn vuông tỉ lệ 1:1 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #fcfcfc;
    margin-bottom: 12px;
}

.product-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Giữ nguyên phom hộp không bị méo, móp */
    transition: transform 0.3s ease;
}

.product-card:hover .product-img-box img {
    transform: scale(1.04);
}

/* Tên tiêu đề sản phẩm */
.product-title {
    font-size: 13px;
    color: #444444;
    font-weight: 500;
    line-height: 1.5;
    margin: 0 0 10px 0;
    height: 38px; /* Giới hạn chiều cao hiển thị tối đa 2 dòng chữ */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Giá tiền sản phẩm màu đỏ nổi bật */
.product-price {
    font-size: 14px;
    color: #e31818;
    font-weight: 700;
    margin: 0;
}

/* Chữ Liên hệ (Màu xám/cam nhẹ tuỳ chỉnh nếu không có giá) */
.product-price-contact {
    font-size: 14px;
    color: #888888;
    font-weight: 600;
    margin: 0;
}

/* VÙNG CHỨA NÚT XEM THÊM CHÍNH GIỮA ĐÁY */
.load-more-wrapper {
    text-align: center;
    margin-top: 40px;
}

.btn-primary-red {
    background-color: #e31818;
    color: #ffffff;
    border: none;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 45px;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(227, 24, 24, 0.15);
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-primary-red:hover {
    background-color: #c91212;
    transform: translateY(-1px);
}

.btn-primary-red:active {
    transform: translateY(1px);
}

/* ================= ĐÁP ỨNG RESPONSIVE MƯỢT MÀ ================= */

/* 1. Màn hình Tablet (Dưới 1024px) -> Tự động chuyển thành 3 sản phẩm trên 1 hàng */
@media (max-width: 1024px) {
    .products-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 12px;
    }
}

/* 2. Màn hình Mobile (Dưới 650px) -> Tự động chuyển thành 2 sản phẩm trên 1 hàng */
@media (max-width: 650px) {
    .products-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px 10px;
    }
    .product-card {
        padding: 8px;
    }
    .product-title {
        font-size: 12px;
        height: 36px;
    }
    .product-price, .product-price-contact {
        font-size: 13px;
    }
    .btn-primary-red {
        padding: 9px 35px;
        font-size: 13px;
    }
}

/* ================= CSS KHỐI QUY TRÌNH RECOLOR ================= */
.recolor-process-section {
    background-color: #e31818; /* Màu nền đỏ tươi phủ trọn chiều rộng */
    color: #ffffff;
    padding: 50px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 100%;
}

.process-wrapper {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 15px;
    text-align: center;
}

/* Tiêu đề in hoa chữ trắng nằm giữa */
.process-main-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 45px 0;
    letter-spacing: 0.5px;
}

/* Khung Flexbox chứa chuỗi quy trình nằm ngang */
.process-timeline-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* Cấu trúc từng cột bước công việc */
.process-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 170px;
}

/* Vùng chứa Icon */
.step-icon-box {
    font-size: 42px; /* Kích thước icon lớn tương tự ảnh gốc */
    margin-bottom: 20px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Nội dung chữ mô tả bên dưới */
.step-text {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
    text-transform: uppercase;
    word-wrap: break-word;
}

/* Biểu tượng mũi tên nối giữa các bước */
.process-arrow {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 50px; /* Căn lề đẩy mũi tên cao bằng tầm với của các ô Icon */
    transform: rotate(0deg);
}

/* ================= ĐÁP ỨNG RESPONSIVE TỰ ĐỘNG ================= */

/* 1. Trên màn hình máy tính nhỏ & Máy tính bảng (Dưới 1024px) */
@media (max-width: 1024px) {
    .process-main-title {
        font-size: 22px;
        margin-bottom: 30px;
    }
    .process-timeline-container {
        flex-wrap: wrap; /* Cho phép các bước tự động rớt dòng khi thiếu không gian */
        justify-content: center;
        gap: 30px 15px;
    }
    .process-step {
        flex: 0 0 28%; /* Chia làm bố cục dạng lưới 3 cột trên 1 hàng */
        max-width: none;
    }
    .process-arrow {
        display: none; /* Ẩn các mũi tên nối ngang để giao diện lưới không bị loạn cấu trúc */
    }
}

/* 2. Trên màn hình điện thoại di động (Dưới 600px) */
@media (max-width: 600px) {
    .recolor-process-section {
        padding: 45px 0;
    }
    .process-main-title {
        font-size: 18px;
        line-height: 1.4;
        padding: 0 10px;
    }
    .process-timeline-container {
        grid-template-columns: 1fr 1fr; /* Chuyển thành ma trận 2 cột dọc cân đối dễ nhìn */
        display: grid;
        gap: 25px 10px;
    }
    .process-step {
        flex: none;
        max-width: 100%;
        padding: 0 5px;
    }
    .step-icon-box {
        font-size: 36px;
        margin-bottom: 12px;
    }
    .step-text {
        font-size: 11.5px;
    }
}

/* ================= CSS KHỐI ĐỐI TÁC / KHÁCH HÀNG ================= */
.recolor-partners-section {
    background-color: #f5f5f5; /* Nền xám nhạt bao phủ toàn bộ vùng như ảnh mẫu */
    padding: 40px 0 50px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 100%;
}

.partners-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Phần chữ tiêu đề căn giữa */
.partners-header {
    text-align: center;
    margin-bottom: 30px;
}

.partners-title {
    font-size: 24px;
    color: #333333;
    font-weight: 700;
    margin: 0 0 8px 0;
    letter-spacing: 0.5px;
}

.partners-subtitle {
    font-size: 13px;
    color: #777777;
    margin: 0;
}

/* Khung lưới Grid chia 6 cột đều nhau trên PC */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px; /* Khoảng cách giữa các ô logo */
}

/* Định dạng từng ô chứa logo thương hiệu */
.partner-item {
    background-color: #ffffff; /* Nền trắng cho từng ô */
    border-radius: 4px;
    aspect-ratio: 4 / 3; /* Tỉ lệ ô hình chữ nhật nằm ngang giống thực tế */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: all 0.25s ease;
}

/* Hiệu ứng nổi nhẹ khi rê chuột vào logo */
.partner-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Hình ảnh logo bên trong */
.partner-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Đảm bảo logo không bị bóp méo, giữ nguyên tỉ lệ gốc */
}

/* ================= ĐÁP ỨNG RESPONSIVE TỰ ĐỘNG ================= */

/* 1. Màn hình Tablet (Dưới 1024px): Thu về dạng 3 cột x 4 hàng */
@media (max-width: 1024px) {
    .partners-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .partners-title {
        font-size: 21px;
    }
}

/* 2. Màn hình Mobile (Dưới 600px): Thu về dạng 2 cột x 6 hàng để vừa vặn màn hình dọc */
@media (max-width: 600px) {
    .recolor-partners-section {
        padding: 30px 0 40px 0;
    }
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .partners-title {
        font-size: 19px;
    }
    .partners-header {
        margin-bottom: 20px;
    }
}

/* ================= CSS SLIDER TIN TỨC RECOLOR ================= */
/* ================= KHỞI TẠO CHUẨN TRÁNH VỠ KHUNG ================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.recolor-news-section {
    max-width: 1230px; /* Bề rộng layout chứa chuẩn 4 tin tức */
    margin: 45px auto;
    padding: 0 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden; /* Ngăn chặn vỡ khung tràn màn hình */
}

.news-container {
    position: relative;
}

/* Header tiêu đề căn giữa */
.news-header {
    text-align: center;
    margin-bottom: 35px;
}

.news-main-title {
    font-size: 25px;
    color: #222222;
    font-weight: 700;
    margin: 0 0 8px 0;
    letter-spacing: 0.5px;
}

.news-subtitle {
    font-size: 13.5px;
    color: #777777;
    margin: 0;
}

/* Khung bọc Slide */
.news-slider-wrapper {
    position: relative;
    padding: 0 5px;
    width: 100%;
}

/* ================= SỬA LỖI HIỂN THỊ DỌC CỦA SWIPER ================= */
/* Ép buộc cấu trúc Swiper luôn dàn hàng ngang tuyệt đối khi chưa load xong JS */
.news-swiper {
    width: 100%;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    padding-bottom: 40px !important;
}

.news-swiper .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex; /* Bắt buộc dàn hàng ngang */
    transition-property: transform;
    box-sizing: content-box;
    flex-wrap: nowrap !important; /* Không cho phép tự ý xuống dòng */
}

.news-swiper .swiper-slide {
    flex-shrink: 0; /* Không cho phép slide bị bóp méo */
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    box-sizing: border-box;
}

/* Cấu trúc thẻ card bài viết */
.news-card {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Khung ảnh chữ nhật bo góc nhẹ */
.news-img-box {
    width: 100%;
    aspect-ratio: 1.54 / 1; 
    overflow: hidden;
    border-radius: 4px;
    background-color: #f7f7f7;
}

.news-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.news-card:hover .news-img-box img {
    transform: scale(1.04);
}

.news-info {
    padding: 15px 0;
}

/* Tiêu đề tin tức cố định cao tối đa 2 dòng */
.news-title {
    font-size: 14.5px;
    color: #111111;
    font-weight: 700;
    line-height: 1.45;
    margin: 0 0 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 42px;
}

.news-title:hover {
    color: #e31818;
}

/* Mô tả ngắn cố định cao tối đa 3 dòng */
.news-desc {
    font-size: 13px;
    color: #666666;
    line-height: 1.6;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 62px;
}

/* Đường dẫn xem chi tiết */
.news-readmore {
    font-size: 13px;
    color: #222222;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.news-readmore:hover {
    color: #e31818;
}

.news-readmore i {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.news-readmore:hover i {
    transform: translateX(4px);
}

/* ================= 2 NÚT MŨI TÊN TRÒN ĐÈ MÉP ================= */
.custom-arrow {
    width: 42px !important;
    height: 42px !important;
    background-color: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 50%;
    color: #888888 !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    transition: all 0.2s ease;
    top: 36% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.custom-arrow::after {
    display: none; /* Tắt icon gốc của Swiper */
}

.custom-arrow i {
    font-size: 13px;
}

.custom-arrow:hover {
    background-color: #e31818;
    color: #ffffff !important;
    border-color: #e31818;
}

.swiper-button-prev { left: -12px !important; }
.swiper-button-next { right: -12px !important; }

/* Custom dấu chấm trang ở dưới */
.swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background: #dddddd;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #e31818 !important;
}





/* ==========================================================================
   ĐOẠN CODE SỬA LỖI RESPONSIVE CHO THIẾT BỊ DI ĐỘNG (Dưới 992px)
   ========================================================================== */
@media (max-width: 992px) {
    
    /* Sửa khung Header trên thành hàng dọc xếp chồng gọn gàng */
    .header-container {
        flex-direction: column;
        gap: 15px;
    }

    .header-search, .header-logo, .header-right {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .search-box {
        margin: 0 auto; /* Căn giữa ô tìm kiếm */
    }

    /* Hiển thị nút bấm bật Menu trên Mobile */
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        color: #ffffff;
        font-size: 16px;
        padding: 15px;
        cursor: pointer;
        width: 100%;
        text-align: left;
        font-weight: bold;
        border-bottom: 1px solid #b31212;
    }

    /* Ẩn danh sách menu chính, đợi JQuery bấm mở */
    .nav-links {
        display: none; 
        flex-direction: column; /* Xếp dọc các hàng danh mục */
        width: 100%;
    }

    .nav-links > li {
        width: 100%;
        border-bottom: 1px solid #b31212;
    }

    .nav-links > li > a {
        padding: 12px 20px;
    }

    .nav-links > li > a i {
        float: right; /* Đẩy mũi tên mở rộng về bên phải */
        margin-top: 4px;
    }

    /* Định dạng Dropdown (Chính Sách) khi ở Mobile */
    .dropdown-menu {
        position: static;
        width: 100%;
        box-shadow: none;
        background-color: #b31212;
        padding: 0;
    }

    .dropdown-menu li a {
        color: #ffffff;
        padding: 10px 35px;
    }

    /* Định dạng Mega Menu (Sản Phẩm) khi ở Mobile */
    .mega-menu {
        position: static;
        width: 100%;
        transform: none;
        box-shadow: none;
        padding: 0;
        background-color: #b31212;
    }

    .mega-container {
        flex-direction: column; /* Chuyển các cột Mega thành dạng một cột dọc */
    }

    .mega-col {
        width: 100%;
        padding: 0;
    }

    .mega-col h3 {
        color: #ffcdcd;
        padding: 10px 25px;
        margin-bottom: 0;
        background-color: #a31010;
        border-bottom: 1px solid #940f0f;
    }

    .mega-col ul li a {
        color: #ffffff;
        padding: 8px 35px;
    }

    /* Ẩn cột ảnh quảng cáo trên di động để đỡ rối mắt */
    .col-featured {
        display: none;
    }
}