:root {
    --main-red: #d3000f;
    --dark-red: #a8000b;
    --main-blue: #0056b3;
    --light-blue: #e9f2fb;
    --text-color: #333;
    --bg-light: #f8f9fa;
}

body { font-family: Arial, Helvetica, sans-serif; color: var(--text-color); background-color: #fff; font-size: 14px; }
a { text-decoration: none; color: var(--text-color); }
a:hover { color: var(--main-red); }

.top-bar { background: var(--dark-red); color: #fff; font-size: 13px; padding: 8px 0; }
.top-bar i { margin-right: 5px; color: #ffeb3b; }

.header-middle { padding: 15px 0; background: #fff; border-bottom: 2px solid var(--main-red); }

.header-logo img { max-height: 65px; width: auto; transition: transform 0.2s ease; }
.header-logo img:hover { transform: scale(1.05); }

.brand-name { font-weight: 900; font-size: 20px; line-height: 1; color: var(--main-red); font-family: 'Arial Black', Impact, sans-serif; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15); letter-spacing: 0.5px; }
.brand-slogan { font-weight: 800; font-size: 11.5px; line-height: 1; color: #555; font-family: 'Arial Black', Impact, sans-serif; text-transform: uppercase; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); letter-spacing: 1px; white-space: nowrap; }

.tech-divider { display: flex; align-items: center; margin: 5px 0; width: 100%; }
.tech-divider .dot-main { width: 6px; height: 6px; background: #fff; border: 2px solid var(--main-red); border-radius: 50%; margin-right: 4px; box-shadow: 0 0 4px var(--main-red); }
.tech-divider .dot-sub { width: 3px; height: 3px; background: var(--main-red); border-radius: 50%; margin-right: 4px; }
.tech-divider .line-circuit { height: 1.5px; background: linear-gradient(90deg, var(--main-red) 0%, rgba(211,0,15,0) 100%); flex-grow: 1; }

.search-box { display: flex; background: #fff; border-radius: 8px; overflow: hidden; width: 100%; max-width: 600px; margin: 0 auto; border: 2px solid var(--main-red); box-shadow: 0 2px 8px rgba(211,0,15,0.05); }
.search-box input { border: none; padding: 12px 20px; width: 100%; outline: none; font-size: 14px; color: #333; }
.search-box button { background: var(--main-red); color: #fff; border: none; padding: 5px 25px; cursor: pointer; font-size: 18px; transition: 0.2s; }
.search-box button:hover { background: var(--dark-red); }

.header-contact-box { display: flex; align-items: center; justify-content: flex-end; gap: 25px; }
.header-contact-item { display: flex; align-items: center; gap: 12px; text-decoration: none; line-height: 1.3; }
.header-contact-item i { font-size: 32px; color: var(--main-red); transition: 0.2s; text-shadow: 1px 1px 3px rgba(0,0,0,0.1); }
.header-contact-item:hover i { transform: scale(1.1); color: var(--dark-red); }
.contact-title { color: #555; font-size: 13px; }
.contact-value { color: var(--main-red); font-size: 16px; font-weight: 900; }

.navbar-main { background: var(--main-red); display: block; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

.cat-menu-title { background: var(--dark-red); color: #fff; padding: 14px 20px; font-weight: 800; font-size: 15px; text-transform: uppercase; display: flex; align-items: center; cursor: pointer; }

.nav-links { display: flex; list-style: none; margin: 0; padding: 0; flex-wrap: wrap;}
.nav-links li a { color: #fff; display: block; padding: 14px 18px; font-weight: 700; text-transform: uppercase; font-size: 13px; transition: 0.2s;}
.nav-links li a:hover { background: var(--dark-red); color: #ffeb3b; }

.cat-menu-list { list-style: none; padding: 8px 0; margin: 0; border: 1px solid #ddd; border-top: none; background: #fff; position: relative; z-index: 90; border-radius: 0 0 8px 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05);}
.cat-menu-list > li { position: relative; }
.cat-menu-list > li > a { display: flex; align-items: center; padding: 8px 15px; color: #333; font-weight: 600; font-size: 14px; text-transform: none; transition: all 0.2s ease;}
.cat-menu-list > li > a .cat-icon { width: 25px; font-size: 18px; color: var(--main-red); text-align: center; margin-right: 10px;}
.cat-menu-list > li > a .cat-text { flex-grow: 1; }
.cat-menu-list > li > a .cat-chevron { font-size: 12px; color: #adb5bd; }
.cat-menu-list > li:hover > a { color: var(--main-red); background-color: #f8f9fa; }

.sub-menu { display: none; position: absolute; left: 100%; top: -8px; width: 800px; min-height: calc(100% + 16px); background: #fff; border: 1px solid #ddd; z-index: 100; box-shadow: 4px 4px 15px rgba(0,0,0,0.1); padding: 20px; border-radius: 0 8px 8px 0;}
.cat-menu-list > li:hover .sub-menu { display: flex; }
.sub-menu-col { width: 25%; padding-right: 15px; }
.sub-cat-header { display: block; margin-bottom: 10px; }
.sub-cat-header h6 { color: #333; font-weight: 700; font-size: 15px; margin: 0; text-transform: none; display: flex; align-items: center;}
.sub-cat-item { display: flex; align-items: center; padding: 6px 0; color: #555; font-size: 14px; text-transform: none; }
.sub-cat-item:hover { color: var(--main-red); }

.service-banners { margin-top: 25px; margin-bottom: 20px; }
.service-banner-img { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border: 2px solid #fff;}
.service-banner-img:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.2); border-color: var(--main-red);}
.price-filter-container { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-bottom: 30px; }
.price-btn { background-color: var(--main-red); color: #fff; padding: 10px 15px; border-radius: 8px; font-weight: bold; text-align: center; flex: 1; min-width: 130px; transition: all 0.3s; border: 2px solid var(--main-red); font-size: 15px;}
.price-btn:hover { background-color: #fff; color: var(--main-red); }
.promo-special-block { background: #fff; border: 2px solid var(--main-red); border-radius: 12px; overflow: hidden; margin-bottom: 40px; box-shadow: 0 5px 15px rgba(211,0,15,0.1);}
.promo-special-header { background-color: var(--main-red); color: #ffeb3b; text-align: center; padding: 15px; font-size: 24px; font-weight: 900; text-transform: uppercase; font-style: italic; letter-spacing: 1px;}
.promo-special-body { padding: 15px; }
.product-block-horizontal { margin-bottom: 40px; }

.block-header-horizontal { display: flex; align-items: center; flex-wrap: nowrap; justify-content: space-between; margin-bottom: 20px; gap: 15px; }

.block-title-horizontal { position: relative; font-size: 22px; font-weight: 900; color: var(--main-red); text-transform: uppercase; margin: 0; padding: 8px 30px 8px 15px; background: linear-gradient(90deg, rgba(211, 0, 15, 0.08) 0%, rgba(255, 255, 255, 0) 100%); border-left: 4px solid var(--main-red); white-space: nowrap; flex-shrink: 0; }

.block-title-horizontal::before { content: ''; position: absolute; top: 0; left: -4px; width: 45px; height: 2px; background: #fff; box-shadow: 0 0 6px rgba(211, 0, 15, 0.8); }

.block-title-horizontal::after { content: ''; position: absolute; bottom: 0; left: -4px; width: 25px; height: 2px; background: #fff; box-shadow: 0 0 6px rgba(211, 0, 15, 0.8); }

.sub-cat-pills { display: flex; flex-wrap: nowrap; gap: 10px; align-items: center; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.sub-cat-pills::-webkit-scrollbar { display: none; }

.cat-pill { background: #f4f7f9; color: #333; padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 600; transition: all 0.3s ease; border: 1px solid #dce4ec; white-space: nowrap; }

.cat-pill:hover,
.cat-pill:focus,
.cat-pill.active { background: #00a8ff; color: #fff; border-color: #00a8ff; box-shadow: 0 4px 10px rgba(0, 168, 255, 0.3); transform: translateY(-2px); }

.cat-pill-view-all { color: var(--main-red); font-weight: bold; font-size: 14px; padding-left: 5px; transition: 0.2s; white-space: nowrap; flex-shrink: 0; }

@media (min-width: 992px) { .col-lg-5th { flex: 0 0 auto; width: 20%; } }

.product-card { text-align: center; padding: 15px; border: 1px solid #e0e0e0; border-radius: 12px; transition: all 0.3s ease; position: relative; background: #fff; display: flex; flex-direction: column;}
.product-card:hover { border-color: var(--main-red); box-shadow: 0 8px 20px rgba(0,0,0,0.08); transform: translateY(-3px); z-index: 10000; }
.product-img { width: 100%; height: 180px; object-fit: contain; margin-bottom: 15px; transition: transform 0.3s ease;}
.product-card:hover .product-img { transform: scale(1.05); }
.product-name { font-size: 14px; font-weight: 600; color: #333; height: 40px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 10px;}
.product-name:hover { color: var(--main-red); }
.product-price { color: var(--main-red); font-size: 16px; font-weight: 800; }
.product-old-price { color: #999; text-decoration: line-through; font-size: 12px; margin-top: 2px;}
.discount-badge { position: absolute; top: 10px; right: 10px; background: #00a8ff; color: #fff; padding: 4px 8px; font-size: 12px; font-weight: bold; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,168,255,0.3);}

.floating-buttons { position: fixed; right: 15px; bottom: 50%; transform: translateY(50%); display: flex; flex-direction: column; gap: 10px; z-index: 999; }
.float-btn { width: 45px; height: 45px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; font-size: 24px; text-decoration: none; box-shadow: 0 2px 5px rgba(0,0,0,0.3); transition: 0.3s; }
.float-btn:hover { transform: scale(1.1); color: white;}
.btn-zalo { background: #0068ff; }
.btn-phone { background: #dc3545; }
.btn-messenger { background: #0084ff; }

.product-tooltip { position: absolute; top: 0; left: 105%; width: 350px; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease; text-align: left; pointer-events: none; }
.col-md-3:nth-child(4n) .product-tooltip, .col-md-3:nth-child(4n-1) .product-tooltip, .col-lg-5th:nth-child(5n) .product-tooltip, .col-lg-5th:nth-child(5n-1) .product-tooltip { left: auto; right: 105%; }
.product-card:hover .product-tooltip { opacity: 1; visibility: visible; }
.tooltip-header { text-align: center; font-size: 15px; font-weight: bold; padding: 12px; border-bottom: 2px solid var(--main-red); color: #333; }
.tooltip-body { padding: 15px; font-size: 13px; max-height: 350px; overflow-y: hidden; }
.tooltip-body table { width: 100% !important; border-collapse: collapse; }
.tooltip-body table th, .tooltip-body table td { padding: 8px; border: 1px solid #ddd; }
.tooltip-body table th { font-weight: bold; text-transform: uppercase; }
.tooltip-body table tr:nth-child(even) { background-color: #f9f9f9; }
.tooltip-body p { margin: 0 0 5px 0; }

.footer-wrapper { background: #f4f6f9; padding: 40px 0 20px 0; margin-top: 50px; border-top: 1px solid #e0e0e0; }
.footer-box { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 25px; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); overflow: hidden; }
.social-pill-container { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
.social-pill { display: flex; align-items: center; padding: 6px 15px; border: 1px solid #ddd; border-radius: 20px; font-size: 13px; font-weight: 600; color: #333; transition: all 0.3s ease; text-decoration: none; background: #fff;}
.social-pill:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-color: #bbb; color: #333;}
.social-pill i { font-size: 18px; margin-right: 8px; }
.social-facebook i { color: #1877F2; }
.social-youtube i { color: #FF0000; }
.social-tiktok i { color: #000000; }
.social-instagram i { background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.footer-bottom-links { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; font-weight: 500;}
.footer-bottom-links a { color: #444; border-right: 1px solid #ccc; padding-right: 10px;}
.footer-bottom-links a:last-child { border-right: none;}
.footer-bottom-links a:hover { color: var(--main-red); }
.footer-slider-wrapper { height: 100%; min-height: 250px; }
.footer-slider-wrapper img { width: 100%; height: 100%; min-height: 250px; object-fit: cover; border-left: 1px solid #eee;}
.cert-badges img { transition: 0.3s; cursor: pointer; }
.cert-badges img:hover { transform: scale(1.05); }
.footer-title { font-weight: 800 !important; white-space: nowrap !important; font-size: 14px !important; overflow: hidden; text-overflow: ellipsis; }
.footer-info-list, .footer-link-list { list-style: none !important; padding-left: 0 !important; margin: 0; }
.footer-info-list li, .footer-link-list li { margin-bottom: 12px; }
.footer-link-item { color: #444; font-size: 14px; text-decoration: none; transition: 0.3s; display: inline-block; }
.footer-link-item:hover { color: var(--main-red); transform: translateX(2px); }