@keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes blink {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes shake-anim {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg)
    }

    10%,30% {
        -moz-transform: rotate(-25deg) scale(1) skew(1deg)
    }

    20%,40% {
        -moz-transform: rotate(25deg) scale(1) skew(1deg)
    }

    100%,50% {
        -moz-transform: rotate(0) scale(1) skew(1deg)
    }
}

@-webkit-keyframes shake-anim {
    0%,100%,50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg)
    }

    10%,30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg)
    }

    20%,40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg)
    }
}

@font-face {
    font-family: 'rb';
    src: url("../fonts/Roboto-Bold.ttf");
    font-style: normal;
    font-display: block
}

@font-face {
    font-family: 'rm';
    src: url("../fonts/Roboto-Medium.ttf");
    font-style: normal;
    font-display: block
}

@font-face {
    font-family: 'rr';
    src: url("../fonts/Roboto-Regular.ttf");
    font-style: normal;
    font-display: block
}

div.wap_main {
    max-width: 1920px;
    margin: 0 auto;
    width: 100%
}

.wrap-1200 {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto
}

input,button,select {
    appearance: none;
    box-shadow: none!important
}

body {
    font-family: 'rr';
    font-size: 14px;
    top: 0px!important
}

footer {
    margin-bottom: 0px!important
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top
}

a:hover {
    color: #000;
}

a,input,textarea {
    outline: none;
    padding: 0px
}

h2,h3 {
    margin-bottom: 0px;
    line-height: normal;
    font-size: unset;
    font-weight: unset
}

a {
    text-decoration: none!important
}

input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.w-clear:after {
    display: block;
    content: "";
    clear: both
}

.hidden {
    display: none
}

.clear {
    clear: both
}

.none {
    display: none
}

.hidden-seoh {
    visibility: hidden;
    height: 0px;
    margin: 0px;
    overflow: hidden
}

.wap_1200 {
    max-width: 1200px;
    margin: auto;
    position: relative
}

.wrap-main,.wrap-content {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0px
}

.wrap-home {
    max-width: 100%;
    padding: 0px;
    margin: 0
}

.wrap-content {
    margin: auto
}

.title-main {
    margin-bottom: 1rem;
    text-align: center;
    padding-bottom: 10px;
    position: relative
}

.title-main::before {
    position: absolute;
    content: '';
    width: 100px;
    height: 1px;
    background: #ffffff;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px
}

.title-main span {
    text-transform: uppercase;
    color: #0774d0;
    font-size: 26px;
    font-family: 'rb'
}

.time-main {
    margin-bottom: 0.75rem;
    color: #999999
}

.time-main i {
    vertical-align: top;
    margin: 3px 7px 0px 0
}

.time-main span {
    vertical-align: top;
    display: inline-block
}

.share {
    padding: 17px 15px 10px 15px;
    line-height: normal;
    background: rgba(128,128,128,0.15);
    margin-top: 15px;
    border-radius: 5px
}

.share b {
    display: block;
    margin-bottom: 5px
}

.control-owl {
    position: absolute;
    width: 100%;
    z-index: 2;
    left: 0px;
    top: calc(50% - 45px / 2)
}

.control-owl button {
    opacity: 0.5;
    top: 0px;
    position: absolute;
    outline: none;
    border: 0px;
    padding: 0px;
    margin: 0px;
    display: block;
    cursor: pointer;
    color: #ffffff;
    width: 45px;
    height: 45px;
    text-align: center;
    font-size: 25px;
    margin: 0px;
    background-color: #000000;
    border-radius: 3px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.control-owl button:hover {
    opacity: 1
}

.control-owl button.owl-prev {
    left: 20px
}

.control-owl button.owl-next {
    right: 20px
}

.form-control,.form-control-plaintext:not(textarea),.custom-select {
    height: calc(1em + 1.25rem + 8px)
}

.custom-form-row {
    margin-right: -10px;
    margin-left: -10px
}

.custom-form-row > .col,.custom-form-row > [class*="col-"] {
    padding-right: 10px;
    padding-left: 10px
}

.text-sm {
    font-size: 0.875rem!important
}

img.lazy {
    opacity: 0
}

img:not(.initial) {
    -webkit-transition: opacity 1s;
    transition: opacity 1s
}

img.initial,img.loaded,img.error {
    opacity: 1
}

img:not([src]) {
    visibility: hidden
}

.wrap-user {
    width: 100%;
    max-width: 550px;
    margin: auto;
    border: 1px solid #bce8f1;
    border-radius: 5px
}

.title-user {
    background-color: #000000;
    padding: 12px 15px;
    border-radius: 5px 5px 0px 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.title-user span {
    color: #ffffff
}

.title-user a {
    color: #0056b3;
    font-size: 12px
}

.form-user {
    padding: 20px 15px;
    border: 1px solid #c00;
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px
}

.input-user {
    margin-bottom: 0.75rem
}

.input-user input {
    font-size: 14px
}

.button-user {
    margin-bottom: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.button-user input {
    font-size: 14px
}

.checkbox-user,.radio-user {
    cursor: pointer
}

.checkbox-user input {
    top: calc(50% - 1.25rem / 2);
    height: auto
}

.radio-user label::after {
    top: calc(50% - 1rem / 2)
}

.note-user {
    font-size: 14px;
    border-top: 1px solid #ddd;
    padding-top: 0.5rem
}

.menu_mobi_add,.menu_mobi {
    display: none
}

.menu {
    background: #fff;
    box-shadow: 0 0 5px -2px #fff;
    position: relative;
    z-index: 2
}

.menu ul {
    width: 100%;
    padding: 0px;
    margin: auto;
    list-style: none
}

.menu ul.menu-main {
    display: flex;
    align-items: center;
    justify-content: center
}

.menu ul li {
    position: relative;
    z-index: 1
}

.menu ul li.li-home a {
    padding-left: 0
}

.menu ul li.li-end a {
    padding-right: 0
}

.menu ul li a:hover,.menu ul li a.active {
    color: #afafaf
}

.menu ul li.menu-line {
    width: 1px;
    height: 15px;
    background-color: rgb(255 255 255)
}

.menu ul li a {
    display: block;
    position: relative;
    font-size: 15px;
    color: #ffffff;
    padding: 10px 20px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: rm
}

.menu ul li ul {
    position: absolute;
    min-width: 250px;
    background-color: #fafafa;
    border-radius: 0.25rem;
    box-shadow: 1px 1px 15px rgba(0,0,0,0.15);
    transform: perspective(600px) rotateX(-90deg);
    transform-origin: 0 0 0;
    opacity: 0;
    visibility: hidden
}

.menu ul li:hover > ul {
    transform: perspective(600px) rotateX(0);
    transform-origin: 0 0 0;
    opacity: 1;
    visibility: visible
}

.menu ul li ul li {
    padding-left: 0.75rem;
    padding-right: 0.75rem
}

.menu ul li ul li a {
    font-size: 14px;
    color: #313131;
    border-bottom: 1px solid #ececec;
    padding: 10px 0px 9px 0px;
    text-transform: capitalize
}

.menu ul li ul li a.has-child {
    margin-right: 0px
}

.menu ul li ul li a.has-child:after {
    border-color: #313131;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.menu ul li ul li a.active {
    color: var(--maincolor)
}

.menu ul li ul li a.active.has-child:after {
    border-color: var(--maincolor)
}

.menu ul li ul li:last-child > a {
    border-bottom: 0px
}

.menu ul li ul li:hover > a {
    color: var(--maincolor)
}

.menu ul li ul li:hover > a.has-child:after {
    border-color: var(--maincolor)
}

.menu ul li ul li ul {
    top: 0px;
    left: 100%;
    margin-top: 0px
}

.menu-fix {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    z-index: 999;
    animation: fadeInDown 1.3s ease backwards
}

.menu-fix .logo_header {
    max-width: 70px
}

.search {
    margin: 0px 0px 30px 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #efefef;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #ccc
}

.search input {
    flex: 1;
    padding: 10px 20px;
    border: 0px;
    min-width: 200px;
    font-size: 14px;
    background: transparent;
    color: #313131
}

.search button {
    background: #1a1a1a;
    color: #fff;
    width: 60px;
    font-size: 20px;
    cursor: pointer
}

.search input:-moz-placeholder {
    color: #313131
}

.search input::-moz-placeholder {
    color: #313131
}

.search input:-ms-input-placeholder {
    color: #313131
}

.menu-res {
    height: 55px;
    z-index: 997;
    background: var(--maincolor);
    position: sticky;
    display: none;
    position: -webkit-sticky;
    top: 0
}

.menu-bar-res {
    height: 55px;
    padding: 0px 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.slideshow {
    position: relative;
    overflow: hidden
}

@keyframes len {
    0% {
        transform: translateY(100px);
        opacity: 0
    }

    40% {
        transform: translateY(100px);
        opacity: 0
    }

    100% {
        transform: translateY(0px);
        opacity: 1
    }
}

.control-slideshow {
    opacity: 0
}

.slideshow:hover .control-slideshow {
    opacity: 1
}

.control-slideshow button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    outline: none;
    border: 0px;
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 30px;
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #ffffff;
    background: rgba(0,0,0,0.5)
}

.control-slideshow button.owl-prev {
    left: 10px
}

.control-slideshow button.owl-next {
    right: 10px
}

.container_product {
    display: flex;
    flex-flow: wrap;
    margin: -5px
}

.item_product {
    width: calc(20% - 10px);
    margin: 5px;
    box-shadow: 0 0 4px #fff;
    border-radius: 5px;
    background: #fff
}

.item_3 .item_product {
    width: calc(100% / 3 - 20px)
}

.img_product {
    overflow: hidden;
    padding: 10px
}

.name_product {
    font-size: 15px;
    font-family: 'rr'
}

.name_product a {
    color: #000;
    text-align: start;
    display: block
}

.name_product a:hover {
    color: #f00
}

.content_product {
    padding: 0 10px;
    padding-top: 15px
}

.price_product {
    text-align: start;
    padding: 5px 0 5px 0
}

.price-new {
    font-size: 14px;
    font-family: 'rb';
    color: #fd0000
}

.price-new b {
    color: #000
}

.price-old {
    font-size: 12px;
    color: #6c757d;
    text-decoration: line-through
}

.price-per {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    background: #ff0000;
    font-size: 13px;
    width: 45px;
    height: 25px;
    border-radius: 7px;
    font-family: 'rb';
    display: flex;
    align-items: center;
    justify-content: center
}

.catchuoi1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
}

.catchuoi2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.container_news_index {
    display: flex;
    flex-flow: wrap;
    margin: -10px
}

.item_news_index {
    width: calc(25% - 20px);
    margin: 10px
}

.box_news_index {
    padding: 30px 5px
}

.box_product_list,.box_product_list_tab,.box_product_tab_permanent {
    padding: 30px 5px
}

.toolbar {
    display: none
}

.load-menu-api.active {
    display: block!important;
    position: fixed;
    z-index: 99;
    background: #fff;
    width: 100%;
    padding: 0 100px
}

.load-menu-api {
    height: 600px
}

.grid-cate-product {
    display: grid;
    grid-template-columns: 280px calc(100% - 300px);
    gap: 20px
}

.footer-article {
    background-color: #d3d3d3
}

.footer-article .wrap-content {
    padding: 35px 0px
}

.footer-tags {
    background: #eee
}

.footer-tags .wrap-content {
    padding: 30px 15px
}

.footer-tags-lists {
    list-style: none;
    padding: 0px;
    margin: 0px
}

.footer-tags-lists li {
    float: left
}

.footer-tags-lists li a {
    padding-bottom: 0.375rem
}

.footer-powered {
    color: #ffffff;
    background-color: #000000
}

.footer-powered .wrap-content {
    padding-top: 15px;
    padding-bottom: 15px
}

.footer-statistic {
    text-align: right
}

.footer-statistic span {
    padding-right: 10px
}

.footer-statistic span:last-child {
    padding-right: 0px
}

.js-facebook-messenger-top-header {
    width: 220px;
    color: #ffffff;
    background: #1182fc;
    display: block;
    position: relative;
    width: 220px;
    background: #1182fc;
    color: #ffffff;
    text-align: center;
    line-height: 1;
    padding: 10px;
    font-size: 14px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
}

.js-facebook-messenger-top-header {
    color: #ffffff;
    background: #1182fc;
    width: 220px
}

div.wap_footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.footer-news:nth-child(1) {
    width: 30%
}

.footer-news:nth-child(2) {
    width: 15%
}

.footer-news:nth-child(3) {
    width: 20%
}

.footer-news:nth-child(4) {
    width: 25%
}

.footer-title {
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 20px
}

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

.footer-ul li {
    margin-bottom: 10px
}

.footer-ul li:last-child {
    margin-bottom: 0px
}

.footer-ul li a {
    color: #212529
}

.footer-ul li a:hover {
    text-decoration: none;
    color: #000000
}

.social-header li {
    width: 30px
}

.social-footer {
    padding: 0;
    margin: -5px;
    list-style: none;
    display: flex;
    align-items: center
}

.social-footer li {
    margin: 5px
}

.social-footer li a {
    transition: 0.3s
}

.social-footer li a:hover {
    transform: translateY(-5px)
}

.toolbar ul li {
    width: 25%;
    text-align: center;
    padding: 10px 0
}

.toolbar ul li a img {
    filter: brightness(0) invert(1)
}

.toolbar ul li a {
    color: #fff
}

/* ========== THEME 2026 — Multi-Industry ========== */
*,*::before,*::after {
    box-sizing: border-box
}

body {
    font-size: 15px;
    color: #1a1a2e;
    background: #fff;
    -webkit-font-smoothing: antialiased
}

.grid-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px
}

.grid-row__col-12 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 12px
}

.grid-row__col-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 12px
}

.grid-row__col-4 {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    padding: 0 12px
}

.grid-row__col-3 {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0 12px
}

.grid-row__col-2 {
    flex: 0 0 16.666%;
    max-width: 16.666%;
    padding: 0 12px
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    backdrop-filter: blur(24px);
    padding: 8px 0;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    gap: 48px
}

.site-header__logo {
    display: block;
    width: auto;
}

.site-header__left {
    display: flex;
    align-items: center;
    gap: 30px;
}

.site-header__logo img {
    width: 115px;
}

.site-header__nav {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.site-header__nav-item span {
    padding: 5px 20px;
    font-size: 14px;
    font-family: 'rm';
    color: #000000;
    text-decoration: none;
    transition: color 0.3s;
    background: #ffffff00;
    border-radius: 10px;
    display: block;
    overflow: hidden;
}

.site-header__nav-item:hover span,.site-header__nav-item--active span {
    color: #5907ff;
    background: #5c01ff12;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0
}

.site-header__icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #94a3b8;
    font-size: 15px;
    cursor: pointer;
    transition: color 0.3s
}

.site-header__icon-btn:hover {
    color: #1a1a2e
}

.site-header__cart {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #994cf4;
    font-size: 14px;
    font-family: 'rm';
    text-decoration: none;
    transition: color 0.3s;
    width: 35px;
    height: 35px;
    justify-content: center;
    border-radius: 10px;
}

.site-header__cart:hover {
    color: #994cf4;
    background: #994cf424;
}

.site-header__search {
    display: flex;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
}

.site-header__search.site-header__search--open {
    box-shadow: 0 0 8px #9b4df44a;
    border-radius: 10px;
}

.site-header__search .search-grid {
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 0;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94)
}

.site-header__search .search-grid input {
    border: none;
    background: transparent;
    font-size: 14px;
    color: #1a1a2e;
    outline: none;
    font-family: 'rr';
    width: 100%;
    height: 35px;
    padding-left: 10px;
}

.site-header__search .search-grid input::placeholder {
    color: #94a3b8
}

.site-header__search .search-grid p {
    cursor: pointer;
    color: #94a3b8;
    padding: 0 8px;
    transition: color 0.3s
}

.site-header__search .search-grid p:hover {
    color: #1a1a2e
}

.site-header__search .icon-search {
    color: #994cf4;
    font-size: 15px;
    cursor: pointer;
    transition: color 0.3s;
    margin: 0;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-header__search .icon-search:hover {
    color: #994cf4;
    background: #994cf424;
}

.site-header__search--open .search-grid {
    width: 220px;
    opacity: 1;
}

.site-header__cart i {
    font-size: 15px
}

/* Mega Menu */
a.site-header__nav-item {
    display: block;
    padding: 10px 0;
}

.site-header__nav-hasmenu {
    position: relative;
}

.site-header__mega {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 99;
    min-width: 800px;
    pointer-events: none
}

.site-header__nav-hasmenu:hover .site-header__mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.site-header__mega-inner {
    padding: 10px;
}

.site-header__mega-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
}

.site-header__mega-col {
    padding: 8px;
    box-shadow: 0 0 8px #e1e1e1;
    border-radius: 10px;
}

.site-header__mega-parent p {
    margin: 0px;
    font-family: 'rm';
    font-size: 14px;
}

a.site-header__mega-parent img {
    width: 100%;
    border-radius: 10px;
}

a.site-header__mega-parent span {
    font-size: 12px;
    font-family: rr;
    -webkit-line-clamp: 3;
    line-height: 18px;
    margin-top: 2px;
}

.site-header__mega-col:last-child {
    border-right: 0
}

.site-header__mega-parent {
    color: #1a1a2e;
    transition: color 0.3s;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 15px;
}

.site-header__mega-col:hover {
    box-shadow: 0 0 8px#994cf459
}

.site-header__mega-subs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.site-header__mega-subs a {
    font-size: 13px;
    font-family: 'rr';
    color: #64748b;
    text-decoration: none;
    transition: color 0.3s
}

.site-header__mega-subs a:hover {
    color: #1a1a2e
}

.hero-slider {
    position: relative;
    overflow: hidden
}

.hero-slider .slick-slide img {
    width: 100%;
    height: auto;
    min-height: 400px;
    object-fit: cover
}

.section-block {
    padding: 80px 0
}

.section-block--gray {
    background: #f8fafc
}

.section-block__head {
    text-align: center;
    margin-bottom: 48px
}

.section-block__badge {
    display: inline-block;
    padding: 5px 16px;
    background: rgba(124,58,237,0.06);
    border-radius: 50px;
    font-size: 12px;
    font-family: 'rm';
    color: #7c3aed;
    margin-bottom: 12px;
    letter-spacing: 0.5px
}

.section-block__title {
    font-family: 'rb';
    font-size: clamp(24px,4vw,32px);
    color: #1a1a2e;
    margin-bottom: 12px;
    line-height: 1.3
}

.section-block__subtitle {
    font-size: 16px;
    color: #64748b;
    max-width: 520px;
    margin: 0 auto
}

.section-block__bar {
    display: block;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg,#7c3aed,#06b6d4);
    border-radius: 2px;
    margin: 16px auto 0
}

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

.about-card {
    padding: 40px 32px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s;
    position: relative;
    overflow: hidden
}

.about-card--vision {
    background: linear-gradient(135deg,#f8f7ff,#ede9fe)
}

.about-card--mission {
    background: linear-gradient(135deg,#f0f9ff,#e0f2fe)
}

.about-card--about {
    background: linear-gradient(135deg,#fff1f2,#fce7f3)
}

.about-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.06)
}

.about-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 22px;
    color: #fff
}

.about-card--vision .about-card__icon {
    background: linear-gradient(135deg,#7c3aed,#a855f7)
}

.about-card--mission .about-card__icon {
    background: linear-gradient(135deg,#06b6d4,#22d3ee)
}

.about-card--about .about-card__icon {
    background: linear-gradient(135deg,#ef4444,#f87171)
}

.about-card__title {
    font-family: 'rb';
    font-size: 20px;
    color: #1a1a2e;
    margin-bottom: 12px
}

.about-card__desc {
    font-size: 14px;
    color: #64748b;
    line-height: 1.7
}

.cat-showcase {
    margin: 0 0 40px
}

.cat-showcase__item {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 40px
}

.cat-showcase__item--reverse {
    flex-direction: row-reverse
}

.cat-showcase__content {
    flex: 1
}

.cat-showcase__label {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-family: 'rm';
    margin-bottom: 12px
}

.cat-showcase__label--purple {
    background: rgba(124,58,237,0.08);
    color: #7c3aed
}

.cat-showcase__label--cyan {
    background: rgba(6,182,212,0.08);
    color: #06b6d4
}

.cat-showcase__label--blue {
    background: rgba(59,130,246,0.08);
    color: #3b82f6
}

.cat-showcase__title {
    font-family: 'rb';
    font-size: 28px;
    color: #1a1a2e;
    margin-bottom: 12px
}

.cat-showcase__desc {
    font-size: 15px;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 20px
}

.cat-showcase__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'rm';
    font-size: 14px;
    text-decoration: none;
    transition: gap 0.2s
}

.cat-showcase__link--purple {
    color: #7c3aed
}

.cat-showcase__link--cyan {
    color: #06b6d4
}

.cat-showcase__link--blue {
    color: #3b82f6
}

.cat-showcase__link:hover {
    gap: 10px
}

.cat-showcase__image {
    flex: 1;
    min-width: 300px
}

.cat-showcase__image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08)
}

.criteria-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 0;
    position: relative
}

.criteria-card {
    text-align: center;
    padding: 40px 20px;
    position: relative
}

.criteria-card:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 30%;
    height: 40%;
    width: 1px;
    background: rgba(255,255,255,0.1)
}

.criteria-card__num {
    font-family: 'rb';
    font-size: 48px;
    background: linear-gradient(135deg,#7c3aed,#06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1
}

.criteria-card__title {
    font-family: 'rm';
    font-size: 16px;
    color: #1a1a2e;
    margin: 12px 0 8px
}

.criteria-card__desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6
}

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

.product-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #f1f5f9;
    transition: all 0.3s
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.06);
    border-color: rgba(124,58,237,0.15)
}

.product-card__image {
    display: block;
    overflow: hidden;
    background: #f8fafc;
    aspect-ratio: 4/3;
    position: relative
}

.product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s
}

.product-card:hover .product-card__image img {
    transform: scale(1.05)
}

.product-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 10px;
    font-family: 'rm';
    color: #fff;
    background: linear-gradient(135deg,#ef4444,#f87171)
}

.product-card__body {
    padding: 16px
}

.product-card__category {
    font-size: 11px;
    color: #7c3aed;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px
}

.product-card__title {
    font-size: 15px;
    font-family: 'rm';
    color: #1a1a2e;
    margin-bottom: 8px;
    line-height: 1.4
}

.product-card__price {
    font-family: 'rb';
    font-size: 16px;
    color: #7c3aed
}

.product-card__price-old {
    font-size: 13px;
    color: #94a3b8;
    text-decoration: line-through;
    margin-left: 8px
}

.see-more {
    text-align: center;
    margin-top: 24px
}

.see-more__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7c3aed;
    font-family: 'rm';
    font-size: 14px;
    text-decoration: none;
    transition: gap 0.2s
}

.see-more__link:hover {
    gap: 10px
}

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

.review-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid #f1f5f9;
    transition: all 0.3s
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.06)
}

.review-card__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px
}

.review-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg,#7c3aed,#06b6d4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'rb';
    font-size: 18px;
    flex-shrink: 0
}

.review-card__name {
    font-family: 'rm';
    font-size: 15px;
    color: #1a1a2e
}

.review-card__role {
    font-size: 12px;
    color: #94a3b8
}

.review-card__stars {
    color: #f59e0b;
    font-size: 13px;
    letter-spacing: 2px
}

.review-card__text {
    font-size: 14px;
    color: #64748b;
    line-height: 1.7;
    font-style: italic
}

.consult-section {
    background: linear-gradient(135deg,#f8f7ff,#f0f9ff);
    padding: 60px 0;
    text-align: center
}

.consult-form {
    display: flex;
    max-width: 480px;
    margin: 24px auto 0;
    gap: 10px
}

.consult-form__input {
    flex: 1;
    padding: 14px 18px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
    color: #1a1a2e;
    transition: border 0.2s
}

.consult-form__input:focus {
    border-color: #7c3aed
}

.consult-form__btn {
    padding: 14px 32px;
    background: linear-gradient(135deg,#7c3aed,#a855f7);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'rm';
    font-size: 15px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s
}

.consult-form__btn:hover {
    box-shadow: 0 6px 20px rgba(124,58,237,0.35);
    transform: translateY(-1px)
}

.site-footer {
    background: #0f172a;
    color: #94a3b8;
    padding: 60px 0 0
}

.site-footer__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px
}

.site-footer__col {
    flex: 1;
    min-width: 200px
}

.site-footer__col--wide {
    flex: 2;
    min-width: 280px
}

.site-footer__logo {
    margin-bottom: 16px
}

.site-footer__logo img {
    height: 32px
}

.site-footer__about {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 16px;
    color: #94a3b8
}

.site-footer__social {
    display: flex;
    gap: 8px
}

.site-footer__social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    color: #94a3b8;
    font-size: 15px;
    transition: all 0.2s
}

.site-footer__social a:hover {
    background: rgba(124,58,237,0.2);
    color: #a855f7
}

.site-footer__title {
    font-family: 'rm';
    font-size: 15px;
    color: #fff;
    margin-bottom: 18px;
    text-transform: none
}

.site-footer__links li {
    margin-bottom: 10px
}

.site-footer__links a {
    font-size: 14px;
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s
}

.site-footer__links a:hover {
    color: #fff
}

.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 20px 0;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient(135deg,#7c3aed,#a855f7);
    color: #fff;
    border-radius: 10px;
    font-family: 'rm';
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s
}

.btn-primary:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124,58,237,0.35)
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border: 1.5px solid #e2e8f0;
    color: #7c3aed;
    border-radius: 10px;
    font-family: 'rm';
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s
}

.btn-outline:hover {
    border-color: #7c3aed;
    background: rgba(124,58,237,0.04)
}

/* ========== HOMI-STYLE 2026 ========== */
/* Marquee / Carousel */
.hmi-carousel {
    overflow: hidden
}

.hmi-carousel .slick-track {
    display: flex;
    align-items: center
}

.hmi-carousel__partner {
    display: inline-flex;
    align-items: center;
    padding: 16px 32px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-right: 16px;
    font-family: 'rm';
    font-size: 14px;
    color: #1a1a2e
}

/* Scroll Cards */
.hmi-scroll-cards {
    overflow: hidden;
    padding: 10px 0
}

.hmi-scroll-cards__track {
    display: flex;
    gap: 20px;
    animation: hmiScroll 40s linear infinite
}

.hmi-scroll-cards__track:hover {
    animation-play-state: paused
}

.hmi-scroll-cards__card {
    margin: 0 10px;
    flex: 0 0 320px;
    padding: 28px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f1f5f9;
    transition: all 0.3s
}

.hmi-scroll-cards__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.06)
}

.hmi-scroll-cards__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,rgba(124,58,237,0.1),rgba(168,85,247,0.1));
    border-radius: 12px;
    margin-bottom: 16px;
    font-size: 22px;
    color: #7c3aed
}

.hmi-scroll-cards__title {
    font-family: 'rm';
    font-size: 16px;
    color: #1a1a2e;
    margin-bottom: 8px
}

.hmi-scroll-cards__desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6
}

@keyframes hmiScroll {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

/* Process / Timeline */
.hmi-process {
    display: flex;
    gap: 60px;
    align-items: flex-start
}

.hmi-process__timeline {
    flex: 0 0 280px;
    position: relative
}

.hmi-process__line {
    position: absolute;
    left: 12px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px
}

.hmi-process__step {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    cursor: pointer;
    transition: all 0.3s
}

.hmi-process__step:hover {
    background: rgba(255,255,255,0.04);
    border-radius: 8px
}

.hmi-process__step-dot {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0
}

.hmi-process__step-dot span {
    position: absolute;
    inset: 6px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    transition: all 0.3s
}

.hmi-process__step--active .hmi-process__step-dot span {
    background: #7c3aed;
    box-shadow: 0 0 16px rgba(124,58,237,0.5)
}

.hmi-process__step-num {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 1px
}

.hmi-process__step--active .hmi-process__step-num {
    color: #a78bfa
}

.hmi-process__step-title {
    font-size: 15px;
    font-family: 'rm';
    color: rgba(255,255,255,0.6);
    margin: 0;
    transition: color 0.3s
}

.hmi-process__step--active .hmi-process__step-title {
    color: #fff
}

.hmi-process__cards {
    flex: 1;
    position: relative;
    min-height: 320px
}

.hmi-process__card {
    position: absolute;
    inset: 0;
    padding: 32px;
    background: linear-gradient(145deg,rgba(30,41,59,0.9),rgba(15,23,42,0.9));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s;
    pointer-events: none
}

.hmi-process__card--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    z-index: 10
}

.hmi-process__card-shine {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,transparent,#7c3aed,transparent);
    opacity: 0.3
}

.hmi-process__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px
}

.hmi-process__card-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,rgba(124,58,237,0.2),transparent);
    border-radius: 12px;
    color: #fff;
    font-size: 22px
}

.hmi-process__card-num {
    font-size: 48px;
    font-weight: 800;
    color: rgba(255,255,255,0.06)
}

.hmi-process__card-title {
    font-family: 'rb';
    font-size: 22px;
    color: #fff;
    margin-bottom: 16px
}

.hmi-process__card-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.hmi-process__card-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: rgba(255,255,255,0.6)
}

.hmi-process__card-list li i {
    color: #7c3aed;
    font-size: 12px
}

/* Product card detail layout */
.product-card--alt {
    flex-direction: row-reverse
}

.product-card__media {
    overflow: hidden;
    border-radius: 16px 16px 0 0
}

.product-card--alt .product-card__media {
    border-radius: 16px
}

.product-card__detail {
    padding: 20px
}

.product-card__detail-title {
    font-family: 'rb';
    font-size: 18px;
    color: #1a1a2e;
    margin-bottom: 4px
}

.product-card__detail-cat {
    font-size: 12px;
    color: #7c3aed;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px
}

.product-card__features {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.product-card__features li {
    font-size: 13px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px
}

.product-card__features li i {
    color: #7c3aed;
    font-size: 11px
}

.product-card__pricing {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px
}

.btn-primary--sm {
    margin-top: 16px;
    font-size: 13px;
    padding: 10px 24px
}

.section-block--dark {
    background: #0f172a
}

.section-block__badge--dark {
    background: rgba(124,58,237,0.12);
    color: #a78bfa
}

.section-block__title--light {
    color: #fff
}

.section-block__subtitle--dark {
    color: #94a3b8
}

.section-block__head--flush {
    margin-bottom: 0
}

/* About Section (Figma) */
.about-section {
    display: flex;
    gap: 80px;
    align-items: center;
}

.about-left {
    flex: 0 0 520px;
    padding-top: 20px
}

.about-left__grid {
    display: grid;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}

.about-left__brand {
    font-family: 'rm';
    font-size: 22px;
    margin-bottom: 1px;
    color: #427bf5;
    position: relative;
}

.about-left__title {
    font-family: 'rb';
    font-size: 55px;
    text-transform: uppercase;
    background: linear-gradient(135deg,#3b82f6,#7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.about-left__desc {
    font-size: 14px;
    color: #475569;
    line-height: 22px
}

.about-right {
    flex: 1;
    display: grid;
    grid-template-columns: 293px 293px;
    gap: 14px;
    align-items: center;
    justify-content: center;
    perspective: 800px
}

.about-card-right {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    padding: 30px 30px 25px 30px;
    display: flex;
    flex-direction: column;
    animation: aboutFloat 3s ease-in-out infinite
}

.about-card-right:hover {
    animation-play-state: paused
}

.about-card-right--0 {
    animation-delay: 0s
}

.about-card-right--1 {
    animation-delay: 0.8s
}

.about-card-right--2 {
    animation-delay: 1.6s
}

@keyframes aboutFloat {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

@keyframes jumpChar {
    0% {
        transform: translateY(0)
    }

    20% {
        transform: translateY(-6px)
    }

    40% {
        transform: translateY(1px)
    }

    60% {
        transform: translateY(0px)
    }

    100% {
        transform: translateY(0)
    }
}

.jump-char-wrap {
    display: inline-block;
    vertical-align: baseline;
    line-height: 1.5
}

.jump-char {
    display: inline-block;
    animation: jumpChar 2.5s ease-in-out infinite;
    will-change: transform
}

.about-card-right:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(124,58,237,0.12),0 0 0 1px rgba(124,58,237,0.08)
}

.about-card-right--0 {
    grid-column: 1/2;
    grid-row: 1/3;
}

.about-card-right--1 {
    grid-column: 2;
    grid-row: 1/2;
}

.about-card-right--2 {
    grid-column: 2;
    grid-row: 2/3;
}

.about-card-right__icon {
    width: 85px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 20px;
}

.about-card-right__icon img {
    width: 85px;
    height: 65px;
    object-fit: contain
}

.about-card-right__icon i {
    font-size: 24px;
    color: #7c3aed;
    opacity: 0.5
}

.about-card-right__title {
    font-family: 'rb';
    font-size: 18px;
    color: #1a1a2e;
    text-align: center;
    margin-bottom: 12px;
    text-transform: uppercase;
    background: linear-gradient(135deg,#3b82f6,#7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.about-card-right__text {
    font-size: 14px;
    color: #475569;
    line-height: 22px;
    text-align: center;
    flex: 1;
    overflow: hidden;
    margin-bottom: 10px;
}

.about-card-right__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    font-family: 'rb';
    font-size: 14px;
    color: #1a1a2e;
    text-decoration: none;
    margin-top: auto;
    transition: gap 0.3s;
    background: linear-gradient(135deg,#3b82f6,#7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.about-card-right__link:hover {
    gap: 12px
}

/* About Cards */
.section-block__logo {
    text-align: center;
    margin-bottom: 16px
}

.section-block__logo img {
    height: 24px;
    width: auto;
    opacity: 0.6
}

.about-card__sub {
    font-size: 13px;
    font-family: 'rm';
    color: #7c3aed;
    margin-bottom: 8px
}

/* ========== HOMI-STYLE 2026 ========== */
/* Hero */
.hmi-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,#f8f7ff,#f0f9ff,#e0f2fe);
    padding: 80px 0
}

.hmi-hero__inner {
    display: flex;
    align-items: center;
    gap: 60px;
    justify-content: space-between;
}

.hmi-hero__content {
    flex: 1;
    max-width: 560px
}

.hmi-hero__badge {
    display: inline-block;
    padding: 6px 18px;
    background: linear-gradient(135deg,rgba(124,58,237,0.12),rgba(168,85,247,0.12));
    border: 1px solid rgba(124,58,237,0.25);
    border-radius: 50px;
    font-size: 12px;
    font-family: 'rm';
    color: #7c3aed;
    margin-bottom: 16px;
    letter-spacing: 1px
}

.hmi-hero__title {
    font-family: 'rb';
    font-size: clamp(2.5rem,5vw,4.2rem);
    line-height: 1.15;
    margin-bottom: 20px;
    background: linear-gradient(135deg,#3b82f6,#7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.hmi-hero__title span {
    background: linear-gradient(135deg,#7c3aed,#06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.hmi-hero__desc {
    font-size: 17px;
    color: #475569;
    max-width: 440px;
    margin-bottom: 32px;
    line-height: 1.7
}

.hmi-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    background: linear-gradient(135deg,#7c3aed,#06b6d4);
    color: #fff;
    border-radius: 10px;
    font-family: 'rm';
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 4px 16px rgba(124,58,237,0.3)
}

.hmi-hero__cta:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124,58,237,0.45)
}

.hmi-hero__grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    align-items: center;
    height: 500px;
    overflow: hidden
}

.hmi-hero__col {
    height: 100%;
    overflow: hidden
}

.hmi-hero__scroll {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.hmi-hero__scroll--up {
    animation: hmiScrollUp 80s linear infinite
}

.hmi-hero__scroll--down {
    animation: hmiScrollDown 80s linear infinite
}

.hmi-hero__scroll img {
    width: 100%;
    aspect-ratio: 200/380;
    object-fit: cover;
    border-radius: 8px;
    transition: filter 0.3s,box-shadow 0.3s
}

.hmi-hero__scroll img:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 25px rgba(124,58,237,0.4)
}

@keyframes hmiScrollUp {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-50%)
    }
}

@keyframes hmiScrollDown {
    0% {
        transform: translateY(-50%)
    }

    100% {
        transform: translateY(0)
    }
}

.hmi-hero__grid-item:nth-child(6) {
    background: linear-gradient(135deg,#14b8a6,#2dd4bf)
}

.hmi-hero__visual {
    max-height: 500px;
    max-width: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.hmi-hero__visual::before {
    position: absolute;
    content: '';
    width: 100%;
    top: 0;
    height: 30px;
    background: linear-gradient(180deg,#eef9ff,transparent);
    z-index: 2;
}

.hmi-hero__visual::after {
    position: absolute;
    content: '';
    width: 100%;
    bottom: 0;
    left: 0;
    height: 30px;
    background: linear-gradient(0deg,#eef9ff,transparent);
    z-index: 2;
}

/* Marquee */
.hmi-marquee {
    overflow: hidden;
    white-space: nowrap;
    padding: 20px 0
}

.hmi-marquee__track {
    display: inline-flex;
    animation: marqueeHmi 20s linear infinite
}

.hmi-marquee__track:hover {
    animation-play-state: paused
}

.hmi-marquee__item {
    display: inline-flex;
    align-items: center;
    font-family: 'rb';
    font-size: 18px;
    color: #64748b;
    padding: 0 16px
}

.hmi-marquee__dot {
    color: #7c3aed;
    font-size: 16px;
    padding: 0 8px
}

.hmi-marquee__partner {
    display: inline-flex;
    align-items: center;
    padding: 16px 32px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-right: 16px;
    font-family: 'rm';
    font-size: 14px;
    color: #1a1a2e
}

@keyframes marqueeHmi {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

/* Scroll Cards */
.hmi-scroll-cards {
    overflow: hidden;
    padding: 10px 0
}

.hmi-scroll-cards__track {
    display: flex;
    gap: 20px;
    animation: hmiScroll 40s linear infinite
}

.hmi-scroll-cards__track:hover {
    animation-play-state: paused
}

.hmi-scroll-cards__card {
    flex: 0 0 320px;
    padding: 28px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f1f5f9;
    transition: all 0.3s
}

.hmi-scroll-cards__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.06)
}

.hmi-scroll-cards__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,rgba(124,58,237,0.1),rgba(168,85,247,0.1));
    border-radius: 12px;
    margin-bottom: 16px;
    font-size: 22px;
    color: #7c3aed
}

.hmi-scroll-cards__title {
    font-family: 'rm';
    font-size: 16px;
    color: #1a1a2e;
    margin-bottom: 8px
}

.hmi-scroll-cards__desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6
}

@keyframes hmiScroll {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

.hmi-scroll-cards__img {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    margin-bottom: 16px;
    object-fit: cover
}

/* Process / Timeline */
.hmi-process {
    display: flex;
    gap: 60px;
    align-items: flex-start
}

.hmi-process__timeline {
    flex: 0 0 280px;
    position: relative
}

.hmi-process__line {
    position: absolute;
    left: 12px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px
}

.hmi-process__step {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    cursor: pointer;
    transition: all 0.3s
}

.hmi-process__step:hover {
    background: rgba(255,255,255,0.04);
    border-radius: 8px
}

.hmi-process__step-dot {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0
}

.hmi-process__step-dot span {
    position: absolute;
    inset: 6px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    transition: all 0.3s
}

.hmi-process__step--active .hmi-process__step-dot span {
    background: #7c3aed;
    box-shadow: 0 0 16px rgba(124,58,237,0.5)
}

.hmi-process__step-num {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 1px
}

.hmi-process__step--active .hmi-process__step-num {
    color: #a78bfa
}

.hmi-process__step-title {
    font-size: 15px;
    font-family: 'rm';
    color: rgba(255,255,255,0.6);
    margin: 0;
    transition: color 0.3s
}

.hmi-process__step--active .hmi-process__step-title {
    color: #fff
}

.hmi-process__cards {
    flex: 1;
    position: relative;
    min-height: 320px
}

.hmi-process__card {
    position: absolute;
    inset: 0;
    padding: 32px;
    background: linear-gradient(145deg,rgba(30,41,59,0.9),rgba(15,23,42,0.9));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s;
    pointer-events: none
}

.hmi-process__card--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    z-index: 10
}

.hmi-process__card-shine {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,transparent,#7c3aed,transparent);
    opacity: 0.3
}

.hmi-process__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px
}

.hmi-process__card-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,rgba(124,58,237,0.2),transparent);
    border-radius: 12px;
    color: #fff;
    font-size: 22px
}

.hmi-process__card-num {
    font-size: 48px;
    font-weight: 800;
    color: rgba(255,255,255,0.06)
}

.hmi-process__card-title {
    font-family: 'rb';
    font-size: 22px;
    color: #fff;
    margin-bottom: 16px
}

.hmi-process__card-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.hmi-process__card-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: rgba(255,255,255,0.6)
}

.hmi-process__card-list li i {
    color: #7c3aed;
    font-size: 12px
}

/* Product card detail layout */
.product-card--alt {
    flex-direction: row-reverse
}

.product-card__media {
    overflow: hidden;
    border-radius: 16px 16px 0 0
}

.product-card--alt .product-card__media {
    border-radius: 16px
}

.product-card__detail {
    padding: 20px
}

.product-card__detail-title {
    font-family: 'rb';
    font-size: 18px;
    color: #1a1a2e;
    margin-bottom: 4px
}

.product-card__detail-cat {
    font-size: 12px;
    color: #7c3aed;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px
}

.product-card__features {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.product-card__features li {
    font-size: 13px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px
}

.product-card__features li i {
    color: #7c3aed;
    font-size: 11px
}

/* ========== ANIMATIONS ========== */
@keyframes revealUp {
    0% {
        opacity: 0;
        transform: translateY(40px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes revealLeft {
    0% {
        opacity: 0;
        transform: translateX(-40px)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes revealRight {
    0% {
        opacity: 0;
        transform: translateX(40px)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(0.9)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 0.6
    }

    50% {
        transform: scale(1.6);
        opacity: 0
    }

    100% {
        transform: scale(1.6);
        opacity: 0
    }
}

.reveal {
    opacity: 0
}

.reveal--up.revealed {
    animation: revealUp 0.7s cubic-bezier(0.25,0.46,0.45,0.94) forwards
}

.reveal--left.revealed {
    animation: revealLeft 0.7s cubic-bezier(0.25,0.46,0.45,0.94) forwards
}

.reveal--right.revealed {
    animation: revealRight 0.7s cubic-bezier(0.25,0.46,0.45,0.94) forwards
}

.reveal--scale.revealed {
    animation: scaleIn 0.6s cubic-bezier(0.25,0.46,0.45,0.94) forwards
}

/* Marquee */
.marquee-wrap {
    overflow: hidden;
    white-space: nowrap;
    padding: 30px 0
}

.marquee-track {
    display: inline-flex;
    animation: marqueeScroll 25s linear infinite
}

.marquee-track:hover {
    animation-play-state: paused
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

.marquee-item {
    display: inline-flex;
    align-items: center;
    padding: 0 30px;
    opacity: 0.6;
    transition: opacity 0.3s
}

.marquee-item:hover {
    opacity: 1
}

/* Glow backgrounds */
.glow-bg {
    position: relative;
    overflow: hidden
}

/* ================================================================
X-DESIGN SYSTEM — Unique layouts, pure CSS animations
================================================================ */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-50px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(50px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale(0.85)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes morphBlob {
    0%,100% {
        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%
    }

    50% {
        border-radius: 30% 60% 70% 40%/50% 60% 30% 60%
    }
}

@keyframes spinSlow {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes dashGrow {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes numCount {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes floatSoft {
    0%,100% {
        transform: translate(0,0)
    }

    50% {
        transform: translate(20px,-30px)
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0
    }

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

@keyframes borderDraw {
    from {
        clip-path: inset(0 100% 0 0)
    }

    to {
        clip-path: inset(0 0 0 0)
    }
}

@keyframes fadeRotate {
    from {
        opacity: 0;
        transform: rotate(-5deg) scale(0.9)
    }

    to {
        opacity: 1;
        transform: rotate(0) scale(1)
    }
}

/* === SECTION HEAD === */
.x-head {
    text-align: center;
    margin-bottom: 56px
}

.x-head__tag {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(124,58,237,0.06);
    border: 1px solid rgba(124,58,237,0.1);
    border-radius: 100px;
    font-size: 12px;
    font-family: 'rm';
    color: #7c3aed;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 14px
}

.x-head__title {
    font-family: 'rb';
    font-size: clamp(30px,4.5vw,48px);
    color: #0f172a;
    margin-bottom: 14px;
    line-height: 1.15
}

.x-head--light .x-head__title {
    color: #f8fafc
}

.x-head__bar {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 14px
}

.x-head__bar::before,.x-head__bar::after {
    content: '';
    height: 3px;
    border-radius: 2px
}

.x-head__bar::before {
    width: 40px;
    background: #7c3aed
}

.x-head__bar::after {
    width: 16px;
    background: #06b6d4
}

/* === SERVICES — Alternating Split Rows === */
.x-services {
    background: #fafbff;
    padding: 100px 0;
    position: relative;
    overflow: hidden
}

.x-services__bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none
}

.x-services__bg-blob--a {
    width: 500px;
    height: 500px;
    background: rgba(124,58,237,0.06);
    top: -100px;
    right: -100px;
    animation: floatSoft 20s ease-in-out infinite
}

.x-services__bg-blob--b {
    width: 400px;
    height: 400px;
    background: rgba(6,182,212,0.05);
    bottom: -80px;
    left: -80px;
    animation: floatSoft 25s ease-in-out infinite reverse
}

.x-services__list {
    display: flex;
    flex-direction: column;
    gap: 0
}

.x-services__row {
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 48px 0;
    border-bottom: 1px solid rgba(124,58,237,0.06)
}

.x-services__row--reverse {
    flex-direction: row-reverse
}

.x-services__row-text {
    flex: 1;
    animation: slideRight 0.8s ease-out both
}

.x-services__row--reverse .x-services__row-text {
    animation-name: slideLeft
}

.x-services__row-num {
    font-family: 'rb';
    font-size: 14px;
    color: #7c3aed;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 8px
}

.x-services__row-title {
    font-family: 'rb';
    font-size: clamp(22px,3vw,30px);
    color: #0f172a;
    margin-bottom: 12px;
    line-height: 1.2
}

.x-services__row-desc {
    font-size: 15px;
    color: #64748b;
    line-height: 1.8;
    max-width: 480px
}

.x-services__row-line {
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg,#7c3aed,#06b6d4);
    margin-top: 20px;
    border-radius: 2px;
    animation: dashGrow 1s ease-out both 0.5s
}

.x-services__row-visual {
    flex: 0 0 200px;
    display: flex;
    justify-content: center
}

.x-services__row-icon {
    width: 140px;
    height: 140px;
    border-radius: 32px;
    background: linear-gradient(135deg,rgba(124,58,237,0.08),rgba(6,182,212,0.06));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
    border: 1px solid rgba(124,58,237,0.08);
    animation: scaleUp 0.6s ease-out both 0.3s
}

.x-services__row:hover .x-services__row-icon {
    transform: rotate(5deg) scale(1.08);
    box-shadow: 0 20px 40px rgba(124,58,237,0.1);
    border-color: rgba(124,58,237,0.15)
}

.x-services__row-icon img {
    width: 72px;
    height: 72px;
    object-fit: contain
}

.x-services__row-icon i {
    font-size: 36px;
    color: #7c3aed
}

/* === PROJECTS — Hero + Grid === */
.x-projects {
    background: #0a0a1a;
    padding: 100px 0;
    position: relative;
    overflow: hidden
}

.x-projects__hero {
    margin-bottom: 24px
}

.x-projects__hero-card {
    display: block;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    aspect-ratio: 16/7
}

.x-projects__hero-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94)
}

.x-projects__hero-card:hover img {
    transform: scale(1.04)
}

.x-projects__hero-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px;
    background: linear-gradient(transparent,rgba(0,0,0,0.8))
}

.x-projects__hero-tag {
    font-size: 11px;
    color: #a78bfa;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'rm'
}

.x-projects__hero-info h3 {
    font-family: 'rb';
    font-size: clamp(24px,3vw,36px);
    color: #fff;
    margin: 8px 0 0
}

.x-projects__grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px
}

.x-projects__card {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    position: relative;
    aspect-ratio: 4/3
}

.x-projects__card-img {
    position: absolute;
    inset: 0
}

.x-projects__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s
}

.x-projects__card:hover .x-projects__card-img img {
    transform: scale(1.08)
}

.x-projects__card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 18px;
    background: linear-gradient(transparent,rgba(0,0,0,0.75));
    transform: translateY(100%);
    transition: transform 0.4s
}

.x-projects__card:hover .x-projects__card-info {
    transform: translateY(0)
}

.x-projects__card-info h4 {
    font-family: 'rm';
    font-size: 14px;
    color: #fff;
    margin: 0
}

.x-projects__card-info span {
    font-size: 13px;
    color: #a78bfa;
    font-family: 'rb'
}

.x-projects__more {
    text-align: center;
    margin-top: 48px
}

/* === STATS — Horizontal Timeline === */
.x-stats {
    background: linear-gradient(135deg,#0f172a,#1e1b4b);
    padding: 80px 0;
    position: relative;
    overflow: hidden
}

.x-stats__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative
}

.x-stats__line {
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 2px;
    background: linear-gradient(90deg,transparent,rgba(124,58,237,0.3),rgba(6,182,212,0.3),transparent);
    z-index: 0
}

.x-stats__col {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 0 12px
}

.x-stats__col-inner {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    padding: 36px 16px;
    transition: all 0.5s
}

.x-stats__col:hover .x-stats__col-inner {
    background: rgba(255,255,255,0.08);
    border-color: rgba(124,58,237,0.2);
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(124,58,237,0.1)
}

.x-stats__col-num {
    font-family: 'rb';
    font-size: clamp(32px,4vw,48px);
    background: linear-gradient(135deg,#c4b5fd,#22d3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 8px;
    animation: numCount 0.6s ease-out both
}

.x-stats__col:nth-child(2) .x-stats__col-num {
    animation-delay: 0.1s
}

.x-stats__col:nth-child(3) .x-stats__col-num {
    animation-delay: 0.2s
}

.x-stats__col:nth-child(4) .x-stats__col-num {
    animation-delay: 0.3s
}

.x-stats__col:nth-child(5) .x-stats__col-num {
    animation-delay: 0.4s
}

.x-stats__col-label {
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    font-family: 'rm'
}

.x-stats__col:hover .x-stats__col-label {
    color: rgba(255,255,255,0.8)
}

.x-stats__col-dot {
    position: absolute;
    right: -8px;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg,#7c3aed,#06b6d4);
    border: 3px solid #1e1b4b;
    z-index: 2;
    animation: scaleUp 0.5s ease-out both
}

.x-stats__col:last-child .x-stats__col-dot {
    display: none
}

/* === CRITERIA — Staggered Masonry === */
.x-criteria {
    background: #fafbff;
    padding: 100px 0;
    position: relative
}

.x-criteria__masonry {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    grid-auto-flow: dense
}

.x-criteria__item {
    border-radius: 20px;
    padding: 36px 28px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s;
    border: 1px solid transparent
}

.x-criteria__item--large {
    background: linear-gradient(135deg,#ede9fe,#e0e7ff);
    grid-row: span 1;
    border-color: rgba(124,58,237,0.08)
}

.x-criteria__item--medium {
    background: linear-gradient(135deg,#e0f2fe,#dbeafe);
    border-color: rgba(6,182,212,0.08)
}

.x-criteria__item--small {
    background: linear-gradient(135deg,#fce7f3,#fff1f2);
    border-color: rgba(244,114,182,0.08)
}

.x-criteria__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(124,58,237,0.08)
}

.x-criteria__item-num {
    font-family: 'rb';
    font-size: 52px;
    background: linear-gradient(180deg,rgba(124,58,237,0.12),transparent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: absolute;
    top: 16px;
    right: 24px;
    line-height: 1
}

.x-criteria__item-icon {
    margin-bottom: 16px
}

.x-criteria__item-icon img {
    width: 44px;
    height: 44px;
    object-fit: contain
}

.x-criteria__item h3 {
    font-family: 'rb';
    font-size: 18px;
    color: #0f172a;
    margin-bottom: 8px
}

.x-criteria__item p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.7;
    margin: 0
}

/* === NEWS — Magazine Hero + Stack === */
.x-news {
    background: #0f172a;
    padding: 100px 0
}

.x-news__zone {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 24px;
    align-items: start
}

.x-news__big {
    display: block;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    background: #1e293b;
    transition: all 0.5s
}

.x-news__big:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 64px rgba(0,0,0,0.3)
}

.x-news__big-img {
    aspect-ratio: 16/10;
    overflow: hidden
}

.x-news__big-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s
}

.x-news__big:hover .x-news__big-img img {
    transform: scale(1.05)
}

.x-news__big-body {
    padding: 28px 32px
}

.x-news__big-body time {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    display: block;
    margin-bottom: 8px
}

.x-news__big-body h3 {
    font-family: 'rb';
    font-size: 22px;
    color: #f1f5f9;
    margin-bottom: 8px;
    line-height: 1.3;
    transition: color 0.3s
}

.x-news__big:hover .x-news__big-body h3 {
    color: #a78bfa
}

.x-news__big-body p {
    font-size: 14px;
    color: rgba(255,255,255,0.4);
    line-height: 1.7;
    margin: 0
}

.x-news__side {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.x-news__mini {
    display: flex;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
    text-decoration: none;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.4s;
    align-items: center
}

.x-news__mini:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(124,58,237,0.15);
    transform: translateX(6px)
}

.x-news__mini-img {
    flex: 0 0 100px;
    border-radius: 10px;
    overflow: hidden
}

.x-news__mini-img img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform 0.5s
}

.x-news__mini:hover .x-news__mini-img img {
    transform: scale(1.06)
}

.x-news__mini-body {
    flex: 1;
    min-width: 0
}

.x-news__mini-body time {
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    display: block;
    margin-bottom: 4px
}

.x-news__mini-body h4 {
    font-family: 'rm';
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    margin: 0;
    line-height: 1.4;
    transition: color 0.3s
}

.x-news__mini:hover .x-news__mini-body h4 {
    color: #a78bfa
}

.x-news__more {
    text-align: center;
    margin-top: 40px
}

/* === REVIEWS — Horizontal Scroll === */
.x-reviews {
    background: #fafbff;
    padding: 100px 0;
    overflow: hidden
}

.x-reviews__row {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 20px;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.x-reviews__row::-webkit-scrollbar {
    display: none
}

.x-reviews__card {
    flex: 0 0 380px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    border: 1px solid rgba(124,58,237,0.06);
    transition: all 0.5s;
    position: relative
}

.x-reviews__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(90deg,#7c3aed,#06b6d4);
    transform: scaleX(0);
    transition: transform 0.5s;
    transform-origin: left
}

.x-reviews__card:hover::before {
    transform: scaleX(1)
}

.x-reviews__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(124,58,237,0.08);
    border-color: rgba(124,58,237,0.1)
}

.x-reviews__card-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px
}

.x-reviews__card-avatar {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg,#7c3aed,#06b6d4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'rb';
    font-size: 18px;
    flex-shrink: 0;
    overflow: hidden;
    transition: all 0.5s
}

.x-reviews__card:hover .x-reviews__card-avatar {
    border-radius: 50%;
    transform: rotate(5deg)
}

.x-reviews__card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.x-reviews__card-top h4 {
    font-family: 'rb';
    font-size: 15px;
    color: #0f172a;
    margin: 0 0 2px
}

.x-reviews__card-stars {
    color: #f59e0b;
    font-size: 12px;
    letter-spacing: 1px
}

.x-reviews__card-text {
    font-size: 14px;
    color: #64748b;
    line-height: 1.8;
    margin: 0;
    font-style: italic
}

/* === CTA — Mesh Gradient === */
.x-cta {
    background: #0f172a;
    padding: 100px 0;
    position: relative;
    overflow: hidden
}

.x-cta__mesh {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%,rgba(124,58,237,0.12),transparent 50%),radial-gradient(ellipse at 80% 50%,rgba(6,182,212,0.1),transparent 50%),radial-gradient(ellipse at 50% 100%,rgba(59,130,246,0.08),transparent 50%);
    pointer-events: none
}

.x-cta__box {
    text-align: center;
    position: relative;
    z-index: 1
}

.x-cta__title {
    font-family: 'rb';
    font-size: clamp(28px,4vw,44px);
    color: #f8fafc;
    margin-bottom: 12px
}

.x-cta__desc {
    font-size: 16px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 32px
}

.x-cta__form {
    display: flex;
    max-width: 480px;
    margin: 0 auto;
    gap: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 6px;
    backdrop-filter: blur(12px)
}

.x-cta__input {
    flex: 1;
    padding: 14px 20px;
    border: none;
    font-size: 15px;
    font-family: 'rr';
    outline: none;
    background: transparent;
    color: #fff
}

.x-cta__input::placeholder {
    color: rgba(255,255,255,0.3)
}

.x-cta__btn {
    padding: 14px 32px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg,#7c3aed,#6d28d9);
    color: #fff;
    font-family: 'rb';
    font-size: 15px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.4s
}

.x-cta__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124,58,237,0.4)
}

/* === BUTTONS === */
.x-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 36px;
    border-radius: 14px;
    font-family: 'rb';
    font-size: 15px;
    text-decoration: none;
    transition: all 0.4s
}

.x-btn--glow {
    background: linear-gradient(135deg,#7c3aed,#6d28d9);
    color: #fff;
    box-shadow: 0 4px 16px rgba(124,58,237,0.25)
}

.x-btn--glow:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(124,58,237,0.35);
    color: #fff
}

.x-btn--outline {
    border: 1.5px solid rgba(124,58,237,0.25);
    color: #7c3aed;
    background: transparent
}

.x-btn--outline:hover {
    background: rgba(124,58,237,0.04);
    border-color: #7c3aed;
    transform: translateY(-2px)
}

/* ============================================================
NB STOREFRONT — Header / Footer / Homepage
Primary gradient: #1390E4 -> #015FC1
============================================================ */
:root {
    --nb-main: #1390E4;
    --nb-main-2: #015FC1;
    --nb-grad: linear-gradient(135deg,#1390E4 0%,#015FC1 100%);
    --nb-grad-h: linear-gradient(90deg,#1390E4 0%,#015FC1 100%);
    --nb-ink: #1b2430;
    --nb-muted: #65748a;
    --nb-line: #e6ecf3;
    --nb-bg: #f3f7fc;
}

.nb-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
}

.nb-home {
    overflow: hidden
}

/* ---------- HEADER ---------- */
.nb-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #fff;
    transition: box-shadow .25s
}

.nb-header.is-scrolled {
    box-shadow: 0 6px 20px rgba(15,40,80,.14)
}

.nb-header.is-scrolled .nb-header__top {
    display: none
}

.nb-header__main {
    padding: 14px 0;
    background: var(--nb-grad)
}

.nb-header__main-in {
    display: flex;
    align-items: center;
    gap: 22px
}

.nb-logo {
    flex: 0 0 200px;
    max-width: 200px
}

.nb-logo img {
    display: block;
    width: 100%;
    height: auto
}

.nb-search {
    flex: 1;
    display: flex;
    height: 44px;
    border: 2px solid rgba(255,255,255,.85);
    border-radius: 8px;
    overflow: hidden;
    background: #fff
}

.nb-search input {
    flex: 1;
    border: 0;
    padding: 0 16px;
    font-size: 14px;
    color: var(--nb-ink);
    font-family: 'rr';
    min-width: 0
}

.nb-search button {
    width: 56px;
    border: 0;
    cursor: pointer;
    background: var(--nb-grad-h);
    color: #fff;
    font-size: 17px
}

.nb-cart {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 8px;
    padding: 8px 14px;
    transition: .2s
}

.nb-cart i {
    position: relative;
    font-size: 20px;
    color: #fff
}

.nb-cart b {
    position: absolute;
    top: -9px;
    left: 8px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #e2352b;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-family: 'rb'
}

.nb-cart:hover {
    color: #fff;
    background: rgba(255,255,255,.28)
}

.nb-burger {
    display: none;
    border: 0;
    background: none;
    font-size: 22px;
    color: #fff;
    cursor: pointer;
    padding: 0
}

.nb-nav {
    background: #fff;
    position: relative;
    border-top: 1px solid var(--nb-line);
    border-bottom: 2px solid var(--nb-line)
}

.nb-nav__in {
    display: flex;
    align-items: stretch
}

.nb-menu {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1
}

.nb-menu li a {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 20px;
    color: #1b2430;
    font-family: 'rm';
    font-size: 14px;
    text-transform: uppercase;
    position: relative
}

.nb-menu li a:hover {
    background: var(--nb-grad);
    color: #fff
}

.nb-menu li a i {
    margin-right: 7px
}

/* ---------- HERO ---------- */
/* ---------- CRITERIA ---------- */
/* ---------- INTRO ---------- */
/* ---------- PRODUCT SECTIONS ---------- */
.nb-products {
    padding: 34px 0
}

.nb-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 2px solid var(--nb-line);
    margin-bottom: 22px
}

.nb-head__title {
    margin: 0
}

.nb-head__title span {
    position: relative;
    display: inline-block;
    font-family: 'rb';
    font-size: 19px;
    color: var(--nb-ink);
    text-transform: uppercase;
    padding-bottom: 12px
}

.nb-head__title span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--nb-grad-h)
}

.nb-head__more {
    color: var(--nb-main);
    font-size: 13.5px;
    white-space: nowrap;
    padding-bottom: 12px
}

.nb-head__more:hover {
    color: var(--nb-main-2)
}

.nb-grid {
    display: grid;
    gap: 16px
}

.nb-grid--6 {
    grid-template-columns: repeat(6,1fr)
}

.nb-grid--4 {
    grid-template-columns: repeat(4,1fr)
}

.nb-card {
    background: #fff;
    border: 1px solid var(--nb-line);
    border-radius: 10px;
    overflow: hidden;
    transition: .25s;
    display: flex;
    flex-direction: column;
    max-width: 230px;
}

.nb-card:hover {
    box-shadow: 0 14px 30px rgba(15,40,80,.12);
    transform: translateY(-4px);
    border-color: rgba(19,144,228,.32)
}

.nb-card__img {
    position: relative;
    display: block;
    overflow: hidden;
    background: #f7fafd
}

.nb-card__img img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
    transition: .4s
}

.nb-card:hover .nb-card__img img {
    transform: scale(1.06)
}

.nb-card__sale {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e2352b;
    color: #fff;
    font-family: 'rb';
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px
}

.nb-card__body {
    padding: 12px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1
}

.nb-card__name {
    font-size: 13.5px;
    line-height: 1.45;
    margin: 0;
    min-height: 39px
}

.nb-card__name a {
    color: var(--nb-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.nb-card__name a:hover {
    color: var(--nb-main)
}

.nb-card__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
    flex-wrap: wrap
}

.nb-price {
    font-family: 'rb';
    font-size: 15px;
    color: #e2352b
}

.nb-card__price del {
    font-size: 12.5px;
    color: #96a3b3
}

/* ---------- PRODUCT DETAIL / CONTACT ---------- */
.grid-pro-detail {
    max-width: 1200px;
    margin: 24px auto 46px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--nb-line);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(15,40,80,.07)
}

.flex_pro_details {
    gap: 34px
}

.left-pro-detail {
    width: 48%;
    padding: 12px;
    border: 1px solid var(--nb-line);
    border-radius: 12px;
    background: #f8fbff
}

.left-pro-detail .MagicZoom,.productTop1_fotorama {
    border: 0!important;
    border-radius: 10px!important;
    background: #fff!important;
    padding: 0!important;
    overflow: hidden
}

.left-pro-detail .MagicZoom img {
    width: 100%;
    display: block
}

.gallery-thumb-pro {
    margin-top: 14px
}

.thumb-pro-detail {
    border: 1px solid var(--nb-line);
    border-radius: 8px;
    padding: 4px;
    background: #fff;
    transition: .2s
}

.thumb-pro-detail:hover,.thumb-pro-detail.mz-thumb.mz-thumb-selected {
    border-color: var(--nb-main)
}

.right-pro-detail {
    width: calc(55% - 34px)!important;
    padding: 8px 4px
}

.title-pro-detail {
    font-family: 'rb'!important;
    font-size: 25px!important;
    line-height: 1.35;
    color: var(--nb-ink);
    margin-bottom: 14px!important
}

.comment-pro-detail {
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--nb-line)
}

.comment-star {
    color: #f5a623
}

.comment-star span {
    color: #f5a623
}

.comment-count a {
    color: var(--nb-muted);
    font-size: 13px
}

.desc-pro-detail {
    color: var(--nb-muted);
    line-height: 1.8;
    margin: 18px 0
}

.attr-pro-detail {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: #f7fbff;
    border: 1px solid var(--nb-line);
    border-radius: 10px
}

.attr-pro-detail li {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 10px;
    margin: 0;
    border-bottom: 1px dashed #dbe7f2
}

.attr-pro-detail li:last-child {
    border-bottom: 0
}

.attr-label-pro-detail {
    min-width: 105px;
    color: var(--nb-muted);
    font-family: 'rm'!important
}

.attr-content-pro-detail {
    color: var(--nb-ink);
    font-family: 'rm'
}

.attr-content-pro-detail a {
    color: var(--nb-main)
}

.price-new-pro-detail {
    font-family: 'rb'!important;
    font-size: 24px!important;
    color: #e2352b!important
}

.price-old-pro-detail {
    font-size: 14px;
    color: #96a3b3
}

.size-pro-detail,.item_choose_size,.item_choose_color {
    border: 1px solid var(--nb-line);
    border-radius: 7px;
    padding: 7px 14px;
    color: var(--nb-ink);
    background: #fff;
    transition: .2s
}

.size-pro-detail:hover,.size-pro-detail.active,.item_choose_size.active,.item_choose_color.active {
    border-color: var(--nb-main);
    color: var(--nb-main);
    background: #eef6fe
}

.proprice_item_size a {
    height: auto;
    width: auto;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid var(--nb-line);
    color: var(--nb-ink)
}

.proprice_item_size.active > a {
    border-color: var(--nb-main)
}

.proprice_item_color .sty_color {
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    outline: 1px solid var(--nb-line);
    border-radius: 50%
}

.proprice_item_color.active .sty_color {
    outline: 2px solid var(--nb-main)
}

.quantity-pro-detail span,.quantity-pro-detail input {
    height: 36px;
    border-color: var(--nb-line);
    background: #fff
}

.cart-pro-detail {
    gap: 10px;
    margin-top: 20px
}

.cart-pro-detail a {
    border: 0!important;
    border-radius: 8px!important;
    padding: 11px 24px!important;
    background: var(--nb-grad)!important;
    color: #fff!important;
    font-family: 'rm';
    box-shadow: 0 6px 14px rgba(19,144,228,.2)
}

.cart-pro-detail a:first-child {
    background: #eef6fe!important;
    color: var(--nb-main-2)!important
}

.tabs-pro-detail {
    margin-top: 0;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--nb-line);
    border-radius: 14px
}

.tabs-pro-detail .nav-tabs {
    border-bottom: 2px solid var(--nb-line)
}

.tabs-pro-detail .nav-tabs .nav-link {
    border: 0!important;
    border-bottom: 3px solid transparent!important;
    color: var(--nb-muted);
    font-family: 'rm';
    padding: 12px 18px
}

.tabs-pro-detail .nav-tabs .nav-link.active {
    color: var(--nb-main-2);
    border-bottom-color: var(--nb-main)!important;
    background: transparent
}

.contact-article {
    background: #fff;
    border: 1px solid var(--nb-line);
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 10px 28px rgba(15,40,80,.06)
}

.contact-text {
    color: var(--nb-muted);
    line-height: 1.85;
    margin-bottom: 22px
}

.contact-text h2,.contact-text h3 {
    color: var(--nb-ink);
    font-family: 'rb';
    margin-bottom: 10px
}

.contact-form {
    padding: 20px;
    background: #f8fbff;
    border: 1px solid var(--nb-line);
    border-radius: 10px
}

.contact-form .form-row {
    margin: 0 -7px
}

.contact-form .contact-input {
    padding: 0 7px;
    margin-bottom: 14px
}

.contact-form .form-control {
    height: 44px;
    border: 1px solid #dbe7f2;
    border-radius: 7px;
    background: #fff;
    color: var(--nb-ink);
    padding: 10px 13px
}

.contact-form textarea.form-control {
    height: 125px;
    resize: vertical
}

.contact-form .form-control:focus {
    border-color: var(--nb-main);
    box-shadow: 0 0 0 3px rgba(19,144,228,.12)!important
}

.contact-form .btn-primary {
    border: 0;
    background: var(--nb-grad);
    border-radius: 7px;
    padding: 10px 24px
}

.contact-form .btn-secondary {
    border: 1px solid var(--nb-line);
    background: #fff;
    color: var(--nb-muted);
    border-radius: 7px;
    padding: 10px 20px
}

.contact-map {
    margin-top: 24px;
    border: 1px solid var(--nb-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(15,40,80,.07)
}

.contact-map iframe {
    display: block;
    width: 100%!important;
    min-height: 360px;
    border: 0
}

/* ---------- PROJECTS ---------- */
.nb-project {
    position: relative;
    display: block;
    border-radius: 8px;
    overflow: hidden
}

.nb-project img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    transition: .4s
}

.nb-project span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 12px 10px;
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    background: linear-gradient(transparent,rgba(2,25,55,.8))
}

.nb-project:hover img {
    transform: scale(1.07)
}

/* .nb-projects__slider .slick-prev:before,.nb-projects__slider .slick-next:before {
display: none
} */
/* ---------- NEWS ---------- */
.nb-news {
    padding: 8px 0 46px
}

.nb-news__main,.nb-news__side {
    background: #fff;
    border: 1px solid var(--nb-line);
    border-radius: 10px;
    padding: 20px
}

.nb-news-item {
    background: #fff;
    border: 1px solid var(--nb-line);
    border-radius: 10px;
    overflow: hidden;
    transition: .25s;
    display: flex;
    flex-direction: column
}

.nb-news-item:hover {
    box-shadow: 0 12px 28px rgba(15,40,80,.1);
    transform: translateY(-3px);
    border-color: rgba(19,144,228,.28)
}

.nb-news-item__img {
    display: block;
    overflow: hidden
}

.nb-news-item__img img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
    transition: .4s
}

.nb-news-item:hover .nb-news-item__img img {
    transform: scale(1.06)
}

.nb-news-item__body {
    padding: 13px 14px 16px
}

.nb-news-item__body time {
    display: block;
    font-size: 12px;
    color: var(--nb-muted);
    margin-bottom: 7px
}

.nb-news-item__body h3 {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 8px
}

.nb-news-item__body h3 a {
    color: var(--nb-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.nb-news-item__body h3 a:hover {
    color: var(--nb-main)
}

.nb-news-item__body p {
    font-size: 13px;
    color: var(--nb-muted);
    line-height: 1.65;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.nb-news-feature {
    display: block
}

.nb-news-feature__img {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px
}

.nb-news-feature__img img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
    transition: .4s
}

.nb-news-feature:hover .nb-news-feature__img img {
    transform: scale(1.05)
}

.nb-news-feature h3 {
    font-size: 14.5px;
    line-height: 1.5;
    margin: 0
}

.nb-news-feature h3 a {
    color: var(--nb-ink)
}

.nb-news-feature h3 a:hover {
    color: var(--nb-main)
}

.nb-head--side {
    margin-bottom: 18px
}

.nb-footer__title {
    color: #fff;
    font-family: 'rb';
    font-size: 15px;
    text-transform: uppercase;
    margin-bottom: 18px;
    padding-bottom: 12px;
    position: relative
}

.nb-footer__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 2px;
    background: var(--nb-grad-h)
}

.nb-footer__contact {
    list-style: none;
    margin: 0;
    padding: 0
}

.nb-footer__contact li {
    display: flex;
    gap: 9px;
    margin-bottom: 11px;
    font-size: 13.5px;
    line-height: 1.6
}

.nb-footer__contact i {
    color: var(--nb-main);
    margin-top: 3px
}

.nb-footer__contact a {
    color: #9fb2c6
}

.nb-footer__contact a:hover {
    color: #fff
}

.nb-price--contact {
    color: var(--nb-main-2)
}

/* ---------- FOOTER ---------- */
.nb-footer {
    background: #0b1a2b;
    color: #9fb2c6;
    margin-top: 0
}

.nb-footer__main {
    padding: 54px 0 34px;
    border-bottom: 1px solid rgba(255,255,255,.08)
}

.nb-footer__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 34px
}

.nb-footer__col {
    flex: 1;
    min-width: 200px
}

.nb-footer__col--brand {
    flex: 1.6;
    min-width: 260px
}

.nb-footer__logo {
    display: inline-block
}

.nb-footer__logo img {
    max-width: 200px;
    width: 100%;
    margin-bottom: 16px
}

.nb-footer__about {
    font-size: 13.5px;
    line-height: 1.85;
    color: #9fb2c6;
    margin: 0
}

.nb-footer__social {
    display: flex;
    gap: 10px;
    margin-top: 16px
}

.nb-footer__social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.07);
    color: #cfe0f2;
    font-size: 15px;
    transition: .2s
}

.nb-footer__social a:hover {
    background: var(--nb-grad);
    color: #fff;
    transform: translateY(-2px)
}

.nb-footer__col h4 {
    color: #fff;
    font-family: 'rb';
    font-size: 15px;
    text-transform: uppercase;
    margin: 0 0 18px;
    padding-bottom: 12px;
    position: relative
}

.nb-footer__col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 2px;
    background: var(--nb-grad-h)
}

.nb-footer__links {
    list-style: none;
    margin: 0;
    padding: 0
}

.nb-footer__links li {
    margin-bottom: 11px;
    font-size: 13.5px;
    line-height: 1.6
}

.nb-footer__links a {
    color: #9fb2c6;
    transition: .2s;
    display: inline-block
}

.nb-footer__links a:hover {
    color: #fff;
    padding-left: 4px
}

.nb-footer__links i {
    color: var(--nb-main);
    width: 18px
}

.nb-footer__bottom {
    background: #08131f;
    padding: 16px 0;
    font-size: 13px
}

.nb-footer__bottom-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    color: #7f93a8
}

/* ---------- RESPONSIVE ---------- */
/* === CATEGORY TABS === */
/* === PRICE / SOFTWARE === */
.nb-price {
    padding: 34px 0
}

.nb-price__item {
    display: flex;
    gap: 14px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--nb-line);
    border-radius: 10px;
    padding: 14px;
    transition: .25s
}

.nb-price__item:hover {
    box-shadow: 0 12px 26px rgba(15,40,80,.1);
    transform: translateY(-3px);
    border-color: rgba(19,144,228,.3)
}

.nb-price__item img {
    flex: 0 0 78px;
    width: 78px;
    height: 78px;
    object-fit: cover;
    border-radius: 8px
}

.nb-price__item h3 {
    font-size: 14px;
    color: var(--nb-ink);
    margin-bottom: 5px;
    line-height: 1.4
}

.nb-price__item p {
    font-size: 12.5px;
    color: var(--nb-muted);
    margin: 0 0 6px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.nb-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-family: 'rm';
    color: var(--nb-main)
}

.nb-price__item:hover .nb-download {
    color: var(--nb-main-2)
}

.nb-software {
    padding: 6px 0 34px
}

.nb-software__item {
    background: #fff;
    border: 1px solid var(--nb-line);
    border-radius: 10px;
    overflow: hidden;
    transition: .25s;
    text-align: center;
    padding-bottom: 14px
}

.nb-software__item:hover {
    box-shadow: 0 12px 26px rgba(15,40,80,.1);
    transform: translateY(-3px)
}

.nb-software__item img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block
}

.nb-software__item h3 {
    font-size: 13.5px;
    color: var(--nb-ink);
    margin: 12px 12px 8px;
    line-height: 1.45;
    min-height: 38px
}

.nb-software__item .nb-download {
    justify-content: center
}

/* === MAP === */
.nb-map {
    padding: 6px 0 44px
}

.nb-map__frame {
    border: 1px solid var(--nb-line);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(15,40,80,.08)
}

.nb-map__frame iframe {
    display: block;
    width: 100%!important;
    height: 400px;
    border: 0
}

/* === NEWS 4 COLS === */
/* === DOC LISTS (price / software) === */
.nb-doc {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--nb-line);
    border-radius: 10px;
    padding: 14px 16px;
    transition: .25s;
    text-align: left
}

.nb-doc:hover {
    box-shadow: 0 12px 26px rgba(15,40,80,.1);
    transform: translateY(-3px);
    border-color: rgba(19,144,228,.3)
}

.nb-doc__text {
    flex: 1;
    min-width: 0
}

.nb-doc__text strong {
    display: block;
    font-size: 13.5px;
    color: var(--nb-ink);
    line-height: 1.45;
    font-weight: normal;
    font-family: 'rm'
}

.nb-doc__text em {
    display: -webkit-box;
    font-style: normal;
    font-size: 12.5px;
    color: var(--nb-muted);
    margin-top: 4px;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.nb-doc__download {
    flex: 0 0 auto;
    color: var(--nb-main);
    font-size: 15px
}

.nb-doc:hover .nb-doc__text strong {
    color: var(--nb-main)
}

/* === PRIMARY GRADIENT APPLICATION (#1390E4 -> #015FC1) === */
.nb-search button,.nb-cart b,.nb-footer__social a:hover {
    background-image: var(--nb-grad)
}

.nb-head__title span::after,.nb-footer__title::after,.nb-footer__col h4::after {
    background-image: var(--nb-grad-h)
}

.pagination .page-link.active,.pagination .page-link.bg-primary,.page-link.bg-primary.active {
    background-image: var(--nb-grad)!important;
    border-color: transparent!important;
    color: #fff!important
}

.menu-res {
    background-image: var(--maingradient)
}

.nb-head__more {
    background-image: var(--nb-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'rm'
}

.nb-head__more i {
    -webkit-text-fill-color: var(--nb-main);
    color: var(--nb-main)
}

.nb-head__more:hover {
    filter: brightness(1.06)
}

.nb-card__sale {
    background-image: linear-gradient(135deg,#ff5a4d,#e2352b)
}

/* === 3-COLUMN DOC ROW (price / software / directions) === */
.nb-head--sm {
    margin-bottom: 14px;
    padding-bottom: 0;
    border-bottom: 0
}

.nb-head--sm .nb-head__title span {
    font-size: 15px;
    padding-bottom: 10px
}

.nb-head--sm .nb-head__more {
    font-size: 12.5px
}

.nb-doclist {
    display: flex;
    flex-direction: column
}

.nb-doclist__item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--nb-line)
}

.nb-doclist__item:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.nb-doclist__img {
    flex: 0 0 96px;
    width: 96px;
    border-radius: 8px;
    overflow: hidden
}

.nb-doclist__img img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    transition: .35s
}

.nb-doclist__item:hover .nb-doclist__img img {
    transform: scale(1.06)
}

.nb-doclist__body {
    flex: 1;
    min-width: 0
}

.nb-doclist__body strong {
    display: block;
    font-weight: normal;
    font-family: 'rm';
    font-size: 13.5px;
    color: var(--nb-ink);
    line-height: 1.45;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.nb-doclist__item:hover .nb-doclist__body strong {
    color: var(--nb-main)
}

.nb-doclist__body em {
    font-style: normal;
    font-size: 12.5px;
    color: var(--nb-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.nb-map__frame {
    min-height: 220px
}

/* === GRADIENT PRIMARY ACCENTS === */
.nb-cart b,.pagination .page-link.active,.pagination .page-link.bg-primary {
    background-image: var(--nb-grad)!important;
    border-color: transparent!important;
    color: #fff!important
}

.nb-head__more {
    color: var(--nb-main)
}

.nb-video-cta {
    background-image: var(--nb-grad)
}

/* ===== HERO v2 ===== */
/* ===== HEADER nested catalog ===== */
/* ===== FOOTER extra ===== */
.nb-footer__fanpage .nb-footer__title {
    margin-bottom: 16px
}

/* ===== HERO v3: caption tabs like reference ===== */
/* ===== HERO left categories: icon - name - arrow ===== */
/* ===== product grid: 4 per row, single container ===== */
.container_product {
    display: flex;
    flex-wrap: wrap;
    margin: -5px;
    padding: 0!important;
    background: none !IMPORTANT;
}

.container_product .item_product {
    width: calc(25% - 10px)!important;
    margin: 5px;
    border: 1px solid var(--nb-line);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: none;
    transition: .25s;
    display: flex;
    flex-direction: column;
    position: relative;
}

.container_product .item_product:hover {
    box-shadow: 0 14px 30px rgba(15,40,80,.12);
    transform: translateY(-4px);
    border-color: rgba(19,144,228,.3)
}

.container_product .img_product {
    padding: 0;
    overflow: hidden
}

.container_product .img_product img {
    width: 100%;
    aspect-ratio: 250/300;
    object-fit: cover;
    display: block;
    transition: .4s
}

.container_product .item_product:hover .img_product img {
    transform: scale(1.06)
}

.container_product .content_product {
    padding: 12px 12px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1
}

.container_product .name_product {
    font-size: 13.5px;
    line-height: 1.45;
}

.container_product .name_product a {
    color: var(--nb-ink)
}

.container_product .name_product a:hover {
    color: var(--nb-main)
}

.container_product .price_product {
    margin-top: auto
}

.container_product .price-new {
    color: #e2352b;
    font-family: 'rb';
    font-size: 15px
}

.container_product .price-old {
    font-size: 12.5px;
    color: #96a3b3;
    text-decoration: line-through;
    margin-left: 6px
}

/* ===== FIXES v3 ===== */
.nb-header,.nb-nav,.nb-nav__in {
    overflow: visible
}

.nb-featured {
    position: relative;
    overflow: hidden
}

.nb-featured .nb-container {
    position: relative;
    z-index: 2
}

/* reference-style vertical menu icons */
.nb-cat-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: 0 0 20px;
    margin-right: 8px;
    vertical-align: middle
}

/* ===== VERTICAL MENU ITEMS (reference style: icon + name + arrow) ===== */
/* ===== ITEM-PRODUCT CART BUTTONS ===== */
.container_product .item_product .cart-product {
    display: flex;
    gap: 6px;
    padding: 0 10px 10px 10px;
}

.container_product .item_product .btn_buynow {
    display: none!important
}

.container_product .item_product .btn_addnow {
    display: block;
    width: 100%;
    text-align: center;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--nb-grad)!important;
    color: #fff!important;
    font-size: 12.5px;
    font-family: 'rm';
    cursor: pointer;
    transition: .2s;
    border: none!important;
    box-shadow: none!important;
}

.container_product .item_product .btn_addnow:hover {
    filter: brightness(1.06)
}

/* ===== FIXED CONTACT BUTTONS (Zalo / Hotline) ===== */
.btn-frame {
    position: fixed;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    transition: transform .25s,box-shadow .25s
}

.btn-frame:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(0,0,0,.28)
}

.btn-frame i {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden
}

.btn-frame i img {
    width: 35px;
    height: 35px;
    object-fit: contain
}

.btn-zalo {
    left: 20px;
    bottom: 20px
}

.btn-phone {
    left: 20px;
    bottom: 92px
}

.kenit-alo-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #1a73e8;
    border-radius: 50%;
    opacity: .7;
    z-index: 1;
    pointer-events: none;
    animation: kenitAloRing 2s ease-out infinite
}

.btn-phone .kenit-alo-circle {
    border-color: #e53935
}

.kenit-alo-circle-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #1a73e8;
    opacity: .4;
    z-index: 2;
    pointer-events: none;
    animation: kenitAloFill 1.6s ease-in-out infinite
}

.btn-phone .kenit-alo-circle-fill {
    background: #e53935
}

@keyframes kenitAloRing {
    0% {
        transform: scale(1);
        opacity: .7
    }

    70% {
        transform: scale(1.8);
        opacity: 0
    }

    100% {
        transform: scale(1.8);
        opacity: 0
    }
}

@keyframes kenitAloFill {
    0%,100% {
        transform: scale(1);
        opacity: .4
    }

    50% {
        transform: scale(1.15);
        opacity: .12
    }
}

.scrollToTop {
    position: fixed;
    bottom: 50px;
    right: 20px;
}

/* Header: nav dropdown level 2 + account */
.nb-menu li {
    position: relative
}

.nb-menu__sub {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 230px;
    background: #fff;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 18px 40px rgba(10,40,80,.18);
    padding: 8px 0;
    list-style: none;
    margin: 0;
    display: none;
    z-index: 70
}

.nb-menu li.has-sub:hover > .nb-menu__sub {
    display: block
}

.nb-menu__sub li a {
    display: block;
    height: auto;
    padding: 10px 18px;
    color: #25303d;
    font-size: 13.5px;
    text-transform: none
}

.nb-menu__sub li a:hover {
    background: #eef6fe;
    color: var(--nb-main-2)
}

/* Header responsive */
@media (max-width: 991px) {
}

/* ===== FOOTER MAP ===== */
.nb-footer__col--map {
    flex: 1.2;
    min-width: 260px
}

.nb-footer__map {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255,255,255,.05);
    min-height: 200px
}

.nb-footer__map iframe {
    display: block;
    width: 100%!important;
    height: 220px;
    border: 0
}

.nb-footer__map img {
    width: 100%;
    display: block;
    border-radius: 10px
}