/* W.E.St. Vietnam - Clean Static Site CSS */

/* ── Base Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:Arial,'Helvetica Neue',sans-serif;color:#333;line-height:1.6;background:#fff}
a{color:#1a3a6b;text-decoration:none}
a:hover{color:#cc0000}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}

/* ── Global SVG icon fix ── */
svg{flex-shrink:0}
.wh-topbar-item svg,.wh-nav-link svg{width:12px;height:12px;stroke:currentColor;fill:none}
.sp-contact-item svg{width:14px;height:14px;stroke:#1a3a6b;fill:none}
.contact-icon{width:14px;height:14px;flex-shrink:0;stroke:rgba(255,255,255,0.4);fill:none}
.social-btn svg{width:14px;height:14px;fill:rgba(255,255,255,0.5)}
.wf-contact-item svg{width:14px;height:14px;stroke:rgba(255,255,255,0.4);fill:none}
.hp-product-item .icon svg{width:20px;height:20px;stroke:#fff;fill:none}


/* ── HEADER ── */

        /* ── Reset Astra header hoàn toàn ── */
        

        /* ── Force full-width cho toàn bộ trang ── */
        

        /* ── HEADER STYLES ── */
        .wh-wrap {
            width: 100%;
            position: relative;
            z-index: 999;
        }

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

        /* TOP BAR */
        .wh-topbar {
            background: #0f2347;
            padding: 8px 0;
            width: 100%;
        }

        .wh-topbar-inner {
            width: 100%;
            padding: 0 48px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .wh-topbar-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .wh-topbar-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.65);
            font-family: Arial, sans-serif;
        }

        .wh-topbar-item a {
            color: rgba(255, 255, 255, 0.65);
            text-decoration: none;
        }

        .wh-topbar-item a:hover {
            color: #fff;
        }

        .wh-topbar-item svg {
            width: 12px;
            height: 12px;
            stroke: rgba(255, 255, 255, 0.5);
            fill: none;
            flex-shrink: 0;
        }

        .wh-tb-divider {
            width: 1px;
            height: 14px;
            background: rgba(255, 255, 255, 0.2);
        }

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

        .wh-dot {
            width: 6px;
            height: 6px;
            background: #cc0000;
            border-radius: 50%;
        }

        .wh-auth-tag {
            font-size: 11px;
            font-weight: 700;
            color: #fff;
            letter-spacing: 1px;
            text-transform: uppercase;
            font-family: Arial, sans-serif;
        }

        /* MAIN HEADER */
        .wh-main {
            background: #fff;
            border-bottom: 3px solid #cc0000;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            width: 100%;
        }

        .wh-main-inner {
            width: 100%;
            padding: 0 48px;
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* LOGO */
        .wh-logo {
            display: flex;
            align-items: center;
            text-decoration: none;
            flex-shrink: 0;
            max-height: 50px;
        }

        .wh-logo-group {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
        }

        .wh-logo-text {
            display: flex;
            align-items: baseline;
            line-height: 1;
        }

        .wh-logo-text .ln {
            font-size: 30px;
            font-weight: 700;
            color: #0f2347;
            letter-spacing: -0.5px;
            font-family: 'Helvetica Neue', Arial, sans-serif;
        }

        .wh-logo-text .ld {
            font-size: 30px;
            font-weight: 700;
            color: #cc0000;
            font-family: 'Helvetica Neue', Arial, sans-serif;
        }

        .wh-logo-sub {
            font-size: 10px;
            font-weight: 500;
            color: #888;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            white-space: nowrap;
            font-family: Arial, sans-serif;
            line-height: 1;
        }

        /* NAV */
        .wh-nav {
            display: flex;
            align-items: center;
            gap: 0;
            height: 100%;
        }

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

        .wh-nav-link {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 0 12px;
            height: 100%;
            font-size: 13px;
            font-weight: 700;
            color: #0f2347;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-family: 'Helvetica Neue', Arial, sans-serif;
            border-bottom: 3px solid transparent;
            margin-bottom: -3px;
            transition: color .2s, border-color .2s;
            white-space: nowrap;
        }

        .wh-nav-link:hover {
            color: #cc0000;
            border-bottom-color: #cc0000;
        }

        .wh-nav-link svg {
            width: 11px;
            height: 11px;
            fill: #aaa;
            transition: transform .2s;
            flex-shrink: 0;
        }

        .wh-nav-item:hover .wh-nav-link svg {
            transform: rotate(180deg);
            fill: #cc0000;
        }

        /* DROPDOWN */
        .wh-dropdown {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background: #fff;
            border: 1px solid #eee;
            border-top: 3px solid #cc0000;
            border-radius: 0 0 4px 4px;
            min-width: 270px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            padding: 8px 0;
        }

        .wh-nav-item:hover .wh-dropdown {
            display: block;
        }

        .wh-dd-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px 20px;
            font-size: 12px;
            font-weight: 700;
            color: #333;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            font-family: Arial, sans-serif;
            transition: background .15s, color .15s;
        }

        .wh-dd-item:hover {
            background: #f9f9f9;
            color: #cc0000;
        }

        .wh-dd-item::before {
            content: "";
            width: 5px;
            height: 5px;
            background: #cc0000;
            border-radius: 50%;
            flex-shrink: 0;
        }

        /* CTA BUTTON */
        .wh-cta {
            background: #cc0000;
            color: #fff !important;
            padding: 11px 22px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 700;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-family: Arial, sans-serif;
            transition: background .2s;
            margin-left: 12px;
            white-space: nowrap;
            flex-shrink: 0;
            border-bottom: none !important;
        }

        .wh-cta:hover {
            background: #0f2347;
        }

        /* RESPONSIVE */
        @media (max-width: 1100px) {

            .wh-logo-text .ln,
            .wh-logo-text .ld {
                font-size: 24px;
            }

            .wh-nav-link {
                font-size: 12px;
                padding: 0 9px;
            }

            .wh-cta {
                padding: 10px 16px;
                font-size: 12px;
            }
        }

        @media (max-width: 900px) {

            .wh-topbar-left .wh-topbar-item:nth-child(5),
            .wh-topbar-left .wh-tb-divider:nth-child(4) {
                display: none;
            }
        }

        @media (max-width: 921px) {
            .wh-nav {
                display: none;
            }

            .wh-main-inner {
                justify-content: space-between;
            }

            .wh-hamburger {
                display: flex !important;
            }
        }

        /* HAMBURGER BUTTON */
        .wh-hamburger {
            display: none;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            cursor: pointer;
            padding: 8px;
            border: none;
            background: transparent;
            margin-left: 12px;
        }

        .wh-hamburger span {
            display: block;
            width: 24px;
            height: 2px;
            background: #0f2347;
            border-radius: 2px;
            transition: all .25s;
        }

        .wh-hamburger.open span:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }

        .wh-hamburger.open span:nth-child(2) {
            opacity: 0;
        }

        .wh-hamburger.open span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }

        /* MOBILE MENU PANEL */
        .wh-mobile-menu {
            display: none;
            flex-direction: column;
            background: #fff;
            border-top: 3px solid #cc0000;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            width: 100%;
            padding: 12px 0 20px;
            position: relative;
            /* ← thoát khỏi overflow:hidden của parent */
            z-index: 9999;
        }

        .wh-mobile-menu.open {
            display: flex;
        }

        .wh-mob-link {
            display: block;
            padding: 13px 24px;
            font-size: 13px;
            font-weight: 700;
            color: #0f2347;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-family: Arial, sans-serif;
            border-bottom: 1px solid #f0f0f0;
        }

        .wh-mob-link:hover {
            color: #cc0000;
            background: #fafafa;
        }

        .wh-mob-toggle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 13px 24px;
            font-size: 13px;
            font-weight: 700;
            color: #0f2347;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-family: Arial, sans-serif;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            user-select: none;
        }

        .wh-mob-toggle:hover {
            color: #cc0000;
            background: #fafafa;
        }

        .wh-mob-toggle svg {
            width: 14px;
            height: 14px;
            fill: #aaa;
            transition: transform .2s;
        }

        .wh-mob-toggle.open svg {
            transform: rotate(180deg);
            fill: #cc0000;
        }

        .wh-mob-submenu {
            display: none;
            flex-direction: column;
            background: #f8faff;
            border-bottom: 1px solid #f0f0f0;
        }

        .wh-mob-submenu.open {
            display: flex;
        }

        .wh-mob-sublink {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 11px 36px;
            font-size: 12px;
            font-weight: 700;
            color: #333;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            font-family: Arial, sans-serif;
            border-bottom: 1px solid #eef2f8;
        }

        .wh-mob-sublink::before {
            content: "";
            width: 5px;
            height: 5px;
            background: #cc0000;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .wh-mob-sublink:hover {
            color: #cc0000;
        }

        .wh-mob-cta {
            margin: 16px 24px 0;
            background: #cc0000;
            color: #fff;
            padding: 13px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 700;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-family: Arial, sans-serif;
            text-align: center;
            display: block;
        }
    

/* ── PRODUCT ── */

        /* ── Break out of Astra container ── */
        .ast-article-single,
        .site-content .ast-container,
        .entry-content,
        #primary,
        #content,
        .content-area {
            max-width: 100% !important;
            width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        .ast-article-single {
            padding: 0 !important;
        }

        .site-primary {
            padding: 0 !important;
        }

        .ast-separate-container .ast-article-single {
            padding: 0 !important;
            margin: 0 !important;
        }

        /* ── Product page styles ── */
        .sp-wrap {
            font-family: Arial, sans-serif;
            background: #f5f8ff;
            min-height: 100vh;
            width: 100%;
            margin: 0;
            padding: 0
        }

        .sp-breadcrumb {
            background: #fff;
            padding: 12px 40px;
            border-bottom: 1px solid #e0e8f0;
            font-size: 12px;
            color: #888;
            width: 100%;
            box-sizing: border-box
        }

        .sp-breadcrumb a {
            color: #1a3a6b;
            text-decoration: none;
            font-weight: 700
        }

        .sp-breadcrumb a:hover {
            color: #cc0000
        }

        .sp-breadcrumb span {
            margin: 0 6px;
            color: #ccc
        }

        .sp-main {
            display: grid;
            grid-template-columns: 1fr 380px;
            gap: 32px;
            padding: 36px 40px;
            max-width: 1200px;
            margin: 0 auto;
            box-sizing: border-box
        }

        .sp-img-box {
            background: #fff;
            border-radius: 8px;
            border: 1px solid #e0e8f0;
            border-top: 3px solid #cc0000;
            padding: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 280px;
            margin-bottom: 24px
        }

        .sp-img-box img {
            max-width: 100%;
            max-height: 260px;
            object-fit: contain
        }

        .sp-img-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px
        }

        .sp-img-placeholder svg {
            width: 80px;
            height: 80px;
            stroke: #c5d5e8;
            fill: none
        }

        .sp-img-placeholder span {
            font-size: 12px;
            color: #aaa;
            letter-spacing: 1px
        }

        .sp-tabs {
            background: #fff;
            border-radius: 8px;
            border: 1px solid #e0e8f0;
            overflow: hidden
        }

        .sp-tab-nav {
            display: flex;
            border-bottom: 2px solid #e0e8f0;
            flex-wrap: wrap
        }

        .sp-tab-btn {
            padding: 14px 24px;
            font-size: 12px;
            font-weight: 700;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            cursor: pointer;
            border: none;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            background: none
        }

        .sp-tab-btn.active {
            color: #1a3a6b;
            border-bottom-color: #cc0000
        }

        .sp-tab-content {
            padding: 24px;
            display: none
        }

        .sp-tab-content.active {
            display: block
        }

        .sp-spec-table {
            width: 100%;
            border-collapse: collapse
        }

        .sp-spec-table tr {
            border-bottom: 1px solid #f0f4fa
        }

        .sp-spec-table td {
            padding: 10px 12px;
            font-size: 13px
        }

        .sp-spec-table td:first-child {
            color: #888;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 11px;
            letter-spacing: 0.8px;
            width: 40%
        }

        .sp-spec-table td:last-child {
            color: #1a3a6b;
            font-weight: 700
        }

        .sp-desc p {
            font-size: 14px;
            color: #555;
            line-height: 1.9;
            margin-bottom: 12px
        }

        .sp-app-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 12px
        }

        .sp-app-tag {
            background: #f0f4fa;
            border: 1px solid #c5d5e8;
            border-radius: 4px;
            padding: 6px 12px;
            font-size: 11px;
            font-weight: 700;
            color: #1a3a6b
        }

        .sp-related-title {
            font-size: 13px;
            font-weight: 700;
            color: #1a3a6b;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 14px
        }

        .sp-related-list {
            display: flex;
            flex-direction: column;
            gap: 8px
        }

        .sp-related-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: #f5f8ff;
            border-radius: 6px;
            text-decoration: none
        }

        .sp-related-item .dot {
            width: 4px;
            height: 4px;
            background: #cc0000;
            border-radius: 50%;
            flex-shrink: 0
        }

        .sp-related-item span {
            font-size: 12px;
            font-weight: 700;
            color: #1a3a6b
        }

        .sp-info-card {
            background: #fff;
            border-radius: 8px;
            border: 1px solid #e0e8f0;
            border-top: 3px solid #cc0000;
            padding: 24px;
            margin-bottom: 20px
        }

        .sp-product-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(204, 0, 0, 0.08);
            border: 1px solid rgba(204, 0, 0, 0.3);
            padding: 4px 10px;
            border-radius: 4px;
            margin-bottom: 12px
        }

        .sp-product-tag span {
            font-size: 10px;
            font-weight: 700;
            color: #cc0000;
            letter-spacing: 1.5px;
            text-transform: uppercase
        }

        .sp-product-tag .dot {
            width: 5px;
            height: 5px;
            background: #cc0000;
            border-radius: 50%
        }

        .sp-info-card h1 {
            font-size: 22px;
            font-weight: 700;
            color: #1a3a6b;
            margin-bottom: 6px;
            line-height: 1.3
        }

        .sp-model {
            font-size: 13px;
            color: #888;
            margin-bottom: 16px
        }

        .sp-model strong {
            color: #cc0000;
            font-size: 15px
        }

        .sp-badges {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-bottom: 18px
        }

        .sp-badge {
            background: #f0f4fa;
            border-radius: 3px;
            padding: 4px 8px;
            font-size: 10px;
            font-weight: 700;
            color: #1a3a6b;
            letter-spacing: 0.5px
        }

        .sp-badge.red {
            background: rgba(204, 0, 0, 0.08);
            color: #cc0000
        }

        .sp-divider {
            height: 1px;
            background: #f0f4fa;
            margin: 16px 0
        }

        .sp-quick-specs {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 18px
        }

        .sp-qs-row {
            display: flex;
            justify-content: space-between;
            align-items: center
        }

        .sp-qs-label {
            font-size: 11px;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 0.8px
        }

        .sp-qs-val {
            font-size: 13px;
            font-weight: 700;
            color: #1a3a6b
        }

        .sp-cta-card {
            background: #0f2347;
            border-radius: 8px;
            padding: 24px;
            margin-bottom: 20px
        }

        .sp-cta-card h3 {
            font-size: 14px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.8px
        }

        .sp-cta-card p {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: 16px;
            line-height: 1.7
        }

        .sp-btn-quote {
            display: block;
            background: #cc0000;
            color: #fff;
            padding: 12px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 700;
            text-align: center;
            text-decoration: none;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 10px
        }

        .sp-btn-quote:hover {
            background: #a00000;
            color: #fff
        }

        .sp-btn-dl {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.08);
            color: #fff;
            padding: 11px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 700;
            text-decoration: none;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            border: 1px solid rgba(255, 255, 255, 0.2)
        }

        .sp-btn-dl:hover {
            background: rgba(255, 255, 255, 0.15);
            color: #fff
        }

        .sp-btn-dl svg {
            width: 14px;
            height: 14px;
            stroke: #fff;
            fill: none
        }

        .sp-contact-card {
            background: #fff;
            border-radius: 8px;
            border: 1px solid #e0e8f0;
            padding: 20px
        }

        .sp-contact-card h4 {
            font-size: 11px;
            font-weight: 700;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 14px
        }

        .sp-contact-item {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px
        }

        .sp-contact-item svg {
            width: 15px;
            height: 15px;
            stroke: #1a3a6b;
            fill: none;
            flex-shrink: 0
        }

        .sp-contact-item a {
            font-size: 13px;
            font-weight: 700;
            color: #1a3a6b;
            text-decoration: none
        }

        .sp-contact-item a:hover {
            color: #cc0000
        }

        .sp-contact-item .lbl {
            font-size: 11px;
            color: #888;
            display: block
        }

        @media(max-width:900px) {
            .sp-main {
                grid-template-columns: 1fr;
                padding: 20px
            }

            .sp-breadcrumb {
                padding: 12px 20px
            }

            .sp-tab-btn {
                padding: 10px 14px;
                font-size: 11px
            }
        }
    

/* ── FOOTER ── */

        /* ── Force full-width footer ── */
        

        

        .wf {
            background: #0f2347;
            color: #fff;
            font-family: Arial, sans-serif;
            padding: 56px 0 0;
            width: 100%;
        }

        .wf-inner {
            padding: 0 48px;
        }

        .wf-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 28px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 40px;
            flex-wrap: wrap;
            gap: 12px;
        }

        .wf-since {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.4);
            letter-spacing: 1px;
        }

        .wf-grid {
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
            gap: 40px;
            margin-bottom: 44px;
        }

        .wf h4 {
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #7eb3e8;
            margin: 0 0 18px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .wf-brand {
            display: flex;
            align-items: baseline;
            gap: 4px;
            margin-bottom: 6px;
        }

        .wf-brand .name {
            font-size: 22px;
            font-weight: 700;
            color: #fff;
            letter-spacing: 1px;
        }

        .wf-brand .dot {
            color: #cc0000;
            font-size: 22px;
        }

        .wf-tagline {
            font-size: 11px;
            color: #7eb3e8;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 16px;
        }

        .wf p {
            font-size: 13px;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.6);
            margin: 0 0 16px;
        }

        .wf ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .wf ul li {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .wf ul li a {
            color: rgba(255, 255, 255, 0.65);
            text-decoration: none;
            font-size: 13px;
        }

        .wf ul li a:hover {
            color: #fff;
        }

        .wf ul li::before {
            content: "";
            width: 4px;
            height: 4px;
            background: #cc0000;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 12px;
        }

        .contact-icon {
            width: 15px;
            height: 15px;
            flex-shrink: 0;
            margin-top: 2px;
            stroke: rgba(255, 255, 255, 0.4);
        }

        .contact-text {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.75);
            line-height: 1.5;
        }

        .contact-text a {
            color: rgba(255, 255, 255, 0.75);
            text-decoration: none;
        }

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

        .contact-label {
            font-size: 10px;
            color: rgba(255, 255, 255, 0.35);
            letter-spacing: 1px;
            text-transform: uppercase;
            display: block;
            margin-bottom: 1px;
        }

        .social-row {
            display: flex;
            gap: 8px;
            margin-top: 18px;
        }

        .social-btn {
            width: 32px;
            height: 32px;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.07);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

        .social-btn:hover {
            background: rgba(255, 255, 255, 0.15);
        }

        .social-btn svg {
            width: 13px;
            height: 13px;
            fill: #fff;
        }

        .cert-row {
            display: flex;
            gap: 10px;
            margin-top: 16px;
            flex-wrap: wrap;
        }

        .cert-badge {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.5);
            letter-spacing: 0.5px;
        }

        /* BOTTOM BAR */
        .wf-bar-wrap {
            background: rgba(0, 0, 0, 0.25);
            border-top: 2px solid #cc0000;
        }

        .wf-bar {
            padding: 20px 48px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
        }

        .wf-bar-left {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .wf-dist-label {
            font-size: 10px;
            font-weight: 700;
            color: #cc0000;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }

        .wf-dist-name {
            font-size: 13px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.85);
        }

        .wf-bar-copy {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.3);
            letter-spacing: 0.3px;
        }

        .wf-bar-links {
            display: flex;
            gap: 20px;
            align-items: center;
        }

        .wf-bar-links a {
            color: rgba(255, 255, 255, 0.35);
            text-decoration: none;
            font-size: 11px;
        }

        .wf-bar-links a:hover {
            color: rgba(255, 255, 255, 0.7);
        }

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

            .wf-inner,
            .wf-bar {
                padding-left: 20px;
                padding-right: 20px;
            }
        }

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

/* ── HOMEPAGE ── */

    /* ── Smooth scroll ── */
    html {
      scroll-behavior: smooth
    }

    #request-quote-form {
      scroll-margin-top: 80px
    }

    /* ── Ẩn title "Trang chủ" và break out Astra container ── */
    .entry-title,
    .page-title,
    .ast-page-title,
    .site-main .entry-header,
    .ast-article-single>.entry-header,
    .page-header {
      display: none !important;
    }

    .site-main,
    #primary,
    #content,
    .content-area,
    .ast-article-single,
    .entry-content,
    .ast-container {
      max-width: 100% !important;
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    /* ── Homepage styles ── */
    * {
      box-sizing: border-box
    }

    .hp {
      font-family: Arial, sans-serif;
      color: #333;
      width: 100%
    }

    .hp-hero {
      background: linear-gradient(135deg, #0f2347 0%, #1a3a6b 60%, #0f2347 100%);
      padding: 80px 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      min-height: 420px;
      position: relative;
      overflow: hidden;
      width: 100%
    }

    .hp-hero::before {
      content: "";
      position: absolute;
      right: -60px;
      top: -60px;
      width: 400px;
      height: 400px;
      border: 60px solid rgba(204, 0, 0, 0.08);
      border-radius: 50%
    }

    .hp-hero::after {
      content: "";
      position: absolute;
      right: 60px;
      bottom: -80px;
      width: 250px;
      height: 250px;
      border: 40px solid rgba(255, 255, 255, 0.04);
      border-radius: 50%
    }

    .hp-hero-left {
      flex: 1;
      max-width: 580px;
      position: relative;
      z-index: 1
    }

    .hp-hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(204, 0, 0, 0.2);
      border: 1px solid rgba(204, 0, 0, 0.5);
      padding: 6px 14px;
      border-radius: 4px;
      margin-bottom: 20px
    }

    .hp-hero-tag span {
      font-size: 11px;
      font-weight: 700;
      color: #ff9999;
      letter-spacing: 1.5px;
      text-transform: uppercase
    }

    .hp-hero-tag .dot {
      width: 6px;
      height: 6px;
      background: #cc0000;
      border-radius: 50%
    }

    .hp-hero h1 {
      font-size: 40px;
      font-weight: 700;
      color: #fff;
      line-height: 1.2;
      margin-bottom: 16px
    }

    .hp-hero h1 em {
      color: #cc0000;
      font-style: normal
    }

    .hp-hero p {
      font-size: 15px;
      color: rgba(255, 255, 255, 0.75);
      line-height: 1.8;
      margin-bottom: 28px;
      max-width: 480px
    }

    .hp-hero-btns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    .hp-btn-primary {
      background: #cc0000;
      color: #fff;
      padding: 12px 28px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      letter-spacing: 1px;
      text-transform: uppercase
    }

    .hp-btn-primary:hover {
      background: #a00
    }

    .hp-btn-secondary {
      background: transparent;
      color: #fff;
      padding: 12px 28px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      letter-spacing: 1px;
      text-transform: uppercase;
      border: 2px solid rgba(255, 255, 255, 0.4)
    }

    .hp-btn-secondary:hover {
      border-color: #fff
    }

    .hp-hero-stats {
      display: flex;
      gap: 32px;
      margin-top: 36px;
      padding-top: 28px;
      border-top: 1px solid rgba(255, 255, 255, 0.1)
    }

    .hp-stat .num {
      font-size: 28px;
      font-weight: 700;
      color: #fff
    }

    .hp-stat .num span {
      color: #cc0000
    }

    .hp-stat .lbl {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.5);
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-top: 4px
    }

    .hp-hero-right {
      flex: 0 0 360px;
      position: relative;
      z-index: 1
    }

    .hp-hero-card {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      padding: 24px
    }

    .hp-hero-card h3 {
      font-size: 13px;
      font-weight: 700;
      color: #7eb3e8;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 16px
    }

    .hp-product-list {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .hp-product-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px
    }

    .hp-product-item .icon {
      width: 32px;
      height: 32px;
      background: #cc0000;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .hp-product-item .icon svg {
      width: 16px;
      height: 16px;
      stroke: #fff;
      fill: none
    }

    .hp-product-item .info .name {
      font-size: 12px;
      font-weight: 700;
      color: #fff
    }

    .hp-product-item .info .code {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.45)
    }

    .hp-intro {
      padding: 64px 48px;
      background: #fff;
      display: flex;
      gap: 48px;
      align-items: center;
      width: 100%
    }

    .hp-intro-img {
      flex: 0 0 420px;
      height: 280px;
      background: #f0f4fa;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .hp-intro-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hp-intro-text {
      flex: 1
    }

    .hp-section-tag {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      color: #cc0000;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 2px solid #cc0000
    }

    .hp-intro-text h2 {
      font-size: 28px;
      font-weight: 700;
      color: #1a3a6b;
      margin-bottom: 16px;
      line-height: 1.3
    }

    .hp-intro-text p {
      font-size: 14px;
      color: #555;
      line-height: 1.9;
      margin-bottom: 12px
    }

    .hp-cert-row {
      display: flex;
      gap: 10px;
      margin-top: 20px;
      flex-wrap: wrap
    }

    .hp-cert {
      background: #f0f4fa;
      border: 1px solid #c5d5e8;
      border-radius: 4px;
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 700;
      color: #1a3a6b;
      letter-spacing: 0.5px
    }

    .hp-products {
      padding: 64px 48px;
      background: #f5f8ff;
      width: 100%
    }

    .hp-section-head {
      text-align: center;
      margin-bottom: 40px
    }

    .hp-section-head h2 {
      font-size: 30px;
      font-weight: 700;
      color: #1a3a6b;
      margin-bottom: 8px
    }

    .hp-section-head p {
      font-size: 14px;
      color: #666;
      max-width: 500px;
      margin: 0 auto
    }

    .hp-prod-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
    }

    .hp-prod-card {
      background: #fff;
      border: 1px solid #e0e8f0;
      border-radius: 8px;
      padding: 24px;
      border-top: 3px solid #cc0000
    }

    .hp-prod-icon {
      width: 44px;
      height: 44px;
      background: #f0f4fa;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px
    }

    .hp-prod-icon svg {
      width: 22px;
      height: 22px;
      stroke: #1a3a6b;
      fill: none
    }

    .hp-prod-card h3 {
      font-size: 14px;
      font-weight: 700;
      color: #1a3a6b;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px
    }

    .hp-prod-card p {
      font-size: 12px;
      color: #666;
      line-height: 1.7;
      margin-bottom: 14px
    }

    .hp-prod-models {
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    .hp-prod-model {
      background: #f0f4fa;
      border-radius: 3px;
      padding: 3px 8px;
      font-size: 10px;
      font-weight: 700;
      color: #1a3a6b
    }

    .hp-prod-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 700;
      color: #cc0000;
      text-decoration: none;
      margin-top: 14px;
      text-transform: uppercase;
      letter-spacing: 0.5px
    }

    .hp-why {
      padding: 64px 48px;
      background: #fff;
      width: 100%
    }

    .hp-why-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-top: 40px
    }

    .hp-why-item {
      text-align: center;
      padding: 28px 20px;
      border: 1px solid #e8eef8;
      border-radius: 8px
    }

    .hp-why-num {
      font-size: 36px;
      font-weight: 700;
      color: #cc0000;
      margin-bottom: 8px
    }

    .hp-why-item h4 {
      font-size: 13px;
      font-weight: 700;
      color: #1a3a6b;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 8px
    }

    .hp-why-item p {
      font-size: 12px;
      color: #666;
      line-height: 1.7
    }

    .hp-ind {
      padding: 64px 48px;
      background: #0f2347;
      width: 100%
    }

    .hp-ind .hp-section-head h2 {
      color: #fff
    }

    .hp-ind .hp-section-head p {
      color: rgba(255, 255, 255, 0.6)
    }

    .hp-ind-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 36px
    }

    .hp-ind-card {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 24px;
      display: flex;
      gap: 16px;
      align-items: flex-start
    }

    .hp-ind-icon {
      width: 44px;
      height: 44px;
      background: rgba(204, 0, 0, 0.2);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .hp-ind-icon svg {
      width: 22px;
      height: 22px;
      stroke: #ff9999;
      fill: none
    }

    .hp-ind-card h4 {
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 6px
    }

    .hp-ind-card p {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.55);
      line-height: 1.7
    }

    .hp-contact {
      padding: 64px 48px;
      background: #f5f8ff;
      display: flex;
      gap: 48px;
      align-items: flex-start;
      width: 100%
    }

    .hp-contact-left {
      flex: 1
    }

    .hp-contact-left h2 {
      font-size: 28px;
      font-weight: 700;
      color: #1a3a6b;
      margin-bottom: 12px
    }

    .hp-contact-left p {
      font-size: 14px;
      color: #555;
      line-height: 1.8;
      margin-bottom: 24px
    }

    .hp-contact-info {
      display: flex;
      flex-direction: column;
      gap: 16px
    }

    .hp-ci {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .hp-ci-icon {
      width: 40px;
      height: 40px;
      background: #1a3a6b;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .hp-ci-icon svg {
      width: 18px;
      height: 18px;
      stroke: #fff;
      fill: none
    }

    .hp-ci-label {
      font-size: 11px;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 1px
    }

    .hp-ci-val {
      font-size: 14px;
      font-weight: 700;
      color: #1a3a6b
    }

    .hp-contact-right {
      flex: 0 0 380px;
      background: #fff;
      border-radius: 8px;
      border: 1px solid #e0e8f0;
      border-top: 3px solid #cc0000;
      padding: 28px
    }

    .hp-contact-right h3 {
      font-size: 16px;
      font-weight: 700;
      color: #1a3a6b;
      margin-bottom: 20px;
      text-transform: uppercase;
      letter-spacing: 0.5px
    }

    .hp-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 12px
    }

    .hp-form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 12px
    }

    .hp-form-group label {
      font-size: 11px;
      font-weight: 700;
      color: #555;
      text-transform: uppercase;
      letter-spacing: 0.8px
    }

    .hp-form-group input,
    .hp-form-group select,
    .hp-form-group textarea {
      border: 1px solid #d0daea;
      border-radius: 4px;
      padding: 10px 12px;
      font-size: 13px;
      color: #333;
      font-family: Arial, sans-serif;
      width: 100%
    }

    .hp-form-group textarea {
      height: 80px;
      resize: none
    }

    .hp-submit {
      width: 100%;
      background: #cc0000;
      color: #fff;
      border: none;
      padding: 12px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      cursor: pointer
    }

    .hp-submit:hover {
      background: #1a3a6b
    }

    @media(max-width:900px) {

      .hp-hero,
      .hp-intro,
      .hp-products,
      .hp-why,
      .hp-ind,
      .hp-contact {
        padding: 40px 20px
      }

      .hp-hero {
        flex-direction: column
      }

      .hp-hero-right {
        flex: none;
        width: 100%
      }

      .hp-intro {
        flex-direction: column
      }

      .hp-intro-img {
        flex: none;
        width: 100%
      }

      .hp-prod-grid,
      .hp-why-grid {
        grid-template-columns: 1fr 1fr
      }

      .hp-ind-grid {
        grid-template-columns: 1fr
      }

      .hp-contact {
        flex-direction: column
      }

      .hp-contact-right {
        flex: none;
        width: 100%
      }
    }
  

/* ── CATEGORY PAGES ── */
.cat-wrap{max-width:1140px;margin:0 auto;padding:40px 20px}
.cat-header{margin-bottom:32px}
.cat-header h1{font-size:24px;font-weight:700;color:#0f2347;margin-bottom:8px}
.cat-header p{font-size:14px;color:#666;line-height:1.7;max-width:700px}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.cat-card{display:block;background:#fff;border:1px solid #e8edf3;border-radius:8px;overflow:hidden;transition:box-shadow .2s,border-color .2s;text-decoration:none}
.cat-card:hover{border-color:#cc0000;box-shadow:0 4px 16px rgba(0,0,0,.08)}
.cat-card-img{background:#f8fafc;padding:20px;display:flex;align-items:center;justify-content:center;min-height:180px}
.cat-card-img img{max-height:140px;object-fit:contain}
.cat-card-body{padding:16px}
.cat-card-body h3{font-size:15px;font-weight:700;color:#1a3a6b;margin-bottom:4px}
.cat-card-body p{font-size:12px;color:#888;line-height:1.5}

/* Product page - related blog posts */
.sp-blog-links{background:#f8fafc;border-radius:8px;padding:20px;margin-top:24px}
.sp-blog-links h3{font-size:13px;font-weight:700;color:#1a3a6b;text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px}
.sp-blog-links ul{list-style:none;padding:0}
.sp-blog-links li{padding:8px 0;border-bottom:1px solid #e8edf3;display:flex;justify-content:space-between;align-items:center;gap:12px}
.sp-blog-links li:last-child{border-bottom:none}
.sp-blog-links a{font-size:13px;color:#060097;font-weight:600;text-decoration:none}
.sp-blog-links a:hover{color:#cc0000}
.sp-blog-links .blog-date{font-size:11px;color:#999;white-space:nowrap}

/* ── INDEX ── */

    /* ── Smooth scroll ── */
    html {
      scroll-behavior: smooth
    }

    #request-quote-form {
      scroll-margin-top: 80px
    }

    /* ── Ẩn title "Trang chủ" và break out Astra container ── */
    .entry-title,
    .page-title,
    .ast-page-title,
    .site-main .entry-header,
    .ast-article-single>.entry-header,
    .page-header {
      display: none !important;
    }

    .site-main,
    #primary,
    #content,
    .content-area,
    .ast-article-single,
    .entry-content,
    .ast-container {
      max-width: 100% !important;
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    /* ── Homepage styles ── */
    * {
      box-sizing: border-box
    }

    .hp {
      font-family: Arial, sans-serif;
      color: #333;
      width: 100%
    }

    .hp-hero {
      background: linear-gradient(135deg, #0f2347 0%, #1a3a6b 60%, #0f2347 100%);
      padding: 80px 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      min-height: 420px;
      position: relative;
      overflow: hidden;
      width: 100%
    }

    .hp-hero::before {
      content: "";
      position: absolute;
      right: -60px;
      top: -60px;
      width: 400px;
      height: 400px;
      border: 60px solid rgba(204, 0, 0, 0.08);
      border-radius: 50%
    }

    .hp-hero::after {
      content: "";
      position: absolute;
      right: 60px;
      bottom: -80px;
      width: 250px;
      height: 250px;
      border: 40px solid rgba(255, 255, 255, 0.04);
      border-radius: 50%
    }

    .hp-hero-left {
      flex: 1;
      max-width: 580px;
      position: relative;
      z-index: 1
    }

    .hp-hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(204, 0, 0, 0.2);
      border: 1px solid rgba(204, 0, 0, 0.5);
      padding: 6px 14px;
      border-radius: 4px;
      margin-bottom: 20px
    }

    .hp-hero-tag span {
      font-size: 11px;
      font-weight: 700;
      color: #ff9999;
      letter-spacing: 1.5px;
      text-transform: uppercase
    }

    .hp-hero-tag .dot {
      width: 6px;
      height: 6px;
      background: #cc0000;
      border-radius: 50%
    }

    .hp-hero h1 {
      font-size: 40px;
      font-weight: 700;
      color: #fff;
      line-height: 1.2;
      margin-bottom: 16px
    }

    .hp-hero h1 em {
      color: #cc0000;
      font-style: normal
    }

    .hp-hero p {
      font-size: 15px;
      color: rgba(255, 255, 255, 0.75);
      line-height: 1.8;
      margin-bottom: 28px;
      max-width: 480px
    }

    .hp-hero-btns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    .hp-btn-primary {
      background: #cc0000;
      color: #fff;
      padding: 12px 28px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      letter-spacing: 1px;
      text-transform: uppercase
    }

    .hp-btn-primary:hover {
      background: #a00
    }

    .hp-btn-secondary {
      background: transparent;
      color: #fff;
      padding: 12px 28px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      letter-spacing: 1px;
      text-transform: uppercase;
      border: 2px solid rgba(255, 255, 255, 0.4)
    }

    .hp-btn-secondary:hover {
      border-color: #fff
    }

    .hp-hero-stats {
      display: flex;
      gap: 32px;
      margin-top: 36px;
      padding-top: 28px;
      border-top: 1px solid rgba(255, 255, 255, 0.1)
    }

    .hp-stat .num {
      font-size: 28px;
      font-weight: 700;
      color: #fff
    }

    .hp-stat .num span {
      color: #cc0000
    }

    .hp-stat .lbl {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.5);
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-top: 4px
    }

    .hp-hero-right {
      flex: 0 0 360px;
      position: relative;
      z-index: 1
    }

    .hp-hero-card {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      padding: 24px
    }

    .hp-hero-card h3 {
      font-size: 13px;
      font-weight: 700;
      color: #7eb3e8;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 16px
    }

    .hp-product-list {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .hp-product-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px
    }

    .hp-product-item .icon {
      width: 32px;
      height: 32px;
      background: #cc0000;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .hp-product-item .icon svg {
      width: 16px;
      height: 16px;
      stroke: #fff;
      fill: none
    }

    .hp-product-item .info .name {
      font-size: 12px;
      font-weight: 700;
      color: #fff
    }

    .hp-product-item .info .code {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.45)
    }

    .hp-intro {
      padding: 64px 48px;
      background: #fff;
      display: flex;
      gap: 48px;
      align-items: center;
      width: 100%
    }

    .hp-intro-img {
      flex: 0 0 420px;
      height: 280px;
      background: #f0f4fa;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .hp-intro-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hp-intro-text {
      flex: 1
    }

    .hp-section-tag {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      color: #cc0000;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 2px solid #cc0000
    }

    .hp-intro-text h2 {
      font-size: 28px;
      font-weight: 700;
      color: #1a3a6b;
      margin-bottom: 16px;
      line-height: 1.3
    }

    .hp-intro-text p {
      font-size: 14px;
      color: #555;
      line-height: 1.9;
      margin-bottom: 12px
    }

    .hp-cert-row {
      display: flex;
      gap: 10px;
      margin-top: 20px;
      flex-wrap: wrap
    }

    .hp-cert {
      background: #f0f4fa;
      border: 1px solid #c5d5e8;
      border-radius: 4px;
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 700;
      color: #1a3a6b;
      letter-spacing: 0.5px
    }

    .hp-products {
      padding: 64px 48px;
      background: #f5f8ff;
      width: 100%
    }

    .hp-section-head {
      text-align: center;
      margin-bottom: 40px
    }

    .hp-section-head h2 {
      font-size: 30px;
      font-weight: 700;
      color: #1a3a6b;
      margin-bottom: 8px
    }

    .hp-section-head p {
      font-size: 14px;
      color: #666;
      max-width: 500px;
      margin: 0 auto
    }

    .hp-prod-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
    }

    .hp-prod-card {
      background: #fff;
      border: 1px solid #e0e8f0;
      border-radius: 8px;
      padding: 24px;
      border-top: 3px solid #cc0000
    }

    .hp-prod-icon {
      width: 44px;
      height: 44px;
      background: #f0f4fa;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px
    }

    .hp-prod-icon svg {
      width: 22px;
      height: 22px;
      stroke: #1a3a6b;
      fill: none
    }

    .hp-prod-card h3 {
      font-size: 14px;
      font-weight: 700;
      color: #1a3a6b;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px
    }

    .hp-prod-card p {
      font-size: 12px;
      color: #666;
      line-height: 1.7;
      margin-bottom: 14px
    }

    .hp-prod-models {
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    .hp-prod-model {
      background: #f0f4fa;
      border-radius: 3px;
      padding: 3px 8px;
      font-size: 10px;
      font-weight: 700;
      color: #1a3a6b
    }

    .hp-prod-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 700;
      color: #cc0000;
      text-decoration: none;
      margin-top: 14px;
      text-transform: uppercase;
      letter-spacing: 0.5px
    }

    .hp-why {
      padding: 64px 48px;
      background: #fff;
      width: 100%
    }

    .hp-why-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-top: 40px
    }

    .hp-why-item {
      text-align: center;
      padding: 28px 20px;
      border: 1px solid #e8eef8;
      border-radius: 8px
    }

    .hp-why-num {
      font-size: 36px;
      font-weight: 700;
      color: #cc0000;
      margin-bottom: 8px
    }

    .hp-why-item h4 {
      font-size: 13px;
      font-weight: 700;
      color: #1a3a6b;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 8px
    }

    .hp-why-item p {
      font-size: 12px;
      color: #666;
      line-height: 1.7
    }

    .hp-ind {
      padding: 64px 48px;
      background: #0f2347;
      width: 100%
    }

    .hp-ind .hp-section-head h2 {
      color: #fff
    }

    .hp-ind .hp-section-head p {
      color: rgba(255, 255, 255, 0.6)
    }

    .hp-ind-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 36px
    }

    .hp-ind-card {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 24px;
      display: flex;
      gap: 16px;
      align-items: flex-start
    }

    .hp-ind-icon {
      width: 44px;
      height: 44px;
      background: rgba(204, 0, 0, 0.2);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .hp-ind-icon svg {
      width: 22px;
      height: 22px;
      stroke: #ff9999;
      fill: none
    }

    .hp-ind-card h4 {
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 6px
    }

    .hp-ind-card p {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.55);
      line-height: 1.7
    }

    .hp-contact {
      padding: 64px 48px;
      background: #f5f8ff;
      display: flex;
      gap: 48px;
      align-items: flex-start;
      width: 100%
    }

    .hp-contact-left {
      flex: 1
    }

    .hp-contact-left h2 {
      font-size: 28px;
      font-weight: 700;
      color: #1a3a6b;
      margin-bottom: 12px
    }

    .hp-contact-left p {
      font-size: 14px;
      color: #555;
      line-height: 1.8;
      margin-bottom: 24px
    }

    .hp-contact-info {
      display: flex;
      flex-direction: column;
      gap: 16px
    }

    .hp-ci {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .hp-ci-icon {
      width: 40px;
      height: 40px;
      background: #1a3a6b;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .hp-ci-icon svg {
      width: 18px;
      height: 18px;
      stroke: #fff;
      fill: none
    }

    .hp-ci-label {
      font-size: 11px;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 1px
    }

    .hp-ci-val {
      font-size: 14px;
      font-weight: 700;
      color: #1a3a6b
    }

    .hp-contact-right {
      flex: 0 0 380px;
      background: #fff;
      border-radius: 8px;
      border: 1px solid #e0e8f0;
      border-top: 3px solid #cc0000;
      padding: 28px
    }

    .hp-contact-right h3 {
      font-size: 16px;
      font-weight: 700;
      color: #1a3a6b;
      margin-bottom: 20px;
      text-transform: uppercase;
      letter-spacing: 0.5px
    }

    .hp-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 12px
    }

    .hp-form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 12px
    }

    .hp-form-group label {
      font-size: 11px;
      font-weight: 700;
      color: #555;
      text-transform: uppercase;
      letter-spacing: 0.8px
    }

    .hp-form-group input,
    .hp-form-group select,
    .hp-form-group textarea {
      border: 1px solid #d0daea;
      border-radius: 4px;
      padding: 10px 12px;
      font-size: 13px;
      color: #333;
      font-family: Arial, sans-serif;
      width: 100%
    }

    .hp-form-group textarea {
      height: 80px;
      resize: none
    }

    .hp-submit {
      width: 100%;
      background: #cc0000;
      color: #fff;
      border: none;
      padding: 12px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      cursor: pointer
    }

    .hp-submit:hover {
      background: #1a3a6b
    }

    @media(max-width:900px) {

      .hp-hero,
      .hp-intro,
      .hp-products,
      .hp-why,
      .hp-ind,
      .hp-contact {
        padding: 40px 20px
      }

      .hp-hero {
        flex-direction: column
      }

      .hp-hero-right {
        flex: none;
        width: 100%
      }

      .hp-intro {
        flex-direction: column
      }

      .hp-intro-img {
        flex: none;
        width: 100%
      }

      .hp-prod-grid,
      .hp-why-grid {
        grid-template-columns: 1fr 1fr
      }

      .hp-ind-grid {
        grid-template-columns: 1fr
      }

      .hp-contact {
        flex-direction: column
      }

      .hp-contact-right {
        flex: none;
        width: 100%
      }
    }
  

/* ── VE-CHUNG-TOI ── */

    /* ── Ẩn title mặc định Astra ── */
    .entry-title,
    .page-title,
    .ast-page-title,
    .site-main .entry-header,
    .page-header {
      display: none !important;
    }

    .site-main,
    #primary,
    #content,
    .content-area,
    .ast-article-single,
    .entry-content,
    .ast-container {
      max-width: 100% !important;
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    /* ── Page styles ── */
    * {
      box-sizing: border-box;
    }

    .vc-wrap {
      font-family: Arial, sans-serif;
      color: #333;
      width: 100%;
    }

    /* HERO */
    .vc-hero {
      background: linear-gradient(135deg, #0f2347 0%, #1a3a6b 60%, #0f2347 100%);
      padding: 80px 48px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .vc-hero::before {
      content: "";
      position: absolute;
      left: -80px;
      top: -80px;
      width: 350px;
      height: 350px;
      border: 60px solid rgba(204, 0, 0, 0.07);
      border-radius: 50%;
    }

    .vc-hero::after {
      content: "";
      position: absolute;
      right: -60px;
      bottom: -60px;
      width: 250px;
      height: 250px;
      border: 40px solid rgba(255, 255, 255, 0.04);
      border-radius: 50%;
    }

    .vc-hero-inner {
      position: relative;
      z-index: 1;
      max-width: 720px;
      margin: 0 auto;
    }

    .vc-hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(204, 0, 0, 0.2);
      border: 1px solid rgba(204, 0, 0, 0.4);
      padding: 6px 16px;
      border-radius: 4px;
      margin-bottom: 20px;
    }

    .vc-hero-tag span {
      font-size: 11px;
      font-weight: 700;
      color: #ff9999;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .vc-hero-tag .dot {
      width: 6px;
      height: 6px;
      background: #cc0000;
      border-radius: 50%;
    }

    .vc-hero h1 {
      font-size: 38px;
      font-weight: 700;
      color: #fff;
      line-height: 1.2;
      margin-bottom: 16px;
    }

    .vc-hero h1 em {
      color: #cc0000;
      font-style: normal;
    }

    .vc-hero p {
      font-size: 15px;
      color: rgba(255, 255, 255, 0.75);
      line-height: 1.8;
      max-width: 580px;
      margin: 0 auto;
    }

    .vc-hero-stats {
      display: flex;
      justify-content: center;
      gap: 48px;
      margin-top: 48px;
      padding-top: 32px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      flex-wrap: wrap;
    }

    .vc-stat .num {
      font-size: 32px;
      font-weight: 700;
      color: #fff;
    }

    .vc-stat .num span {
      color: #cc0000;
    }

    .vc-stat .lbl {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.5);
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-top: 4px;
    }

    /* PARTNERSHIP SECTION */
    .vc-partner {
      padding: 72px 48px;
      background: #fff;
      display: flex;
      gap: 64px;
      align-items: center;
    }

    .vc-partner-img {
      flex: 0 0 420px;
      background: #f0f4fa;
      border-radius: 8px;
      border: 1px solid #e0e8f0;
      border-top: 4px solid #cc0000;
      padding: 40px;
      text-align: center;
    }

    .vc-partner-logo {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 2px;
      margin-bottom: 16px;
    }

    .vc-partner-logo .ln {
      font-size: 48px;
      font-weight: 700;
      color: #0f2347;
    }

    .vc-partner-logo .ld {
      font-size: 48px;
      font-weight: 700;
      color: #cc0000;
    }

    .vc-partner-img .tagline {
      font-size: 11px;
      color: #888;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 24px;
    }

    .vc-partner-divider {
      height: 1px;
      background: #e0e8f0;
      margin: 20px 0;
    }

    .vc-partner-img .since {
      font-size: 12px;
      color: #888;
    }

    .vc-partner-img .since strong {
      color: #0f2347;
      font-size: 18px;
      display: block;
      margin-bottom: 4px;
    }

    .vc-badge-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 20px;
    }

    .vc-badge {
      background: #f0f4fa;
      border: 1px solid #c5d5e8;
      border-radius: 4px;
      padding: 5px 12px;
      font-size: 11px;
      font-weight: 700;
      color: #1a3a6b;
    }

    .vc-badge.red {
      background: rgba(204, 0, 0, 0.07);
      color: #cc0000;
      border-color: rgba(204, 0, 0, 0.2);
    }

    .vc-partner-text {
      flex: 1;
    }

    .vc-section-tag {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      color: #cc0000;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 2px solid #cc0000;
    }

    .vc-partner-text h2 {
      font-size: 28px;
      font-weight: 700;
      color: #1a3a6b;
      margin-bottom: 16px;
      line-height: 1.35;
    }

    .vc-partner-text p {
      font-size: 14px;
      color: #555;
      line-height: 1.9;
      margin-bottom: 14px;
    }

    .vc-highlight {
      background: #f0f4fa;
      border-left: 4px solid #cc0000;
      padding: 16px 20px;
      border-radius: 0 6px 6px 0;
      margin-top: 20px;
    }

    .vc-highlight p {
      margin: 0;
      font-size: 13px;
      color: #445;
      font-style: italic;
    }

    .vc-highlight strong {
      color: #0f2347;
      font-style: normal;
    }

    /* MISSION + VISION */
    .vc-mv {
      padding: 72px 48px;
      background: #f5f8ff;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }

    .vc-mv-card {
      background: #fff;
      border-radius: 8px;
      border: 1px solid #e0e8f0;
      border-top: 4px solid #cc0000;
      padding: 36px;
    }

    .vc-mv-icon {
      width: 52px;
      height: 52px;
      background: #f0f4fa;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
    }

    .vc-mv-icon svg {
      width: 26px;
      height: 26px;
      stroke: #1a3a6b;
      fill: none;
    }

    .vc-mv-card h3 {
      font-size: 16px;
      font-weight: 700;
      color: #1a3a6b;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 14px;
    }

    .vc-mv-card p {
      font-size: 14px;
      color: #555;
      line-height: 1.85;
    }

    /* WHY US */
    .vc-why {
      padding: 72px 48px;
      background: #fff;
    }

    .vc-why h2 {
      font-size: 28px;
      font-weight: 700;
      color: #1a3a6b;
      text-align: center;
      margin-bottom: 8px;
    }

    .vc-why .sub {
      text-align: center;
      font-size: 14px;
      color: #666;
      margin-bottom: 48px;
    }

    .vc-why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .vc-why-item {
      padding: 28px 24px;
      border: 1px solid #e0e8f0;
      border-radius: 8px;
      transition: box-shadow 0.2s, border-color 0.2s;
    }

    .vc-why-item:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      border-color: #cc0000;
    }

    .vc-why-num {
      font-size: 36px;
      font-weight: 700;
      color: #cc0000;
      margin-bottom: 10px;
      line-height: 1;
    }

    .vc-why-item h4 {
      font-size: 13px;
      font-weight: 700;
      color: #1a3a6b;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 10px;
    }

    .vc-why-item p {
      font-size: 13px;
      color: #666;
      line-height: 1.75;
    }

    /* FAST GROUP SECTION */
    .vc-fg {
      padding: 72px 48px;
      background: #0f2347;
      display: flex;
      gap: 64px;
      align-items: flex-start;
    }

    .vc-fg-left {
      flex: 1;
    }

    .vc-fg-left h2 {
      font-size: 28px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 16px;
      line-height: 1.35;
    }

    .vc-fg-left p {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.9;
      margin-bottom: 14px;
    }

    .vc-fg-features {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 28px;
    }

    .vc-fg-feat {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      padding: 16px 20px;
    }

    .vc-fg-feat-icon {
      width: 38px;
      height: 38px;
      flex-shrink: 0;
      background: rgba(204, 0, 0, 0.2);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .vc-fg-feat-icon svg {
      width: 18px;
      height: 18px;
      stroke: #ff9999;
      fill: none;
    }

    .vc-fg-feat h4 {
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 4px;
    }

    .vc-fg-feat p {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.6);
      line-height: 1.7;
      margin: 0;
    }

    .vc-fg-right {
      flex: 0 0 340px;
    }

    .vc-fg-card {
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      padding: 28px;
    }

    .vc-fg-card h3 {
      font-size: 11px;
      font-weight: 700;
      color: #7eb3e8;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    .vc-info-item {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 16px;
    }

    .vc-info-item svg {
      width: 15px;
      height: 15px;
      stroke: rgba(255, 255, 255, 0.4);
      fill: none;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .vc-info-label {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.35);
      letter-spacing: 1px;
      text-transform: uppercase;
      display: block;
      margin-bottom: 2px;
    }

    .vc-info-val {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.85);
      font-weight: 600;
      line-height: 1.5;
    }

    .vc-info-val a {
      color: rgba(255, 255, 255, 0.85);
      text-decoration: none;
    }

    .vc-info-val a:hover {
      color: #fff;
    }

    /* CTA */
    .vc-cta {
      padding: 64px 48px;
      background: #f5f8ff;
      text-align: center;
    }

    .vc-cta h2 {
      font-size: 28px;
      font-weight: 700;
      color: #1a3a6b;
      margin-bottom: 12px;
    }

    .vc-cta p {
      font-size: 15px;
      color: #555;
      margin-bottom: 28px;
      line-height: 1.8;
      max-width: 520px;
      margin-left: auto;
      margin-right: auto;
    }

    .vc-cta-btns {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .vc-btn-primary {
      background: #cc0000;
      color: #fff;
      padding: 13px 32px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      letter-spacing: 1px;
      text-transform: uppercase;
      transition: background 0.2s;
    }

    .vc-btn-primary:hover {
      background: #0f2347;
      color: #fff;
    }

    .vc-btn-secondary {
      background: #fff;
      color: #1a3a6b;
      padding: 13px 32px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      letter-spacing: 1px;
      text-transform: uppercase;
      border: 2px solid #1a3a6b;
      transition: all 0.2s;
    }

    .vc-btn-secondary:hover {
      background: #1a3a6b;
      color: #fff;
    }

    /* RESPONSIVE */
    @media (max-width: 900px) {

      .vc-hero,
      .vc-partner,
      .vc-mv,
      .vc-why,
      .vc-fg,
      .vc-cta {
        padding: 40px 20px;
      }

      .vc-partner,
      .vc-fg {
        flex-direction: column;
        gap: 32px;
      }

      .vc-partner-img,
      .vc-fg-right {
        flex: none;
        width: 100%;
      }

      .vc-mv {
        grid-template-columns: 1fr;
      }

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

      .vc-hero h1 {
        font-size: 28px;
      }

      .vc-hero-stats {
        gap: 24px;
      }
    }
  

/* ── TAI-LIEU-KY-THUAT ── */

    /* ── Reset Astra ── */
    .entry-title,
    .page-title,
    .ast-page-title,
    .site-main .entry-header,
    .page-header {
      display: none !important
    }

    .site-main,
    #primary,
    #content,
    .content-area,
    .ast-article-single,
    .entry-content,
    .ast-container {
      max-width: 100% !important;
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important
    }

    /* ── Page styles ── */
    * {
      box-sizing: border-box
    }

    .tl-wrap {
      font-family: Arial, sans-serif;
      color: #333;
      width: 100%
    }

    /* HERO */
    .tl-hero {
      background: linear-gradient(135deg, #0f2347 0%, #1a3a6b 60%, #0f2347 100%);
      padding: 60px 48px;
      text-align: center;
      position: relative;
      overflow: hidden
    }

    .tl-hero::before {
      content: "";
      position: absolute;
      right: -60px;
      top: -60px;
      width: 300px;
      height: 300px;
      border: 50px solid rgba(204, 0, 0, 0.07);
      border-radius: 50%
    }

    .tl-hero-inner {
      position: relative;
      z-index: 1;
      max-width: 640px;
      margin: 0 auto
    }

    .tl-hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(204, 0, 0, 0.2);
      border: 1px solid rgba(204, 0, 0, 0.4);
      padding: 6px 16px;
      border-radius: 4px;
      margin-bottom: 20px
    }

    .tl-hero-tag span {
      font-size: 11px;
      font-weight: 700;
      color: #ff9999;
      letter-spacing: 1.5px;
      text-transform: uppercase
    }

    .tl-hero-tag .dot {
      width: 6px;
      height: 6px;
      background: #cc0000;
      border-radius: 50%
    }

    .tl-hero h1 {
      font-size: 32px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 12px;
      line-height: 1.3
    }

    .tl-hero p {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.8
    }

    /* SEARCH BAR */
    .tl-search {
      background: #fff;
      padding: 24px 48px;
      border-bottom: 1px solid #e0e8f0;
      display: flex;
      align-items: center;
      gap: 12px
    }

    .tl-search input {
      flex: 1;
      padding: 10px 16px;
      border: 1.5px solid #d0daea;
      border-radius: 4px;
      font-size: 14px;
      color: #333;
      font-family: Arial, sans-serif;
      max-width: 400px
    }

    .tl-search input:focus {
      outline: none;
      border-color: #1a3a6b
    }

    .tl-search-label {
      font-size: 13px;
      color: #888;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px
    }

    /* MAIN */
    .tl-main {
      padding: 48px 48px 72px;
      background: #f5f8ff
    }

    /* SECTION GROUP */
    .tl-section {
      margin-bottom: 48px
    }

    .tl-section-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;
      padding-bottom: 14px;
      border-bottom: 2px solid #e0e8f0
    }

    .tl-section-icon {
      width: 44px;
      height: 44px;
      background: #0f2347;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .tl-section-icon svg {
      width: 22px;
      height: 22px;
      stroke: #fff;
      fill: none
    }

    .tl-section-title {
      font-size: 16px;
      font-weight: 700;
      color: #0f2347;
      text-transform: uppercase;
      letter-spacing: 0.8px
    }

    .tl-section-count {
      font-size: 12px;
      color: #888;
      margin-left: auto;
      font-weight: 600
    }

    /* TABLE */
    .tl-table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #e0e8f0
    }

    .tl-table thead tr {
      background: #0f2347
    }

    .tl-table thead th {
      padding: 12px 16px;
      font-size: 11px;
      font-weight: 700;
      color: #7eb3e8;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-align: left
    }

    .tl-table tbody tr {
      border-bottom: 1px solid #f0f4fa;
      transition: background 0.15s
    }

    .tl-table tbody tr:hover {
      background: #f8faff
    }

    .tl-table tbody tr:last-child {
      border-bottom: none
    }

    .tl-table td {
      padding: 14px 16px;
      font-size: 13px;
      vertical-align: middle
    }

    .tl-model {
      font-weight: 700;
      color: #0f2347;
      font-size: 14px
    }

    .tl-desc {
      color: #555;
      font-size: 12px;
      line-height: 1.5
    }

    .tl-badge {
      display: inline-block;
      background: #f0f4fa;
      border: 1px solid #c5d5e8;
      border-radius: 3px;
      padding: 2px 8px;
      font-size: 10px;
      font-weight: 700;
      color: #1a3a6b;
      margin-right: 4px
    }

    .tl-badge.red {
      background: rgba(204, 0, 0, 0.07);
      color: #cc0000;
      border-color: rgba(204, 0, 0, 0.2)
    }

    .tl-btn-dl {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #cc0000;
      color: #fff;
      padding: 7px 14px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
      text-decoration: none;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      transition: background 0.2s;
      white-space: nowrap
    }

    .tl-btn-dl:hover {
      background: #0f2347;
      color: #fff
    }

    .tl-btn-dl svg {
      width: 13px;
      height: 13px;
      stroke: #fff;
      fill: none
    }

    .tl-btn-view {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #f0f4fa;
      color: #1a3a6b;
      padding: 7px 14px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
      text-decoration: none;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      transition: all 0.2s;
      white-space: nowrap;
      border: 1px solid #c5d5e8;
      margin-right: 6px
    }

    .tl-btn-view:hover {
      background: #1a3a6b;
      color: #fff
    }

    .tl-btn-view svg {
      width: 13px;
      height: 13px;
      stroke: currentColor;
      fill: none
    }

    .tl-action {
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    /* SOFTWARE SECTION */
    .tl-software {
      background: #0f2347;
      border-radius: 8px;
      padding: 28px 32px;
      display: flex;
      align-items: center;
      gap: 32px;
      margin-top: 16px
    }

    .tl-software-icon {
      width: 60px;
      height: 60px;
      background: rgba(204, 0, 0, 0.2);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .tl-software-icon svg {
      width: 30px;
      height: 30px;
      stroke: #ff9999;
      fill: none
    }

    .tl-software-text {
      flex: 1
    }

    .tl-software-text h3 {
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 6px
    }

    .tl-software-text p {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.65);
      line-height: 1.7;
      margin: 0
    }

    .tl-software-btns {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex-shrink: 0
    }

    .tl-btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #cc0000;
      color: #fff;
      padding: 10px 20px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 700;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      transition: background 0.2s;
      white-space: nowrap
    }

    .tl-btn-primary:hover {
      background: #fff;
      color: #cc0000
    }

    .tl-btn-primary svg {
      width: 14px;
      height: 14px;
      stroke: #fff;
      fill: none
    }

    .tl-btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      padding: 10px 20px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 700;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      white-space: nowrap
    }

    .tl-btn-secondary:hover {
      background: rgba(255, 255, 255, 0.2)
    }

    /* NOTE */
    .tl-note {
      background: #fff;
      border: 1px solid #e0e8f0;
      border-left: 4px solid #1a3a6b;
      border-radius: 0 6px 6px 0;
      padding: 14px 20px;
      margin-top: 32px;
      font-size: 13px;
      color: #555;
      line-height: 1.7
    }

    .tl-note strong {
      color: #0f2347
    }

    @media(max-width:900px) {

      .tl-hero,
      .tl-main,
      .tl-search {
        padding-left: 20px;
        padding-right: 20px
      }

      .tl-table thead {
        display: none
      }

      .tl-table td {
        display: block;
        padding: 8px 12px
      }

      .tl-software {
        flex-direction: column;
        gap: 20px
      }

      .tl-software-btns {
        flex-direction: row;
        flex-wrap: wrap
      }
    }
  

/* ── UNG-DUNG-DAU-KHI ── */

    /* ── Reset Astra ── */
    .entry-title,
    .page-title,
    .ast-page-title,
    .site-main .entry-header,
    .page-header {
      display: none !important
    }

    .site-main,
    #primary,
    #content,
    .content-area,
    .ast-article-single,
    .entry-content,
    .ast-container {
      max-width: 100% !important;
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important
    }

    * {
      box-sizing: border-box
    }

    .ud-wrap {
      font-family: Arial, sans-serif;
      color: #333;
      width: 100%
    }

    /* HERO */
    .ud-hero {
      background: linear-gradient(135deg, #0f2347 0%, #1a3a6b 50%, #0f2347 100%);
      padding: 80px 48px;
      display: flex;
      gap: 48px;
      align-items: center;
      position: relative;
      overflow: hidden
    }

    .ud-hero::before {
      content: "";
      position: absolute;
      right: -80px;
      top: -80px;
      width: 400px;
      height: 400px;
      border: 70px solid rgba(204, 0, 0, 0.07);
      border-radius: 50%
    }

    .ud-hero::after {
      content: "";
      position: absolute;
      left: 30%;
      bottom: -60px;
      width: 200px;
      height: 200px;
      border: 40px solid rgba(255, 255, 255, 0.03);
      border-radius: 50%
    }

    .ud-hero-left {
      flex: 1;
      position: relative;
      z-index: 1;
      max-width: 620px
    }

    .ud-hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(204, 0, 0, 0.2);
      border: 1px solid rgba(204, 0, 0, 0.4);
      padding: 6px 16px;
      border-radius: 4px;
      margin-bottom: 20px
    }

    .ud-hero-tag span {
      font-size: 11px;
      font-weight: 700;
      color: #ff9999;
      letter-spacing: 1.5px;
      text-transform: uppercase
    }

    .ud-hero-tag .dot {
      width: 6px;
      height: 6px;
      background: #cc0000;
      border-radius: 50%
    }

    .ud-hero h1 {
      font-size: 38px;
      font-weight: 700;
      color: #fff;
      line-height: 1.25;
      margin-bottom: 16px
    }

    .ud-hero h1 em {
      color: #cc0000;
      font-style: normal
    }

    .ud-hero p {
      font-size: 15px;
      color: rgba(255, 255, 255, 0.75);
      line-height: 1.85;
      margin-bottom: 28px;
      max-width: 520px
    }

    .ud-hero-btns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    .ud-btn-primary {
      background: #cc0000;
      color: #fff;
      padding: 12px 28px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      letter-spacing: 1px;
      text-transform: uppercase;
      transition: background 0.2s
    }

    .ud-btn-primary:hover {
      background: #fff;
      color: #cc0000
    }

    .ud-btn-outline {
      background: transparent;
      color: #fff;
      padding: 12px 28px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      letter-spacing: 1px;
      text-transform: uppercase;
      border: 2px solid rgba(255, 255, 255, 0.4);
      transition: all 0.2s
    }

    .ud-btn-outline:hover {
      border-color: #fff;
      background: rgba(255, 255, 255, 0.1)
    }

    .ud-hero-right {
      flex: 0 0 320px;
      position: relative;
      z-index: 1
    }

    .ud-challenge-card {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      padding: 24px
    }

    .ud-challenge-card h3 {
      font-size: 12px;
      font-weight: 700;
      color: #7eb3e8;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 16px
    }

    .ud-challenge-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 14px
    }

    .ud-challenge-item .icon {
      width: 28px;
      height: 28px;
      background: rgba(204, 0, 0, 0.25);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px
    }

    .ud-challenge-item .icon svg {
      width: 14px;
      height: 14px;
      stroke: #ff9999;
      fill: none
    }

    .ud-challenge-item p {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.75);
      line-height: 1.6;
      margin: 0
    }

    .ud-challenge-item strong {
      color: #fff;
      display: block;
      margin-bottom: 2px;
      font-size: 12px
    }

    /* OVERVIEW */
    .ud-overview {
      padding: 64px 48px;
      background: #fff;
      display: flex;
      gap: 56px;
      align-items: flex-start
    }

    .ud-overview-text {
      flex: 1
    }

    .ud-section-tag {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      color: #cc0000;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 2px solid #cc0000
    }

    .ud-overview-text h2 {
      font-size: 28px;
      font-weight: 700;
      color: #1a3a6b;
      margin-bottom: 16px;
      line-height: 1.35
    }

    .ud-overview-text p {
      font-size: 14px;
      color: #555;
      line-height: 1.9;
      margin-bottom: 14px
    }

    .ud-overview-right {
      flex: 0 0 360px
    }

    .ud-spec-box {
      background: #f5f8ff;
      border: 1px solid #e0e8f0;
      border-radius: 8px;
      padding: 24px
    }

    .ud-spec-box h4 {
      font-size: 11px;
      font-weight: 700;
      color: #1a3a6b;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 16px;
      padding-bottom: 10px;
      border-bottom: 1px solid #e0e8f0
    }

    .ud-spec-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid #f0f4fa
    }

    .ud-spec-row:last-child {
      border-bottom: none
    }

    .ud-spec-label {
      font-size: 12px;
      color: #888;
      font-weight: 600
    }

    .ud-spec-val {
      font-size: 12px;
      color: #1a3a6b;
      font-weight: 700;
      text-align: right
    }

    /* APPLICATIONS */
    .ud-apps {
      padding: 64px 48px;
      background: #f5f8ff
    }

    .ud-apps-head {
      text-align: center;
      margin-bottom: 48px
    }

    .ud-apps-head h2 {
      font-size: 30px;
      font-weight: 700;
      color: #1a3a6b;
      margin-bottom: 8px
    }

    .ud-apps-head p {
      font-size: 14px;
      color: #666;
      max-width: 560px;
      margin: 0 auto
    }

    .ud-app-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28px
    }

    .ud-app-card {
      background: #fff;
      border: 1px solid #e0e8f0;
      border-radius: 8px;
      overflow: hidden;
      border-top: 4px solid #cc0000
    }

    .ud-app-card-header {
      background: #0f2347;
      padding: 20px 24px;
      display: flex;
      align-items: center;
      gap: 14px
    }

    .ud-app-card-icon {
      width: 44px;
      height: 44px;
      background: rgba(204, 0, 0, 0.2);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .ud-app-card-icon svg {
      width: 22px;
      height: 22px;
      stroke: #ff9999;
      fill: none
    }

    .ud-app-card-header h3 {
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      margin: 0
    }

    .ud-app-card-header p {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.55);
      margin: 3px 0 0;
      text-transform: uppercase;
      letter-spacing: 0.8px
    }

    .ud-app-body {
      padding: 24px
    }

    .ud-app-body p {
      font-size: 13px;
      color: #555;
      line-height: 1.8;
      margin-bottom: 16px
    }

    .ud-app-products {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 16px
    }

    .ud-prod-tag {
      background: #f0f4fa;
      border: 1px solid #c5d5e8;
      border-radius: 3px;
      padding: 3px 10px;
      font-size: 11px;
      font-weight: 700;
      color: #1a3a6b
    }

    .ud-prod-tag.highlight {
      background: rgba(204, 0, 0, 0.07);
      color: #cc0000;
      border-color: rgba(204, 0, 0, 0.2)
    }

    .ud-app-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
      color: #cc0000;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.5px
    }

    .ud-app-link:hover {
      color: #0f2347
    }

    .ud-app-link svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none
    }

    /* ATEX SECTION */
    .ud-atex {
      padding: 64px 48px;
      background: #0f2347
    }

    .ud-atex-inner {
      display: flex;
      gap: 56px;
      align-items: center
    }

    .ud-atex-text {
      flex: 1
    }

    .ud-atex-text h2 {
      font-size: 28px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 16px;
      line-height: 1.35
    }

    .ud-atex-text p {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.9;
      margin-bottom: 14px
    }

    .ud-atex-features {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 24px
    }

    .ud-atex-feat {
      display: flex;
      align-items: flex-start;
      gap: 12px
    }

    .ud-atex-feat-dot {
      width: 8px;
      height: 8px;
      background: #cc0000;
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 5px
    }

    .ud-atex-feat p {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.75);
      line-height: 1.7;
      margin: 0
    }

    .ud-atex-feat strong {
      color: #fff
    }

    .ud-atex-right {
      flex: 0 0 340px
    }

    .ud-atex-card {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      padding: 28px
    }

    .ud-atex-card h3 {
      font-size: 12px;
      font-weight: 700;
      color: #7eb3e8;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 20px
    }

    .ud-cert-item {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08)
    }

    .ud-cert-item:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0
    }

    .ud-cert-badge {
      width: 48px;
      height: 48px;
      background: rgba(204, 0, 0, 0.2);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 10px;
      font-weight: 700;
      color: #ff9999;
      text-align: center;
      letter-spacing: 0.5px
    }

    .ud-cert-info strong {
      display: block;
      font-size: 13px;
      color: #fff;
      margin-bottom: 3px
    }

    .ud-cert-info span {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.5);
      line-height: 1.5
    }

    /* CASE STUDY */
    .ud-case {
      padding: 64px 48px;
      background: #fff
    }

    .ud-case h2 {
      font-size: 28px;
      font-weight: 700;
      color: #1a3a6b;
      text-align: center;
      margin-bottom: 8px
    }

    .ud-case .sub {
      text-align: center;
      font-size: 14px;
      color: #666;
      margin-bottom: 48px
    }

    .ud-case-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px
    }

    .ud-case-card {
      border: 1px solid #e0e8f0;
      border-radius: 8px;
      overflow: hidden
    }

    .ud-case-card-top {
      background: linear-gradient(135deg, #0f2347, #1a3a6b);
      padding: 20px 24px;
      min-height: 100px;
      display: flex;
      align-items: flex-end
    }

    .ud-case-card-top h3 {
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      line-height: 1.3;
      margin: 0
    }

    .ud-case-card-body {
      padding: 20px 24px
    }

    .ud-case-card-body p {
      font-size: 13px;
      color: #555;
      line-height: 1.8;
      margin-bottom: 14px
    }

    .ud-case-solution {
      background: #f5f8ff;
      border-radius: 6px;
      padding: 12px 16px;
      margin-bottom: 14px
    }

    .ud-case-solution h4 {
      font-size: 11px;
      font-weight: 700;
      color: #cc0000;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 6px
    }

    .ud-case-solution p {
      font-size: 12px;
      color: #445;
      margin: 0;
      line-height: 1.7
    }

    .ud-result-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: #1a3a6b;
      font-weight: 700
    }

    .ud-result-row svg {
      width: 14px;
      height: 14px;
      stroke: #cc0000;
      fill: none;
      flex-shrink: 0
    }

    /* CTA */
    .ud-cta {
      padding: 64px 48px;
      background: #f5f8ff;
      text-align: center
    }

    .ud-cta h2 {
      font-size: 28px;
      font-weight: 700;
      color: #1a3a6b;
      margin-bottom: 12px
    }

    .ud-cta p {
      font-size: 15px;
      color: #555;
      line-height: 1.8;
      max-width: 520px;
      margin: 0 auto 28px
    }

    .ud-cta-btns {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap
    }

    @media(max-width:900px) {

      .ud-hero,
      .ud-overview,
      .ud-apps,
      .ud-atex,
      .ud-case,
      .ud-cta {
        padding: 40px 20px
      }

      .ud-hero,
      .ud-overview,
      .ud-atex-inner {
        flex-direction: column;
        gap: 32px
      }

      .ud-hero-right,
      .ud-overview-right,
      .ud-atex-right {
        flex: none;
        width: 100%
      }

      .ud-app-grid,
      .ud-case-grid {
        grid-template-columns: 1fr
      }
    }
  

/* ── FEATURED PRODUCTS GRID (Homepage) ── */
.hp-featured{max-width:1140px;margin:0 auto;padding:48px 24px}
.hp-featured-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.hp-featured-card{display:block;background:#fff;border:1px solid #e8edf3;border-radius:8px;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s;text-decoration:none}
.hp-featured-card:hover{border-color:#cc0000;box-shadow:0 4px 20px rgba(0,0,0,.08);transform:translateY(-2px)}
.hp-featured-img{background:#f8fafc;padding:20px;display:flex;align-items:center;justify-content:center;min-height:160px}
.hp-featured-img img{max-height:120px;max-width:100%;object-fit:contain}
.hp-featured-body{padding:12px 14px}
.hp-featured-cat{font-size:10px;color:#888;text-transform:uppercase;letter-spacing:.8px}
.hp-featured-body h3{font-size:14px;font-weight:700;color:#1a3a6b;margin-top:4px}