/* ==========================================================================
   NHA PHUONG THEME V2 - MAIN STYLESHEET
   Chuẩn 100% theo thiết kế Figma "UI v2 - Theo layout khách (06/10)"
   Node 219:2 / Frame 221:2 (1440x3648)
   ========================================================================== */

/* ----------------------------------------------------------------------
   1. RESET & BASE
   ---------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #3D3D3D;
    background-color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
}

button {
    font-family: inherit;
    cursor: pointer;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ----------------------------------------------------------------------
   2. COMMON LAYOUT & UTILITIES
   ---------------------------------------------------------------------- */
.np-v2-container {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 80px;
    padding-right: 80px;
    box-sizing: border-box;
}

.np-v2-section-heading {
    margin-bottom: 24px;
}

.np-v2-title {
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    color: #161616;
    margin: 0 0 12px 0;
    letter-spacing: 0;
}

.np-v2-title::after {
    display: none;
}

.np-home-why-v2 .np-why-v2-title {
    margin-bottom: 24px;
}

.np-v2-red-line {
    display: block;
    width: 44px;
    height: 3px;
    background-color: #B70000;
    border-radius: 2px;
}

/* Primary Button: height 48px, padding 0 24px, radius 6px, font Roboto 600 15px */
.np-v2-btn-primary,
.wp-block-button.np-v2-btn-primary .wp-block-button__link,
.wp-block-button.np-v2-btn-primary a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 24px;
    background-color: #B70000;
    color: #FFFFFF !important;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    border-radius: 6px;
    border: none;
    transition: all 0.25s ease;
    text-decoration: none !important;
}

.np-v2-btn-primary:hover,
.wp-block-button.np-v2-btn-primary .wp-block-button__link:hover,
.wp-block-button.np-v2-btn-primary a:hover {
    background-color: #8F0000;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(183, 0, 0, 0.25);
    color: #FFFFFF !important;
}

.np-v2-btn-primary i,
.wp-block-button.np-v2-btn-primary i,
.np-v2-btn-primary svg,
.wp-block-button.np-v2-btn-primary svg {
    font-size: 14px;
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.np-v2-btn-primary:hover i,
.wp-block-button.np-v2-btn-primary:hover i,
.np-v2-btn-primary:hover svg,
.wp-block-button.np-v2-btn-primary:hover svg {
    transform: translateX(3px);
}

/* Gold Button for Cafe: height 48px, bg #F2C57C, color #1E1510 */
.np-v2-btn-gold,
.wp-block-button.np-v2-btn-gold .wp-block-button__link,
.wp-block-button.np-v2-btn-gold a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 24px;
    background-color: #F2C57C;
    color: #1E1510 !important;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    border-radius: 6px;
    border: none;
    transition: all 0.25s ease;
    text-decoration: none !important;
}

.np-v2-btn-gold:hover,
.wp-block-button.np-v2-btn-gold .wp-block-button__link:hover,
.wp-block-button.np-v2-btn-gold a:hover {
    background-color: #e5b364;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(242, 197, 124, 0.3);
    color: #1E1510 !important;
}

.np-v2-btn-gold i,
.wp-block-button.np-v2-btn-gold i,
.np-v2-btn-gold svg,
.wp-block-button.np-v2-btn-gold svg {
    font-size: 14px;
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.np-v2-btn-gold:hover i,
.wp-block-button.np-v2-btn-gold:hover i,
.np-v2-btn-gold:hover svg,
.wp-block-button.np-v2-btn-gold:hover svg {
    transform: translateX(3px);
}


/* ----------------------------------------------------------------------
   3. HEADER V2 (Figma Node 221:3 - Height 76px, Border-bottom, Shadow)
   ---------------------------------------------------------------------- */
.np-header-v2 {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 76px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #E4E4E4;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    z-index: 1000;
}

.np-header-v2-container {
    max-width: 1440px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 80px;
    padding-right: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.np-header-logo-link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.np-header-logo-img {
    width: 128px;
    height: 49px;
    object-fit: contain;
}

/* Nav Menu: 8 items, gap 28px, font 14px/21px */
.np-header-nav {
    height: 100%;
    display: flex;
    align-items: center;
}

.np-header-nav-list {
    display: flex;
    align-items: center;
    /* gap: 28px; */
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.np-nav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.np-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    color: #3D3D3D;
    white-space: nowrap;
    position: relative;
    text-decoration: none;
    transition: color 0.2s ease;
}

.np-menu-arrow {
    font-size: 10px;
    color: #717171;
    transition: transform 0.25s ease, color 0.2s ease;
}

.np-nav-item:hover > .np-nav-link,
.np-nav-item.is-active > .np-nav-link {
    color: #B70000;
    font-weight: 600;
}

.np-nav-item:hover > .np-nav-link .np-menu-arrow {
    transform: rotate(180deg);
    color: #B70000;
}

.np-nav-item.is-active > .np-nav-link::after,
.np-nav-active-bar {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #B70000;
    border-radius: 2px 2px 0 0;
}

/* =====================================================================
   MULTI-LEVEL DROPDOWN & FLYOUT MENUS (Depth 1, 2, 3, ...)
   ===================================================================== */
/* Submenu Container (Common to all levels) */
.np-header-nav-list .sub-menu {
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
    border: 1px solid #ECECEC;
    min-width: 240px;
    z-index: 1000;
    
    /* Smooth animation */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
                visibility 0.22s;
}

/* Level 1 Submenu: Drops directly below 76px Header */
.np-header-nav-list > li > .sub-menu {
    top: calc(100% - 2px);
    left: 0;
    transform: translateY(8px);
}

/* Hover Bridge for Level 1 to prevent gap mouseout */
.np-header-nav-list > li > .sub-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
}

/* Show Level 1 on parent li hover */
.np-header-nav-list > li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Submenu Items & Links */
.np-sub-item {
    position: relative;
    list-style: none;
    width: 100%;
}

.np-sub-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 18px;
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    color: #333333;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1.4;
}

.np-sub-link .np-nav-text {
    flex-grow: 1;
}

.np-submenu-arrow {
    font-size: 9px;
    color: #8C8C8C;
    transition: transform 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.np-sub-item:hover > .np-sub-link {
    background-color: #FFF5F5;
    color: #B70000;
    font-weight: 500;
    padding-left: 22px;
}

.np-sub-item:hover > .np-sub-link .np-submenu-arrow {
    color: #B70000;
    transform: translateX(3px);
}

.np-sub-item.is-active > .np-sub-link {
    color: #B70000;
    font-weight: 600;
    background-color: #FFF5F5;
}

/* =====================================================================
   RECURSIVE FLYOUT DROPDOWNS (Level 2, 3, 4, ...)
   ===================================================================== */
.np-header-nav-list .sub-menu .sub-menu {
    top: -6px;
    left: 100%;
    margin-left: 2px;
    transform: translateX(8px);
    z-index: 1001;
}

/* Hover bridge for flyout submenu (left gap) */
.np-header-nav-list .sub-menu .sub-menu::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12px;
    width: 12px;
    background: transparent;
}

/* Show nested flyout on hover of its parent li */
.np-header-nav-list .sub-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

/* =====================================================================
   EDGE COLLISION PREVENTION: Reverse flyout for rightmost items
   ===================================================================== */
/* Level 1 aligns to right edge for last 2 top-level items */
.np-header-nav-list > li:nth-last-child(-n+2) > .sub-menu {
    left: auto;
    right: 0;
}

/* Flyouts open to the left for items in the right half of the navigation */
.np-header-nav-list > li:nth-last-child(-n+3) .sub-menu .sub-menu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 2px;
    transform: translateX(-8px);
}

.np-header-nav-list > li:nth-last-child(-n+3) .sub-menu .sub-menu::before {
    left: auto;
    right: -12px;
    width: 12px;
}

.np-header-nav-list > li:nth-last-child(-n+3) .sub-menu li:hover > .sub-menu {
    transform: translateX(0);
}

.np-header-nav-list > li:nth-last-child(-n+3) .np-submenu-arrow {
    transform: rotate(180deg);
}

.np-header-nav-list > li:nth-last-child(-n+3) .np-sub-item:hover > .np-sub-link .np-submenu-arrow {
    transform: rotate(180deg) translateX(3px);
}

/* Right Action Buttons (Search 40x40 + Mua online 128x40) */
.np-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.np-btn-search {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    border: 1px solid #E4E4E4;
    background-color: #FFFFFF;
    color: #B70000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all 0.2s ease;
    padding: 0;
}

.np-btn-search:hover {
    border-color: #B70000;
    background-color: #FCEEEE;
}

.np-btn-search svg {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
}

.np-btn-buy-online {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    background-color: #B70000;
    color: #FFFFFF !important;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    border-radius: 6px;
    white-space: nowrap;
}

.np-btn-buy-online svg {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
}

.np-btn-buy-online:hover {
    background-color: #8F0000;
    box-shadow: 0 3px 8px rgba(183, 0, 0, 0.25);
    color: #FFFFFF !important;
}

.np-mobile-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    border: 1px solid #E4E4E4;
    background-color: #FFFFFF;
    color: #161616;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Dropdown Search Bar */
.np-header-search-bar {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-bottom: 1px solid #E4E4E4;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    padding: 16px 0;
    z-index: 999;
}

.np-search-form {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}

.np-search-input {
    flex-grow: 1;
    height: 44px;
    border: 1px solid #E4E4E4;
    border-radius: 6px;
    padding: 0 16px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    outline: none;
}

.np-search-input:focus {
    border-color: #B70000;
}

.np-search-submit {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: #B70000;
    color: #FFFFFF;
    border: none;
}

.np-search-close {
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6B6B6B;
}

/* Mobile Drawer */
.np-mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
}

.np-mobile-drawer.is-open {
    display: block;
}

.np-drawer-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
}

.np-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85%;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    z-index: 2001;
}

.np-drawer-header {
    height: 76px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E4E4E4;
}

/* Logo trong menu mobile: cùng cỡ logo header, không bị giãn theo bề ngang */
.np-drawer-header .np-drawer-logo {
    display: block;
    width: auto !important;
    height: 40px !important;
    max-width: 150px;
    object-fit: contain;
}

.np-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    margin-right: -8px;
    background: transparent;
    border: none;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    color: #161616;
    cursor: pointer;
}

.np-drawer-body {
    padding: 24px 20px;
    overflow-y: auto;
    flex-grow: 1;
}

.np-drawer-nav-list {
    margin-bottom: 24px;
    list-style: none;
    padding: 0;
}

.np-drawer-nav-list li {
    margin-bottom: 0;
    border-bottom: 1px solid #F0F0F0;
    list-style: none;
}

.np-drawer-link-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}

.np-drawer-link-wrap a {
    font-size: 15px;
    font-weight: 500;
    color: #3D3D3D;
    text-decoration: none;
    flex-grow: 1;
}

.np-drawer-sub-toggle {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #717171;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: transform 0.25s ease, color 0.2s ease;
    padding: 0;
}

.np-drawer-nav-list li.is-open > .np-drawer-link-wrap .np-drawer-sub-toggle {
    transform: rotate(180deg);
    color: #B70000;
}

.np-drawer-sub-menu {
    display: none;
    list-style: none;
    padding: 4px 0 8px 16px;
    margin: 0;
    background: #F9F9F9;
    border-radius: 6px;
}

.np-drawer-sub-menu.is-open {
    display: block;
}

.np-drawer-sub-menu li {
    border-bottom: 1px dashed #EBEBEB;
}

.np-drawer-sub-menu li:last-child {
    border-bottom: none;
}

.np-drawer-sub-menu .np-drawer-link-wrap {
    padding: 9px 0;
}

.np-drawer-sub-menu a {
    font-size: 14px;
    font-weight: 400;
    color: #555555;
}

.np-drawer-nav-list li.is-active > .np-drawer-link-wrap a,
.np-drawer-nav-list a:hover {
    color: #B70000;
    font-weight: 600;
}

.np-drawer-btn-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    background: #B70000;
    color: #FFFFFF !important;
    border-radius: 6px;
    font-weight: 600;
}

/* ----------------------------------------------------------------------
   4. SECTION 1: HERO V2 (Node 221:45 - Height 640px)
   ---------------------------------------------------------------------- */
.np-hero-v2 {
    position: relative;
    width: 100%;
    min-height: 640px;
    background-color: #14213D;
    background-image: url('../images/v2/home_hero.png');
    background-size: cover;
    background-position: right center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.np-hero-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 950px;
    max-width: 65%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 40%, rgba(255, 255, 255, 0.65) 70%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

.np-hero-v2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 950px;
    max-width: 65%;
    height: 220px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 2;
    pointer-events: none;
}

/* Fallback for inline overlay elements if present */
.np-hero-v2-overlay-left,
.np-hero-v2-overlay-bottom {
    display: none;
}

.np-hero-v2-container {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 640px;
    padding-top: 70px;
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 80px;
    padding-right: 80px;
    box-sizing: border-box;
}

.np-hero-v2-content {
    max-width: 620px;
}

.np-hero-v2-brand {
    font-family: 'Roboto', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 70px;
    color: #B70000;
    margin: 0 0 12px 0;
    letter-spacing: 0;
}

.np-hero-v2-slogan {
    font-family: 'Roboto', sans-serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 51px;
    color: #14213D;
    margin: 0 0 16px 0;
    letter-spacing: 0;
}

.np-hero-v2-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 27px;
    color: #3D3D3D;
    max-width: 540px;
    margin: 0 0 28px 0;
}

.np-hero-v2-cta {
    margin-bottom: 40px;
}

/* 4 Điểm mạnh bar ở chân Hero (Figma: 603x84px) */
.np-hero-v2-features {
    width: 603px;
    max-width: 100%;
    padding-bottom: 24px;
}

.np-hero-v2-features-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
}

.np-hero-feature-item {
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.np-hero-feature-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 26px;
}

.np-hero-feature-icon svg {
    width: 36px;
    height: 36px;
    display: block;
    flex-shrink: 0;
}

.np-hero-feature-text {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    color: #FFFFFF;
}

.np-hero-feature-divider {
    width: 1px;
    height: 56px;
    background-color: rgba(255, 255, 255, 0.4);
    margin: 0 8px;
    flex-shrink: 0;
}

/* ----------------------------------------------------------------------
   5. SECTION 2: THƯƠNG HIỆU PHÂN PHỐI (Node 221:93 - Height 216px)
   ---------------------------------------------------------------------- */
.np-home-brands-v2 {
    background-color: #FFFFFF;
    padding: 48px 0;
}

.np-brands-v2-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.np-brands-v2-header {
    flex-shrink: 0;
    max-width: 444px;
}

.np-brands-title {
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 38px;
    color: #161616;
    margin: 0 0 12px 0;
}

.np-brands-v2-slider-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-grow: 1;
    justify-content: flex-end;
}

.np-brands-v2-list {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
}

.np-brand-card {
    width: 184px;
    height: 76px;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    transition: all 0.25s ease;
    border: 1px solid #F0F0F0;
}

.np-brand-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
    border-color: #B70000;
}

.np-brand-card img {
    max-width: 156px;
    max-height: 60px;
    object-fit: contain;
}

/* Nút trượt slider 44x44 tròn */
.np-brand-slider-btn {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background-color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #ECECEC;
    color: #161616;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    font-size: 15px;
}

.np-brand-slider-btn svg {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}

.np-brand-slider-btn:hover {
    background-color: #B70000;
    color: #FFFFFF;
    border-color: #B70000;
}

/* ----------------------------------------------------------------------
   6. SECTION 3: SẢN PHẨM ĐA DẠNG (Node 221:114 - Height 384px, Bg #FCEEEE)
   ---------------------------------------------------------------------- */
.np-home-products-v2 {
    background-color: #FCEEEE;
    padding: 56px 0;
    position: relative;
    overflow: hidden;
}

.np-products-v2-light-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
    pointer-events: none;
    z-index: 1;
}

.np-products-v2-container {
    position: relative;
    z-index: 2;
}

.np-products-v2-grid {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 36px;
    align-items: center;
}

.np-products-v2-info {
    max-width: 440px;
}

.np-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}

.np-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #B70000;
    display: block;
}

.np-products-title {
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    color: #161616;
    margin: 0 0 16px 0;
}

.np-products-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #3D3D3D;
    margin: 0 0 24px 0;
}

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

.np-cat-card {
    width: 100%;
    height: 340px;
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: all 0.25s ease;
}

.np-cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.np-cat-card-img-wrap {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.np-cat-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.np-cat-card:hover .np-cat-card-img {
    transform: scale(1.05);
}

.np-cat-card-label {
    height: 90px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    color: #161616;
}

/* ----------------------------------------------------------------------
   7. SECTION 4: VỀ NHÃ PHƯỢNG (Node 221:147 / 244:1796 - Height 548px)
   ---------------------------------------------------------------------- */
.np-home-about-v2 {
    position: relative;
    background-color: #FFFFFF;
    /* Figma 221:147 cao 548px = 40 (trên) + 247 (nội dung) + 57 + 180 (thẻ) + 24 (dưới) */
    padding: 40px 0 24px 0;
    overflow: hidden;
}

/* Ảnh tòa nhà bên trái (Figma 221:148): rộng 760/1440 = 52.78%, cao tràn section */
.np-about-v2-bg-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 52.78%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Lớp phủ trắng nối ảnh (Figma 221:149: x=340 → 760).
   Phủ đúng bề rộng ảnh và đạt trắng tinh ngay tại mép phải ảnh nên không còn đường cắt dọc. */
.np-about-v2-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 52.78%;
    height: 100%;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 78%,      /* ảnh hiện gần trọn, chỉ hoà vào nền trắng ở mép phải */
        rgba(255, 255, 255, 0.6) 90%,
        #FFFFFF 100%);
    pointer-events: none;
    z-index: 2;
}

.np-about-v2-container {
    position: relative;
    z-index: 3;
}

/* Khối nội dung (Figma 221:150): rộng 670px, canh phải mép container, cách khối chỉ số 57px */
.np-about-v2-content {
    max-width: 670px;
    margin-left: auto;
    margin-bottom: 57px;
}

/* Figma 221:150 dùng gap dọc 20px giữa tiêu đề – mô tả – CTA */
.np-home-about-v2 .np-v2-section-heading {
    margin-bottom: 20px;
}

.np-about-v2-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: #3D3D3D;
    margin: 0 0 20px 0;
}

/* 4 thẻ chỉ số (Figma 221:162): 968px = 4 cột 230px + 3 khoảng 16px, canh phải */
.np-stats-v2-wrap {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 230px));
    gap: 16px;
    justify-content: end;
    margin: 0 auto;
}

/* Thẻ (Figma 221:163): 230x180, bo 12px, đệm 20/12, gap dọc 6px,
   bóng 0 6 20 rgba(0,0,0,.09) và KHÔNG có viền */
.np-stat-card {
    height: 180px;
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.np-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.13);
}

.np-stat-icon {
    color: #B70000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.np-stat-icon svg {
    width: 36px;
    height: 36px;
    display: block;
    flex-shrink: 0;
}

.np-stat-label {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: #3D3D3D;
}

.np-stat-number {
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: #B70000;
}

.np-stat-sub {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #161616;
}


/* ----------------------------------------------------------------------
   8. SECTION 5: VÌ SAO CHỌN NHÃ PHƯỢNG (Node 222:97 - Height 372px)
   ---------------------------------------------------------------------- */
.np-home-why-v2 {
    background-color: #FFFFFF;
    padding: 64px 0;
    border-top: 1px solid #F0F0F0;
}

.np-why-v2-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.np-why-card {
    height: 224px;
    background-color: #FFFFFF;
    border: 1px solid #E4E4E4;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    padding: 28px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    transition: all 0.25s ease;
}

.np-why-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
    border-color: #B70000;
}

.np-why-icon-wrap {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #B70000;
    font-size: 26px;
    flex-shrink: 0;
}

.np-why-icon-wrap svg {
    width: 40px;
    height: 40px;
    display: block;
    flex-shrink: 0;
}

.np-why-title {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
    color: #161616;
    margin: 0;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.np-why-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #6B6B6B;
    margin: 0;
}

/* ----------------------------------------------------------------------
   9. SECTION 6: TRUNG NGUYÊN LEGEND CAFÉ (Node 222:150 - Height 324px)
   ---------------------------------------------------------------------- */
.np-home-cafe-v2 {
    background-color: #1E1510;
    background-size: cover;
    background-position: center right;
    position: relative;
    padding: 56px 0;
    color: #FFFFFF;
    overflow: hidden;
}

.np-cafe-v2-dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 620px;
    max-width: 65%;
    background: linear-gradient(90deg, #1E1510 0%, rgba(30,21,16,0.95) 60%, rgba(30,21,16,0) 100%);
    z-index: 1;
}
.wp-block-kadence-column{
    justify-content: center;
}
.np-cafe-v2-container {
    position: relative;
    z-index: 2;
}

.np-cafe-v2-grid {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 48px;
    align-items: center;
}

.np-cafe-v2-info {
    max-width: 440px;
}

.np-cafe-v2-title {
    font-family: 'Roboto', sans-serif;
    font-size: 38px;
    font-weight: 700;
    line-height: 46px;
    color: #F2C57C;
    margin: 0 0 18px 0;
}

.np-cafe-v2-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #FFFFFF;
    margin: 0 0 28px 0;
}

/* 3-Image Collage */
.np-cafe-v2-images {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;
}

.np-cafe-img-main-wrap {
    width: 210px;
    height: 282px;
    border-radius: 8px;
    border: 2px solid #F2C57C;
    overflow: hidden;
    flex-shrink: 0;
}

.np-cafe-img-main {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.np-cafe-img-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 210px;
    flex-shrink: 0;
}

.np-cafe-img-sub-wrap {
    width: 210px;
    height: 132px;
    border-radius: 8px;
    border: 2px solid #F2C57C;
    overflow: hidden;
}

.np-cafe-img-sub {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Trung Nguyên Legend Café Zoom & Lightbox --- */
.np-cafe-zoom-item {
    position: relative;
    cursor: pointer !important;
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.3s ease;
}

.np-cafe-zoom-item:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
    border-color: #E2B76D !important;
}

.np-cafe-zoom-item img {
    transition: transform 0.4s ease;
}

.np-cafe-zoom-item:hover img {
    transform: scale(1.05);
}

.np-cafe-zoom-hint {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: rgba(18, 14, 11, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(242, 197, 124, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F2C57C;
    font-size: 13px;
    opacity: 0.88;
    transition: all 0.25s ease;
    pointer-events: none;
    z-index: 3;
}

.np-cafe-zoom-item:hover .np-cafe-zoom-hint {
    opacity: 1;
    transform: scale(1.1);
    background: #B70000;
    color: #FFFFFF;
    border-color: #B70000;
}

/* Lightbox Modal */
.np-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 8, 6, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
    padding: 20px;
    box-sizing: border-box;
}

.np-lightbox-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.np-lightbox-dialog {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(0.92);
    transition: transform 0.28s cubic-bezier(0.2, 0, 0, 1);
    outline: none;
}

.np-lightbox-overlay.is-active .np-lightbox-dialog {
    transform: scale(1);
}

.np-lightbox-img-wrap {
    position: relative;
    max-width: 100%;
    max-height: 82vh;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(242, 197, 124, 0.55);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8);
    background: #141414;
    display: flex;
    align-items: center;
    justify-content: center;
}

.np-lightbox-img {
    display: block;
    max-width: 90vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.np-lightbox-caption {
    margin-top: 14px;
    color: #F5E6CC;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    max-width: 650px;
    line-height: 1.4;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.np-lightbox-close {
    position: absolute;
    top: 24px;
    right: 28px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1000000;
    line-height: 1;
}

.np-lightbox-close:hover {
    background: #B70000;
    border-color: #B70000;
    transform: scale(1.1);
}

.np-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(20, 16, 12, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(242, 197, 124, 0.45);
    border-radius: 50%;
    color: #F2C57C;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 1000000;
}

.np-lightbox-nav:hover {
    background: #B70000;
    border-color: #B70000;
    color: #FFFFFF;
    transform: translateY(-50%) scale(1.1);
}

.np-lightbox-prev {
    left: 28px;
}

.np-lightbox-next {
    right: 28px;
}

@media (max-width: 768px) {
    .np-lightbox-nav {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
    .np-lightbox-prev { left: 8px; }
    .np-lightbox-next { right: 8px; }
    .np-lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 20px; }
    .np-lightbox-caption { font-size: 13px; margin-top: 10px; }
}

/* ----------------------------------------------------------------------
   10. SECTION 7: TIN TỨC & HOẠT ĐỘNG (Node 222:167 - Height 440px)
   ---------------------------------------------------------------------- */
.np-home-news-v2 {
    background-color: #FFFFFF;
    padding: 64px 0;
}

.np-news-v2-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 32px;
}

.np-news-v2-viewall {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
    color: #B70000;
    transition: gap 0.2s ease;
}

.np-news-v2-viewall svg {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.np-news-v2-viewall:hover {
    gap: 12px;
    color: #8F0000;
}

.np-news-v2-viewall:hover svg {
    transform: translateX(4px);
}

.np-news-v2-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.np-news-card-v2 {
    background-color: #FFFFFF;
    border: 1px solid #ECECEC;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.np-news-card-v2:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
    border-color: #B70000;
}

.np-news-thumb-wrap {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
}

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

.np-news-card-v2:hover .np-news-thumb {
    transform: scale(1.04);
}

.np-news-date-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 58px;
    height: 64px;
    background-color: #B70000;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.np-news-date-day {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 26px;
}

.np-news-date-month {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    margin-top: 2px;
}

.np-news-body-v2 {
    padding: 18px 22px 24px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.np-news-title-v2 {
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 23px;
    color: #161616;
    margin: 0 0 10px 0;
}

.np-news-excerpt-v2 {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #6B6B6B;
    margin: 0;
}

/* ----------------------------------------------------------------------
   11. SECTION 8: GIA NHẬP NHÃ PHƯỢNG (Node 222:205 / 244:1906 - Full Width 1440x256px)
   ---------------------------------------------------------------------- */
.np-home-join-v2 {
    position: relative;
    width: 100%;
    min-height: 256px;
    background-color: #FCEEEE;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    /* Figma: noi dung cach dinh 52px, section cao 256px */
    padding: 52px 0 26px;
}

/* Ảnh đội ngũ tràn viền bên phải (Figma 222:206: x=620, 820x256 => 56.94%) */
.np-join-v2-bg-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 56.94%;
    height: 100%;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Lớp phủ nối ảnh (Figma 222:207): bắt đầu tại mép trái ảnh, rộng 360px (= 43.9% ảnh),
   hồng #FCEEEE -> trong suốt. Phần còn lại của ảnh để lộ hoàn toàn. */
.np-join-v2-gradient {
    position: absolute;
    top: 0;
    right: 0;
    width: 56.94%;
    height: 100%;
    background: linear-gradient(90deg, #FCEEEE 0%, rgba(252, 238, 238, 0) 15%);
    pointer-events: none;
    z-index: 2;
}

.np-join-v2-container {
    position: relative;
    z-index: 3;
}

/* Figma 222:208: x=96 (container 80 + 16), rộng 560, gap dọc 16px */
.np-join-v2-content {
    max-width: 576px;
    padding-left: 16px;
    box-sizing: border-box;
}

.np-join-v2-title {
    font-family: 'Roboto', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: #B70000;
    margin: 0 0 16px 0;
}

.np-join-v2-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #3D3D3D;
    /* gap 16 + CTA pt 4 */
    margin: 0 0 20px 0;
}

/* ----------------------------------------------------------------------
   12. FOOTER V2 (Node 222:218 / 244:1916 - Height 392px, Bg #141414 + Truck Fleet Watermark)
   ---------------------------------------------------------------------- */
.np-footer-v2 {
    position: relative;
    background-color: #141414;
    color: #FFFFFF;
    padding: 64px 0 28px 0;
    overflow: hidden;
}

/* Ảnh chìm đội xe Isuzu chuẩn Figma Node 220:280 */
.np-footer-v2-bg-watermark {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: 0.28;
    pointer-events: none;
    z-index: 1;
}

.np-footer-v2-container {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.np-footer-v2-grid {
    display: grid;
    grid-template-columns: 380px repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.np-footer-col-brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.np-footer-logo-img {
    width: 128px;
    height: 49px;
    object-fit: contain;
}

.np-footer-company-name {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    color: #FFFFFF;
    margin: 0;
}

.np-footer-slogan {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: #A3A3A3;
    margin: 0;
}

.np-footer-socials {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 8px;
}

.np-footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #FFFFFF !important;
    font-size: 20px;
    transition: opacity 0.2s ease;
}

.np-footer-social-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.np-footer-social-icon:hover {
    opacity: 0.8;
}

.np-social-linkedin {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.np-footer-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.np-footer-col-title {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #FFFFFF;
    margin: 0;
}

.np-footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.np-footer-links a {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: #A3A3A3;
    transition: color 0.2s ease;
}

.np-footer-links a:hover {
    color: #FFFFFF;
}

.np-footer-v2-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
    margin-bottom: 24px;
}

.np-footer-v2-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    color: #A3A3A3;
}

.np-footer-legal {
    display: flex;
    align-items: center;
    gap: 16px;
}

.np-footer-legal a {
    color: #A3A3A3;
    transition: color 0.2s ease;
}

.np-footer-legal a:hover {
    color: #FFFFFF;
}

.np-legal-sep {
    color: #A3A3A3;
    opacity: 0.6;
}

/* ----------------------------------------------------------------------
   13. FLOATING QUICK CONTACT
   ---------------------------------------------------------------------- */
.np-floating-actions {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 999;
}

.np-float-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF !important;
    font-size: 22px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: all 0.25s ease;
    border: none;
}

.np-float-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

.np-float-btn:hover {
    transform: scale(1.08);
}

.np-float-hotline {
    background-color: #B70000;
}

.np-float-backtop {
    background-color: #14213D;
    display: none;
}

/* Cột nút của plugin 123Website (inc/floating-actions.php): giữ đúng kiểu nút tròn 50px của theme */
.c123-floating-stack {
    width: auto !important;
    align-items: flex-end;
    z-index: 999 !important;
}

.c123-floating-stack .c123-btn.small,
.c123-floating-stack .c123-btn.c123-full {
    --c123-size: 50px;
    width: 50px;
    height: 50px;
    padding: 0;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease;
}

.c123-floating-stack .c123-btn:hover {
    transform: scale(1.08);
}

/* ----------------------------------------------------------------------
   14. RESPONSIVE BREAKPOINTS
   ---------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .np-header-v2-container,
    .np-v2-container,
    .np-hero-v2-container {
        padding-left: 24px;
        padding-right: 24px;
    }
    .np-header-nav-list {
        gap: 16px;
    }
    .np-why-v2-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .np-footer-v2-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .np-header-nav {
        display: none !important;
    }
    .np-mobile-toggle {
        display: flex !important;
    }
    .np-hero-v2-container {
        padding-top: 40px;
    }
    .np-hero-v2-slogan {
        font-size: 34px;
        line-height: 42px;
    }
    .np-hero-v2-brand {
        font-size: 48px;
        line-height: 54px;
    }
    .np-hero-v2-features-inner {
        flex-wrap: wrap;
        gap: 20px;
    }
    .np-hero-feature-divider {
        display: none;
    }
    .np-products-v2-grid {
        grid-template-columns: 1fr;
    }
    .np-cat-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .np-about-v2-bg-left {
        position: relative;
        width: 100%;
        height: 280px;
    }
    .np-about-v2-gradient {
        display: none;
    }
    .np-about-v2-content {
        margin-left: 0;
        max-width: 100%;
        padding-top: 24px;
        margin-bottom: 32px;
    }
    .np-stats-v2-wrap {
        grid-template-columns: repeat(2, 1fr);
        max-width: 500px;
    }
    .np-cafe-v2-grid {
        grid-template-columns: 1fr;
    }
    .np-cafe-v2-images {
        justify-content: flex-start;
    }
    .np-news-v2-grid {
        grid-template-columns: 1fr;
    }
    .np-join-v2-bg-right,
    .np-join-v2-gradient {
        display: none;
    }
    .np-join-v2-content {
        max-width: 100%;
        text-align: center;
    }
    .np-footer-v2-grid {
        grid-template-columns: 1fr 1fr;
    }
    .np-footer-col-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .np-header-v2-container,
    .np-v2-container,
    .np-hero-v2-container {
        padding-left: 16px;
        padding-right: 16px;
    }
    .np-hero-v2::before {
        width: 100% !important;
        max-width: 100% !important;
        background: rgba(255, 255, 255, 0.94) !important;
    }
    .np-hero-v2-overlay-left {
        width: 100%;
        max-width: 100%;
        background: rgba(255, 255, 255, 0.94);
    }
    .np-hero-v2-brand {
        font-size: 38px;
        line-height: 44px;
    }
    .np-hero-v2-slogan {
        font-size: 26px;
        line-height: 34px;
    }
    .np-brands-v2-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .np-brands-v2-slider-wrap {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
    }
    .np-cat-cards-grid {
        grid-template-columns: 1fr;
    }
    .np-why-v2-grid {
        grid-template-columns: 1fr;
    }
    .np-cafe-v2-images {
        flex-direction: column;
        align-items: flex-start;
    }
    .np-cafe-img-main-wrap,
    .np-cafe-img-stack,
    .np-cafe-img-sub-wrap {
        width: 100%;
    }
    /* Logo + giới thiệu chiếm cả hàng, 4 cột liên kết xếp 2 mục / hàng */
    .np-footer-v2-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
    }
    .np-footer-col-brand {
        grid-column: 1 / -1;
    }
    .np-footer-v2-bottom {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}

/* ==========================================================================
   GUTENBERG BLOCK EDITOR CANVAS STYLES
   ========================================================================== */
.editor-styles-wrapper {
    font-family: 'Roboto', sans-serif !important;
    background-color: #FFFFFF !important;
    color: #3D3D3D !important;
}

.editor-styles-wrapper .np-v2-container,
.editor-styles-wrapper .np-hero-v2-container {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    width: 100%;
    box-sizing: border-box;
}

.editor-styles-wrapper .np-hero-v2,
.editor-styles-wrapper .np-home-cafe-v2,
.editor-styles-wrapper .np-home-brands-v2,
.editor-styles-wrapper .np-home-products-v2,
.editor-styles-wrapper .np-home-about-v2,
.editor-styles-wrapper .np-home-why-v2,
.editor-styles-wrapper .np-home-news-v2,
.editor-styles-wrapper .np-home-join-v2 {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    box-sizing: border-box;
}

.editor-styles-wrapper a.np-v2-btn-primary,
.editor-styles-wrapper a.np-v2-btn-gold {
    text-decoration: none !important;
}

.editor-styles-wrapper .fa-solid,
.editor-styles-wrapper .fa-regular {
    display: inline-block;
}

/* ==========================================================================
   ABOUT PAGE - VỀ NHÃ PHƯỢNG (Chuẩn Figma v2 - Node 225:181)
   ========================================================================== */

/* Page Wrapper & Common Elements */
.np-about-page {
    width: 100%;
    overflow-x: hidden;
}

.np-container {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

.np-tag-red {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #B70000;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

/* ----------------------------------------------------------------------
   SECTION 1: HERO BANNER (Node 225:224)
   ---------------------------------------------------------------------- */
.np-about-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #FAF9F6;
}

.np-about-hero__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 62%;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

.np-about-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 42%, rgba(255, 255, 255, 0.88) 54%, rgba(255, 255, 255, 0) 72%);
    pointer-events: none;
}

.np-about-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.np-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #616161;
    margin-bottom: 14px;
}

.np-breadcrumb a {
    color: #616161;
    text-decoration: none;
}

.np-breadcrumb a:hover {
    color: #B70000;
}

.np-breadcrumb__sep {
    color: #9E9E9E;
}

.np-breadcrumb__current {
    color: #222222;
    font-weight: 400;
}

.np-about-hero__title {
    font-size: 46px;
    font-weight: 700;
    color: #14213D;
    margin: 0 0 10px 0;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.np-about-hero__headline {
    font-size: 38px;
    font-weight: 900;
    color: #B70000;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 18px;
    letter-spacing: 0.5px;
}

.np-about-hero__desc {
    font-size: 18px;
    line-height: 1.6;
    color: #3D3D3D;
    max-width: 500px;
    margin: 0;
}

/* ----------------------------------------------------------------------
   SECTION 2: GIỚI THIỆU & VIDEO (Node 225:237)
   ---------------------------------------------------------------------- */
.np-about-intro {
    padding: 70px 0;
    background-color: #FFFFFF;
}

.np-about-intro__grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 60px;
    align-items: center;
}

.np-about-intro__title {
    font-size: 34px;
    font-weight: 700;
    color: #161616;
    line-height: 1.25;
    margin: 0 0 20px 0;
}

.np-about-intro__desc p {
    font-size: 16px;
    line-height: 1.7;
    color: #3D3D3D;
    margin: 0 0 16px 0;
}

.np-about-intro__desc strong {
    color: #161616;
    font-weight: 600;
}

.np-about-video-card {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16/10;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.np-about-video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.np-about-video-card__img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}

.np-about-video-card:hover .np-about-video-card__img {
    transform: scale(1.04);
}

.np-about-video-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
    display: flex;
    align-items: flex-end;
    padding: 24px;
    gap: 16px;
}

.np-about-video-card__btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #B70000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    flex-shrink: 0;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.np-about-video-card:hover .np-about-video-card__btn {
    transform: scale(1.1);
    background: #B70000;
    color: #FFFFFF;
}

.np-about-video-card__name {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.np-about-video-card__sub {
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    margin-top: 2px;
}

/* ----------------------------------------------------------------------
   SECTION 3: 6 CHỈ SỐ HOẠT ĐỘNG (Node 225:254)
   ---------------------------------------------------------------------- */
.np-about-stats {
    padding: 40px 0;
    background-color: #FAFAFA;
    border-top: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
}

.np-about-stats__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.np-about-stats__item {
    padding: 0 20px;
    border-right: 1px solid #E5E5E5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 120px;
}

.np-about-stats__item:last-child {
    border-right: none;
}

.np-about-stats__icon {
    color: #B70000;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.np-about-stats__label {
    font-size: 15px;
    font-weight: 600;
    color: #161616;
}

.np-about-stats__sub {
    font-size: 13px;
    color: #6B6B6B;
    margin-top: 2px;
}

.np-about-stats__val {
    font-size: 30px;
    font-weight: 700;
    color: #B70000;
    margin-top: 10px;
    line-height: 1;
}

/* ----------------------------------------------------------------------
   SECTION 4: HÀNH TRÌNH PHÁT TRIỂN (Node 225:326)
   ---------------------------------------------------------------------- */
.np-about-journey {
    position: relative;
    padding: 70px 0 60px;
    min-height: 520px;
    overflow: hidden;
}

.np-about-journey__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
}

.np-about-journey__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.92) 40%, rgba(255, 255, 255, 0.75) 70%, rgba(255, 255, 255, 0.95) 100%);
}

.np-about-journey__inner {
    position: relative;
    z-index: 2;
}

.np-about-journey__header {
    margin-bottom: 50px;
    max-width: 580px;
}

.np-about-journey__title {
    font-size: 38px;
    font-weight: 700;
    color: #161616;
    line-height: 1.25;
    margin: 10px 0 16px;
}

.np-about-journey__desc {
    font-size: 16px;
    line-height: 1.6;
    color: #3D3D3D;
}

.np-about-journey__timeline {
    position: relative;
    padding-top: 20px;
    margin-top: 30px;
}

.np-about-journey__line {
    position: absolute;
    top: 28px;
    left: 8px;
    right: 8px;
    height: 3px;
    background-color: #B70000;
    z-index: 1;
}

.np-about-journey__items {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
    position: relative;
    z-index: 2;
}

.np-about-journey__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.np-about-journey__dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #B70000;
    border: 3px solid #FFFFFF;
    box-shadow: 0 0 0 2px #B70000;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.np-about-journey__year {
    font-size: 17px;
    font-weight: 700;
    color: #B70000;
    margin-bottom: 6px;
}

.np-about-journey__text {
    font-size: 13px;
    line-height: 1.45;
    color: #3D3D3D;
}

/* ----------------------------------------------------------------------
   SECTION 5: SỨ MỆNH & TẦM NHÌN (Node 225:359)
   ---------------------------------------------------------------------- */
.np-about-mv {
    width: 100%;
    overflow: hidden;
}

.np-about-mv__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    width: 100%;
    min-height: 290px;
}

.np-about-mv__card {
    position: relative;
    padding: 48px 60px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.np-about-mv__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.np-about-mv__card:hover .np-about-mv__bg {
    transform: scale(1.05);
}

.np-about-mv__card--mission .np-about-mv__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(168, 0, 0, 0.94) 0%, rgba(183, 0, 0, 0.88) 60%, rgba(183, 0, 0, 0.6) 100%);
}

.np-about-mv__card--vision .np-about-mv__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(16, 32, 56, 0.94) 0%, rgba(20, 33, 61, 0.88) 60%, rgba(20, 33, 61, 0.6) 100%);
}

.np-about-mv__content {
    position: relative;
    z-index: 2;
    color: #FFFFFF;
    max-width: 600px;
}

.np-about-mv__icon {
    margin-bottom: 14px;
    color: #FFFFFF;
    opacity: 0.9;
}

.np-about-mv__title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    color: #FFFFFF;
}

.np-about-mv__desc {
    font-size: 20px;
    line-height: 1.55;
    color: #FFFFFF;
    font-weight: 400;
    margin: 0;
}

/* ----------------------------------------------------------------------
   SECTION 6: GIÁ TRỊ CỐT LÕI (Node 226:264)
   ---------------------------------------------------------------------- */
.np-about-values {
    padding: 60px 0;
    background-color: #FFFFFF;
}

.np-about-values__header {
    text-align: center;
    margin-bottom: 45px;
}

.np-about-values__title {
    font-size: 28px;
    font-weight: 700;
    color: #161616;
    margin: 0 0 10px;
}

.np-about-values__sub {
    font-size: 15px;
    color: #6B6B6B;
    margin: 0;
}

.np-about-values__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.np-about-values__item {
    text-align: center;
    padding: 0 24px;
    border-right: 1px solid #ECECEC;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.np-about-values__item:last-child {
    border-right: none;
}

.np-about-values__icon {
    color: #B70000;
    margin-bottom: 16px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.np-about-values__name {
    font-size: 16px;
    font-weight: 700;
    color: #161616;
    text-transform: uppercase;
    line-height: 1.35;
    margin: 0 0 10px;
}

.np-about-values__desc {
    font-size: 14px;
    line-height: 1.5;
    color: #6B6B6B;
    margin: 0;
}

/* ----------------------------------------------------------------------
   SECTION 7: CHÍN NHÓM NĂNG LỰC (Node 226:318)
   ---------------------------------------------------------------------- */
.np-about-capabilities {
    padding: 70px 0;
    background-color: #F8F8F8;
}

.np-about-cap__header {
    text-align: center;
    margin-bottom: 45px;
}

.np-about-cap__title {
    font-size: 28px;
    font-weight: 700;
    color: #161616;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.np-about-cap__sub {
    font-size: 16px;
    color: #3D3D3D;
    margin: 0;
}

.np-about-cap__row {
    display: grid;
    gap: 20px;
}

.np-about-cap__row--4 {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 24px;
}

.np-about-cap__row--5 {
    grid-template-columns: repeat(5, 1fr);
}

.np-about-cap__card {
    background-color: #FFFFFF;
    border: 1px solid #EBEBEB;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.np-about-cap__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

.np-about-cap__thumb {
    height: 104px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.np-about-cap__body {
    padding: 16px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-grow: 1;
}

.np-about-cap__num {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #B70000;
    margin-bottom: 4px;
}

.np-about-cap__name {
    font-size: 16px;
    font-weight: 700;
    color: #161616;
    line-height: 1.3;
    margin: 0;
}

.np-about-cap__icon {
    color: #B70000;
    flex-shrink: 0;
    margin-left: 8px;
}

/* ----------------------------------------------------------------------
   SECTION 8: MẠNG LƯỚI HOẠT ĐỘNG (Node 226:432)
   ---------------------------------------------------------------------- */
.np-about-network {
    padding: 70px 0;
    background-color: #FFFFFF;
}

.np-about-network__grid {
    display: grid;
    grid-template-columns: 280px 320px 1fr;
    gap: 30px;
    align-items: center;
}

.np-about-network__title {
    font-size: 28px;
    font-weight: 700;
    color: #161616;
    line-height: 1.3;
    margin: 10px 0 16px;
}

.np-about-network__desc {
    font-size: 15px;
    line-height: 1.65;
    color: #3D3D3D;
    margin-bottom: 24px;
}

.np-about-network__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    background-color: #B70000;
    color: #FFFFFF !important;
    padding: 12px 20px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.25s ease;
}

.np-about-network__btn:hover {
    background-color: #900000;
}

.np-about-network__map-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.np-about-network__map-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.np-about-network__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.np-branch-card {
    background-color: #FFFFFF;
    border: 1px solid #ECECEC;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    transition: transform 0.25s ease;
}

.np-branch-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.np-branch-card__img {
    height: 78px;
    background-size: cover;
    background-position: center;
}

.np-branch-card__img--placeholder {
    background-color: #E8E2DC;
}

.np-branch-card__body {
    padding: 10px 12px;
}

.np-branch-card__name {
    font-size: 13px;
    font-weight: 700;
    color: #161616;
    margin: 0 0 4px;
}

.np-branch-card__addr {
    font-size: 11px;
    color: #6B6B6B;
    line-height: 1.4;
    margin: 0;
}

/* ----------------------------------------------------------------------
   SECTION 9: GIẤY TỜ PHÁP LÝ & CHỨNG NHẬN (Node 226:503)
   ---------------------------------------------------------------------- */
.np-about-certs {
    padding: 70px 0;
    background-color: #FAFAFA;
}

.np-about-certs__grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 50px;
    align-items: center;
}

.np-about-certs__title {
    font-size: 34px;
    font-weight: 700;
    color: #161616;
    line-height: 1.25;
    margin: 10px 0 16px;
}

.np-about-certs__desc {
    font-size: 15px;
    line-height: 1.6;
    color: #616161;
    margin-bottom: 24px;
}

.np-about-certs__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #161616;
    color: #161616;
    padding: 10px 22px;
    border-radius: 4px;
    background-color: transparent;
    text-decoration: none;
    transition: all 0.25s ease;
}

.np-about-certs__btn:hover {
    background-color: #161616;
    color: #FFFFFF;
}

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

.np-cert-card {
    text-align: center;
}

.np-cert-card__frame {
    background-color: #F4F1EC;
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}

.np-cert-card:hover .np-cert-card__frame {
    transform: translateY(-4px);
}

.np-cert-card__frame img {
    max-height: 185px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.np-cert-card__title {
    font-size: 14px;
    font-weight: 700;
    color: #161616;
    margin: 0 0 4px;
}

.np-cert-card__sub {
    font-size: 12px;
    color: #6B6B6B;
    margin: 0;
}

/* ----------------------------------------------------------------------
   SECTION 10: CTA HỢP TÁC (Node 226:536)
   ---------------------------------------------------------------------- */
.np-about-cta {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
    min-height: 200px;
    display: flex;
    align-items: center;
    background-color: #B70000;
}

.np-about-cta__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/* Figma 226:538: lớp phủ đỏ CHỈ phủ 800/1440 = 55.56% bên trái, phần phải để lộ ảnh thật */
.np-about-cta__overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 55.56%;
    background: linear-gradient(90deg, rgba(158, 0, 0, 0.95) 0%, rgba(158, 0, 0, 0.7) 60%, rgba(158, 0, 0, 0) 100%);
}

.np-about-cta__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    /* Figma: nội dung bắt đầu x=136, nút kết thúc ~x=1304 (container 1240 + 12px mỗi bên) */
    padding-left: 36px;
    padding-right: 36px;
}

.np-about-cta__title {
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 10px;
    line-height: 1.5;
}

.np-about-cta__desc {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #FFFFFF;
    margin: 0;
}

/* Figma 226:542: trắng, cao 48, đệm ngang 24, bo 6, gap 10, không bóng */
.np-about-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    color: #B70000;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    padding: 0 24px;
    border-radius: 6px;
    box-shadow: none;
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.np-about-cta__btn:hover {
    background-color: #FAF0F0;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.22);
}

/* ----------------------------------------------------------------------
   RESPONSIVE DESIGN FOR ABOUT PAGE
   ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .np-about-hero__bg {
        width: 70%;
        opacity: 0.35;
    }
    .np-about-hero__overlay {
        background: rgba(255, 255, 255, 0.92);
    }
    .np-about-intro__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .np-about-stats__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    .np-about-stats__item {
        border-right: none;
        border-bottom: 1px solid #E5E5E5;
        padding-bottom: 16px;
    }
    .np-about-journey__items {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    .np-about-journey__line {
        display: none;
    }
    .np-about-mv__grid {
        grid-template-columns: 1fr;
    }
    .np-about-values__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    .np-about-values__item {
        border-right: none;
    }
    .np-about-cap__row--4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .np-about-cap__row--5 {
        grid-template-columns: repeat(3, 1fr);
    }
    .np-about-network__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .np-about-network__map-wrap {
        display: none;
    }
    .np-about-certs__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .np-about-certs__list {
        grid-template-columns: repeat(2, 1fr);
    }
    .np-about-cta__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding-left: 24px;
        padding-right: 24px;
    }
    .np-about-cta__overlay {
        width: 100%;
        background: linear-gradient(90deg, rgba(158, 0, 0, 0.95) 0%, rgba(158, 0, 0, 0.8) 100%);
    }
}

@media (max-width: 640px) {
    .np-about-hero__title {
        font-size: 34px;
    }
    .np-about-hero__headline {
        font-size: 26px;
    }
    .np-about-hero__desc {
        font-size: 15px;
    }
    .np-about-intro__title {
        font-size: 26px;
    }
    .np-about-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .np-about-journey__title {
        font-size: 28px;
    }
    .np-about-journey__items {
        grid-template-columns: repeat(2, 1fr);
    }
    .np-about-values__grid {
        grid-template-columns: 1fr;
    }
    .np-about-cap__row--4,
    .np-about-cap__row--5 {
        grid-template-columns: 1fr;
    }
    .np-about-network__cards {
        grid-template-columns: 1fr;
    }
    .np-about-certs__list {
        grid-template-columns: 1fr;
    }
    .np-about-cta__title {
        font-size: 24px;
    }
}

/* ==========================================================================
   TRUNG NGUYÊN LEGEND CAFÉ (Chuẩn 100% Figma v2 - Node 228:402)
   ========================================================================== */

.np-cafe-page {
    width: 100%;
    overflow-x: hidden;
    background-color: #FFFFFF;
}

.np-cafe-page .kt-row-layout-inner {
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    width: 100%;
    box-sizing: border-box;
}

/* ----------------------------------------------------------------------
   BANNER ẢNH (thay hero cũ): ảnh đã có sẵn chữ, hiện trọn ảnh theo tỉ lệ gốc
   ---------------------------------------------------------------------- */
.np-cafe-hero-banner {
    width: 100%;
    background-color: #1E1510;
    line-height: 0;
}

.np-cafe-hero-banner .wp-block-image,
.np-cafe-hero-banner figure {
    margin: 0 !important;
}

.np-cafe-hero-banner img {
    display: block;
    cursor: default !important;
    width: 100% !important;
    height: auto !important;
    max-width: none;
}

/* ----------------------------------------------------------------------
   POPUP KHAI TRƯƠNG (template-parts/cafe/opening-popup.php)
   ---------------------------------------------------------------------- */
.np-opening-popup {
    position: fixed;
    inset: 0;
    z-index: 999998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.np-opening-popup.is-active {
    opacity: 1;
    visibility: visible;
}

.np-opening-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 8, 6, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}

.np-opening-popup-dialog {
    position: relative;
    /* ảnh popup ngang 3:2 — khung co theo chiều cao màn hình để nút luôn nằm trên ảnh */
    width: min(860px, 100%, calc((100vh - 40px) * 1.5));
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    background: #1E1510;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    transform: translateY(16px) scale(0.98);
    transition: transform 0.3s ease;
}

.np-opening-popup.is-active .np-opening-popup-dialog {
    transform: none;
}

.np-opening-popup-img-link {
    display: block;
    min-height: 0;
    line-height: 0;
}

.np-opening-popup-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 40px);
    object-fit: contain;
}

/* Ảnh + nút: nút nằm đè lên ảnh (góc chọn trong Cài đặt → Popup thông báo) */
.np-opening-popup-media {
    position: relative;
    min-height: 0;
}

.np-opening-popup-actions {
    position: absolute;
    bottom: 2%;
    z-index: 2;
    display: flex;
}

.np-opening-popup--btn-bottom-right .np-opening-popup-actions { right: 4%; }
.np-opening-popup--btn-bottom-left .np-opening-popup-actions { left: 4%; }
.np-opening-popup--btn-bottom-center .np-opening-popup-actions { left: 50%; transform: translateX(-50%); }

/* "Dưới ảnh": dải nền tối bên dưới ảnh */
.np-opening-popup--btn-below .np-opening-popup-actions {
    position: static;
    justify-content: center;
    padding: 18px 16px 20px;
    background: #1E1510;
}

.np-opening-popup-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 30px;
    border: 1.5px solid #FFFFFF;
    border-radius: 999px;
    background: rgba(30, 21, 16, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    color: #FFFFFF !important;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.np-opening-popup-btn span {
    transition: transform 0.2s ease;
}

.np-opening-popup-btn:hover span {
    transform: translateX(4px);
}

.np-opening-popup-btn:hover,
.np-opening-popup-btn:focus-visible {
    background: #FFFFFF;
    color: #1E1510 !important;
}

.np-opening-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #FFFFFF;
    cursor: pointer;
}

.np-opening-popup-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

@media (max-width: 576px) {
    .np-opening-popup { padding: 14px; }
    .np-opening-popup--btn-below .np-opening-popup-actions { padding: 14px 12px 16px; }
    .np-opening-popup-actions { bottom: 3%; }
    .np-opening-popup--btn-bottom-right .np-opening-popup-actions { right: 3%; }
    .np-opening-popup--btn-bottom-left .np-opening-popup-actions { left: 3%; }
    .np-opening-popup-btn { padding: 6px 12px; gap: 5px; font-size: 11px; border-width: 1px; }
}

@media (prefers-reduced-motion: reduce) {
    .np-opening-popup,
    .np-opening-popup-dialog { transition: none; }
}

/* ----------------------------------------------------------------------
   SECTION 1: HERO (Node 228:445)
   Text docked completely to LEFT (X = 64px-80px)
   ---------------------------------------------------------------------- */
.np-cafe-hero-sec {
    position: relative !important;
    width: 100% !important;
    min-height: 620px !important;
    display: flex !important;
    align-items: center !important;
    background-color: #1E1510 !important;
    background-image: var(--np-row-bg, url('../images/cafe/cafe-hero.jpg')) !important;
    background-position: right top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
}

/* Gradient overlay exactly matching Figma node 228:447 */
.np-cafe-hero-sec::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, 
        rgba(30, 21, 16, 0.98) 0%, 
        rgba(30, 21, 16, 0.95) 450px, 
        rgba(30, 21, 16, 0.70) 750px, 
        rgba(30, 21, 16, 0) 1000px
    ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Standard page container for Hero to match the rest of the site */
.np-cafe-hero-sec .kt-row-column-wrap {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1340px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
}

/* Inside the container: the column sits on the left */
.np-cafe-hero-col {
    max-width: 680px !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
    flex: 0 0 auto !important;
}

.np-cafe-hero-col .kt-inside-inner-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.np-cafe-badge {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-bottom: 0 !important;
}

.np-cafe-badge-svg {
    width: 280px !important;
    height: auto !important;
    max-height: 125px !important;
    display: block !important;
    margin: 0 !important;
}

.np-cafe-gold-bar {
    width: 80px !important;
    height: 1.5px !important;
    background-color: #F2C57C !important;
    margin: 16px 0 20px 0 !important;
}

.np-cafe-hero-title {
    font-family: 'Noto Serif', serif !important;
    font-size: clamp(32px, 2.8vw, 42px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
    margin: 0 0 16px 0 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}

.np-cafe-hero-title .np-gold-text {
    color: #F2C57C !important;
}

.np-cafe-hero-lead {
    font-family: 'Roboto', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 29px !important;
    color: #FFFFFF !important;
    max-width: 540px !important;
    margin: 0 0 32px 0 !important;
    text-align: left !important;
}

.np-cafe-btn-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}

/* BUTTONS */
.np-btn-red-action,
.np-btn-red-action a,
a.np-btn-red-action,
.np-btn-red-action .kt-button {
    background-color: #B70000 !important;
    color: #FFFFFF !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 22.5px !important;
    border-radius: 6px !important;
    padding: 13px 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    border: none !important;
    height: 48px !important;
    box-sizing: border-box !important;
}

.np-btn-red-action:hover,
.np-btn-red-action a:hover,
a.np-btn-red-action:hover,
.np-btn-red-action .kt-button:hover {
    background-color: #8E0000 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(183, 0, 0, 0.45) !important;
}

.np-btn-outline-white,
.np-btn-outline-white a,
a.np-btn-outline-white,
.np-btn-outline-white .kt-button {
    background-color: transparent !important;
    color: #FFFFFF !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 22.5px !important;
    border: 1px solid #FFFFFF !important;
    border-radius: 6px !important;
    padding: 13px 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    height: 48px !important;
    box-sizing: border-box !important;
}

.np-btn-outline-white:hover,
.np-btn-outline-white a:hover,
a.np-btn-outline-white:hover,
.np-btn-outline-white .kt-button:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: #FFFFFF !important;
    transform: translateY(-2px);
}

/* ----------------------------------------------------------------------
   SECTION 2: GIỚI THIỆU (Node 228:473)
   ---------------------------------------------------------------------- */
.np-cafe-intro-sec {
    background-color: #F7F3EE !important;
    padding: 70px 0 !important;
}

.np-cafe-tag-red {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #B70000 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    line-height: 19.5px !important;
    margin-bottom: 8px !important;
}

.np-cafe-h2-serif {
    font-family: 'Noto Serif', serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 46px !important;
    color: #161616 !important;
    text-transform: uppercase !important;
    margin: 0 0 8px 0 !important;
}

.np-cafe-h3-light {
    font-family: 'Roboto', sans-serif !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    line-height: 33.6px !important;
    color: #3D3D3D !important;
    margin-bottom: 16px !important;
}

.np-cafe-body-desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 25.6px !important;
    color: #3D3D3D !important;
    margin: 0 0 24px 0 !important;
}

.np-cafe-3highlights {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-top: 28px !important;
    padding-top: 20px !important;
}

.np-cafe-hl-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.np-cafe-hl-icon {
    color: #B70000 !important;
    font-size: 26px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 10px !important;
}

.np-cafe-hl-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 21px !important;
    color: #161616 !important;
    margin-bottom: 3px !important;
}

.np-cafe-hl-sub {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 19.5px !important;
    color: #6B6B6B !important;
}

.np-cafe-hl-divider {
    width: 1px !important;
    background-color: #E4E4E4 !important;
    height: 80px !important;
    align-self: center !important;
    flex-shrink: 0 !important;
}

.np-cafe-intro-card {
    position: relative !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    height: 488px !important;
    width: 100% !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.1) !important;
}

.np-cafe-intro-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.np-cafe-handwriting-script {
    position: absolute !important;
    top: 32px !important;
    right: 36px !important;
    font-family: 'Dancing Script', cursive !important;
    font-size: 42px !important;
    font-weight: 600 !important;
    line-height: 46.2px !important;
    color: #FFFFFF !important;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.75) !important;
    text-align: right !important;
    pointer-events: none !important;
}

/* ----------------------------------------------------------------------
   SECTION 3: KHÔNG GIAN (Node 228:512)
   ---------------------------------------------------------------------- */
.np-cafe-space-sec {
    background-color: #1E1510 !important;
    min-height: 430px !important;
    position: relative !important;
}

.np-cafe-tag-gold {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #F2C57C !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    line-height: 19.5px !important;
    margin-bottom: 8px !important;
}

.np-cafe-space-heading {
    font-family: 'Noto Serif', serif !important;
    font-size: 44px !important;
    font-weight: 700 !important;
    line-height: 50.6px !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
    margin: 0 0 16px 0 !important;
}

.np-cafe-space-lead {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 25.6px !important;
    color: #FFFFFF !important;
    max-width: 560px !important;
    margin: 0 0 24px 0 !important;
}

.np-cafe-overlap-row {
    background-color: #F7F3EE !important;
    padding: 0 0 30px 0 !important;
}

.np-cafe-overlap-row .kt-row-column-wrap {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-top: -80px !important;
    position: relative !important;
    z-index: 10 !important;
}

.np-cafe-gallery-item figure,
.np-cafe-gallery-item img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.18) !important;
    border: 3px solid #FFFFFF !important;
    display: block !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.np-cafe-gallery-item:hover figure,
.np-cafe-gallery-item:hover img {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 32px rgba(0,0,0,0.28) !important;
}

/* ----------------------------------------------------------------------
   SECTION 4: THỰC ĐƠN (Node 228:532)
   Title 2 lines, Left column 490px, Spaced Red Prices
   ---------------------------------------------------------------------- */
.np-cafe-menu-sec {
    background-color: #F7F3EE !important;
    padding: 40px 0 70px 0 !important;
}

.np-cafe-menu-sec > .kt-row-layout-inner {
    max-width: 1340px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

@media (min-width: 1025px) {
    .np-cafe-menu-sec .kt-row-column-wrap {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 36px !important;
    }
    .np-cafe-menu-left {
        flex: 0 0 520px !important;
        max-width: 520px !important;
        width: 520px !important;
    }
    .np-cafe-menu-right {
        flex: 1 !important;
        min-width: 0 !important;
    }
}

.np-cafe-menu-heading {
    font-family: 'Noto Serif', serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 40px !important;
    color: #161616 !important;
    text-transform: uppercase !important;
    margin: 0 0 16px 0 !important;
    letter-spacing: 0 !important;
}

.np-btn-white-border,
.np-btn-white-border a,
a.np-btn-white-border,
.np-btn-white-border .kt-button {
    background-color: #FFFFFF !important;
    color: #161616 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 22.5px !important;
    border: 1px solid #161616 !important;
    border-radius: 6px !important;
    padding: 12px 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.np-btn-white-border a:hover,
a.np-btn-white-border:hover,
.np-btn-white-border .kt-button:hover {
    background-color: #161616 !important;
    color: #FFFFFF !important;
    border-color: #161616 !important;
    transform: translateY(-2px);
}

.np-cafe-cards-flex {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
}

.np-cafe-card {
    background: #FFFFFF !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.np-cafe-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.12) !important;
}

.np-cafe-card__media {
    height: 168px !important;
    width: 100% !important;
    overflow: hidden !important;
}

.np-cafe-card__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
    display: block !important;
}

.np-cafe-card:hover .np-cafe-card__media img {
    transform: scale(1.05) !important;
}

.np-cafe-card__content {
    padding: 18px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.np-cafe-card__title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 21px !important;
    color: #161616 !important;
    text-transform: uppercase !important;
    margin-bottom: 14px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #F0F0F0 !important;
}

.np-cafe-menu-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.np-cafe-menu-list li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 19.5px !important;
    gap: 10px !important;
}

.np-cafe-item-name {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #3D3D3D !important;
    flex: 1 !important;
}

.np-cafe-item-price {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #B70000 !important;
    white-space: nowrap !important;
    text-align: right !important;
}

/* ----------------------------------------------------------------------
   SECTION 5: ĐỊA ĐIỂM (Node 228:590)
   3 Columns on 1 Row, Single-Line Title, Red FA Icons
   ---------------------------------------------------------------------- */
.np-cafe-find-sec {
    background-color: #FFFFFF !important;
    padding: 70px 0 !important;
}

.np-cafe-find-sec > .kt-row-layout-inner {
    max-width: 1340px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

@media (min-width: 1025px) {
    .np-cafe-find-sec .kt-row-column-wrap {
        display: grid !important;
        grid-template-columns: minmax(360px, 450px) minmax(340px, 420px) minmax(320px, 390px) !important;
        gap: 28px !important;
        align-items: center !important;
    }
    .np-cafe-find-sec .kt-row-column-wrap > .wp-block-kadence-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }
}

.np-cafe-find-heading {
    font-family: 'Noto Serif', serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 41px !important;
    color: #161616 !important;
    text-transform: uppercase !important;
    margin: 0 0 16px 0 !important;
    white-space: nowrap !important;
}

@media (max-width: 1100px) {
    .np-cafe-find-heading {
        white-space: normal !important;
    }
}

.np-cafe-info-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 22px 0 26px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.np-cafe-info-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.np-cafe-info-list-icon {
    width: 24px !important;
    height: 24px !important;
    color: #B70000 !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-top: 3px !important;
}

.np-cafe-info-list-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 22.5px !important;
    color: #3D3D3D !important;
}

.np-cafe-info-list-text strong {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    color: #161616 !important;
}

.np-cafe-map-card {
    width: 100% !important;
    height: 440px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #ECECEC !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    background: #FFFFFF !important;
    position: relative !important;
}

.np-cafe-map-card iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;
}

.np-cafe-building-photo,
.np-cafe-find-bldg-col .np-cafe-building-photo {
    width: 100% !important;
    height: 480px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    margin: 0 !important;
}

.np-cafe-building-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ----------------------------------------------------------------------
   SECTION 6: CTA HẸN GẶP (Node 228:623)
   Full-width red banner (260px) exactly matching Figma
   ---------------------------------------------------------------------- */
.np-cafe-cta-sec {
    position: relative !important;
    width: 100% !important;
    min-height: 260px !important;
    background-color: #B70000 !important;
    background-image: var(--np-row-bg, url('../images/cafe/cafe-cta.jpg')) !important;
    background-position: right center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Red gradient overlay exactly matching Figma node 228:625 */
.np-cafe-cta-sec::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, 
        rgba(183, 0, 0, 0.99) 0%, 
        rgba(183, 0, 0, 0.96) 550px, 
        rgba(183, 0, 0, 0.70) 800px, 
        rgba(183, 0, 0, 0.15) 1100px
    ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.np-cafe-cta-sec .kt-row-column-wrap {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1340px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 50px 24px !important;
    min-height: 260px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.np-cafe-cta-content-col {
    flex: 1 !important;
    max-width: 750px !important;
    text-align: left !important;
}

.np-cafe-cta-content-col .kt-inside-inner-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.np-cafe-cta-heading {
    font-family: 'Roboto', sans-serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #FFFFFF !important;
    text-transform: none !important;
    margin: 0 0 10px 0 !important;
    letter-spacing: 0 !important;
}

.np-cafe-cta-sub {
    font-family: 'Roboto', sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    opacity: 0.95 !important;
}

.np-cafe-cta-btn-col {
    flex: 0 0 auto !important;
}

.np-cafe-cta-btn-col .kt-inside-inner-col {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.np-cafe-cta-btn-wrap {
    display: flex !important;
    justify-content: flex-end !important;
    margin: 0 !important;
}

.np-btn-white-action,
.np-btn-white-action a,
a.np-btn-white-action,
.np-btn-white-action .kt-button {
    background-color: #FFFFFF !important;
    color: #B70000 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 22.5px !important;
    border-radius: 6px !important;
    padding: 13px 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    white-space: nowrap !important;
    height: 48px !important;
    box-sizing: border-box !important;
}

.np-btn-white-action:hover,
.np-btn-white-action a:hover,
a.np-btn-white-action:hover,
.np-btn-white-action .kt-button:hover {
    background-color: #FFF2F2 !important;
    color: #8E0000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22) !important;
}

/* ----------------------------------------------------------------------
   RESPONSIVE DESIGN (1024px & 768px)
   ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .np-cafe-hero-title {
        font-size: 36px !important;
        line-height: 42px !important;
    }
    .np-cafe-intro-sec .kt-row-column-wrap {
        flex-direction: column !important;
        gap: 40px !important;
    }
    .np-cafe-intro-card {
        height: 380px !important;
    }
    .np-cafe-overlap-row .kt-row-column-wrap {
        grid-template-columns: repeat(2, 1fr) !important;
        margin-top: -60px !important;
    }
    .np-cafe-menu-sec .kt-row-column-wrap {
        flex-direction: column !important;
        gap: 32px !important;
    }
    .np-cafe-cards-flex {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .np-cafe-find-sec .kt-row-column-wrap {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .np-cafe-map-card,
    .np-cafe-building-photo {
        height: 360px !important;
    }
}

@media (max-width: 768px) {
    .np-cafe-hero-sec > .kt-row-layout-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .np-cafe-hero-title {
        font-size: 28px !important;
        line-height: 34px !important;
    }
    .np-cafe-h2-serif {
        font-size: 28px !important;
        line-height: 34px !important;
    }
    .np-cafe-space-heading {
        font-size: 30px !important;
        line-height: 36px !important;
    }
    .np-cafe-menu-heading {
        font-size: 26px !important;
        line-height: 32px !important;
    }
    .np-cafe-find-heading {
        font-size: 26px !important;
        line-height: 32px !important;
        white-space: normal !important;
    }
    .np-cafe-cta-heading {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    .np-cafe-handwriting-script {
        font-size: 28px !important;
        line-height: 32px !important;
        top: 20px !important;
        right: 20px !important;
    }
    .np-cafe-3highlights {
        flex-direction: column !important;
        gap: 16px !important;
    }
    .np-cafe-hl-divider {
        display: none !important;
    }
    .np-cafe-cards-flex {
        grid-template-columns: 1fr !important;
    }
    .np-cafe-cta-card .kt-row-column-wrap {
        flex-direction: column !important;
        gap: 20px !important;
        text-align: center !important;
    }
}

/* ==========================================================================

/* ==========================================================================

/* ==========================================================================

/* ==========================================================================
   PAGE: KINH DOANH & SẢN PHẨM (Node 229:534 - Chuẩn 100% Figma UI v2)
   ========================================================================== */

/* Main wrapper & reset */
.np-products-page {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #FFFFFF !important;
    color: #1A1A1A !important;
    font-family: 'Roboto', sans-serif !important;
    overflow-x: hidden !important;
}

/* Ensure ALL section containers follow the exact 1340px grid */
.np-prod-hero-sec .kt-row-column-wrap,
.np-prod-groups-sec .kt-row-column-wrap,
.np-prod-brands-sec .kt-row-column-wrap,
.np-prod-catalog-sec .kt-row-column-wrap,
.np-prod-cta-sec .kt-row-column-wrap {
    position: relative !important;
    max-width: 1340px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   1. HERO SECTION (Node 229:577 - 1440x300)
   -------------------------------------------------------------------------- */
/* Chuan Figma 229:577 - hero cao dung 300px.
   Figma tach 3 lop: anh (1000x300, canh phai) + lop phu gradient do + chu viet tay.
   Anh prod-hero-v2.jpg la ban sach xuat tu Figma: KHONG nung san mau do va
   KHONG co chu viet tay (ban cu prod-hero.jpg nung ca hai, kem mot bong chu thua). */
.np-prod-hero-sec,
.np-prod-hero-sec > .kt-row-layout-inner {
    position: relative !important;
    width: 100% !important;
    min-height: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #7A0000 !important;
    background-image:
        linear-gradient(90deg, #7A0000 0%, rgba(143, 0, 0, 0.97) 42%, rgba(143, 0, 0, 0) 62%),
        var(--np-row-bg, url('../images/products/prod-hero-v2.jpg')) !important;
    background-position: left center, right center !important;
    background-size: 100% 100%, auto 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    overflow: hidden !important;
}

.np-prod-hero-sec::before {
    display: none !important;
}

/* Chu viet tay - Figma 229:580: Dancing Script 600, 29px/1.15, trang, XOAY -7 do.
   Khung sau khi xoay trong Figma: x=1090, y=164, 269x97.6 -> tam (1224.5, 212.7).
   Khung chu truoc khi xoay ~263x66.7 => right = 84px, top = 179px, xoay quanh tam.
   Neo theo mep phai (px) vi anh nen cung canh phai. */
.np-prod-hero-sec::after {
    content: "Đưa những sản phẩm tốt\A đến mọi gia đình Việt";
    white-space: pre;
    position: absolute;
    right: 84px;
    top: 179px;
    z-index: 2;
    font-family: 'Dancing Script', cursive;
    font-weight: 600;
    font-size: 29px;
    line-height: 1.15;
    color: #FFFFFF;
    text-align: left;
    transform: rotate(-7deg);
    transform-origin: center center;
    pointer-events: none;
}

.np-prod-hero-sec .kt-row-column-wrap {
    z-index: 2 !important;
    padding-top: 28px !important;
    padding-bottom: 30px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

.np-prod-hero-col {
    max-width: 620px !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.np-prod-hero-col .kt-inside-inner-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 0 !important;
}

/* Breadcrumb - Figma 229:582: Roboto 400 13px/1.5, trang, gap 8px (khong in dam muc hien tai) */
.np-prod-breadcrumb {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    color: #FFFFFF !important;
    margin-bottom: 14px !important;
}

.np-prod-breadcrumb a {
    color: #FFFFFF !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.np-prod-breadcrumb a:hover {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

.np-prod-breadcrumb span,
.np-prod-breadcrumb strong,
.np-prod-breadcrumb b {
    color: #FFFFFF !important;
    font-weight: 400 !important;
}

/* Hero Title (Roboto 700 42px/48px) */
.np-prod-hero-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: clamp(28px, 2.9vw, 42px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: #FFFFFF !important;
    margin: 0 0 14px 0 !important;
    letter-spacing: 0 !important;
}

/* Hero Description (Roboto 400 17px/26px) */
.np-prod-hero-desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #FFFFFF !important;
    max-width: 620px !important;
    margin: 0 0 14px 0 !important;
}

/* Hero Button: Outline White (272x44 in Figma) */
.np-prod-hero-btn-row {
    margin-bottom: 14px !important;
}

.np-prod-hero-btn-row .np-btn-outline-white {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 272px !important;
    height: 44px !important;
    border: 1px solid #FFFFFF !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #FFFFFF !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: all 0.25s ease !important;
}

.np-prod-hero-btn-row .np-btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* 3 highlights (Figma Node 229:597 - gap 28px, icon 30x30, text 13px/17.55px, divider 1x36) */
.np-prod-3highlights {
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
    width: 100% !important;
    max-width: 520px !important;
    padding: 8px 0 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

.np-prod-hl-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #FFFFFF !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    line-height: 17.55px !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
}

.np-prod-hl-item span {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    line-height: 17.55px !important;
    font-weight: 400 !important;
    color: #FFFFFF !important;
}

.np-prod-hl-icon {
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.np-prod-hl-icon svg {
    width: 30px !important;
    height: 30px !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.np-prod-hl-divider {
    width: 1px !important;
    height: 36px !important;
    background-color: #FFFFFF !important;
    flex-shrink: 0 !important;
}

/* --------------------------------------------------------------------------
   2. 3 NHÓM KINH DOANH (Node 229:630 - 1440x200, White background)
   -------------------------------------------------------------------------- */
.np-prod-groups-sec {
    background-color: #FFFFFF !important;
    padding: 36px 0 !important;
}

.np-prod-groups-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    align-items: stretch !important;
}

/* Card base: Equal width & height */
.np-prod-group-card {
    position: relative !important;
    min-height: 168px !important;
    height: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    border: none !important;
    box-sizing: border-box !important;
}

.np-prod-group-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* Card Background Tints */
.np-prod-group-card-1 {
    background-color: #FDEDEF !important;
}
.np-prod-group-card-2 {
    background-color: #FAF2E3 !important;
}
.np-prod-group-card-3 {
    background-color: #E9F0FA !important;
}

/* Left info content: Stretches full height, icon & title on same row */
.np-prod-group-info {
    position: relative !important;
    z-index: 3 !important;
    width: calc(100% - 150px) !important;
    padding: 18px 0 18px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: 168px !important;
    box-sizing: border-box !important;
}

/* Flex row holding icon on left, and text column on right */
.np-prod-group-body {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    height: 100% !important;
    width: 100% !important;
}

/* Fallback for top-content if cached */
.np-prod-group-top-content {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
    flex-wrap: wrap !important;
}

.np-prod-group-icon {
    font-size: 26px !important;
    color: #8F0000 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    padding-top: 2px !important;
}

/* Storefront icon in Card 3 is also #8F0000 red in Figma */
.np-prod-group-card-3 .np-prod-group-icon {
    color: #8F0000 !important;
}

.np-prod-group-text {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.np-prod-group-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 18px !important;
    line-height: 23px !important;
    font-weight: 700 !important;
    color: #8F0000 !important;
    margin: 0 !important;
}

.np-prod-group-title.np-title-dark {
    color: #14213D !important;
}

.np-prod-group-desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 12.5px !important;
    line-height: 18px !important;
    color: #3D3D3D !important;
    margin: 0 !important;
}

/* "Xem chi tiết" Link: Sits directly below description with 8px gap matching Figma */
.np-prod-group-link {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #B70000 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding-top: 2px !important;
    transition: gap 0.2s ease !important;
    white-space: nowrap !important;
}

.np-prod-group-card-3 .np-prod-group-link {
    color: #B70000 !important;
}

.np-prod-group-card:hover .np-prod-group-link {
    gap: 10px !important;
}

/* Right media image */
.np-prod-group-media {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 190px !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

.np-prod-group-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center right !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.np-prod-group-card:hover .np-prod-group-media img {
    transform: scale(1.05) !important;
}

/* Fade blend between card background and photo */
.np-prod-group-fade {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 80px !important;
    height: 100% !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.np-prod-group-card-1 .np-prod-group-fade {
    background: linear-gradient(90deg, #FDEDEF 0%, rgba(253, 237, 239, 0) 100%) !important;
}
.np-prod-group-card-2 .np-prod-group-fade {
    background: linear-gradient(90deg, #FAF2E3 0%, rgba(250, 242, 227, 0) 100%) !important;
}
.np-prod-group-card-3 .np-prod-group-fade {
    background: linear-gradient(90deg, #E9F0FA 0%, rgba(233, 240, 250, 0) 100%) !important;
}

/* --------------------------------------------------------------------------
   3. THƯƠNG HIỆU NỔI BẬT (Node 229:685 - 1440x96, White background)
   -------------------------------------------------------------------------- */
.np-prod-brands-sec {
    background-color: #FFFFFF !important;
    padding: 24px 0 !important;
    border-bottom: 1px solid #ECE7DF !important;
}

.np-prod-brands-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 36px !important;
    width: 100% !important;
}

.np-prod-brands-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 26px !important;
    line-height: 39px !important;
    font-weight: 700 !important;
    color: #171717 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.np-prod-brands-list {
    display: flex !important;
    align-items: center !important;
    gap: 36px !important;
    flex-wrap: wrap !important;
}

.np-prod-brand-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: transform 0.2s ease !important;
}

.np-prod-brand-item:hover {
    transform: scale(1.06) !important;
    border: none !important;
    box-shadow: none !important;
}

.np-prod-brand-item img {
    max-width: 140px !important;
    max-height: 48px !important;
    object-fit: contain !important;
    display: block !important;
}

.np-prod-brand-next {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid #E3E3E3 !important;
    background-color: #FFFFFF !important;
    color: #555555 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
    margin-left: 8px !important;
}

.np-prod-brand-next:hover {
    background-color: #B70000 !important;
    color: #FFFFFF !important;
    border-color: #B70000 !important;
}

/* --------------------------------------------------------------------------
   4. DANH MỤC & LƯỚI SẢN PHẨM (Node 229:704 - Background #FAFAFA)
   -------------------------------------------------------------------------- */
.np-prod-catalog-sec {
    background-color: #FAFAFA !important;
    padding: 40px 0 60px 0 !important;
}

/* Catalog Header: Title + Search */
.np-prod-catalog-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    margin-bottom: 24px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #ECE7DF !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

.np-prod-tag-red {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #B70000 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: block !important;
    margin-bottom: 4px !important;
}

.np-prod-cat-heading {
    font-family: 'Roboto', sans-serif !important;
    font-size: 26px !important;
    line-height: 39px !important;
    font-weight: 600 !important;
    color: #171717 !important;
    margin: 0 !important;
}

/* Search Box: 284x40, Red Submit Button */
.np-prod-search-box {
    display: flex !important;
    width: 284px !important;
    max-width: 100% !important;
    height: 40px !important;
}

.np-prod-search-box input {
    width: 244px !important;
    height: 40px !important;
    border: 1px solid #E3E3E3 !important;
    border-right: none !important;
    border-radius: 4px 0 0 4px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-family: 'Roboto', sans-serif !important;
    outline: none !important;
    background-color: #FFFFFF !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.np-prod-search-box input:focus {
    border-color: #B70000 !important;
}

.np-prod-search-box button {
    width: 40px !important;
    height: 40px !important;
    border: none !important;
    background: #B70000 !important;
    color: #FFFFFF !important;
    border-radius: 0 4px 4px 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    transition: background 0.2s ease !important;
    flex-shrink: 0 !important;
}

.np-prod-search-box button:hover {
    background: #8F0000 !important;
}

/* 2-Column Layout */
.np-prod-catalog-wrap {
    display: grid !important;
    grid-template-columns: 212px 1fr !important;
    gap: 32px !important;
    align-items: flex-start !important;
}

/* Sidebar (Node 229:720 - White box, radius 8px) */
.np-prod-sidebar {
    background-color: #FFFFFF !important;
    border: 1px solid #ECE7DF !important;
    border-radius: 8px !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

.np-prod-filter-group {
    border-top: 1px solid #ECE7DF !important;
    padding-top: 12px !important;
    margin-top: 12px !important;
}

.np-prod-filter-group:first-child {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.np-prod-filter-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #171717 !important;
    cursor: pointer !important;
    padding: 6px 0 !important;
    user-select: none !important;
    transition: color 0.2s ease !important;
}

.np-prod-filter-head:hover {
    color: #B70000 !important;
}

.np-prod-filter-head i {
    font-size: 12px !important;
    color: #777777 !important;
    transition: transform 0.25s ease, color 0.2s ease !important;
    transform: rotate(-90deg) !important;
}

.np-prod-filter-group.active .np-prod-filter-head i {
    transform: rotate(0deg) !important;
    color: #B70000 !important;
}

.np-prod-filter-body {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, visibility 0.3s !important;
}

.np-prod-filter-group.active .np-prod-filter-body {
    max-height: 900px !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    visibility: visible !important;
    padding-top: 8px !important;
}

.np-prod-cat-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.np-prod-cat-list li {
    margin-bottom: 0 !important;
}

.np-prod-cat-item {
    display: block !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: #3D3D3D !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    margin-bottom: 2px !important;
}

.np-prod-cat-item:hover {
    color: #B70000 !important;
    background-color: #FFF5F5 !important;
}

.np-prod-cat-item.active {
    background-color: #B70000 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

/* More / Less Toggle Button */
.np-filter-more-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin-top: 8px !important;
    padding: 6px 10px !important;
    background-color: #F8F8F8 !important;
    border: 1px dashed #DCDCDC !important;
    border-radius: 4px !important;
    color: #666666 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.np-filter-more-btn:hover {
    background-color: #FFF5F5 !important;
    border-color: #B70000 !important;
    color: #B70000 !important;
}

.np-filter-more-btn i {
    font-size: 10px !important;
    transition: transform 0.2s ease !important;
}

.np-filter-more-btn.expanded i {
    transform: rotate(180deg) !important;
}

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

/* Results Top Bar */
.np-prod-results-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #ECE7DF !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.np-prod-count-text {
    font-size: 13px !important;
    color: #3D3D3D !important;
}

.np-prod-sort-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #3D3D3D !important;
}

.np-prod-sort-select {
    border: 1px solid #E3E3E3 !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-family: 'Roboto', sans-serif !important;
    background-color: #FFFFFF !important;
    color: #171717 !important;
    outline: none !important;
    cursor: pointer !important;
}

/* 6-Column Grid (Node 229:764) */
.np-prod-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
}

/* Product Card (Node 229:765 - 160x206, padding 10px) */
.np-prod-card {
    background-color: #FFFFFF !important;
    border: 1px solid #ECE7DF !important;
    border-radius: 8px !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.np-prod-card:hover {
    border-color: #B70000 !important;
    box-shadow: 0 6px 18px rgba(183, 0, 0, 0.09) !important;
    transform: translateY(-2px) !important;
}

/* Full image container 140x92 */
.np-prod-card-thumb {
    width: 100% !important;
    height: 92px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 6px !important;
    background: #FFFFFF !important;
    padding: 2px !important;
    box-sizing: border-box !important;
}

.np-prod-card-thumb img {
    max-width: 100% !important;
    max-height: 88px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

.np-prod-card:hover .np-prod-card-thumb img {
    transform: scale(1.05) !important;
}

.np-prod-card-brand {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #B70000 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 2px 0 2px 0 !important;
}

.np-prod-card-name {
    font-family: 'Roboto', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    color: #171717 !important;
    margin: 0 0 8px 0 !important;
    min-height: 32px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Red solid button for product card (Figma Node 229:770: 140x30, fill #B70000, white text) */
.np-prod-card-btn {
    width: 100% !important;
    height: 30px !important;
    background-color: #B70000 !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin-top: auto !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    border: none !important;
}

.np-prod-card-btn:hover {
    background-color: #8F0000 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
}

/* Pagination Container */
.np-prod-pagination-wrap {
    width: 100% !important;
}

.np-prod-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 36px !important;
    padding-top: 20px !important;
    border-top: 1px solid #ECE7DF !important;
}

.np-prod-page-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    border: 1px solid #E3E3E3 !important;
    background-color: #FFFFFF !important;
    color: #3D3D3D !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.np-prod-page-btn:hover {
    border-color: #B70000 !important;
    color: #B70000 !important;
    background-color: #FFF5F5 !important;
}

.np-prod-page-btn.active {
    background-color: #B70000 !important;
    border-color: #B70000 !important;
    color: #FFFFFF !important;
    cursor: default !important;
}

.np-prod-page-btn.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Brand, Price & Channel Filter Lists in Sidebar */
.np-prod-brand-filter-list,
.np-prod-filter-radio-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.np-prod-brand-filter-list li,
.np-prod-filter-radio-list li {
    margin-bottom: 4px !important;
}

.np-brand-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #3D3D3D !important;
    cursor: pointer !important;
    user-select: none !important;
    padding: 5px 6px !important;
    border-radius: 4px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.np-brand-checkbox:hover {
    background-color: #FFF5F5 !important;
    color: #B70000 !important;
}

.np-brand-checkbox input {
    accent-color: #B70000 !important;
    cursor: pointer !important;
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.np-brand-count {
    color: #888888 !important;
    font-size: 11px !important;
    margin-left: auto !important;
}

/* AJAX Loading State */
.np-prod-catalog-main.loading {
    opacity: 0.5 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease !important;
}

.np-prod-no-results {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding: 40px 20px !important;
    font-size: 15px !important;
    color: #777777 !important;
}

/* --------------------------------------------------------------------------
   5. CTA TƯ VẤN (Node 229:897 - 1440x168, Full Width Background Cover)
   -------------------------------------------------------------------------- */
.np-prod-cta-sec,
.np-prod-cta-sec > .kt-row-layout-inner {
    position: relative !important;
    width: 100% !important;
    min-height: 168px !important;
    /* Figma 229:897: nền #8F0000 + ảnh thật 1000x168 canh phải (= 69.44% chiều rộng, object-cover)
       + lớp phủ đỏ toàn khung #7A0000 -> .95 @40% -> trong suốt @62%.
       Ảnh prod-cta.jpg cũ nung sẵn lớp đỏ và bị đường cắt cứng giữa khung nên không dùng nữa;
       ảnh gốc trong Figma chính là about/about-journey.jpg. */
    background-color: #8F0000 !important;
    background-image:
        linear-gradient(90deg, #7A0000 0%, rgba(143, 0, 0, 0.95) 40%, rgba(143, 0, 0, 0) 62%),
        var(--np-row-bg, url('../images/about/about-journey.jpg')) !important;
    background-position: left top, right center !important;
    background-size: 100% 100%, 69.44% auto !important;
    background-repeat: no-repeat, no-repeat !important;
    overflow: hidden !important;
}

/* Lớp phủ đã vẽ bằng background nhiều lớp ở trên */
.np-prod-cta-sec::before {
    display: none !important;
}

.np-prod-cta-sec .kt-row-column-wrap {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1340px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Figma: nội dung cách đỉnh 28px trong khung cao 168px */
    padding-top: 28px !important;
    padding-bottom: 9px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.np-prod-cta-col {
    max-width: 660px !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
}

.np-prod-cta-content-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.np-prod-cta-heading {
    font-family: 'Roboto', sans-serif !important;
    font-size: 26px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0 0 8px 0 !important;
}

/* Figma 229:902: 16px/1.5; gap 8 + CTA pt 8 = 16 */
.np-prod-cta-sub {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    color: #FFFFFF !important;
    margin: 0 0 16px 0 !important;
}

.np-prod-cta-btn-wrap .np-btn-white-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    height: 44px !important;
    padding: 0 24px !important;
    background-color: #FFFFFF !important;
    color: #B70000 !important;
    border-radius: 6px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

.np-prod-cta-btn-wrap .np-btn-white-action:hover {
    background-color: #F8F8F8 !important;
    color: #8F0000 !important;
    transform: translateY(-2px) !important;
}

/* Hide WooCommerce auto-injected archive in custom products template */
.np-products-page > .woocommerce,
.np-products-page .woocommerce.columns-4,
.np-products-page .woocommerce-ordering,
.np-products-page .woocommerce-result-count,
.np-products-page ul.products.columns-4 {
    display: none !important;
}

/* --------------------------------------------------------------------------
   RESPONSIVE (Tablet & Mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .np-prod-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 992px) {
    .np-prod-hero-sec .np-prod-hero-script {
        display: none !important;
    }
    .np-prod-hero-sec::after {
        display: none !important;
    }
    .np-prod-groups-grid {
        grid-template-columns: 1fr !important;
    }
    .np-prod-catalog-wrap {
        grid-template-columns: 1fr !important;
    }
    .np-prod-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .np-prod-hero-title {
        font-size: 26px !important;
    }
    .np-prod-3highlights {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .np-prod-hl-divider {
        display: none !important;
    }
    .np-prod-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .np-prod-brands-wrap {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .np-prod-brands-list {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}

/* ==========================================================================
   CHI TIẾT SẢN PHẨM (SINGLE PRODUCT) - CHUẨN 100% FIGMA & ALBUM ẢNH CHUYÊN NGHIỆP
   ========================================================================== */
.np-sp-container {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* 1. Breadcrumbs (Figma: 1440x57, bg #F6F6F6, Inter 500 12px #6B6B6B) */
.np-sp-breadcrumb-sec {
    background-color: #F6F6F6 !important;
    border-bottom: 1px solid #ECECEC !important;
    padding: 18px 0 !important;
    min-height: 57px !important;
    box-sizing: border-box !important;
}

.np-sp-breadcrumb {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #6B6B6B !important;
    line-height: 17px !important;
}

.np-sp-breadcrumb a {
    color: #6B6B6B !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.np-sp-breadcrumb a:hover {
    color: #B70000 !important;
}

.np-sp-bc-sep {
    color: #A3A3A3 !important;
    font-size: 13px !important;
    margin: 0 2px !important;
}

.np-sp-bc-current {
    color: #161616 !important;
    font-weight: 500 !important;
}

/* 2. Main Product Section (Figma: 1440x826, 2 Cột 612px x 612px, Gap 56px) */
.np-sp-main-sec {
    background-color: #FFFFFF !important;
    padding: 56px 0 72px 0 !important;
}

.np-sp-grid {
    display: grid !important;
    grid-template-columns: 612px 612px !important;
    gap: 56px !important;
    align-items: flex-start !important;
}

/* Cột trái: Thư viện ảnh (Figma: 612x562px) */
.np-sp-gallery-col {
    width: 612px !important;
    max-width: 100% !important;
}

.np-sp-stage-card {
    position: relative !important;
    width: 612px !important;
    height: 460px !important;
    background: #FFFFFF !important;
    border: 1px solid #E4E4E4 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    transition: box-shadow 0.25s ease !important;
}

.np-sp-stage-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06) !important;
}

.np-sp-badge-top-left {
    position: absolute !important;
    top: 18px !important;
    left: 18px !important;
    z-index: 5 !important;
}

.np-sp-pill-genuine {
    background: #B70000 !important;
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 2px 8px rgba(183, 0, 0, 0.25) !important;
}

.np-sp-badge-top-right {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 5 !important;
}

.np-sp-photo-counter {
    background: rgba(22, 22, 22, 0.75) !important;
    backdrop-filter: blur(4px) !important;
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.np-sp-main-photo-wrap {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px !important;
    box-sizing: border-box !important;
    cursor: zoom-in !important;
}

.np-sp-main-img {
    max-width: 100% !important;
    max-height: 400px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: opacity 0.16s ease, transform 0.2s ease !important;
}

.np-sp-stage-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #E4E4E4 !important;
    color: #161616 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 5 !important;
    opacity: 0.8 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

.np-sp-stage-nav:hover {
    background: #B70000 !important;
    color: #FFFFFF !important;
    border-color: #B70000 !important;
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.08) !important;
}

.np-sp-stage-nav.prev {
    left: 16px !important;
}

.np-sp-stage-nav.next {
    right: 16px !important;
}

.np-sp-zoom-trigger {
    position: absolute !important;
    bottom: 16px !important;
    right: 16px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid #E4E4E4 !important;
    border-radius: 20px !important;
    padding: 6px 14px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #333333 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    z-index: 5 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.np-sp-zoom-trigger:hover {
    background: #161616 !important;
    color: #FFFFFF !important;
    border-color: #161616 !important;
}

/* Album Thumbnails: đúng chuẩn Figma 612x90px (4 ảnh 144x90px) */
.np-sp-thumbs-wrap {
    width: 612px !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, 144px) !important;
    gap: 12px !important;
    margin-top: 16px !important;
    box-sizing: border-box !important;
}

.np-sp-thumb-item {
    position: relative !important;
    width: 144px !important;
    height: 90px !important;
    background: #FFFFFF !important;
    border: 1px solid #E4E4E4 !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    transition: all 0.22s ease !important;
    overflow: hidden !important;
}

.np-sp-thumb-item:hover {
    border-color: #B70000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.np-sp-thumb-item.is-active {
    border: 2px solid #B70000 !important;
    background: #FFF5F5 !important;
    box-shadow: 0 4px 14px rgba(183, 0, 0, 0.18) !important;
    transform: translateY(-2px) !important;
}

.np-sp-thumb-item img {
    max-width: 100% !important;
    max-height: 56px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: transform 0.2s ease !important;
}

.np-sp-thumb-item:hover img {
    transform: scale(1.06) !important;
}

.np-sp-thumb-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    color: #888888 !important;
    margin-top: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    line-height: 12px !important;
}

.np-sp-thumb-item.is-active .np-sp-thumb-label {
    color: #B70000 !important;
    font-weight: 600 !important;
}

/* Trust Features Bar */
.np-sp-trust-features {
    width: 612px !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    margin-top: 24px !important;
    padding: 16px 18px !important;
    background: #F8F9FA !important;
    border: 1px solid #ECE7DF !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}

.np-sp-trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.np-sp-trust-item i {
    font-size: 20px !important;
    color: #B70000 !important;
    flex-shrink: 0 !important;
}

.np-sp-trust-item div {
    display: flex !important;
    flex-direction: column !important;
}

.np-sp-trust-item strong {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #161616 !important;
    line-height: 1.3 !important;
}

.np-sp-trust-item span {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    color: #6B6B6B !important;
    line-height: 1.3 !important;
}

/* Cột phải: Thông tin chi tiết (Figma: 612x682px) */
.np-sp-info-col {
    width: 612px !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.np-sp-tag-badge {
    display: inline-block !important;
    align-self: flex-start !important;
    background-color: #F7F2F2 !important;
    color: #B70000 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 16px !important;
    padding: 4px 12px !important;
    border-radius: 3px !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
}

.np-sp-product-title {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 38px !important;
    line-height: 48px !important;
    font-weight: 700 !important;
    color: #161616 !important;
    margin: 0 0 16px 0 !important;
    letter-spacing: -0.5px !important;
}

.np-sp-short-desc {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 26px !important;
    color: #6B6B6B !important;
    margin-bottom: 24px !important;
}

.np-sp-short-desc p {
    margin: 0 !important;
}

/* Bảng Thông số: Figma 612x296px, 6 dòng sọc zebra #F6F6F6 / #FFFFFF */
.np-sp-specs-box {
    width: 612px !important;
    max-width: 100% !important;
    background: #FFFFFF !important;
    border: 1px solid #E4E4E4 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
    box-sizing: border-box !important;
}

.np-sp-spec-row {
    display: flex !important;
    align-items: center !important;
    min-height: 49px !important;
    padding: 12px 20px !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid #EFEFEF !important;
    box-sizing: border-box !important;
}

.np-sp-spec-row:last-child {
    border-bottom: none !important;
}

.np-sp-spec-row.zebra {
    background-color: #F6F6F6 !important;
}

.np-sp-spec-label {
    width: 200px !important;
    flex-shrink: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #6B6B6B !important;
    line-height: 21px !important;
}

.np-sp-spec-val {
    flex: 1 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #161616 !important;
    font-weight: 500 !important;
    line-height: 21px !important;
}

/* Nút Thao tác: 2 nút ngang nhau đúng chuẩn Figma */
.np-sp-actions-row {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    width: 612px !important;
    max-width: 100% !important;
}

.np-sp-btn-shopee {
    flex: 1 !important;
    height: 48px !important;
    background: #B70000 !important;
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(183, 0, 0, 0.22) !important;
    transition: all 0.2s ease !important;
}

.np-sp-btn-shopee:hover {
    background: #900000 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(183, 0, 0, 0.3) !important;
}

.np-sp-btn-wholesale {
    flex: 1 !important;
    height: 48px !important;
    background: #FFFFFF !important;
    color: #161616 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    border: 1px solid #161616 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.np-sp-btn-wholesale:hover {
    background: #161616 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

/* Khung Ghi chú Báo giá sỉ */
.np-sp-callout-note {
    width: 612px !important;
    max-width: 100% !important;
    background-color: #F7F2F2 !important;
    border: 1px solid rgba(183, 0, 0, 0.12) !important;
    border-radius: 8px !important;
    padding: 14px 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 21px !important;
    color: #B70000 !important;
    box-sizing: border-box !important;
}

.np-sp-callout-note a {
    color: #B70000 !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

/* 3. Tabs Chi tiết sản phẩm (Figma: 1440x358, bg #F6F6F6, Tab 1280x52) */
.np-sp-tabs-sec {
    background-color: #F6F6F6 !important;
    padding: 56px 0 !important;
    border-top: 1px solid #ECECEC !important;
    border-bottom: 1px solid #ECECEC !important;
}

.np-sp-tabs-wrapper {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

.np-sp-tab-nav {
    display: flex !important;
    gap: 4px !important;
    overflow-x: auto !important;
    margin-bottom: -1px !important;
}

.np-sp-tab-btn {
    padding: 14px 28px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #6B6B6B !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

.np-sp-tab-btn:hover {
    color: #B70000 !important;
}

.np-sp-tab-btn.is-active {
    background-color: #FFFFFF !important;
    color: #B70000 !important;
    border-bottom: 3px solid #B70000 !important;
    font-weight: 600 !important;
    border-radius: 8px 8px 0 0 !important;
}

.np-sp-tabs-card {
    background: #FFFFFF !important;
    border: 1px solid #E4E4E4 !important;
    border-radius: 0 10px 10px 10px !important;
    padding: 40px !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}

.np-sp-tab-pane {
    display: none;
    animation: npFadeIn 0.25s ease forwards;
}

.np-sp-tab-pane.is-active {
    display: block;
}

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

.np-sp-content-body h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #161616 !important;
    margin: 0 0 18px 0 !important;
}

.np-sp-content-body h4 {
    font-family: 'Inter', sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #161616 !important;
    margin: 24px 0 14px 0 !important;
}

.np-sp-content-body p {
    font-family: 'Inter', sans-serif !important;
    font-size: 15.5px !important;
    line-height: 26px !important;
    color: #3D3D3D !important;
    margin-bottom: 18px !important;
}

.np-sp-spec-highlights {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin: 24px 0 !important;
}

.np-sp-hl-card {
    background: #F8F9FA !important;
    border: 1px solid #EBEBEB !important;
    border-radius: 8px !important;
    padding: 18px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
}

.np-sp-hl-icon {
    font-size: 24px !important;
    color: #B70000 !important;
    margin-top: 2px !important;
}

.np-sp-hl-info strong {
    display: block !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #161616 !important;
    margin-bottom: 4px !important;
}

.np-sp-hl-info span {
    font-size: 13px !important;
    line-height: 19px !important;
    color: #666666 !important;
}

.np-sp-check-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
}

.np-sp-check-list li {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    line-height: 24px !important;
    color: #3D3D3D !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.np-sp-check-list li i {
    color: #B70000 !important;
    margin-top: 4px !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

.np-sp-policy-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin-top: 20px !important;
}

.np-sp-policy-card {
    background-color: #FAFAFA !important;
    border: 1px solid #ECE7DF !important;
    border-radius: 8px !important;
    padding: 20px !important;
}

.np-sp-policy-icon {
    font-size: 24px !important;
    color: #B70000 !important;
    margin-bottom: 12px !important;
}

.np-sp-policy-card h4 {
    margin: 0 0 8px 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.np-sp-policy-card p {
    margin: 0 !important;
    font-size: 13.5px !important;
    line-height: 20px !important;
    color: #666666 !important;
}

.np-sp-faq-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.np-sp-faq-item {
    background: #FAFAFA !important;
    border-left: 3px solid #B70000 !important;
    padding: 16px 20px !important;
    border-radius: 0 8px 8px 0 !important;
}

.np-sp-faq-item h4 {
    margin: 0 0 6px 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #171717 !important;
}

.np-sp-faq-item p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 22px !important;
    color: #555555 !important;
}

/* 4. Sản phẩm liên quan (Figma: 1440x497, 4 cards 305x285) */
.np-sp-related-sec {
    background-color: #FFFFFF !important;
    padding: 64px 0 80px 0 !important;
}

.np-sp-related-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 32px !important;
}

.np-sp-related-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 28px !important;
    line-height: 36px !important;
    font-weight: 600 !important;
    color: #161616 !important;
    margin: 0 !important;
}

.np-sp-see-all {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
    color: #B70000 !important;
    text-decoration: none !important;
    transition: transform 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
}

.np-sp-see-all:hover {
    transform: translateX(4px) !important;
}

.np-sp-related-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 305px) !important;
    gap: 20px !important;
    justify-content: space-between !important;
}

.np-sp-related-card {
    width: 305px !important;
    height: 285px !important;
    background: #FFFFFF !important;
    border: 1px solid #E4E4E4 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
}

.np-sp-related-card:hover {
    border-color: #B70000 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

.np-sp-rc-thumb {
    width: 303px !important;
    height: 200px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
}

.np-sp-rc-thumb img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: transform 0.25s ease !important;
}

.np-sp-related-card:hover .np-sp-rc-thumb img {
    transform: scale(1.06) !important;
}

.np-sp-rc-body {
    height: 83px !important;
    padding: 12px 18px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.np-sp-rc-tag {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    line-height: 17px !important;
    font-weight: 500 !important;
    color: #B70000 !important;
    margin-bottom: 2px !important;
}

.np-sp-rc-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    color: #161616 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 5. Lightbox Modal */
.np-sp-lightbox {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
}

.np-sp-lightbox.is-open {
    display: flex !important;
}

.np-sp-lightbox-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(10, 10, 10, 0.88) !important;
    backdrop-filter: blur(6px) !important;
}

.np-sp-lightbox-dialog {
    position: relative !important;
    z-index: 2 !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.np-sp-lightbox-close {
    position: absolute !important;
    top: -50px !important;
    right: 0 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-size: 20px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease !important;
}

.np-sp-lightbox-close:hover {
    background: #B70000 !important;
}

.np-sp-lightbox-content {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
}

.np-sp-lightbox-nav {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-size: 18px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.np-sp-lightbox-nav:hover {
    background: #B70000 !important;
    transform: scale(1.1) !important;
}

.np-sp-lightbox-img-box {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    padding: 24px !important;
    max-width: 760px !important;
    max-height: 75vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.np-sp-lightbox-img-box img {
    max-width: 100% !important;
    max-height: 60vh !important;
    object-fit: contain !important;
}

.np-sp-lightbox-caption {
    margin-top: 14px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333333 !important;
}

/* 6. Modal Báo giá */
.np-sp-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.np-sp-modal.is-open {
    display: flex !important;
}

.np-sp-modal-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
}

.np-sp-modal-dialog {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 520px !important;
    background: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    animation: npModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes npModalPop {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.np-sp-modal-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #EEEEEE !important;
    color: #555555 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 16px !important;
    transition: background 0.2s ease !important;
}

.np-sp-modal-close:hover {
    background: #B70000 !important;
    color: #FFFFFF !important;
}

.np-sp-modal-head h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #171717 !important;
    margin: 8px 0 8px 0 !important;
}

.np-sp-modal-head p {
    font-size: 13.5px !important;
    line-height: 20px !important;
    color: #666666 !important;
    margin: 0 0 20px 0 !important;
}

.np-sp-modal-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.np-form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.np-form-group label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333333 !important;
}

.np-form-group input,
.np-form-group textarea {
    border: 1px solid #D5D5D5 !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #171717 !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
}

.np-form-group input:focus,
.np-form-group textarea:focus {
    border-color: #B70000 !important;
}

.np-btn-modal-submit {
    height: 48px !important;
    background: linear-gradient(135deg, #B70000 0%, #8F0000 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 10px !important;
    box-shadow: 0 4px 14px rgba(183, 0, 0, 0.25) !important;
    transition: all 0.2s ease !important;
}

.np-btn-modal-submit:hover {
    background: linear-gradient(135deg, #8F0000 0%, #6E0000 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(183, 0, 0, 0.35) !important;
}

/* Responsive Single Product */
@media (max-width: 1280px) {
    .np-sp-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 36px !important;
    }
    .np-sp-stage-card,
    .np-sp-thumbs-wrap,
    .np-sp-specs-box,
    .np-sp-actions-row,
    .np-sp-callout-note,
    .np-sp-trust-features,
    .np-sp-gallery-col,
    .np-sp-info-col {
        width: 100% !important;
    }
    .np-sp-thumbs-wrap {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .np-sp-thumb-item {
        width: 100% !important;
    }
    .np-sp-related-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .np-sp-related-card,
    .np-sp-rc-thumb {
        width: 100% !important;
    }
}

@media (max-width: 992px) {
    .np-sp-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    .np-sp-related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .np-sp-policy-grid,
    .np-sp-spec-highlights {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .np-sp-product-title {
        font-size: 26px !important;
        line-height: 34px !important;
    }
    .np-sp-stage-card {
        height: 340px !important;
    }
    .np-sp-actions-row {
        flex-direction: column !important;
    }
    .np-sp-specs-box .np-sp-spec-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    .np-sp-spec-label {
        width: 100% !important;
    }
    .np-sp-trust-features {
        grid-template-columns: 1fr !important;
    }
    .np-sp-related-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   TRANG HỢP TÁC (COOPERATION PAGE) - CHUẨN 100% FIGMA UI v2 (NODE 230:728)
   ========================================================================== */

/* 1. Hero Section */
.np-coop-hero {
    position: relative !important;
    width: 100% !important;
    min-height: 636px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

.np-coop-hero-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, rgba(15, 15, 15, 0.94) 0%, rgba(15, 15, 15, 0.86) 42%, rgba(15, 15, 15, 0.2) 100%) !important;
    z-index: 1 !important;
}

.np-coop-hero-container {
    position: relative !important;
    z-index: 2 !important;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

.np-coop-hero-content {
    max-width: 600px !important;
}

.np-coop-hero-eyebrow {
    display: inline-block !important;
    font-family: 'Roboto', 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #F2C57C !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 14px !important;
}

.np-coop-hero-title {
    font-family: 'Noto Serif', serif !important;
    font-size: 50px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 0 20px 0 !important;
}

.np-coop-hero-title .highlight {
    color: #F2C57C !important;
}

.np-coop-hero-sub {
    font-family: 'Roboto', 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 26px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    max-width: 480px !important;
    margin: 0 0 28px 0 !important;
}

.np-btn-coop-hero {
    background: #B70000 !important;
    color: #FFFFFF !important;
    padding: 14px 30px !important;
    border-radius: 6px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 4px 14px rgba(183, 0, 0, 0.35) !important;
    transition: all 0.2s ease !important;
}

.np-btn-coop-hero:hover {
    background: #900000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(183, 0, 0, 0.45) !important;
    color: #FFFFFF !important;
}

/* 2. 5 Trụ cột Hợp tác (Figma Node 230:789 - 1440x124, 5 cột dọc chuẩn pixel) */
.np-coop-pillars-sec {
    position: relative !important;
    width: 100% !important;
    background-color: #FFFFFF !important;
    border-top: 1px solid #ECECEC !important;
    border-bottom: 1px solid #E4E4E4 !important;
    padding: 19px 0 !important;
    margin: 0 !important;
    z-index: 5 !important;
    box-sizing: border-box !important;
}

.np-coop-pillars-container {
    max-width: 1254px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

.np-coop-pillar-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    max-width: 250px !important;
    gap: 8px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.np-coop-pillar-icon {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 auto !important;
}

.np-coop-pillar-icon svg {
    width: 40px !important;
    height: 40px !important;
    display: block !important;
}

.np-coop-pillar-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 1px !important;
}

.np-coop-pillar-text span {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 19px !important;
    color: #161616 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.np-coop-pillar-divider {
    width: 1px !important;
    height: 84px !important;
    background-color: #E4E4E4 !important;
    flex-shrink: 0 !important;
    margin: 0 4px !important;
}

@media (max-width: 991px) {
    .np-coop-pillars-container {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 24px 16px !important;
    }
    .np-coop-pillar-divider {
        display: none !important;
    }
    .np-coop-pillar-item {
        flex: 0 0 calc(33.333% - 16px) !important;
        max-width: calc(33.333% - 16px) !important;
    }
    .np-coop-pillar-text span {
        white-space: normal !important;
        font-size: 13px !important;
    }
}

@media (max-width: 600px) {
    .np-coop-pillar-item {
        flex: 0 0 calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
    }
}

/* 3. Ba Hướng Hợp tác (Figma: 1440x600, 3 cards 400x452px) */
.np-coop-directions-sec {
    padding: 72px 0 80px 0 !important;
    background: #FFFFFF !important;
}

.np-coop-sec-head {
    margin-bottom: 36px !important;
}

.np-coop-tag {
    display: inline-block !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #B70000 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin-bottom: 8px !important;
}

.np-coop-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 32px !important;
    line-height: 48px!important;
    font-weight: 600!important;
    color: #161616 !important;
    margin: 0 !important;
}

.np-coop-directions-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}

.np-coop-dir-card {
    background: #FFFFFF !important;
    border: 1px solid #E8E8E8 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03) !important;
}

.np-coop-dir-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
    border-color: #B70000 !important;
}

.np-coop-dir-thumb {
    width: 100% !important;
    height: 160px !important;
    overflow: hidden !important;
    background: #EEE !important;
}

.np-coop-dir-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.35s ease !important;
}

.np-coop-dir-card:hover .np-coop-dir-thumb img {
    transform: scale(1.06) !important;
}

.np-coop-dir-body {
    padding: 24px 24px 28px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.np-coop-dir-num {
    font-family: 'Roboto', sans-serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    color: #B70000 !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
}

.np-coop-dir-heading {
    font-family: 'Roboto', sans-serif !important;
    font-size: 19px !important;
    line-height: 26px !important;
    font-weight: 600!important;
    color: #161616 !important;
    margin: 0 0 12px 0 !important;
}

.np-coop-dir-desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    line-height: 22px !important;
    color: #4A4A4A !important;
    margin: 0 0 18px 0 !important;
    min-height: 66px !important;
}

.np-coop-check-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.np-coop-check-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    line-height: 19px !important;
    color: #3D3D3D !important;
}

.np-coop-check-list li i {
    color: #B70000 !important;
    margin-top: 3px !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
}

.np-coop-dir-link {
    margin-top: auto !important;
    padding-top: 16px !important;
    border-top: 1px dashed #E5E5E5 !important;
    color: #B70000 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: gap 0.2s ease !important;
}

.np-coop-dir-link:hover {
    gap: 12px !important;
    color: #900000 !important;
}

/* 4. Đối tác chúng tôi tìm kiếm (Figma: 1440x190, Nền tối + 5 thẻ trắng) */
.np-coop-partners-sec {
    position: relative !important;
    width: 100% !important;
    min-height: 220px !important;
    background-size: cover !important;
    background-position: center !important;
    padding: 48px 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.np-coop-partners-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(22, 16, 12, 0.94) !important;
}

.np-coop-partners-container {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 40px !important;
}

.np-coop-partners-left {
    width: 280px !important;
    flex-shrink: 0 !important;
}

.np-coop-partners-heading {
    font-family: 'Roboto', sans-serif !important;
    font-size: 30px !important;
    line-height: 40px !important;
    font-weight: 600!important;
    color: #FFFFFF !important;
    margin: 0 !important;
}

.np-coop-partners-right {
    flex: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 14px !important;
}

.np-coop-seek-card {
    background: #FFFFFF !important;
    border-radius: 8px !important;
    padding: 18px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
    height: 154px !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.np-coop-seek-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

.np-coop-seek-icon {
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 10px auto !important;
}

.np-coop-seek-icon svg {
    width: 34px !important;
    height: 34px !important;
    display: block !important;
}

.np-coop-seek-name {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #161616 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
}

.np-coop-seek-desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 12.5px !important;
    line-height: 18px !important;
    color: #6B6B6B !important;
    margin: 0 !important;
}

/* 5. Quy trình 4 bước (Figma: 1440x300, Racking warehouse background) */
.np-coop-steps-sec {
    position: relative !important;
    width: 100% !important;
    background-color: #F4F4F4 !important;
    padding: 64px 0 !important;
    overflow: hidden !important;
}

.np-coop-steps-bg {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 48% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: right center !important;
    opacity: 0.9 !important;
}

.np-coop-steps-bg::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, #F4F4F4 0%, rgba(244, 244, 244, 0.88) 35%, rgba(244, 244, 244, 0) 100%) !important;
}

.np-coop-steps-container {
    position: relative !important;
    z-index: 2 !important;
}

.np-coop-steps-head {
    margin-bottom: 32px !important;
}

.np-coop-steps-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.np-coop-step-card {
    flex: 1 !important;
    background: #FFFFFF !important;
    border-radius: 8px !important;
    padding: 22px 18px !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    min-height: 170px !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #EAEAEA !important;
}

.np-coop-step-badge-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}

.np-coop-step-badge {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    color: #FFFFFF !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.np-coop-step-badge.red {
    background: #B70000 !important;
}

.np-coop-step-badge.gold {
    background: #C59B4B !important;
}

.np-coop-step-icon {
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.np-coop-step-icon svg {
    width: 30px !important;
    height: 30px !important;
    display: block !important;
}

.np-coop-step-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #161616 !important;
    margin: 0 0 6px 0 !important;
}

.np-coop-step-desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 12.5px !important;
    line-height: 18px !important;
    color: #6B6B6B !important;
    margin: 0 !important;
}

.np-coop-step-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.np-coop-step-arrow svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}

/* 6. Gửi đề nghị hợp tác (Figma: 1440x470, Form B2B + Thông tin & ảnh) */
.np-coop-form-sec {
    padding: 72px 0 88px 0 !important;
    background: #FFFFFF !important;
}

.np-coop-form-grid {
    display: grid !important;
    grid-template-columns: 580px 1fr !important;
    gap: 50px !important;
    align-items: flex-start !important;
}

.np-coop-form-heading {
    font-family: 'Roboto', sans-serif !important;
    font-size: 34px !important;
    line-height: 54px!important;
    font-weight: 600!important;
    color: #161616 !important;
    margin: 0 0 10px 0 !important;
}

.np-coop-form-sub {
    font-family: 'Roboto', sans-serif !important;
    font-size: 15.5px !important;
    line-height: 24px !important;
    color: #4A4A4A !important;
    margin: 0 0 28px 0 !important;
}

.np-coop-contact-box {
    background: #F4F4F4 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: stretch !important;
    border: 1px solid #EAEAEA !important;
}

.np-coop-cb-info {
    flex: 1.2 !important;
    padding: 24px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 14px !important;
}

.np-coop-cb-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    color: #222222 !important;
    line-height: 20px !important;
}

.np-coop-cb-row i {
    color: #B70000 !important;
    font-size: 16px !important;
    margin-top: 3px !important;
    flex-shrink: 0 !important;
}

.np-coop-cb-row a {
    color: #222222 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.np-coop-cb-row a:hover {
    color: #B70000 !important;
}

.np-coop-cb-img {
    flex: 1 !important;
    overflow: hidden !important;
}

.np-coop-cb-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    min-height: 160px !important;
}

.np-coop-form-card {
    background: #FFFFFF !important;
    border: 1px solid #E4E4E4 !important;
    border-radius: 10px !important;
    padding: 32px 36px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

.np-coop-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.np-coop-form-row.two-cols {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

.np-form-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.np-form-field label {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #3D3D3D !important;
}

.np-form-field input,
.np-form-field select,
.np-form-field textarea {
    border: 1px solid #D5D5D5 !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    color: #161616 !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
}

.np-form-field input:focus,
.np-form-field select:focus,
.np-form-field textarea:focus {
    border-color: #B70000 !important;
    box-shadow: 0 0 0 2px rgba(183, 0, 0, 0.1) !important;
}

.np-btn-coop-submit {
    height: 48px !important;
    background: #B70000 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 8px !important;
    box-shadow: 0 4px 14px rgba(183, 0, 0, 0.25) !important;
    transition: all 0.2s ease !important;
}

.np-btn-coop-submit:hover {
    background: #900000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(183, 0, 0, 0.35) !important;
}

.np-coop-form-status.success {
    margin-top: 14px !important;
    padding: 12px 16px !important;
    background: #E8F5E9 !important;
    border: 1px solid #A5D6A7 !important;
    border-radius: 6px !important;
    color: #2E7D32 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Responsive Hợp tác */
@media (max-width: 1280px) {
    .np-coop-directions-grid {
        gap: 16px !important;
    }
    .np-coop-partners-container {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .np-coop-partners-left {
        width: 100% !important;
    }
    .np-coop-partners-right {
        width: 100% !important;
    }
    .np-coop-form-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 36px !important;
    }
}

@media (max-width: 992px) {
    .np-coop-pillars-card {
        flex-wrap: wrap !important;
        gap: 20px !important;
    }
    .np-coop-pillar-item {
        flex: 1 1 45% !important;
        justify-content: flex-start !important;
    }
    .np-coop-pillar-divider {
        display: none !important;
    }
    .np-coop-directions-grid {
        grid-template-columns: 1fr !important;
    }
    .np-coop-partners-right {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .np-coop-steps-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .np-coop-step-arrow {
        align-self: center !important;
        transform: rotate(90deg) !important;
        margin: 4px 0 !important;
    }
    .np-coop-form-grid {
        grid-template-columns: 1fr !important;
    }
    .np-coop-contact-box {
        flex-direction: column !important;
    }
}

@media (max-width: 640px) {
    .np-coop-hero-title {
        font-size: 32px !important;
    }
    .np-coop-pillar-item {
        flex: 1 1 100% !important;
    }
    .np-coop-partners-right {
        grid-template-columns: 1fr !important;
    }
    .np-coop-form-row.two-cols {
        grid-template-columns: 1fr !important;
    }
    .np-coop-form-card {
        padding: 24px 20px !important;
    }
}

/* ==========================================================================
   TRANG TIN TỨC & HOẠT ĐỘNG (FIGMA UI v2 - NODE 231:950)
   ========================================================================== */

.np-news-page {
    background-color: #FFFFFF !important;
}

/* 1. Hero Section */
.np-news-hero {
    position: relative !important;
    width: 100% !important;
    min-height: 330px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

.np-news-hero-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, rgba(42, 10, 5, 0.94) 0%, rgba(42, 10, 5, 0.65) 60%, rgba(42, 10, 5, 0.1) 100%) !important;
    z-index: 1 !important;
}

.np-news-hero-container {
    position: relative !important;
    z-index: 2 !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.np-news-hero-content {
    max-width: 650px !important;
}

.np-news-breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    color: #FFFFFF !important;
    margin-bottom: 14px !important;
}

.np-news-breadcrumb a {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.np-news-breadcrumb a:hover {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

.np-news-breadcrumb i {
    font-size: 10px !important;
    opacity: 0.7 !important;
}

.np-news-hero-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 56px!important;
    font-weight: 700 !important;
    line-height: 61.6px!important;
    color: #FFFFFF !important;
    margin: 0 0 14px 0 !important;
}

.np-news-hero-sub {
    font-family: 'Roboto', sans-serif !important;
    font-size: 19px!important;
    line-height: 25px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    margin: 0 !important;
}

/* 2. Category Tabs */
.np-news-tabs-sec {
    background: #FFFFFF !important;
    border-bottom: 1px solid #ECECEC !important;
    padding: 16px 0 !important;
}

.np-news-tabs-wrapper {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.np-news-tabs-list {
    display: flex !important;
    align-items: center !important;
    background: #FFFFFF !important;
    border: 1px solid #ECECEC !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    max-width: 100% !important;
}

.np-news-tab-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 20px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    min-width: 140px !important;
    color: #161616 !important;
    box-sizing: border-box !important;
}

.np-news-tab-icon {
    font-size: 24px !important;
    color: #B70000 !important;
    transition: color 0.2s ease !important;
}

.np-news-tab-label {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600!important;
    line-height: 18px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.np-news-tab-sep {
    width: 1px !important;
    height: 48px !important;
    background-color: #EAEAEA !important;
    flex-shrink: 0 !important;
}

.np-news-tab-item:hover {
    background-color: #FFF5F5 !important;
    color: #B70000 !important;
}

.np-news-tab-item.is-active {
    background-color: #B70000 !important;
    color: #FFFFFF !important;
}

.np-news-tab-item.is-active .np-news-tab-icon,
.np-news-tab-item.is-active .np-news-tab-label {
    color: #FFFFFF !important;
}

/* 3. Featured Post Card & Slider */
.np-news-featured-sec {
    padding: 36px 0 16px 0 !important;
    background: #FFFFFF !important;
}

.np-news-featured-wrapper {
    position: relative !important;
    width: 100% !important;
}

.np-news-featured-slider {
    position: relative !important;
    width: 100% !important;
}

.np-news-featured-card {
    background: #141414 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    min-height: 344px !important;
    width: 100% !important;
}

/* Slider slides: ONLY ACTIVE SLIDE IS VISIBLE (1 post per row) */
.np-news-featured-card.np-feat-slide {
    display: none !important;
}

.np-news-featured-card.np-feat-slide.is-active {
    display: flex !important;
    align-items: stretch !important;
    animation: npSlideFadeIn 0.3s ease-out;
}

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

/* Nút tiến lên / lùi lại (Figma Node 231:1103 & 231:1107) */
.np-feat-nav-wrap {
    position: absolute !important;
    right: -20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    z-index: 25 !important;
}

.np-feat-nav-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #B70000 !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    outline: none !important;
}

.np-feat-nav-btn:hover {
    background: #FFFFFF !important;
    color: #900000 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
}

.np-feat-nav-btn:active {
    transform: scale(0.95) !important;
}

.np-news-featured-media {
    flex: 0 0 54% !important;
    position: relative !important;
    overflow: hidden !important;
}

.np-news-featured-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.np-news-featured-card:hover .np-news-featured-media img {
    transform: scale(1.03) !important;
}

.np-news-featured-fade {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 120px !important;
    background: linear-gradient(90deg, transparent 0%, #141414 100%) !important;
    pointer-events: none !important;
}

.np-news-featured-body {
    flex: 1 !important;
    padding: 36px 40px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    box-sizing: border-box !important;
}

.np-news-badge-red {
    display: inline-block !important;
    background: #B70000 !important;
    color: #FFFFFF !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    align-self: flex-start !important;
    margin-bottom: 12px !important;
}

.np-news-featured-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 26px !important;
    line-height: 34px !important;
    font-weight: 700 !important;
    margin: 0 0 10px 0 !important;
}

.np-news-featured-title a {
    color: #FFFFFF !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.np-news-featured-title a:hover {
    color: #F2C57C !important;
}

.np-news-meta-date {
    font-family: 'Roboto', sans-serif !important;
    font-size: 12.5px !important;
    color: #A3A3A3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
}

.np-news-meta-date i {
    font-size: 13px !important;
}

.np-news-featured-desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    line-height: 22px !important;
    color: #D4D4D4 !important;
    margin: 0 0 20px 0 !important;
}

.np-btn-news-detail {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    align-self: flex-start !important;
}

.np-btn-news-detail:hover {
    background: #B70000 !important;
    border-color: #B70000 !important;
    color: #FFFFFF !important;
    transform: translateX(2px) !important;
}

/* 4. Main News Grid + Sidebar */
.np-news-main-sec {
    padding: 36px 0 60px 0 !important;
    background: #FFFFFF !important;
}

.np-news-main-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 28px !important;
}

.np-news-title-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.np-news-sec-heading {
    font-family: 'Roboto', sans-serif !important;
    font-size: 28px !important;
    font-weight: 600!important;
    color: #141414 !important;
    margin: 0 !important;
}

.np-news-title-bar {
    width: 44px !important;
    height: 3px !important;
    background-color: #B70000 !important;
    border-radius: 2px !important;
}

.np-news-search-box {
    width: 332px !important;
}

.np-news-search-form {
    display: flex !important;
    border: 1px solid #D5D5D5 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    height: 42px !important;
    background: #FFFFFF !important;
}

.np-news-input-wrap {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    gap: 8px !important;
}

.np-news-input-wrap i {
    color: #888888 !important;
    font-size: 14px !important;
}

.np-news-input-wrap input {
    border: none !important;
    outline: none !important;
    width: 100% !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    color: #333333 !important;
    background: transparent !important;
}

.np-btn-news-search {
    background: #B70000 !important;
    border: none !important;
    color: #FFFFFF !important;
    padding: 0 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease !important;
}

.np-btn-news-search:hover {
    background: #900000 !important;
}

.np-news-layout-grid {
    display: grid !important;
    grid-template-columns: 1fr 332px !important;
    gap: 36px !important;
    align-items: flex-start !important;
}

.np-news-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

.np-news-card {
    background: #FFFFFF !important;
    border: 1px solid #ECECEC !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.25s ease !important;
}

.np-news-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
    border-color: #E0E0E0 !important;
}

.np-news-card-thumb {
    width: 100% !important;
    height: 156px !important;
    overflow: hidden !important;
    background-color: #F5F5F5 !important;
}

.np-news-card-thumb a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.np-news-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.35s ease !important;
}

.np-news-card:hover .np-news-card-thumb img {
    transform: scale(1.06) !important;
}

.np-news-card-body {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.np-news-card-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: 600 !important;
    margin: 0 0 8px 0 !important;
    min-height: 44px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.np-news-card-title a {
    color: #161616 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.np-news-card:hover .np-news-card-title a {
    color: #B70000 !important;
}

.np-news-card-excerpt {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    line-height: 20px !important;
    color: #666666 !important;
    margin: 0 0 14px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    flex: 1 !important;
}

.np-news-card-footer {
    padding-top: 10px !important;
    border-top: 1px solid #F0F0F0 !important;
}

.np-news-card-link {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #B70000 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: gap 0.2s ease !important;
}

.np-news-card:hover .np-news-card-link {
    gap: 10px !important;
}

/* Pagination */
.np-news-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 36px !important;
}

.np-page-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid #ECECEC !important;
    border-radius: 6px !important;
    color: #333333 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: #FFFFFF !important;
    transition: all 0.2s ease !important;
}

.np-page-num:hover {
    border-color: #B70000 !important;
    color: #B70000 !important;
}

.np-page-num.is-active {
    background-color: #B70000 !important;
    border-color: #B70000 !important;
    color: #FFFFFF !important;
}

.np-page-next {
    font-size: 12px !important;
}

.np-news-empty {
    text-align: center !important;
    padding: 60px 20px !important;
    background: #FDFDFD !important;
    border: 1px dashed #DDDDDD !important;
    border-radius: 10px !important;
}

.np-news-empty i {
    font-size: 40px !important;
    color: #B70000 !important;
    margin-bottom: 14px !important;
}

.np-news-empty p {
    font-size: 16px !important;
    color: #666666 !important;
    margin-bottom: 20px !important;
}

.np-btn-news-reset {
    display: inline-block !important;
    background: #B70000 !important;
    color: #FFFFFF !important;
    padding: 10px 22px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Sidebar */
.np-news-sidebar-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

.np-news-sidebox {
    background: #FFFFFF !important;
    border: 1px solid #ECECEC !important;
    border-radius: 10px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
}

.np-sidebox-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #F0F0F0 !important;
}

.np-sidebox-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 17px !important;
    font-weight: 600!important;
    line-height: 27px!important;
    color: #B70000!important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.np-icon-star,
.np-icon-bell {
    font-size: 18px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.np-icon-star {
    color: #F2C57C !important;
}

.np-icon-bell {
    color: #B70000 !important;
}

.np-sidebox-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.np-side-item {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

.np-side-thumb {
    flex: 0 0 82px !important;
    width: 82px !important;
    height: 74px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background-color: #F5F5F5 !important;
    display: block !important;
}

.np-side-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

.np-side-item:hover .np-side-thumb img {
    transform: scale(1.08) !important;
}

.np-side-info {
    flex: 1 !important;
}

.np-side-item-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 6px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.np-side-item-title a {
    color: #1A1A1A !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.np-side-item:hover .np-side-item-title a {
    color: #B70000 !important;
}

.np-sidebox-newsletter {
    background: #FAFAFA !important;
    border-color: #E8E8E8 !important;
}

.np-newsletter-desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    line-height: 20px !important;
    color: #666666 !important;
    margin: 0 0 16px 0 !important;
}

.np-newsletter-input-group {
    margin-bottom: 12px !important;
}

.np-newsletter-input-group input {
    width: 100% !important;
    height: 42px !important;
    border: 1px solid #DDDDDD !important;
    border-radius: 6px !important;
    padding: 0 12px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    outline: none !important;
    background: #FFFFFF !important;
}

.np-newsletter-input-group input:focus {
    border-color: #B70000 !important;
}

.np-btn-newsletter-submit {
    width: 100% !important;
    height: 44px !important;
    background: #B70000 !important;
    border: none !important;
    border-radius: 6px !important;
    color: #FFFFFF !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: background 0.2s ease !important;
}

.np-btn-newsletter-submit:hover {
    background: #900000 !important;
}

.np-newsletter-status.success {
    margin-top: 12px !important;
    padding: 10px !important;
    background: #E8F5E9 !important;
    border: 1px solid #A5D6A7 !important;
    border-radius: 6px !important;
    color: #2E7D32 !important;
    font-size: 13px !important;
}

/* 5. CTA Lan tỏa */
.np-news-cta-sec {
    position: relative !important;
    width: 100% !important;
    min-height: 290px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

.np-news-cta-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, rgba(160, 0, 0, 0.92) 0%, rgba(160, 0, 0, 0.70) 55%, rgba(160, 0, 0, 0.1) 100%) !important;
    z-index: 1 !important;
}

.np-news-cta-container {
    position: relative !important;
    z-index: 2 !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.np-news-cta-content {
    max-width: 680px !important;
    color: #FFFFFF !important;
}

.np-news-cta-heading {
    font-family: 'Roboto', sans-serif !important;
    font-size: 32px !important;
    font-weight: 500!important;
    line-height: 51px!important;
    color: #FFFFFF !important;
    margin: 0 0 12px 0 !important;
}

.np-news-cta-sub {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    margin: 0 0 24px 0 !important;
}

.np-btn-news-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #FFFFFF !important;
    color: #B70000 !important;
    padding: 12px 26px !important;
    border-radius: 6px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease !important;
}

.np-btn-news-cta:hover {
    background: #F8F8F8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important;
    color: #900000 !important;
}

/* Responsive Tin tức */
@media (max-width: 1200px) {
    .np-news-tabs-list {
        overflow-x: auto !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .np-news-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 992px) {
    .np-news-layout-grid {
        grid-template-columns: 1fr !important;
    }
    .np-news-featured-card {
        flex-direction: column !important;
    }
    .np-news-featured-media {
        flex: none !important;
        height: 240px !important;
    }
    .np-news-featured-fade {
        display: none !important;
    }
    .np-news-featured-body {
        padding: 24px 20px !important;
    }
    .np-news-main-head {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
    .np-news-search-box {
        width: 100% !important;
    }
    .np-feat-nav-wrap {
        position: static !important;
        transform: none !important;
        flex-direction: row !important;
        justify-content: center !important;
        margin-top: 16px !important;
    }
}

@media (max-width: 640px) {
    .np-news-hero-title {
        font-size: 32px !important;
    }
    .np-news-cards-grid {
        grid-template-columns: 1fr !important;
    }
    .np-news-cta-heading {
        font-size: 24px !important;
    }
}

/* ==========================================================================
   07. CHI TIẾT TIN TỨC (SINGLE POST - FIGMA UI V2 STANDARD)
   ========================================================================== */

/* 1. Breadcrumb Bar */
.np-single-breadcrumb-sec {
    background: #FBFBFB !important;
    border-bottom: 1px solid #ECECEC !important;
    padding: 14px 0 !important;
}

.np-single-breadcrumb-wrap {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13.5px !important;
}

.np-single-breadcrumb-wrap .np-bc-item {
    color: #666666 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: color 0.2s ease !important;
}

.np-single-breadcrumb-wrap .np-bc-item:hover {
    color: #B70000 !important;
    text-decoration: underline !important;
}

.np-single-breadcrumb-wrap .np-bc-sep {
    font-size: 10px !important;
    color: #BBBBBB !important;
}

.np-single-breadcrumb-wrap .np-bc-item.is-active {
    color: #141414 !important;
    font-weight: 600 !important;
    max-width: 480px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* 2. Main Layout Grid */
.np-single-main-sec {
    padding: 36px 0 60px 0 !important;
    background: #FFFFFF !important;
}

.np-single-layout-grid {
    display: grid !important;
    grid-template-columns: 1fr 332px !important;
    gap: 40px !important;
    align-items: flex-start !important;
}

.np-single-article {
    min-width: 0 !important;
}

/* 3. Article Header */
.np-single-header {
    margin-bottom: 24px !important;
}

.np-single-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 34px !important;
    line-height: 44px !important;
    font-weight: 700 !important;
    color: #141414 !important;
    margin: 12px 0 16px 0 !important;
}

.np-single-meta-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid #ECECEC !important;
}

.np-single-meta-left {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    color: #666666 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13.5px !important;
}

.np-meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.np-meta-item i {
    color: #B70000 !important;
    font-size: 13.5px !important;
}

.np-single-meta-share {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.np-share-label {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #777777 !important;
    margin-right: 2px !important;
}

.np-share-circle-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid #E0E0E0 !important;
    background: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #555555 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    outline: none !important;
}

.np-share-circle-btn:hover {
    border-color: #B70000 !important;
    background: #B70000 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(183, 0, 0, 0.2) !important;
}

.np-share-fb:hover {
    background: #1877F2 !important;
    border-color: #1877F2 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 10px rgba(24, 119, 242, 0.25) !important;
}

.np-share-zalo {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 800 !important;
    font-size: 13px !important;
}

.np-share-zalo:hover {
    background: #0068FF !important;
    border-color: #0068FF !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 10px rgba(0, 104, 255, 0.25) !important;
}

/* 4. Featured Image */
.np-single-featured-wrap {
    margin-bottom: 32px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
    background: #F8F8F8 !important;
}

.np-single-featured-img {
    width: 100% !important;
    height: auto !important;
    max-height: 520px !important;
    object-fit: cover !important;
    display: block !important;
}

.np-single-featured-caption {
    padding: 10px 18px !important;
    background: #F8F8F8 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    color: #666666 !important;
    font-style: italic !important;
    text-align: center !important;
    border-top: 1px solid #EAEAEA !important;
}

/* 5. Article Content Body Typography */
.np-single-content-body {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.85 !important;
    color: #2C2C2C !important;
    word-break: break-word !important;
}

.np-single-content-body p {
    margin: 0 0 22px 0 !important;
}

.np-single-content-body p.lead {
    font-size: 18px !important;
    line-height: 1.8 !important;
    font-weight: 500 !important;
    color: #141414 !important;
    background: #FAF9F8 !important;
    padding: 20px 24px !important;
    border-left: 4px solid #B70000 !important;
    border-radius: 0 8px 8px 0 !important;
    margin-bottom: 28px !important;
}

.np-single-content-body h2 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 700 !important;
    color: #141414 !important;
    margin: 38px 0 16px 0 !important;
    position: relative !important;
    padding-left: 16px !important;
}

.np-single-content-body h2::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    bottom: 4px !important;
    width: 4px !important;
    background-color: #B70000 !important;
    border-radius: 2px !important;
}

.np-single-content-body h3 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 20px !important;
    line-height: 28px !important;
    font-weight: 700 !important;
    color: #141414 !important;
    margin: 28px 0 14px 0 !important;
}

.np-single-content-body h4 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 17px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    color: #141414 !important;
    margin: 22px 0 10px 0 !important;
}

.np-single-content-body blockquote {
    margin: 28px 0 !important;
    padding: 22px 28px !important;
    background: #FFF9F8 !important;
    border-left: 4px solid #B70000 !important;
    border-radius: 0 10px 10px 0 !important;
    font-style: italic !important;
    font-size: 17px !important;
    line-height: 1.75 !important;
    color: #222222 !important;
    box-shadow: 0 2px 12px rgba(183, 0, 0, 0.04) !important;
}

.np-single-content-body blockquote p {
    margin-bottom: 10px !important;
}

.np-single-content-body blockquote cite {
    display: block !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    color: #B70000 !important;
    margin-top: 10px !important;
}

.np-single-content-body ul {
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.np-single-content-body ul li {
    position: relative !important;
    padding-left: 24px !important;
    margin-bottom: 12px !important;
    line-height: 1.75 !important;
}

.np-single-content-body ul li::before {
    content: '■' !important;
    position: absolute !important;
    left: 4px !important;
    top: 1px !important;
    color: #B70000 !important;
    font-size: 10px !important;
}

.np-single-content-body ol {
    margin: 0 0 24px 0 !important;
    padding-left: 20px !important;
}

.np-single-content-body ol li {
    margin-bottom: 10px !important;
    line-height: 1.75 !important;
}

.np-single-content-body strong {
    font-weight: 600 !important;
    color: #111111 !important;
}

.np-single-content-body a {
    color: #B70000 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    transition: color 0.2s ease !important;
}

.np-single-content-body a:hover {
    color: #900000 !important;
}

.np-single-content-body img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin: 20px 0 !important;
    display: block !important;
}

.np-single-content-body figure {
    margin: 24px 0 !important;
}

.np-single-content-body figcaption {
    font-size: 13px !important;
    color: #666666 !important;
    text-align: center !important;
    font-style: italic !important;
    margin-top: 8px !important;
}

/* 6. Article Footer (Tags & Share Bar) */
.np-single-footer {
    margin-top: 40px !important;
    padding-top: 24px !important;
    border-top: 1px solid #ECECEC !important;
}

.np-single-tags-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-bottom: 24px !important;
}

.np-tags-label {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #555555 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.np-tags-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.np-tag-item {
    display: inline-block !important;
    padding: 5px 12px !important;
    background: #F3F3F3 !important;
    border-radius: 4px !important;
    color: #444444 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.np-tag-item:hover {
    background: #B70000 !important;
    color: #FFFFFF !important;
}

.np-single-share-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding: 18px 24px !important;
    background: #FAF9F8 !important;
    border: 1px solid #ECECEC !important;
    border-radius: 10px !important;
}

.np-share-bar-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #141414 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.np-share-bar-title i {
    color: #B70000 !important;
    font-size: 15px !important;
}

.np-share-bar-btns {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.np-btn-share-social {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: 1px solid #DDDDDD !important;
    background: #FFFFFF !important;
    color: #333333 !important;
    transition: all 0.2s ease !important;
}

.np-btn-share-fb:hover {
    background: #1877F2 !important;
    border-color: #1877F2 !important;
    color: #FFFFFF !important;
}

.np-btn-share-zalo:hover {
    background: #0068FF !important;
    border-color: #0068FF !important;
    color: #FFFFFF !important;
}

.np-z-badge {
    background: #0068FF !important;
    color: #FFFFFF !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
}

.np-btn-share-copy:hover {
    background: #B70000 !important;
    border-color: #B70000 !important;
    color: #FFFFFF !important;
}

/* 7. Previous & Next Article Navigation */
.np-single-nav-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-top: 36px !important;
    padding-top: 28px !important;
    border-top: 1px solid #ECECEC !important;
}

.np-nav-card {
    border: 1px solid #ECECEC !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    transition: all 0.25s ease !important;
}

.np-nav-card:hover:not(.is-disabled) {
    border-color: #B70000 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-2px) !important;
}

.np-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 16px !important;
    text-decoration: none !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

/* Chỉ thẻ bài trước/sau mới kế thừa màu; KHÔNG ép cho menu chính (cùng tên class
   .np-nav-link) — nếu không, chữ của mục menu đang chọn / rê chuột không đổi sang đỏ */
.np-nav-card .np-nav-link {
    color: inherit !important;
}

.np-nav-thumb {
    flex: 0 0 72px !important;
    width: 72px !important;
    height: 60px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #F0F0F0 !important;
}

.np-nav-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

.np-nav-card:hover .np-nav-thumb img {
    transform: scale(1.08) !important;
}

.np-nav-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.np-text-right {
    text-align: right !important;
}

.np-nav-sub {
    font-family: 'Roboto', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #999999 !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-bottom: 4px !important;
}

.np-nav-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13.5px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
    color: #161616 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.2s ease !important;
}

.np-nav-card:hover .np-nav-title {
    color: #B70000 !important;
}

.np-nav-card.is-disabled {
    background: #FAFAFA !important;
    opacity: 0.7 !important;
}

.np-nav-empty {
    padding: 16px !important;
    color: #999999 !important;
    box-sizing: border-box !important;
}

.np-nav-none {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-style: italic !important;
    display: block !important;
    margin-top: 4px !important;
    color: #AAAAAA !important;
}

/* 8. Single Post Sidebar Additions */
.np-sidebar-cat-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.np-sidebar-cat-item a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    color: #333333 !important;
    text-decoration: none !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.np-sidebar-cat-item a:hover {
    background: #FFF5F5 !important;
    color: #B70000 !important;
}

.np-sidebar-cat-item.is-active a {
    background: #B70000 !important;
    color: #FFFFFF !important;
}

.np-cat-name {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.np-cat-name i {
    font-size: 11px !important;
    opacity: 0.6 !important;
}

.np-cat-badge {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    background: #F0F0F0 !important;
    color: #666666 !important;
}

.np-sidebar-cat-item.is-active .np-cat-badge {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
}

.np-sidebox-contact-card {
    background: linear-gradient(145deg, #1C1C1C 0%, #2A2A2A 100%) !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
    padding: 26px 20px !important;
    text-align: center !important;
    border: none !important;
}

.np-contact-card-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: rgba(183, 0, 0, 0.25) !important;
    color: #F2C57C !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    margin-bottom: 12px !important;
}

.np-contact-card-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    color: #FFFFFF !important;
}

.np-contact-card-desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 12.5px !important;
    line-height: 18px !important;
    color: #D0D0D0 !important;
    margin: 0 0 16px 0 !important;
}

.np-contact-card-hotline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #F2C57C !important;
    text-decoration: none !important;
    margin-bottom: 16px !important;
    transition: transform 0.2s ease !important;
}

.np-contact-card-hotline:hover {
    transform: scale(1.05) !important;
}

.np-contact-card-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px 16px !important;
    background: #B70000 !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: background 0.2s ease !important;
}

.np-contact-card-btn:hover {
    background: #900000 !important;
}

/* 9. Related Articles Section */
.np-single-related-sec {
    padding: 50px 0 60px 0 !important;
    background: #FAFAFA !important;
    border-top: 1px solid #ECECEC !important;
}

.np-related-viewall .np-link-viewall {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #B70000 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: gap 0.2s ease !important;
}

.np-related-viewall .np-link-viewall:hover {
    gap: 10px !important;
}

/* 10. Toast Notification */
.np-toast-notification {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    background: #141414 !important;
    color: #FFFFFF !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    z-index: 999999 !important;
    transform: translateY(100px) !important;
    opacity: 0 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
}

.np-toast-notification.is-show {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.np-toast-notification i {
    color: #4CAF50 !important;
    font-size: 16px !important;
}

/* 11. Responsive Styles for Single Post */
@media (max-width: 992px) {
    .np-single-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
    .np-single-sidebar {
        margin-top: 20px !important;
    }
}

@media (max-width: 768px) {
    .np-single-title {
        font-size: 26px !important;
        line-height: 34px !important;
    }
    .np-single-meta-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .np-single-nav-cards {
        grid-template-columns: 1fr !important;
    }
    .np-nav-card.np-nav-next .np-nav-link {
        flex-direction: row-reverse !important;
    }
    .np-nav-card.np-nav-next .np-nav-info {
        text-align: left !important;
    }
}

@media (max-width: 576px) {
    .np-single-title {
        font-size: 22px !important;
        line-height: 30px !important;
    }
    .np-single-share-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

/* ==========================================================================
   08. TUYỂN DỤNG (CAREER PAGE - FIGMA UI V2 STANDARD)
   ========================================================================== */

/* 1. Hero Section */
.np-career-hero {
    position: relative !important;
    width: 100% !important;
    min-height: 404px !important;
    background-size: cover !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

.np-career-hero-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, rgba(143, 0, 0, 0.96) 0%, rgba(143, 0, 0, 0.86) 42%, rgba(143, 0, 0, 0.15) 100%) !important;
    z-index: 1 !important;
}

.np-career-hero-container {
    position: relative !important;
    z-index: 2 !important;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    width: 100% !important;
}

.np-career-hero-content {
    max-width: 580px !important;
    color: #FFFFFF !important;
}

.np-career-breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    color: #FFFFFF !important;
    margin-bottom: 12px !important;
}

.np-career-breadcrumb a {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.np-career-breadcrumb a:hover {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

.np-career-breadcrumb i {
    font-size: 10px !important;
    opacity: 0.7 !important;
}

.np-career-badge-tag {
    display: inline-block !important;
    background: #B70000 !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #FFFFFF !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    margin-bottom: 14px !important;
}

.np-career-hero-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 46px !important;
    line-height: 54px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0 0 16px 0 !important;
}

.np-career-hero-sub {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    line-height: 25px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    margin: 0 0 28px 0 !important;
}

.np-btn-career-hero {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #FFFFFF !important;
    color: #B70000 !important;
    padding: 13px 28px !important;
    border-radius: 6px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.25s ease !important;
}

.np-btn-career-hero:hover {
    background: #B70000 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

/* 2. 6 Lý do gia nhập / 6 Lợi ích (Figma: 1440x136px, Nền trắng, 6 cột dọc cách nhau bằng vạch chia 1x72 Node 232:1303) */
.np-career-benefits-sec {
    background: #FFFFFF !important;
    border-bottom: 1px solid #ECECEC !important;
    padding: 26px 0 !important;
}

.np-career-benefits-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.np-benefit-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex: 1 !important;
    text-align: center !important;
    padding: 4px 8px !important;
}

.np-benefit-icon {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 4px !important;
    flex-shrink: 0 !important;
}

.np-benefit-icon svg {
    width: 40px !important;
    height: 40px !important;
    display: block !important;
}

.np-benefit-text {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 18.2px !important;
    color: #161616 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
}

.np-benefit-divider {
    width: 1px !important;
    height: 72px !important;
    background: #E4E4E4 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* 3. Môi trường làm việc (Figma 1440x580: #FCEEEE bg, 6 cards in 1 row Node 232:1353) */
.np-career-wide-container {
    max-width: 1440px !important;
    padding: 0 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.np-career-env-sec {
    padding: 56px 0 64px 0 !important;
    background: #FCEEEE !important;
}

.np-career-section-header {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    margin-bottom: 34px !important;
    gap: 24px !important;
}

.np-career-eyebrow {
    display: inline-block !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #B70000 !important;
    margin-bottom: 8px !important;
}

.np-career-section-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 36px !important;
    line-height: 51px!important;
    font-weight: 600!important;
    color: #161616 !important;
    margin: 0 0 10px 0 !important;
}

.np-career-section-desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    color: #444444 !important;
    margin: 0 !important;
    max-width: 700px !important;
}

.np-btn-career-outline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: #FFFFFF !important;
    color: #161616 !important;
    border: 1px solid #161616 !important;
    padding: 10px 24px !important;
    border-radius: 6px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.np-btn-career-outline svg {
    color: #161616 !important;
    transition: transform 0.25s ease !important;
}

.np-btn-career-outline:hover {
    background: #B70000 !important;
    border-color: #B70000 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(183, 0, 0, 0.25) !important;
}

.np-btn-career-outline:hover svg {
    color: #FFFFFF !important;
    transform: translateX(3px) !important;
}

.np-career-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
}

.np-env-card {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 330px !important;
}

.np-env-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1) !important;
}

.np-env-thumb {
    width: 100% !important;
    height: 136px !important;
    overflow: hidden !important;
    background: #F0F0F0 !important;
    flex-shrink: 0 !important;
}

.np-env-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.35s ease !important;
}

.np-env-card:hover .np-env-thumb img {
    transform: scale(1.06) !important;
}

.np-env-body {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.np-env-num-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

.np-env-num {
    font-family: 'Roboto', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #B70000 !important;
    line-height: 1 !important;
}

.np-env-icon {
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.np-env-icon svg {
    width: 28px !important;
    height: 28px !important;
    display: block !important;
}

.np-env-card-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 21px !important;
    color: #161616 !important;
    margin: 0 0 8px 0 !important;
}

.np-env-card-desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13.5px !important;
    line-height: 20px !important;
    color: #6B6B6B !important;
    margin: 0 !important;
}

/* 4. Khoảnh khắc tại Nhã Phượng */
.np-career-moments-sec {
    padding: 60px 0 !important;
    background: #FFFFFF !important;
}

.np-career-moments-gallery {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 16px !important;
}

.np-moment-item {
    position: relative !important;
    height: 210px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #F0F0F0 !important;
    cursor: pointer !important;
}

.np-moment-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.np-moment-item:hover img {
    transform: scale(1.08) !important;
}

.np-moment-caption {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 12px 14px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 100%) !important;
    color: #FFFFFF !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 12.5px !important;
    line-height: 16px !important;
    font-weight: 500 !important;
    opacity: 0 !important;
    transform: translateY(10px) !important;
    transition: all 0.3s ease !important;
}

.np-moment-item:hover .np-moment-caption {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 5. Vị trí đang tuyển */
.np-career-jobs-sec {
    padding: 60px 0 80px 0 !important;
    background: #F9F9F9 !important;
    border-top: 1px solid #ECECEC !important;
}

.np-jobs-top-bar {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    margin-bottom: 28px !important;
    gap: 20px !important;
}

.np-jobs-search-wrap {
    flex-shrink: 0 !important;
}

.np-jobs-search-box {
    display: flex !important;
    align-items: center !important;
    background: #FFFFFF !important;
    border: 1px solid #D5D5D5 !important;
    border-radius: 6px !important;
    padding: 0 16px !important;
    width: 340px !important;
    height: 44px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
}

.np-jobs-search-box i {
    color: #888888 !important;
    font-size: 14px !important;
}

.np-jobs-search-box input {
    border: none !important;
    outline: none !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    color: #333333 !important;
    width: 100% !important;
    background: transparent !important;
}

.np-jobs-filter-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 26px !important;
    flex-wrap: wrap !important;
}

.np-job-tab-btn {
    background: #FFFFFF !important;
    border: 1px solid #DEDEDE !important;
    border-radius: 6px !important;
    padding: 8px 18px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #444444 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.np-job-tab-btn:hover {
    border-color: #B70000 !important;
    color: #B70000 !important;
}

.np-job-tab-btn.is-active {
    background: #B70000 !important;
    border-color: #B70000 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

.np-jobs-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.np-job-row-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #FFFFFF !important;
    border: 1px solid #E8E8E8 !important;
    border-radius: 10px !important;
    padding: 22px 28px !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
    gap: 20px !important;
    box-sizing: border-box !important;
}

.np-job-row-card.is-hidden {
    display: none !important;
}

.np-job-row-card:hover {
    transform: translateY(-3px) !important;
    border-color: #B70000 !important;
    box-shadow: 0 8px 24px rgba(183, 0, 0, 0.08) !important;
}

.np-job-title-col {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 0 0 34% !important;
}

.np-job-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    background: #FFF2F2 !important;
    color: #B70000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.np-job-name {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16.5px !important;
    font-weight: 600!important;
    color: #161616 !important;
    margin: 0 0 4px 0 !important;
}

.np-job-salary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #B70000 !important;
}

.np-job-meta-col {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
    flex: 1 !important;
}

.np-job-meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    color: #555555 !important;
}

.np-job-meta-item i {
    color: #888888 !important;
    font-size: 13px !important;
}

.np-job-action-col {
    flex-shrink: 0 !important;
}

.np-btn-job-apply {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #B70000 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 10px 22px !important;
    border-radius: 6px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.np-btn-job-apply:hover {
    background: #900000 !important;
    transform: translateX(2px) !important;
}

.np-jobs-empty {
    text-align: center !important;
    padding: 50px 20px !important;
    background: #FFFFFF !important;
    border: 1px dashed #CCCCCC !important;
    border-radius: 8px !important;
    color: #777777 !important;
}

.np-jobs-empty i {
    font-size: 38px !important;
    color: #B70000 !important;
    margin-bottom: 12px !important;
}

.np-btn-job-reset {
    margin-top: 14px !important;
    background: #B70000 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 8px 18px !important;
    border-radius: 5px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

/* 5.1 Phân trang danh sách công việc */
.np-jobs-pagination-wrapper {
    margin-top: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding-top: 24px !important;
    border-top: 1px solid #EBEBEB !important;
}

.np-jobs-pagination-info {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    color: #666666 !important;
}

.np-jobs-pagination-info span {
    font-weight: 700 !important;
    color: #141414 !important;
}

.np-jobs-pagination-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.np-page-btn {
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    border: 1px solid #D5D5D5 !important;
    background: #FFFFFF !important;
    color: #333333 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
}

.np-page-btn:hover:not(:disabled) {
    border-color: #B70000 !important;
    color: #B70000 !important;
}

.np-page-btn.is-active {
    background: #B70000 !important;
    border-color: #B70000 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.np-page-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    border-color: #E5E5E5 !important;
}

/* 6. CTA Ứng tuyển */
.np-career-cta-sec {
    position: relative !important;
    width: 100% !important;
    min-height: 190px !important;
    background-size: cover !important;
    background-position: center !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

.np-career-cta-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, rgba(160, 0, 0, 0.94) 0%, rgba(160, 0, 0, 0.82) 55%, rgba(160, 0, 0, 0.25) 100%) !important;
    z-index: 1 !important;
}

.np-career-cta-container {
    position: relative !important;
    z-index: 2 !important;
    padding-top: 36px !important;
    padding-bottom: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    width: 100% !important;
}

.np-career-cta-heading {
    font-family: 'Roboto', sans-serif !important;
    font-size: 32px!important;
    font-weight: 500!important;
    color: #FFFFFF !important;
    margin: 0 0 6px 0 !important;
    line-height: 48px;
}

.np-career-cta-sub {
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    margin: 0 !important;
}

.np-btn-career-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #FFFFFF !important;
    color: #B70000 !important;
    border: none !important;
    padding: 12px 26px !important;
    border-radius: 6px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.np-btn-career-cta:hover {
    background: #F8F8F8 !important;
    color: #900000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22) !important;
}

/* 7. Application Popup Modal */
.np-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

.np-modal-backdrop.is-open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.np-modal-box {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 600px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 32px !important;
    box-sizing: border-box !important;
    position: relative !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
    animation: npModalIn 0.25s ease-out !important;
}

@keyframes npModalIn {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.np-modal-close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    background: #F0F0F0 !important;
    border: none !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    color: #444444 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.np-modal-close:hover {
    background: #B70000 !important;
    color: #FFFFFF !important;
}

.np-modal-header {
    margin-bottom: 24px !important;
    text-align: center !important;
}

.np-modal-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: #FFF2F2 !important;
    color: #B70000 !important;
    font-size: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
}

.np-modal-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #141414 !important;
    margin: 0 0 6px 0 !important;
}

.np-modal-sub {
    font-size: 14px !important;
    color: #B70000 !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.np-form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

.np-form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
}

.np-form-group label {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333333 !important;
}

.np-form-group input,
.np-form-group textarea {
    border: 1px solid #D5D5D5 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-family: 'Roboto', sans-serif !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.np-form-group input:focus,
.np-form-group textarea:focus {
    border-color: #B70000 !important;
}

.np-form-hint {
    font-size: 11.5px !important;
    color: #777777 !important;
}

.np-btn-submit-apply {
    width: 100% !important;
    background: #B70000 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 12px 20px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: background 0.2s ease !important;
}

.np-btn-submit-apply:hover {
    background: #900000 !important;
}

.np-apply-status.success {
    margin-top: 14px !important;
    padding: 12px !important;
    background: #E8F5E9 !important;
    border: 1px solid #A5D6A7 !important;
    border-radius: 6px !important;
    color: #2E7D32 !important;
    font-size: 13.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* 7.1 Drag and Drop CV File Uploader */
.np-cv-dropzone {
    position: relative !important;
    border: 2px dashed #D5D5D5 !important;
    border-radius: 10px !important;
    background: #FAFAFA !important;
    padding: 22px 18px !important;
    text-align: center !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.np-cv-dropzone:hover,
.np-cv-dropzone.is-dragover {
    border-color: #B70000 !important;
    background: #FFF7F7 !important;
    box-shadow: 0 4px 14px rgba(183, 0, 0, 0.08) !important;
}

.np-file-input {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

.np-dropzone-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    pointer-events: none !important;
}

.np-dropzone-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: #EEEEEE !important;
    color: #666666 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    transition: all 0.25s ease !important;
}

.np-cv-dropzone:hover .np-dropzone-icon,
.np-cv-dropzone.is-dragover .np-dropzone-icon {
    background: #FFEAEA !important;
    color: #B70000 !important;
    transform: scale(1.08) !important;
}

.np-dropzone-main {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13.5px !important;
    color: #333333 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.4 !important;
}

.np-dropzone-browse {
    color: #B70000 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

.np-dropzone-sub {
    font-size: 11.5px !important;
    color: #888888 !important;
    margin: 0 !important;
}

.np-dropzone-preview {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    position: relative !important;
    z-index: 3 !important;
}

.np-preview-file-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    overflow: hidden !important;
}

.np-preview-icon {
    font-size: 26px !important;
    flex-shrink: 0 !important;
}

.np-preview-icon.pdf {
    color: #E53935 !important;
}

.np-preview-icon.word {
    color: #1E88E5 !important;
}

.np-preview-details {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    overflow: hidden !important;
}

.np-preview-name {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #222222 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    max-width: 320px !important;
}

.np-preview-size {
    font-size: 11.5px !important;
    color: #777777 !important;
}

.np-btn-remove-file {
    background: #F3F4F6 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #666666 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.np-btn-remove-file:hover {
    background: #B70000 !important;
    color: #FFFFFF !important;
}

.np-cv-link-alternative {
    margin-top: 8px !important;
}

.np-btn-toggle-link {
    background: none !important;
    border: none !important;
    padding: 2px 0 !important;
    font-size: 12px !important;
    color: #666666 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: color 0.2s ease !important;
}

.np-btn-toggle-link:hover {
    color: #B70000 !important;
}

.np-cv-link-wrap {
    margin-top: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* 8. Responsive Styles for Tuyển dụng */
@media (max-width: 1200px) {
    .np-career-benefits-wrapper {
        overflow-x: auto !important;
        justify-content: flex-start !important;
        gap: 20px !important;
    }
    .np-benefit-item {
        flex: 0 0 180px !important;
    }
    .np-career-cards-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }
    .np-career-moments-gallery {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 992px) {
    .np-career-cards-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .np-job-row-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }
    .np-job-title-col {
        width: 100% !important;
    }
    .np-job-meta-col {
        width: 100% !important;
    }
    .np-job-action-col {
        width: 100% !important;
    }
    .np-btn-job-apply {
        width: 100% !important;
        justify-content: center !important;
    }
    .np-jobs-top-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .np-jobs-search-box {
        width: 100% !important;
    }
    .np-career-cta-container {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

@media (max-width: 768px) {
    .np-career-hero-title {
        font-size: 34px !important;
        line-height: 42px !important;
    }
    .np-career-section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .np-career-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .np-career-moments-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .np-form-row {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 576px) {
    .np-career-hero-title {
        font-size: 28px !important;
        line-height: 36px !important;
    }
    .np-career-cards-grid {
        grid-template-columns: 1fr !important;
    }
    .np-career-moments-gallery {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   08 · LIÊN HỆ — V2 (FIGMA NODE 233:1484)
   ========================================================================== */

.np-contact-wide-container {
    max-width: 1400px !important;
    padding: 0 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 1. Hero Banner */
.np-contact-hero-sec {
    position: relative !important;
    width: 100% !important;
    min-height: 544px !important;
    background-size: cover !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    align-items: center !important;
    padding: 56px 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.np-contact-hero-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 58% !important;
    max-width: 860px !important;
    height: 100% !important;
    background: linear-gradient(90deg, rgba(30, 21, 16, 0.96) 0%, rgba(30, 21, 16, 0.72) 55%, transparent 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.np-contact-hero-container {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

.np-contact-hero-content {
    max-width: 560px !important;
}

.np-contact-breadcrumb {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    margin-bottom: 16px !important;
}

.np-contact-breadcrumb a {
    color: #FFFFFF !important;
    text-decoration: none !important;
    opacity: 0.9 !important;
    transition: opacity 0.2s ease !important;
}

.np-contact-breadcrumb a:hover {
    opacity: 1 !important;
    text-decoration: underline !important;
}

.np-contact-breadcrumb .np-bc-sep {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 10px !important;
}

.np-contact-breadcrumb .np-bc-current {
    color: #FFFFFF !important;
    font-weight: 400 !important;
}

.np-contact-hero-title {
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
}

.np-hero-title-top {
    display: block !important;
    font-family: 'Noto Serif', Georgia, serif !important;
    font-size: 54px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.5px !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
}

.np-hero-title-brand {
    display: block !important;
    font-family: 'Noto Serif', Georgia, serif !important;
    font-size: 54px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.5px !important;
    color: #F2C57C !important;
    text-transform: uppercase !important;
    margin-top: 4px !important;
}

.np-contact-hero-desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    line-height: 28.5px !important;
    color: #FFFFFF !important;
    margin: 0 0 32px 0 !important;
    max-width: 440px !important;
}

/* 3 Nhu cầu liên hệ (Figma: icon 38x38 + 2 dòng chữ, vạch chia 1px) */
.np-contact-hero-needs {
    display: inline-flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;
}

.np-hero-need-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.np-need-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 38px !important;
    height: 38px !important;
}

.np-need-icon svg {
    width: 38px !important;
    height: 38px !important;
    display: block !important;
}

.np-need-icon svg path {
    stroke: #FFFFFF !important;
}

.np-need-text {
    display: flex !important;
    flex-direction: column !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 19px !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
}

.np-need-text span,
.np-need-text strong {
    display: block !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 19px !important;
    color: #FFFFFF !important;
}

.np-hero-need-divider {
    width: 1px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.35) !important;
    flex-shrink: 0 !important;
}

/* 2. Main Section: Thông tin + Biểu mẫu */
.np-contact-main-sec {
    padding: 70px 0 80px 0 !important;
    background: #FFFFFF !important;
}

.np-contact-layout-grid {
    display: grid !important;
    grid-template-columns: 1fr 1.05fr !important;
    gap: 52px !important;
    align-items: flex-start !important;
}

.np-contact-eyebrow {
    display: inline-block !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #B70000 !important;
    margin-bottom: 8px !important;
}

.np-contact-info-heading {
    font-family: 'Roboto', sans-serif !important;
    font-size: 30px !important;
    font-weight: 600!important;
    color: #161616 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.3 !important;
}

.np-contact-info-sub {
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    line-height: 24px !important;
    color: #555555 !important;
    margin: 0 0 24px 0 !important;
}

.np-info-cards-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.np-info-cards-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
}

.np-info-card-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    background: #F8F9FA !important;
    border: 1px solid #ECEFF1 !important;
    border-radius: 8px !important;
    padding: 16px 18px !important;
    box-sizing: border-box !important;
    transition: all 0.25s ease !important;
}

.np-info-card-item:hover {
    border-color: #B70000 !important;
    background: #FFF9F9 !important;
    box-shadow: 0 4px 14px rgba(183, 0, 0, 0.06) !important;
}

.np-info-card-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #FFF0F0 !important;
    color: #B70000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

.np-info-card-label {
    font-family: 'Roboto', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #161616!important;
    margin-bottom: 3px !important;
    display: block !important;
}

.np-info-card-val {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400!important;
    color: #222222 !important;
    margin: 0 !important;
    line-height: 1.45 !important;
}

.np-card-link {
    color: #161616 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.np-card-link:hover {
    color: #B70000 !important;
    text-decoration: underline !important;
}

/* Banner Liên hệ theo nhu cầu */
.np-contact-needs-banner {
    display: flex !important;
    background: #FFF4F4 !important;
    border: 1px solid #FFE3E3 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-top: 10px !important;
}

.np-needs-thumb {
    flex: 0 0 170px !important;
    overflow: hidden !important;
    background: #EEEEEE !important;
}

.np-needs-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.np-needs-body {
    padding: 20px 22px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.np-needs-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16.5px !important;
    font-weight: 700 !important;
    color: #B70000 !important;
    margin: 0 0 10px 0 !important;
}

.np-needs-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}

.np-needs-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #333333 !important;
    text-decoration: none !important;
    padding: 3px 0 !important;
    border-bottom: 1px dashed rgba(183, 0, 0, 0.15) !important;
    transition: all 0.2s ease !important;
}

.np-needs-link:hover {
    color: #B70000 !important;
    padding-left: 4px !important;
}

.np-needs-link i {
    font-size: 11px !important;
    color: #B70000 !important;
    transition: transform 0.2s ease !important;
}

.np-needs-link:hover i {
    transform: translateX(3px) !important;
}

/* Biểu mẫu liên hệ Cột phải */
.np-contact-form-box {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #ECEFF1 !important;
    padding: 38px 40px !important;
    box-sizing: border-box !important;
}

.np-form-header {
    margin-bottom: 22px !important;
}

.np-form-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 26px !important;
    font-weight: 600!important;
    color: #141414 !important;
    margin: 0 0 6px 0 !important;
}

.np-form-sub {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    color: #666666 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

.np-cform-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 14px !important;
}

.np-cform-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
}

.np-cform-group label {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #333333 !important;
}

.np-cform-group input,
.np-cform-group textarea,
.np-cform-group select {
    border: 1px solid #D5D5D5 !important;
    border-radius: 6px !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    font-family: 'Roboto', sans-serif !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
    background: #FFFFFF !important;
}

.np-cform-group input:focus,
.np-cform-group textarea:focus,
.np-cform-group select:focus {
    border-color: #B70000 !important;
}

.np-select-wrap {
    position: relative !important;
    width: 100% !important;
}

.np-select-wrap select {
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    padding-right: 36px !important;
}

.np-select-arrow {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    color: #777777 !important;
    font-size: 12px !important;
}

.np-btn-submit-contact {
    width: 100% !important;
    background: #B70000 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 13px 24px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(183, 0, 0, 0.2) !important;
}

.np-btn-submit-contact:hover {
    background: #900000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(183, 0, 0, 0.3) !important;
}

.np-contact-status.success {
    margin-top: 16px !important;
    padding: 14px 16px !important;
    background: #E8F5E9 !important;
    border: 1px solid #A5D6A7 !important;
    border-radius: 6px !important;
    color: #2E7D32 !important;
    font-size: 13.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    line-height: 1.4 !important;
}

/* 3. Hệ thống chi nhánh (Figma: 1440x515, bg #FDF5F5) */
.np-contact-branches-sec {
    padding: 60px 0 70px 0 !important;
    background: #FDF5F5 !important;
    border-top: none !important;
}

.np-branches-header {
    margin-bottom: 32px !important;
    max-width: 850px !important;
}

.np-branches-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 32px !important;
    font-weight: 600!important;
    color: #161616 !important;
    margin: 0 0 10px 0 !important;
    line-height: 48px!important;
}

.np-branches-desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #3D3D3D !important;
    margin: 0 !important;
}

.np-branches-grid {
    display: grid !important;
    /* 4 chi nhánh theo layout khách (Figma 219:877) */
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

.np-branch-card {
    background: #FFFFFF !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07) !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.25s ease !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.np-branch-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12) !important;
}

.np-branch-thumb {
    width: 100% !important;
    height: 140px !important;
    overflow: hidden !important;
    background: #ECEFF1 !important;
    flex-shrink: 0 !important;
}

.np-branch-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.35s ease !important;
}

.np-branch-card:hover .np-branch-thumb img {
    transform: scale(1.05) !important;
}

.np-branch-body {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex: 1 !important;
    box-sizing: border-box !important;
}

.np-branch-info-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.np-branch-pin {
    color: #B70000 !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

.np-branch-text {
    flex: 1 !important;
}

.np-branch-name {
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #161616 !important;
    margin: 0 0 6px 0 !important;
    line-height: 22px !important;
}

.np-branch-address {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    line-height: 19px !important;
    color: #6B6B6B !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

.np-branch-btn-row {
    margin-top: auto !important;
}

.np-btn-branch-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 128px !important;
    height: 34px !important;
    border: 1px solid #B70000 !important;
    border-radius: 6px !important;
    background: transparent !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #B70000 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.np-btn-branch-link:hover {
    background: #B70000 !important;
    color: #FFFFFF !important;
}

/* 4. Trụ sở trên bản đồ (Figma: 1440x272) */
.np-contact-map-sec {
    padding: 50px 0 60px 0 !important;
    background: #FFFFFF !important;
}

.np-contact-map-grid {
    display: grid !important;
    grid-template-columns: 420px 1fr !important;
    gap: 36px !important;
    align-items: center !important;
}

.np-map-heading {
    font-family: 'Roboto', sans-serif !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    color: #161616 !important;
    margin: 6px 0 16px 0 !important;
    line-height: 48px!important;
}

/* Ô địa chỉ Figma (Node 233:1756): chứa cả địa chỉ và nút Google Maps */
.np-map-address-box {
    background: #F5F5F5 !important;
    border-radius: 8px !important;
    padding: 20px 24px !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    max-width: 440px !important;
    box-sizing: border-box !important;
}

.np-map-address-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.np-map-pin-icon {
    color: #B70000 !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

.np-map-address-text {
    font-family: 'Roboto', sans-serif !important;
    font-size: 17px !important;
    line-height: 24px !important;
    color: #3D3D3D !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

.np-btn-gmaps {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: #B70000 !important;
    color: #FFFFFF !important;
    height: 42px !important;
    width: fit-content !important;
    padding: 0 24px !important;
    border-radius: 6px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 14px rgba(183, 0, 0, 0.2) !important;
    box-sizing: border-box !important;
}

.np-btn-gmaps:hover {
    background: #900000 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(183, 0, 0, 0.28) !important;
}

.np-map-img-wrap {
    display: block !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    position: relative !important;
    border: 1px solid #E4E4E4 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    cursor: pointer !important;
}

.np-map-img-wrap img {
    width: 100% !important;
    height: 240px !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.np-map-img-wrap:hover img {
    transform: scale(1.02) !important;
}

.np-map-pin-badge {
    position: absolute !important;
    top: 48% !important;
    left: 55% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #B70000 !important;
    color: #FFFFFF !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
    pointer-events: none !important;
}

/* 5. CTA Kết nối (Figma: 1440x240, 3 thành phần nằm 1 chỗ bên trái) */
.np-contact-cta-sec {
    position: relative !important;
    width: 100% !important;
    min-height: 240px !important;
    background-size: cover !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    align-items: center !important;
    padding: 40px 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.np-contact-cta-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 60% !important;
    max-width: 860px !important;
    height: 100% !important;
    background: linear-gradient(90deg, rgba(158, 0, 0, 0.94) 0%, rgba(158, 0, 0, 0.65) 65%, transparent 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.np-contact-cta-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 560px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.np-contact-cta-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 34px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    line-height: 51px!important;
    margin: 0 0 10px 0 !important;
}

.np-contact-cta-sub {
    font-family: 'Roboto', sans-serif !important;
    font-size: 17px !important;
    line-height: 25.5px !important;
    color: rgba(255, 255, 255, 0.95) !important;
    margin: 0 0 20px 0 !important;
    max-width: 560px !important;
}

.np-cta-btn-wrap {
    display: flex !important;
    align-items: center !important;
}

.np-btn-contact-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #FFFFFF !important;
    color: #B70000 !important;
    height: 42px !important;
    padding: 0 24px !important;
    border-radius: 6px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    box-sizing: border-box !important;
}

.np-btn-contact-cta:hover {
    background: #FFF2F2 !important;
    color: #900000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

/* 6. Responsive Styles for Liên hệ */
@media (max-width: 1200px) {
    .np-branches-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 992px) {
    .np-contact-hero-sec {
        min-height: 380px !important;
        padding: 40px 0 !important;
        background-position: 85% center !important;
    }
    .np-contact-hero-overlay {
        width: 75% !important;
    }
    .np-hero-title-top,
    .np-hero-title-brand {
        font-size: 42px !important;
    }
    .np-contact-hero-desc {
        font-size: 17px !important;
        line-height: 25px !important;
    }
    .np-contact-hero-needs {
        gap: 16px !important;
    }
    .np-contact-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    .np-contact-map-grid {
        grid-template-columns: 1fr !important;
    }
    .np-contact-cta-content {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

@media (max-width: 768px) {
    .np-contact-hero-sec {
        min-height: auto !important;
        padding: 36px 0 !important;
    }
    .np-contact-hero-overlay {
        width: 100% !important;
        max-width: 100% !important;
        background: linear-gradient(180deg, rgba(30, 21, 16, 0.94) 0%, rgba(30, 21, 16, 0.88) 100%) !important;
    }
    .np-hero-title-top,
    .np-hero-title-brand {
        font-size: 32px !important;
    }
    .np-contact-hero-desc {
        font-size: 15px !important;
        line-height: 23px !important;
        max-width: 100% !important;
        margin-bottom: 24px !important;
    }
    .np-contact-hero-needs {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }
    .np-hero-need-divider {
        display: none !important;
    }
    .np-info-cards-row {
        grid-template-columns: 1fr !important;
    }
    .np-contact-needs-banner {
        flex-direction: column !important;
    }
    .np-needs-thumb {
        flex: 0 0 160px !important;
    }
    .np-branches-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .np-cform-row {
        grid-template-columns: 1fr !important;
    }
    .np-contact-form-box {
        padding: 24px 20px !important;
    }
}

@media (max-width: 576px) {
    .np-branches-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   MOBILE HORIZONTAL SCROLL FOR MULTI-ITEM SECTIONS (EXCLUDING PRODUCT GRID)
   Yêu cầu: Dưới mobile, tất cả các phần danh sách trải dài (trừ trang sản phẩm)
   được thu gọn thành 1 hàng ngang vuốt kéo qua trái (horizontal touch swipe).
   ========================================================================== */
@media (max-width: 768px) {

    /* --- 1. TRANG CHỦ --- */
    /* 1.1 Hero 4 đặc điểm */
    .np-hero-v2-features-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 16px !important;
        padding-bottom: 6px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .np-hero-v2-features-inner::-webkit-scrollbar {
        display: none !important;
    }
    .np-hero-feature-item {
        flex: 0 0 145px !important;
        max-width: 145px !important;
        scroll-snap-align: start !important;
    }
    .np-hero-feature-divider {
        display: none !important;
    }

    /* 1.2 Thương hiệu phân phối */
    .np-brands-v2-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 14px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .np-brands-v2-list::-webkit-scrollbar {
        display: none !important;
    }
    .np-brand-card {
        flex: 0 0 156px !important;
        max-width: 156px !important;
        scroll-snap-align: start !important;
    }

    /* 1.3 4 Ngành hàng sản phẩm trang chủ */
    .np-cat-cards-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 14px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 8px !important;
    }
    .np-cat-cards-grid::-webkit-scrollbar {
        display: none !important;
    }
    .np-cat-card {
        flex: 0 0 170px !important;
        max-width: 170px !important;
        scroll-snap-align: start !important;
    }

    /* 1.4 4 Thống kê trang chủ */
    .np-stats-v2-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 14px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 8px !important;
        max-width: none !important;
    }
    .np-stats-v2-wrap::-webkit-scrollbar {
        display: none !important;
    }
    .np-stat-card {
        flex: 0 0 175px !important;
        max-width: 175px !important;
        scroll-snap-align: start !important;
    }

    /* 1.5 Vì sao chọn Nhã Phượng (6 cards) */
    .np-why-v2-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 16px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 12px !important;
    }
    .np-why-v2-grid::-webkit-scrollbar {
        display: none !important;
    }
    .np-why-card {
        flex: 0 0 240px !important;
        max-width: 240px !important;
        scroll-snap-align: start !important;
    }

    /* 1.6 Tin tức & hoạt động trang chủ */
    .np-news-v2-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 16px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 12px !important;
    }
    .np-news-v2-grid::-webkit-scrollbar {
        display: none !important;
    }
    .np-news-card-v2 {
        flex: 0 0 270px !important;
        max-width: 270px !important;
        scroll-snap-align: start !important;
    }


    /* --- 2. TRANG HỢP TÁC --- */
    /* 2.1 5 Trụ cột hợp tác */
    .np-coop-pillars-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 16px !important;
        justify-content: flex-start !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 6px !important;
    }
    .np-coop-pillars-container::-webkit-scrollbar {
        display: none !important;
    }
    .np-coop-pillar-item {
        flex: 0 0 150px !important;
        max-width: 150px !important;
        scroll-snap-align: start !important;
    }
    .np-coop-pillar-divider {
        display: none !important;
    }

    /* 2.2 Ba hướng hợp tác */
    .np-coop-directions-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 16px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 12px !important;
    }
    .np-coop-directions-grid::-webkit-scrollbar {
        display: none !important;
    }
    .np-coop-dir-card {
        flex: 0 0 280px !important;
        max-width: 280px !important;
        scroll-snap-align: start !important;
    }

    /* 2.3 Đối tác tìm kiếm (5 thẻ) */
    .np-coop-partners-right {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 14px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 8px !important;
    }
    .np-coop-partners-right::-webkit-scrollbar {
        display: none !important;
    }
    .np-coop-seek-card {
        flex: 0 0 170px !important;
        max-width: 170px !important;
        scroll-snap-align: start !important;
    }

    /* 2.4 Bốn bước hợp tác */
    .np-coop-steps-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 16px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 12px !important;
    }
    .np-coop-steps-row::-webkit-scrollbar {
        display: none !important;
    }
    .np-coop-step-card {
        flex: 0 0 240px !important;
        max-width: 240px !important;
        scroll-snap-align: start !important;
    }
    .np-coop-step-arrow {
        display: none !important;
    }


    /* --- 3. TRANG TUYỂN DỤNG --- */
    /* 3.1 6 Lợi ích / Giá trị */
    .np-career-benefits-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 16px !important;
        justify-content: flex-start !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 6px !important;
    }
    .np-career-benefits-wrapper::-webkit-scrollbar {
        display: none !important;
    }
    .np-benefit-item {
        flex: 0 0 150px !important;
        max-width: 150px !important;
        scroll-snap-align: start !important;
    }
    .np-benefit-divider {
        display: none !important;
    }

    /* 3.2 Môi trường làm việc (6 cards) */
    .np-career-cards-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 16px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 12px !important;
    }
    .np-career-cards-grid::-webkit-scrollbar {
        display: none !important;
    }
    .np-env-card {
        flex: 0 0 240px !important;
        max-width: 240px !important;
        scroll-snap-align: start !important;
    }

    /* 3.3 Khoảnh khắc Nhã Phượng (5 gallery items) */
    .np-career-moments-gallery {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 14px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 8px !important;
    }
    .np-career-moments-gallery::-webkit-scrollbar {
        display: none !important;
    }
    .np-moment-item {
        flex: 0 0 220px !important;
        max-width: 220px !important;
        scroll-snap-align: start !important;
    }

    /* 3.4 Tabs lọc phòng ban */
    .np-jobs-filter-tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 8px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 6px !important;
    }
    .np-jobs-filter-tabs::-webkit-scrollbar {
        display: none !important;
    }
    .np-job-tab-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }


    /* --- 4. TRANG VỀ NHÃ PHƯỢNG --- */
    /* 4.1 6 Chỉ số hoạt động */
    .np-about-stats__grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 14px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 8px !important;
    }
    .np-about-stats__grid::-webkit-scrollbar {
        display: none !important;
    }
    .np-about-stats__item {
        flex: 0 0 170px !important;
        max-width: 170px !important;
        scroll-snap-align: start !important;
        border-right: none !important;
        border-bottom: none !important;
    }

    /* 4.2 Hành trình phát triển (8 mốc) */
    .np-about-journey__items {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 16px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 12px !important;
    }
    .np-about-journey__items::-webkit-scrollbar {
        display: none !important;
    }
    .np-about-journey__item {
        flex: 0 0 160px !important;
        max-width: 160px !important;
        scroll-snap-align: start !important;
    }
    .np-about-journey__line {
        display: none !important;
    }

    /* 4.3 Giá trị cốt lõi (5 cards) */
    .np-about-values__grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 16px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 12px !important;
    }
    .np-about-values__grid::-webkit-scrollbar {
        display: none !important;
    }
    .np-about-values__item {
        flex: 0 0 200px !important;
        max-width: 200px !important;
        scroll-snap-align: start !important;
        border-right: none !important;
    }

    /* 4.4 Chín nhóm năng lực */
    .np-about-cap__row--4,
    .np-about-cap__row--5 {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 16px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 12px !important;
    }
    .np-about-cap__row--4::-webkit-scrollbar,
    .np-about-cap__row--5::-webkit-scrollbar {
        display: none !important;
    }
    .np-about-cap__card {
        flex: 0 0 230px !important;
        max-width: 230px !important;
        scroll-snap-align: start !important;
    }

    /* 4.5 Mạng lưới chi nhánh */
    .np-about-network__cards {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 16px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 12px !important;
    }
    .np-about-network__cards::-webkit-scrollbar {
        display: none !important;
    }
    .np-about-network__cards .np-branch-card {
        flex: 0 0 220px !important;
        max-width: 220px !important;
        scroll-snap-align: start !important;
    }

    /* 4.6 Chứng nhận & bằng khen */
    .np-about-certs__list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 16px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 12px !important;
    }
    .np-about-certs__list::-webkit-scrollbar {
        display: none !important;
    }
    .np-cert-card {
        flex: 0 0 190px !important;
        max-width: 190px !important;
        scroll-snap-align: start !important;
    }


    /* --- 5. TRANG LIÊN HỆ --- */
    /* 5.1 Hero 4 nhu cầu */
    .np-contact-hero-needs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 14px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 8px !important;
    }
    .np-contact-hero-needs::-webkit-scrollbar {
        display: none !important;
    }
    .np-hero-need-item {
        flex: 0 0 140px !important;
        max-width: 140px !important;
        scroll-snap-align: start !important;
    }
    .np-hero-need-divider {
        display: none !important;
    }

    /* 5.2 Hệ thống chi nhánh (5 cards) */
    .np-branches-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 16px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 12px !important;
    }
    .np-branches-grid::-webkit-scrollbar {
        display: none !important;
    }
    .np-branches-grid .np-branch-card {
        flex: 0 0 250px !important;
        max-width: 250px !important;
        scroll-snap-align: start !important;
    }


    /* --- 6. TRANG TIN TỨC --- */
    /* 6.1 Tabs danh mục tin tức (7 tabs) */
    .np-news-tabs-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 12px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 6px !important;
        justify-content: flex-start !important;
    }
    .np-news-tabs-list::-webkit-scrollbar {
        display: none !important;
    }
    .np-news-tab-item {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    .np-news-tab-sep {
        display: none !important;
    }


    /* --- 7. EXCLUSION: TRANG SẢN PHẨM KHÔNG BỊ ẢNH HƯỞNG --- */
    body.page-template-page-san-pham .np-products-grid,
    .np-products-grid {
        display: grid !important;
    }
}

@media (max-width: 576px) {
    /* Đảm bảo màn hình nhỏ nhất vẫn giữ nguyên 1 hàng cuộn ngang mượt mà, không bị giật về cột dọc */
    .np-branches-grid,
    .np-coop-partners-right,
    .np-career-cards-grid,
    .np-career-moments-gallery,
    .np-about-stats__grid,
    .np-about-journey__items,
    .np-about-values__grid,
    .np-about-cap__row--4,
    .np-about-cap__row--5,
    .np-about-network__cards,
    .np-about-certs__list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }
}

/* ==========================================================================
   MOBILE HERO & BANNER OPTIMIZATIONS (FIGMA HARMONY & VIEWPORT FIT)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. TRANG CHỦ: HERO V2 (.np-hero-v2) */
    .np-hero-v2 {
        min-height: 480px !important;
        height: auto !important;
        background-position: 72% center !important;
        background-size: cover !important;
        padding-top: 24px !important;
        padding-bottom: 28px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    .np-hero-v2::before {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.82) 48%, rgba(255, 255, 255, 0.97) 100%) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    .np-hero-v2::after {
        display: none !important;
    }

    .np-hero-v2-container {
        min-height: auto !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        gap: 20px !important;
        justify-content: flex-start !important;
    }

    .np-hero-v2-content {
        max-width: 100% !important;
    }

    .np-hero-v2-brand {
        font-size: 30px !important;
        line-height: 36px !important;
        margin-bottom: 8px !important;
    }

    .np-hero-v2-slogan {
        font-size: 22px !important;
        line-height: 28px !important;
        margin-bottom: 12px !important;
    }

    .np-hero-v2-desc {
        font-size: 13.5px !important;
        line-height: 21px !important;
        color: #333333 !important;
        margin-bottom: 20px !important;
    }

    .np-hero-v2-cta {
        margin-bottom: 0 !important;
    }

    .np-hero-v2-features {
        width: 100% !important;
        max-width: 100% !important;
        padding-bottom: 0 !important;
        margin-top: 8px !important;
    }

    .np-hero-v2-features-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 12px !important;
        padding-bottom: 6px !important;
    }

    .np-hero-v2-features-inner::-webkit-scrollbar {
        display: none !important;
    }

    .np-hero-feature-item {
        flex: 0 0 130px !important;
        width: 130px !important;
        scroll-snap-align: start !important;
        gap: 6px !important;
    }

    .np-hero-feature-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 20px !important;
    }

    .np-hero-feature-text {
        font-size: 12px !important;
        line-height: 16px !important;
    }


    /* 2. TRANG CHỦ: BANNER GIA NHẬP NHÃ PHƯỢNG (.np-home-join-v2) */
    .np-home-join-v2 {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0 0 36px 0 !important;
        min-height: auto !important;
        background-color: #FCEEEE !important;
        overflow: hidden !important;
    }

    .np-join-v2-bg-right {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 200px !important;
        background-size: cover !important;
        background-position: center 25% !important;
        background-repeat: no-repeat !important;
        border-radius: 0 0 20px 20px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    }

    .np-join-v2-gradient {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 200px !important;
        background: linear-gradient(180deg, rgba(252, 238, 238, 0) 45%, rgba(252, 238, 238, 0.75) 80%, #FCEEEE 100%) !important;
        pointer-events: none !important;
    }

    .np-join-v2-container {
        width: 100% !important;
        padding: 24px 20px 0 20px !important;
        box-sizing: border-box !important;
    }

    .np-join-v2-content {
        max-width: 100% !important;
        padding-left: 0 !important;
        text-align: center !important;
    }

    .np-join-v2-title {
        font-size: 24px !important;
        line-height: 32px !important;
        margin-bottom: 10px !important;
        color: #B70000 !important;
    }

    .np-join-v2-desc {
        font-size: 14px !important;
        line-height: 22px !important;
        color: #4A4A4A !important;
        margin-bottom: 22px !important;
    }

    .np-join-v2-cta {
        display: flex !important;
        justify-content: center !important;
    }


    /* 3. VỀ NHÃ PHƯỢNG: HERO BANNER (.np-about-hero) */
    .np-about-hero {
        min-height: 440px !important;
        padding: 40px 0 32px 0 !important;
    }

    .np-about-hero__bg {
        width: 100% !important;
        opacity: 0.8 !important;
        background-position: center 30% !important;
    }

    .np-about-hero__overlay {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.85) 55%, #FFFFFF 100%) !important;
    }

    .np-about-hero__inner {
        padding: 24px 16px !important;
    }

    .np-about-hero__title {
        font-size: 30px !important;
        line-height: 38px !important;
        margin-bottom: 8px !important;
    }

    .np-about-hero__headline {
        font-size: 20px !important;
        line-height: 28px !important;
        margin-bottom: 12px !important;
    }

    .np-about-hero__desc {
        font-size: 14px !important;
        line-height: 22px !important;
        margin-bottom: 24px !important;
    }


    /* 4. HỢP TÁC: HERO BANNER (.np-coop-hero) */
    .np-coop-hero {
        min-height: 450px !important;
        background-position: center 30% !important;
        padding: 42px 0 32px 0 !important;
    }

    .np-coop-hero-overlay {
        background: linear-gradient(180deg, rgba(20, 14, 10, 0.45) 0%, rgba(20, 14, 10, 0.85) 58%, rgba(20, 14, 10, 0.97) 100%) !important;
    }

    .np-coop-hero-container {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .np-coop-hero-title {
        font-size: 28px !important;
        line-height: 36px !important;
        margin-bottom: 12px !important;
    }

    .np-coop-hero-sub {
        font-size: 14px !important;
        line-height: 22px !important;
        margin-bottom: 22px !important;
        color: rgba(255, 255, 255, 0.92) !important;
    }


    /* 5. TUYỂN DỤNG: HERO BANNER (.np-career-hero) */
    .np-career-hero {
        min-height: 420px !important;
        background-position: center 25% !important;
        padding: 40px 0 32px 0 !important;
    }

    .np-career-hero-overlay {
        background: linear-gradient(180deg, rgba(143, 0, 0, 0.45) 0%, rgba(143, 0, 0, 0.8) 50%, rgba(20, 14, 10, 0.95) 100%) !important;
    }

    .np-career-hero-container {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .np-career-hero-title {
        font-size: 28px !important;
        line-height: 36px !important;
        margin-bottom: 12px !important;
    }

    .np-career-hero-sub {
        font-size: 14px !important;
        line-height: 22px !important;
        margin-bottom: 22px !important;
    }


    /* 6. LIÊN HỆ: HERO BANNER (.np-contact-hero-sec) */
    .np-contact-hero-sec {
        min-height: 440px !important;
        background-position: center 30% !important;
        padding: 38px 0 28px 0 !important;
    }

    .np-contact-hero-overlay {
        background: linear-gradient(180deg, rgba(30, 21, 16, 0.45) 0%, rgba(30, 21, 16, 0.85) 55%, rgba(30, 21, 16, 0.97) 100%) !important;
    }

    .np-contact-hero-container {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .np-hero-title-top,
    .np-hero-title-brand {
        font-size: 28px !important;
        line-height: 34px !important;
    }

    .np-contact-hero-desc {
        font-size: 14px !important;
        line-height: 22px !important;
        margin-bottom: 20px !important;
    }


    /* 7. TIN TỨC: HERO BANNER (.np-news-hero) */
    .np-news-hero {
        min-height: 300px !important;
        background-position: center 30% !important;
        padding: 32px 0 !important;
    }

    .np-news-hero-overlay {
        background: linear-gradient(180deg, rgba(42, 10, 5, 0.45) 0%, rgba(42, 10, 5, 0.82) 60%, rgba(42, 10, 5, 0.96) 100%) !important;
    }

    .np-news-hero-container {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .np-news-hero-title {
        font-size: 26px !important;
        line-height: 34px !important;
    }

    .np-news-hero-sub {
        font-size: 14px !important;
        line-height: 21px !important;
    }


    /* 8. SẢN PHẨM: HERO BANNER (.np-prod-hero-sec) */
    .np-prod-hero-sec,
    .np-prod-hero-sec > .kt-row-layout-inner {
        min-height: 380px !important;
        background-position: 75% center !important;
    }

    .np-prod-hero-sec::before {
        display: block !important;
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(180deg, rgba(122, 0, 0, 0.42) 0%, rgba(122, 0, 0, 0.85) 60%, rgba(122, 0, 0, 0.96) 100%) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    .np-prod-hero-col {
        position: relative !important;
        z-index: 2 !important;
    }

    .np-prod-hero-title {
        font-size: 28px !important;
        line-height: 36px !important;
        margin-bottom: 10px !important;
    }

    .np-prod-hero-desc {
        font-size: 14px !important;
        line-height: 22px !important;
        margin-bottom: 20px !important;
    }
}

/* ==========================================================================
   TRANG SẢN PHẨM: RESPONSIVE OPTIMIZATION (MOBILE & TABLET)
   ========================================================================== */
@media (max-width: 992px) {
    .np-prod-catalog-wrap {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

@media (max-width: 768px) {
    /* 1. Hero Section */
    .np-prod-hero-sec,
    .np-prod-hero-sec > .kt-row-layout-inner {
        min-height: 380px !important;
        background-position: 75% center !important;
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .np-prod-hero-sec .kt-row-column-wrap {
        padding: 0 16px !important;
    }

    .np-prod-breadcrumb {
        font-size: 11.5px !important;
        margin-bottom: 12px !important;
    }

    .np-prod-hero-title {
        font-size: 26px !important;
        line-height: 33px !important;
        margin-bottom: 8px !important;
    }

    .np-prod-hero-desc {
        font-size: 13.5px !important;
        line-height: 20px !important;
        margin-bottom: 18px !important;
        max-width: 100% !important;
    }

    .np-prod-hero-btn-row .np-btn-outline-white {
        height: 42px !important;
        padding: 0 18px !important;
        font-size: 13px !important;
    }

    /* 3 Highlights Bar in Hero */
    .np-prod-3highlights {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 10px !important;
        margin-top: 22px !important;
        padding-bottom: 4px !important;
    }

    .np-prod-3highlights::-webkit-scrollbar {
        display: none !important;
    }

    .np-prod-hl-item {
        flex: 0 0 auto !important;
        min-width: 110px !important;
        background: rgba(255, 255, 255, 0.12) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
        display: flex !important;
        align-items: center !important;
        flex-direction: row !important;
        gap: 8px !important;
    }

    .np-prod-hl-icon {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
    }

    .np-prod-hl-icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    .np-prod-hl-item span {
        font-size: 11px !important;
        line-height: 14px !important;
        color: #FFFFFF !important;
        font-weight: 500 !important;
    }

    .np-prod-hl-divider {
        display: none !important;
    }

    /* 2. 3 Nhóm sản phẩm (Horizontal Swipeable Cards) */
    .np-prod-groups-sec {
        padding: 24px 0 !important;
    }

    .np-prod-groups-sec .kt-row-column-wrap {
        padding: 0 16px !important;
    }

    .np-prod-groups-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 14px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 8px !important;
    }

    .np-prod-groups-grid::-webkit-scrollbar {
        display: none !important;
    }

    .np-prod-group-card {
        flex: 0 0 280px !important;
        max-width: 280px !important;
        scroll-snap-align: start !important;
        min-height: 148px !important;
    }

    .np-prod-group-info {
        width: calc(100% - 110px) !important;
        padding: 14px 10px 14px 14px !important;
        min-height: 148px !important;
    }

    .np-prod-group-title {
        font-size: 15px !important;
        line-height: 20px !important;
    }

    .np-prod-group-desc {
        font-size: 11.5px !important;
        line-height: 16px !important;
    }

    .np-prod-group-icon {
        font-size: 20px !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
    }

    .np-prod-group-media {
        width: 120px !important;
        height: 100% !important;
    }

    .np-prod-group-fade {
        width: 50px !important;
    }

    /* 3. Thương hiệu nổi bật (Horizontal Logo Bar) */
    .np-prod-brands-sec {
        padding: 18px 0 !important;
    }

    .np-prod-brands-sec .kt-row-column-wrap {
        padding: 0 16px !important;
    }

    .np-prod-brands-wrap {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .np-prod-brands-title {
        font-size: 17px !important;
        line-height: 23px !important;
    }

    .np-prod-brands-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 20px !important;
        width: 100% !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 6px !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .np-prod-brands-list::-webkit-scrollbar {
        display: none !important;
    }

    .np-prod-brand-item {
        flex: 0 0 auto !important;
    }

    .np-prod-brand-item img {
        max-height: 36px !important;
        width: auto !important;
    }

    .np-prod-brand-next {
        display: none !important;
    }

    /* 4. Danh mục sản phẩm (Catalog Section) */
    .np-prod-catalog-sec {
        padding: 24px 0 40px 0 !important;
    }

    .np-prod-catalog-sec .kt-row-column-wrap {
        padding: 0 16px !important;
    }

    .np-prod-catalog-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        margin-bottom: 20px !important;
        padding-bottom: 14px !important;
    }

    .np-prod-cat-heading {
        font-size: 21px !important;
        line-height: 28px !important;
    }

    .np-prod-search-box {
        width: 100% !important;
        max-width: 100% !important;
        height: 42px !important;
    }

    .np-prod-search-box input {
        width: 100% !important;
        flex: 1 !important;
        height: 42px !important;
        font-size: 13.5px !important;
    }

    .np-prod-search-box button {
        width: 44px !important;
        height: 42px !important;
        font-size: 15px !important;
    }

    /* Sidebar Bộ Lọc */
    .np-prod-sidebar {
        margin-bottom: 20px !important;
        padding: 14px 12px !important;
        border-radius: 8px !important;
    }

    .np-prod-filter-head {
        font-size: 13.5px !important;
        padding: 8px 0 !important;
    }

    .np-prod-cat-item {
        font-size: 13px !important;
        padding: 5px 6px !important;
    }

    .np-brand-checkbox {
        font-size: 12.5px !important;
        padding: 6px 6px !important;
    }

    /* Results Bar */
    .np-prod-results-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }

    .np-prod-count-text {
        font-size: 12.5px !important;
        color: #666666 !important;
    }

    .np-prod-sort-wrap {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-size: 12.5px !important;
    }

    .np-prod-sort-select {
        flex: 1 !important;
        max-width: 190px !important;
        height: 36px !important;
        font-size: 12.5px !important;
    }

    /* Product Grid: 2 Equal Columns */
    .np-prod-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .np-prod-card {
        padding: 10px 10px 12px 10px !important;
        border-radius: 8px !important;
    }

    .np-prod-card-thumb {
        height: 100px !important;
        margin-bottom: 8px !important;
    }

    .np-prod-card-thumb img {
        max-height: 94px !important;
    }

    .np-prod-card-brand {
        font-size: 10.5px !important;
        letter-spacing: 0.3px !important;
    }

    .np-prod-card-name {
        font-size: 12px !important;
        line-height: 16px !important;
        min-height: 32px !important;
        margin-bottom: 8px !important;
    }

    .np-prod-card-btn {
        height: 32px !important;
        font-size: 11.5px !important;
        gap: 6px !important;
        border-radius: 6px !important;
    }

    /* Pagination */
    .np-prod-pagination {
        gap: 6px !important;
        margin-top: 24px !important;
        padding-top: 16px !important;
        flex-wrap: wrap !important;
    }

    .np-prod-page-btn {
        min-width: 34px !important;
        height: 34px !important;
        font-size: 12.5px !important;
        padding: 0 8px !important;
    }

    /* 5. CTA Tư vấn */
    .np-prod-cta-sec,
    .np-prod-cta-sec > .kt-row-layout-inner {
        padding: 30px 0 !important;
        min-height: auto !important;
        background-image:
            linear-gradient(90deg, rgba(122, 0, 0, 0.95) 0%, rgba(143, 0, 0, 0.85) 100%),
            var(--np-row-bg, url('../images/about/about-journey.jpg')) !important;
        background-position: left top, center center !important;
        background-size: 100% 100%, cover !important;
    }

    .np-prod-cta-sec .kt-row-column-wrap {
        padding: 0 16px !important;
    }

    .np-prod-cta-heading {
        font-size: 19px !important;
        line-height: 26px !important;
        margin-bottom: 8px !important;
    }

    .np-prod-cta-sub {
        font-size: 13px !important;
        line-height: 19px !important;
        margin-bottom: 16px !important;
    }

    .np-prod-cta-btn-wrap {
        width: 100% !important;
    }

    .np-prod-cta-btn-wrap .np-btn-white-action {
        width: 100% !important;
        justify-content: center !important;
        font-size: 14px !important;
        height: 44px !important;
    }
}

/* ==========================================================================
   TRANG TRUNG NGUYÊN LEGEND CAFÉ: RESPONSIVE OPTIMIZATION (MOBILE & TABLET)
   ========================================================================== */
.np-cafe-gallery-item,
.np-cafe-card__media,
.np-cafe-intro-card,
.np-cafe-building-photo {
    cursor: zoom-in !important;
}

@media (max-width: 992px) {
    .np-cafe-intro-sec .kt-row-column-wrap {
        flex-direction: column !important;
        gap: 36px !important;
    }
    .np-cafe-intro-content-col,
    .np-cafe-intro-img-col {
        width: 100% !important;
        max-width: 100% !important;
    }
    .np-cafe-menu-sec .kt-row-column-wrap {
        flex-direction: column !important;
        gap: 32px !important;
    }
    .np-cafe-menu-left,
    .np-cafe-menu-right {
        width: 100% !important;
        max-width: 100% !important;
    }
    .np-cafe-find-sec .kt-row-column-wrap {
        flex-direction: column !important;
        gap: 32px !important;
    }
    .np-cafe-find-info-col,
    .np-cafe-find-map-col,
    .np-cafe-find-bldg-col {
        width: 100% !important;
        max-width: 100% !important;
    }
    .np-cafe-cta-sec .kt-row-column-wrap {
        flex-direction: column !important;
        gap: 24px !important;
        text-align: center !important;
    }
    .np-cafe-cta-content-col,
    .np-cafe-cta-btn-col {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    .np-cafe-cta-btn-wrap {
        justify-content: center !important;
    }
}

@media (max-width: 768px) {
    /* 1. Hero Section */
    .np-cafe-hero-sec {
        min-height: 460px !important;
        padding: 36px 0 !important;
        background-position: center 25% !important;
        display: flex !important;
        align-items: center !important;
    }

    .np-cafe-hero-sec::before {
        background: linear-gradient(180deg, 
            rgba(30, 21, 16, 0.45) 0%, 
            rgba(30, 21, 16, 0.85) 50%, 
            rgba(30, 21, 16, 0.98) 100%
        ) !important;
    }

    .np-cafe-hero-sec .kt-row-column-wrap {
        padding: 0 16px !important;
        max-width: 100% !important;
    }

    .np-cafe-hero-col {
        max-width: 100% !important;
        width: 100% !important;
    }

    .np-cafe-badge-svg {
        width: 220px !important;
        max-width: 75% !important;
        height: auto !important;
        margin-bottom: 12px !important;
    }

    .np-cafe-gold-bar {
        width: 48px !important;
        height: 3px !important;
        margin-bottom: 14px !important;
    }

    .np-cafe-hero-title {
        font-size: 26px !important;
        line-height: 33px !important;
        margin-bottom: 12px !important;
    }

    .np-cafe-hero-lead {
        font-size: 14px !important;
        line-height: 22px !important;
        margin-bottom: 22px !important;
        color: rgba(255, 255, 255, 0.92) !important;
        max-width: 100% !important;
    }

    .np-cafe-btn-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .np-cafe-btn-row .kt-button,
    .np-cafe-btn-row a {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        height: 44px !important;
        font-size: 14px !important;
    }

    /* 2. Giới thiệu (Intro Section) */
    .np-cafe-intro-sec {
        padding: 36px 0 !important;
    }

    .np-cafe-intro-sec .kt-row-column-wrap {
        padding: 0 16px !important;
        gap: 28px !important;
    }

    .np-cafe-tag-red {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }

    .np-cafe-h2-serif {
        font-size: 25px !important;
        line-height: 32px !important;
        margin-bottom: 6px !important;
    }

    .np-cafe-h3-light {
        font-size: 17px !important;
        line-height: 24px !important;
        margin-bottom: 14px !important;
    }

    .np-cafe-body-desc {
        font-size: 13.5px !important;
        line-height: 21px !important;
        margin-bottom: 20px !important;
    }

    /* 3 Điểm nổi bật (Swipeable horizontal cards) */
    .np-cafe-3highlights {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 12px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 8px !important;
    }

    .np-cafe-3highlights::-webkit-scrollbar {
        display: none !important;
    }

    .np-cafe-hl-item {
        flex: 0 0 160px !important;
        max-width: 160px !important;
        scroll-snap-align: start !important;
        background: #FFFFFF !important;
        border: 1px solid #ECE7DF !important;
        border-radius: 10px !important;
        padding: 14px 12px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
        text-align: left !important;
    }

    .np-cafe-hl-icon {
        color: #B70000 !important;
        font-size: 22px !important;
        margin-bottom: 8px !important;
    }

    .np-cafe-hl-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        color: #1E1510 !important;
    }

    .np-cafe-hl-sub {
        font-size: 11.5px !important;
        line-height: 15px !important;
        color: #666666 !important;
    }

    .np-cafe-hl-divider {
        display: none !important;
    }

    .np-cafe-intro-card {
        height: 240px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .np-cafe-intro-photo {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .np-cafe-handwriting-script {
        font-size: 22px !important;
        line-height: 26px !important;
        top: 16px !important;
        right: 16px !important;
    }

    /* 3. Không gian (Space Section & Photo Gallery) */
    .np-cafe-space-sec {
        min-height: 320px !important;
        padding: 36px 0 54px 0 !important;
        background-position: center !important;
    }

    .np-cafe-space-sec .kt-row-column-wrap {
        padding: 0 16px !important;
    }

    .np-cafe-tag-gold {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }

    .np-cafe-space-heading {
        font-size: 26px !important;
        line-height: 33px !important;
        margin-bottom: 12px !important;
    }

    .np-cafe-space-lead {
        font-size: 14px !important;
        line-height: 22px !important;
        margin-bottom: 20px !important;
    }

    .np-cafe-sp-btn-wrap .kt-button,
    .np-cafe-sp-btn-wrap a {
        width: 100% !important;
        justify-content: center !important;
        height: 44px !important;
        font-size: 14px !important;
    }

    /* Overlap 4 Photos (Horizontal Swipe Gallery) */
    .np-cafe-overlap-row {
        margin-top: -36px !important;
        padding-bottom: 24px !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .np-cafe-overlap-row .kt-row-column-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 12px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 8px !important;
        margin-top: 0 !important;
    }

    .np-cafe-overlap-row .kt-row-column-wrap::-webkit-scrollbar {
        display: none !important;
    }

    .np-cafe-gallery-item {
        flex: 0 0 230px !important;
        max-width: 230px !important;
        scroll-snap-align: start !important;
    }

    .np-cafe-gallery-item figure,
    .np-cafe-gallery-item img {
        height: 155px !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    }

    /* 4. Thực đơn (Menu Section & Cards) */
    .np-cafe-menu-sec {
        padding: 36px 0 !important;
    }

    .np-cafe-menu-sec .kt-row-column-wrap {
        padding: 0 16px !important;
        gap: 24px !important;
    }

    .np-cafe-menu-heading {
        font-size: 24px !important;
        line-height: 31px !important;
        margin-bottom: 10px !important;
    }

    .np-cafe-menu-sec .np-cafe-body-desc {
        font-size: 13.5px !important;
        line-height: 21px !important;
        margin-bottom: 16px !important;
    }

    .np-cafe-menu-sec .np-btn-white-border {
        width: 100% !important;
        justify-content: center !important;
        height: 44px !important;
        font-size: 14px !important;
    }

    /* Horizontal Swipe Menu Cards */
    .np-cafe-cards-flex {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 14px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 8px !important;
    }

    .np-cafe-cards-flex::-webkit-scrollbar {
        display: none !important;
    }

    .np-cafe-card {
        flex: 0 0 280px !important;
        max-width: 280px !important;
        scroll-snap-align: start !important;
        background: #FFFFFF !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
        border: 1px solid #ECE7DF !important;
    }

    .np-cafe-card__media {
        height: 150px !important;
        width: 100% !important;
    }

    .np-cafe-card__media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .np-cafe-card__title {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #1E1510 !important;
        padding: 12px 14px 6px 14px !important;
    }

    .np-cafe-menu-list {
        padding: 0 14px 14px 14px !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .np-cafe-menu-list li {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-size: 12.5px !important;
        padding: 6px 0 !important;
        border-bottom: 1px dashed #E5E0D8 !important;
    }

    .np-cafe-item-name {
        color: #3D3D3D !important;
    }

    .np-cafe-item-price {
        color: #B70000 !important;
        font-weight: 700 !important;
    }

    /* 5. Địa điểm (Location & Map Section) */
    .np-cafe-find-sec {
        padding: 36px 0 !important;
    }

    .np-cafe-find-sec .kt-row-column-wrap {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        padding: 0 16px !important;
    }

    .np-cafe-find-heading {
        font-size: 24px !important;
        line-height: 31px !important;
        margin-bottom: 10px !important;
    }

    .np-cafe-info-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        margin-bottom: 20px !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .np-cafe-info-list li {
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .np-cafe-info-list-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 15px !important;
        background: #F7F3EE !important;
        color: #B70000 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .np-cafe-info-list-text {
        font-size: 13.5px !important;
        line-height: 19px !important;
        color: #3D3D3D !important;
    }

    .np-cafe-info-list-text strong {
        display: block !important;
        color: #1E1510 !important;
        font-weight: 600 !important;
        font-size: 12.5px !important;
        margin-bottom: 2px !important;
    }

    .np-cafe-find-btn .kt-button,
    .np-cafe-find-btn a {
        width: 100% !important;
        justify-content: center !important;
        height: 44px !important;
        font-size: 14px !important;
    }

    .np-cafe-map-card {
        height: 220px !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
    }

    .np-cafe-map-card iframe {
        width: 100% !important;
        height: 100% !important;
        border: none !important;
    }

    .np-cafe-building-photo {
        height: 200px !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
    }

    .np-cafe-building-photo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* 6. Bottom CTA */
    .np-cafe-cta-sec {
        padding: 36px 0 !important;
        min-height: auto !important;
    }

    .np-cafe-cta-sec .kt-row-column-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 20px !important;
        padding: 0 16px !important;
        text-align: center !important;
    }

    .np-cafe-cta-content-col {
        width: 100% !important;
        text-align: center !important;
    }

    .np-cafe-cta-heading {
        font-size: 22px !important;
        line-height: 29px !important;
        margin-bottom: 8px !important;
        text-align: center !important;
    }

    .np-cafe-cta-sub {
        font-size: 14px !important;
        line-height: 20px !important;
        text-align: center !important;
        margin: 0 !important;
    }

    .np-cafe-cta-btn-col {
        width: 100% !important;
    }

    .np-cafe-cta-btn-wrap {
        width: 100% !important;
        justify-content: center !important;
    }

    .np-cafe-cta-sec .np-btn-white-action {
        width: 100% !important;
        justify-content: center !important;
        height: 46px !important;
        font-size: 14px !important;
    }
}

/* ==========================================================================
   POPUP "XEM TOÀN BỘ THỰC ĐƠN" — TRUNG NGUYÊN LEGEND CAFÉ
   (template-parts/cafe/menu-modal.php)
   PC: cột ảnh tối bên trái + tờ menu giấy kem bên phải.
   Mobile: toàn màn hình — dải ảnh trên, danh sách món, thanh gọi/chỉ đường dưới.
   ========================================================================== */
.np-menu-modal-overlay {
    --np-menu-ink: #2A1D15;
    --np-menu-muted: #75665A;
    --np-menu-line: rgba(42, 29, 21, 0.16);
    --np-menu-paper: #F7F1E6;
    --np-menu-dark: #1E1510;
    --np-menu-gold: #A9813F;
    --np-menu-gold-light: #E2C28A;

    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.np-menu-modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
}

.np-menu-modal-overlay *,
.np-menu-modal-overlay *::before,
.np-menu-modal-overlay *::after {
    box-sizing: border-box;
}

.np-menu-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 13, 9, 0.78);
}

.np-menu-modal-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    width: 100%;
    max-width: 1080px;
    height: min(760px, calc(100vh - 48px));
    background: var(--np-menu-paper);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    transform: translateY(16px);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.np-menu-modal-overlay.is-active .np-menu-modal-dialog {
    transform: none;
}

/* Nút đóng */
.np-menu-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--np-menu-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.np-menu-modal-close:hover {
    background: rgba(42, 29, 21, 0.08);
}

.np-menu-modal-close:focus-visible,
.np-menu-nav-link:focus-visible,
.np-menu-link-call:focus-visible,
.np-menu-link-map:focus-visible {
    outline: 2px solid var(--np-menu-gold);
    outline-offset: 2px;
}

/* ---------- Cột ảnh ---------- */
.np-menu-aside {
    position: relative;
    background: var(--np-menu-dark);
    color: #FFFFFF;
    overflow: hidden;
}

.np-menu-aside-photos,
.np-menu-aside-photos::after {
    position: absolute;
    inset: 0;
}

.np-menu-aside-photos::after {
    content: "";
    background: linear-gradient(180deg, rgba(30, 21, 16, 0.25) 0%, rgba(30, 21, 16, 0.55) 40%, var(--np-menu-dark) 82%);
}

.np-menu-aside-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.np-menu-aside-photo.is-active {
    opacity: 1;
}

.np-menu-aside-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 36px 34px 34px;
}

.np-menu-aside-logo {
    display: block;
    width: 150px;
    height: auto;
}

.np-menu-modal-title {
    margin: auto 0 0 !important;
    font-family: 'Noto Serif Display', 'Noto Serif', serif !important;
    font-size: 56px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #FFFFFF !important;
}

.np-menu-aside-place {
    margin: 12px 0 0;
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    color: var(--np-menu-gold-light);
}

.np-menu-aside-place span {
    display: block;
}

.np-menu-aside-foot {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(226, 194, 138, 0.3);
}

.np-menu-aside-addr {
    margin: 0 0 16px;
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}

.np-menu-aside-actions,
.np-menu-mobile-bar {
    display: flex;
    gap: 10px;
}

.np-menu-link-call,
.np-menu-link-map {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 14px;
    border-radius: 2px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.np-menu-aside .np-menu-link-call {
    background: var(--np-menu-gold-light);
    color: var(--np-menu-dark) !important;
}

.np-menu-aside .np-menu-link-call:hover {
    background: #FFFFFF;
}

.np-menu-aside .np-menu-link-map {
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #FFFFFF !important;
}

.np-menu-aside .np-menu-link-map:hover {
    border-color: #FFFFFF;
}

/* ---------- Tờ thực đơn ---------- */
.np-menu-paper {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--np-menu-paper);
}

/* khung viền mảnh như menu in */
.np-menu-paper::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid var(--np-menu-line);
    pointer-events: none;
}

.np-menu-nav {
    position: relative;
    display: flex;
    gap: 32px;
    margin: 0 56px;
    padding-top: 42px;
    border-bottom: 1px solid var(--np-menu-line);
    overflow-x: auto;
    scrollbar-width: none;
}

.np-menu-nav::-webkit-scrollbar {
    display: none;
}

.np-menu-nav-link {
    flex-shrink: 0;
    padding: 0 0 14px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--np-menu-muted) !important;
    text-decoration: none !important;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.np-menu-nav-link:hover {
    color: var(--np-menu-ink) !important;
}

.np-menu-nav-link.is-active {
    color: var(--np-menu-ink) !important;
    border-bottom-color: var(--np-menu-gold);
}

.np-menu-modal-body {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 56px 44px;
    margin-bottom: 15px;
    scrollbar-width: thin;
    scrollbar-color: rgba(42, 29, 21, 0.25) transparent;
    outline: none;
}

.np-menu-section {
    padding-top: 40px;
}

.np-menu-section-head {
    margin-bottom: 18px;
    text-align: center;
}

.np-menu-section-num {
    display: block;
    margin-bottom: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--np-menu-gold);
}

.np-menu-section-title {
    margin: 0 !important;
    font-family: 'Noto Serif Display', 'Noto Serif', serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--np-menu-ink) !important;
}

.np-menu-section-sub {
    margin: 6px 0 0;
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.5;
    color: var(--np-menu-muted);
}

.np-menu-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.np-menu-item {
    margin: 0 !important;
    padding: 14px 0;
    list-style: none !important;
}

.np-menu-item-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.np-menu-item-name {
    font-family: 'Noto Serif', serif;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--np-menu-ink);
}

.np-menu-item-mark {
    display: block;
    margin-top: 2px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9E0000;
}

.np-menu-item-dots {
    flex: 1;
    min-width: 24px;
    border-bottom: 1px dotted rgba(42, 29, 21, 0.4);
    transform: translateY(-4px);
}

.np-menu-item-price {
    font-family: 'Noto Serif', serif;
    font-size: 16.5px;
    font-weight: 600;
    color: var(--np-menu-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.np-menu-item-desc {
    margin: 4px 0 0 !important;
    padding-right: 48px;
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--np-menu-muted);
}

.np-menu-note {
    margin: 32px 0 0 !important;
    padding-top: 18px;
    border-top: 1px solid var(--np-menu-line);
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--np-menu-muted);
}

.np-menu-mobile-bar {
    display: none;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
    .np-menu-modal-dialog {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .np-menu-modal-title {
        font-size: 40px !important;
        white-space: nowrap;
    }

    .np-menu-aside-inner {
        padding: 28px 24px;
    }

    .np-menu-aside-actions {
        flex-direction: column;
    }

    .np-menu-aside-actions .np-menu-link-call,
    .np-menu-aside-actions .np-menu-link-map {
        flex: none;
    }

    .np-menu-nav {
        margin: 0 40px;
    }

    .np-menu-modal-body {
        padding: 0 40px 36px;
    }

    .np-menu-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Mobile: toàn màn hình ---------- */
@media (max-width: 768px) {
    .np-menu-modal-overlay {
        padding: 0;
        align-items: stretch;
    }

    .np-menu-modal-dialog {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        max-width: none;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        box-shadow: none;
        transform: translateY(24px);
    }

    .np-menu-modal-close {
        top: 12px;
        right: 12px;
        color: #FFFFFF;
        background: rgba(30, 21, 16, 0.45);
    }

    .np-menu-modal-close:hover {
        background: rgba(30, 21, 16, 0.7);
    }

    .np-menu-aside {
        height: 188px;
    }

    .np-menu-aside-photos::after {
        background: linear-gradient(180deg, rgba(30, 21, 16, 0.15) 0%, rgba(30, 21, 16, 0.85) 100%);
    }

    .np-menu-aside-inner {
        padding: 16px 20px 18px;
    }

    .np-menu-aside-logo {
        width: 92px;
    }

    .np-menu-modal-title {
        font-size: 36px !important;
    }

    .np-menu-aside-place {
        margin-top: 4px;
        font-size: 14px;
    }

    .np-menu-aside-place span {
        display: inline;
    }

    .np-menu-aside-place span + span::before {
        content: "· ";
    }

    .np-menu-aside-foot {
        display: none;
    }

    .np-menu-paper::before {
        display: none;
    }

    .np-menu-nav {
        gap: 24px;
        margin: 0;
        padding: 16px 20px 0;
    }

    .np-menu-nav-link {
        padding-bottom: 12px;
        font-size: 12.5px;
    }

    .np-menu-modal-body {
        padding: 0 20px 24px;
        margin-bottom: 0;
    }

    .np-menu-section {
        padding-top: 28px;
    }

    .np-menu-section-head {
        margin-bottom: 6px;
        text-align: left;
    }

    .np-menu-section-title {
        font-size: 24px !important;
    }

    .np-menu-section-sub {
        font-size: 14px;
    }

    .np-menu-item {
        padding: 12px 0;
    }

    .np-menu-item + .np-menu-item {
        border-top: 1px solid rgba(42, 29, 21, 0.08);
    }

    .np-menu-item-name,
    .np-menu-item-price {
        font-size: 15.5px;
    }

    .np-menu-item-mark {
        font-size: 10.5px;
    }

    .np-menu-item-desc {
        padding-right: 0;
        font-size: 13px;
    }

    .np-menu-note {
        text-align: left;
    }

    .np-menu-mobile-bar {
        display: flex;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--np-menu-line);
        background: var(--np-menu-paper);
    }

    .np-menu-mobile-bar .np-menu-link-call {
        background: var(--np-menu-dark);
        color: var(--np-menu-gold-light) !important;
    }

    .np-menu-mobile-bar .np-menu-link-map {
        border: 1px solid rgba(42, 29, 21, 0.35);
        color: var(--np-menu-ink) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .np-menu-modal-overlay,
    .np-menu-modal-dialog,
    .np-menu-aside-photo {
        transition: none !important;
    }
}


/* ======================================================================
   SCROLL REVEAL — các khối hiện dần khi cuộn tới
   Chỉ kích hoạt khi <html> có class .np-reveal-on (do script trong <head>
   gắn vào, và chỉ khi trình duyệt hỗ trợ IntersectionObserver). Nếu JS lỗi
   hoặc bị tắt, toàn bộ nội dung vẫn hiển thị bình thường.
   ====================================================================== */
/* Dùng thuộc tính `translate` / `scale` riêng (không phải `transform`) để không
   đè lên transform sẵn có của thẻ (hiệu ứng nổi khi rê chuột, căn giữa...).
   JS gỡ data-np-reveal sau khi hiện xong để trả lại transition gốc của thẻ. */
html.np-reveal-on [data-np-reveal] {
    opacity: 0;
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        translate 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        scale 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--np-reveal-delay, 0ms);
}

html.np-reveal-on [data-np-reveal="up"],
html.np-reveal-on [data-np-reveal=""] {
    translate: 0 28px;
}

html.np-reveal-on [data-np-reveal="down"] {
    translate: 0 -24px;
}

html.np-reveal-on [data-np-reveal="left"] {
    translate: -36px 0;
}

html.np-reveal-on [data-np-reveal="right"] {
    translate: 36px 0;
}

html.np-reveal-on [data-np-reveal="zoom"] {
    scale: 0.94;
}

/* Mobile: khối trượt ngang khi chưa hiện sẽ lòi ra ngoài màn hình và gây
   cuộn ngang — đổi thành trượt từ dưới lên. */
@media (max-width: 768px) {
    html.np-reveal-on [data-np-reveal="left"],
    html.np-reveal-on [data-np-reveal="right"] {
        translate: 0 28px;
    }
}

html.np-reveal-on [data-np-reveal].np-revealed {
    opacity: 1;
    translate: none;
    scale: none;
}

/* Tôn trọng tuỳ chọn giảm chuyển động của hệ điều hành */
@media (prefers-reduced-motion: reduce) {
    html.np-reveal-on [data-np-reveal] {
        opacity: 1 !important;
        translate: none !important;
        scale: none !important;
        transition: none !important;
    }
}

/* Khi in ấn luôn hiện đầy đủ */
@media print {
    html.np-reveal-on [data-np-reveal] {
        opacity: 1 !important;
        translate: none !important;
        scale: none !important;
    }
}

/* ======================================================================
   HERO SLIDER — banner trang chủ nhiều slide (inc/hero-slider.php)
   Giữ nguyên toàn bộ CSS của .np-hero-v2; chỉ thêm lớp ảnh nền chồng nhau,
   khối chữ xếp chồng, nút trái/phải và chấm điều hướng.
   ====================================================================== */
.np-hero-v2.np-hero-slider {
    background-image: none !important;
    --np-hs-interval: 6000ms;
}

/* Lớp ảnh nền: mỗi slide một lớp, chuyển bằng mờ dần */
.np-hero-bgs {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.np-hero-bg {
    position: absolute;
    inset: 0;
    display: block;
    background-image: var(--np-bg);
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.9s ease;
}

.np-hero-bg.is-active {
    opacity: 1;
}

/* Lớp phủ trắng / tối của hero gốc mờ đi khi slide "Chỉ ảnh" */
.np-hero-slider::before,
.np-hero-slider::after {
    transition: opacity 0.6s ease;
}

.np-hero-slider.is-plain::before,
.np-hero-slider.is-plain::after {
    opacity: 0;
}

/* Khối chữ: các slide xếp chồng cùng một ô lưới => chiều cao = slide cao nhất, không giật */
.np-hero-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.np-hero-slide {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 14px, 0);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.6s;
}

.np-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0.2s, 0.2s, 0s;
}

.np-hero-slider .np-hero-v2-features {
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.np-hero-slider.is-plain .np-hero-v2-features {
    opacity: 0;
    visibility: hidden;
}

.np-hero-slider:not(.is-plain) .np-hero-v2-features {
    transition-delay: 0s;
}

/* Slide "Chỉ ảnh": để cú bấm đi xuyên qua khung chữ xuống ảnh có liên kết */
.np-hero-slider.is-plain .np-hero-v2-container {
    pointer-events: none;
}

.np-hero-bg--link {
    cursor: pointer;
}

/* Nút trái / phải */
.np-hero-nav {
    position: absolute;
    top: 50%;
    z-index: 6;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    color: #B70000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.np-hero-nav--prev { left: 20px; }
.np-hero-nav--next { right: 20px; }

.np-hero-slider:hover .np-hero-nav,
.np-hero-nav:focus-visible {
    opacity: 1;
}

.np-hero-nav:hover {
    background: #B70000;
    color: #FFFFFF;
}

.np-hero-nav:active {
    transform: scale(0.94);
}

.np-hero-nav:focus-visible,
.np-hero-dot:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #B70000;
}

/* Chấm điều hướng — chấm đang chạy kéo dài và "đổ đầy" theo thời gian tự chuyển */
.np-hero-dots {
    position: absolute;
    z-index: 6;
    bottom: 32px;
    right: max(24px, calc((100% - 1440px) / 2 + 80px));
    display: flex;
    align-items: center;
    gap: 8px;
}

.np-hero-dot {
    position: relative;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    cursor: pointer;
    transition: width 0.35s ease, background-color 0.3s ease;
}

.np-hero-dot:hover {
    background: #FFFFFF;
}

.np-hero-dot.is-active {
    width: 32px;
    background: rgba(183, 0, 0, 0.35);
}

.np-hero-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #B70000;
    transform: scaleX(0);
    transform-origin: left center;
}

.np-hero-dot.is-active::after {
    transform: scaleX(1);
}

.np-hero-slider.is-autoplay .np-hero-dot.is-running::after {
    animation: npHeroDotFill var(--np-hs-interval) linear forwards;
}

.np-hero-slider.is-paused .np-hero-dot.is-running::after {
    animation-play-state: paused;
}

@keyframes npHeroDotFill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Thiết bị cảm ứng: luôn hiện nút (không có hover) */
@media (hover: none) {
    .np-hero-nav {
        opacity: 1;
    }
}

@media (max-width: 1200px) {
    .np-hero-dots {
        right: 24px;
    }
}

@media (max-width: 768px) {
    .np-hero-bg {
        background-image: var(--np-bg-m, var(--np-bg));
        background-position: 72% center;
    }

    /* Điện thoại: vuốt + chấm, ẩn nút để không che chữ */
    .np-hero-nav {
        display: none;
    }

    .np-hero-dots {
        right: auto;
        left: 50%;
        bottom: 8px;
        transform: translateX(-50%);
    }

    /* Điện thoại: chữ căn giữa, cả khối nằm giữa banner theo chiều dọc */
    .np-hero-v2 {
        justify-content: center !important;
    }

    .np-hero-v2::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.86) 45%, rgba(255, 255, 255, 0.95) 100%) !important;
    }

    .np-hero-v2-container {
        flex: 1 1 auto !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 28px !important;
        padding-bottom: 20px !important;
    }

    .np-hero-v2-content,
    .np-hero-slide {
        text-align: center !important;
    }

    .np-hero-v2-desc {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 340px !important;
    }

    .np-hero-v2-cta {
        display: flex !important;
        justify-content: center !important;
    }

    /* 4 điểm nổi bật: 4 cột đều, chữ tối trên nền sáng cho dễ đọc */
    .np-hero-v2-features {
        margin-top: 0 !important;
    }

    .np-hero-v2-features-inner {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 4px !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .np-hero-feature-item {
        width: auto !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 6px !important;
    }

    .np-hero-feature-icon {
        color: #B70000 !important;
        width: 28px !important;
        height: 28px !important;
    }

    .np-hero-feature-icon svg {
        width: 26px !important;
        height: 26px !important;
    }

    .np-hero-feature-text {
        color: #1A1A1A !important;
        text-shadow: none !important;
        font-size: 11.5px !important;
        line-height: 15px !important;
        font-weight: 500 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .np-hero-bg,
    .np-hero-slide,
    .np-hero-dot {
        transition: none !important;
    }
    .np-hero-slide {
        transform: none !important;
    }
}

/* ======================================================================
   BRAND CAROUSEL — logo thương hiệu chạy vòng (JS: main.js mục 10)
   Khung nhìn hiển thị đúng 4 logo như Figma (4 × 184 + 3 × 16 = 784px);
   nhiều hơn 4 thì cuộn ngang, ít hơn vẫn chạy vòng nhờ bản sao do JS tạo.
   ====================================================================== */
.np-brands-v2-slider-wrap {
    min-width: 0;
}

.np-brands-v2-list {
    min-width: 0;
    max-width: 784px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    /* chừa chỗ cho bóng đổ + hiệu ứng nhấc thẻ khi rê chuột, không bị khung cắt */
    padding: 10px 4px 16px;
    margin: -10px -4px -16px;
    box-sizing: content-box;
}

.np-brands-v2-list::-webkit-scrollbar {
    display: none;
}

.np-brand-card {
    flex: 0 0 184px;
    box-sizing: border-box;
    text-decoration: none;
}

.np-brand-slider-btn {
    cursor: pointer;
}

.np-brand-slider-btn:active {
    transform: scale(0.94);
}

.np-brand-slider-btn:focus-visible {
    outline: 2px solid #B70000;
    outline-offset: 2px;
}

/* ======================================================================
   TRANG SẢN PHẨM — 3 thẻ nhóm: "Xem chi tiết" luôn thẳng hàng ở đáy thẻ
   (trước đây nội dung canh giữa theo chiều dọc nên thẻ có tiêu đề 3 dòng
   đẩy link lệch xuống so với 2 thẻ còn lại)
   ====================================================================== */
.np-prod-group-info {
    justify-content: flex-start !important;
}

.np-prod-group-body {
    flex: 1 1 auto !important;
    align-items: stretch !important;
}

.np-prod-group-icon {
    align-self: flex-start !important;
}

.np-prod-group-text {
    align-self: stretch !important;
}

.np-prod-group-link {
    margin-top: auto !important;
    align-self: flex-start !important;
}

/* ======================================================================
   TRANG SẢN PHẨM — "Thương hiệu nổi bật" dạng carousel
   JS (main.js mục 10) bọc hàng logo vào .np-prod-brands-carousel và đưa
   2 nút ‹ › ra ngoài hai bên. Không có JS thì vẫn hiển thị như cũ.
   ====================================================================== */
.np-prod-brands-carousel {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
}

.np-prod-brands-carousel .np-prod-brands-list {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    overscroll-behavior-x: contain;
    /* chừa chỗ cho hiệu ứng phóng logo khi rê chuột */
    padding: 6px 0 !important;
    margin: -6px 0 !important;
    /* mờ dần ở 2 mép để logo "trôi" vào/ra mềm mại */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

.np-prod-brands-carousel .np-prod-brands-list::-webkit-scrollbar {
    display: none;
}

/* Ô logo rộng đều nhau => mỗi lần chuyển dịch đúng 1 logo */
.np-prod-brands-carousel .np-prod-brand-item {
    flex: 0 0 160px !important;
    height: 56px;
    box-sizing: border-box;
}

.np-prod-brands-carousel .np-prod-brand-next {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.np-prod-brands-carousel .np-prod-brand-next:active {
    transform: scale(0.94);
}

.np-prod-brands-carousel .np-prod-brand-next:focus-visible {
    outline: 2px solid #B70000;
    outline-offset: 2px;
}

@media (max-width: 992px) {
    .np-prod-brands-carousel {
        width: 100%;
    }
}

/* Điện thoại: vuốt tay, ẩn 2 nút (giữ như thiết kế mobile cũ) */
@media (max-width: 768px) {
    .np-prod-brands-carousel {
        gap: 0;
    }
    .np-prod-brands-carousel .np-prod-brand-next {
        display: none !important;
    }
    .np-prod-brands-carousel .np-prod-brands-list {
        -webkit-mask-image: none;
        mask-image: none;
        padding: 6px 16px !important;
        margin: -6px -16px !important;
    }
    .np-prod-brands-carousel .np-prod-brand-item {
        flex: 0 0 120px !important;
    }
}

/* ======================================================================
   LEGEND CAFÉ — KHÔNG GIAN (Figma 228:512, 1440 x 612)
   Vùng tối cao 430px, 4 ảnh 311x180 bắt đầu ở y=422 (chỉ đè 8px lên vùng tối),
   nằm trên nền kem #F7F3EE.
   ====================================================================== */

/* Lớp phủ tối trái (Figma 228:515): rộng 820/1440 = 56.94%, .95 -> .7 (giữa) -> 0 */
.np-cafe-space-sec > .kt-row-layout-overlay {
    opacity: 1 !important;
    background: linear-gradient(90deg,
        rgba(30, 21, 16, 0.95) 0%,
        rgba(30, 21, 16, 0.7) 28.47%,
        rgba(30, 21, 16, 0) 56.94%) !important;
}

/* Nhãn "KHÔNG GIAN": Roboto 700 13px/1.5, giãn chữ 0.52px, cách tiêu đề 16px */
.np-cafe-space-sec .np-cafe-tag-gold {
    letter-spacing: 0.52px !important;
    line-height: 1.5 !important;
    margin: 0 0 16px 0 !important;
}

/* Tiêu đề: Noto Serif Display 700 44px/1.15 */
.np-cafe-space-heading {
    font-family: 'Noto Serif Display', 'Noto Serif', serif !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
}

/* Mô tả 16px/1.6, cách nút 16 + 6 */
.np-cafe-space-lead {
    line-height: 1.6 !important;
    margin: 0 0 22px 0 !important;
}

/* Nút: cao 48, đệm ngang 24 */
.np-cafe-space-sec .np-cafe-sp-btn-wrap .kb-button {
    min-height: 48px !important;
    padding: 12px 24px !important;
    box-sizing: border-box !important;
}

/* Ảnh: viền trắng 3px, bo 6px, KHÔNG bóng đổ */
.np-cafe-gallery-item figure,
.np-cafe-gallery-item img {
    box-shadow: none !important;
}

.np-cafe-gallery-item figure {
    margin: 0 !important;
    border: 0 !important;
    height: auto !important;
}

.np-cafe-gallery-item:hover img {
    box-shadow: 0 10px 22px rgba(30, 21, 16, 0.18) !important;
}

@media (min-width: 1025px) {
    /* Nội dung bắt đầu x=88, y=56; vùng tối kết thúc đúng 430px */
    .np-cafe-space-sec > .kt-row-column-wrap {
        max-width: 1264px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 56px !important;
        padding-bottom: 98px !important;
        min-height: 430px !important;
        box-sizing: border-box !important;
    }

    /* 4 ảnh: 4 x 311 + 3 x 14 = 1286px, đè 8px lên vùng tối */
    .np-cafe-overlap-row .kt-row-column-wrap {
        max-width: 1286px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 14px !important;
        margin-top: -8px !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 1025px) and (max-width: 1320px) {
    .np-cafe-space-sec > .kt-row-column-wrap,
    .np-cafe-overlap-row .kt-row-column-wrap {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* ======================================================================
   VỀ NHÃ PHƯỢNG v3 — theo layout khách gửi (Figma 219:873)
   Ghi đè các khối .np-about-* phía trên; nội dung nằm trong block của trang.
   ====================================================================== */

/* 1. Hero: ảnh tòa nhà phủ toàn khối, chữ nằm trên vùng trời sáng bên trái */
.np-about-page .np-about-hero {
    min-height: 560px;
    background-color: #F4E9DD;
}

.np-about-page .np-about-hero__bg {
    width: 100%;
    background-position: 72% center;
}

.np-about-page .np-about-hero__overlay {
    background: linear-gradient(90deg, rgba(255, 251, 246, 0.94) 0%, rgba(255, 251, 246, 0.82) 28%, rgba(255, 251, 246, 0.35) 46%, rgba(255, 251, 246, 0) 60%);
}

.np-about-page .np-about-hero__title {
    font-size: 48px;
    margin-bottom: 14px;
}

.np-about-page .np-about-hero__headline {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.22;
}

.np-about-page .np-about-hero__desc {
    font-size: 19px;
    color: #2B2B2B;
    max-width: 440px;
}

/* 3. 6 chỉ số */
.np-about-page .np-about-stats {
    padding: 34px 0 30px;
    background-color: #F5F5F5;
    border: 0;
}

.np-about-page .np-about-stats__item {
    justify-content: flex-start;
    min-height: 0;
    padding: 0 28px;
    border-right-color: #DADADA;
}

.np-about-page .np-about-stats__item:first-child {
    padding-left: 0;
}

.np-about-page .np-about-stats__icon {
    margin-bottom: 12px;
}

/* chừa chỗ cho dòng phụ để các con số luôn thẳng hàng */
.np-about-page .np-about-stats__text {
    min-height: 46px;
}

.np-about-page .np-about-stats__label {
    font-size: 15px;
    font-weight: 600;
    color: #1A1A1A;
}

.np-about-page .np-about-stats__sub {
    font-size: 13px;
    color: #5F5F5F;
}

.np-about-page .np-about-stats__val {
    font-size: 26px;
    margin-top: 12px;
    line-height: 1.15;
}

.np-about-page .np-about-stats__unit {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 500;
}

/* 4. Hành trình: ảnh thành phố + xe Nhã Phượng bên phải, chữ trên nền sáng */
.np-about-page .np-about-journey {
    padding: 64px 0 34px;
    min-height: 0;
    background-color: #FBF4EC;
}

.np-about-page .np-about-journey__bg {
    background-size: cover;
    background-position: right center;
}

.np-about-page .np-about-journey__overlay {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.82) 78%, rgba(255, 255, 255, 0.92) 100%),
        linear-gradient(90deg, rgba(255, 250, 244, 0.9) 0%, rgba(255, 250, 244, 0.72) 32%, rgba(255, 250, 244, 0) 52%);
}

.np-about-page .np-about-journey__header {
    max-width: 600px;
    margin-bottom: 40px;
}

.np-about-page .np-about-journey__title {
    font-size: 42px;
    line-height: 1.2;
}

.np-about-page .np-about-journey__desc {
    color: #333333;
}

.np-about-page .np-about-journey__timeline {
    margin-top: 120px;
}

.np-about-page .np-about-journey__line {
    top: 25px;
    height: 2px;
    background: linear-gradient(90deg, #B70000 0%, #B70000 80%, rgba(183, 0, 0, 0.35) 100%);
}

.np-about-page .np-about-journey__items {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
}

.np-about-page .np-about-journey__dot {
    width: 12px;
    height: 12px;
    margin: 0 0 16px 2px;
    border: 0;
    box-shadow: 0 0 0 4px rgba(183, 0, 0, 0.16);
}

.np-about-page .np-about-journey__year {
    font-size: 19px;
}

.np-about-page .np-about-journey__text {
    font-size: 14px;
    line-height: 1.45;
    color: #333333;
}

/* 5. Sứ mệnh / Tầm nhìn: ảnh nằm nửa phải mỗi thẻ */
.np-about-page .np-about-mv__grid {
    grid-template-columns: 1.26fr 1fr;
    gap: 4px;
    min-height: 290px;
    background: #FFFFFF;
}

.np-about-page .np-about-mv__card {
    padding: 44px 0 44px 100px;
}

.np-about-page .np-about-mv__card--vision {
    padding-left: 40px;
}

.np-about-page .np-about-mv__bg {
    left: auto;
    width: 60%;
}

.np-about-page .np-about-mv__card--vision .np-about-mv__bg {
    width: 46%;
}

.np-about-page .np-about-mv__card--mission .np-about-mv__overlay {
    background: linear-gradient(90deg, #B30000 0%, #B30000 42%, rgba(179, 0, 0, 0.72) 52%, rgba(179, 0, 0, 0.1) 72%, rgba(179, 0, 0, 0) 100%);
}

.np-about-page .np-about-mv__card--vision .np-about-mv__overlay {
    background: linear-gradient(90deg, #111C2E 0%, #111C2E 52%, rgba(17, 28, 46, 0.72) 62%, rgba(17, 28, 46, 0.1) 84%, rgba(17, 28, 46, 0) 100%);
}

.np-about-page .np-about-mv__content {
    max-width: 330px;
}

.np-about-page .np-about-mv__card--vision .np-about-mv__content {
    max-width: 360px;
}

.np-about-page .np-about-mv__icon {
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.np-about-page .np-about-mv__desc {
    font-size: 19px;
    line-height: 1.5;
}

/* 6. Giá trị cốt lõi */
.np-about-page .np-about-values {
    padding: 46px 0 50px;
    background-color: #F6F6F6;
}

.np-about-page .np-about-values__header {
    margin-bottom: 34px;
}

.np-about-page .np-about-values__title {
    font-size: 32px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.np-about-page .np-about-values__item {
    border-right-color: #DCDCDC;
}

.np-about-page .np-about-values__icon {
    height: 44px;
    margin-bottom: 14px;
}

.np-about-page .np-about-values__name {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 6px;
}

.np-about-page .np-about-values__desc {
    font-size: 14.5px;
    color: #444444;
}

/* 7. Chín nhóm năng lực: thẻ nền xám nhạt, không viền */
.np-about-page .np-about-capabilities {
    padding: 50px 0 60px;
    background-color: #FFFFFF;
}

.np-about-page .np-about-cap__header {
    margin-bottom: 30px;
}

.np-about-page .np-about-cap__title {
    font-size: 32px;
    font-weight: 800;
}

.np-about-page .np-about-cap__card {
    background-color: #F4F4F4;
    border: 0;
    border-radius: 10px;
    box-shadow: none;
}

.np-about-page .np-about-cap__thumb {
    height: 96px;
}

.np-about-page .np-about-cap__name {
    font-size: 17px;
}

/* 8. Mạng lưới: chữ | bản đồ | các chi nhánh 2 cột */
.np-about-page .np-about-network {
    padding: 56px 0;
    background-color: #F6F6F6;
}

.np-about-page .np-about-network__grid {
    grid-template-columns: 280px 390px minmax(0, 1fr);
    gap: 28px;
}

.np-about-page .np-about-network__title {
    font-size: 36px;
    line-height: 1.2;
}

.np-about-page .np-about-network__btn {
    padding: 12px 24px;
    border-radius: 999px;
}

.np-about-page .np-about-network__map-wrap {
    position: relative;
    display: block;
}

.np-about-page .np-about-network__map-img,
.np-about-page .np-about-network__map-img img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.np-about-map__labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Vị trí khớp với vn-map.svg (viewBox 615 × 624): mép phải cột nhãn ở x = 32.5% */
.np-about-map__label {
    position: absolute;
    right: calc(67.5% + 5px);
    transform: translateY(-50%);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    color: #1A1A1A;
    text-align: right;
    white-space: nowrap;
}

.np-about-map__label small {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #666666;
}

.np-about-map__label--bencat    { top: 62.18%; }
.np-about-map__label--binhduong { top: 68.59%; }
.np-about-map__label--hcm       { top: 77.56%; }
.np-about-map__label--dongthap  { top: 86.54%; }
.np-about-map__label--vinhlong  { top: 93.91%; }

.np-about-map__island {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: #8A8F99;
    white-space: nowrap;
}

.np-about-map__island--hs { left: 80%; top: 38.46%; }
.np-about-map__island--ts { left: 89%; top: 73.08%; }

.np-about-page .np-about-network__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.np-about-page .np-branch-card {
    border: 0;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}

.np-about-page .np-branch-card__img {
    height: 112px;
}

.np-about-page .np-branch-card__body {
    padding: 12px 14px 14px;
}

.np-about-page .np-branch-card__name {
    font-size: 15px;
    margin-bottom: 4px;
}

.np-about-page .np-branch-card__addr {
    font-size: 12.5px;
    line-height: 1.45;
}

/* 9. Chứng nhận: khung giấy viền vàng như ảnh mẫu, ảnh là giấy tờ thật */
.np-about-page .np-about-certs {
    padding: 56px 0;
    background-color: #FFFFFF;
}

.np-about-page .np-about-certs__grid {
    grid-template-columns: 420px minmax(0, 1fr);
}

.np-about-page .np-about-certs__title {
    font-size: 32px;
}

.np-about-page .np-about-certs__btn {
    border-radius: 6px;
    border-color: #9E9E9E;
}

.np-about-page .np-cert-card__frame {
    height: 236px;
    padding: 12px;
    background: #FFFDF7;
    border: 7px solid #E6D3A6;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px #C8A55C, 0 8px 22px rgba(0, 0, 0, 0.1);
}

.np-about-page .np-cert-card__frame img {
    max-height: 196px;
    box-shadow: none;
}

.np-about-page .np-cert-card__title {
    margin-top: 4px;
}

/* 10. CTA: nền đỏ + ảnh bắt tay */
.np-about-page .np-about-cta {
    padding: 52px 0;
    background-color: #A30000;
}

.np-about-page .np-about-cta__bg {
    background-position: right center;
}

.np-about-page .np-about-cta__overlay {
    width: 100%;
    background: linear-gradient(90deg, #A80000 0%, rgba(168, 0, 0, 0.94) 38%, rgba(168, 0, 0, 0.3) 62%, rgba(110, 0, 0, 0.55) 100%);
}

.np-about-page .np-about-cta__btn {
    padding: 0 30px;
    height: 54px;
    font-size: 16px;
}

@media (max-width: 1200px) {
    .np-about-page .np-about-network__grid {
        grid-template-columns: 260px 300px minmax(0, 1fr);
        gap: 24px;
    }
    .np-about-page .np-about-certs__grid {
        grid-template-columns: 320px minmax(0, 1fr);
    }
}

@media (max-width: 1024px) {
    .np-about-page .np-about-hero__bg {
        opacity: 1;
    }
    .np-about-page .np-about-hero__overlay {
        background: linear-gradient(90deg, rgba(255, 251, 246, 0.95) 0%, rgba(255, 251, 246, 0.8) 55%, rgba(255, 251, 246, 0.3) 100%);
    }
    .np-about-page .np-about-journey__timeline {
        margin-top: 40px;
    }
    .np-about-page .np-about-mv__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .np-about-page .np-about-mv__card,
    .np-about-page .np-about-mv__card--vision {
        padding: 40px 32px;
    }
    .np-about-page .np-about-mv__bg,
    .np-about-page .np-about-mv__card--vision .np-about-mv__bg {
        width: 55%;
    }
    .np-about-page .np-about-network__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .np-about-page .np-about-network__map-wrap {
        display: block;
        max-width: 380px;
        width: 100%;
        justify-self: center;
    }
    .np-about-page .np-about-network__cards {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .np-about-page .np-about-hero {
        min-height: 460px !important;
    }
    .np-about-page .np-about-hero__bg {
        background-position: 70% center !important;
    }
    .np-about-page .np-about-stats__item,
    .np-about-page .np-about-stats__item:first-child {
        padding: 0 12px 0 0;
    }
    .np-about-page .np-about-journey {
        padding: 44px 0 28px;
    }
    .np-about-page .np-about-journey__overlay {
        background: linear-gradient(180deg, rgba(255, 250, 244, 0.92) 0%, rgba(255, 250, 244, 0.8) 45%, rgba(255, 255, 255, 0.9) 100%);
    }
    .np-about-page .np-about-journey__title,
    .np-about-page .np-about-network__title,
    .np-about-page .np-about-values__title,
    .np-about-page .np-about-cap__title {
        font-size: 28px;
    }
    .np-about-page .np-about-mv__bg,
    .np-about-page .np-about-mv__card--vision .np-about-mv__bg {
        width: 100%;
    }
    .np-about-page .np-about-mv__card--mission .np-about-mv__overlay {
        background: linear-gradient(90deg, rgba(179, 0, 0, 0.96) 0%, rgba(179, 0, 0, 0.82) 100%);
    }
    .np-about-page .np-about-mv__card--vision .np-about-mv__overlay {
        background: linear-gradient(90deg, rgba(17, 28, 46, 0.96) 0%, rgba(17, 28, 46, 0.82) 100%);
    }
    .np-about-page .np-about-mv__desc {
        font-size: 17px;
    }
    .np-about-page .np-about-network__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .np-about-page .np-about-network__map-wrap {
        max-width: 340px;
    }
    .np-about-page .np-about-certs__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .np-about-page .np-cert-card__frame {
        height: 220px;
    }
    .np-about-page .np-about-cta__overlay {
        background: linear-gradient(90deg, rgba(168, 0, 0, 0.96) 0%, rgba(168, 0, 0, 0.82) 100%);
    }
}

/* ======================================================================
   TÌM KIẾM — thanh tìm ở header + trang kết quả (search.php)
   ====================================================================== */
/* Thanh tìm ở header: form chiếm đủ bề ngang (trước bị co lại còn ~170px) */
.np-header-search-bar .np-search-form {
    width: 100%;
    max-width: 720px;
    padding: 0 24px;
    box-sizing: border-box;
}

.np-header-search-bar .np-search-input {
    width: 100%;
    min-width: 0;
    height: 48px;
    font-size: 15px;
}

.np-header-search-bar .np-search-submit {
    flex: 0 0 48px;
    height: 48px;
    width: 48px;
    cursor: pointer;
}

.np-header-search-bar .np-search-close {
    flex: 0 0 36px;
    cursor: pointer;
}

/* Trang kết quả */
.np-search-page {
    background: #FFFFFF;
}

.np-search-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.np-search-hero {
    padding: 36px 0 32px;
    background: #F6F6F6;
    border-bottom: 1px solid #ECECEC;
}

.np-search-breadcrumb {
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: #6B6B6B;
    margin-bottom: 10px;
}

.np-search-breadcrumb a {
    color: #6B6B6B;
    text-decoration: none;
}

.np-search-breadcrumb a:hover {
    color: #B70000;
}

.np-search-title {
    margin: 0 0 20px !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #161616 !important;
}

.np-search-page-form {
    position: relative;
    display: flex;
    gap: 10px;
}

.np-search-page-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #8A8A8A;
    display: flex;
    pointer-events: none;
}

.np-search-page-form input[type="search"] {
    flex: 1;
    min-width: 0;
    height: 54px;
    padding: 0 16px 0 46px;
    border: 1px solid #DCDCDC;
    border-radius: 8px;
    background: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #161616;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.np-search-page-form input[type="search"]:focus {
    border-color: #B70000;
    box-shadow: 0 0 0 3px rgba(183, 0, 0, 0.1);
}

.np-search-page-form button {
    flex: 0 0 auto;
    height: 54px;
    padding: 0 28px;
    border: 0;
    border-radius: 8px;
    background: #B70000;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.np-search-page-form button:hover {
    background: #900000;
}

.np-search-summary {
    margin: 16px 0 0;
    font-size: 15px;
    color: #4A4A4A;
}

.np-search-summary strong {
    color: #161616;
}

.np-search-body {
    padding: 28px 0 64px;
}

.np-search-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.np-search-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid #E2E2E2;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: #333333 !important;
    text-decoration: none !important;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.np-search-tab span {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #F1F1F1;
    font-size: 12px;
    text-align: center;
    color: #555555;
}

.np-search-tab:hover {
    border-color: #B70000;
    color: #B70000 !important;
}

.np-search-tab.is-active {
    background: #B70000;
    border-color: #B70000;
    color: #FFFFFF !important;
}

.np-search-tab.is-active span {
    background: rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
}

.np-search-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid;
    gap: 12px;
}

.np-search-item {
    margin: 0 !important;
}

.np-search-item__link {
    display: flex;
    gap: 20px;
    padding: 16px;
    border: 1px solid #ECECEC;
    border-radius: 10px;
    background: #FFFFFF;
    color: inherit !important;
    text-decoration: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.np-search-item__link:hover {
    border-color: #E3C2C2;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.np-search-item__thumb {
    flex: 0 0 132px;
    height: 104px;
    border-radius: 8px;
    overflow: hidden;
    background: #F6F6F6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.np-search-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ảnh sản phẩm thường là bao bì trên nền trắng: hiển thị trọn, không cắt */
.np-search-item--product .np-search-item__thumb {
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
}

.np-search-item--product .np-search-item__thumb img {
    object-fit: contain;
    padding: 6px;
    box-sizing: border-box;
}

.np-search-item__thumb img.np-search-item__logo {
    width: 72%;
    height: auto;
    object-fit: contain;
    opacity: 0.85;
}

.np-search-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.np-search-item__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #7A7A7A;
}

.np-search-item__type {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #B70000;
}

.np-search-item__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: #161616;
}

.np-search-item__link:hover .np-search-item__title {
    color: #B70000;
}

.np-search-item__excerpt {
    font-size: 14px;
    line-height: 1.55;
    color: #555555;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.np-search-item mark {
    background: #FFF0B3;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

.np-search-item__more {
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    color: #B70000;
}

.np-search-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 32px;
}

.np-search-pagination .page-numbers {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E2E2E2;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333333 !important;
    text-decoration: none !important;
    box-sizing: border-box;
}

.np-search-pagination a.page-numbers:hover {
    border-color: #B70000;
    color: #B70000 !important;
}

.np-search-pagination .page-numbers.current {
    background: #B70000;
    border-color: #B70000;
    color: #FFFFFF !important;
}

.np-search-pagination .page-numbers.dots {
    border: 0;
}

.np-search-empty {
    padding: 48px 24px;
    border: 1px dashed #DCDCDC;
    border-radius: 12px;
    text-align: center;
}

.np-search-empty h2 {
    margin: 0 0 8px !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #161616 !important;
}

.np-search-empty p {
    margin: 0 0 18px;
    font-size: 15px;
    color: #555555;
}

.np-search-empty__links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.np-search-empty__links a {
    padding: 9px 18px;
    border: 1px solid #B70000;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #B70000 !important;
    text-decoration: none !important;
}

.np-search-empty__links a:hover {
    background: #B70000;
    color: #FFFFFF !important;
}

@media (max-width: 640px) {
    .np-header-search-bar .np-search-form {
        padding: 0 16px;
        gap: 8px;
    }
    .np-search-wrap {
        padding: 0 16px;
    }
    .np-search-hero {
        padding: 24px 0;
    }
    .np-search-title {
        font-size: 26px !important;
    }
    .np-search-page-form button {
        padding: 0 18px;
    }
    .np-search-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-right: -16px;
        padding-right: 16px;
    }
    .np-search-tabs::-webkit-scrollbar {
        display: none;
    }
    .np-search-tab {
        flex: 0 0 auto;
    }
    .np-search-item__link {
        gap: 14px;
        padding: 12px;
    }
    .np-search-item__thumb {
        flex-basis: 88px;
        height: 88px;
    }
    .np-search-item__title {
        font-size: 16px;
    }
    .np-search-item__excerpt {
        font-size: 13px;
    }
}

/* Trang Kinh doanh & Sản phẩm: ảnh nay là block Ảnh (có <figure> bọc ngoài) */
.np-prod-group-media .wp-block-image,
.np-prod-brand-item .wp-block-image {
    margin: 0 !important;
}

.np-prod-group-media .wp-block-image {
    width: 100%;
    height: 100%;
}

.np-prod-bc-sep {
    font-size: 10px;
    margin: 0 4px;
}
/* ======================================================================
   KHỐI SỬA ĐƯỢC: ẩn/hiện, danh sách thêm/xoá/kéo thẻ (inc/block-box.php)
   ====================================================================== */

/* "Ẩn trên máy tính / điện thoại" ở thanh bên của khối */
@media (min-width: 769px) {
    .np-hide-desktop { display: none !important; }
}
@media (max-width: 768px) {
    .np-hide-mobile { display: none !important; }
}

/* Trình soạn thảo: khối đang ẩn vẫn hiện (mờ + nhãn) để bật lại được.
   Các lớp np-editor-* chỉ có trong editor nên không ảnh hưởng website. */
.np-editor-hidden,
.np-editor-hide-desktop,
.np-editor-hide-mobile {
    position: relative;
    outline: 2px dashed #B70000 !important;
    outline-offset: -2px;
}
.np-editor-hidden {
    opacity: 0.4 !important;
}
.np-editor-hidden::after,
.np-editor-hide-desktop::after,
.np-editor-hide-mobile::after {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 60 !important;
    width: auto !important;
    height: auto !important;
    padding: 5px 8px !important;
    border-radius: 3px !important;
    background: #B70000 !important;
    color: #FFFFFF !important;
    font: 600 11px/1 'Roboto', sans-serif !important;
    letter-spacing: 0.04em !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}
.np-editor-hidden::after { content: 'ĐANG ẨN' !important; }
.np-editor-hide-desktop::after { content: 'ẨN TRÊN MÁY TÍNH' !important; }
.np-editor-hide-mobile::after { content: 'ẨN TRÊN ĐIỆN THOẠI' !important; }
.np-editor-hide-desktop.np-editor-hide-mobile::after { content: 'ẨN TRÊN MÁY TÍNH & ĐIỆN THOẠI' !important; }

/* ---- Vạch ngăn / mũi tên giữa các thẻ: vẽ bằng CSS để thêm/xoá thẻ không lệch ----
   Khoảng cách giữ đúng như khi vạch còn là một phần tử riêng. */
.np-hero-feature-item,
.np-prod-hl-item,
.np-coop-pillar-item,
.np-benefit-item,
.np-hero-need-item,
.np-coop-step-card {
    position: relative;
}

.np-hero-feature-item + .np-hero-feature-item::before,
.np-prod-hl-item + .np-prod-hl-item::before,
.np-coop-pillar-item + .np-coop-pillar-item::before,
.np-benefit-item + .np-benefit-item::before,
.np-hero-need-item + .np-hero-need-item::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 1px;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Trang chủ: 4 điểm nổi bật ở banner (vạch 56px, cách 8px mỗi bên) */
@media (min-width: 993px) {
    .np-hero-feature-item + .np-hero-feature-item { margin-left: 17px; }
    .np-hero-feature-item + .np-hero-feature-item::before { left: -9px; height: 56px; background: rgba(255, 255, 255, 0.4); }
}

/* Sản phẩm: 3 điểm nổi bật ở hero (gap 28px, vạch 36px) */
@media (min-width: 769px) {
    .np-prod-hl-item + .np-prod-hl-item { margin-left: 29px !important; }
    .np-prod-hl-item + .np-prod-hl-item::before { left: -29px; height: 36px; background: #FFFFFF; }
}

/* Hợp tác: 5 điểm mạnh (vạch 84px, cách 4px mỗi bên) */
@media (min-width: 993px) {
    .np-coop-pillar-item + .np-coop-pillar-item { margin-left: 9px !important; }
    .np-coop-pillar-item + .np-coop-pillar-item::before { left: -5px; height: 84px; background: #E4E4E4; }
}

/* Tuyển dụng: 6 phúc lợi (vạch 72px) */
@media (min-width: 769px) {
    .np-benefit-item + .np-benefit-item::before { height: 72px; background: #E4E4E4; }
}
@media (min-width: 1201px) {
    .np-benefit-item + .np-benefit-item { margin-left: 1px !important; }
    .np-benefit-item + .np-benefit-item::before { left: -1px; }
}
@media (min-width: 769px) and (max-width: 1200px) {
    .np-benefit-item + .np-benefit-item { margin-left: 21px !important; }
    .np-benefit-item + .np-benefit-item::before { left: -21px; }
}

/* Liên hệ: 3 nhu cầu ở hero (vạch 40px) */
@media (min-width: 769px) {
    .np-hero-need-item + .np-hero-need-item::before { height: 40px; background: rgba(255, 255, 255, 0.35); }
}
@media (min-width: 993px) {
    .np-hero-need-item + .np-hero-need-item { margin-left: 21px !important; }
    .np-hero-need-item + .np-hero-need-item::before { left: -21px; }
}
@media (min-width: 769px) and (max-width: 992px) {
    .np-hero-need-item + .np-hero-need-item { margin-left: 17px !important; }
    .np-hero-need-item + .np-hero-need-item::before { left: -17px; }
}

/* Hợp tác: mũi tên giữa 4 bước */
.np-coop-step-card + .np-coop-step-card::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12H19' stroke='%23C59B4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 5L19 12L12 19' stroke='%23C59B4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}
@media (min-width: 993px) {
    .np-coop-step-card + .np-coop-step-card { margin-left: 32px !important; }
    .np-coop-step-card + .np-coop-step-card::before { left: -32px; top: 50%; transform: translateY(-50%); }
}
@media (min-width: 769px) and (max-width: 992px) {
    .np-coop-step-card + .np-coop-step-card { margin-top: 40px !important; }
    .np-coop-step-card + .np-coop-step-card::before { top: -36px; left: 50%; transform: translateX(-50%) rotate(90deg); }
}
@media (max-width: 768px) {
    .np-coop-step-card + .np-coop-step-card::before { display: none; }
}

/* Vạch ngăn cũ (36px / 40px) cao hơn thẻ nên từng quyết định chiều cao hàng — giữ nguyên chiều cao đó */
@media (min-width: 769px) {
    .np-prod-hl-item { min-height: 36px; }
    .np-hero-need-item { min-height: 40px; }
}
/* ======================================================================
   DANH SÁCH THÊM/XOÁ THẺ ĐƯỢC — GIỮ BỐ CỤC KHÔNG VỠ
   (1) Lưới thẻ nội dung: xuống hàng, tối đa N cột, hàng cuối căn giữa
   (2) Dải một hàng (chỉ số, hành trình, các bước...): giữ một hàng, thừa thì
       trượt ngang + nút ‹ › (JS main.js mục 11)
   (3) Chữ dài / ảnh lệch tỉ lệ không làm thẻ cao lệch nhau
   ====================================================================== */

/* ---- (1) Lưới thẻ: máy tính ---- */
@media (min-width: 1201px) {
    .np-cat-cards-grid { --np-cols: 4; --np-gap: 20px; }
    .np-why-v2-grid { --np-cols: 6; --np-gap: 16px; }
    .np-about-cap__row--4 { --np-cols: 4; --np-gap: 20px; }
    .np-about-cap__row--5 { --np-cols: 5; --np-gap: 20px; }
    .np-about-certs__list { --np-cols: 4; --np-gap: 20px; }
    .np-about-page .np-about-network__cards { --np-cols: 2; --np-gap: 16px; }
    .np-coop-directions-grid { --np-cols: 3; --np-gap: 24px; }
    .np-coop-partners-right { --np-cols: 5; --np-gap: 14px; }
    .np-career-cards-grid { --np-cols: 6; --np-gap: 16px; }
    .np-career-moments-gallery { --np-cols: 5; --np-gap: 16px; }
    .np-branches-grid { --np-cols: 4; --np-gap: 20px; }
    .np-prod-groups-grid { --np-cols: 3; --np-gap: 24px; }

    .np-cat-cards-grid,
    .np-why-v2-grid,
    .np-about-cap__row--4,
    .np-about-cap__row--5,
    .np-about-certs__list,
    .np-about-page .np-about-network__cards,
    .np-coop-directions-grid,
    .np-coop-partners-right,
    .np-career-cards-grid,
    .np-career-moments-gallery,
    .np-branches-grid,
    .np-prod-groups-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: var(--np-gap) !important;
        grid-template-columns: none !important;
    }

    .np-cat-cards-grid > *,
    .np-why-v2-grid > *,
    .np-about-cap__row--4 > *,
    .np-about-cap__row--5 > *,
    .np-about-certs__list > *,
    .np-about-page .np-about-network__cards > *,
    .np-coop-directions-grid > *,
    .np-coop-partners-right > *,
    .np-career-cards-grid > *,
    .np-career-moments-gallery > *,
    .np-branches-grid > *,
    .np-prod-groups-grid > * {
        flex: 0 0 calc((100% - (var(--np-cols) - 1) * var(--np-gap)) / var(--np-cols)) !important;
        max-width: calc((100% - (var(--np-cols) - 1) * var(--np-gap)) / var(--np-cols)) !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
}

/* ---- (2) Dải một hàng: máy tính — giữ một hàng, thừa thì trượt ngang ---- */
@media (min-width: 1025px) {
    .np-about-stats__grid,
    .np-about-page .np-about-journey__items,
    .np-about-values__grid,
    .np-coop-pillars-container,
    .np-career-benefits-wrapper,
    .np-coop-steps-row,
    .np-hero-v2-features-inner,
    .np-contact-hero-needs,
    .np-prod-3highlights {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;
        scrollbar-width: none !important;
        grid-template-columns: none !important;
    }
    .np-about-stats__grid::-webkit-scrollbar,
    .np-about-page .np-about-journey__items::-webkit-scrollbar,
    .np-about-values__grid::-webkit-scrollbar,
    .np-coop-pillars-container::-webkit-scrollbar,
    .np-career-benefits-wrapper::-webkit-scrollbar,
    .np-coop-steps-row::-webkit-scrollbar,
    .np-hero-v2-features-inner::-webkit-scrollbar,
    .np-contact-hero-needs::-webkit-scrollbar,
    .np-prod-3highlights::-webkit-scrollbar {
        display: none;
    }

    /* chừa chỗ cho bóng đổ / hiệu ứng nổi khi rê chuột (overflow cắt cả chiều dọc) */
    .np-about-stats__grid,
    .np-about-page .np-about-journey__items,
    .np-about-values__grid,
    .np-coop-pillars-container,
    .np-career-benefits-wrapper,
    .np-coop-steps-row {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        margin-top: -10px !important;
        margin-bottom: -10px !important;
    }

    /* ít thẻ: giãn đều đầy hàng như thiết kế; nhiều thẻ: giữ bề rộng tối thiểu và trượt */
    .np-about-stats__item { flex: 1 0 170px !important; max-width: none !important; }
    .np-about-page .np-about-journey__item { flex: 1 0 160px !important; max-width: none !important; }
    .np-about-values__item { flex: 1 0 200px !important; max-width: none !important; }
    .np-coop-pillar-item { flex: 1 0 200px !important; }
    .np-benefit-item { flex: 1 0 170px !important; max-width: none !important; }
    .np-coop-step-card { flex: 1 0 240px !important; }
    .np-hero-feature-item { flex: 0 1 150px !important; min-width: 120px; }
    .np-hero-need-item,
    .np-prod-hl-item { flex: 0 0 auto !important; }

    /* Hành trình: đường kẻ vẽ theo từng mốc => trượt ngang vẫn liền mạch */
    .np-about-page .np-about-journey__line { display: none !important; }
    .np-about-page .np-about-journey__item { position: relative; }
    .np-about-page .np-about-journey__dot { position: relative; z-index: 1; }
    .np-about-page .np-about-journey__item::after {
        content: '';
        position: absolute;
        top: 5px;            /* tâm chấm 12px */
        left: 8px;
        width: calc(100% + 24px);
        height: 2px;
        background: #B70000;
        z-index: 0;
        pointer-events: none;
    }
    .np-about-page .np-about-journey__item:last-child::after {
        width: calc(100% - 8px);
        background: linear-gradient(90deg, #B70000 0%, rgba(183, 0, 0, 0.35) 100%);
    }
}

/* Nút ‹ › + mờ dần ở mép khi dải có nội dung tràn (lớp do JS gắn) */
.np-hscroll {
    position: relative;
}
.np-hscroll.is-overflow > .np-hscroll-list {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.np-hscroll.at-start > .np-hscroll-list {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
}
.np-hscroll.at-end > .np-hscroll-list {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px);
    mask-image: linear-gradient(90deg, transparent 0, #000 28px);
}
.np-hscroll-btn {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 38px;
    height: 38px;
    margin-top: -19px;
    padding: 0;
    border: 1px solid #E3E3E3;
    border-radius: 50%;
    background: #FFFFFF;
    color: #B70000;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.np-hscroll-btn:hover { background: #B70000; color: #FFFFFF; border-color: #B70000; }
.np-hscroll-btn[disabled] { opacity: 0; pointer-events: none; }
.np-hscroll-btn--prev { left: -19px; }
.np-hscroll-btn--next { right: -19px; }
.np-hscroll.is-overflow > .np-hscroll-btn { display: flex; }

/* Chấm vị trí (điện thoại) */
.np-hscroll-dots {
    display: none;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}
.np-hscroll-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.18);
    transition: width 0.25s ease, background-color 0.25s ease;
}
.np-hscroll-dots button.is-active { width: 20px; background: #B70000; }
.np-on-dark .np-hscroll-dots button { background: rgba(255, 255, 255, 0.35); }
.np-on-dark .np-hscroll-dots button.is-active { background: #FFFFFF; }

@media (max-width: 1024px) {
    .np-hscroll-btn { display: none !important; }
    .np-hscroll > .np-hscroll-list { -webkit-mask-image: none !important; mask-image: none !important; }
}
@media (max-width: 768px) {
    .np-hscroll.is-overflow > .np-hscroll-dots { display: flex; }
}

/* ---- Điện thoại: lưới ít chữ => 2 cột xuống hàng thay vì vuốt ---- */
@media (max-width: 768px) {
    .np-about-page .np-about-values__grid,
    .np-why-v2-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px 12px !important;
        overflow: visible !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .np-about-page .np-about-values__item,
    .np-why-v2-grid > * {
        flex: none !important;
        max-width: none !important;
        width: auto !important;
        border-right: 0 !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* ---- (3) Chữ dài / ảnh lệch tỉ lệ không làm vỡ thẻ ---- */
.np-about-cap__name,
.np-why-title,
.np-env-card-title,
.np-coop-dir-heading,
.np-coop-seek-name,
.np-coop-step-title,
.np-branch-card__name,
.np-branch-name,
.np-cert-card__title,
.np-about-values__name {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.np-why-desc,
.np-env-card-desc,
.np-coop-dir-desc,
.np-coop-seek-desc,
.np-coop-step-desc,
.np-branch-card__addr,
.np-branch-address,
.np-cert-card__sub,
.np-about-values__desc,
.np-about-journey__text,
.np-about-stats__sub {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

/* Ảnh trong thẻ luôn lấp đầy khung, không kéo giãn */
.np-cat-card-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
}
.np-coop-dir-thumb img,
.np-env-thumb img,
.np-branch-thumb img,
.np-moment-item img,
.np-prod-group-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Điện thoại: banner trang chủ quá 4 điểm nổi bật => vuốt ngang thay vì chen 3 hàng */
@media (max-width: 768px) {
    .np-hero-v2-features-inner:has(> :nth-child(5)) {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none !important;
    }
    .np-hero-v2-features-inner:has(> :nth-child(5)) > * {
        flex: 0 0 calc(25% - 3px) !important;
        scroll-snap-align: start;
    }
}
/* Header ở laptop 1201–1360px: menu + nút "Mua online" từng tràn ra ngoài màn hình (1280px thừa 54px) */
@media (min-width: 1201px) and (max-width: 1360px) {
    .np-header-v2-container {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    .np-header-nav .np-nav-link {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}@media (min-width: 1201px) and (max-width: 1260px) {
    .np-header-v2-container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .np-header-nav .np-nav-link {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}
/* ======================================================================
   Phản hồi khách (Chỉnh sửa.docx, 13/10/2026)
   ====================================================================== */

/* Trang Tin tức: khung rộng bằng Liên hệ / Tuyển dụng (1400px) */
.np-news-page .np-sp-container {
    max-width: 1400px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

/* Liên hệ: 5 chi nhánh nằm cùng một hàng trên máy tính */
@media (min-width: 1201px) {
    .np-branches-grid:has(> :nth-child(5):last-child) { --np-cols: 5; --np-gap: 18px; }
}

/* Hợp tác: khung địa chỉ / điện thoại + ảnh cao bằng form bên phải */
@media (min-width: 993px) {
    .np-coop-form-grid {
        align-items: stretch !important;
    }
    .np-coop-form-left {
        display: flex !important;
        flex-direction: column !important;
    }
    .np-coop-form-left .np-coop-contact-box {
        flex: 1 1 auto !important;
    }
    .np-coop-form-left .np-coop-cb-img {
        position: relative !important;
    }
    .np-coop-form-left .np-coop-cb-img img {
        position: absolute !important;
        inset: 0 !important;
        min-height: 0 !important;
    }
}

/* Café: logo Trung Nguyên Legend chính thức (ảnh PNG trắng) */
.np-cafe-badge .wp-block-image img[src*="trung-nguyen-legend-logo"] {
    width: auto !important;
    height: 112px !important;
    max-height: none !important;
}
@media (max-width: 768px) {
    .np-cafe-badge .wp-block-image img[src*="trung-nguyen-legend-logo"] {
        width: auto !important;
        height: 84px !important;
    }
}

/* Liên hệ: ảnh trụ sở (Ảnh 17) trong ô "Liên hệ theo nhu cầu" lấy phần toà nhà */
.np-needs-thumb img {
    object-position: 72% center !important;
}

/* Hợp tác: chữ trong khung liên hệ to hơn cho cân với khung đã kéo cao */
@media (min-width: 993px) {
    .np-coop-form-left .np-coop-cb-info {
        padding: 28px 24px !important;
        gap: 18px !important;
    }
    .np-coop-form-left .np-coop-cb-row {
        font-size: 15.5px !important;
        line-height: 23px !important;
    }
}

/* Thẻ chi nhánh (Liên hệ, Về Nhã Phượng): cùng chiều cao trong một hàng, nút "Xem bản đồ" sát đáy */
.np-branches-grid,
.np-about-network__cards {
    align-items: stretch !important;
}
.np-branches-grid > .np-branch-card,
.np-about-network__cards > .np-branch-card {
    height: auto !important;
}

/* Về Nhã Phượng: 7–8 mốc hành trình vẫn nằm gọn một hàng trên máy tính (không trượt ngang) */
@media (min-width: 1025px) {
    .np-about-page .np-about-journey__items:has(> :nth-child(7)) {
        gap: 16px !important;
    }
    .np-about-page .np-about-journey__items:has(> :nth-child(7)) > .np-about-journey__item {
        flex: 1 0 128px !important;
    }
    .np-about-page .np-about-journey__items:has(> :nth-child(7)) .np-about-journey__year {
        font-size: 18px;
    }
    .np-about-page .np-about-journey__items:has(> :nth-child(7)) .np-about-journey__text {
        font-size: 13.5px;
    }
}

/* ======================================================================
   Trang chủ — Banner dạng poster (ảnh nền + logo, chữ, 4 điểm mạnh,
   khối Trung Nguyên Legend Café). Mọi chữ / ảnh / icon / nút là block,
   sửa trực tiếp trong trình soạn thảo. Vị trí tính theo % của ảnh nền
   1660 × 948, cỡ chữ theo bề rộng banner (cqw) nên giữ đúng bố cục ảnh mẫu.
   ====================================================================== */
.np-hero-poster {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1660 / 948;
    container-type: inline-size;
    background-color: #F4EFE8;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
.np-hero-poster-shade {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none;
    background:
        radial-gradient(ellipse 34% 42% at 19% 17%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.35) 55%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(90deg, rgba(20, 12, 8, 0.82) 0%, rgba(20, 12, 8, 0.6) 22%, rgba(20, 12, 8, 0) 34%) left bottom / 100% 23% no-repeat;
}
.np-hero-poster-inner {
    position: absolute !important;
    inset: 0 !important;
}

/* Logo + tên + khẩu hiệu (khoảng trời trống bên trái) */
.np-hero-poster-brand {
    position: absolute !important;
    left: 5.5% !important;
    top: 3.2% !important;
    width: 27% !important;
    text-align: center;
}
.np-hero-poster-logo,
.np-hero-poster-logo.wp-block-image {
    margin: 0 auto 0.6cqw !important;
    max-width: none !important;
}
.np-hero-poster-logo img {
    display: block;
    width: 12.5cqw !important;
    height: auto !important;
    margin: 0 auto !important;
}
.np-hero-poster-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 2.8cqw !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    color: #C41230 !important;
    margin: 0 0 0.9cqw !important;
    letter-spacing: 0.02em;
}
.np-hero-poster-slogan {
    font-family: 'Roboto', sans-serif !important;
    font-size: 1.55cqw !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #3B3B3B !important;
    text-transform: uppercase;
    margin: 0 0 0.6cqw !important;
}
.np-hero-poster-slogan::after {
    content: "";
    display: block;
    width: 5.5cqw !important;
    height: 2px;
    margin: 0.7cqw auto 0;
    background: #C41230;
}
.np-hero-poster-desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 1.08cqw !important;
    line-height: 1.5 !important;
    color: #2B2B2B !important;
    margin: 0 !important;
}

/* 4 điểm mạnh (giữa trên) */
.np-hero-poster-features {
    position: absolute !important;
    left: 31.6% !important;
    top: 6.2% !important;
    width: 41.4% !important;
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.np-hero-poster-features > li,
.np-hero-poster-features > .block-editor-block-list__block {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 !important;
    padding: 0 0.6cqw !important;
    text-align: center;
    border-left: 1px solid rgba(60, 60, 60, 0.22);
    list-style: none !important;
}
.np-hero-poster-features > :first-child {
    border-left: 0;
}
.np-hero-poster-ficon {
    display: block !important;
    font-size: 2.35cqw !important;
    line-height: 1 !important;
    color: #C41230 !important;
    margin: 0 auto 0.8cqw !important;
}
.np-hero-poster-ftext {
    font-family: 'Roboto', sans-serif !important;
    font-size: 0.8cqw !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    color: #2B2B2B !important;
    text-transform: uppercase;
    white-space: nowrap;   /* xuống dòng đúng chỗ <br> như ảnh mẫu */
}

/* Khối Trung Nguyên Legend Café (góc dưới bên trái, trên ảnh quán) */
.np-hero-poster-cafe {
    position: absolute !important;
    left: 3% !important;
    bottom: 1.6% !important;
    width: 25% !important;
    color: #FFFFFF;
}
.np-hero-poster-cafe-title {
    font-family: 'Noto Serif', serif !important;
    font-size: 1.42cqw !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    text-transform: uppercase;
    margin: 0 0 0.3cqw !important;
}
.np-hero-poster-cafe-sub {
    font-family: 'Noto Serif', serif !important;
    font-size: 1.28cqw !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: #F2C57C !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.8cqw !important;
}
.np-hero-poster-cafe-desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 1.05cqw !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    margin: 0 0 1.1cqw !important;
}
.np-hero-poster-cafe-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 0.6cqw;
    padding: 0.55cqw 1.5cqw !important;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    color: #FFFFFF !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.np-hero-poster-cafe-btn,
.np-hero-poster-cafe-btn *:not(i) {
    font-family: 'Roboto', sans-serif !important;
    font-size: 0.85cqw !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: inherit !important;
}
.np-hero-poster-cafe-btn:hover {
    background-color: #FFFFFF;
    color: #2A1A12 !important;
}

/* Máy tính bảng / điện thoại: ảnh nền nguyên khung ở trên, chữ xếp bên dưới */
@media (max-width: 1024px) {
    .np-hero-poster {
        aspect-ratio: auto;
        container-type: normal;
        padding-top: 57.1% !important;   /* 948 / 1660 */
        background-size: 100% auto !important;
        background-position: center top !important;
        background-color: #FFFFFF;
    }
    .np-hero-poster-shade {
        display: none;
    }
    .np-hero-poster-inner,
    .np-hero-poster-brand,
    .np-hero-poster-features,
    .np-hero-poster-cafe {
        position: static !important;
        width: auto !important;
    }
    .np-hero-poster-inner {
        padding: 22px 16px 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .np-hero-poster-logo img { width: 150px !important; }
    .np-hero-poster-logo { margin-bottom: 8px !important; }
    .np-hero-poster-title { font-size: 30px !important; margin-bottom: 8px !important; }
    .np-hero-poster-slogan { font-size: 17px !important; }
    .np-hero-poster-slogan::after { width: 56px; margin-top: 10px; }
    .np-hero-poster-desc { font-size: 14.5px !important; }
    .np-hero-poster-features {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 0;
        padding: 16px 8px !important;
        background: #F7F2F2;
        border-radius: 12px;
    }
    .np-hero-poster-features > li { padding: 0 8px !important; }
    .np-hero-poster-features > :nth-child(odd) { border-left: 0; }
    .np-hero-poster-ficon { font-size: 26px !important; margin-bottom: 8px !important; }
    .np-hero-poster-ftext { font-size: 11.5px !important; }
    .np-hero-poster-cafe {
        margin: 0 -16px;
        padding: 22px 16px 26px;
        background: #21140E;
    }
    .np-hero-poster-cafe-title { font-size: 19px !important; }
    .np-hero-poster-cafe-sub { font-size: 16px !important; margin-bottom: 8px !important; }
    .np-hero-poster-cafe-desc { font-size: 14px !important; margin-bottom: 14px !important; }
    .np-hero-poster-cafe-btn { padding: 8px 18px !important; gap: 8px; }
    .np-hero-poster-cafe-btn, .np-hero-poster-cafe-btn *:not(i) { font-size: 12.5px !important; }
    .np-hero-poster-cafe-btn i { font-size: 12px !important; }
    .np-hero-poster-ftext { white-space: normal; }
}

/* Popup xem ngay trên trang: video giới thiệu, giấy chứng nhận (main.js mục 12) */
html.np-popup-open { overflow: hidden; }
.np-popup[hidden] { display: none !important; }
.np-popup {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 24px 24px;
}
.np-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 12, 0.86);
}
.np-popup__box {
    position: relative;
    width: min(1100px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.np-popup--gallery .np-popup__box { width: min(900px, 100%); }
.np-popup__stage {
    width: 100%;
    display: flex;
    justify-content: center;
}
.np-popup--video .np-popup__stage {
    aspect-ratio: 16 / 9;
    background: #000000;
    border-radius: 10px;
    overflow: hidden;
}
.np-popup__stage iframe,
.np-popup__stage video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.np-popup__stage img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 170px);
    object-fit: contain;
    border-radius: 6px;
    background: #FFFFFF;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.np-popup__caption {
    margin-top: 14px;
    text-align: center;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    line-height: 1.45;
}
.np-popup__caption strong { display: block; font-size: 17px; }
.np-popup__caption span { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.8); }
.np-popup__caption em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.np-popup__close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    font-size: 28px;
    line-height: 40px;
    cursor: pointer;
}
.np-popup__nav {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
    font-size: 30px;
    line-height: 44px;
    cursor: pointer;
    z-index: 2;
}
.np-popup__nav[hidden] { display: none; }
.np-popup__nav--prev { left: -64px; }
.np-popup__nav--next { right: -64px; }
.np-popup__close:hover,
.np-popup__nav:hover { background: #B70000; }
@media (max-width: 1024px) {
    .np-popup { padding: 64px 12px 24px; }
    .np-popup__nav--prev { left: 6px; }
    .np-popup__nav--next { right: 6px; }
}

/* Thẻ video chưa có link: vẫn giữ nút phát cho đẹp, chỉ bỏ con trỏ bấm */
.np-about-video-card:not(a) { cursor: default; }

/* Về Nhã Phượng: 5 giấy chứng nhận cùng một hàng trên máy tính */
@media (min-width: 1201px) {
    .np-about-certs__list:has(> :nth-child(5):last-child) { --np-cols: 5; --np-gap: 16px; }
}

/* Thông báo gửi form (main.js mục 13): lỗi chung + form Đặt hàng sỉ */
.np-quote-status { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: 14px; line-height: 1.45; }
.np-quote-status.success { background: #EAF7EE; color: #1E7B3A; }
.np-coop-form-status.error,
.np-contact-status.error,
.np-apply-status.error,
.np-newsletter-status.error,
.np-quote-status.error { background: #FDECEC !important; color: #B70000 !important; border-color: #F5C2C2 !important; }