/* ==========================================================================
   KIẾN TRÚC ĐÁ TÂM LINH - MOBILE & GLOBAL COMPONENT OPTIMIZATION
   - Desktop (> 768px): Giữ nguyên 100% cấu trúc, chỉ bổ sung style cho 3 nút nổi & modal
   - Mobile (<= 768px): Tối ưu toàn diện theo đúng 5 yêu cầu thực tế của người dùng
   ========================================================================== */

/* ==========================================================================
   GLOBAL: 3 NÚT NỔI GÓC PHẢI DƯỚI TOÀN BỘ WEBSITE (PHONE, ZALO, SCROLL TO TOP)
   Áp dụng trên toàn bộ trang web (cả Desktop & Mobile)
   ========================================================================== */
.floating-contact {
    position: fixed !important;
    bottom: 25px !important;
    right: 20px !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
}

.float-btn {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 1.35rem !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55) !important;
    cursor: pointer !important;
    border: none !important;
    outline: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    text-decoration: none !important;
}

.float-btn:hover {
    transform: scale(1.12) translateY(-2px) !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.7) !important;
}

/* 1. Nút Gọi Điện Thoại (Đỏ Cam Hoàng Gia + Hiệu ứng sóng lan tỏa) */
.float-btn.float-phone {
    background: linear-gradient(135deg, #e53935 0%, #c62828 100%) !important;
    border: 2px solid #ffcdd2 !important;
    position: relative !important;
    order: 1 !important;
}

.float-btn.float-phone::after {
    content: '' !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background-color: #e53935 !important;
    z-index: -1 !important;
    opacity: 0.6 !important;
    animation: float-pulse-wave 2s infinite !important;
}

@keyframes float-pulse-wave {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.65); opacity: 0; }
}

/* 2. Nút Chat Zalo (Xanh Zalo Chuẩn) */
.float-btn.float-zalo {
    background: linear-gradient(135deg, #0080ff 0%, #0052cc 100%) !important;
    border: 2px solid #ffffff !important;
    order: 2 !important;
}

/* 3. Nút Quay Lại Đầu Trang (Xanh Đen Hoàng Gia + Viền Vàng Kim) */
.float-btn.float-top {
    background: #0a142c !important;
    border: 2px solid var(--gold-primary) !important;
    color: var(--gold-light) !important;
    order: 3 !important;
    display: flex !important;
}

/* ==========================================================================
   GLOBAL: MODAL XEM ẢNH DỰ ÁN & SẢN PHẨM (CHUYỂN ẢNH NHỎ XUỐNG DƯỚI - ẢNH 2)
   ========================================================================== */
#pmGalleryContainer,
#prodGalleryContainer {
    width: 100% !important;
    box-sizing: border-box !important;
}

#pmGalleryContainer > div,
#prodGalleryContainer > div {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 6px 2px 10px 2px !important;
    scrollbar-width: thin !important;
    align-items: center !important;
}

#pmGalleryContainer img,
#prodGalleryContainer img {
    width: 82px !important;
    height: 58px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

/* 2 NÚT CHUYỂN ẢNH (MỜ) TRÊN ẢNH LỚN & ĐIỀU HƯỚNG VUỐT TAY */
.modal-nav-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(5, 11, 26, 0.48) !important;
    border: 1.5px solid rgba(197, 160, 89, 0.65) !important;
    color: var(--gold-light, #f5eccb) !important;
    font-size: 1.15rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 15 !important;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    padding: 0 !important;
    outline: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: manipulation !important;
}

.modal-nav-arrow:hover {
    background: rgba(5, 11, 26, 0.82) !important;
    border-color: var(--gold-primary, #c5a059) !important;
    color: #ffffff !important;
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(197, 160, 89, 0.5) !important;
}

.modal-nav-arrow:active {
    transform: translateY(-50%) scale(0.94) !important;
    background: rgba(197, 160, 89, 0.3) !important;
}

.modal-nav-prev {
    left: 14px !important;
}

.modal-nav-next {
    right: 14px !important;
}

/* Vuốt chạm mượt mà cho khung ảnh lớn */
#prodImgBox,
#pmImgBox {
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: pan-y pinch-zoom !important;
}

#prodImg,
#pmImg {
    transition: opacity 0.2s ease-in-out !important;
}

/* ==========================================================================
   QUY TẮC DÀNH RIÊNG CHO DESKTOP (MÀN HÌNH LỚN > 768px)
   ========================================================================== */
@media (min-width: 769px) {
    .mobile-nav-header,
    .nav-menu-footer {
        display: none !important;
    }
    .nav-menu .nav-link i {
        display: none !important;
    }
}

/* ==========================================================================
   QUY TẮC DÀNH CHO MOBILE (MÀN HÌNH <= 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. TOÀN CỤC & CHỐNG TRÀN BỀ NGANG */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    * {
        box-sizing: border-box !important;
    }

    .container {
        padding: 0 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .section-padding {
        padding: 38px 0 !important;
    }

    /* TIÊU ĐỀ MỤC */
    .section-header {
        margin-bottom: 20px !important;
        padding: 0 5px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .section-badge {
        font-size: 0.72rem !important;
        padding: 4px 14px !important;
        letter-spacing: 0.08em !important;
        margin: 0 auto 10px auto !important;
    }

    .section-header h2 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
        margin: 0 auto 10px auto !important;
    }

    .header-divider {
        max-width: 180px !important;
        margin: 8px auto 12px auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .section-header p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        padding: 0 4px !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    /* 2. HEADER & NÚT 3 GẠCH & VERTICAL NAVIGATION DRAWER (ẢNH 1) */
    header,
    header.scrolled {
        height: 66px !important;
        background: #060e22 !important;
        border-bottom: 1.5px solid var(--gold-primary) !important;
    }

    header .nav-container,
    header.scrolled .nav-container {
        height: 66px !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .logo {
        gap: 8px !important;
        display: flex !important;
        align-items: center !important;
    }

    .logo img {
        height: 38px !important;
        width: 38px !important;
        flex-shrink: 0 !important;
    }

    .logo-text h1 {
        font-size: 1.02rem !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }

    .logo-text span {
        font-size: 0.6rem !important;
        letter-spacing: 0.08em !important;
    }

    .header-cta {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .header-cta .btn-gold {
        display: none !important;
    }

    .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 6px !important;
        background: rgba(197, 160, 89, 0.15) !important;
        border: 1.5px solid var(--gold-primary) !important;
        color: var(--gold-light) !important;
        font-size: 1.25rem !important;
        cursor: pointer !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
        transition: all 0.25s ease !important;
        z-index: 10001 !important;
    }

    .menu-toggle:active {
        transform: scale(0.92) !important;
        background: var(--gold-primary) !important;
        color: var(--navy-deep) !important;
    }

    /* Menu Drawer dạng cột dọc */
    .nav-menu {
        position: fixed !important;
        top: 66px !important;
        left: -100% !important;
        width: 100% !important;
        height: calc(100vh - 66px) !important;
        background: rgba(5, 11, 26, 0.98) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        flex-direction: column !important;
        padding: 15px 14px 40px 14px !important;
        gap: 4px !important;
        transition: left 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        z-index: 10000 !important;
        border-top: 1.5px solid rgba(197, 160, 89, 0.4) !important;
        overflow-y: auto !important;
        display: flex !important;
    }

    .nav-menu.active {
        left: 0 !important;
    }

    .mobile-nav-header {
        display: flex !important;
    }

    .nav-menu .nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        width: 100% !important;
        padding: 12px 14px !important;
        font-size: 0.98rem !important;
        font-weight: 600 !important;
        color: #f5f7fa !important;
        border-bottom: 1px solid rgba(197, 160, 89, 0.12) !important;
        border-radius: 6px !important;
        transition: all 0.2s ease !important;
        text-align: left !important;
    }

    .nav-menu .nav-link i {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 24px !important;
        font-size: 1.1rem !important;
        color: var(--gold-primary) !important;
    }

    .nav-menu .nav-link:hover,
    .nav-menu .nav-link.active {
        color: var(--gold-light) !important;
        background: rgba(197, 160, 89, 0.15) !important;
        border-left: 4px solid var(--gold-primary) !important;
        padding-left: 18px !important;
    }

    .nav-menu .nav-link::after {
        display: none !important;
    }

    .nav-menu-footer {
        display: flex !important;
    }

    /* 3. HERO BANNER - CĂN CHỈNH CỠ CHỮ & NÚT KHÔNG BỊ TRÀN (ẢNH 1) */
    .hero {
        min-height: auto !important;
        padding-top: 78px !important;
        padding-bottom: 22px !important;
        display: block !important;
    }

    .hero-content {
        margin-top: 10px !important;
        max-width: 100% !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .hero-tagline {
        font-size: 0.78rem !important;
        letter-spacing: 0.1em !important;
        margin-bottom: 8px !important;
        gap: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .hero h2,
    .hero-content h2 {
        font-size: clamp(1.55rem, 5.2vw, 1.95rem) !important;
        line-height: 1.28 !important;
        margin-bottom: 12px !important;
        word-break: break-word !important;
    }

    .hero p,
    .hero-content p {
        font-size: 0.88rem !important;
        line-height: 1.55 !important;
        margin-bottom: 18px !important;
        max-width: 100% !important;
        word-break: break-word !important;
    }

    .hero-btns {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .hero-btns .btn-gold,
    .hero-btns .btn-outline {
        flex: 1 !important;
        padding: 10px 4px !important;
        font-size: 0.75rem !important;
        letter-spacing: 0.02em !important;
        text-align: center !important;
        white-space: nowrap !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
    }

    /* 4. KHỐI THỐNG KÊ GỌN GÀNG TRÊN 1 HÀNG (ẢNH 2) */
    .hero-stats {
        margin-top: 20px !important;
        padding-top: 14px !important;
        border-top: 1px solid rgba(197, 160, 89, 0.25) !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .hero-stats .stat-item {
        text-align: center !important;
        padding: 0 2px !important;
        border-right: 1px solid rgba(197, 160, 89, 0.18) !important;
    }

    .hero-stats .stat-item:last-child {
        border-right: none !important;
    }

    .hero-stats .stat-item h3 {
        font-size: 1.25rem !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
    }

    .hero-stats .stat-item p {
        font-size: 0.58rem !important;
        letter-spacing: 0.02em !important;
        line-height: 1.25 !important;
        color: var(--text-silver) !important;
        margin: 0 !important;
    }

    /* 5. CĂN CHỈNH ĐỐI XỨNG PHẦN GIỚI THIỆU KHÔNG BỊ LỆCH (ẢNH 3) */
    .about-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .about-img-box {
        width: 100% !important;
    }

    .about-img-box img {
        width: 100% !important;
        height: 210px !important;
        max-height: 210px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    .about-text {
        width: 100% !important;
    }

    .about-text .section-header {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 14px !important;
    }

    .about-text .section-header h2 {
        text-align: center !important;
        font-size: 1.45rem !important;
        margin: 0 auto 8px auto !important;
    }

    .about-text .section-header .header-divider {
        margin: 8px auto 14px auto !important;
        justify-content: center !important;
    }

    .about-text p {
        font-size: 0.88rem !important;
        line-height: 1.6 !important;
        margin-bottom: 12px !important;
        word-break: break-word !important;
        color: var(--text-silver) !important;
        text-align: justify !important;
    }

    .about-text > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 14px !important;
    }

    .about-text > div:last-child a {
        width: 100% !important;
        text-align: center !important;
        padding: 10px 14px !important;
        font-size: 0.82rem !important;
    }

    /* 6. DỰ ÁN & SẢN PHẨM & TIN TỨC: LƯỚI 2 CỘT (TỈ LỆ 1:4 - ẢNH 4) */
    #homeExecutedGrid,
    #homeD3Grid,
    #homeProductGrid,
    #homeNewsGrid,
    #executedGrid,
    #d3Grid,
    #productGrid,
    #articlesGrid,
    .portfolio-grid,
    .product-grid,
    .article-grid,
    .news-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* Thẻ Dự Án (Thi công thực tế & Phối cảnh 3D) */
    .portfolio-card.project-card {
        border-radius: 6px !important;
        display: flex !important;
        flex-direction: column !important;
        background: var(--navy-medium) !important;
        overflow: hidden !important;
        border: 1px solid var(--glass-border) !important;
    }

    .portfolio-card.project-card > div:first-child {
        height: 108px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .portfolio-card.project-card > div:first-child img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    .portfolio-card.project-card > div:first-child > span:first-child {
        top: 5px !important;
        left: 5px !important;
        font-size: 0.56rem !important;
        padding: 2px 4px !important;
        border-radius: 3px !important;
    }

    .portfolio-card.project-card > div:first-child > span:nth-child(2) {
        top: 5px !important;
        right: 5px !important;
        font-size: 0.56rem !important;
        padding: 2px 5px !important;
        border-radius: 3px !important;
    }

    .portfolio-card.project-card > div:first-child > div {
        display: none !important;
    }

    .portfolio-card.project-card > div:last-child {
        padding: 7px 6px 8px 6px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        flex: 1 !important;
    }

    .portfolio-card.project-card h3 {
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
        margin-bottom: 2px !important;
        height: 2.5em !important;
        overflow: hidden !important;
    }

    .portfolio-card.project-card h3 a {
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .portfolio-card.project-card p {
        font-size: 0.62rem !important;
        line-height: 1.25 !important;
        margin-bottom: 4px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        color: var(--text-silver) !important;
    }

    .portfolio-card.project-card button.btn-gold {
        padding: 5px 2px !important;
        font-size: 0.67rem !important;
        border-radius: 4px !important;
        width: 100% !important;
        margin-top: 3px !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    /* Thẻ Sản Phẩm Đá */
    .product-card {
        border-radius: 6px !important;
        display: flex !important;
        flex-direction: column !important;
        background: var(--navy-medium) !important;
        overflow: hidden !important;
        border: 1px solid var(--glass-border) !important;
    }

    .product-card .product-img {
        height: 108px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .product-card .product-img img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    .product-card .product-tag {
        top: 5px !important;
        left: 5px !important;
        font-size: 0.56rem !important;
        padding: 2px 4px !important;
        border-radius: 3px !important;
    }

    .product-card .product-img-phones {
        display: none !important;
    }

    .product-card .product-info {
        padding: 7px 6px 8px 6px !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .product-card .product-info h3 {
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
        margin-bottom: 2px !important;
        height: 2.5em !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    .product-card .product-info p {
        display: none !important;
    }

    .product-card .product-meta {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        font-size: 0.62rem !important;
        margin-bottom: 3px !important;
    }

    .product-card .product-meta span {
        font-size: 0.62rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .product-card .product-info > div:last-child {
        margin-top: 3px !important;
        display: flex !important;
        gap: 4px !important;
    }

    .product-card .product-info button.btn-gold {
        flex: 1 !important;
        padding: 5px 2px !important;
        font-size: 0.67rem !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
    }

    .product-card .product-info a.btn-outline {
        display: none !important;
    }

    /* Thẻ Tin Tức & Cẩm Nang: Lưới 2 Cột (Ảnh 4) - Trang Chủ & Tab Tin Tức */
    #homeNewsGrid article,
    .news-grid article,
    .article-grid .article-card,
    .article-card {
        border-radius: 6px !important;
        overflow: hidden !important;
        background: var(--navy-dark) !important;
        display: flex !important;
        flex-direction: column !important;
        border: 1px solid var(--navy-light) !important;
    }

    #homeNewsGrid article > div:first-child,
    .news-grid article > div:first-child,
    .article-grid .article-card .article-img-wrap,
    .article-card-img {
        height: 108px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    #homeNewsGrid article > div:first-child img,
    .news-grid article > div:first-child img,
    .article-grid .article-card .article-img-wrap img,
    .article-card-img img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    #homeNewsGrid article > div:first-child span,
    .news-grid article > div:first-child span,
    .article-grid .article-card .article-tag,
    .article-card-img .article-tag {
        top: 5px !important;
        left: 5px !important;
        font-size: 0.55rem !important;
        padding: 2px 4px !important;
        border-radius: 3px !important;
    }

    #homeNewsGrid article > div:last-child,
    .news-grid article > div:last-child,
    .article-grid .article-card .article-body,
    .article-card-body {
        padding: 6px 6px 8px 6px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        flex: 1 !important;
    }

    #homeNewsGrid article > div:last-child > div:first-child,
    .article-grid .article-card .article-meta,
    .article-card-body .article-meta {
        font-size: 0.58rem !important;
        margin-bottom: 2px !important;
        color: var(--text-silver) !important;
    }

    #homeNewsGrid article h3,
    .news-grid article h3,
    .article-grid .article-card h3,
    .article-grid .article-card .article-title,
    .article-card-title {
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
        margin: 0 0 3px 0 !important;
        height: 2.5em !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    #homeNewsGrid article h3 a,
    .news-grid article h3 a,
    .article-grid .article-card h3 a,
    .article-card-title a {
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
        color: var(--gold-light) !important;
    }

    /* Ẩn trích dẫn dài trên thẻ xem trước 2 cột */
    #homeNewsGrid article p,
    .news-grid article p,
    .article-grid .article-card p,
    .article-grid .article-card .article-excerpt,
    .article-card-desc {
        display: none !important;
    }

    #homeNewsGrid article a[href*="tin-tuc"],
    .article-grid .article-card .read-more-btn,
    .article-card-body .read-more-btn {
        font-size: 0.67rem !important;
        color: var(--gold-primary) !important;
        margin-top: 3px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        cursor: pointer !important;
    }

    /* Trang Tin Tức (tin-tuc.html) */
    .news-main-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }

    .news-top-bar {
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }

    .news-category-pills {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        padding-bottom: 6px !important;
        gap: 6px !important;
        width: 100% !important;
        scrollbar-width: thin !important;
    }

    .news-category-pills .cat-pill {
        white-space: nowrap !important;
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
        flex-shrink: 0 !important;
    }

    /* TỐI ƯU BÀI VIẾT NỔI BẬT (FEATURED SPOTLIGHT CARD - ẢNH 1) */
    .featured-card {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        margin-bottom: 22px !important;
        border: 1.5px solid var(--gold-primary) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        background: linear-gradient(135deg, var(--navy-medium) 0%, #0d1e3d 100%) !important;
        box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important;
    }

    .featured-img-wrap {
        width: 100% !important;
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
        position: relative !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }

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

    .featured-img-wrap span {
        top: 10px !important;
        left: 10px !important;
        font-size: 0.7rem !important;
        padding: 4px 10px !important;
        border-radius: 4px !important;
    }

    .featured-body {
        padding: 15px 14px 16px 14px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .featured-body .article-tag {
        font-size: 0.72rem !important;
        padding: 3px 10px !important;
        margin-bottom: 8px !important;
        width: fit-content !important;
    }

    .featured-title {
        font-size: 1.06rem !important;
        font-weight: 700 !important;
        line-height: 1.38 !important;
        margin: 0 0 10px 0 !important;
        color: var(--gold-light) !important;
    }

    .article-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px 14px !important;
        font-size: 0.72rem !important;
        color: rgba(255, 255, 255, 0.7) !important;
        margin-bottom: 10px !important;
    }

    .article-meta span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    .featured-excerpt {
        font-size: 0.82rem !important;
        line-height: 1.55 !important;
        color: rgba(255, 255, 255, 0.82) !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin-bottom: 12px !important;
    }

    .featured-body .read-more-btn {
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        color: var(--gold-primary) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin-top: 2px !important;
    }

    /* 7. TỐI ƯU CHÂN TRANG TOÀN BỘ WEBSITE (THU GỌN CHIỀU DÀI - ẢNH 5) */
    footer {
        padding: 26px 0 14px 0 !important;
        border-top: 1.5px solid var(--gold-primary) !important;
    }

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

    /* Cột 1: Thông tin chung trải rộng 2 cột */
    .footer-col.footer-about {
        grid-column: span 2 !important;
        margin-bottom: 2px !important;
    }

    .footer-about .logo {
        margin-bottom: 8px !important;
    }

    .footer-about p {
        font-size: 0.78rem !important;
        line-height: 1.45 !important;
        margin-bottom: 8px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .footer-socials {
        display: flex !important;
        gap: 8px !important;
    }

    .footer-socials .social-link {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.82rem !important;
    }

    /* Cột 2 & Cột 3: Liên kết nhanh & Danh mục đá nằm song song (2 cột 50-50) */
    .footer-grid > .footer-col:nth-child(2),
    .footer-grid > .footer-col:nth-child(3) {
        grid-column: span 1 !important;
    }

    .footer-col h3 {
        font-size: 0.85rem !important;
        margin-bottom: 6px !important;
        color: var(--gold-light) !important;
        border-bottom: 1px solid rgba(197, 160, 89, 0.3) !important;
        padding-bottom: 3px !important;
    }

    .footer-links-list li {
        margin-bottom: 3px !important;
    }

    .footer-links-list li a {
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
        color: var(--text-silver) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .footer-links-list li a i {
        font-size: 0.55rem !important;
    }

    /* Cột 4: Xưởng chế tác trải rộng 2 cột */
    .footer-grid > .footer-col:nth-child(4) {
        grid-column: span 2 !important;
        margin-top: 2px !important;
        padding-top: 10px !important;
        border-top: 1px dashed rgba(197, 160, 89, 0.2) !important;
    }

    .footer-contact-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
    }

    .footer-contact-item {
        font-size: 0.74rem !important;
        line-height: 1.35 !important;
        gap: 8px !important;
    }

    .footer-contact-item i {
        font-size: 0.75rem !important;
    }

    /* Dòng bản quyền cuối */
    .footer-bottom {
        margin-top: 12px !important;
        padding-top: 10px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        text-align: center !important;
    }

    .footer-bottom p {
        font-size: 0.68rem !important;
        line-height: 1.4 !important;
    }

    .footer-bottom-links {
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-top: 4px !important;
    }

    .footer-bottom-links a {
        font-size: 0.65rem !important;
    }

    /* 8. NÚT NỔI TRÊN MOBILE (3 ICON GÓC PHẢI DƯỚI) */
    .floating-contact {
        bottom: 16px !important;
        right: 12px !important;
        gap: 8px !important;
    }

    .float-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.15rem !important;
    }

    /* 9. MODALS & POPUPS XEM CHI TIẾT TRÊN MOBILE (ẢNH 2 - CHỐNG TRÀN CHỮ, THU GỌN VỪA KHUNG HÌNH) */
    #productDetailModal,
    #projectDetailModal {
        padding: 8px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    #productDetailModal > div {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 92vh !important;
        max-height: 92vh !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
        margin: 0 auto !important;
    }

    /* Modal Top Header Bar */
    #productDetailModal > div > div:first-child {
        padding: 11px 14px !important;
        box-sizing: border-box !important;
    }

    #prodTag {
        font-size: 0.76rem !important;
        padding: 4px 10px !important;
        border-radius: 14px !important;
    }

    #prodTitle {
        font-size: 1.05rem !important;
        max-width: 210px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
    }

    #productDetailModal span[onclick*="closeProductModalForce"] {
        font-size: 28px !important;
        line-height: 1 !important;
    }

    /* Modal Body Grid */
    .modal-body-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 12px 10px 24px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .modal-body-grid > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Khung ảnh chính sản phẩm (Cho to lên theo yêu cầu người dùng) */
    #productDetailModal div[style*="height:520px"],
    #productDetailModal div[style*="height: 520px"],
    #prodImgBox,
    #pmImgBox {
        height: 260px !important;
        max-height: 260px !important;
        border-radius: 10px !important;
    }

    /* Nút chuyển ảnh trên Mobile */
    .modal-nav-arrow {
        width: 38px !important;
        height: 38px !important;
        font-size: 1rem !important;
        background: rgba(5, 11, 26, 0.58) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .modal-nav-prev {
        left: 8px !important;
    }

    .modal-nav-next {
        right: 8px !important;
    }

    #productDetailModal div[style*="bottom:14px"],
    #productDetailModal div[style*="bottom: 14px"] {
        bottom: 10px !important;
        padding: 6px 16px !important;
    }

    #productDetailModal div[style*="bottom:14px"] a,
    #productDetailModal div[style*="bottom: 14px"] a {
        font-size: 0.85rem !important;
        gap: 6px !important;
    }

    /* Hàng ảnh thu nhỏ (Thumbnails - Cho to lên) */
    #prodGalleryContainer,
    #pmGalleryContainer {
        margin-top: 8px !important;
        margin-bottom: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
    }

    #prodGalleryContainer > div,
    #pmGalleryContainer > div {
        padding: 4px 2px 8px 2px !important;
        gap: 8px !important;
    }

    #prodGalleryContainer img,
    #pmGalleryContainer img {
        width: 76px !important;
        height: 56px !important;
        border-radius: 6px !important;
    }

    /* Khối nội dung chi tiết & phong thủy */
    .modal-body-grid div[style*="background:#fafbfe"],
    .modal-body-grid div[style*="background: #fafbfe"] {
        padding: 15px 13px !important;
        border-radius: 10px !important;
        border-left-width: 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Tiêu đề thông tin chi tiết (Cho to lên) */
    .modal-body-grid h3 {
        font-size: 1.12rem !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        margin: 0 0 10px 0 !important;
        gap: 8px !important;
        word-break: break-word !important;
    }

    .modal-body-grid h3 i {
        font-size: 0.98rem !important;
    }

    /* Cỡ chữ mô tả (Cho to lên dễ đọc) */
    #prodDescPara {
        font-size: 0.96rem !important;
        line-height: 1.72 !important;
        color: #242c38 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: pre-line !important;
    }

    /* Cột tư vấn và đề xuất sản phẩm */
    .modal-body-grid > div:last-child {
        border-left: none !important;
        padding-left: 0 !important;
        border-top: 1px solid #e2e8f0 !important;
        padding-top: 16px !important;
    }

    .modal-body-grid > div:last-child h4 {
        font-size: 1.05rem !important;
        margin-bottom: 8px !important;
    }

    .modal-body-grid > div:last-child p {
        font-size: 0.84rem !important;
        margin-bottom: 12px !important;
    }

    .modal-body-grid .rec-prod-item {
        padding: 10px !important;
        gap: 10px !important;
    }

    .modal-body-grid .rec-prod-item img {
        width: 60px !important;
        height: 46px !important;
        border-radius: 5px !important;
    }

    .modal-body-grid .rec-prod-item h5 {
        font-size: 0.86rem !important;
        line-height: 1.35 !important;
    }

    /* Modal Chi tiết Dự Án (#projectDetailModal) */
    #projectDetailModal > div {
        padding: 16px 14px 20px 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90vh !important;
        border-radius: 12px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
    }

    #projectDetailModal span[onclick*="closeProjectModalForce"] {
        top: 10px !important;
        right: 14px !important;
        font-size: 28px !important;
    }

    #pmLocation {
        padding: 5px 12px !important;
        font-size: 0.76rem !important;
    }

    #pmTitle {
        font-size: 1.15rem !important;
        line-height: 1.35 !important;
    }

    #projectDetailModal div[style*="height:520px"],
    #projectDetailModal div[style*="height: 520px"] {
        height: 260px !important;
        max-height: 260px !important;
        border-radius: 10px !important;
        margin-bottom: 10px !important;
    }

    #projectDetailModal div[style*="bottom:14px"],
    #projectDetailModal div[style*="bottom: 14px"] {
        bottom: 10px !important;
        padding: 6px 16px !important;
    }

    #projectDetailModal div[style*="bottom:14px"] a,
    #projectDetailModal div[style*="bottom: 14px"] a {
        font-size: 0.85rem !important;
        gap: 6px !important;
    }

    #projectDetailModal h4 {
        font-size: 1.05rem !important;
        margin-bottom: 10px !important;
    }

    #pmDetailDesc {
        font-size: 0.96rem !important;
        line-height: 1.72 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    #pmSpecsContainer {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #pmSpecsContainer > div {
        font-size: 0.84rem !important;
        padding: 10px !important;
    }
}

/* MÀN HÌNH CỰC NHỎ (<= 380px) */
@media (max-width: 380px) {
    .logo-text h1 {
        font-size: 0.92rem !important;
    }
    .logo-text span {
        font-size: 0.55rem !important;
    }
    .hero-btns .btn-gold,
    .hero-btns .btn-outline {
        font-size: 0.7rem !important;
        padding: 9px 2px !important;
    }
    .hero-stats .stat-item h3 {
        font-size: 1.15rem !important;
    }
    .hero-stats .stat-item p {
        font-size: 0.52rem !important;
    }
    .portfolio-card.project-card > div:first-child,
    .product-card .product-img,
    #homeNewsGrid article > div:first-child {
        height: 98px !important;
    }
}

/* ==========================================================================
   TỐI ƯU HIỆU NĂNG TỐC ĐỘ MOBILE (GPU ACCELERATION, 0MS TAP DELAY & 60-120FPS SCROLLING)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Tắt các hiệu ứng blur (backdrop-filter) ngốn CPU/GPU gây đơ, giật màn hình khi cuộn */
    .modal-backdrop,
    .product-img-phones,
    #productDetailModal,
    #projectDetailModal,
    #readingModal,
    .float-btn,
    .hamburger-drawer,
    header.scrolled {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* 2. Tăng tốc phần cứng GPU cho thanh điều hướng, nút nổi và popup */
    .floating-contact,
    .float-btn,
    .hamburger-drawer,
    #productDetailModal > div,
    #projectDetailModal > div {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    /* 3. Tắt hoạt ảnh phóng to (scale 9s) và bộ lọc phức tạp của slider nền trên điện thoại */
    .hero-bg-slide,
    .page-banner-slide {
        transform: none !important;
        filter: brightness(0.9) !important;
        transition: opacity 0.8s ease-in-out !important;
        will-change: opacity !important;
    }

    /* 4. Cô lập vùng bố cục (Layout Containment) cho các thẻ bài viết & sản phẩm để cuộn mượt 60-120 FPS */
    .product-card,
    .portfolio-card,
    .featured-card,
    .news-card,
    article {
        contain: content !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    }

    /* 5. TỐI ƯU TỐC ĐỘ PHẢN HỒI CHẠM & KHỬ HOÀN TOÀN ĐỘ TRỄ 300MS (0MS INSTANT TAP) */
    html, body, button, a, input, select, textarea,
    .btn, .btn-gold, .btn-outline, .float-btn, .modal-nav-arrow,
    .product-card, .portfolio-card, .article-card, .featured-card,
    .rec-prod-item, .cat-pill, .nav-link, .menu-toggle,
    .mobile-nav-item, .footer-links-list a, .footer-contact-item {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* 6. Tối ưu cuộn êm cho toàn bộ trang và các container cuộn ngang */
    html, body,
    .nav-category-pills,
    .news-category-pills,
    #prodGalleryContainer > div,
    #pmGalleryContainer > div {
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: auto !important; /* Tránh xung đột cuộn quán tính trên iOS/Android */
    }
}