@media (min-width: 1200px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 1440px;
    }
}

.bg-header {
    background: #313131;
}

.breadcrumbs-section .tag_breadcum>a::after {
    display: none;
}

/* ============================================= */
/* ELEMENT CONTENT - Section Styles              */
/* ============================================= */

/* ---- Section 1: Giới thiệu (Intro) ---- */
.ec-intro {
    padding: 60px 0;
    background-color: #fff;
}

.ec-intro__img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.ec-intro__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ec-intro__img-wrap:hover .ec-intro__img {
    transform: scale(1.03);
}

.ec-intro__content {
    padding-left: 30px;
}

.ec-intro__subtitle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}


.ec-intro__subtitle-text {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: none;
    color: #1a1f6e;
}

.ec-intro__title {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--bn-primary);
    line-height: 1.25;
    margin: 0 0 20px 0;
}

.ec-intro__desc {
    font-size: 1.6rem;
    line-height: 1.75;
    color: #1E232D;
    margin-bottom: 30px;
}

.ec-intro__desc p {
    margin: 0;
}

.ec-intro__btn {
    display: inline-block;
    padding: 14px 32px;
    background-color: var(--bn-primary);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    font-style: italic;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
}

.ec-intro__btn:hover {
    background-color: #13165a;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(26, 31, 110, 0.35);
}

/* ---- Section 2: Mô tả (Description) ---- */
.ec-desc {
    padding: 50px 0;
    background-color: #fff;
}

.ec-desc__inner {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.ec-desc__title {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--bn-primary);
    line-height: 1.3;
    margin: 0 0 20px 0;
}

.ec-desc__separator {
    width: 80px;
    height: 2px;
    background-color: #ddd;
    margin: 0 auto 20px auto;
}

.ec-desc__text {
    font-size: 1.6rem;
    line-height: 1.75;
    color: #1E232D;
}

.ec-desc__text p {
    margin: 0;
}

/* ---- Section 3: How to choose (Card grid) ---- */
.ec-choose {
    padding: 60px 0;
    background-color: #f5f5f5;
}

.ec-choose__inner {
    text-align: center;
}

.ec-choose__title {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--bn-primary);
    line-height: 1.3;
    margin: 0 0 40px 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.ec-choose__grid {
    text-align: left;
}

.ec-choose__col {
    margin-bottom: 24px;
}

.ec-choose__card {
    display: flex;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    height: 100%;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.ec-choose__card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.ec-choose__card-accent {
    width: 5px;
    flex-shrink: 0;
    background-color: #1a1f6e;
    border-radius: 8px 0 0 8px;
}

.ec-choose__card-body {
    padding: 24px 20px;
    flex: 1;
}

.ec-choose__card-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bn-primary);
    line-height: 1.4;
    margin: 0 0 12px 0;
}

.ec-choose__card-desc {
    font-size: 1.6rem;
    line-height: 1.7;
    color: #1E232D;
}

.ec-choose__card-desc p {
    margin: 0;
}

.ec-choose__cta {
    margin-top: 40px;
    text-align: center;
}

.ec-choose__btn {
    display: inline-block;
    padding: 14px 36px;
    background-color: var(--bn-primary);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
}

.ec-choose__btn:hover {
    background-color: #13165a;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(26, 31, 110, 0.35);
}

/* ---- Section 4: Specifications (General Parameters) ---- */
.ec-spec {
    padding: 60px 0;
    background-color: #fcfcfc;
}

.ec-spec__inner {
    text-align: center;
}

.ec-spec__subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ec-spec__subtitle-line {
    font-size: 1.6rem;
    display: inline-block;
    width: 40px;
    height: 2px;
    background-color: #1a1f6e;
    flex-shrink: 0;
}

.ec-spec__subtitle-text {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: none;
    color: #1a1f6e;
}

.ec-spec__title {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--bn-primary);
    line-height: 1.25;
    margin: 0 0 40px 0;
}

.ec-spec__table {
    max-width: 1000px;
    margin: 0 auto 30px auto;
}

.ec-spec__table table {
    width: 100%;
    border-collapse: collapse;
}

.ec-spec__table table tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.ec-spec__table table tr:nth-child(even) {
    background-color: #fff;
}

.ec-spec__table table td,
.ec-spec__table table th {
    padding: 12px 24px;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #1E232D;
    border: none;
}

.ec-spec__table table td:first-child,
.ec-spec__table table th:first-child {
    font-weight: 700;
    color: #333;
    width: 25%;
}

.ec-spec__cta {
    margin-top: 30px;
}

.ec-spec__btn {
    display: inline-block;
    padding: 14px 36px;
    background-color: var(--bn-primary);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
}

.ec-spec__btn:hover {
    background-color: #13165a;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(26, 31, 110, 0.35);
}

/* ---- Section 5: Product Center ---- */
.ec-products {
    padding: 60px 0;
    background-color: #fff;
}

.ec-products__inner {
    text-align: center;
}

.ec-products__subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ec-products__subtitle-line {
    display: inline-block;
    width: 40px;
    height: 2px;
    background-color: #1a1f6e;
    flex-shrink: 0;
}

.ec-products__subtitle-text {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: none;
    color: var(--bn-primary);
}

.ec-products__title {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--bn-primary);
    line-height: 1.25;
    margin: 0 0 40px 0;
}

.ec-products__grid {
    text-align: left;
}

.ec-products__pagination-wrap {
    margin-top: 40px;
}

.ec-products__pagination-wrap .pagination {
    margin-bottom: 0;
}

/* Override standard pagination styles for better match */
.ec-products__pagination-wrap .pagination .page-item .page-link {
    border-radius: 2px;
    margin: 0 4px;
    color: #555;
    border-color: #ddd;
    padding: 8px 16px;
    font-size: 1.35rem;
    font-weight: 600;
}

.ec-products__pagination-wrap .pagination .page-item.active .page-link {
    background-color: #1a1f6e;
    border-color: #1a1f6e;
    color: #fff;
}

.ec-products__pagination-wrap .pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
    color: #1a1f6e;
}

.ec-products__cta {
    margin-top: 40px;
}

.ec-products__btn {
    display: inline-block;
    padding: 14px 36px;
    background-color: var(--bn-primary);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
}

/* ---- Section 5: Types of Colored ---- */
.ec-types {
    padding: 60px 0;
    background-color: #fcfcfc;
}

.ec-types__inner {
    text-align: center;
}

.ec-types__subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ec-types__subtitle-line {
    display: inline-block;
    width: 40px;
    height: 2px;
    background-color: #1a1f6e;
    flex-shrink: 0;
}

.ec-types__subtitle-text {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: none;
    color: #1a1f6e;
}

.ec-types__title {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--bn-primary);
    line-height: 1.25;
    margin: 0 0 20px 0;
}

.ec-types__desc {
    font-size: 1.6rem;
    color: #1E232D;
    margin-bottom: 40px;
}

.ec-types__grid {
    text-align: left;
}

.ec-types__col {
    margin-bottom: 30px;
}

.ec-types__card {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: transform 0.3s ease;
}

.ec-types__card:hover {
    transform: translateY(-5px);
}

.ec-types__img-wrap {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.ec-types__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ec-types__card:hover .ec-types__img {
    transform: scale(1.05);
}

.ec-types__card-body {
    padding: 24px;
}

.ec-types__card-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bn-primary);
    margin: 0 0 12px 0;
}

.ec-types__card-desc {
    font-size: 1.6rem;
    color: #1E232D;
    line-height: 1.6;
}

/* ---- Section 6: Can't Find Ideal ---- */
.ec-cta-banner {
    position: relative;
    padding: 80px 0;
    background-color: #222;
    background-image: url('../images/bg-pattern.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.ec-cta-banner__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
}

.ec-cta-banner__container {
    position: relative;
    z-index: 2;
}

.ec-cta-banner__inner {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.ec-cta-banner__title {
    font-size: 3.2rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.3;
    margin: 0 0 20px 0;
}

.ec-cta-banner__desc {
    font-size: 1.6rem;
    color: #ddd;
    margin-bottom: 30px;
}

.ec-cta-banner__btn {
    display: inline-block;
    padding: 16px 40px;
    background-color: var(--bn-primary);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.ec-cta-banner__btn:hover {
    background-color: #13165a;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(26, 31, 110, 0.4);
}

/* ---- Section 7: Features ---- */
.ec-features {
    padding: 60px 0;
    background-color: #fff;
}

.ec-features__inner {
    text-align: center;
}

.ec-features__subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ec-features__subtitle-line {
    display: inline-block;
    width: 40px;
    height: 2px;
    background-color: #1a1f6e;
    flex-shrink: 0;
}

.ec-features__subtitle-text {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: none;
    color: #1a1f6e;
}

.ec-features__title {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--bn-primary);
    line-height: 1.25;
    margin: 0 0 20px 0;
}

.ec-features__desc {
    font-size: 1.6rem;
    color: #1E232D;
    margin-bottom: 50px;
}

.ec-features__grid {
    text-align: left;
}

.ec-features__col {
    margin-bottom: 16px;
}

.ec-feature-item {
    border: none;
    background: transparent;
}

.ec-feature-item__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 10px 0;
    user-select: none;
}

.ec-feature-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 900;
    color: #1a1f6e;
    width: 24px;
    height: 24px;
    line-height: 1;
    margin-top: -2px;
}

.ec-feature-item__header.collapsed .ec-feature-item__icon::before {
    content: '+';
}

.ec-feature-item__header:not(.collapsed) .ec-feature-item__icon::before {
    content: '-';
}

.ec-feature-item__title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--bn-primary);
    margin: 0;
}

.ec-feature-item__body {
    padding: 10px 0 20px 36px;
    font-size: 1.6rem;
    color: #1E232D;
    line-height: 1.6;
}

.ec-features__btn {
    display: inline-block;
    padding: 14px 36px;
    background-color: #1a1f6e;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
}

.ec-features__btn:hover {
    background-color: #13165a;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(26, 31, 110, 0.35);
}

.ec-products__btn:hover {
    background-color: #13165a;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(26, 31, 110, 0.35);
}

/* ---- Section 8: Advantages ---- */
.ec-adv {
    padding: 60px 0 80px;
    background-color: #f5f5f7;
}

.ec-adv__title {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--bn-primary);
    margin-bottom: 40px;
}

.ec-adv__card {
    background: #fff;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    height: 100%;
}

.ec-adv__icon-wrap {
    height: 60px;
    margin-bottom: 20px;
}

.ec-adv__icon {
    max-height: 100%;
    width: auto;
}

.ec-adv__card-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bn-primary);
    margin: 0 0 16px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.ec-adv__card-desc {
    font-size: 1.6rem;
    color: #1E232D;
    line-height: 1.7;
}

.ec-adv__swiper {
    padding-bottom: 20px;
}

.ec-adv__nav-wrap {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

.ec-adv__prev,
.ec-adv__next {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #ccc;
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 0;
}

.ec-adv__prev:hover,
.ec-adv__next:hover {
    background-color: #1a1f6e;
}

.ec-adv__prev::after {
    font-family: 'swiper-icons' !important;
    content: 'prev' !important;
    font-size: 16px;
    color: #fff;
}

.ec-adv__next::after {
    font-family: 'swiper-icons' !important;
    content: 'next' !important;
    font-size: 16px;
    color: #fff;
}

/* ---- Section 9: Applications ---- */
.ec-app {
    padding: 60px 0;
    background-color: #fff;
}

.ec-app__subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ec-app__subtitle-line {
    display: inline-block;
    width: 40px;
    height: 2px;
    background-color: #1a1f6e;
    flex-shrink: 0;
}

.ec-app__subtitle-text {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: none;
    color: #1a1f6e;
}

.ec-app__title {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--bn-primary);
    line-height: 1.25;
    margin: 0 0 20px 0;
}

.ec-app__slider-wrap {
    position: relative;
    padding: 0 50px;
}

.ec-app__card {
    text-align: center;
    background: #fff;
    padding-bottom: 20px;
    border-bottom: 4px solid transparent;
    transition: border-color 0.3s;
}

.ec-app__card:hover {
    border-bottom-color: #1a1f6e;
}

.ec-app__img-wrap {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    margin-bottom: 24px;
}

.ec-app__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.ec-app__card:hover .ec-app__img {
    transform: scale(1.05);
}

.ec-app__card-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bn-primary);
    margin: 0 0 12px 0;
}

.ec-app__card-desc {
    font-size: 1.6rem;
    color: #1E232D;
    line-height: 1.6;
    padding: 0 15px;
}

.ec-app__prev,
.ec-app__next {
    width: 40px;
    height: 40px;
    background-color: #7b83b3;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s;
    margin-top: 0;
}

.ec-app__prev:hover,
.ec-app__next:hover {
    background-color: #1a1f6e;
}

.ec-app__prev {
    left: 0;
}

.ec-app__next {
    right: 0;
}

.ec-app__prev::after {
    font-family: 'swiper-icons' !important;
    content: 'prev' !important;
    font-size: 20px;
    color: #fff;
}

.ec-app__next::after {
    font-family: 'swiper-icons' !important;
    content: 'next' !important;
    font-size: 20px;
    color: #fff;
}

/* ---- Section 10: Visit ---- */
.ec-visit {
    padding: 60px 0;
    background-color: #fcfcfc;
}

.ec-visit__subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ec-visit__subtitle-line {
    display: inline-block;
    width: 40px;
    height: 2px;
    background-color: #1a1f6e;
    flex-shrink: 0;
}

.ec-visit__subtitle-text {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: none;
    color: #1a1f6e;
}

.ec-visit__title {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--bn-primary);
    line-height: 1.25;
    margin: 0 0 20px 0;
}

.ec-visit__desc {
    font-size: 1.6rem;
    color: #1E232D;
    line-height: 1.8;
}

.ec-visit__btn {
    display: inline-block;
    padding: 14px 36px;
    background-color: var(--bn-primary);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
}

.ec-visit__btn:hover {
    background-color: #13165a;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(26, 31, 110, 0.35);
}

.ec-visit__row {
    margin-top: 60px;
}

.ec-visit__card-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bn-primary);
    margin: 0 0 15px 0;
}

.ec-visit__card-desc {
    font-size: 1.6rem;
    color: #1E232D;
    line-height: 1.7;
}

.ec-visit__video-wrap {
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

/* ---- Section 11: Process ---- */
.ec-process {
    padding: 80px 0;
    background-color: #1a1f6e;
    color: #fff;
}

.ec-process__title {
    font-size: 3.2rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 50px;
}

.ec-process__card {
    text-align: center;
    padding: 0 15px;
    height: 100%;
    position: relative;
}

/* Vertical separators */
@media (min-width: 992px) {
    .ec-process__row>div:not(:nth-child(4n)):not(:last-child) .ec-process__card::after {
        content: '';
        position: absolute;
        top: 10%;
        right: 0;
        height: 80%;
        width: 1px;
        background-color: rgba(255, 255, 255, 0.3);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .ec-process__row>div:not(:nth-child(3n)):not(:last-child) .ec-process__card::after {
        content: '';
        position: absolute;
        top: 10%;
        right: 0;
        height: 80%;
        width: 1px;
        background-color: rgba(255, 255, 255, 0.3);
    }
}

.ec-process__icon-wrap {
    height: 60px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ec-process__icon {
    max-height: 100%;
    width: auto;
    filter: brightness(0) invert(1);
}

.ec-process__step {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: #fff;
}

.ec-process__desc {
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.ec-process__btn {
    display: inline-block;
    padding: 14px 36px;
    background-color: #fff;
    color: var(--bn-primary);
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
}

.ec-process__btn:hover {
    background-color: #f0f0f0;
    color: #111;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

/* ---- Section 12: FAQ ---- */
.ec-faq {
    padding: 80px 0;
    background-color: #fafafa;
}

.ec-faq__header {
    max-width: 800px;
    margin: 0 auto 50px;
}

.ec-faq__subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ec-faq__subtitle-line {
    display: inline-block;
    width: 40px;
    height: 1px;
    background-color: #1a1f6e;
    flex-shrink: 0;
}

.ec-faq__subtitle-text {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: none;
    color: #1a1f6e;
}

.ec-faq__title {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--bn-primary);
    margin-bottom: 20px;
}

.ec-faq__desc {
    font-size: 1.6rem;
    color: #1E232D;
    line-height: 1.8;
}

.ec-faq__box {
    background-color: #fff;
    padding: 40px;
    border-radius: 4px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.03);
    height: 100%;
}

.ec-faq__col-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bn-primary);
    margin-bottom: 30px;
}

.ec-faq-item {
    border-bottom: 1px solid #f0f0f0;
    padding: 20px 0;
}

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

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

.ec-faq-item__header {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    user-select: none;
}

.ec-faq-item__q {
    font-size: 1.6rem;
    font-weight: 700;
    color: #111;
    margin-right: 15px;
    flex-shrink: 0;
}

.ec-faq-item__title {
    font-size: 1.6rem;
    font-weight: 500;
    color: #333;
    margin: 0;
    flex-grow: 1;
    line-height: 1.5;
    padding-right: 15px;
    transition: color 0.3s;
}

.ec-faq-item__header:not(.collapsed) .ec-faq-item__title {
    font-weight: 700;
    color: #1a1f6e;
}

.ec-faq-item__icon {
    width: 20px;
    height: 20px;
    position: relative;
    flex-shrink: 0;
    margin-top: 3px;
}

.ec-faq-item__icon::before,
.ec-faq-item__icon::after {
    content: '';
    position: absolute;
    background-color: #111;
    transition: transform 0.3s ease;
}

.ec-faq-item__icon::before {
    top: 9px;
    left: 2px;
    width: 16px;
    height: 2px;
}

.ec-faq-item__icon::after {
    top: 2px;
    left: 9px;
    width: 2px;
    height: 16px;
}

.ec-faq-item__header:not(.collapsed) .ec-faq-item__icon::after {
    transform: scaleY(0);
}

.ec-faq-item__header:not(.collapsed) .ec-faq-item__icon::before {
    background-color: #1a1f6e;
}

.ec-faq-item__body {
    display: flex;
    align-items: flex-start;
    padding-top: 15px;
}

.ec-faq-item__a {
    font-size: 1.6rem;
    font-weight: 700;
    color: #aaa;
    margin-right: 15px;
    flex-shrink: 0;
}

.ec-faq-item__content {
    font-size: 1.6rem;
    color: #1E232D;
    line-height: 1.7;
    margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .ec-intro {
        padding: 40px 0;
    }

    .ec-intro__img-col {
        margin-bottom: 30px;
    }

    .ec-intro__content {
        padding-left: 0;
    }

    .ec-intro__title,
    .ec-spec__title,
    .ec-products__title,
    .ec-types__title,
    .ec-features__title,
    .ec-adv__title,
    .ec-app__title,
    .ec-visit__title,
    .ec-process__title,
    .ec-faq__title {
        font-size: 2.6rem;
    }

    .ec-choose__title {
        font-size: 2.4rem;
    }

    .ec-cta-banner__title {
        font-size: 2.8rem;
    }

    .ec-spec__table table td,
    .ec-spec__table table th {
        padding: 10px 15px;
    }
}

@media (max-width: 767px) {
    .menu-container {
        float: right;
    }

    .ec-intro {
        padding: 30px 0;
    }

    .ec-intro__title,
    .ec-spec__title,
    .ec-products__title,
    .ec-types__title,
    .ec-features__title,
    .ec-adv__title,
    .ec-app__title,
    .ec-visit__title,
    .ec-process__title,
    .ec-faq__title {
        font-size: 2.2rem;
        margin-bottom: 20px;
    }

    .ec-intro__subtitle-text,
    .ec-spec__subtitle-text,
    .ec-products__subtitle-text,
    .ec-types__subtitle-text,
    .ec-features__subtitle-text,
    .ec-app__subtitle-text,
    .ec-visit__subtitle-text {
        font-size: 1.1rem;
        letter-spacing: 1px;
    }

    .ec-intro__desc,
    .ec-types__desc,
    .ec-features__desc,
    .ec-visit__desc {
        font-size: 1.4rem;
        margin-bottom: 24px;
    }

    .ec-intro__btn,
    .ec-choose__btn,
    .ec-spec__btn,
    .ec-products__btn,
    .ec-cta-banner__btn,
    .ec-features__btn {
        padding: 12px 24px;
        font-size: 1.3rem;
        width: 100%;
        text-align: center;
    }

    .ec-desc {
        padding: 30px 0;
    }

    .ec-desc__title {
        font-size: 2rem;
    }

    .ec-desc__text {
        font-size: 1.3rem;
    }

    .ec-choose {
        padding: 40px 0;
    }

    .ec-choose__title {
        font-size: 2rem;
        margin-bottom: 24px;
    }

    .ec-choose__col {
        margin-bottom: 16px;
    }

    .ec-choose__card-body {
        padding: 18px 16px;
    }

    .ec-choose__card-title {
        font-size: 1.5rem;
    }

    .ec-choose__card-desc {
        font-size: 1.6rem;
    }

    .ec-choose__cta,
    .ec-spec__cta,
    .ec-products__cta,
    .ec-features__cta {
        margin-top: 24px;
    }

    .ec-cta-banner {
        padding: 50px 0;
    }

    .ec-cta-banner__title {
        font-size: 2.2rem;
    }

    .ec-spec__table table td,
    .ec-spec__table table th {
        padding: 8px 12px;
        font-size: 1.3rem;
    }
}

/* Footer Contact Section */
.footer-contact-section {
    position: relative;
    background: url('../img/bg_contact.png') no-repeat center center / cover;
    padding: 96px 0;
    z-index: 1;
    overflow: hidden;
}

.footer-contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

.contact-box {
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.04), 0px 20px 25px -5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.contact-info-panel {
    background-color: #111111;
    padding: 64px;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.contact-info-panel .blur-overlay-bg {
    position: absolute;
    right: -64px;
    top: -64px;
    width: 256px;
    height: 256px;
    background-color: rgba(1, 22, 115, 0.5);
    filter: blur(32px);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.info-content-wrap {
    position: relative;
    z-index: 2;
}

.contact-info-title {
    font-weight: 700;
    font-size: 32px;
    line-height: 1.3;
    color: #FFFFFF;
    margin-bottom: 16px;
    text-transform: none;
}

.contact-info-desc {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #DBEAFE;
    margin-bottom: 48px;
}

.contact-details-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-detail-item {
    gap: 16px;
}

.detail-icon-box {
    width: 32px;
    height: 32px;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1D1D1F;
    font-size: 14px;
    flex-shrink: 0;
}

.detail-text {
    font-weight: 510;
    font-size: 16px;
    line-height: 1.5;
    color: #FFFFFF;
}

.contact-info-panel .info-bottom {
    margin-top: 64px;
}

.contact-info-panel .divider-line {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin-bottom: 24px;
}

.satisfied-customers {
    gap: 16px;
}

.avatar-stack {
    display: flex;
    align-items: center;
}

.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #0F2B5C;
    overflow: hidden;
    margin-right: -12px;
    position: relative;
    background: #FFFFFF;
    flex-shrink: 0;
}

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

.count-circle {
    background-color: #011673;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 10px;
    border: 2px solid #0F2B5C;
}

.count-circle span {
    margin-right: 0;
}

.satisfied-text {
    display: flex;
    flex-direction: column;
}

.satisfied-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    color: #FFFFFF;
}

.satisfied-subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.3;
    color: #BFDBFE;
}

.contact-form-panel {
    padding: 64px;
    background-color: #FFFFFF;
}

.contact-ajax-form .form-label {
    font-weight: 400;
    font-size: 17px;
    color: #1D1D1F;
    margin-bottom: 8px;
    display: inline-block;
}

.contact-ajax-form .required-star {
    color: #E9272C;
    margin-left: 2px;
}

.contact-ajax-form .form-control {
    background-color: #F5F5F7;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    height: 48px;
    padding: 12px 16px;
    font-weight: 510;
    font-size: 17px;
    color: #1D1D1F;
    transition: all 0.3s ease;
}

.contact-ajax-form .form-control:focus {
    background-color: #FFFFFF;
    border-color: #011673;
    box-shadow: 0 0 0 3px rgba(1, 22, 115, 0.1);
    outline: none;
}

.contact-ajax-form .text-area-requirement {
    height: 120px !important;
    resize: none;
}

.btn-submit-contact {
    background-color: #E9272C;
    color: #FFFFFF;
    font-weight: 510;
    font-size: 16px;
    height: 48px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-submit-contact:hover {
    background-color: #c92024;
    color: #FFFFFF;
    transform: translateY(-1px);
}

.btn-submit-contact:active {
    transform: translateY(0);
}

.form-policy-note {
    font-weight: 400;
    font-size: 16px;
    color: #64748B;
    margin-top: 16px;
    line-height: 1.35;
}

/* Responsive adjustments for Footer Contact Section */
@media (max-width: 1199px) {
    .footer-contact-section {
        padding: 80px 0;
    }

    .contact-info-panel,
    .contact-form-panel {
        padding: 48px;
    }

    .contact-info-title {
        font-size: 28px;
    }
}

@media (max-width: 991px) {
    .footer-contact-section {
        padding: 60px 0;
    }

    .contact-info-panel,
    .contact-form-panel {
        padding: 40px;
    }

    .contact-info-desc {
        margin-bottom: 32px;
    }

    .contact-info-panel .info-bottom {
        margin-top: 48px;
    }
}

@media (max-width: 767px) {
    .footer-contact-section {
        padding: 40px 0;
    }

    .contact-info-panel,
    .contact-form-panel {
        padding: 24px;
    }

    .contact-info-title {
        font-size: 24px;
    }

    .contact-info-desc {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .detail-text {
        font-size: 15px;
    }

    .btn-submit-contact {
        font-size: 16px;
    }

    .form-policy-note {
        font-size: 13px;
    }

    .satisfied-customers {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .avatar-stack {
        margin-bottom: 8px;
    }
}

/* Footer Main Section */
.footer-main-section {
    position: relative;
    background-color: #F5F5F7;
    background-repeat: no-repeat;
    background-position: -18% 45%;
    /* background-size: contain; */
    padding: 96px 0 48px;
    overflow: hidden;
    z-index: 1;
}

@media (min-width: 1200px) {
    .footer-main-section .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .footer-main-section .container {
        max-width: 1320px;
    }
}

@media (min-width: 1600px) {
    .footer-main-section .container {
        max-width: 1520px;
    }
}

@media (min-width: 1800px) {
    .footer-main-section .container {
        max-width: 1700px;
    }
}

.footer-bg-logo-deco {
    position: absolute;
    right: 5%;
    bottom: 5%;
    width: 515px;
    height: 446px;
    background: url('../img/logo.png') no-repeat center center / contain;
    opacity: 0.02;
    pointer-events: none;
    z-index: -1;
}

.footer-logo-img {
    height: 78px;
    max-width: 272px;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 24px;
}

.footer-title-slogan-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer-company-title {
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    color: #1E232D;
    margin: 0 0 6px 0;
    text-transform: none;
}

.footer-company-slogan {
    font-weight: 590;
    font-size: 18px;
    line-height: 1.3;
    color: #1E232D;
    margin: 0;
}

.footer-contact-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-contact-detail-item {
    gap: 12px;
    color: #1E232D;
}

.footer-contact-detail-item .detail-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #011673;
    font-size: 16px;
    flex-shrink: 0;
}

.footer-contact-detail-item .detail-content {
    font-weight: 510;
    font-size: 16px;
    line-height: 1.5;
    color: #1E232D;
}

.footer-left-panel .footer-newsletter-wrap {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    padding: 32px;
    border-radius: 24px;
    max-width: 608px;
    overflow: hidden;
    z-index: 1;
}

.footer-left-panel .footer-newsletter-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(19, 19, 19, 0.6);
    z-index: -1;
}

.footer-left-panel .newsletter-headline {
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    margin-bottom: 16px;
    text-transform: none;
    display: inline-block;
}

.footer-newsletter-form {
    background-color: #F5F5F7;
    border: 1px solid #0223B5;
    border-radius: 40px;
    padding: 4px 4px 4px 24px;
    height: 54px;
    width: 100%;
    box-sizing: border-box;
}

.footer-newsletter-form .form-control {
    border: none;
    background: transparent;
    height: 100%;
    padding: 0;
    font-weight: 400;
    font-size: 15px;
    color: #1E232D;
    flex: 1;
}

.footer-newsletter-form .form-control:focus {
    box-shadow: none;
    outline: none;
    border: none;
    background: transparent;
}

.btn-newsletter-submit {
    background-color: #E9272C;
    color: #FFFFFF;
    font-weight: 510;
    font-size: 17px;
    height: 46px;
    padding: 0 24px;
    border-radius: 24px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.btn-newsletter-submit:hover {
    background-color: #c92024;
    color: #FFFFFF;
}

.footer-right-panel {
    padding-left: 48px;
}

.footer-menus-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 32px 48px !important;
    justify-content: initial !important;
    align-items: flex-start !important;
}

.footer-menu-column {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
}

.footer-menu-headline {
    font-weight: 700;
    font-size: 18px;
    color: #1D1D1F;
    margin-bottom: 24px;
    text-transform: none;
    display: block;
}

.footer-menu-items-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-menu-items-list a {
    font-weight: 510;
    font-size: 14px;
    color: #1D1D1F;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-menu-items-list a:hover {
    color: #011673;
}

@media (max-width: 991px) {
    .footer-menus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 32px 40px !important;
    }
}

@media (max-width: 575px) {
    .footer-menus-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
}

.footer-map-container {
    margin-top: 32px;
}

.footer-map-frame-wrap {
    border: 2px solid #DBDBDB;
    border-radius: 8px;
    overflow: hidden;
    height: 230px;
}

.footer-map-frame-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.footer-bottom-divider {
    height: 1px;
    background-color: #64748B;
    opacity: 0.2;
    margin: 48px 0 24px;
}

.footer-bottom-row {
    gap: 20px;
}

.copyright-text {
    font-weight: 700;
    font-size: 20px;
    color: #1D1D1F;
    margin: 0;
}

.footer-bottom-actions {
    gap: 24px;
}

.footer-compliance-badges {
    gap: 16px;
}

.compliance-badge-img {
    height: 57px;
    object-fit: contain;
}

.footer-social-group {
    gap: 16px;
}

.social-icon-btn {
    width: 56px;
    height: 56px;
    background-color: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.08);
    color: #1D1D1F;
    font-size: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon-btn:hover {
    background-color: #011673;
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* Responsive adjustments for Footer Main */
@media (max-width: 1199px) {
    .footer-main-section {
        padding: 80px 0 40px;
    }

    .footer-company-title {
        font-size: 28px;
    }

    .footer-right-panel {
        padding-left: 1.5rem;
        margin-top: 40px;
    }

    .footer-bg-logo-deco {
        width: 400px;
        height: 346px;
    }
}

@media (max-width: 991px) {
    .footer-main-section {
        padding: 60px 0 30px;
    }

    .footer-company-title {
        font-size: 24px;
    }

    .footer-company-slogan {
        font-size: 16px;
    }

    .footer-logo-img {
        height: 60px;
        margin-right: 16px;
    }
}

@media (max-width: 767px) {
    .footer-main-section {
        padding: 40px 0 20px;
    }

    .footer-identity-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .footer-company-title {
        font-size: 20px;
    }

    .footer-contact-detail-item .detail-content {
        font-size: 15px;
    }

    .footer-left-panel .footer-newsletter-wrap {
        padding: 20px;
        border-radius: 16px;
    }

    .footer-left-panel .newsletter-headline {
        font-size: 18px;
    }

    .footer-newsletter-form {
        padding: 4px 4px 4px 16px;
        height: 48px;
    }

    .btn-newsletter-submit {
        height: 40px;
        padding: 0 16px;
        font-size: 14px;
    }

    .footer-menu-column {
        min-width: 120px;
    }

    .footer-menu-headline {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .footer-menu-items-list a {
        font-size: 15px;
    }

    .copyright-text {
        font-size: 16px;
    }

    .social-icon-btn {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .compliance-badge-img {
        height: 45px;
    }

    .footer-bottom-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .footer-bottom-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

/* ============================================= */
/* Header Contact Bar Styles                     */
/* ============================================= */
.header-contact-bar {
    background-color: #010F4F;
    height: 32px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 510;
    width: 100%;
}

.header-contact-bar a {
    color: #FFFFFF;
    text-decoration: none;
    transition: all 0.3s ease;
}

.header-contact-bar a:hover {
    color: #E9272C;
}

.header-contact-inner {
    width: 100%;
}

.header-contact-info-group {
    gap: 24px;
}

.header-contact-item {
    gap: 8px;
}

.header-contact-item .contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.header-contact-item .contact-text {
    line-height: 1.35;
}

.header-contact-divider {
    display: inline-block;
    width: 1px;
    height: 18px;
    background-color: #64748B;
    margin: 0 16px;
    opacity: 0.8;
}

.header-contact-socials {
    gap: 12px;
}

.header-social-item {
    font-size: 16px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-social-item:hover {
    transform: scale(1.15);
}

/* Responsive adjustments for Header Contact Bar */
@media (max-width: 767px) {
    .header-contact-bar {
        display: none;
    }
}

/* ============================================= */
/* Header Navigation Menu Styles                 */
/* ============================================= */
@media (min-width: 1200px) {
    .menu-container {
        display: flex !important;
        align-items: center;
    }

    .menu-container .menu-section {
        display: block !important;
        position: static !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        width: auto !important;
        height: auto !important;
    }

    .menu-container .menu-section>ul {
        display: flex !important;
        align-items: center !important;
        flex-direction: row !important;
        gap: 25px !important;
        /* Khoảng cách giữa các menu item */
        margin: 0 !important;
        padding: 0 !important;
        flex-wrap: nowrap !important;
    }

    .menu-container .menu-section>ul>li {
        position: relative !important;
        list-style: none !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .menu-container .menu-section>ul>li>a {
        font-weight: 510 !important;
        font-size: 16px !important;
        color: #FFFFFF !important;
        /* Ép màu chữ trắng trên nền tối */
        text-transform: none !important;
        text-decoration: none !important;
        padding: 8px 0 !important;
        transition: color 0.3s ease !important;
        display: inline-flex !important;
        align-items: center !important;
        position: relative !important;
        gap: 6px !important;
        white-space: nowrap !important;
        /* Chống xuống hàng chữ menu */
    }

    .menu-container .menu-section>ul>li>a span.fa-chevron-down {
        font-size: 12px !important;
        margin-left: 2px !important;
        color: #FFFFFF !important;
        transition: color 0.3s ease !important;
    }

    /* Hiệu ứng gạch dưới cho Menu khi hover hoặc active */
    .menu-container .menu-section>ul>li>a::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 0 !important;
        height: 2px !important;
        background-color: #E9272C !important;
        transition: width 0.3s ease !important;
    }

    .menu-container .menu-section>ul>li:hover>a {
        color: #E9272C !important;
    }

    .menu-container .menu-section>ul>li:hover>a span.fa-chevron-down {
        color: #E9272C !important;
    }

    .menu-container .menu-section>ul>li:hover>a::after,
    .menu-container .menu-section>ul>li.active>a::after {
        width: 100% !important;
    }
}

/* ============================================= */
/* Header Search Hover Popup & CTA Styles        */
/* ============================================= */
.header-nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-search-wrap {
    position: relative;
}

.btn-search-trigger {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    color: #FFFFFF;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-search-trigger:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #E9272C;
}

.header-search-popup {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 12px;
    width: 320px;
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
}

/* Hover hoặc ô tìm kiếm được focus thì mở popup */
.header-search-wrap:hover .header-search-popup,
.header-search-popup:focus-within {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-search-popup form {
    width: 100%;
    position: relative;
}

.header-search-popup input.form-control {
    width: 100%;
    height: 40px;
    padding: 0 40px 0 12px;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    font-size: 14px;
    color: #1E293B;
    background-color: #F8FAFC;
}

.header-search-popup input.form-control:focus {
    outline: none;
    border-color: #010F4F;
    box-shadow: none;
    background-color: #FFFFFF;
}

.btn-search-submit {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #64748B;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.btn-search-submit:hover {
    color: #E9272C;
}

.btn-header-cta {
    height: 44px;
    padding: 0 32px;
    background-color: #E9272C;
    color: #FFFFFF;
    font-weight: 510;
    font-size: 17px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    white-space: nowrap;
}

.btn-header-cta:hover {
    background-color: #c92024;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(233, 39, 44, 0.35);
}

/* Tablet: ưu tiên logo, nút mở menu và cụm thao tác header. */
@media (min-width: 768px) and (max-width: 1199px) {
    .menu_header .container > .row {
        align-items: center;
    }

    .menu_header .container > .row > .col-md-2:first-child {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .menu_header .container > .row > .col-md-8 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .menu_header .container > .row > .col-md-2:last-child {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .menu_header .logo-section {
        display: flex;
        align-items: center;
        min-height: 52px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .menu_header .logo-section img {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 44px;
        object-fit: contain;
    }

    .menu_header .menu-container {
        display: flex;
        justify-content: flex-start;
    }

    .menu_header .header-nav-actions {
        justify-content: flex-end;
    }
}

/* ============================================= */
/* Sticky Header (Fixed when scrolling)          */
/* ============================================= */
.menu_header.fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    background-color: #313131 !important;
    /* Giữ màu xám đậm của header */
    animation: slideHeaderDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes slideHeaderDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Contact form success notice */
.contact-success-notice-wrap {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.contact-success-notice-wrap.is-visible {
    opacity: 1;
    visibility: visible;
}

.contact-success-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 720px;
    padding: 14px 18px;
    background-color: #FFFFFF;
    border-radius: 6px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    color: #333333;
    font-size: 17px;
    line-height: 1.45;
    transform: translateY(8px);
    transition: transform 0.25s ease;
}

.contact-success-notice-wrap.is-visible .contact-success-notice {
    transform: translateY(0);
}

.contact-success-notice-icon {
    width: 18px;
    height: 18px;
    border: 1px solid #FF9F43;
    border-radius: 50%;
    color: #FF9F43;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
}

.contact-success-notice-text {
    display: block;
}

@media (max-width: 767px) {
    .contact-success-notice {
        font-size: 14px;
        padding: 12px 14px;
    }
}

/* ==========================================================================
   PRODUCT DETAIL CUSTOMIZATION (TÙY CHỈNH CHI TIẾT SẢN PHẨM)
   ========================================================================== */
.product-content-detail .product-title-detail {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3em;
    color: #1E232D;
    margin-bottom: 16px;
}

.product-desc-detail {
    font-size: 16px;
    line-height: 1.6em;
    color: #555c68;
}

/* Số lượng (Quantity) */
.product-qty-action-wrap .qty-wrap {
    display: flex;
    align-items: center;
}

.product-qty-action-wrap .qty-label {
    font-size: 15px;
    font-weight: 500;
    color: #64748B;
}

.product-quantity {
    display: flex;
    align-items: center;
    border: 1px solid #E2E8F0;
    border-radius: 4px;
    overflow: hidden;
    background: #FFFFFF;
}

.product-quantity .btn-quantity {
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: #F8FAFC;
    color: #1E232D;
    transition: all 0.2s ease;
}

.product-quantity .btn-quantity:hover {
    background: #E2E8F0;
}

.product-quantity input.number-input {
    width: 54px;
    height: 38px;
    border: none;
    border-left: 1px solid #E2E8F0;
    border-right: 1px solid #E2E8F0;
    text-align: center;
    outline: none;
    font-size: 16px;
    font-weight: 500;
    color: #1E232D;
}

/* Nút Inquire & Add to Basket */
.action-buttons-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
}

.btn-inquire {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    padding: 0 32px;
    background-color: #011673;
    /* Màu xanh Navy đậm của Binhnam */
    color: #FFFFFF !important;
    font-weight: 600;
    font-size: 16px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(1, 22, 115, 0.15);
}

.btn-inquire:hover {
    background-color: #000c40;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(1, 22, 115, 0.25);
}

.btn-add-basket {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    padding: 0 32px;
    background-color: #3498db;
    /* Màu xanh dương sáng */
    color: #FFFFFF !important;
    font-weight: 600;
    font-size: 16px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
}

.btn-add-basket:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(52, 152, 219, 0.25);
}

/* Thumbs Swiper và Mũi tên active */
.product-image-detail [nh-slider-thumbs] {
    padding-top: 12px;
    margin-top: 8px;
    overflow: visible !important;
}

.product-image-detail .swiper-slide {
    border: 1px solid #E2E8F0;
    border-radius: 4px;
    overflow: visible !important;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.product-image-detail .swiper-slide .ratio-1-1 {
    border-radius: 3px;
    overflow: hidden;
}

.product-image-detail .swiper-slide::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #E2E8F0 transparent;
    z-index: 4;
    transition: all 0.3s ease;
}

.product-image-detail .swiper-slide-thumb-active {
    border: 2px solid #011673 !important;
}

.product-image-detail .swiper-slide-thumb-active::after {
    border-color: transparent transparent #011673 transparent;
    z-index: 5;
}

/* Share to */
.product-share-to {
    border-top: 1px solid #F1F5F9;
    padding-top: 24px;
}

.product-share-to .share-label {
    font-size: 15px;
    font-weight: 500;
    color: #64748B;
}

.product-share-to .social-icon-btn {
    width: 36px;
    height: 36px;
    font-size: 14px;
    background-color: var(--color-highlight);
    color: #FFFFFF;
    border: 1px solid var(--color-highlight);
    margin-right: 8px;
}

.product-share-to .social-icon-btn:hover {
    background-color: #FFFFFF;
    color: var(--color-highlight);
    border: 1px solid var(--color-highlight);
}


/* Tabs chi tiết sản phẩm */
.product-detail-footer {
    margin-top: 64px !important;
}

.product-detail-footer .nav {
    justify-content: flex-start !important;
    background-color: #efefef !important;
    border: 1px solid #E2E8F0 !important;
    padding: 0 !important;
    border-radius: 4px 4px 0 0;
}

.product-detail-footer .nav li.nav-item {
    margin: 0;
}

.product-detail-footer .nav li a {
    font-size: 16px;
    text-transform: capitalize !important;
    font-weight: 600;
    color: #475569 !important;
    padding: 14px 28px !important;
    border: 1px solid transparent !important;
    border-bottom: none !important;
    border-radius: 4px 4px 0 0;
    background: transparent;
    display: block;
    position: relative;
    transition: all 0.3s ease;
    margin-right: 4px;
}

.product-detail-footer .nav li a::before {
    display: none !important;
    /* Bỏ mũi tên chéo cũ */
}

.product-detail-footer .nav li a.active {
    color: #011673 !important;
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 #E2E8F0 #FFFFFF #E2E8F0 !important;
    border-style: solid !important;
    border-width: 1px 1px 1px 1px !important;
    margin-bottom: -1px !important;
    z-index: 2 !important;
}

.product-detail-footer .tab-content {
    border: 1px solid #E2E8F0;
    border-top: none;
    border-radius: 0 0 4px 4px;
}

.product-detail-footer .product-content-inner {
    background-color: #FFFFFF !important;
    padding: 40px !important;
}

.product-detail-footer .product-content-inner h1,
.product-detail-footer .product-content-inner h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1E232D;
    margin-bottom: 24px;
}

/* Responsive cho Mobile */
@media (max-width: 991.98px) {
    .product-content-detail .product-title-detail {
        font-size: 24px;
    }

    .action-buttons-wrap {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .btn-inquire,
    .btn-add-basket {
        width: 100%;
    }

    .product-detail-footer .product-content-inner {
        padding: 24px !important;
    }
}

/* ============================================= */
/* Project Detail (view_du_an) Custom Styles     */
/* ============================================= */

/* 1. Project Banner Section */
.project-banner-section {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 0;
}

.project-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
}

.project-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #FFFFFF;
}

.project-banner-title {
    font-size: 64px;
    font-weight: 800;
    text-transform: none;
    margin-bottom: 20px;
    letter-spacing: 1px;
    line-height: 1.25;
}

.project-banner-breadcrumbs {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.project-banner-breadcrumbs a {
    color: #DBEAFE;
    text-decoration: none;
    transition: color 0.3s ease;
}

.project-banner-breadcrumbs a:hover {
    color: #E9272C;
}

.project-banner-breadcrumbs i {
    font-size: 12px;
    color: #BFDBFE;
}

.project-banner-breadcrumbs span {
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

/* 2. Project Slider Section (gioithieu) */
.project-slider-section {
    padding: 80px 0 0px 0;
    background-color: #FFFFFF;
}

.project-slider-section .section-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 16px;
}

.project-slider-section .section-subtitle .subtitle-line {
    display: inline-block;
    width: 40px;
    height: 2px;
    background-color: #011673;
    flex-shrink: 0;
}

.project-slider-section .section-subtitle .subtitle-text {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #011673;
    text-transform: none;
}

.project-slider-section .section-title {
    font-size: 32px;
    font-weight: 800;
    color: #111111;
    text-align: center;
    line-height: 1.3;
    margin: 0 auto 50px auto;
}

.project-swiper {
    padding-bottom: 40px;
    position: relative;
}

.project-swiper .swiper-slide {
    text-align: center;
}

.project-swiper .slide-image-wrap {
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

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

.project-swiper .swiper-slide:hover .slide-image-wrap img {
    transform: scale(1.02);
}

.project-swiper .slide-caption {
    font-size: 20px;
    font-weight: 500;
    color: #1E232D;
    margin-top: 15px;
    margin-bottom: 0;
}

/* Swiper navigation buttons */
.project-swiper .swiper-button-next,
.project-swiper .swiper-button-prev {
    width: 44px;
    height: 44px;
    background-color: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    color: #011673;
    transition: all 0.3s ease;
}

.project-swiper .swiper-button-next:hover,
.project-swiper .swiper-button-prev:hover {
    background-color: #011673;
    color: #FFFFFF;
}

.project-swiper .swiper-button-next::after,
.project-swiper .swiper-button-prev::after {
    font-size: 16px;
    font-weight: bold;
}

/* 3. Project Process Section (quatrinh) */
.project-process-section {
    padding: 80px 0;
    background-color: #F8FAFC;
}

.project-process-section .process-row {
    display: flex;
    align-items: center;
    margin-bottom: 80px;
}

.project-process-section .process-row:last-child {
    margin-bottom: 0;
}

.project-process-section .process-content-col {
    padding: 0 40px;
}

.project-process-section .process-image-col {
    padding: 0 40px;
}

.project-process-section .process-content {
    max-width: 550px;
    margin: 0 auto;
}

.project-process-section .process-subtitle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.project-process-section .process-subtitle-line {
    display: inline-block;
    width: 30px;
    height: 2px;
    background-color: #011673;
}

.project-process-section .process-subtitle-text {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #011673;
    text-transform: none;
}

.project-process-section .process-title {
    font-size: 32px;
    font-weight: 800;
    color: #111111;
    line-height: 1.25;
    margin-bottom: 20px;
}

.project-process-section .process-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #555555;
}

.project-process-section .process-desc p {
    margin-bottom: 15px;
}

.project-process-section .process-desc p:last-child {
    margin-bottom: 0;
}

.project-process-section .process-image-wrap {
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    background-color: #FFFFFF;
}

.project-process-section .process-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 4/3;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-process-section .process-image-wrap:hover .process-img {
    transform: scale(1.03);
}

/* Fallback raw content styles */
.project-process-section .process-raw-content {
    background-color: #FFFFFF;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* ============================================= */
/* Responsive for Project Detail                 */
/* ============================================= */
@media (max-width: 1199px) {
    .project-banner-section {
        min-height: 350px;
        padding: 80px 0;
    }

    .project-banner-title {
        font-size: 32px;
    }

    .project-slider-section .section-title {
        font-size: 30px;
        margin-bottom: 40px;
    }

    .project-process-section .process-title {
        font-size: 28px;
    }
}

@media (max-width: 991px) {
    .project-process-section .process-row {
        flex-direction: column !important;
        margin-bottom: 60px;
    }

    .project-process-section .process-content-col,
    .project-process-section .process-image-col {
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
    }

    .project-process-section .process-content-col {
        margin-bottom: 30px;
    }

    .project-process-section .process-content {
        max-width: 100%;
    }

    .project-swiper .slide-image-wrap {
        aspect-ratio: 16/9;
    }
}

@media (max-width: 767px) {
    .logo-section img {
        object-fit: contain;
    }

    .project-banner-section {
        min-height: 280px;
        padding: 60px 0;
    }

    .project-banner-title {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .project-banner-breadcrumbs {
        font-size: 13px;
    }

    .project-banner-breadcrumbs span {
        max-width: 180px;
    }

    .project-slider-section {
        padding: 50px 0;
    }

    .project-slider-section .section-title {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .project-process-section {
        padding: 50px 0;
    }

    .project-process-section .process-title {
        font-size: 22px;
        margin-bottom: 16px;
    }

    .project-process-section .process-subtitle {
        margin-bottom: 10px;
    }

    .project-process-section .process-desc {
        font-size: 14px;
        line-height: 1.6;
    }
}

/* ============================================= */
/* Project List (view_list_projects) Custom Styles*/
/* ============================================= */

.project-list-section {
    padding: 80px 0;
    background-color: #FFFFFF;
}

.project-list-cat-title {
    font-size: 36px;
    font-weight: 700;
    text-transform: none;
    color: #1E232D;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 0.5px;
}

.project-list-cat-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #555555;
}

.project-list-cat-desc p {
    margin-bottom: 16px;
}

.project-list-cat-desc h1,
.project-list-cat-desc h2,
.project-list-cat-desc h3,
.project-list-cat-desc h4 {
    font-weight: 700;
    color: #1E232D;
    margin-top: 24px;
    margin-bottom: 16px;
}

.project-list-cat-desc h3 {
    font-size: 20px;
}

/* Grid & Cards */
.project-list-grid {
    margin-top: 30px;
}

.project-item-card {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    background-color: #F8FAFC;
    aspect-ratio: 4/3;
    transition: all 0.3s ease;
}

.project-item-img-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.project-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-item-overlay-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: background 0.3s ease;
    z-index: 2;
}

.project-item-title-box {
    background-color: rgba(1, 22, 115, 0.78);
    /* Màu xanh navy mờ */
    padding: 16px 24px;
    border-radius: 2px;
    max-width: 85%;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 3;
}

.project-item-title-text {
    font-size: 17px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.4;
    display: block;
}

/* Hover Effects */
.project-item-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.project-item-card:hover .project-item-img {
    transform: scale(1.04);
}

.project-item-card:hover .project-item-overlay-title {
    background: rgba(0, 0, 0, 0.25);
}

.project-item-card:hover .project-item-title-box {
    background-color: rgba(1, 22, 115, 0.9);
    /* Đậm màu hơn và mờ ít hơn */
    transform: scale(1.02);
}

.project-list-pagination-wrap .pagination {
    justify-content: center;
    margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 1199px) {
    .project-list-section {
        padding: 60px 0;
    }

    .project-list-cat-title {
        font-size: 30px;
    }

    .project-item-title-text {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .project-list-section {
        padding: 40px 0;
    }

    .project-list-cat-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .project-list-cat-desc {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 40px;
    }

    .project-item-title-box {
        padding: 12px 18px;
        max-width: 90%;
    }

    .project-item-title-text {
        font-size: 14px;
    }
}

.project-list-grid-title {
    font-size: 28px;
    font-weight: 700;
    color: #1E232D;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 40px;
}

@media (max-width: 767px) {
    .project-list-grid-title {
        font-size: 20px;
        margin-top: 30px;
        margin-bottom: 24px;
    }
}

/* ============================================= */
/* Contact Page (view_contact_page_content_main) */
/* ============================================= */

.contact-page-section {
    padding: 80px 0;
    background-color: #FFFFFF;
}

.contact-form-title {
    font-size: 32px;
    font-weight: 700;
    color: #011673;
    position: relative;
    padding-top: 15px;
    margin-top: 0;
    margin-bottom: 12px;
}

.contact-form-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: #011673;
}

.contact-form-desc {
    font-size: 15px;
    line-height: 1.5;
    color: #555555;
    margin-bottom: 40px;
}

.contact-page-form .form-label {
    font-size: 15px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 8px;
    display: inline-block;
}

.contact-page-form .required-star {
    color: #E9272C;
    margin-left: 2px;
}

.contact-page-form .form-control {
    background-color: #E5E7EB;
    /* Màu xám nhạt như ảnh */
    border: none;
    border-radius: 4px;
    height: 48px;
    padding: 12px 16px;
    font-size: 15px;
    color: #1D1D1F;
    transition: all 0.3s ease;
}

.contact-page-form .form-control:focus {
    background-color: #F3F4F6;
    outline: none;
    box-shadow: 0 0 0 2px rgba(1, 22, 115, 0.1);
}

.contact-page-form .text-area-requirement {
    height: 120px !important;
    resize: none;
}

.btn-submit-contact-custom {
    background-color: #011673;
    /* Nút xanh navy đậm */
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 16px;
    padding: 12px 36px;
    border-radius: 30px;
    /* Dạng pill */
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-submit-contact-custom:hover {
    background-color: #010F4F;
    box-shadow: 0 4px 15px rgba(1, 22, 115, 0.25);
    transform: translateY(-1px);
}

.form-policy-note-custom {
    font-size: 13px;
    font-style: italic;
    color: #1E232D;
    margin-top: 16px;
}

.form-policy-note-custom a {
    color: #011673;
    text-decoration: underline;
}

/* Mạng xã hội */
.contact-social-wrap {
    border-top: 1px solid #E5E7EB;
    padding-top: 30px;
}

.contact-social-label {
    font-size: 16px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 16px;
}

span.info-text {
    margin-left: 5px;
}

.contact-social-item-link {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF !important;
    font-size: 18px;
    margin-right: 8px;
    text-decoration: none;
    border-radius: 8px;
    /* Bo góc vuông tròn nhẹ như ảnh */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.contact-social-item-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.social-facebook {
    background-color: #3B5998;
}

.social-youtube {
    background-color: #FF0000;
}

.social-linkedin {
    background-color: #0077B5;
}

.social-tiktok {
    background-color: #000000;
}

.social-zalo {
    background-color: #0068FF;
    padding: 0;
    overflow: hidden;
}

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

.social-zalo .zalo-fallback-text {
    font-size: 11px;
    font-weight: 700;
}

/* Cột phải: Map & Info Box */
.contact-info-box {
    background-color: #D1D5DB;
    /* Viền/nền xám đậm bao quanh như ảnh */
    padding: 24px;
    border-radius: 0;
    border: 1px solid #9CA3AF;
    height: 100%;
}

.contact-map-wrap {
    width: 100%;
    aspect-ratio: 4/3;
    background-color: #FFFFFF;
    padding: 8px;
    /* Khung viền trắng mỏng bao quanh bản đồ */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.contact-map-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.contact-company-details {
    padding-top: 10px;
}

.contact-company-name {
    font-size: 20px;
    font-weight: 700;
    color: #011673;
    margin-bottom: 20px;
    text-transform: none;
}

.contact-company-info-list li {
    font-size: 15px;
    line-height: 1.6;
    color: #111111;
}

.contact-company-info-list li .info-icon {
    font-size: 16px;
    color: #011673;
    width: 20px;
    display: inline-flex;
    justify-content: center;
    margin-top: 4px;
}

.contact-company-info-list li a {
    color: #111111;
    text-decoration: none;
}

.contact-company-info-list li a:hover {
    color: #011673;
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 1199px) {
    .contact-form-title {
        font-size: 28px;
    }
}

@media (max-width: 991px) {
    .contact-page-section {
        padding: 60px 0;
    }

    .contact-form-column {
        margin-bottom: 50px;
    }
}

@media (max-width: 767px) {
    .contact-page-section {
        padding: 40px 0;
    }

    .contact-form-title {
        font-size: 24px;
    }

    .contact-form-desc {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .contact-info-box {
        padding: 16px;
    }

    .contact-company-name {
        font-size: 18px;
    }

    .contact-company-info-list li {
        font-size: 14px;
    }
}

/* ============================================= */
/* Contact Page FAQ (view_contact_page_faq)      */
/* ============================================= */
.contact-faq-section {
    padding: 60px 0;
    background-color: #FFFFFF;
}

.contact-faq-title {
    font-size: 28px;
    font-weight: 700;
    color: #011673;
    margin-bottom: 24px;
}

.contact-faq-item-box {
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(1, 22, 115, 0.1);
}

.contact-faq-item-header {
    background-color: #011673;
    color: #FFFFFF;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: background-color 0.3s ease;
}

.contact-faq-item-header:hover {
    background-color: #0220a3;
}

.contact-faq-icon-indicator {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-left: 15px;
}

.contact-faq-icon-indicator::before,
.contact-faq-icon-indicator::after {
    content: '';
    position: absolute;
    background-color: #FFFFFF;
    transition: transform 0.3s ease;
}

.contact-faq-icon-indicator::before {
    top: 6px;
    left: 0;
    width: 14px;
    height: 2px;
}

.contact-faq-icon-indicator::after {
    top: 0;
    left: 6px;
    width: 2px;
    height: 14px;
}

.contact-faq-item-header.collapsed .contact-faq-icon-indicator::after {
    transform: scaleY(1);
}

.contact-faq-item-header:not(.collapsed) .contact-faq-icon-indicator::after {
    transform: scaleY(0);
}

.contact-faq-item-body {
    background-color: #E5E7EB;
    color: #111111;
    padding: 20px 24px;
    font-size: 15px;
    line-height: 1.6;
}

.contact-faq-item-body a {
    color: #0068FF;
    font-weight: 700;
    text-decoration: none;
}

.contact-faq-item-body a:hover {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .contact-faq-section {
        padding: 40px 0;
    }

    .contact-faq-title {
        font-size: 22px;
    }

    .contact-faq-item-header {
        padding: 12px 18px;
        font-size: 14px;
    }

    .contact-faq-item-body {
        padding: 16px 18px;
        font-size: 14px;
    }
}

/* ============================================= */
/* Contact Clients Feedback (view_contact_page_khach_hang) */
/* ============================================= */
.contact-clients-section {
    padding: 60px 0;
    background-color: #FFFFFF;
}

.contact-clients-title {
    font-size: 28px;
    font-weight: 700;
    color: #011673;
    margin-bottom: 24px;
}

.contact-clients-slider-container {
    padding: 0 45px;
}

.contact-client-card {
    background-color: #E5E7EB;
    padding: 30px;
    border-radius: 4px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(1, 22, 115, 0.05);
}

.contact-client-top {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.contact-client-avatar-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contact-client-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-client-info {
    flex-grow: 1;
}

.contact-client-name {
    font-size: 16px;
    font-weight: 700;
    color: #011673;
    margin-bottom: 4px;
}

.contact-client-position {
    font-size: 13px;
    font-weight: 600;
    color: #011673;
    opacity: 0.85;
    display: block;
    line-height: 1.4;
}

.contact-client-divider {
    width: 32px;
    height: 3px;
    background-color: #011673;
    margin-bottom: 20px;
    margin-left: auto;
    /* Căn phải thanh ngang phân cách */
}

.contact-client-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.contact-client-comment {
    font-size: 14px;
    line-height: 1.6;
    color: #111111;
    text-align: justify;
    margin-bottom: 24px;
}

.contact-client-quote-icon {
    align-self: flex-end;
    margin-top: auto;
}

.contact-client-quote-icon svg {
    display: block;
    opacity: 0.85;
}

.contact-clients-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 50px;
    margin-top: 0;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-clients-nav::after {
    display: none;
    /* Ẩn icon mặc định của Swiper */
}

.contact-clients-nav.swiper-button-prev {
    left: 0;
}

.contact-clients-nav.swiper-button-next {
    right: 0;
}

.contact-clients-nav svg path {
    transition: stroke 0.3s ease;
}

.contact-clients-nav:hover svg path {
    stroke: #011673;
}

@media (max-width: 767px) {
    .contact-clients-section {
        padding: 40px 0;
    }

    .contact-clients-title {
        font-size: 22px;
        margin-bottom: 16px;
    }

    .contact-clients-slider-container {
        padding: 0 30px;
    }

    .contact-client-card {
        padding: 20px;
    }

    .contact-client-avatar-wrap {
        width: 56px;
        height: 56px;
    }

    .contact-client-name {
        font-size: 15px;
    }

    .contact-client-position {
        font-size: 12px;
    }

    .contact-client-comment {
        font-size: 13px;
        margin-bottom: 16px;
    }

    .contact-clients-nav {
        width: 20px;
        height: 35px;
    }

    .contact-clients-nav svg {
        width: 15px;
        height: 26px;
    }
}

.partner-logo-img {
    transform: scale(3) !important;
}

.bn-about-intro__content {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

.bn-about-intro__content::before,
.bn-about-intro__content::after {
    background: transparent !important;
    background-image: none !important;
    display: none !important;
}

.bn-about-foundation__title,
.bn-about-foundation__item-title {
    color: #E9272C !important;
}

.bn-about-foundation__item-desc {
    color: #1D1D1F !important;
}

/* =========================================================
   Standardize Article Item (Blog Grid & Slider)
   ========================================================= */
.article-item {
    font-family: "SF Pro Display", system-ui, -apple-system, sans-serif;
    height: 100%;
}

.article-item .border-gray {
    border-radius: var(--bn-radius) !important;
    border: 1px solid var(--bn-border) !important;
    transition: all 0.3s ease;
    background-color: var(--bn-white);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.article-item:hover .border-gray {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(1, 22, 115, 0.08);
}

.article-item .inner-image {
    border-radius: var(--bn-radius) var(--bn-radius) 0 0;
    overflow: hidden;
}

.article-item .inner-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.article-item .article-title {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
}

.article-item .article-title a {
    color: var(--bn-dark) !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.article-item .article-title a:hover {
    color: var(--bn-primary) !important;
}

.article-item .article-description {
    font-size: 1.4rem;
    color: var(--bn-muted) !important;
    line-height: 1.5;
    margin-bottom: 20px;
}

.article-item .post-date {
    font-size: 1.3rem;
    color: var(--bn-muted) !important;
    margin-bottom: 10px;
}

.article-item .post-date span {
    color: var(--bn-primary) !important;
    font-weight: 700;
    font-size: 1.8rem;
}

/* Đồng bộ nút Xem thêm (Read more) */
.article-item .btn-submit-1 {
    font-family: "SF Pro Display", sans-serif;
    font-weight: 510;
    font-size: 1.4rem;
    padding: 8px 24px;
    border-radius: var(--bn-radius);
    border: 1px solid var(--color-highlight) !important;
    background-color: transparent !important;
    color: var(--color-highlight) !important;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: auto;
}

.article-item .btn-submit-1:hover {
    background-color: var(--color-highlight) !important;
    color: var(--bn-white) !important;
    box-shadow: 0 4px 12px rgba(233, 39, 44, 0.2);
}

/* ============================================= */
/* Certificate & Awards Section                  */
/* ============================================= */
.ec-cert-section,
.ec-video-section {
    padding: 60px 0;
    background-color: #fff;
}

.ec-cert-header {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    position: relative;
}

.ec-cert-title {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--bn-primary);
    margin: 0;
    padding-right: 30px;
    white-space: nowrap;
    position: relative;
    z-index: 2;
    background-color: #fff;
}

.ec-cert-header::after {
    content: '';
    flex: 1;
    height: 16px;
    background: repeating-linear-gradient(45deg,
            #e0e0e0,
            #e0e0e0 2px,
            transparent 2px,
            transparent 8px);
    display: inline-block;
    position: relative;
    top: 4px;
}

.ec-cert-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ec-cert-img-wrap {
    margin-bottom: 15px;
}

.ec-cert-img {
    width: 100%;
    object-fit: contain;
    border: 1px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ec-cert-img-wrap a:hover .ec-cert-img {
    transform: scale(1.02);
}

.ec-cert-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--bn-primary);
    line-height: 1.5;
    margin: 0;
}

.ec-cert-desc {
    font-size: 1.6rem;
    color: var(--bn-muted);
    margin-top: 8px;
}

/* ============================================= */
/* Video Section Styles                          */
/* ============================================= */
.ec-video-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ec-video-img-wrap {
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.ec-video-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ec-video-img-wrap:hover .ec-video-img {
    transform: scale(1.05);
}

.ec-video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    z-index: 2;
}

.ec-video-play-btn i {
    font-size: 24px;
    color: #1a1f6e;
    margin-left: 4px;
}

.ec-video-img-wrap:hover .ec-video-play-btn {
    background-color: #e9272c;
}

.ec-video-img-wrap:hover .ec-video-play-btn i {
    color: #fff;
}

.ec-video-name {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    line-height: 1.4;
    color: var(--bn-primary);
}

.ec-video-name a {
    color: var(--bn-primary);
    transition: color 0.3s ease;
}

.ec-video-name a:hover {
    color: var(--bn-primary);
}

.ec-video-desc {
    font-size: 1.4rem;
    color: var(--bn-muted);
    line-height: 1.6;
}

@media (max-width: 767px) {
    .ec-cert-title {
        font-size: 2.4rem;
        padding-right: 15px;
    }

    .ec-cert-header::after {
        height: 10px;
    }
}

/* ============================================= */
/* Embed Responsive Video Support                */
/* ============================================= */
.ec-video-media-wrap {
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    background-color: #000;
}

.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.embed-responsive::before {
    display: block;
    content: "";
}

.embed-responsive-16by9::before {
    padding-top: 56.25%;
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* ======================================================
   INTRO SECTION - TITLE / SUBTITLE NEW ORDER
====================================================== */

.ec-intro .ec-intro__title {
    margin: 0 0 16px;
    color: #011673;
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-transform: none;
}

.ec-intro .ec-intro__subtitle--below {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0 0 24px;
}

.ec-intro .ec-intro__subtitle--below .ec-intro__subtitle-text {
    color: #011673;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1.2px;
    text-transform: none;
}

.ec-intro .ec-intro__subtitle-underline {
    display: block;
    width: 120px;
    height: 4px;
    margin-top: 14px;
    background-color: #E9272C;
}

/* Khoảng cách từ phần gạch đỏ xuống description */
.ec-intro .ec-intro__desc {
    margin-top: 0;
}

/* Mobile */
@media (max-width: 767px) {
    .ec-intro .ec-intro__title {
        margin-bottom: 14px;
        font-size: 2.8rem;
    }

    .ec-intro .ec-intro__subtitle--below {
        margin-bottom: 20px;
    }

    .ec-intro .ec-intro__subtitle--below .ec-intro__subtitle-text {
        font-size: 1.5rem;
        letter-spacing: 0.8px;
    }

    .ec-intro .ec-intro__subtitle-underline {
        width: 90px;
        height: 3px;
        margin-top: 12px;
    }
}
/* CATEGORY LEVEL 2 - INTRO SECTION */

.ec-category-page .ec-intro__title {
    margin: 0 0 16px !important;
}

.ec-category-page .ec-intro__subtitle {
    display: block !important;
    margin: 0 0 24px !important;
}

.ec-category-page .ec-intro__subtitle-text {
    display: block;
    color: #011673;
    font-weight: 700;
    line-height: 1.5;
}

.ec-category-page .ec-intro__subtitle-underline {
    display: block;
    width: 120px;
    height: 4px;
    margin-top: 14px;
    background-color: #E9272C;
}

.ec-category-page .ec-intro__btn,
.ec-category-page .ec-intro__btn span {
    font-style: normal !important;
}

/* =========================================================
   CATEGORY LEVEL 2 - DESIGN SYSTEM SYNC
   Đồng bộ với giao diện Homepage Binhnam Aluminium
   ========================================================= */

.ec-category-page {
    /* Màu sắc */
    --ec-primary: #011673;
    --ec-deep: #010F4F;
    --ec-navy-bg: #010B3A;
    --ec-red: #E9272C;
    --ec-text: #1E232D;
    --ec-strong: #1D1D1F;
    --ec-muted: #5C667A;
    --ec-light: #F5F7FB;
    --ec-border: #D9E1F2;
    --ec-white: #FFFFFF;

    /* Kích thước */
    --ec-h1-size: 48px;
    --ec-h2-size: 32px;
    --ec-h3-size: 20px;
    --ec-body-size: 16px;

    /* Component */
    --ec-radius: 8px;
    --ec-underline-width: 96px;
    --ec-underline-height: 3px;

    font-family:
        "SF Pro Display",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--ec-text);
}


/* =========================================================
   1. PAGE TITLE - H1
   ========================================================= */

.ec-category-page .ec-intro__title {
    margin: 0 0 16px;
    color: var(--ec-primary);
    font-size: var(--ec-h1-size);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-transform: none;
}


/* =========================================================
   2. MAIN SECTION TITLES - H2
   ========================================================= */

.ec-category-page .ec-desc__title,
.ec-category-page .ec-choose__title,
.ec-category-page .ec-spec__title,
.ec-category-page .ec-products__title,
.ec-category-page .ec-types__title,
.ec-category-page .ec-cta-banner__title,
.ec-category-page .ec-features__title,
.ec-category-page .ec-adv__title,
.ec-category-page .ec-app__title,
.ec-category-page .ec-visit__title,
.ec-category-page .ec-process__title,
.ec-category-page .ec-faq__title {
    margin: 0 0 16px;
    color: var(--ec-primary);
    font-size: var(--ec-h2-size);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.03em;
    text-transform: none;
}


/* Title nằm trên nền tối */

.ec-category-page .ec-cta-banner__title,
.ec-category-page .ec-process__title {
    color: var(--ec-white);
}


/* =========================================================
   3. STANDARD RED UNDERLINE
   ========================================================= */

.ec-category-page .ec-intro__title::after,
.ec-category-page .ec-desc__title::after,
.ec-category-page .ec-choose__title::after,
.ec-category-page .ec-spec__title::after,
.ec-category-page .ec-products__title::after,
.ec-category-page .ec-types__title::after,
.ec-category-page .ec-cta-banner__title::after,
.ec-category-page .ec-features__title::after,
.ec-category-page .ec-adv__title::after,
.ec-category-page .ec-app__title::after,
.ec-category-page .ec-visit__title::after,
.ec-category-page .ec-process__title::after,
.ec-category-page .ec-faq__title::after {
    content: "";
    display: block;
    width: var(--ec-underline-width);
    height: var(--ec-underline-height);
    margin-top: 16px;
    background-color: var(--ec-red);
    border-radius: 0;
}


/* Các heading căn giữa */

.ec-category-page .ec-desc__title::after,
.ec-category-page .ec-choose__title::after,
.ec-category-page .ec-spec__title::after,
.ec-category-page .ec-products__title::after,
.ec-category-page .ec-types__title::after,
.ec-category-page .ec-cta-banner__title::after,
.ec-category-page .ec-features__title::after,
.ec-category-page .ec-adv__title::after,
.ec-category-page .ec-app__title::after,
.ec-category-page .ec-visit__title::after,
.ec-category-page .ec-process__title::after,
.ec-category-page .ec-faq__title::after {
    margin-left: auto;
    margin-right: auto;
}


/*
 * Loại bỏ những đường cũ để không xuất hiện hai gạch:
 * - Gạch đỏ cũ nằm dưới subtitle Intro
 * - Separator màu xám của Description
 */

.ec-category-page .ec-intro__subtitle-underline,
.ec-category-page .ec-desc__separator {
    display: none;
}


/* Khoảng cách sau title */

.ec-category-page .ec-choose__grid {
    margin-top: 40px;
}

.ec-category-page .ec-spec__table,
.ec-category-page .ec-products__grid,
.ec-category-page .ec-types__grid,
.ec-category-page .ec-features__grid {
    margin-top: 32px;
}


/* =========================================================
   4. SUBTITLE / SECTION LABEL
   ========================================================= */

.ec-category-page .ec-intro__subtitle-text,
.ec-category-page .ec-spec__subtitle-text,
.ec-category-page .ec-products__subtitle-text,
.ec-category-page .ec-types__subtitle-text,
.ec-category-page .ec-features__subtitle-text,
.ec-category-page .ec-app__subtitle-text,
.ec-category-page .ec-visit__subtitle-text,
.ec-category-page .ec-faq__subtitle-text {
    color: var(--ec-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1px;
    text-transform: none;
}


/* Đổi các đường trang trí cạnh subtitle sang màu đỏ */

.ec-category-page .ec-spec__subtitle-line,
.ec-category-page .ec-products__subtitle-line,
.ec-category-page .ec-types__subtitle-line,
.ec-category-page .ec-features__subtitle-line,
.ec-category-page .ec-app__subtitle-line,
.ec-category-page .ec-visit__subtitle-line,
.ec-category-page .ec-faq__subtitle-line {
    width: 40px;
    height: 2px;
    background-color: var(--ec-red);
}


/* =========================================================
   5. DESCRIPTION / BODY TEXT
   ========================================================= */

.ec-category-page .ec-intro__desc,
.ec-category-page .ec-desc__text,
.ec-category-page .ec-choose__card-desc,
.ec-category-page .ec-types__desc,
.ec-category-page .ec-types__card-desc,
.ec-category-page .ec-features__desc,
.ec-category-page .ec-feature-item__body,
.ec-category-page .ec-adv__card-desc,
.ec-category-page .ec-app__card-desc,
.ec-category-page .ec-visit__desc,
.ec-category-page .ec-visit__card-desc,
.ec-category-page .ec-faq__desc,
.ec-category-page .ec-faq-item__content {
    color: var(--ec-text);
    font-size: var(--ec-body-size);
    font-weight: 500;
    line-height: 1.6;
}


/* Description trên nền tối */

.ec-category-page .ec-cta-banner__desc,
.ec-category-page .ec-process__desc {
    color: rgba(255, 255, 255, 0.86);
    font-size: var(--ec-body-size);
    font-weight: 500;
    line-height: 1.6;
}


/* Xóa khoảng trắng thừa ở paragraph cuối */

.ec-category-page .ec-intro__desc p:last-child,
.ec-category-page .ec-desc__text p:last-child,
.ec-category-page .ec-choose__card-desc p:last-child,
.ec-category-page .ec-types__desc p:last-child,
.ec-category-page .ec-types__card-desc p:last-child,
.ec-category-page .ec-features__desc p:last-child,
.ec-category-page .ec-feature-item__body p:last-child,
.ec-category-page .ec-adv__card-desc p:last-child,
.ec-category-page .ec-app__card-desc p:last-child,
.ec-category-page .ec-visit__desc p:last-child,
.ec-category-page .ec-visit__card-desc p:last-child,
.ec-category-page .ec-process__desc p:last-child,
.ec-category-page .ec-faq__desc p:last-child,
.ec-category-page .ec-faq-item__content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   6. CARD / SUBSECTION TITLES - H3
   ========================================================= */

.ec-category-page .ec-choose__card-title,
.ec-category-page .ec-types__card-title,
.ec-category-page .ec-feature-item__title,
.ec-category-page .ec-adv__card-title,
.ec-category-page .ec-app__card-title,
.ec-category-page .ec-visit__card-title,
.ec-category-page .ec-faq__col-title,
.ec-category-page .ec-faq-item__title {
    margin-top: 0;
    color: var(--ec-primary);
    font-size: var(--ec-h3-size);
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}


/* Card title trên nền tối */

.ec-category-page .ec-process__step {
    color: var(--ec-white);
    font-size: var(--ec-h3-size);
    font-weight: 700;
    line-height: 1.3;
}


/* =========================================================
   7. CTA BUTTONS
   ========================================================= */

.ec-category-page .ec-intro__btn,
.ec-category-page .ec-choose__btn,
.ec-category-page .ec-spec__btn,
.ec-category-page .ec-products__btn,
.ec-category-page .ec-cta-banner__btn,
.ec-category-page .ec-features__btn,
.ec-category-page .ec-visit__btn,
.ec-category-page .ec-process__btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-height: 56px;
    max-width: 100%;
    padding: 0 28px;

    background-color: var(--ec-red);
    border: 1px solid var(--ec-red);
    border-radius: var(--ec-radius);

    color: var(--ec-white);
    font-family: inherit;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;

    box-shadow: none;
    transform: none;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.2s ease;
}

.ec-category-page .ec-intro__btn span {
    color: inherit;
    font: inherit;
    font-style: normal;
}


/* CTA hover */

.ec-category-page .ec-intro__btn:hover,
.ec-category-page .ec-choose__btn:hover,
.ec-category-page .ec-spec__btn:hover,
.ec-category-page .ec-products__btn:hover,
.ec-category-page .ec-cta-banner__btn:hover,
.ec-category-page .ec-features__btn:hover,
.ec-category-page .ec-visit__btn:hover,
.ec-category-page .ec-process__btn:hover {
    background-color: var(--ec-navy-bg);
    border-color: var(--ec-navy-bg);
    color: var(--ec-white);
    text-decoration: none;
    box-shadow: none;
    transform: translateY(-2px);
}


/* =========================================================
   8. CARD RADIUS AND BORDER
   ========================================================= */

.ec-category-page .ec-intro__img-wrap,
.ec-category-page .ec-choose__card,
.ec-category-page .ec-types__card,
.ec-category-page .ec-adv__card,
.ec-category-page .ec-faq__box,
.ec-category-page .ec-visit__video-wrap {
    border-radius: var(--ec-radius);
}

.ec-category-page .ec-choose__card,
.ec-category-page .ec-types__card,
.ec-category-page .ec-adv__card,
.ec-category-page .ec-faq__box {
    border: 1px solid var(--ec-border);
}


/* =========================================================
   9. RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 991px) {
    .ec-category-page {
        --ec-h1-size: 40px;
        --ec-h2-size: 30px;
    }
}


/* =========================================================
   10. RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 767px) {
    .ec-category-page {
        --ec-h1-size: 34px;
        --ec-h2-size: 28px;
        --ec-h3-size: 20px;
        --ec-body-size: 15px;

        --ec-underline-width: 80px;
        --ec-underline-height: 3px;
    }

    .ec-category-page .ec-intro__title,
    .ec-category-page .ec-desc__title,
    .ec-category-page .ec-choose__title,
    .ec-category-page .ec-spec__title,
    .ec-category-page .ec-products__title,
    .ec-category-page .ec-types__title,
    .ec-category-page .ec-cta-banner__title,
    .ec-category-page .ec-features__title,
    .ec-category-page .ec-adv__title,
    .ec-category-page .ec-app__title,
    .ec-category-page .ec-visit__title,
    .ec-category-page .ec-process__title,
    .ec-category-page .ec-faq__title {
        margin-bottom: 16px;
    }

    .ec-category-page .ec-intro__title::after,
    .ec-category-page .ec-desc__title::after,
    .ec-category-page .ec-choose__title::after,
    .ec-category-page .ec-spec__title::after,
    .ec-category-page .ec-products__title::after,
    .ec-category-page .ec-types__title::after,
    .ec-category-page .ec-cta-banner__title::after,
    .ec-category-page .ec-features__title::after,
    .ec-category-page .ec-adv__title::after,
    .ec-category-page .ec-app__title::after,
    .ec-category-page .ec-visit__title::after,
    .ec-category-page .ec-process__title::after,
    .ec-category-page .ec-faq__title::after {
        margin-top: 12px;
    }

    .ec-category-page .ec-intro__subtitle-text,
    .ec-category-page .ec-spec__subtitle-text,
    .ec-category-page .ec-products__subtitle-text,
    .ec-category-page .ec-types__subtitle-text,
    .ec-category-page .ec-features__subtitle-text,
    .ec-category-page .ec-app__subtitle-text,
    .ec-category-page .ec-visit__subtitle-text,
    .ec-category-page .ec-faq__subtitle-text {
        font-size: 14px;
        letter-spacing: 0.8px;
    }

    .ec-category-page .ec-intro__btn,
    .ec-category-page .ec-choose__btn,
    .ec-category-page .ec-spec__btn,
    .ec-category-page .ec-products__btn,
    .ec-category-page .ec-cta-banner__btn,
    .ec-category-page .ec-features__btn,
    .ec-category-page .ec-visit__btn,
    .ec-category-page .ec-process__btn {
        width: 100%;
        max-width: 240px;
        min-height: 48px;
        padding: 12px 20px;
        font-size: 16px;
    }

    .ec-category-page .ec-choose__grid {
        margin-top: 32px;
    }
}

/* ============================================= */
/* LEVEL 1 - CLICKABLE CHILD CATEGORY CARD       */
/* ============================================= */

.ec-types--child-categories .ec-l1-category-link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.ec-types--child-categories .ec-l1-category-link:hover,
.ec-types--child-categories .ec-l1-category-link:focus {
    color: inherit;
    text-decoration: none;
}

.ec-types--child-categories .ec-l1-category-link .ec-types__card {
    height: 100%;
}

.ec-types--child-categories .ec-l1-category-link--static {
    cursor: default;
}

.ec-types--child-categories .ec-l1-category-link:focus-visible {
    outline: 2px solid #011673;
    outline-offset: 4px;
}

/* =========================================================
   Homepage Product Slider
   ========================================================= */

.home-product-slider-section {
    position: relative;
    width: 100%;
}

.home-product-slider-header {
    max-width: 940px;
    margin: 0 auto 56px;
    text-align: center;
}

.home-product-slider-title {
    margin: 0;
    color: var(--bn-primary);
    font-size: var(--bn-title-size);
    font-weight: 700;
    line-height: var(--bn-title-line-height);
    letter-spacing: -0.03em;
    text-transform: none;
}

.home-product-slider-title::after {
    content: "";
    display: block;
    width: var(--bn-underline-width);
    height: var(--bn-underline-height);
    margin: 16px auto 0;
    background-color: var(--bn-red);
}

.home-product-slider {
    position: relative;
    width: 100%;
    padding: 4px 4px 56px;
}

.home-product-slider .swiper-wrapper {
    align-items: stretch;
}

.home-product-slider .swiper-slide {
    height: auto;
}

.home-product-slider .swiper-pagination {
    bottom: 0;
}

.home-product-slider .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    background-color: var(--bn-border);
    opacity: 1;
}

.home-product-slider .swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 10px;
    background-color: var(--bn-red);
}

.home-product-slider .swiper-button-next,
.home-product-slider .swiper-button-prev {
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border: 1px solid var(--bn-border);
    border-radius: 50%;
    background-color: var(--bn-white);
    color: var(--bn-primary);
    box-shadow: 0 4px 14px rgba(1, 22, 115, 0.08);
    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease,
        transform 0.3s ease;
}

.home-product-slider .swiper-button-next:hover,
.home-product-slider .swiper-button-prev:hover {
    border-color: var(--bn-primary);
    background-color: var(--bn-primary);
    color: var(--bn-white);
    transform: translateY(-2px);
}

.home-product-slider .swiper-button-next::after,
.home-product-slider .swiper-button-prev::after {
    display: none;
}

.home-product-slider .swiper-button-next i,
.home-product-slider .swiper-button-prev i {
    color: inherit;
    font-size: 18px;
    line-height: 1;
}

.home-product-slider-empty {
    padding: 40px 0;
    color: var(--bn-muted);
    font-size: 16px;
    text-align: center;
}

@media (max-width: 767px) {
    .home-product-slider-header {
        margin-bottom: 40px;
    }

    .home-product-slider-title {
        font-size: var(--bn-title-size-sm);
        line-height: 1.3;
    }

    .home-product-slider-title::after {
        width: var(--bn-underline-width-sm);
        margin-top: 12px;
    }

    .home-product-slider {
        padding-bottom: 48px;
    }

    .home-product-slider .swiper-button-next,
    .home-product-slider .swiper-button-prev {
        display: none;
    }
}

.rating-title {
    color: #011673;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
}

/* Search results nằm bên dưới ô nhập */
.header-search-popup form,
.header-search-popup .box-suggest {
    position: relative;
}

.header-search-popup .wrap-suggestion {
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 1000 !important;
}

/* Search page: khoảng cách giữa tiêu đề và danh sách kết quả */
div[nh-row="srchart01"] .title-section {
    margin-bottom: 32px;
}

.search-result-title {
    margin: 0 0 32px;
    color: #011673;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: left;
    text-transform: none;
}

.search-result-title::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin-top: 14px;
    background-color: #E9272C;
}

@media (max-width: 767px) {
    .search-result-title {
        margin-bottom: 24px;
        font-size: 22px;
    }

    .search-result-title::after {
        width: 64px;
        margin-top: 12px;
    }
}

/* =========================================================
   SEARCH PAGE - MAIN TITLE
   ========================================================= */

.search-page-header .search-page-title {
    margin: 0 0 32px;
    color: #011673;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.03em;
    text-align: center;
    text-transform: none;
}

.search-page-header .search-page-title::after {
    content: "";
    display: block;
    width: 96px;
    height: 3px;
    margin: 16px auto 0;
    background-color: #E9272C;
}

@media (max-width: 767px) {
    .search-page-header .search-page-title {
        margin-bottom: 24px;
        font-size: 28px;
    }

    .search-page-header .search-page-title::after {
        width: 80px;
        margin-top: 14px;
    }
}

.search-empty-result {
    margin: 32px 0 48px;
    padding: 20px 24px;
    color: #1E232D;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    background-color: #F5F7FB;
    border: 1px solid #D9E1F2;
    border-left: 4px solid #E9272C;
    border-radius: 8px;
}

@media (max-width: 767px) {
    .search-empty-result {
        margin: 24px 0 40px;
        padding: 16px;
        font-size: 15px;
    }
}

.rating-form-heading {
    margin: 0 0 20px;
    color: #011673;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}