/* ==========================================================================
   MỤC LỤC
   1. CORE & VARIABLES (Cấu hình gốc)
   2. TYPOGRAPHY & RESET (Phông chữ, thẻ H)
   3. LAYOUT (Header, Footer, Nav, Logo)
   4. COMPONENTS (Buttons, Badges, Pagination, Breadcrumb, Tabs)
   5. HOME PAGE (Hero Slider, Features, Sections)
   6. PRODUCTS (Product Cards, Grid, Toolbar)
   7. PRODUCT DETAIL (Gallery, Info, Modal, Zoom)
   8. NEWS & ARTICLES (List, Detail, Sidebar)
   9. OTHER PAGES (About, Contact, Search, General Pages)
   10. RESPONSIVE & UTILS
   ========================================================================== */

/* =========================================
   1. CORE & VARIABLES
   ========================================= */
/* =========================================
   1. CORE & VARIABLES (ĐÃ CHUẨN HÓA)
   ========================================= */
:root {
    --primary: #0056b3;
    --accent: #ff6b00;
    --dark: #1e293b;
    --light: #f8fafc;
    --border-color: #e2e8f0;
    /* --- HỆ THỐNG BO GÓC CHUẨN --- */
    --radius-sm: 4px; /* Chi tiết nhỏ */
    --radius-md: 8px; /* Card, Box, Input */
    --radius-lg: 12px; /* Layout lớn, Modal */
    --radius-pill: 50px; /* Nút bấm, Tabs */
    --radius-circle: 50%; /* Hình tròn */
}

body {
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #334155;
    margin: 0;
    overflow-x: hidden
}

main {
    flex: 1;
}

a {
    text-decoration: none;
    transition: 0.3s;
}

/* =========================================
   2. TYPOGRAPHY & RESET
   ========================================= */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: .5rem;
    color: #212529;
}

h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.35rem;
}

h3 {
    font-size: 1.15rem;
}

h4 {
    font-size: 1rem;
}

h5 {
    font-size: .9rem;
    font-weight: 500;
}

h6 {
    font-size: .8rem;
    font-weight: 500;
    color: #6c757d;
}

/* =========================================
   3. LAYOUT (HEADER & FOOTER)
   ========================================= */
/* Top Bar */
.top-bar {
    background: var(--primary);
    color: #cbd5e1;
    font-size: 0.8rem;
    padding: 6px 0;
}

    .top-bar a {
        color: #cbd5e1;
        margin-left: 15px;
    }

        .top-bar a:hover {
            color: #fff;
        }

/* Sticky Header */
header.sticky-top {
    z-index: 1030;
    position: sticky;
    top: 0;
    background: #fff;
    box-shadow: 0 1px 15px rgba(0,0,0,0.05);
}

/* Navbar */
.navbar {
    padding: 0;
}
/* [NEW] Navbar Logo - Từ Site.Master */
.navbar-logo {
    height: 50px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
}

.navbar-brand {
    font-weight: 800;
    color: var(--primary);
    font-size: 1.4rem;
    letter-spacing: -0.5px;
}

.nav-link {
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    padding: 22px 18px !important;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

    .nav-link:hover, .nav-link.active {
        color: var(--primary) !important;
        background: #f1f5f9;
    }

/* Dropdown */
.dropdown-menu {
    border: none;
    border-top: 3px solid #117ef3;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    padding: 10px 0;
}

.dropdown-item {
    padding: 8px 20px;
    font-size: 0.9rem;
    text-transform: capitalize;
    color: #475569;
}

    .dropdown-item:hover {
        color: var(--primary);
        background: #f8fafc;
        text-transform: capitalize;
        padding-left: 25px;
    }

/* Language Switch */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lang-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #555;
    text-decoration: none;
    border-radius: 15px;
    transition: all .2s ease;
}

    .lang-item img {
        width: 18px;
        height: 12px;
        object-fit: cover;
        display: block;
    }

    .lang-item:hover {
        background: #f88028;
        color: #000;
    }

    .lang-item.active {
        background: #0d6efd;
        color: #fff;
    }

/* Footer */
footer {
    background: #00216d;
    color: #94a3b8;
    padding-top: 60px;
    border-top: 4px solid #117ef3;
}

.footer-title {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-size: 0.95rem;
    border-left: 3px solid var(--accent);
    padding-left: 12px;
}

.footer-link {
    color: #94a3b8;
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

    .footer-link:hover {
        color: #fff;
        transform: translateX(5px);
    }

.footer-bottom {
    background: #020617;
    padding: 12px 0;
    margin-top: 50px;
    font-size: 0.8rem;
    border-top: 1px solid #1e293b;
}

/* Float Contact Buttons */
.float-contact {
    position: fixed;
    bottom: 25px;
    left: 25px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.float-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.bg-zalo {
    background: #0068ff;
}

.bg-phone {
    background: var(--accent);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 107, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 0, 0);
    }
}

/* =========================================
   4. COMPONENTS
   ========================================= */
/* Badges */
.badge-custom {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    border-radius: 4px;
    z-index: 2;
}

.badge-hot {
    background: #dc3545;
}

.badge-new {
    background: #0d6efd;
}

.badge-sale {
    background: #ffc107;
    color: #fff;
}

/* Buttons */
.btn-hero {
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.btn-detail, .btn-contact-sm {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid var(--primary);
    color: var(--primary);
    background: transparent;
    transition: 0.3s;
    display: inline-block;
    margin-top: 10px;
}

    .btn-detail:hover, .btn-contact-sm:hover {
        background: var(--primary);
        color: #fff;
    }

.btn-view {
    border: 1px solid #ddd;
    color: #555;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    text-decoration: none;
    transition: 0.2s;
    display: inline-block;
}

    .btn-view:hover {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

/* Pagination */
.pagination {
    justify-content: center;
    margin-top: 40px;
}

    .pagination .page-link {
        color: #333;
        border: 1px solid #eee;
        margin: 0 3px;
        border-radius: 4px;
        font-weight: 600;
        padding: 8px 16px;
    }

    .pagination .page-item.active .page-link {
        background-color: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }

    .pagination .page-item.disabled .page-link {
        background-color: #f8fafc;
        pointer-events: none;
        color: #ccc;
    }

/* Breadcrumb */
.breadcrumb-wrap {
    background: #fff;
    padding: 15px 0;
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 40px;
}

.breadcrumb-item a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
}

.breadcrumb-item.active {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.85rem;
}

/* Tabs Custom */
.custom-tabs {
    border: none;
    gap: 15px;
    margin-bottom: 20px !important;
    background: #eef2f6;
    padding: 5px;
    border-radius: 50px;
    display: inline-flex;
}

    .custom-tabs .nav-link {
        border-radius: 50px !important;
        padding: 15px 20px !important;
        font-weight: 700;
        text-transform: uppercase;
        color: #64748b;
        background-color: transparent;
        border: none;
        transition: all 0.3s ease;
        cursor: pointer;
    }

        .custom-tabs .nav-link:hover {
            color: var(--primary);
        }

        .custom-tabs .nav-link.active {
            background-color: #fff !important;
            color: var(--primary) !important;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transform: none;
        }

.tab-content-custom {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .tab-content-custom.active {
        display: block;
    }

    .tab-content-custom.show {
        opacity: 1;
    }

/* =========================================
   5. HOME PAGE & HERO
   ========================================= */
/* Hero Slider Controls */
#heroCarousel .carousel-control-prev, #heroCarousel .carousel-control-next {
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.7;
    transition: all 0.3s ease;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

#heroCarousel .carousel-control-prev {
    left: 75px;
}

#heroCarousel .carousel-control-next {
    right: 75px;
}

    #heroCarousel .carousel-control-prev:hover, #heroCarousel .carousel-control-next:hover {
        background-color: rgba(0, 0, 0, 0.8);
        opacity: 1;
        box-shadow: 0 0 15px rgba(255,255,255,0.3);
    }

#heroCarousel .carousel-control-prev-icon, #heroCarousel .carousel-control-next-icon {
    width: 30px;
    height: 30px;
}

/* Video Banner */
.hero-video-container {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    background: #000;
}

    .hero-video-container iframe {
        width: 100%;
        height: 100%;
        border: none;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
    }

/* [NEW] Hero Image Wrapper - Từ Site.Master & Default */
.hero-img-wrap {
    width: 100%;
    /*height: 320px; *//* Default height */
    border-radius: 12px;
    overflow: hidden;
    background: #f8f9fa;
}

    .hero-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Feature Box */
.feature-box {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    height: 100%;
    transition: 0.3s;
    border: 1px solid #f0f0f0;
}

    .feature-box:hover {
        transform: translateY(-5px);
        border-color: var(--primary);
    }

.feature-icon {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 15px;
}

/* Categories Home */
.cat-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    height: 350px;
}

    .cat-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.5s;
    }

    .cat-item:hover img {
        transform: scale(1.1);
        filter: brightness(0.6);
    }

.cat-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    text-transform: uppercase;
    background: linear-gradient(to top, rgb(0 0 0 / 90%), #00000000);
    color: #fff;
}

/* Bottom Banner */
.bottom-banner {
    padding: 20px 0;
    background: #f5f6f7;
}

.banner-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

    .banner-wrap img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        display: block;
        filter: brightness(0.8);
    }

.banner-overlay {
    position: absolute;
    inset: 0;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}

    .banner-overlay h4 {
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.5px;
        color: #fff;
        margin-bottom: 10px;
        text-transform: uppercase;
    }

    .banner-overlay p, .banner-overlay p * {
        color: #fff;
        font-family: inherit;
    }

    .banner-overlay .btn {
        width: fit-content;
        padding: 6px 16px;
        font-size: 13px;
        font-weight: 600;
        border-radius: 20px;
    }

/* =========================================
   6. PRODUCTS
   ========================================= */
/* Product Card */
.prod-card {
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: 0.3s;
    height: 100%;
    position: relative;
}

    .prod-card:hover {
        box-shadow: 0 10px 20px rgba(0,0,0,0.08);
        border-color: var(--primary);
        transform: translateY(-3px);
    }

.prod-img-wrap {
    min-height: 225px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    background: #fff;
    border-bottom: 1px solid #f8f9fa;
    position: relative;
}

.prod-img {
    max-height: 100%;
    max-width: 100%;
    min-height: 225px;
    transition: 0.4s;
}

.prod-card:hover .prod-img {
    transform: scale(1.08);
}

.prod-body {
    padding: 15px;
    text-align: center;
}

.prod-brand {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    display: block;
    margin-bottom: 5px;
}

.prod-title {
    font-size: 1rem;
    /*font-weight: 600;*/
    margin-bottom: 10px;
    height: 44px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

    .prod-title a {
        color: #334155;
        text-decoration: none;
        transition: 0.2s;
    }

        .prod-title a:hover {
            color: var(--primary);
        }

.prod-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.price-old {
    text-decoration: line-through;
    color: #999;
    font-size: 0.9rem;
    margin-right: 5px;
    font-weight: 400;
}

.price-contact {
    color: var(--primary);
}

/* Shop Toolbar */
.shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px 15px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
}

.sort-select {
    border: 1px solid #ddd;
    padding: 5px 10px;
    border-radius: 4px;
    outline: none;
    font-size: 0.9rem;
}

/* Page Header Category */
.page-header {
    background: #f8f9fa;
    padding: 40px 0;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 40px;
}

.cat-desc {
    font-size: 0.95rem;
    color: #6c757d;
    margin-top: 10px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================
   7. PRODUCT DETAIL
   ========================================= */
/* Gallery */
.gallery-sticky {
    position: sticky;
    top: 100px;
}

.main-image-container {
    position: relative;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1/1;
    cursor: zoom-in;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

    .main-image-container img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        transition: transform 0.4s ease, opacity 0.3s;
    }

    .main-image-container:hover img {
        transform: scale(1.05);
    }

.zoom-hint {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(255,255,255,0.95);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    pointer-events: none;
}

.thumbs-container {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    overflow-x: auto;
    padding: 5px;
    scrollbar-width: none;
}

.thumb-item {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

    .thumb-item:hover {
        border-color: #aaa;
        transform: translateY(-2px);
    }

    .thumb-item.active {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.2);
    }

    .thumb-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 4px;
    }

/* Product Info */
.product-info-wrap {
    padding-left: 20px;
}

.short-desc-box {
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    color: #555;
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 25px;
}

.btn-action {
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: 0.3s;
    cursor: pointer;
}

    .btn-action:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

.btn-buy-now {
    background: linear-gradient(45deg,#ffc107, #f44336);
    color: white;
    border: none;
    text-decoration: none;
}

    .btn-buy-now:hover {
        background: linear-gradient(45deg, #b71c1c, #d32f2f);
        color: white;
    }

/* Specs Table */
.spec-clean table {
    width: 100%;
    border-collapse: collapse;
}

.spec-clean td {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95rem;
}

.spec-clean tr:last-child td {
    border-bottom: none;
}

.spec-clean tr td:first-child {
    width: 40%;
    color: #666;
    font-weight: 500;
    padding-right: 15px;
    vertical-align: top;
}

.block-text {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    text-align: justify;
}

/* Tabs Detail (Overrides) */
.product-info-wrap + div .custom-tabs {
    border-bottom: 2px solid #f0f0f0;
    display: flex !important;
    justify-content: center !important;
    width: 100%;
    background: none;
    border-radius: 0;
}

    .product-info-wrap + div .custom-tabs .nav-link {
        border: none;
        border-bottom: 2px solid transparent;
        color: #666;
        font-weight: 600;
        padding: 15px 30px;
        margin-bottom: -2px;
        transition: 0.3s;
        background: none !important;
        box-shadow: none !important;
    }

        .product-info-wrap + div .custom-tabs .nav-link.active {
            color: var(--primary) !important;
            border-bottom-color: var(--primary);
        }

/* Modal Order */
.modal-order-pro .modal-content {
    border: none;
    border-radius: 12px;
    overflow: hidden;
}

.modal-order-pro .modal-header {
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    padding: 15px 25px;
}

.modal-order-pro .product-summary {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

    .modal-order-pro .product-summary img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 4px;
    }

.total-price-box {
    font-size: 1.2rem;
    font-weight: 700;
    color: #dc3545;
    text-align: right;
    margin-top: 10px;
}

/* Overlay Zoom */
#custom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(14, 13, 15, 0.95);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

    #custom-overlay.open {
        opacity: 1;
        visibility: visible;
    }

#overlay-img {
    max-width: 90%;
    max-height: 85vh;
    object-fit: contain;
    transform: scale(0.95);
    transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    border-radius: 8px;
}

#custom-overlay.open #overlay-img {
    transform: scale(1);
}

.overlay-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: #7c1ac04a;
    border: 2px solid #bb9e9e;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: 0.2s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

    .overlay-nav:hover {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

.nav-prev {
    left: 30px;
}

.nav-next {
    right: 30px;
}

.overlay-close {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    transition: 0.2s;
}

    .overlay-close:hover {
        transform: rotate(90deg);
        color: #dc3545;
    }

/* Related Slider Detail */
.related-wrapper {
    position: relative;
    padding: 0 10px;
}

.related-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 15px;
    scrollbar-width: none;
}

    .related-slider::-webkit-scrollbar {
        display: none;
    }

.slider-item {
    flex: 0 0 calc(25% - 15px);
    scroll-snap-align: start;
    max-width: 300px;
}

.slider-nav-btn {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: 1px solid #eee;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    color: #333;
}

.slider-prev {
    left: -20px;
}

.slider-next {
    right: -20px;
}

/* =========================================
   8. NEWS & ARTICLES
   ========================================= */
/* News Card */
.news-card {
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border-radius: 8px;
    overflow: hidden;
    transition: 0.3s;
    background: #fff;
    height: 100%;
    border: 1px solid #eee;
}

    .news-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    }

.news-img-wrap {
    position: relative;
    overflow: hidden;
    height: 220px;
}

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

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

.news-body {
    padding: 20px;
}

.news-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .news-title a {
        color: #334155;
        text-decoration: none;
        transition: 0.2s;
    }

        .news-title a:hover {
            color: var(--primary);
        }

.news-desc {
    font-size: 0.9rem;
    color: #64748b;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 15px;
}

.btn-read-more {
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: #0d6efd;
    transition: all 0.2s;
}

    .btn-read-more:hover {
        text-decoration: underline;
        color: #0a58ca;
    }

/* Badge Date */
.badge-date {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 2;
    min-width: 60px;
}

    .badge-date .day {
        display: block;
        font-size: 20px;
        font-weight: 800;
        color: #0d6efd;
        line-height: 1;
    }

    .badge-date .month {
        display: block;
        font-size: 12px;
        text-transform: uppercase;
        color: #6c757d;
        font-weight: 600;
    }

/* News List Item */
.news-item {
    display: flex;
    gap: 25px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px dashed #e2e8f0;
    transition: 0.3s;
}

    .news-item:last-child {
        border-bottom: none;
    }

.news-thumb {
    width: 280px;
    height: 180px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    display: block;
}

    .news-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.5s;
    }

.news-item:hover .news-thumb img {
    transform: scale(1.1);
}

.news-content {
    flex: 1;
}

.news-meta {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Post Detail */
.post-header {
    margin-bottom: 30px;
}

.post-title {
    font-weight: 800;
    color: #1e293b;
    line-height: 1.4;
    font-size: 2rem;
    margin-bottom: 15px;
}

.post-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #334155;
    text-align: justify;
}

    .post-content p {
        margin-bottom: 20px;
    }

    .post-content h2, .post-content h3 {
        font-weight: 700;
        color: #0f172a;
        margin-top: 35px;
        margin-bottom: 15px;
    }

    .post-content img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 20px 0;
        display: block;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

.post-slider {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

    .post-slider .carousel-item {
        height: 450px;
        background-color: #f1f5f9;
    }

    .post-slider img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .post-slider .carousel-control-prev, .post-slider .carousel-control-next {
        width: 50px;
        height: 50px;
        background: rgba(0,0,0,0.3);
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0;
        transition: 0.3s;
    }

    .post-slider:hover .carousel-control-prev {
        left: 20px;
        opacity: 1;
    }

    .post-slider:hover .carousel-control-next {
        right: 20px;
        opacity: 1;
    }

/* Related Posts */
.related-card {
    margin-bottom: 20px;
    transition: 0.3s;
    border: none;
}

    .related-card:hover {
        transform: translateY(-5px);
    }

.related-img {
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
}

.related-title {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================
   9. OTHER PAGES & SIDEBARS
   ========================================= */
/* Page Header Simple */
.page-header-simple {
    background: linear-gradient(to right, #004aad, #00216d);
    padding: 50px 0;
    color: #fff;
    margin-bottom: 40px;
    text-align: center;
}

/* Sidebar Widgets */
.sidebar-sticky {
    position: sticky;
    top: 90px;
    transition: top 0.3s;
}

.sidebar-box, .sidebar-widget {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.sidebar-title, .widget-title {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1rem;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: var(--dark);
    position: relative;
}

    .sidebar-title::after, .widget-title::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 40px;
        height: 2px;
        background: var(--primary);
    }

/* Category List Sidebar */
.cat-list li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #f1f5f9;
    list-style: none;
}

    .cat-list li:last-child {
        border: none;
        margin: 0;
        padding: 0;
    }

.cat-list a {
    text-transform: capitalize;
    color: #64748b;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    transition: 0.2s;
}

    .cat-list a:hover {
        color: var(--primary);
        padding-left: 5px;
    }

.cat-count {
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
}



.content-body h3 {
    color: #004aad;
    font-weight: 800;
    font-size: 1.5rem;
    margin-top: 35px;
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 5px solid #ff6b00;
    background: #f8f9fa;
    padding-top: 10px;
    padding-bottom: 10px;
}

.info-card {
    text-align: center;
}

.info-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}

.info-text {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 15px;
    word-break: break-word;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    margin-right: 8px;
    transition: 0.3s;
    text-decoration: none;
}

    .social-btn:hover {
        transform: translateY(-3px);
        opacity: 0.9;
        color: #fff;
    }

/* Contact Page (LienHe) */
.page-header-contact {
    background: linear-gradient(rgba(0, 33, 71, 0.85), rgba(0, 33, 71, 0.85)), url('https://placehold.co/1920x400?text=Contact+Us');
    background-size: cover;
    background-position: center;
    padding: 50px 0;
    color: #fff;
    text-align: center;
    margin-bottom: 40px;
}

.contact-info-box {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    height: 100%;
    border: 1px solid #f1f5f9;
}

.icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #eef5ff;
    color: #004aad;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-right: 15px;
    flex-shrink: 0;
}

.contact-form-box {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-top: 5px solid #ff6b00;
}

.form-control-custom {
    border: 1px solid #e2e8f0;
    padding: 12px 15px;
    border-radius: 8px;
    background: #f8fafc;
    width: 100%;
    transition: 0.3s;
}

    .form-control-custom:focus {
        border-color: #004aad;
        background: #fff;
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 74, 173, 0.1);
    }

.btn-send {
    background: #004aad;
    color: #fff;
    padding: 14px 30px;
    border-radius: 50px;
    border: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
}

    .btn-send:hover {
        background: #003380;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 74, 173, 0.3);
    }

.map-frame iframe {
    width: 100%;
    height: 450px;
    border: 0;
    filter: grayscale(10%);
}

/* Generic Content Pages (Pages.aspx) */
.main-content-wrap {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    text-align: justify;
}

    .main-content-wrap img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 8px;
        margin: 15px 0;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    .main-content-wrap h2, .main-content-wrap h3 {
        color: #004aad;
        font-weight: 700;
        margin-top: 25px;
        margin-bottom: 15px;
        border-left: 4px solid #004aad;
        padding-left: 15px;
    }

.swiper {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.gallery-top {
    height: 450px;
    width: 100%;
    margin-bottom: 10px;
    background: #000;
}

    .gallery-top .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #000;
    }

        .gallery-top .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            cursor: zoom-in;
        }

.gallery-thumbs {
    height: 80px;
    padding: 5px 0;
}

    .gallery-thumbs .swiper-slide {
        width: 25%;
        height: 100%;
        opacity: 0.5;
        cursor: pointer;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #dee2e6;
    }

    .gallery-thumbs .swiper-slide-thumb-active {
        opacity: 1;
        border: 2px solid #004aad;
    }

    .gallery-thumbs .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.main-gallery-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    margin-bottom: 20px;
}

    .main-gallery-wrap img {
        width: 100%;
        height: auto;
        display: block;
    }

.related-section {
    margin-top: 50px;
    border-top: 1px solid #eee;
    padding-top: 30px;
}

.related-img-col {
    width: 140px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

    .related-img-col img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.5s;
        position: absolute;
        top: 0;
        left: 0;
    }

.related-card:hover .related-img-col img {
    transform: scale(1.1);
}

.related-body {
    padding: 15px;
    flex: 1;
}

.contact-list li {
    margin-bottom: 12px;
    font-size: 0.95rem;
    color: #555;
    display: flex;
}

.contact-list i {
    width: 25px;
    color: #004aad;
    margin-top: 4px;
}

/* =========================================
   10. RESPONSIVE & UTILS
   ========================================= */
@media (max-width: 991px) {
    .btn-group-custom {
        flex-direction: column;
    }

    .news-item {
        flex-direction: column;
    }

    .news-thumb {
        width: 100%;
        height: 200px;
    }

    .info-col {
        padding-left: 0;
        margin-top: 30px;
    }

    .sidebar-sticky {
        position: static;
    }

    .product-info-wrap {
        padding-left: 0;
        margin-top: 30px;
    }

    .slider-item {
        flex: 0 0 calc(33.33% - 15px);
    }

    .gallery-top {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .hero-img {
        height: 350px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-item {
        margin-bottom: 30px;
    }

    .custom-tabs {
        flex-wrap: wrap;
    }

    .slider-item {
        flex: 0 0 calc(50% - 15px);
    }

    .shop-toolbar {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .sidebar-sticky {
        margin-bottom: 30px;
    }

    .hero-video-container {
        height: 350px;
    }

    #heroCarousel .carousel-control-prev, #heroCarousel .carousel-control-next {
        width: 35px;
        height: 35px;
    }

    #heroCarousel .carousel-control-prev {
        left: 10px;
    }

    #heroCarousel .carousel-control-next {
        right: 10px;
    }

    .news-img-wrap {
        height: 180px;
    }

    .news-title {
        font-size: 1rem;
    }

    .carousel-item {
        height: 250px;
    }

    .post-slider .carousel-item {
        height: 250px;
    }
}
/* =========================================
   FIX HERO SLIDER (VIDEO MOBILE CHUẨN + CÓ NÚT)
   Code này phải nằm CUỐI CÙNG file site.css
   ========================================= */

/* 1. GIAO DIỆN MÁY TÍNH (PC) - GIỮ NGUYÊN */
#heroCarousel .carousel-item {
    height: 500px !important;
    background-color: #000;
    overflow: hidden;
}

.hero-video-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

    .hero-video-container iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100vw;
        height: 56.25vw;
        min-height: 100%;
        min-width: 177.77vh;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

.hero-img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* 2. GIAO DIỆN ĐIỆN THOẠI (MOBILE) - CÓ HIỆN NÚT */
@media (max-width: 768px) {

    #heroCarousel .carousel-item {
        height: auto !important;
        aspect-ratio: 16/9;
    }

    .hero-video-container {
        height: 100%;
        position: static;
    }

        .hero-video-container iframe {
            position: static !important;
            width: 100% !important;
            height: 100% !important;
            min-width: 0 !important;
            min-height: 0 !important;
            top: 0;
            left: 0;
            transform: none !important;
        }

    .hero-img {
        height: auto !important;
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
    }

    /* [ĐÃ SỬA] HIỂN THỊ LẠI NÚT TRÊN MOBILE */
    #heroCarousel .carousel-control-prev,
    #heroCarousel .carousel-control-next {
        display: flex !important; /* Bắt buộc hiện */
        width: 35px; /* Nhỏ hơn PC (PC là 50px) */
        height: 35px;
        background-color: rgba(0, 0, 0, 0.3); /* Nền mờ nhẹ hơn */
        opacity: 1;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Icon mũi tên nhỏ lại chút cho cân đối */
    #heroCarousel .carousel-control-prev-icon,
    #heroCarousel .carousel-control-next-icon {
        width: 20px;
        height: 20px;
    }
}


/* =========================================
   FIX ẢNH SẢN PHẨM MOBILE (DÁN VÀO CUỐI FILE)
   ========================================= */
@media (max-width: 768px) {

    /* 1. Chỉnh lại khung bao quanh ảnh */
    .prod-img-wrap {
        min-height: auto !important; /* Bỏ chiều cao tối thiểu của PC */
        /*height: 180px;*/ /* Đặt chiều cao cố định vừa phải cho Mobile */
        /*padding: 5px;*/ /* Thêm chút khoảng cách để ảnh không dính sát lề */
    }

    /* 2. Chỉnh lại ảnh sản phẩm */
    .prod-img {
        min-height: auto !important; /* Bỏ ép chiều cao của PC */
        width: 100% !important;
        height: 100% !important;
        /* [QUAN TRỌNG] 
           contain: Hiển thị trọn vẹn sản phẩm, có khoảng trắng nếu ảnh không vuông (An toàn cho Motor).
           cover: Lấp đầy toàn bộ khung, nhưng có thể bị cắt mất 1 phần chi tiết.
           Bạn nên dùng 'contain' cho sản phẩm kỹ thuật.
        */
        object-fit: contain;
    }

    /* 3. Tinh chỉnh phần chữ bên dưới cho gọn */
    .prod-body {
        padding: 10px !important;
    }

    .prod-title {
        font-size: 0.85rem; /* Chữ nhỏ lại xíu cho đỡ bị tràn dòng */
        height: 40px; /* Giới hạn chiều cao tiêu đề */
        overflow: hidden;
    }

    .btn-view {
        padding: 4px 12px; /* Nút nhỏ lại chút */
        font-size: 0.75rem;
    }
}

/* =========================================
   FIX ẢNH GIỚI THIỆU (ABOUT US) MOBILE - FINAL V2
   Dán vào dòng cuối cùng của file site.css
   ========================================= */
@media (max-width: 768px) {

    /* 1. XỬ LÝ KHUNG BAO (WRAPPER) */
    .hero-img-wrap {
        height: auto !important; /* Hủy chiều cao cứng 320px */
        min-height: unset !important; /* Hủy chiều cao tối thiểu */
        /* Xóa toàn bộ nền và viền */
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important; /* Xóa bóng đổ nếu có */

        padding: 0 !important;
        margin-bottom: 20px;
        line-height: 0 !important; /* Xóa khoảng trắng do dòng chữ */
        display: block !important;
    }

        /* 2. XỬ LÝ ẢNH BÊN TRONG */
        .hero-img-wrap img {
            width: 100% !important; /* Full chiều rộng điện thoại */
            height: auto !important; /* Chiều cao tự động theo tỷ lệ ảnh */
            /* Hủy các thuộc tính ép buộc của PC */
            min-height: unset !important;
            max-height: unset !important;
            /* Hiển thị tự nhiên, không cắt cúp */
            object-fit: contain !important;
            display: block !important;
            border-radius: 12px;
        }
}


/* =========================================
   FIX DANH SÁCH SẢN PHẨM SIDEBAR (DÁN VÀO CUỐI FILE)
   ========================================= */

/* 1. Định dạng khung chứa từng sản phẩm con */
.sidebar-prod-item {
    display: flex; /* Xếp ảnh và chữ nằm ngang */
    align-items: flex-start; /* Canh lề trên */
    gap: 15px; /* Khoảng cách giữa ảnh và chữ */
    margin-bottom: 15px; /* Khoảng cách giữa các sản phẩm */
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee; /* Đường kẻ mờ phân cách */
}

    /* Bỏ đường kẻ ở sản phẩm cuối cùng */
    .sidebar-prod-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

/* 2. Định dạng ảnh nhỏ (Thumbnail) */
.sidebar-prod-img {
    width: 70px; /* Cố định chiều rộng nhỏ */
    height: 70px; /* Cố định chiều cao nhỏ */
    object-fit: contain; /* Ảnh co lại vừa khung, không bị méo */
    border-radius: 6px; /* Bo góc nhẹ */
    border: 1px solid #f1f1f1; /* Viền mờ cho gọn */
    background: #fff;
    flex-shrink: 0; /* Đảm bảo ảnh không bị bóp méo khi tên dài */
}

/* 3. Định dạng tiêu đề sản phẩm bên phải */
.sidebar-prod-title {
    font-size: 0.9rem; /* Cỡ chữ vừa phải */
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box; /* Giới hạn số dòng */
    -webkit-line-clamp: 2; /* Tối đa 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .sidebar-prod-title a {
        color: #333;
        text-decoration: none;
        transition: 0.2s;
    }

        .sidebar-prod-title a:hover {
            color: #0056b3; /* Màu xanh khi di chuột vào */
        }


/* =========================================
   FIX SLIDESHOW CHI TIẾT TIN TỨC (Full khung 16:9)
   ========================================= */

.post-slider {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    background: #000; /* Nền đen để xem video/ảnh đẹp hơn */
}

    .post-slider .carousel-item {
        /* 1. Bỏ chiều cao cứng 450px gây lỗi khoảng trắng */
        height: auto !important;
        /* 2. Ép tỷ lệ khung hình 16:9 (Chuẩn Youtube) */
        /* Điều này giúp khung slide luôn co giãn đều theo chiều rộng */
        aspect-ratio: 16 / 9;
        background-color: #000;
        width: 100%;
        position: relative;
    }

    .post-slider img {
        width: 100% !important;
        height: 100% !important;
        /* 3. Kỹ thuật COVER: Ảnh sẽ tự phóng to để lấp đầy khung 16:9 */
        /* Phần thừa sẽ bị cắt nhẹ, đảm bảo không còn viền trắng */
        object-fit: cover !important;
        object-position: center;
    }

    /* 4. Fix cho Video iframe bên trong */
    .post-slider .carousel-item .ratio {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    /* 5. Chỉnh lại nút bấm điều hướng cho đẹp */
    .post-slider .carousel-control-prev,
    .post-slider .carousel-control-next {
        width: 10%; /* Vùng bấm rộng hơn */
        opacity: 0; /* Ẩn đi khi chưa di chuột */
        transition: 0.3s;
    }

    .post-slider:hover .carousel-control-prev,
    .post-slider:hover .carousel-control-next {
        opacity: 1; /* Hiện khi di chuột vào */
    }

    /* =========================================
   FIX NÚT ĐIỀU HƯỚNG SLIDESHOW (Tròn, không méo)
   ========================================= */

    /* 1. Định dạng lại thẻ chứa nút (thẻ a) thành hình tròn */
    .post-slider .carousel-control-prev,
    .post-slider .carousel-control-next {
        width: 40px !important; /* Kích thước cố định cho nút tròn */
        height: 40px !important; /* Kích thước cố định cho nút tròn */
        background-color: rgba(0, 0, 0, 0.4); /* Nền đen mờ */
        border-radius: 50%; /* Bo tròn hoàn toàn */
        /* Căn giữa nút theo chiều dọc */
        top: 50%;
        transform: translateY(-50%);
        opacity: 1; /* Luôn hiển thị (không ẩn đi) */
        border: none;
        margin: 0 15px; /* Cách lề trái/phải một chút cho đẹp */
        /* Sử dụng Flexbox để căn giữa cái mũi tên bên trong nút tròn */
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        z-index: 5; /* Đảm bảo nằm trên video/ảnh */
    }

        /* 2. Hiệu ứng khi di chuột vào nút */
        .post-slider .carousel-control-prev:hover,
        .post-slider .carousel-control-next:hover {
            background-color: rgba(0, 0, 0, 0.8); /* Nền đậm hơn khi hover */
            transform: translateY(-50%) scale(1.1); /* Phóng to nhẹ */
        }

    /* 3. [QUAN TRỌNG] Reset lại icon mũi tên bên trong để không bị méo */
    .post-slider .carousel-control-prev-icon,
    .post-slider .carousel-control-next-icon {
        width: 20px !important; /* Kích thước icon chuẩn */
        height: 20px !important; /* Kích thước icon chuẩn */
        /* Đảm bảo ảnh SVG mũi tên không bị méo */
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        /* Xóa bỏ mọi padding và màu nền cũ gây lỗi nhân đôi */
        padding: 0 !important;
        background-color: transparent !important;
        border-radius: 0 !important;
    }

/* =========================================
   FIX CTA BOX (Giao diện chuyên nghiệp)
   ========================================= */

.cta-pro-wrapper {
    background: linear-gradient(135deg, #f8f9fa 0%, #eef2f6 100%);
    border: 1px solid #e2e8f0;
    border-left: 5px solid #0056b3; /* Màu xanh chủ đạo */
    border-radius: 12px;
    padding: 30px;
    margin: 40px 0;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

    .cta-pro-wrapper:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    }

/* Icon nền mờ trang trí */
.cta-pro-icon {
    font-size: 3.5rem;
    color: #cbd5e1;
    opacity: 0.5;
    flex-shrink: 0;
}

.cta-pro-content {
    flex: 1;
}

.cta-pro-title {
    color: #0056b3;
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cta-pro-desc {
    color: #475569;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

/* Nút gọi điện nổi bật */
.btn-cta-pulse {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(45deg, #ff6b00, #ff8c00); /* Màu cam nổi bật */
    color: #fff !important;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.4);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

    .btn-cta-pulse:hover {
        background: linear-gradient(45deg, #e65100, #ff6b00);
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(255, 107, 0, 0.6);
    }

    /* Hiệu ứng rung icon điện thoại */
    .btn-cta-pulse i {
        animation: phone-shake 1.5s infinite;
    }

@keyframes phone-shake {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(15deg);
    }

    20% {
        transform: rotate(-15deg);
    }

    30% {
        transform: rotate(10deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* Responsive cho Mobile */
@media (max-width: 768px) {
    .cta-pro-wrapper {
        flex-direction: column;
        text-align: center;
        padding: 25px 20px;
    }

    .cta-pro-icon {
        font-size: 3rem;
        margin-bottom: 10px;
    }

    .cta-pro-action {
        width: 100%;
        margin-top: 15px;
    }

    .btn-cta-pulse {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================
   1. FIX THUMBNAILS (Có mũi tên trái/phải)
   ========================================= */
.thumbs-wrapper {
    position: relative;
    margin-top: 15px;
    padding: 0 35px; /* Chừa chỗ cho 2 nút mũi tên */
}

.thumbs-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Ẩn thanh cuộn (Firefox) */
    padding: 5px 0;
}

    .thumbs-container::-webkit-scrollbar {
        display: none; /* Ẩn thanh cuộn (Chrome/Safari) */
    }

.thumb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    color: #555;
    font-size: 0.8rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: 0.3s;
}

    .thumb-nav:hover {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

.thumb-prev {
    left: 0;
}

.thumb-next {
    right: 0;
}

.thumb-item {
    width: 82px;
    height: 70px;
    flex-shrink: 0;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
    position: relative; /* Để icon play đè lên */
}

    .thumb-item.active {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.2);
    }

    .thumb-item img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Đổi thành cover cho đẹp khung vuông */
        border-radius: 6px;
    }

/* =========================================
   2. FIX TABS (Luôn nằm giữa)
   ========================================= */
.product-info-wrap + div .custom-tabs {
    display: flex !important;
    justify-content: center !important; /* Căn giữa các tab */
    border-bottom: 2px solid #f0f0f0;
    margin-bottom: 30px;
    width: 100%;
}

    .product-info-wrap + div .custom-tabs .nav-item {
        margin-bottom: -2px; /* Đè lên border bottom */
    }

    .product-info-wrap + div .custom-tabs .nav-link {
        border: none;
        border-bottom: 3px solid transparent;
        color: #666;
        font-weight: 700;
        text-transform: uppercase;
        padding: 15px 25px;
        background: transparent !important;
        transition: 0.3s;
    }

        .product-info-wrap + div .custom-tabs .nav-link.active {
            color: var(--primary) !important;
            border-bottom-color: var(--primary);
            background: transparent !important;
        }

/* =========================================
   3. FIX ẢNH TRONG NỘI DUNG (Căn giữa, đẹp)
   ========================================= */
/* Áp dụng cho cả tab mô tả và phần block text */
#desc-pane img,
.block-text img,
.spec-clean img {
    display: block !important; /* Xuống dòng */
    margin: 25px auto !important; /* Căn giữa và cách trên dưới 25px */
    max-width: 100% !important; /* Không tràn khung */
    height: auto !important; /* Giữ tỷ lệ */
    border-radius: 8px; /* Bo góc nhẹ */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Bóng đổ nhẹ cho nổi */
}

/* Căn chỉnh văn bản cho đẹp luôn */
#desc-pane, .block-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #333;
    text-align: justify; /* Căn đều 2 bên */
}


/* =========================================
   1. FIX TABS CHI TIẾT SẢN PHẨM (Nằm giữa + Dạng dòng kẻ)
   ========================================= */
/* Target thẳng vào ID myTab để độ ưu tiên cao nhất */
#myTab {
    display: flex !important;
    justify-content: center !important; /* Căn giữa */
    width: 100% !important;
    /* Reset style "viên thuốc" cũ */
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    /* Tạo style "dòng kẻ" mới */
    border-bottom: 2px solid #f0f0f0;
    margin-bottom: 40px !important;
    gap: 0 !important;
}

    #myTab .nav-item {
        margin-bottom: -2px; /* Đè lên đường kẻ dưới */
    }

    #myTab .nav-link {
        border: none !important;
        border-bottom: 3px solid transparent !important;
        border-radius: 0 !important; /* Vuông góc */
        background: transparent !important;
        color: #64748b;
        font-weight: 700;
        text-transform: uppercase;
        padding: 15px 15px !important;
        font-size: 1rem;
        transition: all 0.3s;
    }

        #myTab .nav-link:hover {
            color: var(--primary);
        }

        #myTab .nav-link.active {
            color: var(--primary) !important;
            background: transparent !important;
            border-bottom-color: var(--primary) !important; /* Gạch chân màu xanh */
            box-shadow: none !important;
        }

/* =========================================
   2. FIX ẢNH TRONG NỘI DUNG (Luôn căn giữa)
   ========================================= */
/* Áp dụng cho cả tab Mô tả, Thông số và nội dung bài viết */
#desc-pane img,
#spec-pane img,
.block-text img,
.spec-clean img {
    display: block !important; /* Bắt buộc xuống dòng */
    margin: 25px auto !important; /* Căn giữa trái phải, cách trên dưới 25px */
    max-width: 100% !important; /* Không bị tràn khung */
    height: auto !important; /* Giữ tỷ lệ ảnh */
    /* Trang trí ảnh cho đẹp */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Căn chỉnh văn bản cho dễ đọc */
#desc-pane, .block-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #333;
    text-align: justify;
}
/* ==========================================================================
   FIX ĐỒNG NHẤT BORDER-RADIUS (DÁN VÀO CUỐI FILE SITE.CSS)
   ========================================================================== */

/* 1. CẤP ĐỘ: PILL (50px) - Dùng cho Nút bấm & Tabs */
.btn-hero,
.btn-detail,
.btn-contact-sm,
.btn-view,
.btn-send,
.btn-cta-pulse,
.custom-tabs,
.custom-tabs .nav-link,
.btn-action,
.lang-item {
    border-radius: var(--radius-pill) !important;
}

/* 2. CẤP ĐỘ: LARGE (12px) - Dùng cho Khung lớn */
.hero-img-wrap,
.banner-wrap,
.modal-content,
.main-image-container,
.contact-info-box,
.contact-form-box,
.cta-pro-wrapper,
.modal-order-pro .modal-content {
    border-radius: var(--radius-lg) !important;
}

/* 3. CẤP ĐỘ: MEDIUM (8px) - Dùng cho Card, Input & Box */
.prod-card,
.feature-box,
.news-card,
.sidebar-box,
.sidebar-widget,
.cat-item,
.short-desc-box,
.form-control,
.form-control-custom,
.sort-select,
.post-slider,
.main-content-wrap img,
.post-content img,
.thumb-item,
.news-thumb,
.related-img,
.related-img-col img,
.modal-order-pro .product-summary {
    border-radius: var(--radius-md) !important;
}

    /* 4. CẤP ĐỘ: SMALL (4px) - Dùng cho chi tiết phụ */
    .badge-custom,
    .badge-date,
    .pagination .page-link,
    .dropdown-menu,
    .modal-order-pro .product-summary img, /* Ảnh nhỏ trong giỏ hàng */
    .sidebar-prod-img {
        border-radius: var(--radius-sm) !important;
    }

/* 5. CẤP ĐỘ: CIRCLE (50%) - Giữ nguyên các hình tròn */
.float-btn,
.carousel-control-prev,
.carousel-control-next,
.slider-nav-btn,
.overlay-nav,
.icon-circle,
.thumb-nav,
.social-btn {
    border-radius: var(--radius-circle) !important;
}

/* --- SEARCH OVERLAY STYLE --- */
.search-overlay {
    display: none; /* Ẩn mặc định */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 33, 109, 0.95); /* Màu nền xanh đậm theo tông web, độ mờ 95% */
    z-index: 9999;
    backdrop-filter: blur(5px); /* Hiệu ứng mờ nền phía sau */
    animation: fadeIn 0.3s ease-in-out;
}

.search-box-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 700px;
    text-align: center;
}

.search-input-custom {
    width: 100%;
    padding: 15px 60px 15px 20px;
    font-size: 1.5rem; /* Chữ to rõ cho mobile */
    color: #fff;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    outline: none;
    transition: all 0.3s;
}

    .search-input-custom:focus {
        border-bottom-color: #ff6b00; /* Màu accent cam của web */
    }

    .search-input-custom::placeholder {
        color: rgba(255, 255, 255, 0.6);
        font-style: italic;
    }

.btn-search-submit {
    position: absolute;
    right: 0;
    top: 15px;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    transition: 0.3s;
}

    .btn-search-submit:hover {
        color: #ff6b00;
    }

.search-close-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 2.5rem;
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
}

    .search-close-btn:hover {
        transform: rotate(90deg);
        color: #ff6b00;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Ẩn placeholder khi focus để đẹp hơn */
.search-input-custom:focus::placeholder {
    opacity: 0;
}