/*
Theme Name: N3 Theme
Theme URI: https://n3tech.vn/
Author: N3 Tech
Author URI: https://n3tech.vn/
Description: A custom WordPress theme by N3 Tech.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: n3-theme
*/

/* ========================================
   CSS Variables
   ======================================== */
:root {
    --primary: #104c82;
    --primary-hover: #0a335a;
    --accent: #e8a317;
    --accent-hover: #d97706;
    --heading: #111827;
    --text: #374151;
    --text-secondary: #4b5563;
    --text-light: #9ca3af;
    --bg: #ffffff;
    --bg-light: #f8f9fa;
    --border: #e2e8f0;
    --border-card: #e5e7eb;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --radius: 4px;
    --max-width: 1200px;
    --font: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ========================================
   Reset & Base
   ======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
}

a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--accent);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   Layout & Container
   ======================================== */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 15px;
}

.site-content {
    padding: 15px 0 60px;
}

/* ========================================
   Header, Top Bar & Navigation
   ======================================== */
.n3-topbar {
    background: #0d3c68;
    color: #e2e8f0;
    font-size: 13px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

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

.n3-topbar-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.n3-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #cbd5e1;
    font-size: 13px;
}

.n3-topbar-item a {
    color: inherit;
    transition: color 0.2s ease;
}

.n3-topbar-item a:hover {
    color: var(--accent);
}

.n3-topbar-item strong {
    color: #ffffff;
    font-weight: 600;
}

.n3-topbar-item i {
    color: var(--accent);
    font-size: 13px;
}

.n3-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-social-label {
    color: #94a3b8;
    font-size: 12px;
    margin-right: 4px;
}

.n3-topbar-right a {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
}

.n3-topbar-right a:hover {
    background: var(--accent);
    color: #ffffff;
    transform: translateY(-2px);
}

.n3-topbar-right a.zalo-icon-badge {
    width: auto;
    border-radius: 13px;
    padding: 2px 8px 2px 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.15);
}

.header-zalo-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: inline-block;
    border-radius: 50%;
}

/* --- MAIN HEADER --- */
.site-header.n3-main-header {
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    padding: 0;
    position: relative;
    z-index: 999;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.n3-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 80px;
    padding-top: 8px;
    padding-bottom: 8px;
    transition: all 0.3s ease;
}

.has-sticky.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    animation: n3SlideDown 0.3s ease forwards;
}

@keyframes n3SlideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

.has-sticky.is-sticky .n3-header-container {
    min-height: 65px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.has-sticky.is-sticky .n3-brand-wrapper .custom-logo {
    max-height: 55px;
}

/* --- BRAND / LOGO --- */
.n3-brand-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.n3-brand-wrapper .custom-logo {
    max-height: 80px;
    width: auto;
    display: block;
    transition: max-height 0.3s ease;
}

.n3-text-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.n3-logo-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary) 0%, #1d619e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(16, 76, 130, 0.2);
}

.n3-logo-info {
    display: flex;
    flex-direction: column;
}

.n3-logo-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.n3-logo-sub {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 1.8px;
    text-transform: uppercase;
    line-height: 1.2;
}

/* --- DESKTOP NAVIGATION --- */
.n3-desktop-nav {
    display: flex;
    align-items: center;
}

.n3-nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
    align-items: center;
}

.n3-nav-menu > li {
    position: relative;
}

.n3-nav-menu > li > a {
    display: block;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    color: #111827; /* Màu đen rõ ràng */
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: transparent !important;
    transition: color 0.2s ease;
    position: relative;
}

.n3-nav-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 14px;
    right: 14px;
    height: 3px;
    background: var(--accent, #e8a317);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.n3-nav-menu > li:hover > a {
    color: var(--primary, #104c82);
    background: transparent !important;
}

.n3-nav-menu > li:hover > a::after {
    transform: scaleX(1);
}

.n3-nav-menu > li.current-menu-item > a,
.n3-nav-menu > li.current_page_item > a {
    color: var(--primary, #104c82);
    background: transparent !important;
}

.n3-nav-menu > li.current-menu-item > a::after,
.n3-nav-menu > li.current_page_item > a::after {
    transform: scaleX(1);
}

/* Dropdown Sub-menu */
.n3-nav-menu ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    padding: 8px 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 1000;
    border-top: 3px solid var(--accent);
}

.n3-nav-menu li:hover > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.n3-nav-menu ul.sub-menu li a {
    display: block;
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    transition: all 0.2s ease;
}

.n3-nav-menu ul.sub-menu li a:hover {
    background: rgba(16, 76, 130, 0.06);
    color: var(--primary);
    padding-left: 22px;
}

/* --- HEADER ACTIONS & CTA --- */
.n3-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

/* --- HEADER PHONE CALL CTA --- */
.n3-header-phone-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--accent, #e8a317);
    color: #ffffff !important;
    padding: 6px 16px 6px 10px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(232, 163, 23, 0.25);
    transition: background 0.2s ease, opacity 0.2s ease;
}

.n3-header-phone-btn:hover {
    background: var(--primary, #104c82);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(16, 76, 130, 0.3);
    transform: translateY(-1px);
}

.n3-header-phone-btn .phone-btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.n3-header-phone-btn .phone-btn-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: left;
}

.n3-header-phone-btn .phone-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    opacity: 0.95;
    font-weight: 500;
}

.n3-header-phone-btn .phone-num {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* Fallback / generic CTA button */
.n3-header-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--accent) 0%, #f59e0b 100%);
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 14px rgba(232, 163, 23, 0.35);
    transition: all 0.25s ease;
}

/* Hamburger / Mobile Toggle Button */
.n3-mobile-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--primary, #104c82);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
}

.n3-mobile-toggle:hover {
    background: #f1f5f9;
    color: var(--accent, #e8a317);
    border-color: #cbd5e1;
}

.n3-mobile-toggle i {
    display: block;
    margin: 0 auto;
}

/* --- MOBILE MENU DRAWER --- */
.n3-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.n3-drawer-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.n3-mobile-drawer {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    background: #ffffff;
    z-index: 1002;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
}

.n3-mobile-drawer.is-active {
    left: 0;
}

body.n3-drawer-open {
    overflow: hidden;
}

.n3-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--primary, #104c82);
    color: #ffffff;
    min-height: 60px;
}

.n3-drawer-brand {
    display: flex;
    align-items: center;
    flex: 1;
    overflow: hidden;
    margin-right: 12px;
}

.n3-drawer-brand .custom-logo-link {
    display: flex;
    align-items: center;
}

.n3-drawer-brand .custom-logo {
    max-height: 42px;
    width: auto;
    display: block;
}

.n3-drawer-brand .n3-text-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.n3-drawer-brand .n3-logo-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    color: var(--accent, #e8a317);
    font-size: 15px;
    box-shadow: none;
}

.n3-drawer-brand .n3-logo-info {
    display: flex;
    flex-direction: column;
}

.n3-drawer-brand .n3-logo-title {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.n3-drawer-brand .n3-logo-sub {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.75);
}

.n3-drawer-title {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.n3-drawer-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s ease;
}

.n3-drawer-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.n3-drawer-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.n3-mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.n3-mobile-nav-list li {
    border-bottom: 1px solid #f1f5f9;
}

.n3-mobile-nav-list li a {
    display: block;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--heading);
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.n3-mobile-nav-list li a:hover {
    color: var(--accent);
}

.n3-mobile-nav-list ul.sub-menu {
    list-style: none;
    padding: 6px 0 6px 16px;
    background: #f8fafc;
    border-radius: 4px;
    margin-bottom: 8px;
}

.n3-mobile-nav-list ul.sub-menu li {
    border-bottom: none;
}

.n3-mobile-nav-list ul.sub-menu li a {
    padding: 7px 0;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    color: var(--text);
}

.n3-drawer-contact-block {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.n3-drawer-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent);
    color: #ffffff !important;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 13.5px;
    text-align: center;
}

.n3-drawer-hotline {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: 8px;
    color: var(--primary);
    margin-bottom: 0;
}

.n3-drawer-hotline i {
    font-size: 22px;
    color: var(--accent);
}

.n3-drawer-hotline small {
    display: block;
    font-size: 11px;
    color: var(--text-light);
}

.n3-drawer-hotline strong {
    font-size: 15px;
    color: var(--primary);
}

.n3-drawer-socials {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.n3-drawer-socials a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
}

.n3-drawer-socials a:hover {
    background: var(--accent);
    color: #ffffff;
}

.n3-drawer-socials a.social-zalo-drawer {
    background: transparent;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
}

.n3-drawer-socials a.social-zalo-drawer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Visibility Utilities */
@media (max-width: 1024px) {
    .d-none-tablet {
        display: none !important;
    }
    .n3-desktop-nav {
        display: none;
    }
    .n3-mobile-toggle {
        display: inline-flex;
    }
}

@media (max-width: 768px) {
    .d-none-mobile {
        display: none !important;
    }
    .n3-header-cta-btn {
        display: none;
    }
    .n3-header-phone-btn .phone-label {
        display: none;
    }
    .n3-header-phone-btn {
        padding: 5px 12px 5px 8px;
        gap: 6px;
    }
    .n3-header-phone-btn .phone-num {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .n3-header-phone-btn .phone-num {
        display: none;
    }
    .n3-header-phone-btn {
        padding: 0;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        justify-content: center;
    }
    .n3-header-phone-btn .phone-btn-icon {
        width: 100%;
        height: 100%;
        background: transparent;
        font-size: 15px;
    }
}

.site-footer {
    background: #1e293b;
    color: #94a3b8;
    text-align: center;
    padding: 28px 0;
    font-size: 14px;
}

/* ========================================
   Breadcrumb
   ======================================== */
.breadcrumb {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 25px;
    padding: 6px 0;
}

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

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

.breadcrumb .sep {
    margin: 0 8px;
    color: #cbd5e1;
    font-size: 12px;
}

/* ========================================
   Main Grid Layout (Content + Sidebar)
   ======================================== */
.archive-layout {
    display: grid;
    grid-template-columns: 1fr 290px;
    gap: 32px;
    align-items: start;
}

.archive-main {
    min-width: 0;
}

/* ========================================
   Category Section Header
   ======================================== */
.cat-section {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border);
}

.cat-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.cat-header {
    margin-bottom: 20px;
}

.cat-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--heading);
    letter-spacing: 0.3px;
    display: inline-block;
    padding-bottom: 6px;
    border-bottom: 3px solid var(--accent);
    margin-bottom: 0;
    text-transform: uppercase;
}

.cat-more {
    text-align: right;
    margin-top: 16px;
}

.cat-more a {
    color: var(--accent);
    font-size: 14.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s ease;
}

.cat-more a i {
    font-size: 13px;
    transition: transform 0.2s ease;
}

.cat-more a:hover i {
    transform: translateX(4px);
}

.cat-more a:hover {
    color: var(--accent-hover);
    text-decoration: none;
}

.post-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-light);
}

.post-date i {
    font-size: 14px;
    color: #9ca3af;
}

/* ========================================
   LAYOUT 1: Featured Top + 4 Cards Below
   ======================================== */
.layout-featured-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Top horizontal banner */
.lfg-top {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 22px;
    align-items: center;
}

.lfg-top__img {
    display: block;
    height: 230px;
    border-radius: var(--radius);
    overflow: hidden;
}

.lfg-top__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.lfg-top__img:hover img {
    transform: scale(1.03);
}

.lfg-top__title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
}

.lfg-top__title a {
    color: var(--heading);
}

.lfg-top__title a:hover {
    color: var(--accent);
}

.lfg-top__excerpt {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 16px;
}

.btn-primary-orange {
    display: inline-block;
    background: var(--accent);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    padding: 9px 20px;
    border-radius: 4px;
    letter-spacing: 0.4px;
    transition: background 0.2s ease, transform 0.1s;
}

.btn-primary-orange:hover {
    background: var(--accent-hover);
    color: #ffffff;
    text-decoration: none;
}

/* Bottom 4 cards */
.lfg-bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.mini-grid-card {
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
    background: #ffffff;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

.mini-grid-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: #cbd5e1;
}

.mini-grid-card__img {
    display: block;
    height: 110px;
    overflow: hidden;
}

.mini-grid-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.mini-grid-card:hover .mini-grid-card__img img {
    transform: scale(1.05);
}

.mini-grid-card__body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.mini-grid-card__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 40px;
}

.mini-grid-card__title a {
    color: var(--heading);
}

.mini-grid-card__title a:hover {
    color: var(--accent);
}

/* ========================================
   LAYOUT 2: Left Hero Card + Right 3 Stacked
   ======================================== */
.layout-hero-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
}

/* Left Hero */
.lhl-hero {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 280px;
}

.lhl-hero__link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.lhl-hero__link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.lhl-hero:hover img {
    transform: scale(1.03);
}

.lhl-hero__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
}

.lhl-hero__title {
    color: #ffffff;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.45;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Right 3 Stacked Items */
.lhl-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}

.horizontal-card {
    display: flex;
    gap: 14px;
    align-items: center;
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
    padding: 8px;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.horizontal-card:hover {
    border-color: #cbd5e1;
    box-shadow: var(--shadow-sm);
}

.horizontal-card__img {
    flex-shrink: 0;
    width: 115px;
    height: 76px;
    border-radius: 3px;
    overflow: hidden;
    display: block;
}

.horizontal-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.horizontal-card:hover .horizontal-card__img img {
    transform: scale(1.05);
}

.horizontal-card__body {
    flex: 1;
    min-width: 0;
}

.horizontal-card__title {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.horizontal-card__title a {
    color: var(--heading);
}

.horizontal-card__title a:hover {
    color: var(--accent);
}

/* ========================================
   LAYOUT 3: Standard 3-Column Grid
   ======================================== */
.layout-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.standard-card {
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
    background: #ffffff;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

.standard-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: #cbd5e1;
}

.standard-card__img {
    display: block;
    height: 135px;
    overflow: hidden;
}

.standard-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.standard-card:hover .standard-card__img img {
    transform: scale(1.05);
}

.standard-card__body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.standard-card__title {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 42px;
}

.standard-card__title a {
    color: var(--heading);
}

.standard-card__title a:hover {
    color: var(--accent);
}

/* ========================================
   Sidebar & Widgets
   ======================================== */
.archive-sidebar {
    position: sticky;
    top: 20px;
}

.sidebar-widget {
    background: #ffffff;
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.sidebar-widget:last-child {
    margin-bottom: 0;
}

.widget-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 16px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--accent);
    display: inline-block;
}

/* Search widget */
.sidebar-widget .search-form {
    display: flex;
    border: 1px solid #d1d5db;
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
}

.sidebar-widget .search-form .search-field {
    flex: 1;
    border: none;
    padding: 9px 13px;
    font-size: 14.5px;
    outline: none;
    font-family: var(--font);
    color: var(--text);
    min-width: 0;
}

.sidebar-widget .search-form .search-field::placeholder {
    color: #9ca3af;
}

.sidebar-widget .search-form .search-submit {
    background: #ffffff;
    border: none;
    border-left: 1px solid #e5e7eb;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 15px;
    color: #6b7280;
    transition: color 0.2s, background 0.2s;
}

.sidebar-widget .search-form .search-submit:hover {
    color: var(--accent);
    background: #f9fafb;
}

/* Categories widget */
.sidebar-widget.widget_categories ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-widget.widget_categories ul li {
    padding: 9px 0;
    border-bottom: 1px solid #f1f5f9;
}

.sidebar-widget.widget_categories ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-widget.widget_categories ul li a {
    color: var(--text);
    font-size: 14.5px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: block;
}

.sidebar-widget.widget_categories ul li a:hover {
    color: var(--accent);
    padding-left: 6px;
    text-decoration: none;
}

/* Featured posts widget (Tin Nổi Bật) */
.fp-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fp-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #f1f5f9;
}

.fp-item:first-child {
    padding-top: 0;
}

.fp-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.fp-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 58px;
    border-radius: 3px;
    overflow: hidden;
    display: block;
}

.fp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.fp-item:hover .fp-thumb img {
    transform: scale(1.05);
}

.fp-info {
    flex: 1;
    min-width: 0;
}

.fp-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fp-title a {
    color: var(--heading);
}

.fp-title a:hover {
    color: var(--accent);
}

.fp-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13.5px;
    color: var(--text-light);
}

/* ========================================
   Single Post Layout & Typography
   ======================================== */
.single-article {
    background: #ffffff;
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
    padding: 28px 32px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 35px;
}

.single-header {
    margin-bottom: 22px;
}

.single-title {
    font-size: 27px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--heading);
    margin-bottom: 15px;
    text-transform: none;
}

.single-meta-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    color: var(--text-light);
    flex-wrap: wrap;
    gap: 10px;
}

.single-meta-left {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.meta-item i {
    color: var(--accent);
    font-size: 14px;
}

.meta-author {
    font-weight: 600;
    color: var(--primary);
}

.single-share-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.share-label {
    font-size: 14px;
    color: var(--text-light);
}

.share-btn {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    position: relative;
    font-size: 14px;
    transition: all 0.2s ease;
}

.share-btn.share-fb:hover {
    background: #1877f2;
    color: #ffffff;
    border-color: #1877f2;
}

.share-btn.share-copy:hover {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

.copy-tooltip {
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #ffffff;
    font-size: 12px;
    padding: 4px 9px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
}

.copy-tooltip.show {
    opacity: 1;
    visibility: visible;
}

.single-featured-image {
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 24px;
}

.single-featured-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ========================================
   Table of Contents (Mục Lục Tự Động)
   ======================================== */
.n3-toc {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 16px 22px;
    margin: 26px 0;
}

.n3-toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.n3-toc-title {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--heading);
    display: flex;
    align-items: center;
    gap: 8px;
}

.n3-toc-title i {
    color: var(--accent);
    font-size: 15px;
}

.n3-toc-toggle {
    font-size: 14px;
    color: var(--text-light);
    transition: transform 0.2s ease;
}

.n3-toc-body {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.n3-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-item {
    padding: 5px 0;
    font-size: 15px;
    line-height: 1.6;
}

.toc-item.toc-h2 {
    font-weight: 600;
}

.toc-item.toc-h2 a {
    color: #334155;
    transition: color 0.2s ease;
}

.toc-item.toc-h2 a:hover {
    color: var(--accent);
}

.toc-item.toc-h3 {
    padding-left: 22px;
    font-size: 14px;
}

.toc-item.toc-h3 a {
    color: #64748b;
    transition: color 0.2s ease;
}

.toc-item.toc-h3 a:hover {
    color: var(--accent);
}

.toc-num {
    color: var(--accent);
    margin-right: 5px;
    font-weight: 600;
}

/* ========================================
   Single Post Content Typography
   ======================================== */
.single-entry-content {
    font-size: 16.5px;
    line-height: 1.9;
    color: var(--text);
}

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

.single-entry-content h2 {
    font-size: 23px;
    font-weight: 700;
    color: var(--heading);
    margin-top: 34px;
    margin-bottom: 14px;
    line-height: 1.4;
    border: none;
    padding: 0;
}

.single-entry-content h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--heading);
    margin-top: 26px;
    margin-bottom: 12px;
    line-height: 1.4;
    border: none;
    padding: 0;
}

.single-entry-content h4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--heading);
    margin-top: 20px;
    margin-bottom: 10px;
}

.single-entry-content blockquote {
    border-left: 4px solid var(--accent);
    background: #f8fafc;
    padding: 14px 20px;
    margin: 22px 0;
    font-style: italic;
    color: var(--text-secondary);
    border-radius: 0 4px 4px 0;
    font-size: 16px;
}

.single-entry-content ul,
.single-entry-content ol {
    margin: 0 0 18px 24px;
}

.single-entry-content li {
    margin-bottom: 8px;
}

.single-entry-content img {
    border-radius: var(--radius);
    margin: 20px 0;
}

/* ========================================
   Tags & Navigation
   ======================================== */
.single-tags {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    font-size: 14px;
}

.tags-title {
    font-weight: 600;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.tags-title i {
    color: var(--accent);
    font-size: 14px;
}

.single-tags a {
    background: #f1f5f9;
    color: var(--text-secondary);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;
}

.single-tags a:hover {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

.single-navigation {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.nav-card {
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
    padding: 14px 18px;
    display: block;
    background: #ffffff;
    transition: all 0.2s ease;
}

.nav-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.nav-card-right {
    text-align: right;
}

.nav-sub {
    font-size: 13.5px;
    color: var(--accent);
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.nav-card-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--heading);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   Related Posts
   ======================================== */
.related-posts-section {
    margin-top: 38px;
}

/* ========================================
   Search Results & Empty State
   ======================================== */
.search-count-info {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 22px;
}

.no-search-results {
    background: #ffffff;
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
    padding: 45px 32px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.no-results-icon {
    font-size: 46px;
    color: #cbd5e1;
    margin-bottom: 18px;
}

.no-results-title {
    font-size: 21px;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 12px;
}

.no-results-desc {
    font-size: 15.5px;
    color: var(--text-secondary);
    max-width: 550px;
    margin: 0 auto 25px;
    line-height: 1.65;
}

.no-results-search-box {
    max-width: 460px;
    margin: 0 auto 32px;
}

.no-results-search-box .search-form {
    display: flex;
    border: 2px solid #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.no-results-search-box .search-field {
    flex: 1;
    border: none;
    padding: 11px 16px;
    font-size: 15px;
    font-family: var(--font);
    outline: none;
}

.no-results-search-box .search-submit {
    background: var(--accent);
    color: #ffffff;
    border: none;
    padding: 11px 20px;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.2s ease;
}

.no-results-search-box .search-submit:hover {
    filter: brightness(0.92);
}

.no-results-suggestions {
    text-align: left;
    max-width: 550px;
    margin: 0 auto;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 20px 24px;
}

.no-results-suggestions h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--heading);
    margin: 0 0 10px 0;
}

.no-results-suggestions ul {
    margin: 0 0 0 20px;
    padding: 0;
    color: var(--text-secondary);
    font-size: 14.5px;
    line-height: 1.65;
}

.no-results-suggestions li {
    margin-bottom: 7px;
}

/* ========================================
   Pagination
   ======================================== */
.pagination {
    margin-top: 35px;
    text-align: center;
}

.pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
}

.pagination .page-numbers {
    display: inline-block;
    padding: 7px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14.5px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.pagination .page-numbers.current {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.pagination .page-numbers:hover:not(.current) {
    border-color: var(--primary);
    color: var(--primary);
}

/* ========================================
   Responsive Breakpoints
   ======================================== */
@media (max-width: 1024px) {
    .archive-layout {
        grid-template-columns: 1fr 260px;
        gap: 22px;
    }
    .lfg-bottom {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .archive-layout {
        grid-template-columns: 1fr;
    }

    .archive-sidebar {
        position: static;
        margin-top: 35px;
    }

    .lfg-top {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .lfg-top__img {
        height: 210px;
    }

    .layout-hero-list {
        grid-template-columns: 1fr;
    }

    .lhl-hero {
        min-height: 230px;
    }

    .layout-grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .lfg-bottom {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 12px;
    }

    .cat-section {
        margin-bottom: 28px;
        padding-bottom: 20px;
    }

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

    .lfg-top__img {
        height: 180px;
    }

    .lfg-top__title {
        font-size: 16.5px;
    }

    .lfg-bottom {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .mini-grid-card__img {
        height: 95px;
    }

    .mini-grid-card__body {
        padding: 8px 10px 10px;
    }

    .mini-grid-card__title {
        font-size: 14px;
        height: 38px;
        line-height: 1.35;
    }

    .layout-grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .standard-card__img {
        height: 100px;
    }

    .standard-card__body {
        padding: 8px 10px 10px;
    }

    .standard-card__title {
        font-size: 14px;
        height: 38px;
        line-height: 1.35;
    }

    .horizontal-card__img {
        width: 90px;
        height: 65px;
    }

    .horizontal-card__title {
        font-size: 14px;
        line-height: 1.35;
    }

    .post-date {
        font-size: 14px;
    }
}

/* ==========================================================================
   EVENT LANDING PAGE STYLES (VIETPOWER STYLE)
   ========================================================================== */
.n3-event-landing-page {
    font-family: 'Montserrat', sans-serif;
    color: var(--text, #374151);
    background-color: #f8fafc;
    overflow-x: hidden;
    position: relative;
    font-size: 16px;
    line-height: 1.6;
}

.n3-event-landing-page * {
    box-sizing: border-box;
}

/* Common Section Layout */
.n3-section {
    padding: 60px 0;
}

.n3-section:nth-child(even) {
    background-color: #ffffff;
}

.n3-section-title-wrap {
    margin-bottom: 40px;
}

.n3-section-title-wrap.text-center {
    text-align: center;
}

.n3-section-title-wrap.text-left {
    text-align: left;
}

.n3-section-title {
    font-size: 26px;
    font-weight: 600;
    color: var(--heading, #111827);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px 0;
}

.n3-title-divider {
    display: block;
    width: 60px;
    height: 3px;
    background: var(--accent, #e8a317);
    border-radius: 2px;
    margin: 0 auto;
}

.n3-title-divider.left {
    margin: 0;
}

.n3-section-subtitle {
    font-size: 15px;
    color: #64748b;
    margin-top: 10px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

/* Button Styles */
.n3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.n3-btn-primary {
    background: var(--primary, #104c82);
    color: #ffffff;
}

.n3-btn-primary:hover {
    background: #0c3963;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 76, 130, 0.3);
}

.n3-btn-hotline {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    font-size: 17px;
    padding: 12px 30px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
}

.n3-btn-hotline:hover {
    background: linear-gradient(135deg, #059669, #047857);
    color: #ffffff;
    transform: translateY(-2px);
}

.n3-btn-quote {
    background: var(--accent, #e8a317);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(232, 163, 23, 0.35);
}

.n3-btn-quote:hover {
    background: #d4920f;
    color: #ffffff;
    transform: translateY(-2px);
}

/* ==========================================================================
   1. HERO BANNER SLIDER (SWIPER WITH ARROWS & DOTS)
   ========================================================================== */
.n3-hero-slider-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #0f172a;
}

.n3-hero-swiper {
    width: 100%;
    position: relative;
}

.n3-hero-swiper .swiper-slide {
    position: relative;
    overflow: hidden;
    background: #0f172a;
}

.n3-hero-slide-link {
    display: block;
    width: 100%;
    text-decoration: none;
}

.n3-hero-slide-img {
    width: 100%;
    height: auto;
    max-height: 650px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

/* Swiper Navigation Arrows (Glassmorphic Circles) */
.n3-slider-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(6px);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.3s ease;
    z-index: 10;
}

.n3-slider-arrow::after {
    display: none !important; /* Hide Swiper default icon font */
}

.n3-slider-arrow:hover {
    background: var(--primary, #104c82);
    border-color: #ffffff;
    transform: scale(1.1);
    color: #ffffff;
}

.swiper-button-prev.n3-slider-arrow {
    left: 24px;
}

.swiper-button-next.n3-slider-arrow {
    right: 24px;
}

/* Swiper Pagination Dots (Bottom Center) */
.n3-slider-dots.swiper-pagination {
    bottom: 24px;
    z-index: 10;
}

.n3-slider-dots .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.6);
    opacity: 1;
    margin: 0 5px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.n3-slider-dots .swiper-pagination-bullet-active {
    background: #ffffff;
    width: 26px;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   2. ABOUT & VIDEO SECTION
   ========================================================================== */
.n3-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.n3-about-desc {
    font-size: 15px;
    color: var(--text, #374151);
    line-height: 1.7;
    margin-bottom: 20px;
}

.n3-check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.n3-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 15px;
    color: var(--text, #374151);
    line-height: 1.5;
}

.n3-check-list li i {
    color: #10b981;
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.n3-check-list.two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}

.n3-video-wrapper {
    position: relative;
    width: 100%;
    min-height: 380px;
    height: 400px;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
    background: #000;
}

.n3-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ==========================================================================
   3. SERVICES SECTION (9 CARDS GRID 3x3)
   ========================================================================== */
.n3-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.n3-service-card {
    display: block;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    text-decoration: none;
    transition: all 0.3s ease;
}

.n3-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    border-color: var(--primary, #104c82);
}

.service-img-wrap {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: #e2e8f0;
}

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

.n3-no-thumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    color: #94a3b8;
    font-size: 36px;
}

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

.service-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
}

.service-title-bar {
    padding: 16px 18px;
    background: #ffffff;
    text-align: center;
}

.service-title-bar h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--heading, #111827);
    margin: 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.n3-service-card:hover .service-title-bar h3 {
    color: var(--primary, #104c82);
}

/* ==========================================================================
   4. WHY CHOOSE US (DEMO 01 STYLE)
   ========================================================================== */
.n3-why-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 35px;
}

.why-stat-box {
    background: #ffffff;
    border: 1.5px solid #8ca6c1;
    border-radius: 4px;
    padding: 35px 20px 25px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.why-stat-box:hover {
    border-color: var(--primary, #104c82);
    box-shadow: 0 8px 25px rgba(16, 76, 130, 0.12);
    transform: translateY(-4px);
}

.stat-icon-wrap {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.stat-icon-img {
    max-height: 60px;
    max-width: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.stat-icon-wrap i {
    font-size: 45px;
    color: #104c82;
}

.stat-title {
    font-size: 15px;
    font-weight: 700;
    color: #104c82;
    margin: 0;
    line-height: 1.4;
}

.n3-why-intro-desc {
    max-width: 950px;
    margin: 0 auto 30px auto;
    text-align: center;
}

.n3-why-intro-desc p {
    font-size: 15px;
    color: #374151;
    line-height: 1.7;
    margin: 0;
}

/* Accordion List */
.n3-why-accordion-wrap {
    max-width: 1000px;
    margin: 0 auto;
    border-top: 1px solid #e2e8f0;
}

.n3-accordion-item {
    border-bottom: 1px solid #e2e8f0;
}

.n3-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 10px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.n3-accordion-header:hover {
    color: var(--primary, #104c82);
    background-color: #f8fafc;
}

.acc-arrow {
    font-size: 13px;
    color: #94a3b8;
    transition: transform 0.3s ease, color 0.3s ease;
}

.acc-title {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.n3-accordion-item.active .acc-arrow {
    transform: rotate(180deg);
    color: var(--primary, #104c82);
}

.n3-accordion-item.active .acc-title {
    color: var(--primary, #104c82);
    font-weight: 700;
}

.n3-accordion-body {
    display: none;
    padding: 0 10px 18px 36px;
}

.n3-accordion-item.active .n3-accordion-body {
    display: block;
}

.n3-accordion-body p {
    font-size: 14.5px;
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   5. PROCESS SECTION (6 STEPS - DEMO STYLE)
   ========================================================================== */
.n3-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px 35px;
    margin-top: 35px;
}

.n3-process-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease;
}

.process-img-wrap {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    width: 100%;
}

.process-img {
    max-height: 130px;
    max-width: 240px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.n3-process-item:hover .process-img {
    transform: translateY(-4px) scale(1.04);
}

.process-icon-box {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #f0f7ff;
    border: 1.5px solid #bcd8f5;
    color: var(--primary, #104c82);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.process-content {
    text-align: center;
    max-width: 320px;
    margin: 0 auto;
}

.process-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.process-desc {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   6. PROJECTS SECTION (6 ITEMS)
   ========================================================================== */
.n3-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.n3-project-card {
    display: block;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    text-decoration: none;
    transition: all 0.3s ease;
}

.n3-project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

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

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

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

.project-hover-btn {
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent, #e8a317);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.n3-project-card:hover .project-hover-btn {
    opacity: 1;
    transform: translateY(0);
}

.project-info {
    padding: 16px 20px;
}

.project-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--heading, #111827);
    margin: 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.n3-project-card:hover .project-title {
    color: var(--primary, #104c82);
}

/* ==========================================================================
   7. PARTNERS SECTION (SLIDER - DEMO STYLE)
   ========================================================================== */
.n3-partners-slider-wrapper {
    position: relative;
    max-width: 1140px;
    margin: 35px auto 0;
    padding: 0 52px;
}

.n3-partners-swiper {
    width: 100%;
    overflow: hidden;
    padding: 8px 4px;
}

.partner-slide {
    display: flex;
    justify-content: center;
    height: auto;
}

.partner-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    width: 100%;
    height: 96px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.partner-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.12);
    transform: translateY(-3px);
}

.partner-card img {
    max-height: 52px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

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

.partner-text {
    font-size: 15px;
    font-weight: 700;
    color: #475569;
    text-align: center;
}

/* Circular Blue Navigation Buttons (Matching Demo Screenshot) */
.partner-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid #3b82f6;
    background: #ffffff;
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    font-size: 13px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.partner-nav-btn:hover {
    background: #3b82f6;
    color: #ffffff;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.partner-nav-prev {
    left: 2px;
}

.partner-nav-next {
    right: 2px;
}

/* ==========================================================================
   8. PRESS SECTION
   ========================================================================== */
.n3-press-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.n3-press-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.n3-press-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary, #104c82);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.press-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.press-badge {
    background: #e0f2fe;
    color: #0369a1;
    font-size: 13px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
}

.press-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--heading, #111827);
    margin: 0;
}

.press-quote {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 15px 0;
    font-style: italic;
}

.press-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary, #104c82);
    text-decoration: none;
    display: inline-block;
}

.press-link:hover {
    color: var(--accent, #e8a317);
    text-decoration: underline;
}

/* ==========================================================================
   9. KNOWLEDGE SECTION (3 CARDS)
   ========================================================================== */
.n3-knowledge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.n3-knowledge-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.n3-knowledge-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.knowledge-thumb-wrap {
    position: relative;
    height: 200px;
    display: block;
    overflow: hidden;
}

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

.n3-knowledge-card:hover .knowledge-thumb-wrap img {
    transform: scale(1.08);
}

.knowledge-date-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--primary, #104c82);
    color: #ffffff;
    border-radius: 8px;
    padding: 6px 10px;
    text-align: center;
    line-height: 1.1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.knowledge-date-badge .day {
    display: block;
    font-size: 16px;
    font-weight: 800;
}

.knowledge-date-badge .month {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
}

.knowledge-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.knowledge-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.knowledge-title a {
    color: var(--heading, #111827);
    text-decoration: none;
    transition: color 0.3s ease;
}

.knowledge-title a:hover {
    color: var(--primary, #104c82);
}

.knowledge-excerpt {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   10. FOOTER & STICKY ACTION BAR
   ========================================================================== */
.n3-event-footer {
    position: relative;
    background-size: cover;
    background-position: center bottom;
    color: #ffffff;
    padding: 70px 0 30px;
    margin-bottom: 0;
}

.n3-footer-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(15, 23, 42, 0.98) 100%);
}

.n3-footer-container {
    position: relative;
    z-index: 2;
}

.n3-footer-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.2fr 0.9fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col-title {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-left: 3px solid var(--accent, #e8a317);
    padding-left: 10px;
}

.footer-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-info-list li {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 14px;
    color: #cbd5e1;
    line-height: 1.5;
}

.footer-info-list li i {
    color: var(--accent, #e8a317);
    margin-top: 3px;
    font-size: 16px;
    flex-shrink: 0;
}

.footer-info-list li strong {
    color: #ffffff;
    font-size: 15px;
}

/* Consultation Form in Footer */
.n3-footer-form-box {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 24px;
}

.form-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--accent, #e8a317);
    margin: 0 0 6px 0;
    text-transform: uppercase;
}

.form-desc {
    font-size: 14px;
    color: #e2e8f0;
    margin: 0 0 16px 0;
}

.n3-event-quote-form .form-group,
.n3-footer-form-box .form-group {
    margin-bottom: 12px;
}

.n3-event-quote-form input,
.n3-footer-form-box input[type="text"],
.n3-footer-form-box input[type="tel"],
.n3-footer-form-box input[type="email"],
.n3-footer-form-box .form-control {
    width: 100%;
    height: 46px;
    padding: 10px 16px;
    border-radius: 6px;
    border: 1px solid #ffffff;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.n3-event-quote-form input:focus,
.n3-footer-form-box input[type="text"]:focus,
.n3-footer-form-box input[type="tel"]:focus,
.n3-footer-form-box input[type="email"]:focus,
.n3-footer-form-box .form-control:focus {
    outline: none;
    border-color: var(--accent, #e8a317);
    box-shadow: 0 0 0 3px rgba(232, 163, 23, 0.25);
    background: #ffffff;
}

.n3-footer-form-box .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    margin-bottom: 12px;
}

.n3-footer-form-box .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
    font-size: 12px;
    color: #fca5a5;
    margin-top: 4px;
    display: block;
}

.n3-btn-submit,
.n3-footer-form-box input[type="submit"] {
    width: 100%;
    height: 48px;
    background: var(--accent, #e8a317);
    color: #ffffff;
    padding: 12px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(232, 163, 23, 0.35);
}

.n3-btn-submit:hover,
.n3-footer-form-box input[type="submit"]:hover {
    background: #d4920f;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(232, 163, 23, 0.45);
}

.n3-footer-form-box .wpcf7-spinner {
    display: block;
    margin: 8px auto 0;
    background-color: #ffffff;
}

.n3-footer-form-box .wpcf7-response-output {
    margin: 15px 0 0 0 !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    font-size: 13.5px !important;
    color: #ffffff !important;
    text-align: center;
}

.n3-footer-form-box form.sent .wpcf7-response-output {
    background: rgba(16, 185, 129, 0.25) !important;
    border: 1px solid #10b981 !important;
}

.n3-footer-form-box form.invalid .wpcf7-response-output,
.n3-footer-form-box form.unaccepted .wpcf7-response-output {
    background: rgba(239, 68, 68, 0.25) !important;
    border: 1px solid #ef4444 !important;
}

/* Social links */
.footer-social-links {
    display: flex;
    gap: 10px;
}

.social-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
    transition: all 0.3s ease;
}

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

.social-btn.facebook:hover { background: #1877f2; }
.social-btn.youtube:hover { background: #ff0000; }
.social-btn.tiktok:hover { background: #000000; }

.social-btn.zalo {
    background: transparent;
    border: none;
    padding: 0;
    overflow: hidden;
}

.social-btn.zalo:hover {
    background: transparent;
    transform: translateY(-3px) scale(1.08);
}

.zalo-img-icon {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    box-shadow: 0 2px 8px rgba(0, 104, 255, 0.35);
}

.n3-footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    text-align: center;
    font-size: 14px;
    color: #94a3b8;
}

/* ==========================================================================
   RESPONSIVE DESIGN (TABLET & MOBILE)
   ========================================================================== */
@media (max-width: 1024px) {
    .n3-hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .n3-hero-brand {
        margin: 0 auto 15px auto;
    }

    .n3-hero-actions {
        justify-content: center;
    }

    .n3-about-grid {
        grid-template-columns: 1fr;
    }

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

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

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

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

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

    .n3-footer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .n3-hero-title {
        font-size: 26px;
    }

    .discount-value {
        font-size: 24px;
    }

    .hex-item {
        width: 130px;
        height: 130px;
    }

    .n3-section-title {
        font-size: 20px;
    }

    .n3-services-grid {
        grid-template-columns: 1fr;
    }

    .n3-why-stats-grid {
        grid-template-columns: 1fr;
    }

    .n3-check-list.two-cols {
        grid-template-columns: 1fr;
    }

    .n3-process-grid {
        grid-template-columns: 1fr;
    }

    .n3-projects-grid {
        grid-template-columns: 1fr;
    }

    .n3-knowledge-grid {
        grid-template-columns: 1fr;
    }

    .n3-partners-slider-wrapper {
        padding: 0 40px;
    }

    .partner-nav-btn {
        width: 32px;
        height: 32px;
        font-size: 11px;
    }

    .partner-card {
        height: 80px;
        padding: 8px 12px;
    }

    .partner-card img {
        max-height: 42px;
    }

    .n3-brand-wrapper .custom-logo {
        max-height: 60px;
    }
}

/* ==========================================================================
   MASCOT LANDING PAGE & PRODUCT TABS
   ========================================================================== */
.n3-mascot-landing-page {
    background: #f8fafc;
    min-height: 600px;
}

.n3-mascot-hero {
    position: relative;
    background: linear-gradient(135deg, #104c82 0%, #0d3c68 100%);
    color: #ffffff;
    padding: 70px 0 60px;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.n3-mascot-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 25, 47, 0.78) 0%, rgba(15, 23, 42, 0.88) 100%);
    z-index: 1;
}

.n3-mascot-hero .container {
    position: relative;
    z-index: 2;
}

.n3-mascot-hero-title {
    font-size: 30px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.n3-mascot-hero-sub {
    font-size: 15.5px;
    color: #e2e8f0;
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.65;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.n3-mascot-main-container {
    padding: 35px 0 50px;
}

.n3-mascot-products-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Tab Header Buttons */
.n3-mascot-tabs-header {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    align-items: center;
    flex-wrap: wrap;
}

.n3-mascot-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    background: #ffffff;
    border: 1.5px solid #fde68a;
    color: var(--accent);
    transition: all 0.25s ease;
    font-family: inherit;
}

.n3-mascot-tab-btn:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(232, 163, 23, 0.18);
}

.n3-mascot-tab-btn.is-active {
    background: #111827;
    color: #ffffff;
    border-color: #111827;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.tab-badge-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

/* Tab Panels */
.n3-mascot-tab-panel {
    display: none;
}

.n3-mascot-tab-panel.is-active {
    display: block;
    animation: n3TabFadeIn 0.3s ease;
}

@keyframes n3TabFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 5 Columns Grid */
.n3-mascot-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 30px;
}

.n3-mascot-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    position: relative;
}

.n3-mascot-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 10px 25px rgba(232, 163, 23, 0.15);
}

.n3-mascot-thumb-wrap {
    position: relative;
    padding-top: 100%;
    display: block;
    overflow: hidden;
    background: #f8fafc;
}

.n3-mascot-thumb-link {
    position: absolute;
    inset: 0;
    display: block;
    cursor: pointer;
    z-index: 1;
}

.n3-mascot-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.n3-mascot-card:hover .n3-mascot-img {
    transform: scale(1.06);
}

.n3-mascot-img-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 32px;
}

/* Quick View Center Button on Card Hover */
.n3-quickview-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 42px;
    height: 42px;
    background: var(--accent);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.n3-mascot-card:hover .n3-quickview-btn {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.n3-quickview-btn:hover {
    background: var(--accent-hover);
    transform: translate(-50%, -50%) scale(1.1);
}

.n3-mascot-info {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    justify-content: space-between;
}

.n3-mascot-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 38px;
}

.n3-mascot-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.n3-mascot-title a:hover {
    color: var(--accent);
}

.n3-mascot-price {
    font-size: 14px;
    font-weight: 700;
    color: #dc2626;
    margin-top: auto;
}

/* View All Button */
.n3-mascot-view-all-wrapper {
    text-align: center;
    margin-top: 25px;
}

.n3-mascot-view-all-btn {
    display: inline-block;
    padding: 9px 28px;
    border: 1.5px solid var(--accent);
    color: var(--accent);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: #ffffff;
    transition: all 0.25s ease;
}

.n3-mascot-view-all-btn:hover {
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(232, 163, 23, 0.25);
    transform: translateY(-2px);
}

.n3-no-products {
    text-align: center;
    color: #64748b;
    padding: 40px 0;
    font-size: 15px;
}

/* ==========================================================
 * QUICK VIEW MODAL / POPUP
 * ========================================================== */
body.n3-modal-open {
    overflow: hidden !important;
}

.n3-mascot-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.n3-mascot-modal.is-active {
    opacity: 1;
    visibility: visible;
}

.n3-mascot-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.n3-mascot-modal-dialog {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    transform: scale(0.92) translateY(15px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
}

.n3-mascot-modal.is-active .n3-mascot-modal-dialog {
    transform: scale(1) translateY(0);
}

.n3-mascot-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    background: #f1f5f9;
    color: #64748b;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 20;
}

.n3-mascot-modal-close:hover {
    background: var(--accent);
    color: #ffffff;
    transform: rotate(90deg);
}

.n3-mascot-modal-body {
    padding: 28px;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 28px;
}

/* Modal Gallery */
.n3-modal-gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.n3-modal-main-img-wrap {
    position: relative;
    padding-top: 100%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.n3-modal-main-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.n3-modal-thumbs {
    display: flex;
    gap: 10px;
}

.n3-modal-thumb-item {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    border: 1.5px solid #e2e8f0;
    overflow: hidden;
    cursor: pointer;
    background: #f8fafc;
    transition: all 0.2s ease;
}

.n3-modal-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.n3-modal-thumb-item:hover,
.n3-modal-thumb-item.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(232, 163, 23, 0.25);
}

/* Modal Details */
.n3-modal-details {
    display: flex;
    flex-direction: column;
}

.n3-modal-title {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px 0;
    line-height: 1.35;
    padding-right: 25px;
}

.n3-modal-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13.5px;
    color: #64748b;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 14px;
}

.n3-meta-item strong.text-orange,
.n3-meta-item strong.text-accent {
    color: var(--accent);
    font-weight: 600;
}

.n3-modal-price {
    font-size: 22px;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 14px;
}

.n3-modal-desc {
    font-size: 14.5px;
    line-height: 1.65;
    color: #475569;
    margin-bottom: 24px;
    padding-top: 10px;
}

/* Responsive for Mascot Grid */
@media (max-width: 1200px) {
    .n3-mascot-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .n3-mascot-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
    .n3-mascot-modal-body {
        grid-template-columns: 280px 1fr;
        gap: 20px;
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .container,
    .n3-mascot-main-container,
    .n3-product-main-wrap .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }
    .n3-mascot-main-container {
        padding-top: 20px !important;
        padding-bottom: 35px !important;
    }
    .n3-mascot-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .n3-mascot-title {
        font-size: 13px;
        min-height: 36px;
    }
    .n3-mascot-price {
        font-size: 13.5px;
    }
}

@media (max-width: 680px) {
    .n3-mascot-modal-body {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .n3-modal-gallery {
        max-width: 260px;
        margin: 0 auto;
    }
}

/* ==========================================================
 * MASCOT BOX SECTIONS (CHO THUÊ & ORDER)
 * ========================================================== */
.n3-mascot-box-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 30px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.n3-mascot-box-header {
    border-bottom: 2px solid var(--accent);
    background: #ffffff;
    display: flex;
    align-items: flex-end;
}

.n3-mascot-ribbon-badge {
    background: var(--accent);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 30px 10px 16px;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}

.ribbon-watch-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}

.ribbon-title {
    line-height: 1;
}

.n3-mascot-box-body {
    padding: 18px;
}

.n3-mascot-featured-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 16px;
    align-items: start;
}

/* Left Promo Column */
.n3-mascot-promo-col {
    display: flex;
    flex-direction: column;
    align-self: start;
}

.n3-mascot-promo-card {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    height: 282px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.n3-mascot-promo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.n3-mascot-promo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.n3-mascot-promo-card:hover img {
    transform: scale(1.03);
}

.n3-mascot-promo-indicator {
    margin-top: 15px;
    border: 1.5px solid var(--accent);
    border-radius: 4px;
    padding: 2px 4px;
    height: 10px;
    display: flex;
    align-items: center;
    background: #ffffff;
}

.n3-mascot-promo-indicator .indicator-bar.is-active {
    width: 14px;
    height: 6px;
    background: #111827;
    border-radius: 3px;
    display: block;
}

/* Right 4 Products Row Grid */
.n3-mascot-products-col {
    flex: 1;
    min-width: 0;
}

.n3-mascot-row-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    height: 100%;
}

.n3-mascot-row-grid .n3-mascot-card {
    height: 100%;
}

/* ==========================================================
 * BRANDS SECTION (THƯƠNG HIỆU NỔI BẬT)
 * ========================================================== */
.n3-brands-section .n3-mascot-box-body {
    padding: 22px 20px;
}

.n3-brands-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    margin: 0 auto;
}

.n3-brand-item {
    flex: 0 0 auto;
    width: 160px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.n3-brand-item img {
    max-width: 100%;
    max-height: 58px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
    filter: grayscale(100%) contrast(110%);
    opacity: 0.88;
}

.n3-brand-item:hover img {
    filter: grayscale(0%) contrast(100%);
    opacity: 1;
    transform: scale(1.08);
}

/* Responsive for Mascot Box Sections */
@media (max-width: 1200px) {
    .n3-mascot-featured-layout {
        grid-template-columns: 200px 1fr;
        gap: 12px;
    }
    .n3-mascot-row-grid {
        gap: 12px;
    }
    .n3-brands-grid {
        gap: 22px;
    }
    .n3-brand-item {
        width: 125px;
        height: 60px;
    }
    .n3-brand-item img {
        max-height: 50px;
    }
}

@media (max-width: 992px) {
    .n3-mascot-featured-layout {
        grid-template-columns: 1fr;
    }
    .n3-mascot-promo-card {
        height: 200px;
    }
    .n3-mascot-row-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .n3-brands-grid {
        gap: 18px;
    }
    .n3-brand-item {
        width: 110px;
        height: 54px;
    }
    .n3-brand-item img {
        max-height: 44px;
    }
}

@media (max-width: 640px) {
    .n3-mascot-products-section {
        padding: 14px;
        margin-bottom: 20px;
    }
    .n3-mascot-row-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .n3-mascot-box-body {
        padding: 12px;
    }
    .n3-mascot-ribbon-badge {
        font-size: 13px;
        padding: 6px 18px 6px 12px;
    }
    .n3-brands-section .n3-mascot-box-body {
        padding: 14px 10px;
    }
    .n3-brands-grid {
        gap: 12px;
    }
    .n3-brand-item {
        width: calc(33.333% - 10px);
        height: 48px;
    }
    .n3-brand-item img {
        max-height: 38px;
    }
}

/* ==========================================================
 * SINGLE PRODUCT DETAIL PAGE (MASCOT PRODUCT)
 * ========================================================== */
.n3-product-hero-banner {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #18181b;
    padding: 70px 0 60px;
    text-align: center;
    color: #ffffff;
    margin-bottom: 35px;
    overflow: hidden;
}

.n3-product-hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.72) 0%, rgba(15, 23, 42, 0.88) 100%);
    z-index: 1;
}

.n3-product-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

.n3-product-hero-title {
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.n3-product-breadcrumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13.5px;
    color: #d4d4d8;
}

.n3-product-breadcrumb .breadcrumb-link {
    color: #e4e4e7;
    text-decoration: none;
    transition: color 0.2s ease;
}

.n3-product-breadcrumb .breadcrumb-link:hover {
    color: var(--accent);
}

.n3-product-breadcrumb .breadcrumb-sep {
    color: #a1a1aa;
    font-size: 11px;
}

.n3-product-breadcrumb .breadcrumb-current {
    color: var(--accent);
    font-weight: 600;
}

.n3-product-main-wrap {
    padding-bottom: 50px;
}

.n3-product-columns-grid {
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 28px;
    align-items: start;
    margin-bottom: 35px;
}

/* Left: Gallery */
.n3-product-gallery-box {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.n3-product-main-view {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    padding-top: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.n3-product-main-view img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

.n3-product-thumbs-strip {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.n3-thumb-item {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.n3-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.n3-thumb-item:hover {
    border-color: var(--accent);
}

.n3-thumb-item.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(232, 163, 23, 0.35);
}

/* Right: Info Card */
.n3-product-info-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 24px 28px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.n3-single-product-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 16px 0;
    line-height: 1.35;
}

.n3-single-meta-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.n3-single-meta-row {
    font-size: 14.5px;
    color: #475569;
}

.n3-single-meta-row .meta-label {
    font-weight: 500;
    color: #1e293b;
    margin-right: 4px;
}

.n3-single-meta-row .meta-value.text-accent {
    color: var(--accent);
    font-weight: 600;
}

.n3-single-price-box {
    font-size: 24px;
    font-weight: 700;
    color: #dc2626;
    padding-top: 4px;
}

/* Description Section */
.n3-product-desc-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.n3-product-desc-header {
    border-bottom: 2px solid var(--accent);
    background: #ffffff;
    display: flex;
    align-items: flex-end;
}

.n3-product-ribbon-badge {
    background: var(--accent);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 30px 10px 16px;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}

.n3-product-desc-body {
    padding: 24px;
}

.n3-product-desc-inner-box {
    background: #ffffff;
    font-size: 14.5px;
    line-height: 1.7;
    color: #334155;
}

.n3-no-content-text {
    margin: 0;
    color: #475569;
    font-size: 14.5px;
}

/* Responsive for Single Product Detail */
@media (max-width: 992px) {
    .n3-product-columns-grid {
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
        max-width: 100%;
    }
    .n3-product-gallery-box {
        width: 100%;
        max-width: 100%;
    }
    .n3-product-main-view {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
        padding-top: 100%;
    }
    .n3-product-thumbs-strip {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        max-width: 520px;
        margin: 0 auto;
        width: 100%;
    }
    .n3-thumb-item {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .n3-product-info-col {
        width: 100%;
        max-width: 100%;
    }
    .n3-product-info-card {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 640px) {
    .n3-product-hero-banner {
        padding: 30px 0 22px;
        margin-bottom: 20px;
    }
    .n3-product-hero-title {
        font-size: 22px;
    }
    .n3-product-breadcrumb {
        font-size: 12.5px;
    }
    .n3-product-main-wrap {
        padding-bottom: 35px;
    }
    .n3-product-columns-grid {
        gap: 18px;
    }
    .n3-product-main-view {
        max-width: 100%;
        border-radius: 6px;
    }
    .n3-product-thumbs-strip {
        gap: 8px;
        max-width: 100%;
    }
    .n3-product-info-card {
        padding: 18px 16px;
    }
    .n3-single-product-title {
        font-size: 20px;
    }
    .n3-single-price-box {
        font-size: 22px;
    }
    .n3-product-desc-body {
        padding: 16px 14px;
    }
    .n3-product-desc-inner-box {
        padding: 14px 16px;
    }
}

/* Zoom badge on main preview image */
.n3-product-main-view {
    cursor: zoom-in;
}

.n3-main-view-zoom-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(15, 23, 42, 0.75);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.25s ease;
    pointer-events: none;
    z-index: 5;
}

.n3-product-main-view:hover .n3-main-view-zoom-badge {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================
 * FULLSCREEN LIGHTBOX GALLERY MODAL
 * ========================================================== */
.n3-lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #000000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    user-select: none;
    -webkit-user-select: none;
}

.n3-lightbox-modal.is-active {
    opacity: 1;
    visibility: visible;
}

.n3-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: #000000;
    z-index: 1;
}

/* Top Bar */
.n3-lightbox-topbar {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
}

.n3-lightbox-counter {
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.12);
    padding: 5px 14px;
    border-radius: 20px;
}

.n3-lightbox-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.n3-lb-tool-btn {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.n3-lb-tool-btn:hover {
    background: var(--accent);
    color: #ffffff;
    transform: scale(1.1);
}

.n3-lb-tool-btn.n3-lb-close-btn {
    background: rgba(239, 68, 68, 0.85);
    font-size: 17px;
}

.n3-lb-tool-btn.n3-lb-close-btn:hover {
    background: #dc2626;
    transform: rotate(90deg) scale(1.1);
}

/* Center Stage */
.n3-lightbox-stage {
    position: relative;
    z-index: 5;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 60px;
    overflow: hidden;
    cursor: zoom-out;
}

.n3-lightbox-img-wrap {
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.n3-lightbox-img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    display: block;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
    cursor: default;
}

/* Navigation Arrows */
.n3-lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 10;
}

.n3-lightbox-arrow:hover {
    background: var(--accent);
    color: #ffffff;
    transform: translateY(-50%) scale(1.12);
}

.n3-lightbox-prev {
    left: 20px;
}

.n3-lightbox-next {
    right: 20px;
}

/* Bottom Bar */
.n3-lightbox-bottom {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 14px 20px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
}

.n3-lightbox-title {
    color: #f1f5f9;
    font-size: 15px;
    font-weight: 600;
}

/* Responsive for Lightbox */
@media (max-width: 640px) {
    .n3-lightbox-topbar {
        padding: 10px 12px;
    }
    .n3-lightbox-tools {
        gap: 6px;
    }
    .n3-lb-tool-btn {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
    .n3-lightbox-stage {
        padding: 10px 16px;
    }
    .n3-lightbox-arrow {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
    .n3-lightbox-prev {
        left: 8px;
    }
    .n3-lightbox-next {
        right: 8px;
    }
}

/* ==========================================================
 * 23. CONTACT PAGE & DEFAULT PAGE HERO
 * ========================================================== */
.n3-contact-hero,
.n3-page-hero {
    position: relative;
    background-color: #104c82;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 65px 0;
    text-align: center;
    color: #ffffff;
    overflow: hidden;
}

.n3-contact-hero::before,
.n3-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.72) 0%, rgba(15, 23, 42, 0.88) 100%);
    z-index: 1;
}

.n3-contact-hero-inner,
.n3-page-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.n3-contact-hero-title,
.n3-page-hero-title {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px 0;
    letter-spacing: 0.3px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.n3-contact-breadcrumb,
.n3-page-breadcrumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13.5px;
    color: #cbd5e1;
}

.n3-contact-breadcrumb .breadcrumb-link,
.n3-page-breadcrumb .breadcrumb-link {
    color: #e2e8f0;
    text-decoration: none;
    transition: color 0.2s ease;
}

.n3-contact-breadcrumb .breadcrumb-link:hover,
.n3-page-breadcrumb .breadcrumb-link:hover {
    color: var(--accent);
}

.n3-contact-breadcrumb .breadcrumb-sep,
.n3-page-breadcrumb .breadcrumb-sep {
    color: #94a3b8;
    font-size: 11px;
}

.n3-contact-breadcrumb .breadcrumb-current,
.n3-page-breadcrumb .breadcrumb-current {
    color: var(--accent);
    font-weight: 600;
}

/* Contact Main Section */
.n3-contact-main-wrap {
    padding: 35px 0 60px;
    background: #f8fafc;
}

.n3-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 26px;
    align-items: stretch;
}

.n3-contact-left-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.n3-contact-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.n3-contact-card-header {
    background: #111827;
    color: #ffffff;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.n3-card-badge-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--accent, #e8a317);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(232, 163, 23, 0.25);
}

.n3-contact-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.2px;
}

.n3-contact-card-body {
    padding: 20px 22px;
}

/* Info Grid */
.n3-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
}

.n3-info-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.n3-info-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--primary, #104c82);
    color: var(--primary, #104c82);
    background: #f0f7fc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

.n3-info-text {
    flex: 1;
}

.n3-info-label {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 2px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.n3-info-val {
    margin: 0;
    font-size: 13.5px;
    color: #1e293b;
    font-weight: 500;
    line-height: 1.45;
}

.n3-info-val a {
    color: #1e293b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.n3-info-val a:hover {
    color: var(--primary, #104c82);
}

/* Contact Form */
.n3-contact-form-desc {
    font-size: 13.5px;
    color: #475569;
    margin: 0 0 16px;
    line-height: 1.5;
}

.n3-contact-card-body p {
    margin-bottom: 15px;
}

.n3-contact-card-body br {
    display: none;
}

.n3-form-group {
    margin-bottom: 12px;
}

.n3-form-control,
.n3-contact-cf7-wrapper input[type="text"],
.n3-contact-cf7-wrapper input[type="tel"],
.n3-contact-cf7-wrapper input[type="email"],
.n3-contact-cf7-wrapper textarea,
.n3-contact-card-body .wpcf7-form-control-wrap input,
.n3-contact-card-body .wpcf7-form-control-wrap textarea {
    width: 100% !important;
    display: block !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    color: #1e293b !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    font-family: inherit !important;
}

.n3-form-control:focus,
.n3-contact-cf7-wrapper input[type="text"]:focus,
.n3-contact-cf7-wrapper input[type="tel"]:focus,
.n3-contact-cf7-wrapper input[type="email"]:focus,
.n3-contact-cf7-wrapper textarea:focus,
.n3-contact-card-body .wpcf7-form-control-wrap input:focus,
.n3-contact-card-body .wpcf7-form-control-wrap textarea:focus {
    border-color: var(--primary, #104c82) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(16, 76, 130, 0.15) !important;
}

textarea.n3-form-control,
.n3-contact-cf7-wrapper textarea,
.n3-contact-card-body .wpcf7-form-control-wrap textarea {
    resize: vertical !important;
    min-height: 75px !important;
    height: 80px !important;
}

.n3-contact-card-body .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
    margin-bottom: 12px !important;
}

.n3-contact-submit-btn,
.n3-contact-cf7-wrapper input[type="submit"],
.n3-contact-card-body .wpcf7-submit {
    background: var(--accent, #e8a317) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 28px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(232, 163, 23, 0.25) !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    width: auto !important;
    text-transform: none !important;
}

.n3-contact-submit-btn:hover,
.n3-contact-cf7-wrapper input[type="submit"]:hover,
.n3-contact-card-body .wpcf7-submit:hover {
    background: var(--primary, #104c82) !important;
    box-shadow: 0 4px 14px rgba(16, 76, 130, 0.35) !important;
    transform: translateY(-1px) !important;
}

.n3-contact-card-body .wpcf7-response-output {
    margin: 12px 0 0 0 !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    font-size: 13.5px !important;
}

.n3-contact-card-body .wpcf7-not-valid-tip {
    font-size: 12px !important;
    color: #dc2626 !important;
    margin-top: -6px !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Right Column: Google Maps */
.n3-contact-right-col {
    display: flex;
}

.n3-contact-map-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 520px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.n3-contact-map-card iframe {
    width: 100%;
    height: 100%;
    min-height: 520px;
    display: block;
    border: none;
}

/* Default Page layout */
.n3-page-main-container {
    padding: 40px 0 60px;
}

.n3-page-article {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Responsive for Contact Page */
@media (max-width: 991px) {
    .n3-contact-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .n3-contact-map-card {
        min-height: 380px;
    }
    .n3-contact-map-card iframe {
        min-height: 380px;
    }
}

@media (max-width: 640px) {
    .n3-contact-page .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    .n3-info-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .n3-contact-hero-title,
    .n3-page-hero-title {
        font-size: 22px;
    }
    .n3-contact-hero,
    .n3-page-hero {
        padding: 40px 0;
    }
    .n3-contact-main-wrap {
        padding: 20px 0 40px;
    }
    .n3-contact-card-header {
        padding: 10px 14px;
    }
    .n3-contact-card-title {
        font-size: 15px;
    }
    .n3-contact-card-body {
        padding: 16px 12px;
    }
}

/* ==========================================================
 * 24. MASCOT PRODUCT CATALOG / ARCHIVE
 * ========================================================== */
.n3-catalog-hero {
    position: relative;
    background-color: #104c82;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 65px 0;
    text-align: center;
    color: #ffffff;
    overflow: hidden;
}

.n3-catalog-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.72) 0%, rgba(15, 23, 42, 0.88) 100%);
    z-index: 1;
}

.n3-catalog-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.n3-catalog-hero-title {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px 0;
    letter-spacing: 0.3px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.n3-catalog-breadcrumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13.5px;
    color: #cbd5e1;
}

.n3-catalog-breadcrumb .breadcrumb-link {
    color: #e2e8f0;
    text-decoration: none;
    transition: color 0.2s ease;
}

.n3-catalog-breadcrumb .breadcrumb-link:hover {
    color: var(--accent);
}

.n3-catalog-breadcrumb .breadcrumb-sep {
    color: #94a3b8;
    font-size: 11px;
}

.n3-catalog-breadcrumb .breadcrumb-current {
    color: var(--accent);
    font-weight: 600;
}

.n3-catalog-main-wrap {
    padding: 35px 0 60px;
    background: #f8fafc;
}

.n3-catalog-layout-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: start;
}

/* Sidebar Menu Card */
.n3-catalog-sidebar {
    position: sticky;
    top: 90px;
}

.n3-catalog-menu-card {
    background: #ffffff;
    border: 1.5px solid var(--accent, #e8a317);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.n3-catalog-menu-header {
    background: #111827;
    color: #ffffff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
}

.n3-catalog-menu-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.2px;
}

.n3-catalog-menu-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.n3-catalog-menu-list li {
    margin: 0;
    border-bottom: 1px solid #f1f5f9;
}

.n3-catalog-menu-list li:last-child {
    border-bottom: none;
}

.n3-catalog-menu-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: #334155;
    text-decoration: none;
    transition: all 0.2s ease;
}

.n3-catalog-menu-list li a:hover,
.n3-catalog-menu-list li.is-active a {
    color: var(--accent, #e8a317);
    background: rgba(232, 163, 23, 0.08);
    padding-left: 20px;
    font-weight: 600;
}

/* Sort Toolbar */
.n3-catalog-sort-bar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.n3-sort-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
}

.n3-sort-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.n3-sort-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--accent, #e8a317);
    color: var(--accent, #e8a317);
    background: #ffffff;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.n3-sort-btn:hover,
.n3-sort-btn.is-active {
    background: var(--accent, #e8a317);
    color: #ffffff;
    border-color: var(--accent, #e8a317);
    box-shadow: 0 2px 6px rgba(232, 163, 23, 0.3);
}

/* Product Catalog Grid (4 Columns) */
.n3-catalog-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.n3-catalog-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}

.n3-catalog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

.n3-catalog-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.n3-catalog-thumb-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.n3-catalog-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.n3-catalog-card:hover .n3-catalog-thumb-box img {
    transform: scale(1.06);
}

.n3-catalog-card-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.n3-catalog-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 6px 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 38px;
    transition: color 0.2s ease;
}

.n3-catalog-card:hover .n3-catalog-card-title {
    color: var(--accent, #e8a317);
}

.n3-catalog-card-price {
    font-size: 14.5px;
    font-weight: 700;
    color: #dc2626;
    margin-top: auto;
}

/* Catalog Pagination */
.n3-catalog-pagination {
    margin-top: 35px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.n3-catalog-pagination ul,
.n3-catalog-pagination ul.page-numbers {
    display: inline-flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.n3-catalog-pagination ul li {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.n3-catalog-pagination a.page-numbers,
.n3-catalog-pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 14px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    margin: 0 2px;
}

.n3-catalog-pagination a.page-numbers:hover {
    border-color: var(--accent, #e8a317);
    color: var(--accent, #e8a317);
    box-shadow: 0 2px 6px rgba(232, 163, 23, 0.2);
}

.n3-catalog-pagination span.page-numbers.current,
.n3-catalog-pagination a.page-numbers.current {
    background: var(--accent, #e8a317) !important;
    border-color: var(--accent, #e8a317) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(232, 163, 23, 0.35);
}

.n3-cat-count {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
    margin-left: 6px;
    transition: color 0.2s ease;
}

.n3-catalog-menu-list li a:hover .n3-cat-count,
.n3-catalog-menu-list li.is-active a .n3-cat-count {
    color: var(--accent, #e8a317);
}

/* AJAX Wrapper & Loading Overlay */
.n3-catalog-ajax-wrap {
    position: relative;
    min-height: 350px;
}

.n3-catalog-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(248, 250, 252, 0.75);
    backdrop-filter: blur(2px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    border-radius: 8px;
}

.n3-catalog-loading-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.n3-catalog-spinner {
    width: 42px;
    height: 42px;
    border: 3.5px solid rgba(232, 163, 23, 0.2);
    border-top-color: var(--accent, #e8a317);
    border-radius: 50%;
    animation: n3Spin 0.7s linear infinite;
}

@keyframes n3Spin {
    to {
        transform: rotate(360deg);
    }
}

.n3-catalog-empty {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    color: #64748b;
    font-size: 15px;
}

/* Catalog Responsive */
@media (max-width: 1024px) {
    .n3-catalog-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 860px) {
    .n3-catalog-layout-grid {
        grid-template-columns: 1fr;
    }
    .n3-catalog-sidebar {
        position: static;
    }
}

@media (max-width: 640px) {
    .n3-catalog-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .n3-catalog-card {
        padding: 8px;
    }
    .n3-catalog-card-title {
        font-size: 13px;
        min-height: 34px;
    }
    .n3-catalog-sort-bar {
        padding: 8px 12px;
        gap: 8px;
    }
    .n3-sort-buttons {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }
    .n3-catalog-page .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    .n3-catalog-main-wrap {
        padding: 20px 0 45px;
    }
}

/* ==========================================================
 * 25. REAL ESTATE (BẤT ĐỘNG SẢN TÂY NGUYÊN) PAGE
 * ========================================================== */
.n3-bds-page {
    background: #ffffff;
    background: #f8fafc;
}

/* --- Section 1: Hero Banner (No Overlay, Bright Sky & Cityscape) --- */
.n3-bds-hero {
    position: relative;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 50px 0 35px;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.n3-bds-hero-overlay {
    display: none !important;
}

.n3-bds-hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
}

.n3-bds-hero-header {
    margin-bottom: 22px;
}

.n3-bds-hero-title {
    margin: 0;
    line-height: 1.25;
}

.n3-bds-title-l1 {
    display: block;
    font-size: 48px;
    font-weight: 700;
    color: var(--accent, #e8a317);
    letter-spacing: -0.5px;
}

.n3-bds-title-l2 {
    display: block;
    font-size: 48px;
    font-weight: 700;
    color: var(--accent, #e8a317);
    letter-spacing: -0.5px;
}

/* Location Quick Pills (Parallelogram Skewed Badges - Black & Gold) */
.n3-bds-location-pills {
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.n3-pills-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.n3-location-pill {
    display: inline-block;
    background: #1e1e1e;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transform: skewX(-20deg);
    padding: 7px 18px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

.n3-pill-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transform: skewX(20deg);
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.n3-pill-inner i {
    color: #ffffff;
    font-size: 12px;
}

.n3-location-pill:hover {
    background: var(--accent, #e8a317);
    border-color: var(--accent, #e8a317);
    box-shadow: 0 6px 16px rgba(232, 163, 23, 0.45);
    transform: skewX(-20deg) translateY(-2px);
}

.n3-location-pill:hover .n3-pill-inner,
.n3-location-pill:hover .n3-pill-inner i {
    color: #111827 !important;
}

/* Search Box Panel (Solid Black Container Matching Demo Image) */
.n3-bds-search-panel {
    background: #000000;
    border-radius: 8px;
    padding: 20px 24px 16px;
    margin: 0 auto;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 50;
}

.n3-bds-search-title {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 14px 0;
    text-align: center;
    letter-spacing: 0.3px;
}

.n3-bds-search-fields {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 52px;
    gap: 12px;
    align-items: center;
}

/* Custom Select Dropdowns */
.n3-custom-select {
    position: relative;
    width: 100%;
    user-select: none;
}

.n3-select-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 42px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: #1e293b;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.n3-select-toggle:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.n3-custom-select.is-open .n3-select-toggle {
    border-color: var(--accent, #e8a317);
    box-shadow: 0 0 0 3px rgba(232, 163, 23, 0.2);
}

.n3-select-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
    font-weight: 600;
    color: #334155;
    font-size: 13.5px;
}

.n3-select-arrow {
    font-size: 11px;
    color: #64748b;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.n3-custom-select.is-open .n3-select-arrow {
    transform: rotate(180deg);
    color: var(--accent, #e8a317);
}

/* Popover list */
.n3-select-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 280px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.06);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.n3-custom-select.is-open .n3-select-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Search input inside Popover */
.n3-select-search-wrap {
    padding: 10px 10px 8px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
}

.n3-select-search-input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    outline: none;
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}

.n3-select-search-input:focus {
    background: #ffffff;
    border-color: var(--accent, #e8a317);
    box-shadow: 0 0 0 2px rgba(232, 163, 23, 0.2);
}

/* Option list inside Popover */
.n3-select-options {
    max-height: 240px;
    overflow-y: auto;
    padding: 6px 0;
    overscroll-behavior: contain;
}

.n3-select-options::-webkit-scrollbar {
    width: 6px;
}

.n3-select-options::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.n3-select-options::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.n3-select-option {
    padding: 8px 16px;
    font-size: 13.5px;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

.n3-select-option:hover {
    background: #f1f5f9;
    color: var(--primary, #104c82);
    font-weight: 600;
}

.n3-select-option.is-selected {
    background: #fef3c7;
    color: #92400e;
    font-weight: 700;
}

.n3-select-option.is-selected:hover {
    background: #fde68a;
    color: #92400e;
}

.n3-select-option.is-selected::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    color: var(--accent, #e8a317);
    margin-left: 8px;
}

.n3-select-option.is-hidden {
    display: none !important;
}

.n3-bds-btn-search {
    width: 52px;
    height: 42px;
    background: var(--accent, #e8a317);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.n3-bds-btn-search:hover {
    background: var(--accent, #e8a317);
    transform: translateY(-1px);
}

.n3-bds-count-text {
    margin-top: 10px;
    text-align: center;
    color: #ffffff;
    font-size: 13px;
    font-style: italic;
    opacity: 0.95;
}

/* --- Section 2: News & Market --- */
.n3-bds-news-wrap {
    padding: 45px 0 50px;
    background: #ffffff;
}

.n3-bds-news-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0;
    margin-bottom: 25px;
}

.n3-bds-news-tabs {
    display: flex;
    gap: 24px;
}

.n3-bds-news-tab-btn {
    background: transparent;
    border: none;
    font-size: 16px;
    font-weight: 700;
    color: #64748b;
    padding-bottom: 12px;
    cursor: pointer;
    position: relative;
    font-family: inherit;
    transition: color 0.2s ease;
}

.n3-bds-news-tab-btn:hover {
    color: var(--accent, #e8a317);
}

.n3-bds-news-tab-btn.active {
    color: #111827;
    border-bottom: 3px solid var(--accent, #e8a317);
    margin-bottom: -2px;
}

.n3-bds-news-viewmore a {
    font-size: 13.5px;
    font-weight: 600;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: color 0.2s;
}

.n3-bds-news-viewmore a:hover {
    color: var(--accent, #e8a317);
}

.n3-bds-news-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.n3-bds-news-layout.is-loading {
    opacity: 0.35;
    pointer-events: none;
    transform: scale(0.995);
}

.n3-big-news-thumb img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.n3-big-news-title {
    margin: 16px 0 8px 0;
    line-height: 1.45;
}

.n3-big-news-title a {
    font-size: 18px;
    font-weight: 700;
    color: var(--heading, #111827);
    text-decoration: none;
    line-height: 1.45;
    transition: color 0.2s ease;
    display: block;
}

.n3-big-news-title a:hover {
    color: var(--accent, #e8a317);
}

.n3-big-news-meta {
    font-size: 13px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
}

.n3-bds-news-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.n3-bds-news-list li {
    border-bottom: 1px solid #f1f5f9;
    padding: 8.5px 0;
}

.n3-bds-news-list li:first-child {
    padding-top: 0;
}

.n3-bds-news-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.n3-bds-news-list li a {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    line-height: 1.55;
    transition: color 0.2s ease, transform 0.2s ease;
    display: block;
    text-decoration: none;
}

.n3-bds-news-list li a:hover {
    color: var(--accent, #e8a317);
    transform: translateX(4px);
}

/* --- Section 3: Featured Properties (Matching Exact Demo Image) --- */
.n3-bds-featured-wrap {
    padding: 20px 0 70px;
    background: #ffffff;
}

.n3-bds-section-heading {
    text-align: center;
    margin-bottom: 30px;
}

.n3-bds-sec-title {
    font-size: 26px;
    font-weight: 600;
    color: var(--heading, #111827);
    margin: 0;
    letter-spacing: 0.2px;
}

.n3-bds-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.n3-bds-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    display: flex;
    flex-direction: column;
}

.n3-bds-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

.n3-bds-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f1f5f9;
}

.n3-bds-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.n3-bds-card:hover .n3-bds-card-thumb img {
    transform: scale(1.05);
}

.n3-bds-card-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: #fff1eb;
    color: #ea580c;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.n3-bds-card-body {
    padding: 14px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.n3-bds-card-title {
    margin: 0;
    line-height: 1.4;
}

.n3-bds-card-title a {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--heading, #111827);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 38px;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s ease;
}

.n3-bds-card-title a:hover {
    color: var(--primary, #104c82);
}

.n3-bds-price-area-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.n3-bds-card-price {
    font-size: 15.5px;
    font-weight: 800;
    color: #dc2626;
}

.n3-bds-card-dot {
    color: #dc2626;
    font-size: 13px;
    font-weight: 700;
}

.n3-bds-card-area {
    font-size: 15.5px;
    font-weight: 800;
    color: #dc2626;
}

.n3-bds-card-location {
    font-size: 12.5px;
    color: var(--text, #374151);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.n3-bds-card-location i {
    color: #4b5563;
    font-size: 12.5px;
    flex-shrink: 0;
}

.n3-bds-card-footer {
    margin-top: auto;
    padding-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.n3-bds-card-time {
    font-size: 12.5px;
    color: #9ca3af;
}

.n3-bds-fav-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.2s ease;
    padding: 0;
    outline: none;
}

.n3-bds-fav-btn:hover {
    border-color: var(--accent, #e8a317);
    color: var(--accent, #e8a317);
    background: #fffbeb;
}

.n3-bds-fav-btn.is-active,
.n3-bds-fav-btn.is-favorited {
    border-color: var(--accent, #e8a317);
    color: var(--accent, #e8a317);
    background: #fffbeb;
}

/* View All Button below Featured Grid */
.n3-bds-viewall-wrap {
    text-align: center;
    margin-top: 35px;
}

.n3-bds-btn-viewall {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 25px;
    background: var(--accent, #e8a317);
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none !important;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    border: 1px solid transparent;
}

.n3-bds-btn-viewall i {
    font-size: 13px;
    transition: transform 0.25s ease;
}

.n3-bds-btn-viewall:hover {
    background: var(--accent, #e8a317);
    color: #111827 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(232, 163, 23, 0.35);
}

.n3-bds-btn-viewall:hover i {
    transform: translateX(4px);
}

/* --- Sections 4, 5, 6: Property Section Wrappers --- */
.n3-bds-section-wrap {
    padding: 30px 0 60px;
    background: #ffffff;
    border-top: none;
}

/* Subtabs for Section 6 (Đất Nền & Quốc Lộ 14) */
.n3-bds-subtabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 16px;
}

.n3-bds-subtab-btn {
    background: transparent;
    border: none;
    font-size: 14.5px;
    font-weight: 700;
    color: #64748b;
    padding-bottom: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s ease;
    position: relative;
}

.n3-bds-subtab-btn:hover {
    color: var(--accent, #e8a317);
}

.n3-bds-subtab-btn.active {
    color: var(--accent, #e8a317);
    border-bottom: 2.5px solid var(--accent, #e8a317);
}

/* --- Section 7: Hình Ảnh Thực Tế (4-Item Gallery Showcase / Slider) --- */
.n3-bds-gallery-wrap {
    padding: 40px 0 80px;
    background: #ffffff;
    border-top: none;
}

.n3-bds-gallery-slider-wrap {
    position: relative;
    padding: 0 10px;
}

.n3-bds-gallery-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    scroll-snap-type: x mandatory;
    padding: 6px 2px;
}

.n3-bds-gallery-track::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.n3-bds-gallery-item {
    flex: 0 0 calc((100% - 60px) / 4);
    min-width: 250px;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
}

.n3-gallery-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.n3-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.n3-gallery-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 22px;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.n3-bds-gallery-item:hover .n3-gallery-item-overlay {
    opacity: 1;
}

.n3-bds-gallery-item:hover .n3-gallery-thumb img {
    transform: scale(1.06);
}

.n3-gallery-item-title {
    margin: 12px 0 0 0;
    font-size: 14.5px;
    font-weight: 800;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: color 0.2s ease;
}

.n3-bds-gallery-item:hover .n3-gallery-item-title {
    color: var(--accent, #e8a317);
}

/* Gallery Navigation Arrows */
.n3-gallery-arrow {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #1e293b;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
    transition: all 0.2s ease;
}

.n3-gallery-arrow:hover {
    background: var(--accent, #e8a317);
    color: #ffffff;
    border-color: var(--accent, #e8a317);
    transform: translateY(-50%) scale(1.05);
}

.n3-gallery-prev {
    left: -6px;
}

.n3-gallery-next {
    right: -6px;
}

/* --- Responsive for Real Estate Page --- */
@media (max-width: 1024px) {
    .n3-bds-search-fields {
        grid-template-columns: repeat(4, 1fr) 52px;
    }
    .n3-bds-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    .n3-bds-gallery-track {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 860px) {
    .n3-bds-news-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .n3-bds-search-fields {
        grid-template-columns: 1fr 1fr;
    }
    .n3-search-btn-wrap {
        grid-column: span 2;
    }
    .n3-bds-btn-search {
        width: 100%;
    }
    .n3-bds-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .n3-bds-gallery-track {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .n3-bds-title-l1 {
        font-size: 24px;
    }
    .n3-bds-title-l2 {
        font-size: 26px;
    }
    .n3-bds-search-panel {
        padding: 16px 14px;
    }
    .n3-bds-search-fields {
        grid-template-columns: 1fr;
    }
    .n3-search-btn-wrap {
        grid-column: span 1;
    }
    .n3-bds-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .n3-bds-card-body {
        padding: 10px 8px;
    }
    .n3-bds-card-title a {
        font-size: 12.5px;
        min-height: 34px;
    }
    .n3-bds-card-price,
    .n3-bds-card-area {
        font-size: 13.5px;
    }
    .n3-bds-gallery-track {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .n3-gallery-item-title {
        font-size: 13px;
    }
}
/* ==========================================================
 * N3 THEME - SINGLE REAL ESTATE (CHI TIẾT BẤT ĐỘNG SẢN) STYLES
 * ========================================================== */
.single-bds-page {
    padding: 24px 0 60px 0;
    background: #f8fafc;
}

.n3-bds-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13.5px;
    color: #64748b;
    margin-bottom: 20px;
}

.n3-bds-breadcrumbs a {
    color: #475569;
    text-decoration: none;
    transition: color 0.2s ease;
}

.n3-bds-breadcrumbs a:hover {
    color: var(--accent, #e8a317);
}

.n3-bds-breadcrumbs .sep {
    color: #cbd5e1;
}

.n3-bds-breadcrumbs .current {
    color: #0f172a;
    font-weight: 600;
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Single BDS 2-Column Grid Layout */
.n3-bds-single-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: stretch;
}

.n3-bds-single-main {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.n3-bds-card-box {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

/* 1. Gallery Box */
.n3-bds-gallery-box {
    margin-bottom: 24px;
}

.n3-bds-gallery-main-view {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #0f172a;
    cursor: pointer;
}

.n3-bds-gallery-main-view img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.n3-bds-gallery-main-view:hover img {
    transform: scale(1.02);
}

.n3-bds-gallery-counter {
    position: absolute;
    right: 16px;
    bottom: 16px;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 6px;
    pointer-events: none;
}

.n3-bds-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.n3-bds-thumb-item {
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2.5px solid transparent;
    transition: all 0.2s ease;
    background: #e2e8f0;
}

.n3-bds-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

.n3-bds-thumb-item:hover,
.n3-bds-thumb-item.is-active {
    border-color: var(--accent, #e8a317);
    box-shadow: 0 3px 10px rgba(232, 163, 23, 0.25);
}

/* 2. Header Info & Badges */
.n3-bds-header-info {
    margin-bottom: 20px;
}

.n3-bds-badges-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.n3-bds-badge-status {
    background: #fff4ed;
    color: #ea580c;
    font-size: 13px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
}

.n3-bds-badge-verified {
    background: #f1f5f9;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.n3-bds-badge-id {
    background: #94a3b8;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
}

.n3-bds-main-title {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.35;
    color: #0f172a;
    margin: 0 0 8px 0;
    text-transform: uppercase;
}

.n3-bds-loc-subtitle {
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 8px;
    font-weight: 400;
}

.n3-bds-loc-pin {
    font-size: 14px;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
}

.n3-bds-loc-pin i {
    color: #4b5563;
    font-size: 15px;
}

/* 3. Stats & Action Bar */
.n3-bds-stats-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    margin-top: 18px;
    margin-bottom: 28px;
}

.n3-bds-stats-group {
    display: flex;
    align-items: center;
    gap: 48px;
}

.n3-stat-col .n3-stat-label {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 4px;
}

.n3-stat-col .n3-stat-val {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
}

.n3-stat-col .val-price {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
}

.n3-bds-actions-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

.n3-act-btn {
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 4px;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.n3-act-btn:hover {
    color: #0f172a;
    background: transparent;
    transform: scale(1.1);
}

.n3-act-btn.is-favorited,
.n3-act-btn.is-favorited i,
.n3-fav-toggle-btn.is-favorited,
.n3-fav-toggle-btn.is-favorited i {
    color: var(--accent, #e8a317) !important;
}

.n3-act-btn:hover,
.n3-fav-toggle-btn:hover {
    color: var(--accent, #e8a317);
}

/* 4. Specs Box */
.n3-bds-specs-box {
    margin-bottom: 30px;
}

.n3-bds-box-heading {
    font-size: 17.5px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 16px;
}

.n3-bds-specs-grid {
    display: flex;
    flex-direction: column;
}

.n3-spec-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.n3-spec-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    min-width: 0;
}

.n3-spec-icon {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: #1e293b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.n3-spec-k {
    color: #1e293b;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.n3-spec-v {
    color: #475569;
    font-weight: 400;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 5. Description Content */
.n3-bds-desc-box {
    margin-bottom: 30px;
}

.n3-bds-desc-content {
    font-size: 15.5px;
    line-height: 1.85;
    color: #334155;
}

.n3-bds-desc-content p {
    margin-bottom: 10px;
}

.n3-bds-video-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 24px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

.n3-bds-video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.n3-bds-video-placeholder {
    margin-top: 24px;
}

.n3-video-mockup {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
}

.n3-video-mockup img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: transform 0.3s ease;
}

.n3-video-mockup:hover img {
    transform: scale(1.02);
}

.n3-video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #dc2626;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.5);
    transition: transform 0.2s ease;
}

.n3-video-mockup:hover .n3-video-play-btn {
    transform: translate(-50%, -50%) scale(1.1);
}

.n3-video-mockup-title {
    position: absolute;
    top: 14px;
    left: 16px;
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 6. Price History Banner */
.n3-bds-price-history-banner {
    margin: 24px 0 32px 0;
    background: url('assets/images/bds-price-history-bg.webp') no-repeat center center;
    background-size: cover;
    border-radius: 8px;
    padding: 16px 24px;
    min-height: 74px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(37, 140, 251, 0.12);
}

.n3-price-banner-content {
    display: flex;
    align-items: center;
}

.n3-price-banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #111827;
    font-weight: 700;
    font-size: 14px;
    padding: 8px 18px;
    border-radius: 4px;
    border: none;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.n3-price-banner-btn:hover {
    background: #f8fafc;
    color: #000000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
    transform: translateY(-1px);
}

.n3-price-banner-btn:focus,
.n3-price-banner-btn:focus-visible {
    outline: none;
}

/* Sidebar Styles */
.n3-bds-single-sidebar {
    position: relative;
    height: 100%;
    min-height: 100%;
}

.n3-bds-agent-card {
    position: sticky;
    top: 90px;
    z-index: 20;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(0,0,0,0.04);
    margin-bottom: 24px;
}

.n3-agent-avatar-wrap {
    width: 76px;
    height: 76px;
    margin: 0 auto 12px auto;
    border-radius: 50%;
    padding: 4px;
    border: 2px solid #22c55e;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.n3-agent-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.n3-agent-name {
    font-size: 17px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 16px 0;
}

.n3-agent-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.n3-btn-zalo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    border-radius: 8px;
    border: 1px solid #0068ff;
    background: #ffffff;
    color: #0068ff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.n3-btn-zalo:hover {
    background: #eff6ff;
}

.n3-btn-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    border-radius: 8px;
    border: none;
    background: #0070f3;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.n3-btn-phone:hover {
    background: #005bd3;
}

.n3-btn-phone.is-revealed {
    background: #16a34a;
}

/* Sidebar Listing Boxes */
.n3-bds-sidebar-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.02);
}

.n3-sb-box-title {
    font-size: 15.5px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 12px 0;
    line-height: 1.4;
    border-bottom: 1.5px solid #f1f5f9;
    padding-bottom: 10px;
}

.n3-sb-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 310px;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.n3-bds-sidebar-box.is-expanded .n3-sb-link-list {
    max-height: 1500px;
}

.n3-sb-link-list li {
    padding: 9px 0;
    border-bottom: 1px solid #f8fafc;
    font-size: 13.5px;
    line-height: 1.45;
}

.n3-sb-link-list li a {
    color: #334155;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.n3-sb-link-list li a:hover {
    color: var(--accent, #e8a317);
}

.n3-sb-more-btn {
    width: 100%;
    text-align: center;
    background: none;
    border: none;
    color: var(--accent, #e8a317);
    font-weight: 600;
    font-size: 13px;
    padding-top: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Bottom Viewed & Favorite Slider Sections (3 Columns Slider Layout) */
.n3-bds-viewed-section,
.n3-bds-favorite-section {
    margin-top: 36px;
    padding-top: 0;
    border-top: none;
}

.n3-bds-viewed-header,
.n3-bds-favorite-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.n3-viewed-arrows,
.n3-fav-arrows {
    display: flex;
    gap: 8px;
}

.n3-v-arrow {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.n3-v-arrow:hover {
    border-color: var(--accent, #e8a317);
    color: var(--accent, #e8a317);
    background: #fffbeb;
}

.n3-bds-viewed-slider,
.n3-bds-fav-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.n3-bds-viewed-track,
.n3-bds-fav-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 6px;
}

.n3-bds-viewed-track::-webkit-scrollbar,
.n3-bds-fav-track::-webkit-scrollbar {
    display: none;
}

.n3-bds-viewed-track .n3-bds-card,
.n3-bds-fav-track .n3-bds-card {
    flex: 0 0 calc((100% - 32px) / 3);
    min-width: calc((100% - 32px) / 3);
    max-width: calc((100% - 32px) / 3);
    scroll-snap-align: start;
    box-sizing: border-box;
}

.n3-bds-viewed-track .n3-bds-price-area-row,
.n3-bds-fav-track .n3-bds-price-area-row {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.n3-bds-viewed-track .n3-bds-card-price,
.n3-bds-fav-track .n3-bds-card-price,
.n3-bds-viewed-track .n3-bds-card-area,
.n3-bds-fav-track .n3-bds-card-area {
    font-size: 14.5px;
    white-space: nowrap;
}

.n3-fav-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.n3-fav-count-badge {
    background: #fef3c7;
    color: #92400e;
    font-size: 12.5px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
    border: 1px solid #fde68a;
}

.n3-fav-subtitle {
    font-size: 13.5px;
    color: #64748b;
    margin-top: 4px;
}

.n3-bds-empty-favorites {
    text-align: center;
    padding: 40px 20px;
    background: #ffffff;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    color: #64748b;
}

.n3-fav-empty-icon {
    font-size: 38px;
    color: var(--accent, #e8a317);
    margin-bottom: 10px;
}

.n3-bds-empty-favorites p {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.n3-bds-empty-favorites span {
    font-size: 13.5px;
    color: #64748b;
}

.n3-bds-loading-placeholder {
    text-align: center;
    padding: 30px;
    color: #64748b;
    font-size: 14.5px;
}

/* Price History Modal Popup */
.n3-bds-price-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.n3-bds-price-modal.is-open {
    display: flex;
}

.n3-price-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
}

.n3-price-modal-dialog {
    position: relative;
    z-index: 2;
    background: #ffffff;
    border-radius: 8px;
    width: 100%;
    max-width: 540px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    animation: n3ModalPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes n3ModalPopIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.n3-price-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px 20px;
}

.n3-price-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.n3-price-modal-close {
    background: transparent;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, transform 0.15s ease;
}

.n3-price-modal-close:hover {
    color: #111827;
    transform: scale(1.1);
}

.n3-price-modal-body {
    padding: 0 20px 20px 20px;
}

.n3-price-table-responsive {
    width: 100%;
    overflow-x: auto;
    border-radius: 6px;
    overflow: hidden;
}

.n3-price-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    text-align: left;
}

.n3-price-history-table thead tr {
    background: #0084ff;
    color: #ffffff;
}

.n3-price-history-table th {
    padding: 11px 14px;
    font-weight: 600;
    font-size: 13.5px;
    white-space: nowrap;
    border: none;
}

.n3-price-history-table th.col-num {
    width: 44px;
    text-align: center;
}

.n3-price-history-table th.col-time {
    width: 175px;
}

.n3-price-history-table th.col-new {
    width: 115px;
}

.n3-price-history-table th.col-old {
    width: 115px;
}

.n3-price-history-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #374151;
    font-size: 13.5px;
}

.n3-price-history-table tbody tr:last-child td {
    border-bottom: none;
}

.n3-price-history-table td.col-num {
    text-align: center;
    color: #64748b;
}

.n3-price-history-table td.col-time {
    color: #374151;
    font-weight: 500;
}

.n3-price-history-table td.col-new {
    color: #0f172a;
    font-weight: 700;
}

.n3-price-history-table td.col-old {
    color: #4b5563;
    font-weight: 400;
}

/* Lightbox Modal */
.n3-bds-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.92);
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

.n3-bds-lightbox.is-open {
    display: flex;
}

.n3-lightbox-img-wrap {
    position: relative;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.n3-lightbox-img-wrap img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.n3-lightbox-caption {
    width: 100%;
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.n3-lb-counter {
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 13.5px;
    font-weight: 600;
}

.n3-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 40px;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.2s ease;
}

.n3-lightbox-close:hover {
    transform: scale(1.15);
    color: var(--accent, #e8a317);
}

.n3-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.2);
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.n3-lightbox-nav:hover {
    background: var(--accent, #e8a317);
    color: #ffffff;
}

.n3-lightbox-prev {
    left: 20px;
}

.n3-lightbox-next {
    right: 20px;
}

/* Toast Notice */
.n3-toast-notice {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #0f172a;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 600;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    z-index: 999999;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 4px solid var(--accent, #e8a317);
}

.n3-toast-notice.is-show {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Styles for Single BDS */
@media (max-width: 1024px) {
    .n3-bds-single-grid {
        grid-template-columns: 100% !important;
        gap: 24px;
        width: 100%;
    }
    .n3-bds-single-main {
        width: 100%;
        min-width: 0;
        padding: 0;
    }
    .n3-bds-single-sidebar {
        width: 100%;
        min-width: 0;
        position: static;
        height: auto;
    }
    .n3-bds-agent-card {
        position: static;
        width: 100%;
        box-sizing: border-box;
    }
    .n3-bds-viewed-track .n3-bds-card,
    .n3-bds-fav-track .n3-bds-card {
        flex: 0 0 calc((100% - 32px) / 3);
        min-width: calc((100% - 32px) / 3);
        max-width: calc((100% - 32px) / 3);
    }
}

@media (max-width: 768px) {
    .single-bds-page {
        padding-top: 10px;
        padding-bottom: 30px;
        overflow-x: hidden;
    }
    .single-bds-page .container {
        padding: 0 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Breadcrumbs on Mobile */
    .n3-bds-breadcrumbs {
        font-size: 12.5px;
        gap: 5px;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }
    .n3-bds-breadcrumbs .current {
        max-width: 150px;
    }

    /* Main Property Box Card */
    .n3-bds-card-box {
        padding: 14px;
        border-radius: 10px;
    }

    /* Gallery */
    .n3-bds-gallery-box {
        margin-bottom: 16px;
    }
    .n3-bds-gallery-main-view {
        aspect-ratio: 16 / 10;
        border-radius: 8px;
    }
    .n3-bds-gallery-counter {
        right: 10px;
        bottom: 10px;
        font-size: 12px;
        padding: 3px 10px;
    }
    .n3-bds-gallery-thumbs {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        margin-top: 8px;
    }
    .n3-bds-thumb-item {
        border-radius: 4px;
        border-width: 1.5px;
    }

    /* Title & Badges */
    .n3-bds-header-info {
        margin-bottom: 14px;
    }
    .n3-bds-badges-row {
        gap: 6px;
        margin-bottom: 8px;
    }
    .n3-bds-badge-status,
    .n3-bds-badge-verified,
    .n3-bds-badge-id {
        font-size: 12px;
        padding: 2px 8px;
    }
    .n3-bds-main-title {
        font-size: 17px;
        line-height: 1.35;
        margin-bottom: 6px;
    }
    .n3-bds-loc-pin {
        font-size: 13px;
    }

    /* Stats & Action Bar */
    .n3-bds-stats-action-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        margin-top: 14px;
        margin-bottom: 20px;
        gap: 10px;
    }
    .n3-bds-stats-group {
        display: flex;
        align-items: center;
        gap: 20px;
        flex: 1;
        min-width: 0;
    }
    .n3-stat-col .n3-stat-label {
        font-size: 12px;
        margin-bottom: 2px;
    }
    .n3-stat-col .val-price {
        font-size: 18px;
        font-weight: 700;
        color: #ea580c;
        white-space: nowrap;
    }
    .n3-stat-col .val-area {
        font-size: 15.5px;
        font-weight: 600;
        white-space: nowrap;
    }
    .n3-bds-actions-group {
        display: flex;
        gap: 8px;
        flex-shrink: 0;
    }
    .n3-act-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    /* Specifications Grid ("Đặc điểm bất động sản") */
    .n3-bds-specs-box {
        margin-bottom: 24px;
    }
    .n3-bds-box-heading {
        font-size: 16px;
        margin-bottom: 12px;
    }
    .n3-spec-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 9px 0;
    }
    .n3-spec-item {
        font-size: 14px;
        gap: 8px;
    }
    .n3-spec-k {
        font-size: 13.5px;
    }
    .n3-spec-v {
        font-size: 13.5px;
        max-width: 58%;
    }

    /* Description & Video */
    .n3-bds-desc-content {
        font-size: 14.5px;
        line-height: 1.7;
    }
    .n3-bds-video-wrap {
        margin-top: 16px;
        border-radius: 8px;
    }

    /* Price History Banner */
    .n3-bds-price-history-banner {
        padding: 12px 14px;
        min-height: auto;
        margin: 18px 0 22px 0;
        border-radius: 6px;
    }
    .n3-price-banner-btn {
        font-size: 13px;
        padding: 7px 14px;
    }

    /* Viewed & Favorites Slider */
    .n3-bds-viewed-section,
    .n3-bds-favorite-section {
        margin-top: 28px;
    }
    .n3-bds-sec-title {
        font-size: 18px;
    }
    .n3-bds-viewed-track .n3-bds-card,
    .n3-bds-fav-track .n3-bds-card {
        flex: 0 0 80%;
        min-width: 80%;
        max-width: 80%;
    }

    /* Agent Card in Sidebar on Mobile */
    .n3-bds-agent-card {
        padding: 18px 16px;
        border-radius: 10px;
        margin-bottom: 18px;
    }
    .n3-agent-avatar-wrap {
        width: 64px;
        height: 64px;
        margin-bottom: 8px;
    }
    .n3-agent-name {
        font-size: 16px;
        margin-bottom: 12px;
    }
    .n3-bds-sidebar-box {
        padding: 16px;
        border-radius: 10px;
        margin-bottom: 16px;
    }
    .n3-sb-box-title {
        font-size: 14.5px;
        padding-bottom: 8px;
    }

}

/* ==========================================================
 * REAL ESTATE ARCHIVE PAGE (KHO BẤT ĐỘNG SẢN)
 * ========================================================== */
.n3-bds-archive-page {
    padding: 24px 0 60px 0;
    background: #f8fafc;
    min-height: 80vh;
}

/* 1. Filter Panel */
.n3-bds-filter-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 28px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.n3-filter-top-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.n3-filter-badge-tabs {
    display: inline-flex;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.n3-badge-tab {
    background: #ffffff;
    color: #475569;
    border: none;
    outline: none;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.n3-badge-tab:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.n3-badge-tab.is-active {
    background: #334155;
    color: #ffffff;
}

.n3-filter-search-wrap {
    flex: 1;
    position: relative;
}

.n3-filter-search-input {
    width: 100%;
    height: 40px;
    background: #f1f5f9;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0 16px;
    font-size: 14px;
    color: #1e293b;
    outline: none;
    transition: all 0.2s ease;
}

.n3-filter-search-input:focus {
    background: #ffffff;
    border-color: var(--primary, #104c82);
    box-shadow: 0 0 0 3px rgba(16, 76, 130, 0.1);
}

.n3-filter-submit-btn {
    height: 40px;
    background: var(--primary, #104c82);
    color: #ffffff;
    border: none;
    outline: none;
    border-radius: 4px;
    padding: 0 24px;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.n3-filter-submit-btn:hover {
    background: var(--primary-hover, #0a335a);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 76, 130, 0.2);
}

.n3-filter-bot-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    border-top: 1px solid #f1f5f9;
    padding-top: 14px;
}

.n3-filter-select-col {
    position: relative;
}

.n3-filter-native-select {
    width: 100%;
    height: 38px;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 0 28px 0 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: #334155;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
}

.n3-filter-native-select:hover,
.n3-filter-native-select:focus {
    border-color: var(--primary, #104c82);
}

/* 2. Archive Title & Counter */
.n3-bds-arch-header-wrap {
    margin-bottom: 24px;
}

.n3-bds-arch-heading {
    font-size: 22px;
    font-weight: 800;
    color: var(--heading, #111827);
    text-transform: uppercase;
    margin: 0 0 6px 0;
    letter-spacing: -0.2px;
}

.n3-bds-arch-count-text {
    font-size: 14.5px;
    color: #475569;
    font-weight: 500;
}

.n3-bds-arch-count-text .n3-count-num {
    font-weight: 700;
    color: #0f172a;
}

/* 3. Archive List & Cards (2-Column Grid Layout) */
.n3-bds-arch-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
}

.n3-bds-arch-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.n3-bds-arch-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
    transform: translateY(-2px);
}

/* Upper Media Collage */
.n3-arch-card-media {
    display: grid;
    grid-template-columns: 1.65fr 1fr;
    gap: 4px;
    height: 250px;
    background: #0f172a;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.n3-arch-media-left {
    position: relative;
    height: 100%;
    overflow: hidden;
    display: block;
}

.n3-arch-media-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.n3-arch-media-left:hover img {
    transform: scale(1.03);
}

.n3-arch-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--accent, #e8a317);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.n3-arch-media-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.n3-arch-media-sub {
    position: relative;
    flex: 1;
    overflow: hidden;
    display: block;
}

.n3-arch-media-sub img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(5px);
    transform: scale(1.12);
    transition: transform 0.35s ease, filter 0.35s ease;
}

.n3-arch-media-sub:hover img {
    transform: scale(1.18);
    filter: blur(3.5px);
}

.n3-arch-more-overlay {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 3;
    pointer-events: none;
    color: #ffffff;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1;
}

/* Content Body */
.n3-arch-card-body {
    padding: 16px 18px 12px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.n3-arch-card-title {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.45;
    text-transform: uppercase;
    margin: 0 0 8px 0;
}

.n3-arch-card-title a {
    color: #0f172a;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.n3-arch-card-title a:hover {
    color: var(--primary, #104c82);
}

.n3-arch-specs-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    font-size: 13px;
    color: #475569;
    margin-bottom: 8px;
}

.n3-arch-spec-price {
    color: #dc2626;
    font-weight: 600;
    font-size: 15px;
}

.n3-arch-spec-area {
    color: #dc2626;
    font-weight: 600;
}

.n3-arch-spec-dot {
    color: #cbd5e1;
}

.n3-arch-spec-icon {
    color: #64748b;
    font-size: 13px;
}

.n3-arch-spec-location {
    color: #475569;
    font-weight: 500;
}

.n3-arch-card-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: auto;
}

/* Footer Action Bar */
.n3-arch-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
    margin-top: auto;
}

.n3-arch-agent-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.n3-arch-agent-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid #22c55e;
    background: #ffffff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

.n3-arch-agent-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.n3-arch-agent-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.n3-arch-agent-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
}

.n3-arch-post-time {
    font-size: 12px;
    color: #94a3b8;
}

.n3-arch-actions-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.n3-arch-phone-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary, #104c82);
    color: #ffffff;
    border: none;
    outline: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.n3-arch-phone-btn:hover {
    background: var(--primary-hover, #0a335a);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(16, 76, 130, 0.25);
}

.n3-arch-phone-btn.is-revealed {
    background: #16a34a;
}

.n3-arch-fav-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #64748b;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    outline: none;
}

.n3-arch-fav-btn:hover {
    border-color: var(--accent, #e8a317);
    color: var(--accent, #e8a317);
    background: #fffbeb;
}

.n3-arch-fav-btn.is-favorited {
    border-color: var(--accent, #e8a317);
    color: var(--accent, #e8a317);
    background: #fffbeb;
}

/* Empty State */
.n3-bds-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    color: #64748b;
}

.n3-no-results-icon {
    font-size: 44px;
    color: #94a3b8;
    margin-bottom: 14px;
}

.n3-bds-no-results h3 {
    font-size: 18px;
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 8px;
}

.n3-bds-no-results p {
    font-size: 14px;
    margin-bottom: 20px;
}

.n3-btn-reset-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary, #104c82);
    color: #ffffff;
    padding: 9px 20px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.n3-btn-reset-filter:hover {
    background: var(--primary-hover, #0a335a);
}

/* Pagination */
.n3-bds-pagination {
    margin-top: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.n3-bds-pagination ul,
.n3-bds-pagination ul.page-numbers {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.n3-bds-pagination ul li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

.n3-bds-pagination a.page-numbers,
.n3-bds-pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.n3-bds-pagination a.page-numbers:hover {
    border-color: var(--primary, #104c82);
    color: var(--primary, #104c82);
    background: #eff6ff;
}

.n3-bds-pagination span.page-numbers.current,
.n3-bds-pagination a.page-numbers.current {
    background: var(--primary, #104c82);
    color: #ffffff;
    border-color: var(--primary, #104c82);
}

.n3-bds-pagination span.page-numbers.dots {
    border: none;
    background: transparent;
    min-width: auto;
    padding: 0 4px;
    color: #64748b;
}

/* Responsive Archive */
@media (max-width: 900px) {
    .n3-filter-bot-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 860px) {
    .n3-bds-arch-list {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .n3-arch-card-media {
        height: 270px;
    }
}

@media (max-width: 768px) {
    .n3-filter-top-row {
        flex-wrap: wrap;
    }
    .n3-filter-badge-tabs {
        width: 100%;
    }
    .n3-badge-tab {
        flex: 1;
        text-align: center;
    }
    .n3-filter-search-wrap {
        width: calc(100% - 130px);
    }
    .n3-filter-bot-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .n3-arch-card-media {
        height: 240px;
    }
}

@media (max-width: 520px) {
    .n3-filter-search-wrap {
        width: 100%;
    }
    .n3-filter-submit-btn {
        width: 100%;
    }
    .n3-filter-bot-row {
        grid-template-columns: 1fr;
    }
    .n3-arch-card-media {
        height: 200px;
    }
    .n3-arch-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .n3-arch-actions-wrap {
        width: 100%;
        justify-content: space-between;
    }
    .n3-arch-phone-btn {
        flex: 1;
        justify-content: center;
    }
}

/* ==========================================================================
 * 11. ABOUT US PAGE (TRANG GIỚI THIỆU - HỆ SINH THÁI ĐA NGÀNH TOÀN DIỆN)
 * ========================================================================== */
.n3-about-page {
    padding: 0;
    background: #f8fafc;
    color: var(--text, #374151);
    font-family: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.n3-about-page a {
    text-decoration: none;
}

/* Headings font-weight 600 standard across this page */
.n3-about-page h1,
.n3-about-page h2,
.n3-about-page h3,
.n3-about-page h4,
.n3-about-page h5,
.n3-about-page h6,
.n3-about-hero-title,
.n3-section-main-title,
.n3-story-headline,
.value-card-title,
.pillar-heading,
.bento-title,
.step-title-text,
.cta-heading {
    font-weight: 600 !important;
}

.n3-section-title-wrap {
    max-width: 780px;
    margin: 0 auto 36px auto;
}

.n3-section-main-title {
    font-size: 32px;
    font-weight: 600;
    color: var(--heading, #0f172a);
    line-height: 1.35;
    margin: 0 0 16px 0;
    letter-spacing: -0.3px;
}

.n3-gold-title-line {
    width: 50px;
    height: 3px;
    background: var(--accent, #e8a317);
    border-radius: 3px;
    margin: 0 auto 16px auto;
}

.n3-section-lead-desc {
    font-size: 16px;
    color: #64748b;
    line-height: 1.65;
    margin: 0;
}

/* --- 1. IMMERSIVE HERO BANNER --- */
.n3-about-hero {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #ffffff;
    padding: 35px 0 90px 0;
    overflow: hidden;
}

.n3-about-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 26, 45, 0.88);
    pointer-events: none;
}

.n3-about-hero-container {
    position: relative;
    z-index: 2;
}

.n3-about-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #cbd5e1;
    margin-bottom: 28px;
}

.n3-about-breadcrumbs a {
    color: #cbd5e1;
    transition: color 0.2s;
}

.n3-about-breadcrumbs a:hover {
    color: var(--accent, #e8a317);
}

.n3-about-breadcrumbs .sep {
    color: #64748b;
}

.n3-about-breadcrumbs .current {
    color: #ffffff;
    font-weight: 600;
}

.n3-about-hero-content {
    max-width: 860px;
    margin-bottom: 55px;
}

.n3-about-hero-title {
    font-size: 42px;
    font-weight: 600;
    line-height: 1.25;
    color: #ffffff;
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.n3-about-hero-title .highlight-text {
    color: var(--accent, #e8a317);
    display: inline;
    -webkit-text-fill-color: initial;
    background: none;
}

.n3-about-hero-desc {
    font-size: 17.5px;
    line-height: 1.75;
    color: #e2e8f0;
    margin-bottom: 32px;
}

.n3-about-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.n3-btn-luxury-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--accent, #e8a317);
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 26px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(232, 163, 23, 0.3);
    transition: all 0.25s ease;
}

.n3-btn-luxury-primary:hover {
    background: #d97706;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(232, 163, 23, 0.4);
    color: #ffffff !important;
}

.n3-btn-luxury-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 26px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    transition: all 0.25s ease;
}

.n3-btn-luxury-secondary:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: #ffffff;
    transform: translateY(-2px);
    color: #ffffff !important;
}

/* Glass Stats Counter Strip */
.n3-about-stats-glass-bar {
    margin-top: 25px;
}

.stats-glass-inner {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.stat-glass-item {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

.stat-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(232, 163, 23, 0.18);
    border: 1px solid rgba(232, 163, 23, 0.4);
    color: var(--accent, #e8a317);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.stat-text-wrap {
    display: flex;
    flex-direction: column;
}

.stat-count {
    font-size: 26px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: -0.3px;
}

.stat-name {
    font-size: 13.5px;
    color: #cbd5e1;
    font-weight: 500;
    margin-top: 2px;
}

.stat-divider {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 38px;
    background: rgba(255, 255, 255, 0.12);
}

/* --- 2. BRAND STORY & VISION SECTION --- */
.n3-about-story-section {
    padding: 70px 0 65px 0;
    background: #ffffff;
}

.n3-story-main-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}

.n3-story-headline {
    font-size: 30px;
    font-weight: 600;
    color: var(--heading, #0f172a);
    line-height: 1.35;
    margin: 0 0 20px 0;
    letter-spacing: -0.3px;
}

.n3-story-paragraph .lead-text {
    font-size: 17px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.7;
    margin-bottom: 16px;
}

.n3-story-paragraph p {
    font-size: 15.5px;
    line-height: 1.8;
    color: #475569;
    margin-bottom: 0;
}

.n3-story-btn-wrap {
    margin-top: 26px;
}

.n3-story-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--primary, #104c82);
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(16, 76, 130, 0.25);
    transition: all 0.25s ease;
    text-decoration: none;
}

.n3-story-contact-btn:hover {
    background: var(--accent, #e8a317);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(232, 163, 23, 0.35);
    color: #ffffff !important;
}

.n3-story-contact-btn i {
    font-size: 14px;
    transition: transform 0.25s ease;
}

.n3-story-contact-btn:hover i {
    transform: translateX(4px);
}

/* Multi-layer Visual Collage */
.n3-story-visual-frame {
    position: relative;
    padding-bottom: 30px;
    padding-right: 20px;
}

.main-photo-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(16, 76, 130, 0.12);
}

.main-photo {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.main-photo-wrapper:hover .main-photo {
    transform: scale(1.03);
}

.floating-badge-experience {
    position: absolute;
    top: -20px;
    left: -20px;
    background: #104c82;
    color: #ffffff;
    border: 3px solid #ffffff;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(16, 76, 130, 0.2);
    z-index: 3;
}

.floating-badge-experience .exp-number {
    font-size: 30px;
    font-weight: 600;
    color: var(--accent, #e8a317);
    line-height: 1;
}

.floating-badge-experience .exp-text {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #e2e8f0;
}

.floating-badge-partner {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #ffffff;
    border-radius: 14px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    z-index: 3;
}

.partner-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #fef3c7;
    color: #d97706;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.partner-info strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.partner-info span {
    font-size: 12px;
    color: #64748b;
}

/* --- 3. CORE VALUES SECTION (TÂM - TẦM - TÍN) --- */
.n3-about-values-section {
    position: relative;
    padding: 75px 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #ffffff;
    overflow: hidden;
}

.n3-values-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 26, 45, 0.88);
    pointer-events: none;
}

.n3-values-container {
    position: relative;
    z-index: 2;
}

.n3-about-values-section .n3-section-main-title {
    color: #ffffff;
}

.n3-about-values-section .n3-section-lead-desc {
    color: #cbd5e1;
}

.n3-values-3d-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.n3-value-card-premium {
    position: relative;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    padding: 32px 28px;
    overflow: hidden;
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

.n3-value-card-premium:hover {
    transform: translateY(-6px);
    background: rgba(15, 23, 42, 0.85);
    border-color: var(--accent, #e8a317);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.35);
}

.card-header-flex {
    margin-bottom: 22px;
}

.value-icon-3d-box {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-3d-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.value-card-title {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 12px 0;
}

.value-card-desc {
    font-size: 14.5px;
    color: #cbd5e1;
    line-height: 1.65;
    margin: 0;
}

/* --- 4. 3 CORE SERVICES ECOSYSTEM SHOWCASE --- */
.n3-about-ecosystem-section {
    padding: 70px 0 65px 0;
    background: #f1f5f9;
}

.n3-ecosystem-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.n3-eco-pillar-card {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    position: relative;
}

.n3-eco-pillar-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(16, 76, 130, 0.1);
    border-color: #cbd5e1;
}

.n3-eco-pillar-card.is-featured-bds {
    border: 2px solid var(--accent, #e8a317);
    box-shadow: 0 8px 24px rgba(232, 163, 23, 0.1);
}

.pillar-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #0f172a;
}

.pillar-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.n3-eco-pillar-card:hover .pillar-thumb {
    transform: scale(1.05);
}

.pillar-overlay-grad {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.pillar-index-tag {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 24px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1;
    z-index: 2;
}

.pillar-service-badge {
    position: absolute;
    bottom: 14px;
    left: 16px;
    background: rgba(16, 76, 130, 0.9);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

.pillar-service-badge.badge-bds {
    background: rgba(217, 119, 6, 0.95);
}

.pillar-service-badge.badge-mascot {
    background: rgba(5, 150, 105, 0.95);
}

.pillar-body-wrap {
    padding: 26px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pillar-heading {
    font-size: 20px;
    font-weight: 600;
    color: var(--heading, #0f172a);
    margin: 0 0 12px 0;
    line-height: 1.35;
}

.pillar-summary {
    font-size: 14.5px;
    color: #475569;
    line-height: 1.65;
    margin-bottom: 20px;
}

.pillar-checklist-ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pillar-checklist-ul li {
    font-size: 13.5px;
    color: #334155;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45;
}

.pillar-checklist-ul li i {
    color: #16a34a;
    font-size: 15px;
    margin-top: 2px;
    flex-shrink: 0;
}

.pillar-btn-wrap {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid #f1f5f9;
}

.pillar-action-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--primary, #104c82);
    transition: all 0.2s ease;
}

.pillar-action-link:hover {
    color: var(--accent, #e8a317);
    transform: translateX(4px);
}

.pillar-action-link.link-bds {
    color: #b45309;
}

.pillar-action-link.link-bds:hover {
    color: var(--accent, #e8a317);
}

/* --- 5. STRENGTHS SECTION (REFINED MODERN CARDS) --- */
.n3-about-strengths-section {
    padding: 65px 0 35px 0;
    background: #ffffff;
}

.n3-strengths-grid,
.n3-bento-strengths-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.n3-strength-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px 24px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.n3-strength-card:hover {
    border-color: var(--accent, #e8a317);
    box-shadow: 0 14px 30px rgba(16, 76, 130, 0.08);
    transform: translateY(-5px);
}

.strength-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.strength-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(16, 76, 130, 0.07);
    color: var(--primary, #104c82);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: all 0.3s ease;
    border: 1px solid rgba(16, 76, 130, 0.12);
}

.n3-strength-card:hover .strength-icon-box {
    background: var(--accent, #e8a317);
    color: #ffffff;
    border-color: var(--accent, #e8a317);
    transform: scale(1.06);
}

.strength-num {
    font-size: 24px;
    font-weight: 700;
    color: #cbd5e1;
    line-height: 1;
    transition: color 0.3s ease;
}

.n3-strength-card:hover .strength-num {
    color: var(--accent, #e8a317);
    opacity: 0.85;
}

.strength-title {
    font-size: 17.5px;
    font-weight: 600 !important;
    color: var(--heading, #0f172a);
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.strength-desc {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* --- 6. WORKING PROCESS (EVENT-STYLE 6 STEPS) --- */
.n3-about-process-section {
    padding: 35px 0 45px 0;
    background: #ffffff;
}

.n3-about-process-section .n3-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 30px;
    margin-top: 15px;
}

.n3-about-process-section .n3-process-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease;
}

.n3-about-process-section .process-img-wrap {
    height: 135px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    width: 100%;
}

.n3-about-process-section .process-img {
    max-height: 125px;
    max-width: 230px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.n3-about-process-section .n3-process-item:hover .process-img {
    transform: translateY(-4px) scale(1.04);
}

.n3-about-process-section .process-content {
    text-align: center;
    max-width: 320px;
    margin: 0 auto;
}

.n3-about-process-section .process-title {
    font-size: 16.5px;
    font-weight: 600 !important;
    color: var(--heading, #0f172a);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.n3-about-process-section .process-desc {
    font-size: 14px;
    color: #475569;
    line-height: 1.55;
    margin: 0;
}

/* --- 7. FAST CTA LUXURY BANNER --- */
.n3-about-cta-section {
    padding: 25px 0 70px 0;
    background: #ffffff;
}

.n3-cta-luxury-card {
    position: relative;
    border-radius: 20px;
    padding: 60px 50px;
    text-align: left;
    box-shadow: 0 16px 40px rgba(11, 26, 44, 0.16);
    overflow: hidden;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.cta-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 20, 36, 0.94) 0%, rgba(8, 20, 36, 0.85) 45%, rgba(8, 20, 36, 0.45) 70%, rgba(8, 20, 36, 0.1) 100%);
    z-index: 1;
}

.cta-content-wrapper {
    max-width: 560px;
    margin: 0;
    position: relative;
    z-index: 2;
    text-align: left;
}

.cta-heading {
    font-size: 32px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.cta-subtext {
    font-size: 15.5px;
    color: #cbd5e1;
    margin: 0 0 28px 0;
    line-height: 1.6;
    max-width: 500px;
    text-align: left;
}

.cta-buttons-flex {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
}

.n3-cta-btn-hotline,
.n3-cta-btn-zalo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 26px;
    border-radius: 12px;
    min-width: 220px;
    text-align: left;
    box-sizing: border-box;
    transition: all 0.25s ease;
}

.n3-cta-btn-hotline {
    background: var(--accent, #e8a317);
    color: #0b1a2c !important;
    border: 1px solid var(--accent, #e8a317);
    box-shadow: 0 4px 16px rgba(232, 163, 23, 0.35);
}

.n3-cta-btn-hotline:hover {
    background: var(--primary, #104c82);
    border-color: var(--primary, #104c82);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(16, 76, 130, 0.45);
    color: #ffffff !important;
}

.n3-cta-btn-zalo {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.n3-cta-btn-zalo:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
}

.n3-cta-btn-hotline i,
.n3-cta-btn-zalo i {
    font-size: 22px;
    flex-shrink: 0;
}

.btn-text-block {
    display: flex;
    flex-direction: column;
}

.btn-text-block .btn-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    opacity: 0.85;
}

.btn-text-block .btn-val {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

/* ==========================================================================
 * RESPONSIVE ABOUT PAGE (TABLET & MOBILE)
 * ========================================================================== */
@media (max-width: 1024px) {
    .stats-glass-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .stat-divider {
        display: none;
    }
    .n3-story-main-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .n3-values-3d-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .n3-ecosystem-cards-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .n3-strengths-grid,
    .n3-bento-strengths-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .n3-about-process-section .n3-process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
    }
}

@media (max-width: 768px) {
    .n3-about-hero {
        padding: 25px 0 50px 0;
    }
    .n3-about-hero-title {
        font-size: 28px;
    }
    .n3-about-hero-desc {
        font-size: 15px;
    }
    .stats-glass-inner {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px;
    }
    .stat-count {
        font-size: 22px;
    }
    .n3-story-headline {
        font-size: 22px;
    }
    .n3-section-main-title {
        font-size: 22px;
    }
    .floating-badge-experience {
        position: static;
        margin-bottom: 15px;
        display: inline-flex;
    }
    .floating-badge-partner {
        position: static;
        margin-top: 15px;
    }
    .n3-strengths-grid,
    .n3-bento-strengths-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .n3-about-process-section .n3-process-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .n3-cta-luxury-card {
        padding: 40px 20px;
        border-radius: 18px;
    }
    .cta-heading {
        font-size: 22px;
    }
    .cta-subtext {
        font-size: 14.5px;
    }
    .cta-buttons-flex {
        flex-direction: column;
        width: 100%;
    }
    .n3-cta-btn-hotline,
    .n3-cta-btn-zalo {
        width: 100%;
        justify-content: center;
    }
}