* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {

            font-family: 'Be Vietnam Pro', sans-serif;

            background: #fff;

            color: #222;

            overflow-x: hidden;

        }

        .container {

            width: 92%;

            max-width: 1400px;

            margin: auto;

        }

        /*====================================================
=                    HEADER
====================================================*/

        header {

            position: fixed;
            top: 0;
            left: 0;

            width: 100%;
            height: 95px;

            z-index: 9999;

            background: rgba(0, 0, 0, .25);
            backdrop-filter: blur(12px);

            transition: .35s;

        }

        /*====================================================
=                HEADER CONTAINER
====================================================*/

        header .container {

            max-width: 1400px;
            height: 100%;

            margin: auto;

            display: grid;
            grid-template-columns: 1fr auto 1fr;

            align-items: center;

        }

        /*====================================================
=                  LOGO
====================================================*/

        .logo {

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

        }

        .logo img {

            height: 90px;
            display: block;

        }

        /*====================================================
=                MENU TRÁI
====================================================*/

        .menu-left {

            display: flex;
            justify-content: flex-end;
            align-items: center;

            gap: 40px;

            list-style: none;

            padding-right: 60px;

        }

        /*====================================================
=                MENU PHẢI
====================================================*/

        .menu-right {

            display: flex;
            justify-content: flex-start;
            align-items: center;

            gap: 40px;

            list-style: none;

            padding-left: 60px;

        }

        /*====================================================
=                LINK MENU
====================================================*/

        header a {

            color: #fff;

            text-decoration: none;

            font-size: 15px;

            font-weight: 700;

            text-transform: uppercase;

            transition: .3s;

        }

        header a:hover {

            color: #e60012;

        }

        /*====================================================
=                  HERO
====================================================*/

        .hero {

            position: relative;

            width: 100%;
            height: 100vh;

            overflow: hidden;

        }

        /*====================================================
=             VIDEO BACKGROUND
====================================================*/

        .video-bg {

            position: absolute;

            inset: 0;

            overflow: hidden;

            z-index: 1;

        }

        .video-bg iframe {

            position: absolute;

            top: 50%;
            left: 50%;

            transform: translate(-50%, -50%);

            width: 177.777vh;
            height: 56.25vw;

            min-width: 100%;
            min-height: 100%;

            border: 0;

            pointer-events: none;

        }

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

        .overlay {

            position: absolute;

            inset: 0;

            z-index: 2;

            background: rgb(0 0 0 / 18%);

        }

        /*====================================================
=              HERO CONTENT
====================================================*/

        /*====================================================
=    MÀN HÌNH CHỜ LOADING CẤP CAO NHẤT (Z-INDEX 999)
====================================================*/

        .hero {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background: #0d0d0d;
        }

        /* Khung Loading nổi đè lên trên tất cả */
        .video-loader {
            position: absolute;
            inset: 0;
            z-index: 999 !important;
            /* Đảm bảo nổi hẳn lên trên cùng */
            background: linear-gradient(135deg, #0d0d0d 0%, #250505 50%, #0d0d0d 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 18px;
            transition: opacity 0.8s ease, visibility 0.8s ease;
        }

        /* Ẩn mượt mà khi load xong */
        .video-loader.loaded {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        /* Vòng xoay Spinner Đỏ - Vàng */
        .loader-spinner {
            width: 55px;
            height: 55px;
            border: 4px solid rgba(255, 255, 255, 0.1);
            border-top-color: #e60000;
            border-right-color: #ffd700;
            border-radius: 50%;
            animation: vimeoSpinner 0.8s linear infinite;
            box-shadow: 0 0 25px rgba(230, 0, 0, 0.6);
        }

        @keyframes vimeoSpinner {
            0% {
                transform: rotate(0deg);
            }

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

        /* Chữ nhấp nháy */
        .loader-text {
            color: #ffffff;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            animation: loaderTextPulse 1.2s infinite ease-in-out;
        }

        @keyframes loaderTextPulse {

            0%,
            100% {
                opacity: 0.4;
            }

            50% {
                opacity: 1;
            }
        }

        /*====================================================
=             HERO KHÔNG CÓ NỘI DUNG
====================================================*/

        .hero-content>* {

            display: none;

        }

        .btn-group {

            display: flex;

            gap: 20px;

        }

        .btn {

            padding: 18px 42px;

            border-radius: 50px;

            font-weight: 700;

            text-decoration: none;

            transition: .35s;

        }

        .btn-red {

            background: #d60000;

            color: white;

        }

        .btn-red:hover {

            transform: translateY(-5px);

        }

        .btn-white {

            background: white;

            color: #111;

        }



        .scroll {

            position: absolute;

            bottom: 35px;

            left: 50%;

            transform: translateX(-50%);

            color: white;

            font-size: 13px;

            letter-spacing: 3px;

            animation: updown 1.2s infinite;

        }

        @keyframes updown {

            50% {

                transform: translate(-50%, 12px);

            }

        }

        /*==================================================
=                    ABOUT
==================================================*/

        .about {

            position: relative;

            padding: 140px 0;

            background: #fff;

            overflow: hidden;

        }

        .about::before {

            content: "";

            position: absolute;

            inset: 0;

            background: url(bg-about.png) center/cover no-repeat;

            opacity: .08;

            pointer-events: none;

        }

        /*==================================================
=                  CONTAINER
==================================================*/

        .about .container {

            width: 1320px;

            max-width: 95%;

            margin: auto;

            display: grid;

            grid-template-columns: 520px 1fr;

            gap: 90px;

            align-items: center;

        }

        /*==================================================
=                 LEFT
==================================================*/

        .about-left {

            position: relative;

            z-index: 2;

        }

        .sub-title {

            display: block;

            margin-bottom: 15px;

            font-family: "Arizonia", cursive;

            font-size: 46px;

            color: #555;

        }

        .about h2 {

            font-size: 82px;

            line-height: 1;

            font-weight: 900;

            color: #e00000;

            margin-bottom: 18px;

        }

        .about h3 {

            font-size: 22px;

            line-height: 1.5;

            color: #222;

            font-weight: 800;

            margin-bottom: 30px;

        }

        .about p {

            font-size: 18px;

            color: #666;

            line-height: 2;

            margin-bottom: 40px;

        }

        /*==================================================
=                   BUTTON
==================================================*/

        .btn-red {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            padding: 16px 40px;

            background: #df0000;

            color: #fff;

            text-decoration: none;

            font-weight: 700;

            border-radius: 4px;

            transition: .35s;

        }

        .btn-red:hover {

            background: #b70000;

            transform: translateY(-5px);

        }

        /*==================================================
=                RIGHT
==================================================*/

        .about-right {

            position: relative;

            height: 650px;

        }

        /*==================================================
=             IMAGE SAU
==================================================*/

        .about-image {

            position: absolute;

            left: 0;

            top: 0;

            width: 520px;

            overflow: hidden;

            background: #fff;

            border: 10px solid #fff;

            box-shadow: 0 35px 70px rgba(0, 0, 0, .18);

            z-index: 1;

        }

        .about-image img {

            display: block;

            width: 100%;

            transition: .5s;

        }

        /*==================================================
=             IMAGE TRƯỚC
==================================================*/

        .about-card {

            position: absolute;

            right: 0;

            top: 90px;

            width: 420px;

            overflow: hidden;

            background: #fff;

            padding: 10px;

            box-shadow: 0 35px 70px rgba(0, 0, 0, .25);

            z-index: 2;

        }

        .about-card img {

            display: block;

            width: 100%;

            transition: .5s;

        }

        /*==================================================
=             ZOOM
==================================================*/

        .about-image:hover img {

            transform: scale(1.08);

        }

        .about-card:hover img {

            transform: scale(1.08);

        }

        /*==================================================
=          SHINE EFFECT
==================================================*/


        .hover_sang2::before {

            content: "";

            position: absolute;

            top: 0;

            left: -80%;

            width: 45%;

            height: 100%;

            z-index: 10;

            background: linear-gradient(to right,

                    rgba(255, 255, 255, 0),

                    rgba(255, 255, 255, .55),

                    rgba(255, 255, 255, 0));

            transform: skewX(-25deg);

        }

        .hover_sang2:hover::before {

            animation: shine .9s forwards;

        }

        @keyframes shine {

            100% {

                left: 140%;

            }

        }

        /*==================================================
=             RESPONSIVE
==================================================*/

        @media(max-width:991px) {

            .about {

                padding: 90px 0;

            }

            .about .container {

                grid-template-columns: 1fr;

                gap: 70px;

            }

            .about-left {

                text-align: center;

            }

            .about-right {

                height: 560px;

            }

            .about-image {

                position: relative;

                width: 100%;

                left: 0;

            }

            .about-card {

                width: 280px;

                top: 240px;

                right: 20px;

            }

            .about h2 {

                font-size: 60px;

            }

            .about h3 {

                font-size: 28px;

            }

            .about p {

                font-size: 16px;

            }

        }

        /*====================================================
=    PRODUCT SECTION - RED BRANDING BACKGROUND
====================================================*/

        .product {
            padding: 110px 0;
            background: linear-gradient(135deg, #e60000 0%, #b70000 50%, #880000 100%);
            position: relative;
            overflow: hidden;
        }

        /* Ánh sáng mờ giúp nền đỏ tươi sáng không bị tối */
        .product::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 900px;
            height: 500px;
            background: radial-gradient(ellipse at center, rgba(255, 120, 120, 0.25) 0%, transparent 70%);
            pointer-events: none;
        }

        /* Tiêu đề trắng trên nền đỏ */
        .product .title {
            text-align: center;
            margin-bottom: 55px;
            position: relative;
            z-index: 2;
        }

        .product .title span {
            color: #ffffff;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(8px);
            padding: 6px 20px;
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            margin-bottom: 12px;
        }

        .product .title span::before {
            content: "";
            width: 6px;
            height: 6px;
            background: #ffffff;
            border-radius: 50%;
            box-shadow: 0 0 8px #ffffff;
        }

        .product .title h2 {
            font-size: 40px;
            font-weight: 900;
            color: #ffffff;
            letter-spacing: -0.5px;
            text-transform: uppercase;
            margin: 0;
            text-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        /* Lưới Thẻ Sản Phẩm Trắng Nổi */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            position: relative;
            z-index: 2;
        }

        .product .card {
            background: #ffffff;
            border-radius: 22px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            display: flex;
            flex-direction: column;
            border: none;
        }

        .product .card:hover {
            transform: translateY(-12px);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
        }

        .product .card-img-box {
            height: 280px;
            overflow: hidden;
            background: #f4f4f4;
            position: relative;
        }

        .product .card-img-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

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

        .product .card-body {
            padding: 26px 24px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-grow: 1;
            background: #ffffff;
        }

        .product .card h3 {
            font-size: 22px;
            font-weight: 800;
            color: #111111;
            margin: 0 0 18px 0;
            line-height: 1.35;
            text-transform: uppercase;
            transition: color 0.3s ease;
        }

        .product .card:hover h3 {
            color: #e60000;
        }

        .product .card-link {
            text-decoration: none;
            font-weight: 800;
            font-size: 13px;
            color: #e60000;
            text-transform: uppercase;
            letter-spacing: 1px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s ease;
        }

        .product .card-link i {
            font-size: 12px;
            transition: transform 0.3s ease;
        }

        .product .card:hover .card-link {
            color: #b70000;
        }

        .product .card:hover .card-link i {
            transform: translateX(6px);
        }

        /* RESPONSIVE */
        @media (max-width: 991px) {
            .product-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }

            .product .title h2 {
                font-size: 32px;
            }
        }

        @media (max-width: 576px) {
            .product-grid {
                grid-template-columns: 1fr;
            }

            .product {
                padding: 70px 0;
            }
        }

        .why {

            padding: 120px 0;

            background: #111;

            color: #fff;

        }

        .why-grid {

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            gap: 30px;

        }

        .why-box {

            background: #1c1c1c;

            padding: 45px;

            border-radius: 25px;

            transition: .4s;

        }

        .why-box:hover {

            background: #d60000;

            transform: translateY(-10px);

        }

        .icon {

            width: 70px;

            height: 70px;

            background: #fff;

            color: #d60000;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 28px;

            margin-bottom: 30px;

        }

        .why-box h3 {

            font-size: 26px;

            margin-bottom: 20px;

        }

        .why-box p {

            line-height: 1.9;

            color: #ddd;

        }


        /*====================================================
=   PROJECT 3D - DEEP CRIMSON RED & GOLD EDITION
====================================================*/

        .project3d {
            padding: 120px 0;
            /* Nền Đỏ Thẫm Thương Hiệu Có Độ Sâu */
            background: linear-gradient(135deg, #850000 0%, #b30000 45%, #660000 100%);
            position: relative;
            overflow: hidden;
        }

        /* Ánh sáng Đỏ Vàng rực rỡ ở giữa làm nổi bật (Không bị tối tăm) */
        .project3d::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 1000px;
            height: 600px;
            background: radial-gradient(ellipse at center, rgba(255, 75, 75, 0.28) 0%, transparent 70%);
            pointer-events: none;
        }

        /* --- TIÊU ĐỀ DÁT VÀNG NỔI BẬT --- */
        .project3d .title {
            text-align: center;
            margin-bottom: 50px;
            position: relative;
            z-index: 2;
        }

        .project3d .title span.gold-badge {
            color: #ffffff;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 3px;
            text-transform: uppercase;
            display: inline-block;
            margin-bottom: 12px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(8px);
            padding: 6px 20px;
            border-radius: 50px;
            border: 1px solid rgba(255, 215, 0, 0.4);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        /* GIÁT VÀNG LỚN KIM CỰC RỰC RỠ */
        .project3d .title h2.gold-title {
            font-size: 46px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: -0.5px;
            margin: 0;

            background: linear-gradient(135deg,
                    #ffe082 0%,
                    #fff8e1 25%,
                    #ffb300 50%,
                    #ffe082 75%,
                    #ff8f00 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.4));
        }

        /* --- SWIPER CAROUSEL SLIDE --- */
        .projectSwiper {
            padding: 40px 0 60px !important;
        }

        .projectSwiper .swiper-slide {
            width: 400px;
            height: 540px;
            border-radius: 24px;
            overflow: hidden;
            position: relative;
            transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
            background: #ffffff;

            /* Viền ánh vàng ánh kim trên nền đỏ */
            border: 1.5px solid rgba(255, 215, 0, 0.4);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .slide-img-box {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

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

        .projectSwiper .swiper-slide:hover .slide-img-box img {
            transform: scale(1.08);
        }

        .slide-img-box::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.05) 60%, transparent 100%);
        }

        .gold-tag {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(17, 17, 17, 0.8);
            backdrop-filter: blur(8px);
            color: #ffd700;
            font-size: 11px;
            font-weight: 800;
            padding: 6px 14px;
            border-radius: 30px;
            border: 1px solid rgba(255, 215, 0, 0.5);
            letter-spacing: 1px;
            z-index: 2;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        /* CAPTION TRẮNG SÁNG RỰC RỠ */
        .projectSwiper .caption {
            position: absolute;
            left: 20px;
            right: 20px;
            bottom: 20px;
            z-index: 10;
            padding: 20px 22px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            border-radius: 18px;
            border: 1px solid rgba(255, 215, 0, 0.5);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
            transition: all 0.35s ease;
        }

        .projectSwiper .swiper-slide:hover .caption {
            background: #ffffff;
            border-color: #ffb300;
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(255, 179, 0, 0.4);
        }

        .caption h3 {
            font-size: 22px;
            font-weight: 800;
            color: #111111;
            margin: 0 0 6px 0;
            line-height: 1.3;
        }

        .caption p {
            font-size: 13px;
            font-weight: 700;
            color: #c90000;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .caption p i {
            color: #e60000;
        }

        /* Slide Active nổi bật với hiệu ứng viền Vàng Kim */
        .projectSwiper .swiper-slide-active {
            transform: scale(1.06);
            border-color: #ffd700;
            box-shadow: 0 25px 55px rgba(0, 0, 0, 0.45), 0 0 25px rgba(255, 215, 0, 0.4);
        }

        /* RESPONSIVE */
        @media(max-width: 991px) {
            .project3d {
                padding: 80px 0;
            }

            .project3d .title h2.gold-title {
                font-size: 34px;
            }

            .projectSwiper .swiper-slide {
                width: 320px;
                height: 450px;
            }
        }

        @media(max-width: 576px) {
            .project3d .title h2.gold-title {
                font-size: 26px;
            }

            .projectSwiper .swiper-slide {
                width: 270px;
                height: 390px;
            }

            .caption h3 {
                font-size: 18px;
            }
        }

        /*====================================================
=    NEWS & KNOWLEDGE - MODERN MAGAZINE SECTION
====================================================*/

        .news-knowledge {
            padding: 110px 0;
            background: #ffffff;
            position: relative;
        }

        /* Header */
        .news-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            margin-bottom: 45px;
            padding-bottom: 25px;
            border-bottom: 1px solid rgba(230, 0, 0, 0.12);
        }

        .news-header-title {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .news-header-title .sub-label {
            font-size: 12px;
            font-weight: 800;
            color: #e60000;
            letter-spacing: 2px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .news-header-title .sub-label::before {
            content: "";
            width: 8px;
            height: 8px;
            background: #e60000;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 10px rgba(230, 0, 0, 0.6);
        }

        .news-header-title h2 {
            font-size: 32px;
            font-weight: 900;
            color: #111111;
            letter-spacing: -0.5px;
            text-transform: uppercase;
            margin: 0;
        }

        .btn-news-more {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            color: #ffffff;
            background: linear-gradient(135deg, #e60000, #b70000);
            font-weight: 700;
            font-size: 13px;
            padding: 11px 24px;
            border-radius: 50px;
            transition: all 0.35s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 6px 18px rgba(230, 0, 0, 0.25);
        }

        .btn-news-more:hover {
            background: linear-gradient(135deg, #ff1e1e, #c90000);
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(230, 0, 0, 0.4);
        }

        .btn-news-more i {
            transition: transform 0.3s ease;
        }

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

        /* KHUNG TẠP CHÍ BENTO (2 CỘT) */
        .news-magazine-grid {
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 35px;
        }

        /* --- CỘT TRÁI: BÀI VIẾT NỔI BẬT LỚN --- */
        .featured-card {
            background: #f8f9fc;
            border-radius: 24px;
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, 0.06);
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            display: flex;
            flex-direction: column;
        }

        .featured-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
            border-color: rgba(230, 0, 0, 0.25);
        }

        .featured-img-wrap {
            position: relative;
            height: 320px;
            overflow: hidden;
        }

        .featured-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .featured-card:hover .featured-img-wrap img {
            transform: scale(1.06);
        }

        .news-badge {
            position: absolute;
            top: 20px;
            left: 20px;
            background: linear-gradient(135deg, #e60000, #b70000);
            color: #ffffff;
            font-size: 11px;
            font-weight: 800;
            padding: 6px 16px;
            border-radius: 30px;
            letter-spacing: 1px;
            box-shadow: 0 4px 15px rgba(230, 0, 0, 0.35);
            z-index: 2;
        }

        .featured-content {
            padding: 30px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        .news-meta {
            font-size: 13px;
            color: #777777;
            margin-bottom: 12px;
            font-weight: 600;
        }

        .news-meta .news-cat {
            color: #e60000;
            font-weight: 700;
        }

        .featured-content h3 {
            font-size: 22px;
            font-weight: 800;
            color: #111111;
            line-height: 1.4;
            margin-bottom: 14px;
            transition: color 0.3s;
        }

        .featured-card:hover .featured-content h3 {
            color: #e60000;
        }

        .featured-content p {
            font-size: 14px;
            color: #666666;
            line-height: 1.7;
            margin-bottom: 22px;
        }

        .btn-read-main {
            text-decoration: none;
            color: #e60000;
            font-weight: 800;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: auto;
            transition: all 0.3s;
        }

        .btn-read-main i {
            transition: transform 0.3s;
        }

        .featured-card:hover .btn-read-main i {
            transform: translateX(6px);
        }

        /* --- CỘT PHẢI: LƯỚI 4 BÀI VIẾT BLOG --- */
        .side-news-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .side-news-card {
            background: #f8f9fc;
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, 0.05);
            transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
            display: flex;
            flex-direction: column;
        }

        .side-news-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
            background: #ffffff;
            border-color: rgba(230, 0, 0, 0.2);
        }

        .side-img-wrap {
            height: 160px;
            overflow: hidden;
        }

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

        .side-news-card:hover .side-img-wrap img {
            transform: scale(1.08);
        }

        .side-content {
            padding: 18px 16px 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-grow: 1;
        }

        .side-cat {
            font-size: 11px;
            font-weight: 800;
            color: #e60000;
            letter-spacing: 1px;
            margin-bottom: 8px;
            display: block;
        }

        .side-content h4 {
            font-size: 14px;
            font-weight: 800;
            color: #111111;
            line-height: 1.45;
            margin-bottom: 14px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            transition: color 0.3s;
        }

        .side-news-card:hover .side-content h4 {
            color: #e60000;
        }

        .side-link {
            text-decoration: none;
            font-size: 12px;
            font-weight: 700;
            color: #444444;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: color 0.3s ease;
        }

        .side-news-card:hover .side-link {
            color: #e60000;
        }

        /* RESPONSIVE */
        @media(max-width: 991px) {
            .news-magazine-grid {
                grid-template-columns: 1fr;
                gap: 30px;
            }

            .news-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
        }

        @media(max-width: 576px) {
            .side-news-grid {
                grid-template-columns: 1fr;
            }

            .featured-img-wrap {
                height: 220px;
            }

            .featured-content h3 {
                font-size: 18px;
            }
        }

        .contact {

            padding: 120px 0;

            background: #d60000;

            color: #fff;

        }

        .contact .container {

            display: grid;

            grid-template-columns: 420px 1fr;

            gap: 70px;

            align-items: center;

        }

        .contact span {

            font-weight: 700;

            letter-spacing: 3px;

        }

        .contact h2 {

            font-size: 55px;

            margin: 20px 0;

        }

        .contact p {

            line-height: 2;

        }

        form {

            display: grid;

            gap: 20px;

        }

        input,

        textarea {

            padding: 18px 22px;

            border: none;

            border-radius: 15px;

            font-family: inherit;

            font-size: 16px;

        }

        textarea {

            height: 160px;

            resize: none;

        }

        button {

            padding: 20px;

            background: #111;

            color: #fff;

            border: none;

            border-radius: 15px;

            font-size: 17px;

            font-weight: 700;

            cursor: pointer;

            transition: .3s;

        }

        button:hover {

            background: linear-gradient(135deg, #e60000, #b70000);

        }

        /*====================================================
=       SITE FOOTER - DARK LUXURY ARCHITECTURAL
====================================================*/

        .site-footer {
            background: #0d0d0d;
            color: #a0a0a0;
            padding: 90px 0 30px;
            position: relative;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1.1fr 1.2fr 1.7fr;
            gap: 40px;
            margin-bottom: 60px;
        }

        /* Cột Thương hiệu & Liên hệ */
        .footer-brand h2 {
            font-size: 36px;
            font-weight: 900;
            color: #ffffff;
            letter-spacing: -0.5px;
            margin: 0 0 4px 0;
        }

        .brand-sub {
            font-size: 11px;
            font-weight: 800;
            color: #e60000;
            letter-spacing: 1.5px;
            margin-bottom: 25px;
            text-transform: uppercase;
        }

        .footer-title {
            font-size: 16px;
            font-weight: 800;
            color: #ffffff;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 22px;
            position: relative;
            padding-bottom: 10px;
        }

        .footer-title::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 32px;
            height: 2px;
            background: #e60000;
            border-radius: 2px;
        }

        /* Danh sách Thông tin liên hệ */
        .contact-list {
            list-style: none;
            padding: 0;
            margin: 0 0 25px 0;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .contact-list li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            font-size: 13.5px;
            line-height: 1.6;
            color: #bbbbbb;
        }

        .contact-list li i {
            color: #e60000;
            font-size: 15px;
            margin-top: 3px;
            flex-shrink: 0;
        }

        .contact-list a {
            color: #ffffff;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .contact-list a:hover {
            color: #e60000;
        }

        .hotline-highlight {
            color: #e60000 !important;
            font-weight: 800;
            font-size: 15px;
        }

        .web-links a {
            color: #dddddd;
            font-size: 13px;
        }

        /* Mạng xã hội */
        .footer-social {
            display: flex;
            align-items: center;
            gap: 15px;
            padding-top: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .social-label {
            font-size: 12px;
            font-weight: 800;
            color: #ffffff;
            letter-spacing: 0.5px;
        }

        .social-icons {
            display: flex;
            gap: 10px;
        }

        .social-icon {
            width: 36px;
            height: 36px;
            background: rgba(255, 255, 255, 0.06);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            text-decoration: none;
            font-size: 14px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.35s ease;
        }

        .social-icon.zalo span {
            font-size: 10px;
            font-weight: 800;
        }

        .social-icon:hover {
            background: #e60000;
            border-color: #e60000;
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(230, 0, 0, 0.4);
        }

        /* Link Danh mục & Chính sách */
        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .footer-links a {
            color: #aaaaaa;
            text-decoration: none;
            font-size: 13.5px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
        }

        .footer-links a i {
            font-size: 11px;
            color: #e60000;
            transition: transform 0.3s ease;
        }

        .footer-links a:hover {
            color: #ffffff;
            padding-left: 4px;
        }

        .footer-links a:hover i {
            transform: translateX(4px);
        }

        /* Khung Map Google */
        .footer-map-box {
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        /* Thanh Copyright Chân Trang */
        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            font-size: 13px;
            color: #777777;
        }

        .copyright-text strong {
            color: #cccccc;
        }

        /* Nút Back To Top Cuộn Nhanh */
        .back-to-top {
            width: 42px;
            height: 42px;
            background: #e60000;
            color: #ffffff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 15px;
            box-shadow: 0 6px 20px rgba(230, 0, 0, 0.4);
            transition: all 0.35s ease;
        }

        .back-to-top:hover {
            background: #ffffff;
            color: #e60000;
            transform: translateY(-4px);
        }

        /* RESPONSIVE FOOTER */
        @media (max-width: 1199px) {
            .footer-grid {
                grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
                gap: 30px;
            }
        }

        @media (max-width: 991px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 40px;
            }

            .footer-bottom {
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }
        }

        @media (max-width: 576px) {
            .site-footer {
                padding: 60px 0 30px;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 35px;
            }
        }

        .copyright {

            text-align: center;

            color: #777;

        }

        .project3d {

            padding: 140px 0;

            background: #101010;

            overflow: hidden;

        }

        .projectSwiper {

            padding: 80px 0;

        }

        .projectSwiper .swiper-slide {

            width: 420px;

            height: 560px;

            border-radius: 30px;

            overflow: hidden;

            position: relative;

            transition: .5s;

            box-shadow: 0 30px 60px rgba(0, 0, 0, .35);

        }

        .projectSwiper .swiper-slide img {

            width: 100%;

            height: 100%;

            object-fit: cover;

        }

        .projectSwiper .swiper-slide::after {

            content: "";

            position: absolute;

            inset: 0;

            background: linear-gradient(transparent, rgba(0, 0, 0, .9));

        }

        .caption {

            position: absolute;

            left: 35px;

            bottom: 35px;

            z-index: 10;

            color: #fff;

        }

        .caption h3 {

            font-size: 30px;

            margin-bottom: 8px;

        }

        .caption p {

            opacity: .8;

        }

        .projectSwiper .swiper-slide-active {

            transform: scale(1.08);

        }

        .projectSwiper .swiper-slide-prev,

        .projectSwiper .swiper-slide-next {

            opacity: .75;

        }

        .partner {

            padding: 120px 0;

            background: #fff;

        }

        .logo-slider {

            overflow: hidden;

            margin-top: 60px;

        }

        .logo-track {

            display: flex;

            gap: 80px;

            align-items: center;

            animation: logo 25s linear infinite;

            width: max-content;

        }

        .logo-track img {

            height: 70px;

            opacity: .45;

            transition: .3s;

            filter: grayscale(100%);

        }

        .logo-track img:hover {

            opacity: 1;

            filter: none;

        }

        @keyframes logo {

            100% {

                transform: translateX(-50%);

            }

        }

        .value {

            padding: 110px 0;

            background: #d60000;

            color: #fff;

        }

        .value-grid {

            display: grid;

            grid-template-columns: repeat(5, 1fr);

            gap: 35px;

        }

        .value .item span {

            font-size: 55px;

            font-weight: 800;

            opacity: .2;

            display: block;

            margin-bottom: 15px;

        }

        .value .item h3 {

            margin-bottom: 15px;

            font-size: 26px;

        }

        .value .item p {

            line-height: 1.8;

            opacity: .85;

        }

        /*===================================================================
=               CSS MENU MOBILE (MỞ DẠNG DRAWER)                   =
===================================================================*/

        .menu-toggle {
            display: none;
            background: none;
            border: none;
            color: #fff;
            font-size: 26px;
            cursor: pointer;
            z-index: 10001;
            transition: .3s;
        }

        .menu-toggle:hover {
            color: #d60000;
        }

        .mobile-menu-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.65);
            backdrop-filter: blur(8px);
            z-index: 99998;
            opacity: 0;
            visibility: hidden;
            transition: all 0.35s ease;
        }

        .mobile-menu-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .mobile-menu {
            position: fixed;
            top: 0;
            right: -340px;
            width: 310px;
            height: 100vh;
            background: #111;
            z-index: 99999;
            box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            padding: 30px 25px;
            transition: right 0.4s cubic-bezier(0.77, 0.2, 0.05, 1);
        }

        .mobile-menu.active {
            right: 0;
        }

        .mobile-menu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 35px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        }

        .mobile-logo {
            height: 48px;
        }

        .mobile-menu-close {
            background: none;
            border: none;
            color: #fff;
            font-size: 26px;
            cursor: pointer;
            transition: 0.3s;
        }

        .mobile-menu-close:hover {
            color: #d60000;
        }

        .mobile-menu-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 22px;
        }

        .mobile-menu-list a {
            color: #fff;
            text-decoration: none;
            font-size: 16px;
            font-weight: 700;
            text-transform: uppercase;
            transition: 0.3s;
            display: block;
        }

        .mobile-menu-list a:hover {
            color: #d60000;
            padding-left: 8px;
        }


        /*===================================================================
=               TOÀN BỘ RESPONSIVE CHO CÁC SECTION                 =
===================================================================*/

        /* LAPTOP / MH NHỎ (1200px) */
        @media (max-width: 1200px) {
            .value-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 25px;
            }

            .menu-left,
            .menu-right {
                gap: 25px;
                padding-left: 20px;
                padding-right: 20px;
            }

            header a {
                font-size: 13px;
            }
        }

        /* TABLET (991px) */
        @media (max-width: 991px) {

            /* HEADER & MOBILE MENU TOGGLE */
            header {
                height: 75px;
            }

            header .container {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .menu-left,
            .menu-right {
                display: none;
            }

            .menu-toggle {
                display: block;
            }

            .logo img {
                height: 50px;
            }

            /* ABOUT SECTION */
            .about {
                padding: 90px 0;
            }

            .about .container {
                grid-template-columns: 1fr;
                gap: 60px;
            }

            .about-left {
                text-align: center;
            }

            .about-right {
                height: 500px;
                width: 100%;
                max-width: 650px;
                margin: 0 auto;
            }

            .about-image {
                position: relative;
                width: 85%;
                left: 0;
            }

            .about-card {
                width: 65%;
                top: 200px;
                right: 0;
            }

            .about h2 {
                font-size: 60px;
            }

            .about h3 {
                font-size: 24px;
            }

            .about p {
                font-size: 16px;
            }

            /* TITLES */
            .title h2 {
                font-size: 38px;
            }

            /* PRODUCT */
            .product {
                padding: 80px 0;
            }

            .product-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }

            /* WHY */
            .why {
                padding: 80px 0;
            }

            .why-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }

            /* VIDEO FULL */
            .video-full {
                padding: 80px 0;
            }

            .video-full .container {
                grid-template-columns: 1fr;
                gap: 40px;
                text-align: center;
            }

            .video-text h2 {
                font-size: 38px;
            }

            .video-box iframe {
                height: 380px;
            }

            /* PROJECT 3D */
            .project3d {
                padding: 80px 0;
            }

            .projectSwiper .swiper-slide {
                width: 330px;
                height: 450px;
            }

            /* NEWS */
            .news {
                padding: 80px 0;
            }

            .news-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }

            /* CONTACT */
            .contact {
                padding: 80px 0;
            }

            .contact .container {
                grid-template-columns: 1fr;
                gap: 40px;
                text-align: center;
            }

            .contact h2 {
                font-size: 40px;
            }

            /* FOOTER */
            footer {
                padding: 60px 0 30px;
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 40px;
            }
        }

        /* MOBILE PHONES (768px) */
        @media (max-width: 768px) {

            .value {
                padding: 70px 0;
            }

            .value-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }

            .value .item span {
                font-size: 42px;
            }

            .value .item h3 {
                font-size: 22px;
            }

            .partner {
                padding: 70px 0;
            }

            .logo-slider {
                margin-top: 35px;
            }

            .logo-track {
                gap: 40px;
            }

            .logo-track img {
                height: 45px;
            }
        }

        /* SMALL MOBILE (576px) */
        @media (max-width: 576px) {

            .about-right {
                height: 380px;
            }

            .about-image {
                width: 90%;
            }

            .about-card {
                width: 70%;
                top: 140px;
            }

            .product-grid,
            .why-grid,
            .news-grid,
            .value-grid {
                grid-template-columns: 1fr;
            }

            .title {
                margin-bottom: 40px;
            }

            .title h2 {
                font-size: 30px;
            }

            .about h2 {
                font-size: 45px;
            }

            .sub-title {
                font-size: 34px;
            }

            .card img {
                height: 250px;
            }

            .card h3 {
                font-size: 22px;
                padding: 20px 20px 10px;
            }

            .video-box iframe {
                height: 240px;
            }

            .projectSwiper .swiper-slide {
                width: 270px;
                height: 380px;
            }

            .caption h3 {
                font-size: 22px;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 30px;
                text-align: center;
            }

            .social {
                justify-content: center;
            }

            input,
            textarea,
            button {
                padding: 15px 18px;
                font-size: 15px;
            }
        }

        /*====================================================
=    WINDOW SYSTEM - ULTRA LUXURY ARCHITECTURAL
====================================================*/

        .window-system {
            padding: 110px 0;
            background: #f8f9fc;
            position: relative;
        }

        /* --- HEADER BAR CHUẨN KIẾN TRÚC --- */
        .window-header-bar {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            margin-bottom: 50px;
            padding-bottom: 25px;
            border-bottom: 1px solid rgba(230, 0, 0, 0.12);
            gap: 30px;
        }

        .window-header-title {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .window-header-title .sub-label {
            font-size: 12px;
            font-weight: 800;
            color: #e60000;
            letter-spacing: 2px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .window-header-title .sub-label::before {
            content: "";
            width: 8px;
            height: 8px;
            background: #e60000;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 12px rgba(230, 0, 0, 0.8);
        }

        .window-header-title h2 {
            font-size: 32px;
            font-weight: 900;
            color: #111111;
            letter-spacing: -0.5px;
            text-transform: uppercase;
            margin: 0;
        }

        /* Segmented Tab Control */
        .window-tabs-wrapper {
            background: rgba(230, 0, 0, 0.04);
            padding: 5px;
            border-radius: 50px;
            border: 1px solid rgba(230, 0, 0, 0.1);
        }

        .window-tabs {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .tab-btn {
            border: none;
            background: transparent;
            color: #444444;
            font-family: inherit;
            font-size: 13px;
            font-weight: 700;
            padding: 10px 24px;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .tab-btn:hover {
            color: #fff;
        }

        .tab-btn.active {
            background: linear-gradient(135deg, #e60000, #b70000);
            color: #ffffff;
            box-shadow: 0 6px 18px rgba(230, 0, 0, 0.35);
        }

        .btn-explore {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: #ffffff;
            background: linear-gradient(135deg, #e60000, #b70000);
            font-weight: 700;
            font-size: 13px;
            padding: 11px 26px;
            border: none;
            border-radius: 50px;
            transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 6px 18px rgba(230, 0, 0, 0.28);
        }

        .btn-explore i {
            font-size: 12px;
            transition: transform 0.3s ease;
        }

        .btn-explore:hover {
            background: linear-gradient(135deg, #ff1a1a, #c90000);
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(230, 0, 0, 0.45);
        }

        .btn-explore:hover i {
            transform: translateX(5px);
        }

        /* --- LƯỚI CARD SẢN PHẨM LUXURY --- */
        .window-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 28px;
            margin-bottom: 50px;
        }

        .window-card {
            background: #ffffff;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(0, 0, 0, 0.06);
            transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .window-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 50px rgba(230, 0, 0, 0.12), 0 10px 25px rgba(0, 0, 0, 0.06);
            border-color: rgba(230, 0, 0, 0.3);
        }

        /* Khung Ảnh Tỉ Lệ Kiến Trúc (Tăng lên 300px) */
        .card-img-wrap {
            position: relative;
            height: 300px;
            overflow: hidden;
            background: #f0f0f0;
        }

        .card-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

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

        /* Vệt sáng lướt qua khi hover */
        .card-img-wrap::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 60%;
            height: 100%;
            background: linear-gradient(to right,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.35) 50%,
                    rgba(255, 255, 255, 0) 100%);
            transform: skewX(-25deg);
            pointer-events: none;
        }

        .window-card:hover .card-img-wrap::after {
            left: 160%;
            transition: all 0.85s ease-in-out;
        }

        /* Badge Kính Mờ Đỏ Sang Trọng */
        .card-spec-badge {
            position: absolute;
            top: 16px;
            left: 16px;
            background: rgba(17, 17, 17, 0.78);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #ffffff;
            font-size: 11px;
            font-weight: 700;
            padding: 6px 14px;
            border-radius: 30px;
            z-index: 2;
            letter-spacing: 0.5px;
        }

        /* Overlay Nút Báo Giá */
        .card-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(3px);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.35s ease;
            z-index: 3;
        }

        .window-card:hover .card-overlay {
            opacity: 1;
        }

        .btn-quick-view {
            background: linear-gradient(135deg, #e60000, #b70000);
            color: #ffffff;
            text-decoration: none;
            font-weight: 800;
            font-size: 12px;
            padding: 13px 26px;
            border-radius: 50px;
            transform: translateY(15px);
            transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 8px 20px rgba(230, 0, 0, 0.4);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .window-card:hover .btn-quick-view {
            transform: translateY(0);
        }

        .btn-quick-view:hover {
            background: #111111;
            color: #ffffff;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }

        /* Thân Card */
        .card-info {
            padding: 24px 22px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-grow: 1;
            background: #ffffff;
        }

        .card-title-header {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-bottom: 10px;
        }

        .product-code {
            font-size: 11px;
            font-weight: 800;
            color: #e60000;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .card-info h4 {
            font-size: 16px;
            font-weight: 800;
            color: #1a1a1a;
            margin: 0;
            text-transform: uppercase;
            line-height: 1.4;
            transition: color 0.3s ease;
        }

        .window-card:hover .card-info h4 {
            color: #e60000;
        }

        .card-desc {
            font-size: 13px;
            color: #666666;
            line-height: 1.6;
            margin-bottom: 20px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Footer Action (Nút Báo Giá Thay Nút Phone/Zalo Rác) */
        .card-footer-action {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 14px;
            border-top: 1px solid #f0f0f0;
        }

        .btn-card-cta {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            text-decoration: none;
            color: #111111;
            font-weight: 800;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 10px 16px;
            border-radius: 50px;
            background: #f8f9fc;
            border: 1px solid rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
        }

        .btn-card-cta i {
            font-size: 12px;
            transition: transform 0.3s ease;
        }

        .window-card:hover .btn-card-cta {
            background: #e60000;
            color: #ffffff;
            border-color: #e60000;
            box-shadow: 0 6px 18px rgba(230, 0, 0, 0.25);
        }

        .window-card:hover .btn-card-cta i {
            transform: translateX(5px);
        }

        /* --- PHÂN TRANG (PAGINATION) MÀU ĐỎ --- */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 8px;
        }

        .pagination a {
            width: 40px;
            height: 40px;
            border-radius: 50px;
            background: #ffffff;
            color: #555555;
            text-decoration: none;
            font-weight: 700;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
            border: 1px solid rgba(0, 0, 0, 0.06);
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .pagination a.active,
        .pagination a:hover {
            background: linear-gradient(135deg, #e60000, #b70000);
            color: #ffffff;
            border-color: #e60000;
            box-shadow: 0 8px 20px rgba(230, 0, 0, 0.35);
            transform: translateY(-2px);
        }

        /* --- RESPONSIVE --- */
        @media(max-width: 1199px) {
            .window-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media(max-width: 991px) {
            .window-header-bar {
                flex-direction: column;
                align-items: flex-start;
                gap: 20px;
            }

            .window-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }
        }

        @media(max-width: 576px) {
            .window-header-title h2 {
                font-size: 24px;
            }

            .window-tabs {
                overflow-x: auto;
                padding-bottom: 4px;
                white-space: nowrap;
            }

            .window-grid {
                grid-template-columns: 1fr;
            }
        }

        /*===================================================================
=                     HỆ THỐNG RESPONSIVE TOÀN TRANG               =
===================================================================*/

        /* --------------------------------------------------
   1. LAPTOP & MÀN HÌNH NHỎ (Max-width: 1200px)
-------------------------------------------------- */
        @media (max-width: 1200px) {
            .container {
                width: 95%;
            }

            /* Header & Menu */
            .menu-left,
            .menu-right {
                gap: 25px;
                padding-left: 15px;
                padding-right: 15px;
            }

            header a {
                font-size: 13px;
            }

            /* Window System */
            .window-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 22px;
            }

            /* Value Section */
            .value-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 25px;
            }
        }

        /* --------------------------------------------------
   2. TABLET / MAN HÌNH VỪA (Max-width: 991px)
-------------------------------------------------- */
        @media (max-width: 991px) {

            /* Section Padding Giảm Xuống */
            .about,
            .product,
            .why,
            .video-full,
            .project3d,
            .partner,
            .news,
            .contact,
            .window-system,
            .value {
                padding: 70px 0;
            }

            /* Title Chung */
            .about h2 {
                font-size: 50px;
            }

            .video-text h2,
            .contact h2 {
                font-size: 38px;
            }

            .title h2 {
                font-size: 34px;
            }

            /* HEADER & MOBILE NAVIGATION */
            header {
                height: 75px;
            }

            header .container {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .menu-left,
            .menu-right {
                display: none !important;
                /* Cất Menu Desktop */
            }

            .menu-toggle {
                display: block;
                /* Hiện Nút Hamburger */
            }

            .logo img {
                height: 52px;
            }

            /* ABOUT SECTION */
            .about .container {
                grid-template-columns: 1fr;
                gap: 50px;
            }

            .about-left {
                text-align: center;
            }

            .about-right {
                height: 480px;
                width: 100%;
                max-width: 600px;
                margin: 0 auto;
            }

            .about-image {
                width: 85%;
                left: 0;
            }

            .about-card {
                width: 60%;
                top: 180px;
                right: 0;
            }

            /* PRODUCT CATEGORIES GRID */
            .product-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }

            /* WINDOW SYSTEM (MỚI) */
            .window-header-bar {
                flex-direction: column;
                align-items: flex-start;
                gap: 20px;
            }

            .window-tabs-wrapper {
                width: 100%;
                overflow-x: auto;
            }

            .window-tabs {
                white-space: nowrap;
            }

            .window-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 22px;
            }

            /* WHY SECTION */
            .why-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }

            /* VIDEO FULL SECTION */
            .video-full .container {
                grid-template-columns: 1fr;
                gap: 35px;
                text-align: center;
            }

            .video-box iframe {
                height: 380px;
            }

            /* PROJECT 3D SWIPER */
            .projectSwiper .swiper-slide {
                width: 320px;
                height: 440px;
            }

            /* NEWS GRID */
            .news-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }

            /* CONTACT SECTION */
            .contact .container {
                grid-template-columns: 1fr;
                gap: 40px;
                text-align: center;
            }

            /* FOOTER GRID */
            footer {
                padding: 60px 0 30px;
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 40px;
            }
        }

        /* --------------------------------------------------
   3. SMALL TABLET / MOBILE NGANG (Max-width: 768px)
-------------------------------------------------- */
        @media (max-width: 768px) {

            /* Value Section */
            .value-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }

            .value .item span {
                font-size: 40px;
            }

            .value .item h3 {
                font-size: 22px;
            }

            /* Partner Logo Slider */
            .logo-track {
                gap: 45px;
            }

            .logo-track img {
                height: 45px;
            }

            /* Window System Card */
            .card-img-wrap {
                height: 240px;
            }

            /* Video Full Iframe */
            .video-box iframe {
                height: 300px;
            }
        }

        /* --------------------------------------------------
   4. MOBILE DỌC (Max-width: 576px)
-------------------------------------------------- */
        @media (max-width: 576px) {

            /* Giảm Padding Thêm Cho Mobile */
            .about,
            .product,
            .why,
            .video-full,
            .project3d,
            .partner,
            .news,
            .contact,
            .window-system,
            .value {
                padding: 55px 0;
            }

            /* Text Sizes */
            .sub-title {
                font-size: 32px;
            }

            .about h2 {
                font-size: 38px;
            }

            .about h3 {
                font-size: 20px;
            }

            .title h2,
            .video-text h2,
            .contact h2 {
                font-size: 26px;
            }

            .window-header-title h2 {
                font-size: 22px;
            }

            /* ABOUT SECTION MOBILE IMAGE */
            .about-right {
                height: 360px;
            }

            .about-image {
                width: 88%;
            }

            .about-card {
                width: 65%;
                top: 140px;
            }

            /* ALL GRIDS GO SINGLE COLUMN */
            .product-grid,
            .window-grid,
            .why-grid,
            .news-grid,
            .value-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            /* Window System Tab Wrap */
            .window-tabs {
                width: 100%;
                justify-content: flex-start;
                overflow-x: auto;
                padding-bottom: 5px;
            }

            .tab-btn {
                padding: 8px 18px;
                font-size: 12px;
                flex-shrink: 0;
            }

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

            /* Cards */
            .card img {
                height: 240px;
            }

            .card h3 {
                font-size: 20px;
                padding: 20px 20px 10px;
            }

            .card-img-wrap {
                height: 250px;
            }

            /* Video Box */
            .video-box iframe {
                height: 210px;
            }

            /* Project 3D Swiper Mobile */
            .projectSwiper {
                padding: 40px 0;
            }

            .projectSwiper .swiper-slide {
                width: 260px;
                height: 360px;
                border-radius: 20px;
            }

            .caption h3 {
                font-size: 20px;
            }

            /* Contact Form inputs */
            input,
            textarea,
            button {
                padding: 14px 18px;
                font-size: 14px;
                border-radius: 12px;
            }

            textarea {
                height: 120px;
            }

            /* Footer Mobile */
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 30px;
                text-align: center;
            }

            .social {
                justify-content: center;
            }
        }

        /* --------------------------------------------------
   5. EXTRA SMALL MOBILE (Max-width: 400px)
-------------------------------------------------- */
        @media (max-width: 400px) {
            .container {
                width: 92%;
            }

            .about-right {
                height: 310px;
            }

            .about-card {
                top: 120px;
            }

            .projectSwiper .swiper-slide {
                width: 230px;
                height: 320px;
            }
        }

        /*====================================================
=   VALUE SECTION - RED GRAPHIC TECH (LIKE IMAGE)
====================================================*/

        .value {
            padding: 110px 0 120px;
            background: linear-gradient(135deg, #d60000 0%, #b30000 50%, #800000 100%);
            color: #ffffff;
            position: relative;
            overflow: hidden;
        }

        /* Họa tiết mạng lưới Công nghệ mờ phía sau */
        .value::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px),
                radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 40px 40px;
            background-position: 0 0, 20px 20px;
            opacity: 0.6;
            pointer-events: none;
        }

        /* Lưới 5 Cột */
        .value-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 32px;
            position: relative;
            z-index: 2;
        }

        /* Thẻ từng Giá Trị */
        .value-item {
            position: relative;
            display: flex;
            flex-direction: column;
            padding-left: 20px;
            border-left: 1px solid rgba(255, 255, 255, 0.25);
            transition: all 0.4s ease;
        }

        .value-item:hover {
            transform: translateY(-8px);
            border-left-color: #ffffff;
        }

        /* Nút Chấm Tron ở Đầu Vạch (Dot Pin) */
        .value-pin {
            position: absolute;
            top: -6px;
            left: -6px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pin-dot {
            width: 11px;
            height: 11px;
            background: #ffffff;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
            transition: transform 0.3s ease, background 0.3s ease;
        }

        .value-item:hover .pin-dot {
            transform: scale(1.4);
            background: #ffffff;
            box-shadow: 0 0 15px rgba(255, 255, 255, 1);
        }

        /* Số 01 - 05 To Bản Bold */
        .value-num {
            font-size: 64px;
            font-weight: 900;
            line-height: 1;
            color: #ffffff;
            letter-spacing: -1px;
            margin-bottom: 6px;
            opacity: 0.95;
        }

        /* Tiêu Đề THẨM MỸ, CHẤT LƯỢNG... */
        .value-title {
            font-size: 22px;
            font-weight: 800;
            color: #ffffff;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin: 0 0 14px 0;
        }

        /* Đường gạch ngang phân cách ngắn */
        .value-divider {
            width: 45px;
            height: 2px;
            background: rgba(255, 255, 255, 0.7);
            margin-bottom: 18px;
            transition: width 0.3s ease;
        }

        .value-item:hover .value-divider {
            width: 70px;
            background: #ffffff;
        }

        /* Nội dung Mô tả */
        .value-desc {
            font-size: 13.5px;
            line-height: 1.75;
            color: rgba(255, 255, 255, 0.9);
            margin: 0;
            font-weight: 400;
        }

        /* --- RESPONSIVE CHUẨN MỌI MÀN HÌNH --- */
        @media(max-width: 1200px) {
            .value-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 30px;
            }
        }

        @media(max-width: 991px) {
            .value-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 30px 25px;
            }
        }

        @media(max-width: 576px) {
            .value {
                padding: 70px 0;
            }

            .value-grid {
                grid-template-columns: 1fr;
                gap: 35px;
            }

            .value-num {
                font-size: 52px;
            }

            .value-title {
                font-size: 20px;
            }
        }

        /*====================================================
=    CONTACT FORM & AGENCY SYSTEM - MODERN DESIGN
====================================================*/

        .contact-agency {
            padding: 110px 0;
            background: #f8f9fc;
            position: relative;
        }

        .contact-agency-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 45px;
            align-items: stretch;
        }

        /* --- CỘT TRÁI: FORM BÁO GIÁ ĐỎ BRANDING --- */
        .agency-form-card {
            background: linear-gradient(135deg, #e60000 0%, #b70000 100%);
            border-radius: 24px;
            padding: 45px 38px;
            color: #ffffff;
            box-shadow: 0 20px 45px rgba(230, 0, 0, 0.22);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .form-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .form-header h2 {
            font-size: 28px;
            font-weight: 900;
            color: #ffffff;
            text-transform: uppercase;
            letter-spacing: -0.5px;
            margin-bottom: 12px;
        }

        .form-header p {
            font-size: 14px;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.9);
            margin: 0;
            font-weight: 500;
        }

        .quote-form {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .quote-form input,
        .quote-form textarea {
            width: 100%;
            background: #ffffff;
            border: 1.5px solid transparent;
            border-radius: 14px;
            padding: 16px 20px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 600;
            color: #111111;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        .quote-form input::placeholder,
        .quote-form textarea::placeholder {
            color: #999999;
            font-weight: 500;
        }

        .quote-form input:focus,
        .quote-form textarea:focus {
            outline: none;
            border-color: #111111;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }

        .quote-form textarea {
            resize: none;
            height: 120px;
        }

        /* Nút Submit Gửi Liên Hệ Modern */
        .btn-submit-form {
            background: #111111;
            color: #ffffff;
            border: none;
            border-radius: 50px;
            padding: 18px 30px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
            margin-top: 8px;
        }

        .btn-submit-form i {
            transition: transform 0.3s ease;
        }

        .btn-submit-form:hover {
            background: #ffffff;
            color: #e60000;
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
        }

        .btn-submit-form:hover i {
            transform: translateX(6px);
        }

        /* --- CỘT PHẢI: HỆ THỐNG ĐẠI LÝ --- */
        .agency-info-wrap {
            display: flex;
            flex-direction: column;
        }

        .agency-title {
            margin-bottom: 30px;
        }

        .agency-title .sub-label {
            font-size: 12px;
            font-weight: 800;
            color: #e60000;
            letter-spacing: 2px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }

        .agency-title .sub-label::before {
            content: "";
            width: 8px;
            height: 8px;
            background: #e60000;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 10px rgba(230, 0, 0, 0.6);
        }

        .agency-title h2 {
            font-size: 32px;
            font-weight: 900;
            color: #111111;
            text-transform: uppercase;
            letter-spacing: -0.5px;
            margin: 0;
        }

        .agency-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* Thẻ Đại Lý Trắng Nổi 3D */
        .agency-card {
            background: #ffffff;
            border-radius: 20px;
            padding: 26px 28px;
            border: 1px solid rgba(0, 0, 0, 0.06);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
            transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .agency-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
            border-color: rgba(230, 0, 0, 0.25);
        }

        .agency-card-header {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .agency-badge {
            width: 36px;
            height: 36px;
            background: rgba(230, 0, 0, 0.08);
            color: #e60000;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

        .agency-card-header h3 {
            font-size: 17px;
            font-weight: 800;
            color: #e60000;
            text-transform: uppercase;
            margin: 0;
            letter-spacing: 0.3px;
        }

        .agency-details {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding-left: 2px;
        }

        .company-name,
        .company-address {
            font-size: 14px;
            color: #333333;
            line-height: 1.5;
            margin: 0;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .company-name i,
        .company-address i {
            color: #e60000;
            font-size: 14px;
            margin-top: 3px;
            flex-shrink: 0;
        }

        .company-name span {
            font-weight: 700;
            color: #111111;
        }

        .company-address span {
            font-weight: 500;
            color: #555555;
        }

        /* Link Xem Bản Đồ */
        .btn-map-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            color: #e60000;
            font-weight: 800;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding-top: 6px;
            border-top: 1px dashed #eee;
            transition: all 0.3s ease;
        }

        .btn-map-link .arrow-icon {
            font-size: 12px;
            transition: transform 0.3s ease;
        }

        .agency-card:hover .btn-map-link .arrow-icon {
            transform: translateX(6px);
        }

        /* RESPONSIVE */
        @media(max-width: 991px) {
            .contact-agency-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .agency-form-card {
                padding: 35px 25px;
            }

            .agency-title h2 {
                font-size: 26px;
            }
        }

        @media(max-width: 576px) {
            .contact-agency {
                padding: 70px 0;
            }

            .form-header h2 {
                font-size: 24px;
            }

            .agency-card {
                padding: 20px;
            }
        }

        /*====================================================
=     SITE FOOTER - ULTRA CLEAN & BUG-FREE MOBILE
====================================================*/

        .site-footer {
            background: #0d0d0d;
            color: #a0a0a0;
            padding: 90px 0 30px;
            position: relative;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2.1fr 1fr 1.1fr 1.7fr;
            gap: 40px;
            margin-bottom: 60px;
        }

        /* Cột Thương hiệu */
        .footer-brand h2 {
            font-size: 36px;
            font-weight: 900;
            color: #ffffff;
            letter-spacing: -0.5px;
            margin: 0 0 4px 0;
        }

        .brand-sub {
            font-size: 11px;
            font-weight: 800;
            color: #e60000;
            letter-spacing: 1.5px;
            margin-bottom: 25px;
            text-transform: uppercase;
        }

        .footer-title {
            font-size: 16px;
            font-weight: 800;
            color: #ffffff;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 22px;
            position: relative;
            padding-bottom: 10px;
        }

        .footer-title::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 32px;
            height: 2px;
            background: #e60000;
            border-radius: 2px;
        }

        /* Khung chứa các mục liên hệ */
        .contact-box {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-bottom: 25px;
        }

        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            font-size: 13.5px;
            line-height: 1.5;
            color: #bbbbbb;
        }

        .contact-item i {
            color: #e60000;
            font-size: 16px;
            margin-top: 2px;
            flex-shrink: 0;
        }

        .contact-text strong {
            color: #ffffff;
            display: block;
            margin-bottom: 2px;
        }

        .contact-text p {
            margin: 0;
        }

        .contact-text a {
            color: #dddddd;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .contact-text a:hover {
            color: #e60000;
        }

        .hotline-highlight {
            color: #e60000 !important;
            font-weight: 800;
            font-size: 15px;
        }

        /* Danh sách 3 Link Website xếp dòng sạch sẽ */
        .web-links-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-top: 4px;
        }

        .web-links-list a {
            color: #ffffff;
            font-size: 13px;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .web-links-list a:hover {
            color: #e60000;
        }

        /* Mạng xã hội */
        .footer-social {
            display: flex;
            align-items: center;
            gap: 15px;
            padding-top: 18px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .social-label {
            font-size: 12px;
            font-weight: 800;
            color: #ffffff;
            letter-spacing: 0.5px;
        }

        .social-icons {
            display: flex;
            gap: 10px;
        }

        .social-icon {
            width: 36px;
            height: 36px;
            background: rgba(255, 255, 255, 0.06);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            text-decoration: none;
            font-size: 14px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.35s ease;
        }

        .social-icon.zalo span {
            font-size: 10px;
            font-weight: 800;
        }

        .social-icon:hover {
            background: #e60000;
            border-color: #e60000;
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(230, 0, 0, 0.4);
        }

        /* Link Danh mục & Chính sách */
        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .footer-links a {
            color: #aaaaaa;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .footer-links a:hover {
            color: #e60000;
            padding-left: 5px;
        }

        /* Khung Map Google */
        .footer-map-box {
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        /* Thanh Copyright Chân Trang */
        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            font-size: 13px;
            color: #777777;
        }

        .copyright-text strong {
            color: #cccccc;
        }

        .back-to-top {
            width: 42px;
            height: 42px;
            background: #e60000;
            color: #ffffff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 15px;
            box-shadow: 0 6px 20px rgba(230, 0, 0, 0.4);
            transition: all 0.35s ease;
        }

        .back-to-top:hover {
            background: #ffffff;
            color: #e60000;
            transform: translateY(-4px);
        }

        /* ====================================================
   RESPONSIVE CHUẨN MỌI MÀN HÌNH (SỬA TRIỆT ĐỂ MOBILE)
==================================================== */

        @media (max-width: 1199px) {
            .footer-grid {
                grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
                gap: 30px;
            }
        }

        @media (max-width: 991px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 40px;
            }

            .footer-bottom {
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }
        }

        /* DÀNH RIÊNG CHO ĐIỆN THOẠI (<= 576px) */
        @media (max-width: 576px) {
            .site-footer {
                padding: 55px 0 25px;
            }

            .footer-grid {
                grid-template-columns: 1fr !important;
                gap: 38px !important;
            }

            .footer-col {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
            }

            /* Căn giữa Tiêu đề & Sửa vạch đỏ về đúng tâm */
            .footer-brand h2,
            .brand-sub {
                text-align: center;
            }

            .footer-title {
                text-align: center !important;
                width: 100%;
            }

            .footer-title::after {
                left: 50% !important;
                transform: translateX(-50%) !important;
            }

            /* Thẻ Kính chứa thông tin Liên hệ trên Mobile */
            .contact-box {
                background: rgba(255, 255, 255, 0.03);
                border: 1px solid rgba(255, 255, 255, 0.08);
                border-radius: 18px;
                padding: 20px 18px;
                width: 100%;
                text-align: left;
                margin-bottom: 20px;
            }

            .contact-item {
                justify-content: flex-start;
            }

            /* MXH Căn giữa */
            .footer-social {
                flex-direction: column;
                align-items: center;
                width: 100%;
            }

            /* Link Danh mục căn giữa */
            .footer-links {
                align-items: center;
            }

            .footer-links a {
                text-align: center;
            }

            .footer-links a:hover {
                padding-left: 0;
                color: #e60000;
            }

            /* Map Full Width */
            .footer-map-col {
                width: 100%;
            }

            .footer-map-box {
                width: 100%;
            }
        }

        .logo,
        .mobile-logo-box,
        .footer-logo-box {
            position: relative;
            display: inline-flex;
            overflow: hidden;
            isolation: isolate;
        }

        /* Glow xanh tím */
        .logo::before,
        .mobile-logo-box::before,
        .footer-logo-box::before {

            content: "";
            position: absolute;

            top: -120%;
            left: -45%;

            width: 18%;
            height: 340%;

            background: linear-gradient(90deg,
                    transparent 0%,
                    rgba(255, 0, 170, .25) 15%,
                    rgba(120, 70, 255, .55) 30%,
                    rgba(0, 220, 255, .85) 50%,
                    rgba(120, 70, 255, .55) 70%,
                    rgba(255, 0, 170, .25) 85%,
                    transparent 100%);

            filter:
                blur(10px) brightness(1.4);

            mix-blend-mode: screen;

            animation: shineGlow 3.8s ease-in-out infinite alternate;

            pointer-events: none;
        }

        /* Lõi trắng */
        .logo::after,
        .mobile-logo-box::after,
        .footer-logo-box::after {

            content: "";
            position: absolute;

            top: -120%;
            left: -45%;

            width: 5%;
            height: 340%;

            background: linear-gradient(90deg,
                    rgba(255, 255, 255, 0),
                    rgba(255, 255, 255, .95),
                    #fff,
                    rgba(255, 255, 255, .95),
                    rgba(255, 255, 255, 0));

            filter:
                blur(.25px) brightness(2) drop-shadow(0 0 10px rgba(255, 255, 255, .95));

            mix-blend-mode: screen;

            animation: shineCore 3.8s ease-in-out infinite alternate;

            pointer-events: none;
        }

        @keyframes shineGlow {

            from {
                transform:
                    rotate(12deg) translateX(-700%);
            }

            to {
                transform:
                    rotate(12deg) translateX(760%);
            }

        }

        @keyframes shineCore {

            from {
                transform:
                    rotate(12deg) translateX(-700%);
            }

            to {
                transform:
                    rotate(12deg) translateX(760%);
            }

        }



        /*====================================================
=   HIỆU ỨNG CHO SLIDE & ẢNH SẢN PHẨM KHÔNG BỊ TRẮNG TINH
====================================================*/

        /* 1. Đổi nền chờ tải thành màu Đỏ Đen Kiến Trúc sang trọng */
        .slide-img-box,
        .card-img-box,
        .card-img-wrap,
        .window-image,
        .news-card img,
        .projectSwiper .swiper-slide {
            background: linear-gradient(135deg, #181818 0%, #2b0808 100%) !important;
            position: relative;
            overflow: hidden;
        }

        /* 2. Hiệu ứng Dải Sóng Sáng Skeleton Shimmer chạy lướt khi chờ load */
        .slide-img-box::before,
        .card-img-box::before,
        .card-img-wrap::before,
        .window-image::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(230, 0, 0, 0.15) 30%,
                    rgba(255, 255, 255, 0.25) 50%,
                    rgba(230, 0, 0, 0.15) 70%,
                    rgba(255, 255, 255, 0) 100%);
            background-size: 200% 100%;
            animation: imageSkeletonShimmer 1.8s infinite linear;
            z-index: 1;
            pointer-events: none;
        }

        /* Keyframe cho dải sóng chạy liên tục */
        @keyframes imageSkeletonShimmer {
            0% {
                background-position: -200% 0;
            }

            100% {
                background-position: 200% 0;
            }
        }

        /* 3. Ảnh hiển thị đè lên mượt mà khi đã tải xong */
        .slide-img-box img,
        .card-img-box img,
        .card-img-wrap img,
        .window-image img {
            position: relative;
            z-index: 2;
            transition: opacity 0.4s ease-in-out, transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        /* 4. Tùy chỉnh vòng xoay Spinner đỏ cho Swiper Slide */
        .swiper-lazy-preloader {
            border-color: #e60000 transparent #e60000 transparent !important;
            width: 38px !important;
            height: 38px !important;
        }

        /*====================================================
=    WHY SECTION - UNIFIED LUXURY TYPOGRAPHY
====================================================*/

        .why {
            padding: 110px 0;
            background: #111111;
            position: relative;
            overflow: hidden;
        }

        /* ĐỒNG BỘ TIÊU ĐỀ THEO CHUẨN BRAND GUIDELINES */
        .why .title.light {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
            z-index: 2;
        }

        .why .title.light .sub-label {
            color: #e60000;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }

        /* Chấm đỏ phát sáng chỉ dẫn */
        .why .title.light .sub-label::before {
            content: "";
            width: 8px;
            height: 8px;
            background: #e60000;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 12px rgba(230, 0, 0, 0.8);
        }

        .why .title.light h2 {
            font-size: 40px;
            font-weight: 900;
            color: #ffffff;
            letter-spacing: -0.5px;
            text-transform: uppercase;
            margin: 0;
            line-height: 1.2;
        }

        /* LƯỚI THẺ LÝ DO LỰA CHỌN */
        .why-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 28px;
            position: relative;
            z-index: 2;
        }

        .why-box {
            background: #1c1c1c;
            padding: 40px 28px;
            border-radius: 22px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .why-box:hover {
            transform: translateY(-10px);
            background: #222222;
            border-color: rgba(230, 0, 0, 0.4);
            box-shadow: 0 20px 45px rgba(230, 0, 0, 0.2);
        }

        /* Icon Vuông Bo Góc Đổi Màu */
        .why-box .icon {
            width: 65px;
            height: 65px;
            background: rgba(230, 0, 0, 0.12);
            color: #e60000;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            margin-bottom: 25px;
            transition: all 0.4s ease;
        }

        .why-box:hover .icon {
            background: #e60000;
            color: #ffffff;
            transform: scale(1.1) rotate(-5deg);
            box-shadow: 0 8px 20px rgba(230, 0, 0, 0.4);
        }

        /* Tiêu đề thẻ IN HOA sắc nét */
        .why-box h3 {
            font-size: 20px;
            font-weight: 800;
            color: #ffffff;
            margin-bottom: 14px;
            line-height: 1.35;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .why-box p {
            font-size: 14px;
            line-height: 1.7;
            color: #bbbbbb;
            margin: 0;
            font-weight: 400;
        }

        /* Vạch Accent Đỏ Cảm Ứng */
        .why-accent {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 4px;
            background: linear-gradient(90deg, #e60000, #b70000);
            transition: width 0.4s ease;
        }

        .why-box:hover .why-accent {
            width: 100%;
        }

        /* RESPONSIVE */
        @media (max-width: 991px) {
            .why-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 22px;
            }

            .why .title.light h2 {
                font-size: 32px;
            }
        }

        @media (max-width: 576px) {
            .why-grid {
                grid-template-columns: 1fr;
            }

            .why {
                padding: 70px 0;
            }
        }