*, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0
}

html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent
}

.bg-\[\#1E3A8A\] {
    background-color: #1e3a8a;
}

a {
    color: inherit;
    text-decoration: inherit;
}

.main-menu .sub-menu {
    min-width: 250px;
    background-color: #fff;
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    list-style: none;
    padding: 10px 15px;
    margin: 0;
    border-radius: 10px;
    display: none;
    z-index: 9;
}

.main-menu .sub-menu li:not(:last-child) {
    margin-bottom: 10px;
}

.main-menu .sub-menu {
    left: 0;
    position: absolute;
}

.main-menu > .item:hover .sub-menu {
    display: block;
}

.lg\:h-20 {
    height: 5rem;
}

/*.slide-main {*/
/*    width: 100%;*/
/*    height: 600px;*/
/*    position: relative;*/
/*    overflow: hidden;*/
/*}*/

/*.slide-main .item {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    position: relative;*/
/*}*/

/*.slide-main .item img {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover;*/
/*    display: block;*/
/*}*/

/*.slide-main .overlay {*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    background: rgba(0, 0, 0, 0.45);*/
/*}*/

/*.slide-main .content {*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 80px;*/
/*    transform: translateY(-50%);*/
/*    color: #fff;*/
/*    z-index: 2;*/
/*    max-width: 700px;*/
/*}*/

/*menu mobile*/
.menu-mobile {
    background: #1e3a8a;
    transition: transform 0.35s ease;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    display: none;
    position: fixed;
    overflow-y: scroll;
    height: 100vh;
}

.menu-mobile.active {
    opacity: 1;
    visibility: visible;
    display: block;
}

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

.mobile-menu-list li {
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.mobile-menu-list a,
.menu-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.mobile-menu-list a:hover {
    opacity: 0.8;
}

/* Submenu */
.has-sub .submenu {
    list-style: none;
    padding-left: 15px;
    /*max-height: 0;*/
    overflow: hidden;
    /*transition: 0.3s ease;*/
    display: none;
}

.has-sub.active .submenu {
    max-height: 500px;
}

.submenu li a {
    font-size: 16px;
    padding: 10px 0;
    color: rgba(255,255,255,0.85);
}

/*end menu mobile*/

.slide-main {
    position: relative;
    overflow: hidden;
}

.slide-main .item {
    position: relative;
    height: 600px;
}

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

.slide-main .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.slide-main .content {
    position: absolute;
    top: 50%;
    left: 80px;
    transform: translateY(-50%);
    color: #fff;
    z-index: 2;
    max-width: 700px;
}

.slide-main h1 {
    font-size: 56px;
    font-weight: 700;
    margin-bottom: 20px;
}

.slide-main p {
    font-size: 20px;
    margin-bottom: 30px;
}

.btn-main {
    display: inline-block;
    padding: 14px 28px;
    background: #1f3fbf;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.btn-main:hover {
    background: #162f8c;
}

.commit-section {
    padding: 80px 0;
    background: linear-gradient(to bottom, #f4f6fb, #eef1f6);
    font-family: sans-serif;
    overflow-y: hidden;
}

.commit-head {
    text-align: center;
    margin-bottom: 50px;
}

.commit-head .tag {
    display: inline-block;
    padding: 8px 18px;
    background: #e4e9f5;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    color: #2b4aa0;
    margin-bottom: 15px;
}
.commit-head .tag svg {
    height: 20px;
}

/*.commit-head h2 {*/
/*    font-size: 36px;*/
/*    margin-bottom: 15px;*/
/*    font-weight: bold;*/
/*}*/

.commit-head p {
    color: #6c757d;
}

/*.commit-list {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(4, 1fr);*/
/*    gap: 30px;*/
/*}*/

/*.commit-item {*/
/*    background: #fff;*/
/*    padding: 30px;*/
/*    border-radius: 16px;*/
/*    box-shadow: 0 10px 25px rgba(0,0,0,0.05);*/
/*    transition: 0.3s ease;*/
/*    position: relative;*/
/*    cursor: pointer;*/
/*    border-bottom: 4px solid transparent;*/
/*}*/

/* Hover hoặc active */
.commit-item:hover .inner,
.commit-item.active {
    background: #edf7f1;
    /*border-bottom: 4px solid #1bbf73;*/
    transform: translateY(-5px);
}

/* Icon */
.icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    margin-bottom: 20px;
}

.icon.blue {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
}

.icon.green {
    background: linear-gradient(135deg, #16a34a, #10b981);
}

.icon.purple {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.icon.orange {
    background: linear-gradient(135deg, #ff6a00, #ff3d3d);
}

.commit-item h4 {
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: 700;
}

.commit-item p {
    color: #4a5565;
    line-height: 1.625;
    font-size: 13px;
}

/* khoảng cách giữa slide nhưng không dư 2 bên */
.commit-list .slick-slide {
    padding: 0 15px;
}

/* bù padding ra ngoài để 2 bên sát lề */
.commit-list .slick-list {
    margin: 0 -15px;
}

/* làm tất cả slide cao bằng nhau */
.commit-list .slick-track {
    display: flex !important;
}

.commit-list .slick-slide {
    height: auto;
}

.commit-item {
    height: 100%;
}

.commit-item .inner {
    height: 100%;
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/*section-contact-home*/
.section-contact-home {
    background: #f8fafc;
}
.section-contact-home .header .title {
    color: #1e3a8a;
}
.section-contact-home .header .title svg {
    height: 20px;
}
/* Service Card */
.service-card {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid #eef2f7;
    overflow: hidden;
    position: relative
}

.service-card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    border-color: #1e3a8a;
}
.service-card .more {
    opacity: 0;
    visibility: hidden;
}
.service-card:hover .more {
    opacity: 1;
    visibility: visible;
    color: #1e3a8a
}
.service-card:hover h5 {
    color: #1e3a8a
}

.service-card h5 {
    font-weight: 600;
    margin-bottom: 10px;
}

.service-card p {
    color: #6c757d;
    font-size: 14px;
    margin-bottom: 0;
    padding-bottom: 10px;
}
.custom-line-hover{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:3px;
    background:linear-gradient(90deg,#2563eb,#06b6d4);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .35s ease;
}

.service-card:hover .custom-line-hover, .blog-card:hover .custom-line-hover, .commit-item:hover .custom-line-hover {
    transform:scaleX(1);
}

/* Icon box */
.icon-box {
    width: 55px;
    height: 55px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 20px;
}

.bg-light-blue {
    color: #2b6cb0;
}

.bg-light-purple {
    background: #efe9ff;
    color: #6f42c1;
}

.bg-light-green {
    background: #e6f9f0;
    color: #198754;
}

.bg-light-orange {
    background: #fff3e6;
    color: #fd7e14;
}

/* Right form */
.contact-form-box {
    background: linear-gradient(135deg, #1f3c88, #2b60de);
    padding: 30px;
    border-radius: 18px;
    height: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.custom-input {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}

.custom-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.custom-input:focus {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    box-shadow: none;
    border-color: #fff;
}

.form-select.custom-input {
    color: #fff;
}

.btn-light {
    border-radius: 10px;
}


/*end section-contact-home*/

/*section whychoose*/

.section-home-whychoose {
    background: linear-gradient(135deg, #1e3c92, #2a5bd7);
    position: relative;
    overflow: hidden;
}
.section-home-whychoose .heading .title svg {
    height: 16px;
}

/* Badge */
.badge-why {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 13px;
    backdrop-filter: blur(10px);
}

/* Card */
.why-card {
    background: rgba(255, 255, 255, 0.08);
    padding: 30px;
    border-radius: 18px;
    color: #fff;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    transition: all 0.3s ease;
}

.why-card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.12);
}

.why-card h5 {
    font-weight: 600;
    margin-bottom: 10px;
}

.why-card p {
    opacity: 0.8;
    font-size: 14px;
    margin-bottom: 0;
}

/* Icon */
.why-icon {
    width: 55px;
    height: 55px;
    /*border-radius: 14px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 20px;
    /*padding: 5px;*/
}

/* Icon colors */
/*.icon-blue {*/
/*    background: rgba(0, 123, 255, 0.2);*/
/*    color: #4da3ff;*/
/*}*/

/*.icon-green {*/
/*    background: rgba(25, 135, 84, 0.2);*/
/*    color: #38d996;*/
/*}*/

/*.icon-purple {*/
/*    background: rgba(111, 66, 193, 0.2);*/
/*    color: #b48cff;*/
/*}*/

/*.icon-orange {*/
/*    background: rgba(255, 136, 0, 0.2);*/
/*    color: #ffb347;*/
/*}*/

/*.icon-pink {*/
/*    background: rgba(255, 0, 150, 0.2);*/
/*    color: #ff77c8;*/
/*}*/

/*.icon-yellow {*/
/*    background: rgba(255, 193, 7, 0.2);*/
/*    color: #ffd75e;*/
/*}*/

/* Stats */
.stats-row h2 {
    font-size: 32px;
}

/*end section whychose*/


/*section-for-step*/

.section-for-step {
    background: linear-gradient(to bottom, #f8fafc, #eef2f7);
}

.section-for-step .heading .title svg {
    height: 20px;
}
/* Badge */
.badge-step {
    background: #e8efff;
    color: #2b60de;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 13px;
}

/* Card */
.step-card {
    background: #fff;
    padding: 50px 30px 20px 30px;
    border-radius: 18px;
    position: relative;
    height: 100%;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.step-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
    border: 2px solid #2b60de;
}

/* Step number */
.step-number {
    position: absolute;
    top: -18px;
    left: -5px;
    font-weight: 700;
    color: #fff;
    border-radius: 16px;
    font-size: 20px;
    width: 63px;
    height: 63px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon */
.step-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}
.section-for-step .bg-blue-1 {
    /*background: oklch(62.3% .214 259.815)*/
    /*background: linear-gradient(135deg, #4086F9, #3CAAE0);*/
    background: linear-gradient(135deg, #3F86F7 0%, #3CAAE0 100%);
}
.section-for-step .bg-blue-2 {
    /*background: oklch(62.7% .265 303.9)*/
    background: linear-gradient(135deg, #9A4DE6 0%, #E03FA6 100%);
}
.section-for-step .bg-blue-3 {
    /*background: oklch(63.7% .237 25.331)*/
    background: linear-gradient(135deg, #FF7A00 0%, #FF3B3B 100%);
}
.section-for-step .bg-blue-4 {
    /*background: oklch(69.6% .17 162.48)*/
    background: linear-gradient(135deg, #22C55E 0%, #10B981 100%);
}

/* Colors */
.bg-blue {
    background: linear-gradient(135deg, #2196f3, #1565c0);
}

.bg-purple {
    background: linear-gradient(135deg, #c471ed, #f64f59);
}

.bg-orange {
    background: linear-gradient(135deg, #ff7e5f, #ff3d00);
}

.bg-green {
    background: linear-gradient(135deg, #00c853, #009624);
}

/*.icon-blue {*/
/*    background: #e7f1ff;*/
/*    color: #2b60de;*/
/*}*/

.icon-purple {
    background: #f3e8ff;
    color: #a855f7;
}

.icon-orange {
    background: #fff0e6;
    color: #ff5722;
}

.icon-green {
    background: #e6f9f0;
    color: #00c853;
}

.step-card h5 {
    font-weight: 600;
    margin-bottom: 10px;
}

.step-card p {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 0;
}

/*end section-for-step*/


/*section blog home*/
.section-blog-home {
    background: linear-gradient(to bottom, #f8fafc, #eef2f7);
}
.section-blog-home .heading .title svg {
    height: 20px;
}

/* Badge */
.badge-blog {
    background: #e8efff;
    color: #2b60de;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 13px;
}

/* Card */
.blog-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    transition: 0.3s;
    height: 100%;
}

.blog-card:hover {
    transform: translateY(-8px) !important;
}

/* Image */
.blog-img {
    position: relative;
    height: 220px;
    overflow: hidden;
}

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

/* Overlay */
.blog-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    color: #fff;
}

.blog-title h5 {
    margin: 0;
    font-weight: 600;
}

.blog-title small {
    opacity: 0.8;
}

/* Icon */
.blog-icon {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
}

.bg-blue {
    background: #2b60de;
}

.bg-purple {
    background: #a855f7;
}

.bg-orange {
    background: #ff5722;
}

.bg-green {
    background: #00c853;
}

/* Content */
.blog-content {
    padding: 20px;
}

.blog-content p {
    font-size: 14px;
    color: #6b7280;
}

.blog-meta {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.blog-meta li {
    margin-bottom: 6px;
}

.blog-meta i {
    margin-right: 6px;
    color: #2b60de;
}

/*end section blog home*/


/*css block product*/

/* HEADER BADGE */
.badge-limit {
    background: #e6f7ee;
    color: #198754;
    font-weight: 600;
    font-size: 13px;
}
.product-category-home .heading .title svg {
    height: 20px;
}

/* CATEGORY TAB */
.btn-tab {
    background: #eef2f7;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 500;
}

.btn-tab.active {
    background: #1e3a8a;
    color: #fff;
}

.btn-tab:hover {
    background: #dbe3f3;
}

/* PRODUCT CARD */
.product-item {
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.product-item img {
    height: 220px;
    object-fit: cover;
}

.product-item:hover {
    /*transform: translateY(-6px);*/
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* WARRANTY BADGE */
.badge-soft {
    background: #fde2e1;
    color: #dc3545;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 8px;
}

/* PRICE */
.price-new {
    color: #dc3545;
    font-weight: 700;
    font-size: 18px;
}

.price-old {
    text-decoration: line-through;
    color: #6c757d;
    font-size: 14px;
    margin-left: 8px;
}

/*end css block product*/

/*asked question*/
/* Accordion style */
.custom-accordion .accordion-button {
    /*border-radius: 12px !important;*/
    background: #fff;
}
.accordion-button {
    box-shadow: none !important;
}
.custom-accordion .accordion-button:not(.collapsed) {
    background: #f8f9fa;
    box-shadow: none;
}

.custom-accordion .accordion-item {
    overflow: hidden;
}

.accordion-item:not(:first-of-type) {
    border-top: 1px solid #ececec;
}

/* CTA gradient */
.faq-cta {
    /*max-width: 850px;*/
    /*background: linear-gradient(135deg, #1f3c88, #2d5bd1);*/
}
/*end asked question*/




/*footer*/
.site-footer {
    background: linear-gradient(135deg, #0f1f3d, #0a1830);
    color: #fff;
    font-size: 14px;
}

.footer-top {
    padding: 60px 0;
}

.footer-title {
    font-weight: 700;
    margin-bottom: 20px;
}

.footer-subtitle {
    font-weight: 600;
    margin-bottom: 15px;
}

.footer-contact,
.footer-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.footer-contact li,
.footer-list li {
    margin-bottom: 10px;
    color: #cbd5e1;
}

.footer-list a {
    color: #cbd5e1;
    text-decoration: none;
}

.footer-list a:hover {
    color: #ffffff;
}

.footer-btn {
    background: #2d5bd1;
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    display: inline-block;
    margin: 15px 0 10px;
    text-decoration: none;
    font-weight: 500;
}

.footer-btn:hover {
    background: #3a6df0;
}

.footer-note {
    color: #94a3b8;
    font-size: 13px;
}

.social-links {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.social {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

.social.fb { background: #1877f2; }
.social.zalo { background: #0068ff; }
.social.yt { background: #ff0000; }
.social.tt { background: #1f2937; }

.footer-bottom {
    background: #050d1f;
    padding: 20px 0;
    font-size: 13px;
}

.footer-policy a {
    color: #cbd5e1;
    text-decoration: none;
    margin: 0 8px;
}

.footer-policy a:hover {
    color: #fff;
}

/*end foooter*/


/*product-category*/
.main-product-category {
    background: linear-gradient(180deg, #1e3c8f 0%, #2f66db 100%);
    position: relative;
}

/* ============================= */
/* TOP AREA (HEADER + FILTER) */
/* ============================= */

.product-top-area {
    padding: 100px 0 160px 0;
}

.header-product-category .title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 15px;
}

.header-product-category .sub-title {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 40px;
}

/* ============================= */
/* CATEGORY TABS */
/* ============================= */

.category-tabs {
    background: rgba(255,255,255,0.15);
    padding: 15px;
    border-radius: 16px;
    gap: 12px;
}

.tab-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    padding: 8px 18px;
    border-radius: 12px;
    font-weight: 500;
    transition: 0.3s;
}

.tab-btn:hover {
    background: rgba(255,255,255,0.35);
}

.tab-btn.active {
    background: #fff;
    color: #1e3c8f;
}

/* ============================= */
/* TOGGLE FILTER */
/* ============================= */

.toggle-filter a {
    color: #fff;
    text-decoration: underline;
    font-weight: 500;
}

/* ============================= */
/* FILTER BOX */
/* ============================= */

.filter-box {
    background: rgba(255,255,255,0.15);
    padding: 25px;
    border-radius: 16px;
    color: #fff;
}

.filter-box label {
    margin-bottom: 8px;
    font-weight: 500;
}

.filter-box .form-select {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
}

.filter-box .form-select option {
    color: #000;
}

/* ============================= */
/* PRODUCT LIST BLOCK */
/* ============================= */

.product-list-wrapper {
    background: #f5f7fa;
    padding: 80px 0;
    margin-top: -100px;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.08);
}

/* Section title */

.section-title {
    font-size: 36px;
    font-weight: 700;
}

.section-desc {
    color: #6c757d;
}

/* ============================= */
/* PRODUCT CARD */
/* ============================= */

.product-item {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    /*box-shadow: 0 4px 15px rgba(0,0,0,0.08);*/
    transition: 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #ececec
}

.product-item:hover {
    /*transform: translateY(-5px);*/
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Image */

.product-image {
    position: relative;
}

.product-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

/* Badge đỏ */

.product-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: red;
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* Badge xanh */

.product-status {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: #16a34a;
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* Content */

.product-content {
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.product-title {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 15px;
    min-height: 44px;
}

/*.product-desc {*/
/*    font-size: 13px;*/
/*    color: #6c757d;*/
/*    margin-bottom: 10px;*/
/*}*/

/* Price */

.product-price {
    color: red;
    font-weight: 700;
    font-size: 18px;
    margin-top: auto;
}

/* Source tag */

.product-source {
    background: #dbeafe;
    color: #1e3a8a;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 12px;
    margin-top: 10px;
}

/* Buy button */

.btn-buy {
    background: #243c94;
    color: #fff;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
    text-align: center;
    transition: 0.3s;
}

.btn-buy:hover {
    background: #1e2f73;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */


/*end product category*/




/*chi tiết sp*/
.main-product-detail {
    padding: 40px 0;
    background: #f8f9fb;
    font-family: Arial, sans-serif;
}

.product-container {
    /*max-width: 1200px;*/
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

/* LEFT */
.product-gallery {
    /*flex: 1;*/
}

.main-image {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.main-image img {
    width: 100%;
    display: block;
    border-radius: 12px;
}

.image-count {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 20px;
}

.thumbnail-list {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

.thumbnail-list img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
}

.thumbnail-list img.active {
    border: 2px solid #2b3990;
}

/* RIGHT */
.product-info {
    /*flex: 1;*/
}

.product-info .product-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
}

.badge-stock {
    display: inline-block;
    background: #ffe5d0;
    color: #ff6600;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    margin-bottom: 20px;
}

.spec-box {
    margin-bottom: 20px;
}

.spec-box h3 {
    font-size: 16px;
    margin-bottom: 10px;
}

.spec-box ul {
    padding-left: 0;
    list-style: none;
}

.spec-box li {
    margin-bottom: 6px;
    font-size: 14px;
}

.status-box {
    background: oklch(97% .014 254.604);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.warranty-text{
    background: #d1fae5;
    border: 1px solid #00a63e;
    border-radius: 16px;
    padding: 5px 22px;
    font-size: 14px;
}
.warranty-text p {
    margin: 0;
    padding: 0;
}

.gift-box {
    background: #fff3e6;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.product-info .price {
    font-size: 32px;
    font-weight: bold;
    color: #e60000;
    margin-bottom: 20px;
}

.product-info .button-group {
    display: flex;
    gap: 15px;
}

.add-cart._addToCartAttr {
    flex: 1;
    background: #243c8f;
    color: #fff;
    border: 1px solid;
    padding: 14px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 0;
    text-align: center;
}

.buy-now._buyNowAttr {
    flex: 1;
    background: #fff;
    color: #243c8f;
    border: 1px solid #243c8f;
    padding: 14px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
}

.product-info .btn-buy:hover {
    background: #1b2e6e;
}

.product-info .btn-cart:hover {
    background: #243c8f;
    color: #fff;
}

.warranty-box {
    margin-bottom: 20px;
}

.warranty-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
}

.warranty-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    margin-bottom: 15px;
    cursor: pointer;
    background: #fff;
    transition: 0.2s ease;
}

.warranty-option:hover {
    border-color: #243c8f;
    background: #f9fbff;
}

.warranty-left {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 18px;
    font-weight: 500;
}

.warranty-left input {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.warranty-price {
    font-size: 20px;
    font-weight: 600;
    color: #2b3990;
}
.product-description-box {
    /*max-width: 1200px;*/
    margin: 40px auto;
    background: #fff;
    padding: 35px 20px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
}

.desc-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.desc-content {
    font-size: 16px;
    line-height: 1.7;
    color: #4b5563;
}
.desc-content p {
    margin: 0;
    padding: 0;
}

.desc-subtitle {
    font-size: 18px;
    font-weight: 600;
    margin: 20px 0 15px 0;
}

.desc-list {
    padding-left: 20px;
}

.desc-list li {
    margin-bottom: 10px;
    font-size: 15px;
    color: #374151;
}

.desc-list li::marker {
    color: #243c8f;
}
.related-products-section {
    margin: 40px auto;
    background: #fff;
    padding: 30px 20px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
}
.related-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.related-header h2 {
    font-size: 22px;
    font-weight: 700;
}

.view-more {
    text-decoration: none;
    font-weight: 500;
    color: #243c8f;
}
/*end chi tiết sp*/



/*giỏ hàng*/
.main-cart-page {
    background: #f5f6fa;
    padding: 40px 0;
    font-family: Arial, sans-serif;
}

.cart-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    gap: 30px;
}

/* LEFT */
.cart-left {
    flex: 2;
    background: #fff;
    padding: 25px;
    border-radius: 12px;
}

.cart-title {
    margin-bottom: 25px;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

.cart-image img {
    width: 110px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
}

.cart-info {
    flex: 1;
}

.cart-info h4 {
    margin: 0 0 5px;
    font-size: 16px;
}

.cart-spec {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
}

.cart-price {
    font-weight: bold;
    color: #e60000;
    margin-bottom: 10px;
}

.cart-quantity {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-quantity button {
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
}

.cart-quantity input {
    width: 50px;
    text-align: center;
    height: 30px;
}

.cart-remove button {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #999;
}

.cart-remove button:hover {
    color: red;
}

/* RIGHT */
.cart-right {
    flex: 1;
}

.summary-box {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    position: sticky;
    top: 100px;
}

.summary-box h3 {
    margin-bottom: 20px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 18px;
    margin: 15px 0;
}

.btn-checkout {
    width: 100%;
    padding: 14px;
    background: #243c8f;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

.btn-checkout:hover {
    background: #1b2e6e;
}
/*end giỏ hàng*/

.modal-content {
    background: transparent;
    box-shadow: none;
}

#quoteModal.contact-form-box {
    border-radius: 24px;
}
#quoteModal.show {
    backdrop-filter: blur(6px);
}

.contact-form-box .icon-plane {
    width: 47px;
    height: 47px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
            145deg,
            rgba(255,255,255,0.15),
            rgba(255,255,255,0.05)
    );
    backdrop-filter: blur(6px);
    box-shadow:
            0 8px 20px rgba(0,0,0,0.2),
            inset 0 0 0 1px rgba(255,255,255,0.1);
}

.contact-form-box .icon-plane i {
    color: #fff;
    font-size: 18px;
}
._btnload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 20px;
    border-radius: 18px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    border-bottom-left-radius: 18px;
    font-size: 19px;
    font-weight: 600;
    color: #2c458b;
    border: 2px solid #2c458b;
    text-decoration: none;
    transition: all 0.25s ease;
}

._btnload i {
    font-size: 20px;
}

._btnload:hover {
    background: #2c458b;
    color: #fff;
}


/* style chung */
._colorSelect ._pSelect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: #fff;
    color: #333;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
}

/* hover */
._colorSelect ._pSelect:hover {
    border-color: #007bff;
    color: #007bff;
}

/* màu đang chọn */
._colorSelect ._pSelect.active {
    background: #007bff;
    border-color: #007bff;
    color: #fff;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* màu hết hàng */
._colorSelect ._pSelect.deactive {
    background: #f5f5f5;
    color: #999;
    border-color: #e0e0e0;
    cursor: not-allowed;
    position: relative;
}

/* gạch chéo màu hết hàng */
._colorSelect ._pSelect.deactive::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: #999;
    transform: rotate(-20deg);
}

/* style chung */
._sizeSelect a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 6px 12px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #333;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
}

/* hover */
._sizeSelect a:hover {
    border-color: #007bff;
    color: #007bff;
}

/* size đang chọn */
._sizeSelect a.active {
    border-color: #007bff;
    background: #007bff;
    color: #fff;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* size hết hàng */
._sizeSelect a.deactive {
    background: #f5f5f5;
    color: #999;
    border-color: #e0e0e0;
    cursor: not-allowed;
    position: relative;
}

/* gạch chéo size hết hàng */
._sizeSelect a.deactive::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: #999;
    transform: rotate(-20deg);
}
.p-quantity {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
}

/* nút + - */
.p-quantity .btn {
    width: 38px;
    height: 38px;
    border: none;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
}

/* hover nút */
.p-quantity .btn:hover {
    background: #007bff;
    color: #fff;
}

/* input số */
.p-quantity input {
    width: 60px;
    height: 38px;
    border: none;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    box-shadow: none;
}

/* bỏ mũi tên input number */
.p-quantity input::-webkit-outer-spin-button,
.p-quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.p-quantity input[type=number] {
    -moz-appearance: textfield;
}
.slider-nav .slick-current.slick-active {
    border: 1px solid #000;
}
.main-product-detail .p-price-origin {
    text-decoration: line-through;
    color: #757575;
    font-size: 20px;
}


/*fixed footer contact*/
.contact-fixed{
    position: fixed;
    right: 20px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 999;
}

/* item */
.contact-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 12px 10px 22px;
    min-width: 190px;
    background: #eee;
    border-radius: 40px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: all .3s;
    font-size: 14px;
}

/* hover */
.contact-item:hover{
    transform: translateX(-5px);
}

/* icon */
.contact-item .icon-footer{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}

/* zalo */
.icon-footer.zalo{
    background: linear-gradient(135deg,#4da3ff,#1e6dfc);
}

.icon-footer.phone{
    background: linear-gradient(135deg, #ff4d4f, #d9363e);
}

/* messenger */
.icon-footer.messenger{
    background: linear-gradient(135deg,#4da3ff,#0046ff);
}

/* báo giá */
.contact-quote{
    background: linear-gradient(135deg,#2f4fa8,#2f74ff);
    color: #fff;
}

.icon-footer.quote{
    background: rgba(255,255,255,0.2);
}



@media (max-width: 991px) {

    .header-product-category .title {
        font-size: 30px;
    }

    .product-list-wrapper {
        margin-top: -70px;
        padding: 60px 0;
    }

    .section-title {
        font-size: 28px;
    }
    .cart-container {
        flex-direction: column;
    }

    .summary-box {
        position: static;
        margin-top: 20px;
    }
    .product-container {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .slide-main .item {
        height: 450px;
    }

    .slide-main .content {
        left: 20px;
        right: 20px;
    }

    .slide-main h1 {
        font-size: 32px;
    }

    .slide-main p {
        font-size: 16px;
    }
    .main-product-detail .product-info {
        padding:  0 10px;
    }
    .add-cart._addToCartAttr {
        flex: unset;
        width: 100%;
    }
    .contact-fixed{
        right: 0;
        bottom: 0;
        width: 100%;
        flex-direction: row;
        gap: 0;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }

    .contact-fixed .contact-item{
        flex: 1;
        min-width: auto;
        border-radius: 0;
        padding: 10px;
        flex-direction: column;
        gap: 5px;
        justify-content: center;
        text-align: center;
        font-size: 13px;
    }

    .contact-fixed .contact-item .icon-footer{
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .contact-fixed .contact-item span{
        order: 2;
    }
    .site-footer {
        margin-bottom: 80px;
    }

    .menu-mobile .item > a{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 0;
        font-size: 16px;
        text-decoration: none;
    }

    /* icon */
    .menu-mobile .item > a i{
        transition: .3s;
    }

    /* submenu */
    .menu-mobile .sub-menu{
        position: static;
        list-style: none;
        padding: 0;
        margin: 0;
        display: none;
    }

    /* submenu item */
    .menu-mobile .sub-menu li a{
        display: block;
        padding: 10px 0 10px 15px;
        font-size: 14px;
        color: #ddd;
        text-decoration: none;
    }

    /* active */
    .menu-mobile .item.active .sub-menu{
        display: block;
    }

    .menu-mobile .item.active > a i{
        transform: rotate(180deg);
    }
    .menu-mobile .sub-menu {
        position: relative;
    }

    .scroll-x-mobile {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .scroll-x-mobile::-webkit-scrollbar {
        display: none;
    }

    .scroll-x-mobile .row {
        flex-wrap: nowrap;
        margin-right: 0;
        margin-left: 0;
    }

    .scroll-x-mobile .col-lg-3,
    .scroll-x-mobile .col-md-6 {
        flex: 0 0 auto;
        width: 100%;
    }

    .scroll-tab-mobile {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .scroll-tab-mobile::-webkit-scrollbar {
        display: none;
    }

    .scroll-tab-mobile .btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .mobile-step .col-lg-3 {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .mobile-step .step-number {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-step .step-card {
        flex: 1;
    }
    .mobile-step {
        position: relative;
    }

    .mobile-step::before {
        content: "";
        position: absolute;
        left: 36px;
        top: 7px;
        bottom: 0;
        width: 7px;
        background: #1e3a8a;
    }

    .mobile-step .step-number {
        position: relative;
        z-index: 1;
    }
}


/* trạng thái ban đầu */
.animate-title,
.animate-left{
    opacity:0;
}

/* tiêu đề */
.animate-title{
    transform:scale(.9);
    transition:all .6s ease;
}

.animate-title.show{
    opacity:1;
    transform:scale(1);
}

/* item cùng hàng */
.animate-left{
    transform:translateX(-40px);
    transition:all .6s ease;
}

.animate-left.show{
    opacity:1;
    transform:translateX(0);
}
.user-desktop{
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translate(-50%, -50%);
}

._childProductItem{
    position:relative;
    padding-left:44px;
}

._childProductItem::before{
    content:"";
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    width:20px;
    height:20px;
    border:1px solid #d1d5db;
    border-radius:3px;
    background:#fff;
}


._childProductItem::after{
    content:"\f00c";
    font-family:"Font Awesome 5 Pro";
    position: absolute;
    font-weight:900;
    left:17px;
    top:50%;
    transform:translateY(-50%);
    font-size:14px;
    color:#fff;
    opacity:0;
}

._childProductItem.active::before{
    background:#020617;
    border-color:#020617;
}

._childProductItem.active::after{
    opacity:1;
}
._childProduct .color-price {
    color: #1E3A8A;
}
._childProduct .margin-left-40 {
    margin-left: 40px;
}

.section-faq-cta {
    padding: 60px 0;
    max-width: 850px;
    margin: auto;
}

.section-faq-cta .cta-box {
    background: linear-gradient(135deg,#2f4fa7,#3b6dd8);
    border-radius: 24px;
    padding: 60px 20px;
}

.section-faq-cta h2 {
    font-size: 30px;
}

.section-faq-cta .cta-desc {
    font-size: 18px;
    opacity: 0.9;
    max-width: 650px;
    margin: auto;
}

.section-faq-cta .btn {
    border-radius: 14px;
    font-weight: 600;
}

.section-faq-cta .btn-outline-light {
    border-width: 2px;
}
.text-3-line {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-products-list .slick-track {
    display: flex !important;
}

.related-products-list .slick-slide {
    height: auto;
}

.related-products-list .slick-slide > div {
    height: 100%;
}

.related-products-list .product-item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#faqAccordion .accordion-collapse {
    transition: all .15s ease;
}

#faqAccordion .accordion-body {
    transform: translateY(-10px);
    opacity: 0;
    transition: all .15s ease;
}

#faqAccordion .accordion-collapse.show .accordion-body {
    transform: translateY(0);
    opacity: 1;
}
.accordion-button::after {
    transition: transform .3s ease;
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}
header.sticky {
    position: sticky;
    z-index: 99;
}
.promotion-content p {
    margin: 0;
    padding: 0;
}

#bao-gia, #link-to-faq, #link-to-contact, #link-to-blog, #link-to-danh-gia, #link-to-used-product, #link-to-how-wework, #link-to-your-concern,
#link-to-who-we-are, #link-to-our-commitment, #link-to-professional-process, #link-to-solution {
    scroll-margin-top: 80px;
}

.text-color-common {
    color: #1e3a8a !important;
}
.bg-common {
    background: #1e3a8a;
}
.bg-common.btn:hover {
    color: #fff !important;
    background-color: #1e3a8a !important;
    border-color: inherit !important;
}
.cart-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    margin: auto;
}

.empty-box {
    text-align: center;
    background: #fff;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    max-width: 400px;
    width: 100%;
}

.empty-icon {
    font-size: 60px;
    margin-bottom: 10px;
}

.empty-box h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.empty-box p {
    color: #666;
    margin-bottom: 20px;
}

.btn-home {
    background: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-home:hover {
    background: #0056b3;
}