/* =========================================================
   1. RESET CSS
========================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background: #fff;
    padding-top:195px;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
a {
    color: inherit;
    text-decoration: none;
}
ul,
ol {
    list-style: none;
}
button,
input,
textarea,
select {
    font-family: inherit;
}
button {
    cursor: pointer;
}
/* =========================================================
   2. BIẾN MÀU SẮC
========================================================= */
:root {
    --primary: #d71920;
    --primary-dark: #b51218;
    --primary-logo: #003399;
    --secondary: #1f2937;
    --text: #333333;
    --text-light: #666666;
    --white: #ffffff;
    --black: #000000;
    --border: #e5e5e5;
    --background: #f5f6f8;
    --success: #198754;
    --warning: #f59e0b;
    --container: 1200px;
    --radius-small: 4px;
    --radius: 8px;
    --radius-large: 12px;
    --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow: 0 5px 20px rgba(0, 0, 0, 0.10);
}
/* =========================================================
   3. CONTAINER
========================================================= */

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}


/* =========================================================
   4. HEADER
========================================================= */
.header {
    width: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}
.header-top {
    background: var(--secondary);
    color: var(--white);
    font-size: 14px;
}
.header-top .container {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-main {
    padding: 15px 0;
}
.header-main .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.logo {
    flex: 0 0 auto;
}
.logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.logo img {
    width: auto;
    height: 80px;
    max-width: 100px;
    object-fit: contain;
}
.logo a > div:last-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.logo strong {
    display: block;
    color: var(--primary-logo);
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
}
.logo span {
    display: block;
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.4;
    margin-top: 3px;
}
/* =========================================================
   5. SEARCH
========================================================= */
.search-box {
    flex: 1;
    max-width: 550px;
    position: relative;
}
.search-box form {
    display: flex;
    width: 100%;
}
.search-box input {
    width: 100%;
    height: 44px;
    padding: 0 50px 0 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    font-size: 15px;
}
.search-box input:focus {
    border-color: var(--primary);
}
.search-box button {
    width: 45px;
    height: 44px;
    border: 0;
    background: var(--primary);
    color: var(--white);
    border-radius: 0 var(--radius) var(--radius) 0;
    position: absolute;
    right: 0;
    top: 0;
}
/* =========================================================
   6. HEADER CONTACT
========================================================= */
.header-contact {
    display: flex;
    align-items: center;
    gap: 20px;
}
.header-contact-item {
    display: block;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.header-contact-item strong {
    display: inline-block;
    font-size: 20px;
    padding: 3px 20px;
    width: fit-content;
    margin: auto;
    background: var(--warning);
    color: var(--primary-logo);
    border-radius: 5px;
    font-weight: 600;
    text-shadow: 0px 1px 1px #fff;
    animation: toasang 2s infinite;
}
@keyframes toasang {
    0% {
        box-shadow: 0 0 0 rgba(255, 210, 0, 0);
    }

    50% {
        box-shadow: 0 0 15px rgba(255, 210, 0, 0.9);
    }

    100% {
        box-shadow: 0 0 0 rgba(255, 210, 0, 0);
    }
}
.header-contact-item span {
    display: block;
    text-align: center;
    font-size: 13px;
    color: var(--text-light);
    margin-top: 5px;
}
.header-contact-item strong {
    display: block;
    color: var(--primary);
}
.header-contact-item span {
    font-size: 13px;
    color: var(--text-light);
}
/* =========================================================
   MAIN MENU
========================================================= */
.main-menu-mobile {
    display: none;
}
.mobile-menu-close {
     display: none;
}
.main-menu {
    width: 100%; 
    background: var(--primary); 
    position: relative; 
    z-index: 9999; 
}
.main-menu > .container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu-level-1 {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
.menu-level-1 > li {
    position: relative;
}
/* =========================================================
   MENU CHÍNH
========================================================= */
.menu-level-1 > li > a {
    min-height: 50px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--border);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.25s ease;
}
.menu-level-1 > li:hover > a {
    background: var(--primary-dark);
}
/* MŨI TÊN */
.menu-arrow {
    font-size: 10px;
    font-weight: normal;
    transition: transform 0.25s ease;
}
.menu-level-1 > li:hover > a .menu-arrow {
    transform: rotate(180deg);
}
/* =========================================================
   MEGA MENU - CẤP 2
========================================================= */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 300px;
    display: none;
    background: var(--border);

    border-top: 3px solid var(--primary);

    box-shadow: 0 8px 25px var(--black);

    z-index: 99999;
}
/* Hover DANH MỤC SẢN PHẨM */
.menu-products:hover > .mega-menu {
    display: block;
}
/* CỘT MENU */
.mega-column {
    width: 100%;
}
/* =========================================================
   ITEM CẤP 2
========================================================= */
.mega-item {
    position: static;
    width: 100%;
}
.mega-item > a {
    min-height: 48px;
    width: 100%;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color:var(--secondary);
    background:var(--border);
    border-bottom: 1px solid var(--background);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    transition: all 0.2s ease;
}
/* Hover cấp 2 */
.mega-item:hover > a {
    background: var(--border);
    color: var(--primary);
    padding-left: 20px;
}
/* MŨI TÊN BÊN PHẢI */
.mega-item > a b {
    font-size: 11px;
    color: var(--secondary);
    flex-shrink: 0;
}
/* =========================================================
   MENU CẤP 3
========================================================= */
.mega-item > .mega-submenu {
  position: absolute;
    top: 0;
    left: 100%;
    width: 375px;
    display: none;
    background: var(--background);
    border-top: 3px solid var(--primary);
    box-shadow: 5px 8px 25px var(--black);
    z-index: 100000;
}
/* Hover cấp 2 → mở cấp 3 */
.mega-item:hover > .mega-submenu {
    display: block;
}
/* =========================================================
   LINK CẤP 3
========================================================= */
.mega-submenu > a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 16px;
    color: var(--black);
    background: var(--background);
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    line-height: 1.4;
    transition: all 0.2s ease;
}
/* Hover cấp 3 */
.mega-submenu > a:hover {
    background: var(--border);
    color: var(--primary);
    padding-left: 23px;
}
/* =========================================================
   CẤP 4
========================================================= */
.mega-submenu .mega-item > .mega-submenu {
    left: 100%;
    top: 0;
}
/* =========================================================
   DROPDOWN THƯỜNG
   Camera Wifi / Giải pháp
========================================================= */
.simple-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 270px;
    display: none;
    background: var(--background);
    border-top: 3px solid var(--primary);
    box-shadow: 0 8px 25px var(--black);
    z-index: 99999;
}
.menu-item-has-children:hover > .simple-dropdown {
    display: block;
}
.simple-dropdown > a {
    display: block;
    padding: 11px 15px;
    color: var(--secondary);
    background: var(--background);
    font-size: 14px;
    border-bottom: 1px solid var(--border);
    transition: all 0.2s ease;
}
.simple-dropdown > a:hover {
    background: var(--border);
    color: var(--primary);
    padding-left: 22px;
}
/* =========================================================
   9. BANNER
========================================================= */
.section-banner {
    width: 100%;
    display: grid;
    /*
       15% banner trái
       70% slider giữa
       15% banner phải
    */
    grid-template-columns: 15fr 70fr 15fr;
    gap: 8px;
    padding: 8px 0;
    background: var(--background);
    box-sizing: border-box;
}
/* =========================================
   BANNER TRÁI + PHẢI
========================================= */
.banner-left,
.banner-rightt {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
/* =========================================
   LINK BANNER NHỎ
========================================= */
.banner-left a,
.banner-rightt a {
    display: block;
    width: 100%;
    height: calc(50% - 4px);
    overflow: hidden;
    border-radius: 3px;
    line-height: 0;
}
/* =========================================
   HÌNH BANNER NHỎ
========================================= */
.banner-left img,
.banner-rightt img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
/* Hiệu ứng rê chuột */
.banner-left a:hover img,
.banner-rightt a:hover img {
    transform: scale(1.03);
}
/* =========================================
   SLIDER CHÍNH
========================================= */
.banner-center {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    background:var(--background);
    border-radius: 3px;
    /*
       Tỷ lệ gần giống banner trong hình
    */
    aspect-ratio: 100 / 53;
}
/* =========================================
   KHUNG SLIDER
========================================= */
.slider-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
/* =========================================
   TRACK CHỨA CÁC SLIDE
========================================= */
.slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease-in-out;
    will-change: transform;
}
/* =========================================
   TỪNG SLIDE
========================================= */
.slider-track a {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: block;
    min-width: 100%;
}
/* =========================================
   HÌNH SLIDER
========================================= */
.slider-track img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* =========================================
   NÚT PREV / NEXT
========================================= */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 54px;
    height: 54px;
    border: none;
    border-radius: 50%;
    background: var(--secondary);
    color: var(--background);
    font-size: 32px;
    line-height: 54px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}
/* Nút trái */
.slider-prev {
    left: 15px;
}
/* Nút phải */
.slider-next {
    right: 15px;
}
/* Hover */
.slider-btn:hover {
    background: var(--black);
    transform: translateY(-50%) scale(1.05);
}
/* =========================================
   DOT SLIDER
========================================= */
.slider-dots {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
/* Từng dot */
.slider-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    transition:
        width 0.25s ease,
        background 0.25s ease;
}
.slider-dot.active {
    width: 25px;
    border-radius: 10px;
    background: var(--background);
}
/* hãng camera */
/* =====================================================
   HÃNG CAMERA AN NINH WIFI
===================================================== */
.camera-brand-section {
    width: 100%;
    background: var(--background);
    box-sizing: border-box;
}
.camera-brand-container {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
    box-sizing: border-box;
}
/* =====================================================
   TIÊU ĐỀ
===================================================== */
.camera-brand-title {
    margin: 0 0 15px;
    padding: 0;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--secondary);
}
/* =====================================================
   KHU VỰC LOGO
===================================================== */
.camera-brand-showcase {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
/* =====================================================
   KHUNG LOGO
===================================================== */
.camera-brand-window {
    width: 100%;
    overflow: hidden;
    padding: 5px 45px;
    box-sizing: border-box;
}
/* =====================================================
   DANH SÁCH LOGO
===================================================== */
.camera-brand-track {
    display: flex;
    width: 100%;
    transition: transform 0.8s ease-in-out;
    will-change: transform;
}
/* =====================================================
   LOGO
===================================================== */
.camera-brand-item {
    flex: 0 0 20%;
    width: 20%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    box-sizing: border-box;
    text-decoration: none;
}
/* =====================================================
   HÌNH LOGO
===================================================== */
.camera-brand-item img {
    display: block;
    max-width: 100%;
    max-height: 65px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.8;
    transition:
        filter 0.3s ease,
        opacity 0.3s ease,
        transform 0.3s ease;
}
/* =====================================================
   HOVER LOGO
===================================================== */
.camera-brand-item:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05);
}
/* =====================================================
   NÚT TRÁI / PHẢI
===================================================== */
.camera-brand-prev,
.camera-brand-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 50px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--border);
    font-size: 38px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}
/* Nút trái */
.camera-brand-prev {
    left: 0;
}
/* Nút phải */
.camera-brand-next {
    right: 0;
}
/* Hover nút */
.camera-brand-prev:hover,
.camera-brand-next:hover {
    color: #555;
    transform:
        translateY(-50%)
        scale(1.08);
}
/* =====================================================
   NUMBER PHONE
===================================================== */
.number-phone-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 10px 0;
    box-sizing: border-box;
}
/* =====================================================
   TỪNG Ô
===================================================== */
.number-phone-item {
    min-width: 0;
    height: 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:var(--background);
    border: 1px solid var(--border);
    border-radius: 11px;
    text-decoration: none;
    box-sizing: border-box;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}
/* =====================================================
   TIÊU ĐỀ
===================================================== */
.number-phone-title {
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--border);
    color: var(--black);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
}
/* =====================================================
   SỐ ĐIỆN THOẠI
===================================================== */
.number-phone-content {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
    color: var(--primary-logo);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}
/* =====================================================
   HOVER
===================================================== */
.number-phone-item:hover {
    border-color: #2edbc0;
    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.08);

    transform: translateY(-2px);
}
.number-phone-item:hover .number-phone-content {
    color: var(--primary-logo);
}
/* =====================================================
   Ô TẢI VỀ
===================================================== */
.number-phone-download {
    flex-direction: row;
    gap: 14px;
    background: var(--background);
    padding: 8px 20px;
}
/* =====================================================
   ICON TẢI VỀ
===================================================== */
.number-phone-download-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #2edbc0;
    color: var(--secondary);
    font-size: 38px;
    font-weight: 400;
    line-height: 1;
    box-sizing: border-box;
}
/* =====================================================
   CHỮ TẢI VỀ
===================================================== */
.number-phone-download-text {
    color: var(--primary-logo);
    font-size: 27px;
    font-weight: 700;
    white-space: nowrap;
}
/* =========================================================
   10. container-product
========================================================= */
.section {
    padding: 5px 0;
}
/*sản phầm*/
.container-product,
.container-product-01,
.container-product-02,
.container-product-03 {
    width: 100%;
    margin: 25px auto;
    padding: 28px 25px 30px;
    background: var(--background);
    border-radius: 16px;
    box-sizing: border-box;
    border: 1px solid var(--background);
    box-shadow:
        0 2px 10px var(--text-light);
}
.container-product .section-title,
.container-product-01 .section-title,
.container-product-02 .section-title,
.container-product-03 .section-title {
    position: relative;
    margin: 0 0 25px;
    padding: 0 0 17px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.container-product .section-title::after,
.container-product-01 .section-title::after,
.container-product-02 .section-title::after,
.container-product-03 .section-title::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 70px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 10px;
}
.container-product .section-title h2,
.container-product-01 .section-title h2,
.container-product-02 .section-title h2,
.container-product-03 .section-title h2 {
    margin: 0 0 7px;
    padding: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.3px;
}
.container-product .section-title p,
.container-product-01 .section-title p,
.container-product-02 .section-title p,
.container-product-03 .section-title p {
    margin: 0;
    padding: 0;
    color: #777777;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
}
/* =====================================================
   MÀU MẶC ĐỊNH
   .container-product
===================================================== */
.container-product {
    border-top: 3px solid #d32f2f;
}
.container-product .section-title h2 {
    color: #d32f2f;
}
.container-product .section-title::after {

    background: linear-gradient(
        90deg,
         #d32f2f,
         #d44848
    );
}


/* =====================================================
   product-01
===================================================== */

.container-product-01 {

    border-top: 3px solid var(--primary-logo);
}


.container-product-01 .section-title h2 {

    color: #0866d8;
}
.container-product-01 .section-title::after {

    background: linear-gradient(
        90deg,
        var(--primary-logo),
        #38a9ff
    );
}
/* =====================================================
  product-02
==================================================== */
.container-product-02 {

    border-top: 3px solid #087f5b;
}
.container-product-02 .section-title h2 {

    color: #087f5b;
}
.container-product-02 .section-title::after {

    background: linear-gradient(
        90deg,
        #087f5b,
        #20c997
    );
}
/* =====================================================
  product-03
===================================================== */
.container-product-03 {

    border-top: 3px solid #e76f00;
}
.container-product-03 .section-title h2 {

    color: #e76f00;
}
.container-product-03 .section-title::after {

    background: linear-gradient(
        90deg,
        #e76f00,
        #ffad33
    );
}
/* =========================================================
   11. LAYOUT 2 CỘT
========================================================= */
.content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 30px;
}
.content-main {
    min-width: 0;
}
.sidebar {
    min-width: 0;
}
/* =========================================================
   12. PRODUCT GRID
========================================================= */
.product-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 15px;
    position: relative;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.product-item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    min-width: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}
.product-image {
    position: relative;
    overflow: hidden;
    background: #f8f8f8;
    width: 100%;
}
.product-image a {
    display: block;
    width: 100%;
}
.product-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.product-item:hover .product-image img {
    transform: scale(1.04);
}
.product-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 4px 8px;
    background: #e53935;
    color: #fff;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
}
.product-content {
    padding: 12px;
    min-width: 0;
}
.product-title {
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 8px;
    color: var(--secondary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(16px * 1.4 * 2);
}
.product-title a {
    color: inherit;
    text-decoration: none;
}
.product-title a:hover {
    color: var(--primary);
}
.product-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 7px;
}

.product-pric-sale {
    color: var(--primary);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    white-space: nowrap;
}
.product-pric-cost,
.product-old-price {
    color: #999;
    text-decoration: line-through;
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
}
.product-description {
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.5;
    margin: 7px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/*xử lý cho số lượng sản phẩm trong list */
/* =========================================================
   CONTAINER-PRODUCT
   Mặc định hiển thị tối đa 2 dòng
========================================================= */
.container-product .product-grid.is-collapsed {
    max-height: var(--grid-height);
}
/* =========================================================
   CONTAINER-PRODUCT-01
   CONTAINER-PRODUCT-02
   CONTAINER-PRODUCT-03
   Mặc định hiển thị tối đa 1 dòng
========================================================= */
.container-product-01 .product-grid.is-collapsed,
.container-product-02 .product-grid.is-collapsed,
.container-product-03 .product-grid.is-collapsed {
    max-height: var(--grid-height);
}
/* =========================================================
   HIỆU ỨNG MỜ Ở CUỐI DANH SÁCH
========================================================= */
.product-grid.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45px;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0),
        #ffffff
    );
}


/* =========================================================
   NÚT XEM THÊM / THU GỌN
========================================================= */

.product-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 15px auto 0;
    padding: 8px 20px;
    background: #ffffff;
    border: 1px solid currentColor;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    z-index: 5;
}
/* Khi có nhiều sản phẩm thì hiện nút */
.product-toggle.show {
    display: flex;
}
/* =========================================================
   MÀU NÚT THEO TỪNG CONTAINER
========================================================= */
.container-product .product-toggle {
    color: #d32f2f;
}
.container-product-01 .product-toggle {
    color: #0866d8;
}
.container-product-02 .product-toggle {
    color: #087f5b;
}
.container-product-03 .product-toggle {
    color: #e76f00;
}
/* Hover */
.product-toggle:hover {
    background: currentColor;
    color: #ffffff;
}


/* =========================================================
   ICON MŨI TÊN
========================================================= */
.product-toggle .toggle-icon {
    display: inline-block;

    font-size: 13px;
    line-height: 1;

    transition: transform 0.25s ease;
}
.product-toggle.expanded .toggle-icon {
    transform: rotate(180deg);
}
.product-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}
.product-controls .product-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    padding: 8px 18px;
    background: #ffffff;
    border: 1px solid currentColor;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}
.product-controls .toggle-icon {
    font-size: 14px;
    line-height: 1;
}
.container-product .product-controls .product-toggle {
    color: #d32f2f;
}
.container-product-01 .product-controls .product-toggle {
    color: #0866d8;
}
.container-product-02 .product-controls .product-toggle {
    color: #087f5b;
}
.container-product-03 .product-controls .product-toggle {
    color: #e76f00;
}
.product-controls .product-toggle:hover {
    background: currentColor;
    color: #ffffff;
}

/* =========================================================
   14. PRODUCT BADGE
========================================================= */
.product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 8px;
    background: var(--primary);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-small);
}


/* =========================================================
   15. BUTTON
========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    transition: 0.3s;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-outline {
    border: 1px solid var(--primary);
    color: var(--primary);
    background: var(--white);
}

.btn-outline:hover {
    background: var(--primary);
    color: var(--white);
}


/* =========================================================
   16. BOX NỘI DUNG
========================================================= */

.box {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
}

.box-title {
    font-size: 20px;
    color: var(--secondary);
    font-weight: 700;
    padding-bottom: 12px;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--primary);
}


/* =========================================================
   17. SIDEBAR
========================================================= */

.sidebar-box {
    background: var(--white);
    border: 1px solid var(--border);
    margin-bottom: 20px;
    border-radius: var(--radius);
    overflow: hidden;
}

.sidebar-title {
    background: var(--primary);
    color: var(--white);
    padding: 12px 15px;
    font-size: 17px;
    font-weight: 700;
}

.sidebar-menu li {
    border-bottom: 1px solid var(--border);
}

.sidebar-menu li:last-child {
    border-bottom: 0;
}

.sidebar-menu li a {
    display: block;
    padding: 11px 15px;
    color: var(--text);
    transition: 0.3s;
}

.sidebar-menu li a:hover {
    color: var(--primary);
    padding-left: 20px;
}


/* =========================================================
   18. BÀI VIẾT
========================================================= */
.news-section-title {
    position: relative;
    margin: 25px 0 25px;
    padding: 0 0 17px;
    text-align: center;
    border-bottom: 1px solid #eeeeee;
}

.news-section-title::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 70px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 10px;
    background: linear-gradient(90deg, #d32f2f, #e53935);
}

.news-section-title h2 {
    margin: 0 0 7px;
    padding: 0;
    color: #d32f2f;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.news-section-title p {
    margin: 0;
    padding: 0;
    color: #777777;
    font-size: 15px;
    line-height: 1.5;
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.news-item {
    display: grid;
    grid-template-columns: 36% minmax(0, 64%);
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-sizing: border-box;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.news-item:hover {
    border-color: #dcdcdc;
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
}

.news-item:nth-child(n + 5) {
    display: none;
}

.news-image {
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    background: #f5f5f5;
}
.news-image a {
    display: block;
    width: 100%;
    height: 100%;
}
.news-image img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.news-item:hover .news-image img {
    transform: scale(1.04);
}
.news-content {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "badge badge"
        "title title"
        "views views"
        "description description"
        "date date";
    align-content: center;
    min-width: 0;
    padding: 18px 22px;
    box-sizing: border-box;
}
.news-badge {
    grid-area: badge;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0 0 10px;
    padding: 4px 9px;
    color: #111111;
    background: #ffd000;
    border-radius: 5px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
    white-space: nowrap;
}
.news-title {
    grid-area: title;
    margin: 0 0 7px;
    padding: 0;
    color: #222222;
    font-size: 21px;
    line-height: 1.35;
    font-weight: 700;
    min-width: 0;
}
.news-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.news-title a:hover {
    color: #d32f2f;
}
.news-meta {
    display: contents;
}
.news-views {
    grid-area: views;
    display: flex;
    align-items: center;
    margin: 0 0 12px;
    color: #999999;
    font-size: 13px;
    line-height: 1.4;
}
.news-views i {
    margin-right: 5px;
    font-style: normal;
}
.news-description {
    grid-area: description;
    margin: 0 0 13px;
    padding: 0;
    color: #666666;
    font-size: 14px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-date {
    grid-area: date;
    display: flex;
    align-items: center;
    margin: 0;
    color: #999999;
    font-size: 13px;
    line-height: 1.4;
}
.news-date i {
    margin-right: 5px;
    font-style: normal;
}
.news-more {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    text-align: center;
}

.news-more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 170px;
    padding: 10px 20px;
    color: #ffffff;
    background: #d32f2f;
    border: 1px solid #d32f2f;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.news-more-button strong {
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    transition: transform 0.25s ease;
}
.news-more-button:hover {
    color: #ffffff;
    background: #b71c1c;
    border-color: #b71c1c;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(211, 47, 47, 0.25);
}
.news-more-button:hover strong {
    transform: translateX(4px);
}

/* NÚT Gọi Điện Và Zalo */
.fixed-contact {
position: fixed;
right: 20px;
bottom: 25px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 12px;
}

.contact-phone,
.contact-zalo {
position: relative;
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
transition: all 0.3s ease;
}

.contact-phone img,
.contact-zalo img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 50%;
}

.contact-phone {
animation: phone-animation 2s infinite;
}

.contact-zalo {
animation: zalo-animation 2s infinite;
}

.contact-phone,
.contact-zalo {
transform: scale(1.15);
box-shadow: 0 6px 22px #3e576f59;
}

@keyframes phone-animation {
0%,
100% {
transform: translateY(0);
}

10% {
    transform: translateY(-5px);
}

20% {
    transform: translateY(0);
}

30% {
    transform: translateY(-5px);
}

40% {
    transform: translateY(0);
}

}

@keyframes zalo-animation {
0%,
100% {
transform: scale(1);
}

10% {
    transform: scale(1.08);
}

20% {
    transform: scale(1);
}

}


/* =========================================================
   19. BẢNG THÔNG SỐ
========================================================= */

.spec-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 15px;
}

.spec-table th,
.spec-table td {
    border: 1px solid var(--border);
    padding: 11px 12px;
    text-align: left;
}

.spec-table th {
    background: var(--secondary);
    color: var(--white);
    font-weight: 600;
}

.spec-table tr:nth-child(even) td {
    background: #f8f8f8;
}

.spec-table tr:hover td {
    background: #fff3f3;
}


/* =========================================================
   20. BREADCRUMB
========================================================= */

.breadcrumb {
    padding: 12px 0;
    font-size: 14px;
    color: var(--text-light);
}

.breadcrumb a {
    color: var(--primary);
}

.breadcrumb span {
    margin: 0 6px;
}


/* =========================================================
   21. FORM
========================================================= */

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.form-control {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    font-size: 15px;
}

.form-control:focus {
    border-color: var(--primary);
}


/* =========================================================
   22. FOOTER
========================================================= */

.footer {
    background: var(--secondary);
    color: #ddd;
    margin-top: 40px;
}

.footer-main {
    padding: 45px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 30px;
}

.footer-title {
    color: var(--white);
    font-size: 18px;
    margin-bottom: 15px;
}

.footer p {
    font-size: 14px;
    margin-bottom: 8px;
}

.footer ul li {
    margin-bottom: 8px;
}

.footer ul li a {
    color: #ddd;
    font-size: 14px;
}

.footer ul li a:hover {
    color: var(--white);
    text-decoration: underline;
}

.footer-bottom {
    border-top: 3px solid rgba(250, 250, 250, 0.1);
    padding: 15px 0;
    text-align: center;
    font-size: 14px;
}
/* =========================================================
   23. PAGINATION
========================================================= */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 30px;
}
.pagination a,
.pagination span {
    min-width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
}

.pagination a:hover,
.pagination .active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}


/* =========================================================
   24. MOBILE MENU
========================================================= */

.menu-mobile {
    display: none;
}
/* =========================================================
   25. RESPONSIVE - TABLET
========================================================= */

@media (max-width: 992px) {

    :root {
        --container: 960px;
    }
    .header-main {
        padding: 10px 0;
    }
    .header-contact {
        display: none;
    }

    .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .content-layout {
        grid-template-columns: minmax(0, 1fr) 250px;
        gap: 20px;
    }

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

    .main-menu li a {
        padding: 12px 10px;
        font-size: 14px;
    }
    /*slider*/
      .section-banner {
        gap: 6px;
        padding: 6px 0;
    }
    .banner-left,
    .banner-rightt {
        gap: 6px;
    }

    .slider-btn {
        width: 44px;
        height: 44px;

        font-size: 26px;

        line-height: 44px;
    }

    .slider-prev {
        left: 10px;
    }

    .slider-next {
        right: 10px;
    }

    .slider-dots {
        bottom: 8px;
    }
    /* brand */
     .camera-brand-title {
        font-size: 24px;
    }

    .camera-brand-window {
        padding-left: 40px;
        padding-right: 40px;
    }

    .camera-brand-item {
        flex: 0 0 25%;
        width: 25%;

        height: 80px;

        padding: 8px 12px;
    }

    .camera-brand-item img {
        max-height: 55px;
    }

    .camera-brand-prev,
    .camera-brand-next {
        width: 35px;
        font-size: 32px;
    }
    /*number phone*/
    .number-phone-wrapper {
        gap: 10px;
    }

    .number-phone-item {
        height: 76px;
    }

    .number-phone-title {
        height: 34px;
        font-size: 19px;
    }

    .number-phone-content {
        font-size: 22px;
    }

    .number-phone-download {
        gap: 10px;
        padding: 6px 12px;
    }

    .number-phone-download-icon {
        width: 46px;
        height: 46px;

        flex-basis: 46px;

        font-size: 32px;
    }

    .number-phone-download-text {
        font-size: 23px;
    }
    /* container */
    .container-product,
    .container-product-01,
    .container-product-02,
    .container-product-03 {

        margin: 20px auto;

        padding: 24px 20px 27px;

        border-radius: 14px;
    }


    .container-product .section-title,
    .container-product-01 .section-title,
    .container-product-02 .section-title,
    .container-product-03 .section-title {

        margin-bottom: 22px;

        padding-bottom: 15px;

        text-align: center;
    }


    .container-product .section-title h2,
    .container-product-01 .section-title h2,
    .container-product-02 .section-title h2,
    .container-product-03 .section-title h2 {

        font-size: 25px;
    }


    .container-product .section-title p,
    .container-product-01 .section-title p,
    .container-product-02 .section-title p,
    .container-product-03 .section-title p {

        font-size: 14px;
    }


    .container-product .section-title::after,
    .container-product-01 .section-title::after,
    .container-product-02 .section-title::after,
    .container-product-03 .section-title::after {

        width: 60px;

        height: 3px;
    }
    /*Tin Tức*/
    .news-item {
        grid-template-columns: 38% minmax(0, 62%);
    }

    .news-content {
        padding: 16px 18px;
    }

    .news-title {
        font-size: 19px;
    }

    .news-description {
        font-size: 14px;
    }
}

@media (max-width: 789px) {
    .news-section-title {
        margin: 20px 0;
    }

    .news-section-title h2 {
        font-size: 24px;
    }

    .news-section-title p {
        font-size: 14px;
    }

    .news-list {
        gap: 15px;
    }

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

    .news-image {
        width: 100%;
        height: auto;
    }

    .news-image a {
        height: auto;
    }

    .news-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        object-fit: cover;
    }

    .news-content {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "badge"
            "title"
            "views"
            "description"
            "date";
        padding: 15px 16px 17px;
    }

    .news-badge {
        margin-bottom: 8px;
        font-size: 12px;
    }

    .news-title {
        margin-bottom: 6px;
        font-size: 18px;
        line-height: 1.4;
    }

    .news-views {
        margin-bottom: 9px;
        font-size: 12px;
    }

    .news-description {
        margin-bottom: 10px;
        font-size: 13px;
        line-height: 1.55;
    }

    .news-date {
        font-size: 12px;
    }
}



@media (max-width: 768px) {
    .header-main {
        padding: 3px 0;
    }
    /* =====================================================
       NÚT ☰
    ===================================================== */

    .menu-mobile.mobile-menu-button {

        width: 50px;
        height: 40px;
        padding: 0;
        margin: 0;

        display: flex;

        align-items: center;
        justify-content: center;

        background: #ffffff;

        color: #111111;

        border: 0;
        border-radius: 6px;

        cursor: pointer;

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);

        transition:
            background 0.25s ease,
            transform 0.2s ease,
            box-shadow 0.25s ease;
    }


    .menu-mobile.mobile-menu-button:hover {

        background: #f4faff;

        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.15);
    }


    .menu-mobile.mobile-menu-button:active {

        transform: scale(0.95);
    }


    /* =====================================================
       ICON ☰ 3 GẠCH
    ===================================================== */

    .menu-mobile-icon {

        width: 24px;
        height: 20px;

        display: flex;

        flex-direction: column;

        justify-content: space-between;
    }


    .menu-mobile-icon span {

        display: block;

        width: 100%;
        height: 2px;

        background: #111111;

        border-radius: 3px;

        transition:
            transform 0.3s ease,
            opacity 0.3s ease;
    }


    /* =====================================================
       OVERLAY
    ===================================================== */

    .mobile-menu-overlay {

        position: fixed;

        top: 0;
        left: 0;

        width: 100%;
        height: 100vh;

        background: rgba(0, 0, 0, 0.42);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        z-index: 999998;

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease;
    }


    /* =====================================================
       OVERLAY KHI MENU MỞ
    ===================================================== */

    body.mobile-menu-open .mobile-menu-overlay {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;
    }


    /* =====================================================
       MENU MOBILE
       GHI ĐÈ display:none CŨ
    ===================================================== */

    .main-menu {

        display: block !important;

        position: fixed;

        top: 0;
        left: -100%;

        width: 390px;
        max-width: 88vw;

        height: 100vh;

        padding: 0;
        margin: 0;

        background: #eaf6fd;

        z-index: 999999;

        overflow-x: hidden;
        overflow-y: auto;

        box-shadow:
            8px 0 30px rgba(0, 0, 0, 0.18);

        transition:
            left 0.35s cubic-bezier(.4, 0, .2, 1);
    }


    /* =====================================================
       MENU ĐƯỢC MỞ
    ===================================================== */

    .main-menu.is-open {

        left: 0;
    }


    /* =====================================================
       CONTAINER BÊN TRONG MENU
    ===================================================== */
    .main-menu-mobile {
        width: 100%; 
        background: var(--primary); 
        display: block;
        padding:5px 10px ;
    }

    .main-menu > .container {

        width: 100%;
        max-width: none;

        padding: 0;

        display: block;
    }


    /* =====================================================
       NÚT ✕
    ===================================================== */

    .mobile-menu-close {

        position: absolute;

        top: 14px;
        right: 15px;

        width: 42px;
        height: 42px;

        padding: 0;
        margin: 0;

        display: flex;

        align-items: center;
        justify-content: center;

        background: #000000;

        border: 0;
        border-radius: 50%;

        cursor: pointer;

        z-index: 20;

        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.18);

        transition:
            background 0.25s ease,
            transform 0.25s ease;
    }


    .mobile-menu-close:hover {

        background: #222222;

        transform: rotate(90deg);
    }


    .mobile-menu-close span {

        position: absolute;

        width: 20px;
        height: 2px;

        background: #ffffff;

        border-radius: 2px;
    }


    .mobile-menu-close span:first-child {

        transform: rotate(45deg);
    }


    .mobile-menu-close span:last-child {

        transform: rotate(-45deg);
    }


    /* =====================================================
       BODY - KHÓA CUỘN KHI MENU MỞ
    ===================================================== */

    body.mobile-menu-open {

        overflow: hidden;
    }


    /* =====================================================
       THANH CUỘN MENU
    ===================================================== */

    .main-menu::-webkit-scrollbar {

        width: 5px;
    }


    .main-menu::-webkit-scrollbar-track {

        background: #dceef7;
    }


    .main-menu::-webkit-scrollbar-thumb {

        background: #83cbe8;

        border-radius: 20px;
    }


    .main-menu::-webkit-scrollbar-thumb:hover {

        background: #009ee8;
    }


    /* =====================================================
       MENU CẤP 1
    ===================================================== */

    .menu-level-1 {

        width: 100%;

        display: block;

        padding: 65px 20px 30px;

        margin: 0;
    }


    .menu-level-1 > li {

        width: 100%;

        position: relative;

        margin: 0;
        padding: 0;

        border-bottom: 1px solid #c7dce8;
    }


    .menu-level-1 > li > a {

        width: 100%;

        min-height: 52px;

        padding: 12px 6px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 10px;

        color: #18232c;

        background: transparent;

        font-size: 17px;

        font-weight: 500;

        line-height: 1.4;

        text-align: left;

        white-space: normal;

        transition:
            color 0.25s ease,
            background 0.25s ease,
            padding-left 0.25s ease;
    }


    .menu-level-1 > li > a:hover {

        color: #006fd6;

        background: rgba(255,255,255,0.65);

        padding-left: 12px;
    }


    /* =====================================================
       MŨI TÊN CẤP 1
    ===================================================== */

    .menu-level-1 > li > a .menu-arrow {

        flex: 0 0 30px;

        width: 30px;
        height: 30px;

        display: flex;

        align-items: center;
        justify-content: center;

        color: #111111;

        border-radius: 50%;

        transition:
            transform 0.3s ease,
            background 0.25s ease;
    }


    .menu-level-1 > li > a:hover .menu-arrow {

        background: #d6edf8;
    }


    /* =====================================================
       MENU CẤP 2
    ===================================================== */

    .mega-menu {

        position: static !important;

        width: 100% !important;

        display: none;

        padding: 0 0 7px;

        margin: 0;

        background: transparent;

        border: 0;

        box-shadow: none;
    }


    /* Khi cấp 2 mở */

    .mega-item.is-open > .mega-menu,
    .menu-products.is-open > .mega-menu {

        display: block;
    }


    .mega-column {

        width: 100%;

        padding: 0;
        margin: 0;
    }


    /* =====================================================
       ITEM CẤP 2
    ===================================================== */

    .mega-item {

        position: relative;

        width: 100%;

        margin: 0;
        padding: 0;
    }


    .mega-item > a {

        width: 100%;

        min-height: 50px;

        padding: 12px 8px 12px 15px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 10px;

        color: #17232d;

        background: #e0f0f8;

        border-bottom: 1px solid #bfd5e1;

        border-left: 3px solid transparent;

        font-size: 16px;

        font-weight: 500;

        line-height: 1.4;

        transition:
            color 0.25s ease,
            background 0.25s ease,
            border-color 0.25s ease,
            padding-left 0.25s ease;
    }


    .mega-item > a:hover,
    .mega-item.is-open > a {
        color: #006fd6;
        background: #d3ecf8;
        border-left-color: #009fe8;
        padding-left: 19px;
    }


    /* =====================================================
       MŨI TÊN CẤP 2
    ===================================================== */

    .mega-item > a b {

        width: 30px;
        height: 30px;

        flex: 0 0 30px;

        display: flex;

        align-items: center;
        justify-content: center;

        color: #111111;

        border-radius: 50%;

        transition:
            transform 0.3s ease,
            background 0.25s ease;
    }


    .mega-item > a:hover b {

        background: rgba(255,255,255,0.7);
    }


    .mega-item.is-open > a b {

        transform: rotate(90deg);
    }


    /* =====================================================
       CẤP 3
    ===================================================== */

    .mega-item > .mega-submenu {

        position: static !important;

        width: 100% !important;

        display: none;

        padding: 4px 0 5px 14px;

        margin: 0;

        background: #eaf6fd;

        border: 0;

        border-left: 3px solid #08a5e8;

        box-shadow: none;
    }


    .mega-item.is-open > .mega-submenu {

        display: block;
    }


    .mega-submenu > a {

        width: 100%;

        min-height: 48px;

        padding: 10px 10px 10px 14px;

        display: flex;

        align-items: center;

        color: #26343e;

        background: transparent;

        border-bottom: 1px solid #c8dce7;

        font-size: 15px;

        font-weight: 400;

        line-height: 1.4;

        transition:
            color 0.25s ease,
            background 0.25s ease,
            padding-left 0.25s ease;
    }


    .mega-submenu > a:hover {

        color: #0075d4;

        background: rgba(255,255,255,0.7);

        padding-left: 20px;
    }


    /* =====================================================
       CẤP 4
    ===================================================== */

    .mega-submenu .mega-item > a {

        min-height: 46px;

        padding: 10px 8px 10px 14px;

        color: #30404b;

        background: #edf8fd;

        border-bottom: 1px solid #cadfe9;

        border-left: 2px solid #8ed6f4;

        font-size: 14px;

        font-weight: 400;

        line-height: 1.4;
    }


    .mega-submenu .mega-item > a:hover,
    .mega-submenu .mega-item.is-open > a {

        color: #006fd6;

        background: #ddf2fc;

        border-left-color: #008fe0;

        padding-left: 20px;
    }


    /* =====================================================
       SUBMENU CẤP 4
    ===================================================== */

    .mega-submenu .mega-item > .mega-submenu {

        position: static !important;

        width: 100% !important;

        display: none;

        padding: 3px 0 5px 12px;

        margin: 0;

        background: #f2faff;

        border-left: 2px solid #70c9ed;

        box-shadow: none;
    }


    .mega-submenu .mega-item.is-open > .mega-submenu {

        display: block;
    }


    .mega-submenu .mega-item > .mega-submenu > a {

        min-height: 44px;

        padding: 9px 8px 9px 14px;

        color: #40505b;

        background: transparent;

        border-bottom: 1px solid #d5e6ee;

        font-size: 14px;

        line-height: 1.4;
    }


    .mega-submenu .mega-item > .mega-submenu > a:hover {

        color: #0077d5;

        background: #e2f5fd;

        padding-left: 20px;
    }


    /* =====================================================
       SIMPLE DROPDOWN
       Camera / Giải pháp / Dịch vụ...
    ===================================================== */

    .simple-dropdown {

        position: static !important;

        width: 100% !important;

        display: none;

        padding: 4px 0 6px 14px;

        margin: 0;

        background: #eaf6fd;

        border: 0;

        border-left: 3px solid #0ca8ee;

        box-shadow: none;
    }


    .menu-item-has-children.is-open > .simple-dropdown {

        display: block;
    }


    .simple-dropdown > a {

        width: 100%;

        min-height: 47px;

        padding: 10px 12px 10px 14px;

        display: flex;

        align-items: center;

        color: #293740;

        background: transparent;

        border-bottom: 1px solid #c8dce7;

        font-size: 15px;

        line-height: 1.4;

        transition:
            color 0.25s ease,
            background 0.25s ease,
            padding-left 0.25s ease;
    }


    .simple-dropdown > a:hover {

        color: #0075d4;

        background: rgba(255,255,255,0.7);

        padding-left: 20px;
    }
    /*slider*/
      .section-banner {
        display: block;

        width: 100%;

        padding: 0;

        background: #ffffff;
    }


    /* Ẩn banner trái */

    .banner-left {
        display: none;
    }


    /* Ẩn banner phải */

    .banner-rightt {
        display: none;
    }


    /* Slider chiếm toàn bộ */

    .banner-center {
        display: block;

        width: 100%;

        aspect-ratio: 100 / 53;

        border-radius: 0;
    }


    /* Nút slider */

    .slider-btn {
        width: 40px;
        height: 40px;

        font-size: 23px;

        line-height: 40px;
    }


    .slider-prev {
        left: 8px;
    }


    .slider-next {
        right: 8px;
    }


    /* Dot */

    .slider-dots {
        bottom: 8px;

        gap: 5px;
    }


    .slider-dot {
        width: 7px;
        height: 7px;
    }


    .slider-dot.active {
        width: 20px;
    }
        .camera-brand-container {
        padding: 15px 0;
    }
/*BRAND*/
     .camera-brand-container {
        padding: 15px 0;
    }

    .camera-brand-title {
        margin-bottom: 12px;
        font-size: 21px;
    }

    .camera-brand-window {
        padding-left: 35px;
        padding-right: 35px;
    }

    .camera-brand-item {
        flex: 0 0 33.333333%;
        width: 33.333333%;

        height: 70px;

        padding: 8px 8px;
    }

    .camera-brand-item img {
        max-width: 90%;
        max-height: 48px;
    }

    .camera-brand-prev,
    .camera-brand-next {
        width: 30px;
        font-size: 28px;
    }
    /*number phone*/
       .number-phone-wrapper {
        grid-template-columns: repeat(2, 1fr);

        gap: 8px;

        padding: 8px 0;
    }


    .number-phone-item {
        height: 72px;

        border-radius: 9px;
    }


    .number-phone-title {
        height: 32px;

        font-size: 17px;
    }


    .number-phone-content {
        font-size: 20px;
    }


    .number-phone-download {
        gap: 8px;

        padding: 5px 10px;
    }


    .number-phone-download-icon {
        width: 42px;
        height: 42px;

        flex-basis: 42px;

        font-size: 29px;
    }


    .number-phone-download-text {
        font-size: 21px;
    }
    
    /* container */
      .container-product,
    .container-product-01,
    .container-product-02,
    .container-product-03 {

        width: 100%;

        margin: 15px 0;

        padding: 20px 14px 23px;

        border-radius: 12px;

        box-shadow:
            0 3px 14px rgba(0, 0, 0, 0.06);
    }


    .container-product .section-title,
    .container-product-01 .section-title,
    .container-product-02 .section-title,
    .container-product-03 .section-title {

        margin-bottom: 18px;

        padding-bottom: 12px;

        text-align: center;
    }


    .container-product .section-title h2,
    .container-product-01 .section-title h2,
    .container-product-02 .section-title h2,
    .container-product-03 .section-title h2 {

        font-size: 21px;

        line-height: 1.35;

        margin-bottom: 5px;
    }


    .container-product .section-title p,
    .container-product-01 .section-title p,
    .container-product-02 .section-title p,
    .container-product-03 .section-title p {

        font-size: 13px;

        line-height: 1.45;

        padding: 0 5px;
    }


    .container-product .section-title::after,
    .container-product-01 .section-title::after,
    .container-product-02 .section-title::after,
    .container-product-03 .section-title::after {

        width: 50px;

        height: 3px;
    }
    /*product*/
       .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    /* nút xem  thêm */
    .product-toggle {
        margin-top: 10px;
        padding: 6px 15px;
        font-size: 13px;
    }
      .product-controls {
        gap: 6px;
    }
    .product-controls .product-toggle {
        padding: 7px 14px;
        font-size: 13px;
    }
    /*nut gọi điện và zalo */
    .fixed-contact {
        right: 12px;
        bottom: 15px;
        gap: 10px;
    }
    .contact-phone,
    .contact-zalo {
        width: 50px;
        height: 50px;
    }
}
/* =========================================================
   MOBILE NHỎ
========================================================= */
@media (max-width: 480px) {
    .header-main {
        padding: 0px ;
    }
    .search-box {
        display: none;
    }
    .logo {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .logo > a {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .main-menu {
        width: 88vw;
        max-width: 370px;
    }


    .menu-level-1 {
        padding: 60px 15px 25px;
    }
    .menu-level-1 > li > a {

        min-height: 50px;

        font-size: 16px;
    }


    .mega-item > a {

        min-height: 48px;

        font-size: 15px;
    }


    .mega-submenu > a {

        min-height: 46px;

        font-size: 14px;
    }


    .mega-submenu .mega-item > a {

        font-size: 13.5px;
    }


    .simple-dropdown > a {

        font-size: 14px;
    }


    .mobile-menu-close {

        width: 40px;
        height: 40px;

        top: 12px;
        right: 12px;
    }
    /*slider*/
     .banner-center {
        aspect-ratio: 16 / 8;
    }


    .slider-btn {
        width: 34px;
        height: 34px;

        font-size: 20px;

        line-height: 34px;
    }


    .slider-prev {
        left: 6px;
    }


    .slider-next {
        right: 6px;
    }
    /*BRAND*/
    .camera-brand-window {
        padding-left: 28px;
        padding-right: 28px;
    }

    .camera-brand-item {
        height: 65px;
        padding: 6px;
    }

    .camera-brand-item img {
        max-height: 42px;
    }

    .camera-brand-prev,
    .camera-brand-next {
        width: 25px;
        font-size: 25px;
    }
    /* number phone */
     .number-phone-wrapper {
        gap: 6px;
    }


    .number-phone-item {
        height: 66px;

        border-radius: 8px;
    }


    .number-phone-title {
        height: 29px;

        font-size: 14px;
    }


    .number-phone-content {
        font-size: 17px;
    }


    .number-phone-download {
        gap: 6px;

        padding: 4px 6px;
    }


    .number-phone-download-icon {
        width: 36px;
        height: 36px;

        flex-basis: 36px;

        font-size: 25px;
    }


    .number-phone-download-text {
        font-size: 18px;
    }
    /*container*/
     .container-product,
    .container-product-01,
    .container-product-02,
    .container-product-03 {

        margin: 12px 0;

        padding: 17px 10px 20px;

        border-radius: 10px;
    }


    .container-product .section-title,
    .container-product-01 .section-title,
    .container-product-02 .section-title,
    .container-product-03 .section-title {

        margin-bottom: 15px;

        padding-bottom: 10px;
    }


    .container-product .section-title h2,
    .container-product-01 .section-title h2,
    .container-product-02 .section-title h2,
    .container-product-03 .section-title h2 {

        font-size: 19px;

        line-height: 1.35;
    }


    .container-product .section-title p,
    .container-product-01 .section-title p,
    .container-product-02 .section-title p,
    .container-product-03 .section-title p {

        font-size: 12px;

        line-height: 1.4;

        padding: 0;
    }


    .container-product .section-title::after,
    .container-product-01 .section-title::after,
    .container-product-02 .section-title::after,
    .container-product-03 .section-title::after {

        width: 45px;

        height: 3px;
    }
     /*product*/
       .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /*Tin Tức*/
     .news-section-title h2 {
        font-size: 21px;
    }

    .news-section-title p {
        font-size: 13px;
    }

    .news-item {
        border-radius: 6px;
    }

    .news-content {
        padding: 13px 14px 15px;
    }

    .news-title {
        font-size: 17px;
    }

    .news-description {
        font-size: 13px;
    }

    .news-more {
        margin-top: 20px;
    }

    .news-more-button {
        min-width: 155px;
        padding: 9px 17px;
        font-size: 13px;
    }
}